Add in app notification dialog specification

3 files changed, 73 insertions, 2 deletions

diff --git a/gui/src/shared/localization-contexts.ts b/gui/src/shared/localization-contexts.ts
index 8e8c3930be..d342a4210e 100644
--- a/gui/src/shared/localization-contexts.ts
+++ b/gui/src/shared/localization-contexts.ts
@@ -33,4 +33,5 @@ export type LocalizationContexts =
   | 'support-view'
   | 'select-language-nav'
   | 'tray-icon-context-menu'
-  | 'tray-icon-tooltip';
+  | 'tray-icon-tooltip'
+  | 'troubleshoot';
diff --git a/gui/src/shared/notifications/error.ts b/gui/src/shared/notifications/error.ts
index 7134f0ec36..4970fccbaa 100644
--- a/gui/src/shared/notifications/error.ts
+++ b/gui/src/shared/notifications/error.ts
@@ -11,6 +11,7 @@ import {
 import { messages } from '../gettext';
 import {
   InAppNotification,
+  InAppNotificationAction,
   InAppNotificationProvider,
   SystemNotification,
   SystemNotificationCategory,
@@ -77,6 +78,7 @@ export class ErrorNotificationProvider
           ? messages.pgettext('in-app-notifications', 'NETWORK TRAFFIC MIGHT BE LEAKING')
           : messages.pgettext('in-app-notifications', 'BLOCKING INTERNET'),
         subtitle,
+        action: getActions(this.context.tunnelState.details) ?? undefined,
       };
     } else {
       return undefined;
@@ -203,3 +205,63 @@ function getTunnelParameterMessage(error: TunnelParameterError): string {
       );
   }
 }
+
+function getActions(errorState: ErrorState): InAppNotificationAction | void {
+  const platform = process.platform ?? window.env.platform;
+
+  if (errorState.cause === ErrorStateCause.setFirewallPolicyError && platform === 'linux') {
+    return {
+      type: 'info-dialog',
+      details: messages.pgettext(
+        'troubleshoot',
+        'This can happen because the kernel is old, or if you have removed a kernel.',
+      ),
+      troubleshoot: [
+        messages.pgettext('troubleshoot', 'Update your kernel.'),
+        messages.pgettext('troubleshoot', 'Make sure you have NF tables support.'),
+      ],
+    };
+  } else if (errorState.cause === ErrorStateCause.setDnsError) {
+    const troubleshootSteps = [];
+    if (platform === 'darwin') {
+      troubleshootSteps.push(
+        messages.pgettext(
+          'troubleshoot',
+          'Try to turn Wi-Fi Calling off in the FaceTime app settings and restart the Mac.',
+        ),
+        messages.pgettext(
+          'troubleshoot',
+          'Uninstall or disable other DNS, networking and ads/website blocking apps.',
+        ),
+      );
+    } else if (platform === 'win32') {
+      troubleshootSteps.push(
+        messages.pgettext(
+          'troubleshoot',
+          'Uninstall or disable other DNS, networking and ads/website blocking apps.',
+        ),
+      );
+    }
+
+    return {
+      type: 'info-dialog',
+      details: messages.pgettext(
+        'troubleshoot',
+        'This error can happen when something other than Mullvad is actively updating the DNS.',
+      ),
+      troubleshoot: troubleshootSteps,
+    };
+  } else if (errorState.cause === ErrorStateCause.splitTunnelError) {
+    return {
+      type: 'info-dialog',
+      details: messages.pgettext(
+        'troubleshoot',
+        'Unable to communicate with Mullvad kernel driver.',
+      ),
+      troubleshoot: [
+        messages.pgettext('troubleshoot', 'Try reconnecting.'),
+        messages.pgettext('troubleshoot', 'Try restarting your device.'),
+      ],
+    };
+  }
+}
diff --git a/gui/src/shared/notifications/notification.ts b/gui/src/shared/notifications/notification.ts
index 10b5b21fc8..5264dd7305 100644
--- a/gui/src/shared/notifications/notification.ts
+++ b/gui/src/shared/notifications/notification.ts
@@ -5,6 +5,14 @@ export type NotificationAction = {
   withAuth?: boolean;
 };
 
+export type InAppNotificationAction =
+  | NotificationAction
+  | {
+      type: 'info-dialog';
+      details: string;
+      troubleshoot: string[];
+    };
+
 export type InAppNotificationIndicatorType = 'success' | 'warning' | 'error';
 
 export enum SystemNotificationSeverityType {
@@ -39,7 +47,7 @@ export interface InAppNotification {
   indicator?: InAppNotificationIndicatorType;
   title: string;
   subtitle?: string;
-  action?: NotificationAction;
+  action?: InAppNotificationAction;
 }
 
 export interface SystemNotificationProvider extends NotificationProvider {