Add info and dialog for if split tunneling is unsupported

8 files changed, 131 insertions, 6 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/LinuxSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/LinuxSettings.tsx
index 1fa1115e81..50a4d2d617 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/LinuxSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/LinuxSettings.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 import { strings } from '../../../../../../shared/constants';
-import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
 import { Flex, Spinner } from '../../../../../lib/components';
 import { FlexColumn } from '../../../../../lib/components/flex-column';
@@ -10,7 +9,13 @@ import { useEffectEvent } from '../../../../../lib/utility-hooks';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from '../../../../SettingsHeader';
 import { ApplicationSearchBar } from '../application-search-bar';
 import { ApplicationSearchNoResult } from '../application-search-no-result';
-import { LaunchErrorDialog, LinuxApplicationList, OpenFilePickerButton } from './components';
+import {
+  HeaderDescription,
+  LaunchErrorDialog,
+  LinuxApplicationList,
+  OpenFilePickerButton,
+  UnsupportedDialog,
+} from './components';
 import { useShowLinuxApplicationList, useShowNoSearchResult, useShowSpinner } from './hooks';
 import { LinuxSettingsContextProvider, useLinuxSettingsContext } from './LinuxSettingsContext';
 
@@ -52,10 +57,7 @@ function LinuxSettingsInner() {
       <SettingsHeader>
         <HeaderTitle>{strings.splitTunneling}</HeaderTitle>
         <HeaderSubTitle>
-          {messages.pgettext(
-            'split-tunneling-view',
-            'Click on an app to launch it. Its traffic will bypass the VPN tunnel until you close it.',
-          )}
+          <HeaderDescription />
         </HeaderSubTitle>
       </SettingsHeader>
       <ApplicationSearchBar
@@ -76,6 +78,7 @@ function LinuxSettingsInner() {
         </Flex>
       </FlexColumn>
       <LaunchErrorDialog />
+      <UnsupportedDialog />
     </>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx
new file mode 100644
index 0000000000..bb6a602731
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/HeaderDescription.tsx
@@ -0,0 +1,59 @@
+import { sprintf } from 'sprintf-js';
+
+import { strings } from '../../../../../../../../shared/constants';
+import { messages } from '../../../../../../../../shared/gettext';
+import { Icon, Link } from '../../../../../../../lib/components';
+import { FlexColumn } from '../../../../../../../lib/components/flex-column';
+import { FlexRow } from '../../../../../../../lib/components/flex-row';
+import { useLinuxSettingsContext } from '../../LinuxSettingsContext';
+import { useShowUnsupportedDialog } from './hooks';
+
+export function HeaderDescription() {
+  const { splitTunnelingSupported } = useLinuxSettingsContext();
+  const message = sprintf(
+    // TRANSLATORS: Information about split tunneling not being supported on the system.
+    // TRANSLATORS: Available placeholders:
+    // TRANSLATORS: %(splitTunneling)s - will be replaced with Split tunneling
+    messages.pgettext(
+      'split-tunneling-view',
+      '%(splitTunneling)s is not supported by your system.',
+    ),
+    {
+      splitTunneling: strings.splitTunneling,
+    },
+  );
+  const showUnsupportedDialog = useShowUnsupportedDialog();
+
+  if (splitTunnelingSupported === false) {
+    return (
+      <FlexRow>
+        <FlexColumn $justifyContent="center" $margin={{ right: 'small' }}>
+          <Icon size="small" color="whiteAlpha60" icon="info-circle" />
+        </FlexColumn>
+        <FlexColumn>
+          <span>
+            {message}
+            &nbsp;
+            <Link
+              aria-description={message}
+              as="button"
+              onClick={showUnsupportedDialog}
+              variant="labelTiny">
+              <Link.Text>
+                {
+                  // TRANSLATORS: Link for learning more
+                  messages.pgettext('split-tunneling-view', 'Click here to learn more')
+                }
+              </Link.Text>
+            </Link>
+          </span>
+        </FlexColumn>
+      </FlexRow>
+    );
+  }
+
+  return messages.pgettext(
+    'split-tunneling-view',
+    'Click on an app to launch it. Its traffic will bypass the VPN tunnel until you close it.',
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/hooks/index.ts
new file mode 100644
index 0000000000..4b2b16cffb
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/hooks/index.ts
@@ -0,0 +1 @@
+export * from './use-show-unsupported-dialog';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/hooks/use-show-unsupported-dialog.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/hooks/use-show-unsupported-dialog.ts
new file mode 100644
index 0000000000..fd4bbc531a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/hooks/use-show-unsupported-dialog.ts
@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+import { useLinuxSettingsContext } from '../../../LinuxSettingsContext';
+
+export function useShowUnsupportedDialog() {
+  const { setShowUnsupportedDialog } = useLinuxSettingsContext();
+
+  const showUnsupportedDialog = useCallback(() => {
+    setShowUnsupportedDialog(true);
+  }, [setShowUnsupportedDialog]);
+
+  return showUnsupportedDialog;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/index.ts
new file mode 100644
index 0000000000..52c084e8ff
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/header-description/index.ts
@@ -0,0 +1 @@
+export * from './HeaderDescription';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/index.ts
index 6dd9b7e1cb..15401396b3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/index.ts
@@ -1,3 +1,5 @@
+export * from './header-description';
 export * from './launch-error-dialog';
 export * from './linux-application-list';
 export * from './open-file-picker-button';
+export * from './unsupported-dialog';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/unsupported-dialog/UnsupportedDialog.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/unsupported-dialog/UnsupportedDialog.tsx
new file mode 100644
index 0000000000..220596e4bb
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/unsupported-dialog/UnsupportedDialog.tsx
@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import { sprintf } from 'sprintf-js';
+
+import { strings } from '../../../../../../../../shared/constants';
+import { messages } from '../../../../../../../../shared/gettext';
+import { Button } from '../../../../../../../lib/components';
+import { ModalAlert, ModalAlertType } from '../../../../../../Modal';
+import { useLinuxSettingsContext } from '../../LinuxSettingsContext';
+
+export function UnsupportedDialog() {
+  const { showUnsupportedDialog, setShowUnsupportedDialog } = useLinuxSettingsContext();
+  const hideUnsupportedDialog = useCallback(() => {
+    setShowUnsupportedDialog(false);
+  }, [setShowUnsupportedDialog]);
+
+  const unsupportedMessage = sprintf(
+    // TRANSLATORS: Information about split tunneling being unavailable due to
+    // TRANSLATORS: missing support in the user's operating system.
+    // TRANSLATORS: Available placeholders:
+    // TRANSLATORS: %(splitTunneling)s - will be replaced with Split tunneling
+    messages.pgettext(
+      'split-tunneling-view',
+      'To use %(splitTunneling)s, please change to a Linux kernel version that supports cgroup v1.',
+    ),
+    {
+      splitTunneling: strings.splitTunneling,
+    },
+  );
+
+  const buttons = [
+    <Button key="cancel" onClick={hideUnsupportedDialog}>
+      <Button.Text>{messages.gettext('Got it!')}</Button.Text>
+    </Button>,
+  ];
+
+  return (
+    <ModalAlert
+      isOpen={showUnsupportedDialog}
+      type={ModalAlertType.info}
+      message={unsupportedMessage}
+      buttons={buttons}
+      close={hideUnsupportedDialog}
+    />
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/unsupported-dialog/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/unsupported-dialog/index.ts
new file mode 100644
index 0000000000..499647a433
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/components/unsupported-dialog/index.ts
@@ -0,0 +1 @@
+export * from './UnsupportedDialog';