Merge branch 'add-split-tunneling-toggle'

5 files changed, 58 insertions, 79 deletions

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,
 });