diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx | 16 | ||||
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts | 5 |
2 files changed, 18 insertions, 3 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx index 514ef34882..d30fb71d3f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx @@ -16,6 +16,7 @@ import { } from '../../shared/notifications'; import { useAppContext } from '../context'; import useActions from '../lib/actionsHook'; +import { Icon } from '../lib/components'; import { Colors } from '../lib/foundations'; import { transitions, useHistory } from '../lib/history'; import { formatHtml } from '../lib/html-formatter'; @@ -27,6 +28,7 @@ import { RoutePath } from '../lib/routes'; import accountActions from '../redux/account/actions'; import { IReduxState, useSelector } from '../redux/store'; import * as AppButton from './AppButton'; +import { ExternalLink } from './ExternalLink'; import { InternalLink } from './InternalLink'; import { ModalAlert, ModalAlertType, ModalMessage, ModalMessageList } from './Modal'; import { @@ -143,17 +145,25 @@ export default function NotificationArea(props: IProps) { <NotificationSubtitle data-testid="notificationSubTitle"> {Array.isArray(notification.subtitle) ? notification.subtitle.map((subtitle, index, arr) => { - const content = - subtitle.action && subtitle.action.type === 'navigate-internal' ? ( + const content = subtitle.action ? ( + subtitle.action.type === 'navigate-internal' ? ( <InternalLink variant="labelTiny" color={Colors.white60} {...subtitle.action.link}> {formatHtml(subtitle.content)} </InternalLink> + ) : subtitle.action.type === 'navigate-external' ? ( + <ExternalLink variant="labelTiny" {...subtitle.action.link}> + {formatHtml(subtitle.content)} + <Icon icon="external" size="small" /> + </ExternalLink> ) : ( formatHtml(subtitle.content) - ); + ) + ) : ( + formatHtml(subtitle.content) + ); return ( <span key={index}> diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts index 4ee2fafaef..fa31004d6a 100644 --- a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts +++ b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts @@ -1,3 +1,4 @@ +import { ExternalLinkProps } from '../../renderer/components/ExternalLink'; import { InternalLinkProps } from '../../renderer/components/InternalLink'; import { Url } from '../constants'; @@ -33,6 +34,10 @@ export type InAppNotificationAction = | { type: 'navigate-internal'; link: Pick<InternalLinkProps, 'to' | 'onClick' | 'aria-label'>; + } + | { + type: 'navigate-external'; + link: Pick<ExternalLinkProps, 'to' | 'onClick' | 'aria-label'>; }; export type InAppNotificationIndicatorType = 'success' | 'warning' | 'error'; |