Preferences page redesign (#2446)

* Removing header part

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Restyling PageLayout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Restyling .round-black Input

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding Tab navigation to Preferences

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling Application tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add esc button

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add media queries

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Introducting Switcher component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling Proxy tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving start-up switcher to Other tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling Kubernetes tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling Extensions tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling inputs and selects

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling helm chart section

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Create a telemetry tab with extensions

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding lens Select theme

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove Other tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix mainBackground color

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Simplifying Tabs boilerplate

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Replacing button font

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing one-column settings layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing integration tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixin tests harder

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Showing bottom bar in workspaces

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/helm-charts.scss

@@ -1,11 +1,21 @@
 .HelmCharts {
   .repos {
-    margin-top: var(--margin);
+    margin-top: 20px;
 
-    .Badge {
-      display: flex;
-      margin-bottom: 1px!important;
-      padding: 6px 8px;
+    .repo {
+      background: var(--inputControlBackground);
+      border-radius: 4px;
+      padding: 12px 16px;
+      box-shadow: 0 0 0 1px var(--secondaryBackground);
+
+      .repoName {
+        font-weight: 500;
+        margin-bottom: 8px;
+      }
+
+      .repoUrl {
+        color: var(--textColorDimmed);
+      }
     }
   }
 }

src/renderer/components/+preferences/helm-charts.tsx

@@ -4,12 +4,10 @@ import React from "react";
 import { action, computed, observable } from "mobx";
 
 import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager";
-import { Badge } from "../badge";
 import { Button } from "../button";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
 import { Select, SelectOption } from "../select";
-import { Tooltip } from "../tooltip";
 import { AddHelmRepoDialog } from "./add-helm-repo-dialog";
 import { observer } from "mobx-react";
 
@@ -106,6 +104,7 @@ export class HelmCharts extends React.Component {
             formatOptionLabel={this.formatOptionLabel}
             controlShouldRenderValue={false}
             className="box grow"
+            themeName="lens"
           />
           <Button
             primary
@@ -116,20 +115,18 @@ export class HelmCharts extends React.Component {
         <AddHelmRepoDialog onAddRepo={() => this.loadRepos()}/>
         <div className="repos flex gaps column">
           {Array.from(this.addedRepos).map(([name, repo]) => {
-            const tooltipId = `message-${name}`;
-
             return (
-              <Badge key={name} className="added-repo flex gaps align-center justify-space-between">
-                <span id={tooltipId} className="repo">{name}</span>
+              <div key={name} className="repo flex gaps align-center justify-space-between">
+                <div>
+                  <div className="repoName">{name}</div>
+                  <div className="repoUrl">{repo.url}</div>
+                </div>
                 <Icon
                   material="delete"
                   onClick={() => this.removeRepo(repo)}
                   tooltip="Remove"
                 />
-                <Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
-                  {repo.url}
-                </Tooltip>
-              </Badge>
+              </div>
             );
           })}
         </div>

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

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
-import { Checkbox } from "../checkbox";
 import { Input, InputValidators } from "../input";
 import { SubTitle } from "../layout/sub-title";
 import { UserPreferences, 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 || "");
@@ -24,46 +24,66 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
 
   return (
     <>
-      <SubTitle title="Automatic kubectl binary download"/>
-      <Checkbox
-        label="Download kubectl binaries matching the Kubernetes cluster version"
-        value={preferences.downloadKubectlBinaries}
-        onChange={downloadKubectlBinaries => preferences.downloadKubectlBinaries = downloadKubectlBinaries}
-      />
-      <SubTitle title="Download mirror" />
-      <Select
-        placeholder="Download mirror for kubectl"
-        options={downloadMirrorOptions}
-        value={preferences.downloadMirror}
-        onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
-        disabled={!preferences.downloadKubectlBinaries}
-      />
-      <SubTitle title="Directory for binaries" />
-      <Input
-        theme="round-black"
-        value={downloadPath}
-        placeholder={userStore.getDefaultKubectlPath()}
-        validators={pathValidator}
-        onChange={setDownloadPath}
-        onBlur={save}
-        disabled={!preferences.downloadKubectlBinaries}
-      />
-      <small className="hint">
-        The directory to download binaries into.
-      </small>
-      <SubTitle title="Path to kubectl binary" />
-      <Input
-        theme="round-black"
-        placeholder={bundledKubectlPath()}
-        value={binariesPath}
-        validators={pathValidator}
-        onChange={setBinariesPath}
-        onBlur={save}
-        disabled={preferences.downloadKubectlBinaries}
-      />
-      <small className="hint">
-        The path to the kubectl binary on the system.
-      </small>
+      <section className="small">
+        <SubTitle title="Kubectl binary download"/>
+        <FormSwitch
+          control={
+            <Switcher
+              checked={preferences.downloadKubectlBinaries}
+              onChange={v => preferences.downloadKubectlBinaries = v.target.checked}
+              name="kubectl-download"
+            />
+          }
+          label="Download kubectl binaries matching the Kubernetes cluster version"
+        />
+      </section>
+
+      <hr className="small"/>
+
+      <section className="small">
+        <SubTitle title="Download mirror" />
+        <Select
+          placeholder="Download mirror for kubectl"
+          options={downloadMirrorOptions}
+          value={preferences.downloadMirror}
+          onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
+          disabled={!preferences.downloadKubectlBinaries}
+          themeName="lens"
+        />
+      </section>
+
+      <hr className="small"/>
+
+      <section className="small">
+        <SubTitle title="Directory for binaries" />
+        <Input
+          theme="round-black"
+          value={downloadPath}
+          placeholder={userStore.getDefaultKubectlPath()}
+          validators={pathValidator}
+          onChange={setDownloadPath}
+          onBlur={save}
+          disabled={!preferences.downloadKubectlBinaries}
+        />
+        <div className="hint">
+          The directory to download binaries into.
+        </div>
+      </section>
+
+      <hr className="small"/>
+
+      <section className="small">
+        <SubTitle title="Path to kubectl binary" />
+        <Input
+          theme="round-black"
+          placeholder={bundledKubectlPath()}
+          value={binariesPath}
+          validators={pathValidator}
+          onChange={setBinariesPath}
+          onBlur={save}
+          disabled={preferences.downloadKubectlBinaries}
+        />
+      </section>
     </>
   );
 });

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

@@ -6,22 +6,32 @@ import { disposeOnUnmount, observer } from "mobx-react";
 
 import { userStore } from "../../../common/user-store";
 import { isWindows } from "../../../common/vars";
-import { appPreferenceRegistry } from "../../../extensions/registries/app-preference-registry";
+import { appPreferenceRegistry, RegisteredAppPreference } from "../../../extensions/registries/app-preference-registry";
 import { themeStore } from "../../theme.store";
-import { Checkbox } from "../checkbox";
 import { Input } from "../input";
 import { PageLayout } from "../layout/page-layout";
 import { SubTitle } from "../layout/sub-title";
 import { Select, SelectOption } from "../select";
 import { HelmCharts } from "./helm-charts";
 import { KubectlBinaries } from "./kubectl-binaries";
-import { ScrollSpy } from "../scroll-spy/scroll-spy";
 import { navigation } from "../../navigation";
+import { Tab, Tabs } from "../tabs";
+import { FormSwitch, Switcher } from "../switch";
+
+enum Pages {
+  Application = "application",
+  Proxy = "proxy",
+  Kubernetes = "kubernetes",
+  Telemetry = "telemetry",
+  Extensions = "extensions",
+  Other = "other"
+}
 
 @observer
 export class Preferences extends React.Component {
   @observable httpProxy = userStore.preferences.httpsProxy || "";
   @observable shell = userStore.preferences.shell || "";
+  @observable activeTab = Pages.Application;
 
   @computed get themeOptions(): SelectOption<string>[] {
     return themeStore.themes.map(theme => ({
@@ -45,9 +55,46 @@ export class Preferences extends React.Component {
     ]);
   }
 
+  onTabChange = (tabId: Pages) => {
+    this.activeTab = tabId;
+  };
+
+  renderNavigation() {
+    const extensions = appPreferenceRegistry.getItems().filter(e => !e.showInPreferencesTab);
+
+    return (
+      <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
+        <div className="header">Preferences</div>
+        <Tab value={Pages.Application} label="Application" data-testid="application-tab"/>
+        <Tab value={Pages.Proxy} label="Proxy" data-testid="proxy-tab"/>
+        <Tab value={Pages.Kubernetes} label="Kubernetes" data-testid="kube-tab"/>
+        <Tab value={Pages.Telemetry} label="Telemetry" data-testid="telemetry-tab"/>
+        {extensions.length > 0 &&
+          <Tab value={Pages.Extensions} label="Extensions" data-testid="extensions-tab"/>
+        }
+      </Tabs>
+    );
+  }
+
+  renderExtension({ title, id, components: { Hint, Input } }: RegisteredAppPreference) {
+    return (
+      <React.Fragment key={id}>
+        <section id={id} className="small">
+          <SubTitle title={title}/>
+          <Input/>
+          <div className="hint">
+            <Hint/>
+          </div>
+        </section>
+        <hr className="small"/>
+      </React.Fragment>
+    );
+  }
+
   render() {
     const { preferences } = userStore;
-    const header = <h2>Preferences</h2>;
+    const extensions = appPreferenceRegistry.getItems();
+    const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == Pages.Telemetry);
     let defaultShell = process.env.SHELL || process.env.PTYSHELL;
 
     if (!defaultShell) {
@@ -59,29 +106,59 @@ export class Preferences extends React.Component {
     }
 
     return (
-      <ScrollSpy htmlFor="ScrollSpyRoot" render={navigation => (
-        <PageLayout
-          showOnTop
-          navigation={navigation}
-          className="Preferences"
-          contentGaps={false}
-          header={header}
-        >
-          <section id="application" title="Application">
-            <section>
-              <h1>Application</h1>
-            </section>
+      <PageLayout
+        showOnTop
+        navigation={this.renderNavigation()}
+        className="Preferences"
+        contentGaps={false}
+      >
+        {this.activeTab == Pages.Application && (
+          <section id="application">
+            <h2 data-testid="application-header">Application</h2>
             <section id="appearance">
-              <h2>Appearance</h2>
               <SubTitle title="Theme"/>
               <Select
                 options={this.themeOptions}
                 value={preferences.colorTheme}
                 onChange={({ value }: SelectOption) => preferences.colorTheme = value}
+                themeName="lens"
               />
             </section>
-            <section id="proxy">
-              <h2>Proxy</h2>
+
+            <hr className="small"/>
+
+            <section id="shell" className="small">
+              <SubTitle title="Terminal Shell Path"/>
+              <Input
+                theme="round-black"
+                placeholder={defaultShell}
+                value={this.shell}
+                onChange={v => this.shell = v}
+                onBlur={() => preferences.shell = this.shell}
+              />
+            </section>
+
+            <hr/>
+
+            <section id="other">
+              <SubTitle title="Start-up"/>
+              <FormSwitch
+                control={
+                  <Switcher
+                    checked={preferences.openAtLogin}
+                    onChange={v => preferences.openAtLogin = v.target.checked}
+                    name="startup"
+                  />
+                }
+                label="Automatically start Lens on login"
+              />
+            </section>
+          </section>
+        )}
+        {this.activeTab == Pages.Proxy && (
+          <section id="proxy">
+            <section>
+              <h2 data-testid="proxy-header">Proxy</h2>
               <SubTitle title="HTTP Proxy"/>
               <Input
                 theme="round-black"
@@ -93,12 +170,21 @@ export class Preferences extends React.Component {
               <small className="hint">
                 Proxy is used only for non-cluster communication.
               </small>
+            </section>
 
+            <hr className="small"/>
+
+            <section className="small">
               <SubTitle title="Certificate Trust"/>
-              <Checkbox
+              <FormSwitch
+                control={
+                  <Switcher
+                    checked={preferences.allowUntrustedCAs}
+                    onChange={v => preferences.allowUntrustedCAs = v.target.checked}
+                    name="startup"
+                  />
+                }
                 label="Allow untrusted Certificate Authorities"
-                value={preferences.allowUntrustedCAs}
-                onChange={v => preferences.allowUntrustedCAs = v}
               />
               <small className="hint">
                 This will make Lens to trust ANY certificate authority without any validations.{" "}
@@ -106,63 +192,37 @@ export class Preferences extends React.Component {
                 Does not affect cluster communications!
               </small>
             </section>
-            <section id="shell">
-              <h2>Terminal Shell</h2>
-              <SubTitle title="Shell Path"/>
-              <Input
-                theme="round-black"
-                placeholder={defaultShell}
-                value={this.shell}
-                onChange={v => this.shell = v}
-                onBlur={() => preferences.shell = this.shell}
-              />
-              <small className="hint">
-                The path of the shell that the terminal uses.
-              </small>
-            </section>
-            <section id="startup">
-              <h2>Start-up</h2>
-              <SubTitle title="Automatic Start-up"/>
-              <Checkbox
-                label="Automatically start Lens on login"
-                value={preferences.openAtLogin}
-                onChange={v => preferences.openAtLogin = v}
-              />
-            </section>
           </section>
+        )}
 
+        {this.activeTab == Pages.Kubernetes && (
           <section id="kubernetes">
-            <section>
-              <h1>Kubernetes</h1>
-            </section>
             <section id="kubectl">
-              <h2>Kubectl binary</h2>
+              <h2 data-testid="kubernetes-header">Kubernetes</h2>
               <KubectlBinaries preferences={preferences}/>
             </section>
+            <hr/>
             <section id="helm">
               <h2>Helm Charts</h2>
               <HelmCharts/>
             </section>
           </section>
+        )}
 
-          <section id="extensions">
-            <section>
-              <h1>Extensions</h1>
-            </section>
-            {appPreferenceRegistry.getItems().map(({ title, id, components: { Hint, Input } }, index) => {
-              return (
-                <section key={index} id={title}>
-                  <h2 id={id}>{title}</h2>
-                  <Input/>
-                  <small className="hint">
-                    <Hint/>
-                  </small>
-                </section>
-              );
-            })}
+        {this.activeTab == Pages.Telemetry && (
+          <section id="telemetry">
+            <h2 data-testid="telemetry-header">Telemetry</h2>
+            {telemetryExtensions.map(this.renderExtension)}
           </section>
-        </PageLayout>
-      )}/>
+        )}
+
+        {this.activeTab == Pages.Extensions && (
+          <section id="extensions">
+            <h2>Extensions</h2>
+            {extensions.filter(e => !e.showInPreferencesTab).map(this.renderExtension)}
+          </section>
+        )}
+      </PageLayout>
     );
   }
 }