Merge branch 'add-split-tunneling-toggle'

6 files changed, 59 insertions, 79 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d8683a32c..9f5f627aa0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ Line wrap the file at 100 chars.                                              Th
 - Detect mounting and dismounting of volumes, such as VeraCrypt volumes or USB drives,
   and exclude paths from the tunnel correctly when these occur. This sometimes only works
   when the GUI frontend is running.
+- Add toggle for split tunneling state.
 
 ### Changed
 - Decrease the size of fonts, some icons and other design elements in the desktop app. This makes it
diff --git a/gui/locales/messages.pot b/gui/locales/messages.pot
index 6effa79b61..403347d5a7 100644
--- a/gui/locales/messages.pot
+++ b/gui/locales/messages.pot
@@ -329,10 +329,6 @@ msgid "OpenVPN settings"
 msgstr ""
 
 msgctxt "advanced-settings-view"
-msgid "Split tunneling"
-msgstr ""
-
-msgctxt "advanced-settings-view"
 msgid "The app’s built-in kill switch is always on. This setting will additionally block the internet if clicking Disconnect or Quit."
 msgstr ""
 
@@ -1100,11 +1096,6 @@ msgctxt "settings-view"
 msgid "Update available. Install the latest app version to stay up to date."
 msgstr ""
 
-#. Title label in navigation bar
-msgctxt "split-tunneling-nav"
-msgid "Split tunneling"
-msgstr ""
-
 msgctxt "split-tunneling-view"
 msgid "%(applicationName)s is problematic and can’t be excluded from the VPN tunnel."
 msgstr ""
@@ -1163,14 +1154,6 @@ msgid "Please try again or contact support."
 msgstr ""
 
 msgctxt "split-tunneling-view"
-msgid "Split tunneling"
-msgstr ""
-
-msgctxt "split-tunneling-view"
-msgid "Split tunneling has been disabled from the CLI and will automatically be enabled when adding or removing applications from the lists below."
-msgstr ""
-
-msgctxt "split-tunneling-view"
 msgid "Try a different search."
 msgstr ""
 
@@ -1466,6 +1449,9 @@ msgstr ""
 msgid "Shows reminders when the account time is about to expire"
 msgstr ""
 
+msgid "Split tunneling"
+msgstr ""
+
 msgid "Split tunneling makes it possible to select which applications should not be routed through the VPN tunnel."
 msgstr ""
 
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 43f105ce2d..28f73ac9e0 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -466,9 +466,9 @@ export default class AppRenderer {
     return IpcRendererEventChannel.linuxSplitTunneling.launchApplication(application);
   }
 
