Add daemon restart button to split tunneling settings on MacOS

CHANGELOG.md

@@ -31,6 +31,8 @@ Line wrap the file at 100 chars.                                              Th
 
 #### macOS
 - Detect whether full disk access is enabled in the split tunneling view.
+- Add button to restart system service in split tunneling view. This can help mitigate edge-case
+  issues when enabling full disk access.
 
 ### Changed
 - Replace the draft key encapsulation mechanism Kyber (round 3) with the standardized

desktop/packages/mullvad-vpn/locales/messages.pot

@@ -1571,6 +1571,10 @@ msgctxt "split-tunneling-view"
 msgid "Click on an app to launch it. Its traffic will bypass the VPN tunnel until you close it."
 msgstr ""
 
+msgctxt "split-tunneling-view"
+msgid "Enabled \"Full disk access\" and still having issues?"
+msgstr ""
+
 msgctxt "split-tunneling-view"
 msgid "Excluded apps"
 msgstr ""
@@ -1587,6 +1591,10 @@ msgctxt "split-tunneling-view"
 msgid "Launch"
 msgstr ""
 
+msgctxt "split-tunneling-view"
+msgid "Open System Settings"
+msgstr ""
+
 #. This error message is shown if the user tries to launch a Linux desktop
 #. entry file that doesn't contain the required 'Exec' value.
 msgctxt "split-tunneling-view"
@@ -1600,6 +1608,10 @@ msgctxt "split-tunneling-view"
 msgid "Please try again or send a problem report."
 msgstr ""
 
+msgctxt "split-tunneling-view"
+msgid "Restart Mullvad Service"
+msgstr ""
+
 msgctxt "split-tunneling-view"
 msgid "To use split tunneling please enable “Full disk access” for “Mullvad VPN” in the macOS system settings."
 msgstr ""

desktop/packages/mullvad-vpn/src/main/index.ts

@@ -877,6 +877,10 @@ class ApplicationMain
       return this.daemonRpc.updateCustomList(customList);
     });
 
+    IpcMainEventChannel.daemon.handlePrepareRestart((shutdown) => {
+      return this.daemonRpc.prepareRestart(shutdown);
+    });
+
     problemReport.registerIpcListeners();
     this.userInterface!.registerIpcListeners();
     this.settings.registerIpcListeners();

desktop/packages/mullvad-vpn/src/renderer/app.tsx

@@ -385,6 +385,9 @@ export default class AppRenderer {
   public getMapData = () => IpcRendererEventChannel.map.getData();
   public setAnimateMap = (displayMap: boolean): void =>
     IpcRendererEventChannel.guiSettings.setAnimateMap(displayMap);
+  public daemonPrepareRestart = (shutdown: boolean): void => {
+    IpcRendererEventChannel.daemon.prepareRestart(shutdown);
+  };
 
   public login = async (accountNumber: AccountNumber) => {
     const actions = this.reduxActions;

desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx

@@ -36,3 +36,7 @@ export const Footer = styled.div({
   paddingRight: measurements.viewMargin,
   paddingBottom: measurements.viewMargin,
 });
+
+export const Spacing = styled.div<{ height: string }>((props) => ({
+  height: props.height,
+}));

desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx

@@ -20,7 +20,7 @@ import * as Cell from './cell';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import { Layout, SettingsContainer, Spacing } from './Layout';
 import List from './List';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
@@ -37,13 +37,14 @@ import {
   StyledIcon,
   StyledIconPlaceholder,
   StyledListContainer,
+  StyledMiniTitle,
   StyledNavigationScrollbars,
   StyledNoResult,
   StyledNoResultText,
   StyledPageCover,
   StyledSearchBar,
   StyledSpinnerRow,
-  StyledSystemSettingsButton,
+  WideSmallButton,
 } from './SplitTunnelingSettingsStyles';
 import Switch from './Switch';
 
@@ -534,7 +535,8 @@ interface MacOsSplitTunnelingAvailabilityProps {
 function MacOsSplitTunnelingAvailability({
   needFullDiskPermissions,
 }: MacOsSplitTunnelingAvailabilityProps) {
-  const { showFullDiskAccessSettings } = useAppContext();
+  const { showFullDiskAccessSettings, daemonPrepareRestart } = useAppContext();
+  const restartDaemon = useCallback(() => daemonPrepareRestart(true), [daemonPrepareRestart]);
 
   return (
     <>
@@ -546,9 +548,21 @@ function MacOsSplitTunnelingAvailability({
               'To use split tunneling please enable “Full disk access” for “Mullvad VPN” in the macOS system settings.',
             )}
           </HeaderSubTitle>
-          <StyledSystemSettingsButton onClick={showFullDiskAccessSettings}>
-            Open System Settings
-          </StyledSystemSettingsButton>
+          <Spacing height="24px" />
+          <WideSmallButton onClick={showFullDiskAccessSettings}>
+            {messages.pgettext('split-tunneling-view', 'Open System Settings')}
+          </WideSmallButton>
+          <Spacing height="32px" />
+          <StyledMiniTitle>
+            {messages.pgettext(
+              'split-tunneling-view',
+              'Enabled "Full disk access" and still having issues?',
+            )}
+          </StyledMiniTitle>
+          <Spacing height="8px" />
+          <WideSmallButton onClick={restartDaemon}>
+            {messages.pgettext('split-tunneling-view', 'Restart Mullvad Service')}
+          </WideSmallButton>
         </>
       ) : null}
     </>

desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { measurements, normalText } from './common-styles';
+import { measurements, miniText, normalText } from './common-styles';
 import ImageView from './ImageView';
 import { NavigationScrollbars } from './NavigationBar';
 import SearchBar from './SearchBar';
@@ -118,13 +118,21 @@ export const StyledHeaderTitle = styled(HeaderTitle)({
   flex: 1,
 });
 
+export const StyledMiniTitle = styled.span({
+  ...miniText,
+  color: colors.white60,
+});
+
 export const StyledSearchBar = styled(SearchBar)({
   marginLeft: measurements.viewMargin,
   marginRight: measurements.viewMargin,
   marginBottom: measurements.buttonVerticalMargin,
 });
 
-export const StyledSystemSettingsButton = styled(SmallButton)({
+export const WideSmallButton = styled(SmallButton)({
   width: '100%',
-  marginTop: '24px',
 });
+
+export const Spacing = styled.div<{ height: string }>((props) => ({
+  height: props.height,
+}));

desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts

@@ -10,6 +10,13 @@ export const sourceSansPro: React.CSSProperties = {
   fontFamily: '"Source Sans Pro", "Noto Sans Myanmar", "Noto Sans Thai", sans-serif',
 };
 
+export const miniText = {
+  ...openSans,
+  fontSize: '10px',
+  fontWeight: 600,
+  lineHeight: '15px',
+};
+
 export const tinyText = {
   ...openSans,
   fontSize: '12px',

desktop/packages/mullvad-vpn/src/shared/ipc-schema.ts

@@ -140,6 +140,7 @@ export const ipcSchema = {
     daemonAllowed: notifyRenderer<boolean>(),
     connected: notifyRenderer<void>(),
     disconnected: notifyRenderer<void>(),
+    prepareRestart: send<boolean>(),
   },
   relays: {
     '': notifyRenderer<IRelayListWithEndpointData>(),