Support notification subtitles composed of multiple elements

3 files changed, 43 insertions, 23 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
index b0588e6c0d..514ef34882 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
@@ -141,16 +141,28 @@ export default function NotificationArea(props: IProps) {
               {notification.title}
             </NotificationTitle>
             <NotificationSubtitle data-testid="notificationSubTitle">
-              {notification.subtitleAction?.type === 'navigate-internal' ? (
-                <InternalLink
-                  variant="labelTiny"
-                  color={Colors.white60}
-                  {...notification.subtitleAction.link}>
-                  {formatHtml(notification.subtitle ?? '')}
-                </InternalLink>
-              ) : (
-                formatHtml(notification.subtitle ?? '')
-              )}
+              {Array.isArray(notification.subtitle)
+                ? notification.subtitle.map((subtitle, index, arr) => {
+                    const content =
+                      subtitle.action && subtitle.action.type === 'navigate-internal' ? (
+                        <InternalLink
+                          variant="labelTiny"
+                          color={Colors.white60}
+                          {...subtitle.action.link}>
+                          {formatHtml(subtitle.content)}
+                        </InternalLink>
+                      ) : (
+                        formatHtml(subtitle.content)
+                      );
+
+                    return (
+                      <span key={index}>
+                        {content}
+                        {index !== arr.length - 1 && ' '}
+                      </span>
+                    );
+                  })
+                : formatHtml(notification.subtitle ?? '')}
             </NotificationSubtitle>
           </NotificationContent>
           {notification.action && (
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/new-version.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/new-version.ts
index 337ba016c5..0bccec27a0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/new-version.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/new-version.ts
@@ -27,18 +27,22 @@ export class NewVersionNotificationProvider implements InAppNotificationProvider
       indicator: 'success',
       action: { type: 'close', close: this.context.close },
       title,
-      subtitle,
-      subtitleAction: {
-        type: 'navigate-internal',
-        link: {
-          to: RoutePath.changelog,
-          onClick: this.context.close,
-          'aria-label': messages.pgettext(
-            'accessibility',
-            'New version installed, click here to see the changelog',
-          ),
+      subtitle: [
+        {
+          content: subtitle,
+          action: {
+            type: 'navigate-internal',
+            link: {
+              to: RoutePath.changelog,
+              onClick: this.context.close,
+              'aria-label': messages.pgettext(
+                'accessibility',
+                'New version installed, click here to see the changelog',
+              ),
+            },
+          },
         },
-      },
+      ],
     };
   }
 }
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
index 80a40deef2..4ee2fafaef 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
@@ -69,8 +69,12 @@ export interface InAppNotification {
   indicator?: InAppNotificationIndicatorType;
   action?: InAppNotificationAction;
   title: string;
-  subtitle?: string;
-  subtitleAction?: InAppNotificationAction;
+  subtitle?: string | InAppNotificationSubtitle[];
+}
+
+export interface InAppNotificationSubtitle {
+  content: string;
+  action?: InAppNotificationAction;
 }
 
 export interface SystemNotificationProvider extends NotificationProvider {