Add run function action to notifications

2 files changed, 19 insertions, 1 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
index 71045a2bfd..038d611af1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { InAppNotificationSubtitle } from '../../shared/notifications';
-import { LabelTiny } from '../lib/components';
+import { LabelTiny, Link } from '../lib/components';
 import { formatHtml } from '../lib/html-formatter';
+import { buttonReset } from '../lib/styles';
 import { ExternalLink } from './ExternalLink';
 import { InternalLink } from './InternalLink';
 
@@ -10,6 +12,10 @@ export type NotificationSubtitleProps = {
   subtitle?: string | InAppNotificationSubtitle[];
 };
 
+const StyledLink = styled(Link)({
+  ...buttonReset,
+});
+
 const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
   const content = formatHtml(subtitle.content);
   if (subtitle.action) {
@@ -27,6 +33,13 @@ const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
             <ExternalLink.Icon icon="external" />
           </ExternalLink>
         );
+      case 'run-function':
+        return (
+          <StyledLink color="whiteAlpha60" forwardedAs="button" {...subtitle.action.button}>
+            {content}
+          </StyledLink>
+        );
+
       default:
         break;
     }
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
index fa31004d6a..f78fa61ed2 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
@@ -1,5 +1,6 @@
 import { ExternalLinkProps } from '../../renderer/components/ExternalLink';
 import { InternalLinkProps } from '../../renderer/components/InternalLink';
+import { ButtonProps } from '../../renderer/lib/components';
 import { Url } from '../constants';
 
 export type NotificationAction = {
@@ -38,6 +39,10 @@ export type InAppNotificationAction =
   | {
       type: 'navigate-external';
       link: Pick<ExternalLinkProps, 'to' | 'onClick' | 'aria-label'>;
+    }
+  | {
+      type: 'run-function';
+      button: Pick<ButtonProps, 'onClick' | 'aria-label'>;
     };
 
 export type InAppNotificationIndicatorType = 'success' | 'warning' | 'error';