-  public setSplitTunnelingState(enabled: boolean): Promise<void> {
+  public setSplitTunnelingState = (enabled: boolean): Promise<void> => {
     return IpcRendererEventChannel.windowsSplitTunneling.setState(enabled);
-  }
+  };
 
   public addSplitTunnelingApplication(application: IApplication | string): Promise<void> {
     return IpcRendererEventChannel.windowsSplitTunneling.addApplication(application);
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 998996e1ab..8ecf6c0052 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -131,9 +131,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                 {(window.env.platform === 'linux' || window.env.platform === 'win32') && (
                   <Cell.CellButtonGroup>
                     <Cell.CellButton onClick={this.props.onViewSplitTunneling}>
-                      <Cell.Label>
-                        {messages.pgettext('advanced-settings-view', 'Split tunneling')}
-                      </Cell.Label>
+                      <Cell.Label>Split tunneling</Cell.Label>
                       <Cell.Icon height={12} width={7} source="icon-chevron" />
                     </Cell.CellButton>
                   </Cell.CellButtonGroup>
diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index 017e226b1a..b6f2e3bd89 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -36,13 +36,15 @@ import {
   StyledNoResultText,
   StyledSearchContainer,
   StyledNoResult,
-  StyledDisabledWarning,
   StyledActionIcon,
   StyledCellWarningIcon,
   StyledListContainer,
+  StyledHeaderTitleContainer,
+  StyledHeaderTitle,
 } from './SplitTunnelingSettingsStyles';
 import { formatMarkdown } from '../markdown-formatter';
 import { BackAction } from './KeyboardNavigation';
+import Switch from './Switch';
 
 export default function SplitTunneling() {
   const { pop } = useHistory();
@@ -60,12 +62,7 @@ export default function SplitTunneling() {
             <NavigationContainer>
               <NavigationBar>
                 <NavigationItems>
-                  <TitleBarItem>
-                    {
-                      // TRANSLATORS: Title label in navigation bar
-                      messages.pgettext('split-tunneling-nav', 'Split tunneling')
-                    }
-                  </TitleBarItem>
+                  <TitleBarItem>Split tunneling</TitleBarItem>
                 </NavigationItems>
               </NavigationBar>
 
@@ -159,7 +156,7 @@ function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps
   return (
     <>
       <SettingsHeader>
-        <HeaderTitle>{messages.pgettext('split-tunneling-view', 'Split tunneling')}</HeaderTitle>
+        <HeaderTitle>Split tunneling</HeaderTitle>
         <HeaderSubTitle>
           {messages.pgettext(
             'split-tunneling-view',
@@ -370,14 +367,18 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
     await filePickerCallback();
   }, [filePickerCallback, props.scrollToTop]);
 
-  const showSplitSection = filteredSplitApplications.length > 0;
+  const showSplitSection = splitTunnelingEnabled && filteredSplitApplications.length > 0;
   const showNonSplitSection =
-    !filteredNonSplitApplications || filteredNonSplitApplications.length > 0;
+    splitTunnelingEnabled &&
+    (!filteredNonSplitApplications || filteredNonSplitApplications.length > 0);
 
   return (
     <>
       <SettingsHeader>
-        <HeaderTitle>{messages.pgettext('split-tunneling-view', 'Split tunneling')}</HeaderTitle>
+        <StyledHeaderTitleContainer>
+          <StyledHeaderTitle>Split tunneling</StyledHeaderTitle>
+          <Switch isOn={splitTunnelingEnabled} onChange={setSplitTunnelingState} />
+        </StyledHeaderTitleContainer>
         <HeaderSubTitle>
           {messages.pgettext(
             'split-tunneling-view',
@@ -386,48 +387,35 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
         </HeaderSubTitle>
       </SettingsHeader>
 
-      {!splitTunnelingEnabled && filteredSplitApplications?.length > 0 && (
-        <StyledDisabledWarning>
-          {messages.pgettext(
-            'split-tunneling-view',
-            'Split tunneling has been disabled from the CLI and will automatically be enabled when adding or removing applications from the lists below.',
-          )}
-        </StyledDisabledWarning>
-      )}
-
-      <SearchBar searchTerm={searchTerm} onSearch={setSearchTerm} />
+      {splitTunnelingEnabled && <SearchBar searchTerm={searchTerm} onSearch={setSearchTerm} />}
 
-      {(showSplitSection || showNonSplitSection) && (
-        <>
-          <Accordion expanded={showSplitSection}>
-            <Cell.Section>
-              <Cell.SectionTitle>
-                {messages.pgettext('split-tunneling-view', 'Excluded apps')}
-              </Cell.SectionTitle>
-              <ApplicationList
-                applications={filteredSplitApplications}
-                onRemove={removeApplication}
-                rowComponent={ApplicationRow}
-              />
-            </Cell.Section>
-          </Accordion>
+      <Accordion expanded={showSplitSection}>
+        <Cell.Section>
+          <Cell.SectionTitle>
+            {messages.pgettext('split-tunneling-view', 'Excluded apps')}
+          </Cell.SectionTitle>
+          <ApplicationList
+            applications={filteredSplitApplications}
+            onRemove={removeApplication}
+            rowComponent={ApplicationRow}
+          />
+        </Cell.Section>
+      </Accordion>
 
-          <Accordion expanded={showNonSplitSection}>
-            <Cell.Section>
-              <Cell.SectionTitle>
-                {messages.pgettext('split-tunneling-view', 'All apps')}
-              </Cell.SectionTitle>
-              <ApplicationList
-                applications={filteredNonSplitApplications}
-                onSelect={addApplication}
-                rowComponent={ApplicationRow}
-              />
-            </Cell.Section>
-          </Accordion>
-        </>
-      )}
+      <Accordion expanded={showNonSplitSection}>
+        <Cell.Section>
+          <Cell.SectionTitle>
+            {messages.pgettext('split-tunneling-view', 'All apps')}
+          </Cell.SectionTitle>
+          <ApplicationList
+            applications={filteredNonSplitApplications}
+            onSelect={addApplication}
+            rowComponent={ApplicationRow}
+          />
+        </Cell.Section>
+      </Accordion>
 
-      {searchTerm !== '' && !showSplitSection && !showNonSplitSection && (
+      {splitTunnelingEnabled && searchTerm !== '' && !showSplitSection && !showNonSplitSection && (
         <StyledNoResult>
           <StyledNoResultText>
             {formatMarkdown(
@@ -443,9 +431,11 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
         </StyledNoResult>
       )}
 
-      <StyledBrowseButton onClick={addWithFilePicker}>
-        {messages.pgettext('split-tunneling-view', 'Find another app')}
-      </StyledBrowseButton>
+      {splitTunnelingEnabled && (
+        <StyledBrowseButton onClick={addWithFilePicker}>
+          {messages.pgettext('split-tunneling-view', 'Find another app')}
+        </StyledBrowseButton>
+      )}
     </>
   );
 }
diff --git a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index b907171d8d..054415db2a 100644
--- a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -2,10 +2,11 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { normalText, smallText } from './common-styles';
+import { normalText } from './common-styles';
 import ImageView from './ImageView';
 import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
+import { HeaderTitle } from './SettingsHeader';
 
 export const StyledPageCover = styled.div({}, (props: { show: boolean }) => ({
   position: 'absolute',
@@ -159,7 +160,11 @@ export const StyledNoResultText = styled(Cell.FooterText)({
   textAlign: 'center',
 });
 
-export const StyledDisabledWarning = styled.span(smallText, {
-  margin: '0 22px 18px',
-  color: colors.red,
+export const StyledHeaderTitleContainer = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const StyledHeaderTitle = styled(HeaderTitle)({
+  flex: 1,
 });