diff options
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} + + <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'; |