Add navigate-external notification type

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';