Flatten user preferences in user store (#2587)

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+preferences/kubectl-binaries.tsx

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
 import { Input, InputValidators } from "../input";
 import { SubTitle } from "../layout/sub-title";
-import { getDefaultKubectlPath, UserPreferences } from "../../../common/user-store";
+import { getDefaultKubectlPath, UserStore } from "../../../common/user-store";
 import { observer } from "mobx-react";
 import { bundledKubectlPath } from "../../../main/kubectl";
 import { SelectOption, Select } from "../select";
 import { FormSwitch, Switcher } from "../switch";
 
-export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => {
-  const [downloadPath, setDownloadPath] = useState(preferences.downloadBinariesPath || "");
-  const [binariesPath, setBinariesPath] = useState(preferences.kubectlBinariesPath || "");
+export const KubectlBinaries = observer(() => {
+  const userStore = UserStore.getInstance();
+  const [downloadPath, setDownloadPath] = useState(userStore.downloadBinariesPath || "");
+  const [binariesPath, setBinariesPath] = useState(userStore.kubectlBinariesPath || "");
   const pathValidator = downloadPath ? InputValidators.isPath : undefined;
 
   const downloadMirrorOptions: SelectOption<string>[] = [
@@ -18,8 +19,8 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
   ];
 
   const save = () => {
-    preferences.downloadBinariesPath = downloadPath;
-    preferences.kubectlBinariesPath = binariesPath;
+    userStore.downloadBinariesPath = downloadPath;
+    userStore.kubectlBinariesPath = binariesPath;
   };
 
   return (
@@ -29,8 +30,8 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
         <FormSwitch
           control={
             <Switcher
-              checked={preferences.downloadKubectlBinaries}
-              onChange={v => preferences.downloadKubectlBinaries = v.target.checked}
+              checked={userStore.downloadKubectlBinaries}
+              onChange={v => userStore.downloadKubectlBinaries = v.target.checked}
               name="kubectl-download"
             />
           }
@@ -45,9 +46,9 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
         <Select
           placeholder="Download mirror for kubectl"
           options={downloadMirrorOptions}
-          value={preferences.downloadMirror}
-          onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
-          disabled={!preferences.downloadKubectlBinaries}
+          value={userStore.downloadMirror}
+          onChange={({ value }: SelectOption) => userStore.downloadMirror = value}
+          disabled={!userStore.downloadKubectlBinaries}
           themeName="lens"
         />
       </section>
@@ -58,12 +59,12 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
         <SubTitle title="Directory for binaries" />
         <Input
           theme="round-black"
-          value={downloadPath}
+          value={userStore.downloadBinariesPath}
           placeholder={getDefaultKubectlPath()}
           validators={pathValidator}
           onChange={setDownloadPath}
           onBlur={save}
-          disabled={!preferences.downloadKubectlBinaries}
+          disabled={!userStore.downloadKubectlBinaries}
         />
         <div className="hint">
           The directory to download binaries into.
@@ -81,7 +82,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
           validators={pathValidator}
           onChange={setBinariesPath}
           onBlur={save}
-          disabled={preferences.downloadKubectlBinaries}
+          disabled={userStore.downloadKubectlBinaries}
         />
       </section>
     </>

src/renderer/components/+preferences/preferences.tsx

@@ -30,8 +30,8 @@ enum Pages {
 
 @observer
 export class Preferences extends React.Component {
-  @observable httpProxy = UserStore.getInstance().preferences.httpsProxy || "";
-  @observable shell = UserStore.getInstance().preferences.shell || "";
+  @observable httpProxy = UserStore.getInstance().httpsProxy || "";
+  @observable shell = UserStore.getInstance().shell || "";
   @observable activeTab = Pages.Application;
 
   @computed get themeOptions(): SelectOption<string>[] {
@@ -100,7 +100,6 @@ export class Preferences extends React.Component {
   render() {
     const extensions = appPreferenceRegistry.getItems();
     const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == Pages.Telemetry);
-    const { preferences } = UserStore.getInstance();
     const defaultShell = process.env.SHELL
       || process.env.PTYSHELL
       || (
@@ -123,8 +122,8 @@ export class Preferences extends React.Component {
               <SubTitle title="Theme"/>
               <Select
                 options={this.themeOptions}
-                value={preferences.colorTheme}
-                onChange={({ value }: SelectOption) => preferences.colorTheme = value}
+                value={UserStore.getInstance().colorTheme}
+                onChange={({ value }: SelectOption) => UserStore.getInstance().colorTheme = value}
                 themeName="lens"
               />
             </section>
@@ -138,7 +137,7 @@ export class Preferences extends React.Component {
                 placeholder={defaultShell}
                 value={this.shell}
                 onChange={v => this.shell = v}
-                onBlur={() => preferences.shell = this.shell}
+                onBlur={() => UserStore.getInstance().shell = this.shell}
               />
             </section>
 
@@ -149,8 +148,8 @@ export class Preferences extends React.Component {
               <FormSwitch
                 control={
                   <Switcher
-                    checked={preferences.openAtLogin}
-                    onChange={v => preferences.openAtLogin = v.target.checked}
+                    checked={UserStore.getInstance().openAtLogin}
+                    onChange={v => UserStore.getInstance().openAtLogin = v.target.checked}
                     name="startup"
                   />
                 }
@@ -164,7 +163,7 @@ export class Preferences extends React.Component {
               <SubTitle title="Locale Timezone" />
               <Select
                 options={this.timezoneOptions}
-                value={preferences.localeTimezone}
+                value={UserStore.getInstance().localeTimezone}
                 onChange={({ value }: SelectOption) => UserStore.getInstance().setLocaleTimezone(value)}
                 themeName="lens"
               />
@@ -181,7 +180,7 @@ export class Preferences extends React.Component {
                 placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
                 value={this.httpProxy}
                 onChange={v => this.httpProxy = v}
-                onBlur={() => preferences.httpsProxy = this.httpProxy}
+                onBlur={() => UserStore.getInstance().httpsProxy = this.httpProxy}
               />
               <small className="hint">
                 Proxy is used only for non-cluster communication.
@@ -195,8 +194,8 @@ export class Preferences extends React.Component {
               <FormSwitch
                 control={
                   <Switcher
-                    checked={preferences.allowUntrustedCAs}
-                    onChange={v => preferences.allowUntrustedCAs = v.target.checked}
+                    checked={UserStore.getInstance().allowUntrustedCAs}
+                    onChange={v => UserStore.getInstance().allowUntrustedCAs = v.target.checked}
                     name="startup"
                   />
                 }
@@ -215,7 +214,7 @@ export class Preferences extends React.Component {
           <section id="kubernetes">
             <section id="kubectl">
               <h2 data-testid="kubernetes-header">Kubernetes</h2>
-              <KubectlBinaries preferences={preferences}/>
+              <KubectlBinaries />
             </section>
             <hr/>
             <section id="helm">