Add start minimized toggle to Preferences screen

4 files changed, 86 insertions, 31 deletions

diff --git a/gui/packages/desktop/src/renderer/app.js b/gui/packages/desktop/src/renderer/app.js
index 57101411fc..356973a380 100644
--- a/gui/packages/desktop/src/renderer/app.js
+++ b/gui/packages/desktop/src/renderer/app.js
@@ -351,6 +351,10 @@ export default class AppRenderer {
     actions.settings.updateAutoConnect(autoConnect);
   }
 
+  async setStartMinimized(startMinimized: boolean) {
+    IpcEventChannel.guiSettings.setStartMinimized(startMinimized);
+  }
+
   async _onDaemonConnected() {
     this._connectedToDaemon = true;
 
diff --git a/gui/packages/desktop/src/renderer/components/Preferences.js b/gui/packages/desktop/src/renderer/components/Preferences.js
index 9409432563..7e82516b68 100644
--- a/gui/packages/desktop/src/renderer/components/Preferences.js
+++ b/gui/packages/desktop/src/renderer/components/Preferences.js
@@ -5,17 +5,25 @@ import { Component, View } from 'reactxp';
 import { SettingsHeader, HeaderTitle } from '@mullvad/components';
 import * as Cell from './Cell';
 import { Layout, Container } from './Layout';
-import { NavigationBar, BackBarItem } from './NavigationBar';
+import {
+  NavigationBar,
+  NavigationContainer,
+  NavigationScrollbars,
+  BackBarItem,
+} from './NavigationBar';
 import Switch from './Switch';
 import styles from './PreferencesStyles';
 
 export type PreferencesProps = {
   autoConnect: boolean,
   allowLan: boolean,
+  enableStartMinimizedToggle: boolean,
+  startMinimized: boolean,
   getAutoStart: () => boolean,
   setAutoStart: (boolean) => void,
   setAutoConnect: (boolean) => void,
   setAllowLan: (boolean) => void,
+  setStartMinimized: (boolean) => void,
   onClose: () => void,
 };
 
@@ -38,41 +46,52 @@ export default class Preferences extends Component<PreferencesProps, State> {
       <Layout>
         <Container>
           <View style={styles.preferences}>
-            <NavigationBar>
-              <BackBarItem action={this.props.onClose} title={'Settings'} />
-            </NavigationBar>
+            <NavigationContainer>
+              <NavigationBar>
+                <BackBarItem action={this.props.onClose} title={'Settings'} />
+              </NavigationBar>
 
-            <View style={styles.preferences__container}>
-              <SettingsHeader>
-                <HeaderTitle>Preferences</HeaderTitle>
-              </SettingsHeader>
+              <View style={styles.preferences__container}>
+                <NavigationScrollbars>
+                  <SettingsHeader>
+                    <HeaderTitle>Preferences</HeaderTitle>
+                  </SettingsHeader>
 
-              <View style={styles.preferences__content}>
-                <Cell.Container>
-                  <Cell.Label>Auto-connect</Cell.Label>
-                  <Switch isOn={this.props.autoConnect} onChange={this.props.setAutoConnect} />
-                </Cell.Container>
-                <Cell.Footer>
-                  Automatically connect to the VPN at the earliest moment during computer boot-up.
-                </Cell.Footer>
+                  <View style={styles.preferences__content}>
+                    <Cell.Container>
+                      <Cell.Label>Auto-connect</Cell.Label>
+                      <Switch isOn={this.props.autoConnect} onChange={this.props.setAutoConnect} />
+                    </Cell.Container>
+                    <Cell.Footer>
+                      Automatically connect to the VPN at the earliest moment during computer
+                      boot-up.
+                    </Cell.Footer>
 
-                <Cell.Container>
-                  <Cell.Label>Auto-launch</Cell.Label>
-                  <Switch isOn={this.state.autoStart} onChange={this._onChangeAutoStart} />
-                </Cell.Container>
-                <Cell.Footer>
-                  Automatically launch the app when logging in to the computer.
-                </Cell.Footer>
+                    <Cell.Container>
+                      <Cell.Label>Auto-launch</Cell.Label>
+                      <Switch isOn={this.state.autoStart} onChange={this._onChangeAutoStart} />
+                    </Cell.Container>
+                    <Cell.Footer>
+                      Automatically launch the app when logging in to the computer.
+                    </Cell.Footer>
 
-                <Cell.Container>
-                  <Cell.Label>Local network sharing</Cell.Label>
-                  <Switch isOn={this.props.allowLan} onChange={this.props.setAllowLan} />
-                </Cell.Container>
-                <Cell.Footer>
-                  Allows access to other devices on the same network for sharing, printing etc.
-                </Cell.Footer>
+                    <Cell.Container>
+                      <Cell.Label>Local network sharing</Cell.Label>
+                      <Switch isOn={this.props.allowLan} onChange={this.props.setAllowLan} />
+                    </Cell.Container>
+                    <Cell.Footer>
+                      Allows access to other devices on the same network for sharing, printing etc.
+                    </Cell.Footer>
+
+                    <StartMinimizedToggle
+                      enable={this.props.enableStartMinimizedToggle}
+                      startMinimized={this.props.startMinimized}
+                      onChange={this.props.setStartMinimized}
+                    />
+                  </View>
+                </NavigationScrollbars>
               </View>
-            </View>
+            </NavigationContainer>
           </View>
         </Container>
       </Layout>
@@ -85,3 +104,27 @@ export default class Preferences extends Component<PreferencesProps, State> {
     this.setState({ autoStart });
   };
 }
+
+type StartMinimizedProps = {
+  enable: boolean,
+  startMinimized: boolean,
+  onChange: (boolean) => void,
+};
+
+class StartMinimizedToggle extends Component<StartMinimizedProps> {
+  render() {
+    if (this.props.enable) {
+      return (
+        <View>
+          <Cell.Container>
+            <Cell.Label>Start minimized</Cell.Label>
+            <Switch isOn={this.props.startMinimized} onChange={this.props.onChange} />
+          </Cell.Container>
+          <Cell.Footer>Show only the tray icon when the app starts.</Cell.Footer>
+        </View>
+      );
+    } else {
+      return null;
+    }
+  }
+}
diff --git a/gui/packages/desktop/src/renderer/containers/PreferencesPage.js b/gui/packages/desktop/src/renderer/containers/PreferencesPage.js
index b70d1ea172..f383f66b14 100644
--- a/gui/packages/desktop/src/renderer/containers/PreferencesPage.js
+++ b/gui/packages/desktop/src/renderer/containers/PreferencesPage.js
@@ -13,6 +13,7 @@ import type { SharedRouteProps } from '../routes';
 const mapStateToProps = (state: ReduxState) => ({
   autoConnect: state.settings.autoConnect,
   allowLan: state.settings.allowLan,
+  startMinimized: state.settings.guiSettings.startMinimized,
 });
 
 const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) => {
@@ -41,6 +42,10 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) =>
     setAllowLan: (allowLan) => {
       props.app.setAllowLan(allowLan);
     },
+    setStartMinimized: (startMinimized) => {
+      props.app.setStartMinimized(startMinimized);
+    },
+    enableStartMinimizedToggle: process.platform === 'linux',
   };
 };
 
diff --git a/gui/packages/desktop/test/components/Preferences.spec.js b/gui/packages/desktop/test/components/Preferences.spec.js
index dc1836b4a3..1906236c35 100644
--- a/gui/packages/desktop/test/components/Preferences.spec.js
+++ b/gui/packages/desktop/test/components/Preferences.spec.js
@@ -22,8 +22,11 @@ function makeProps(props) {
     setAutoStart: (_autoStart) => Promise.resolve(),
     getAutoStart: () => false,
     setAllowLan: () => {},
+    getStartMinimized: () => Promise.resolve(false),
+    setStartMinimized: () => {},
     allowAutoConnect: false,
     allowLan: false,
+    enableStartMinimizedToggle: false,
     ...props,
   };
 }