Navigation menu in Preferences (#2304)

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

@@ -0,0 +1,11 @@
+.HelmCharts {
+  .repos {
+    margin-top: var(--margin);
+
+    .Badge {
+      display: flex;
+      margin-bottom: 1px!important;
+      padding: 6px 8px;
+    }
+  }
+}

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

@@ -0,0 +1,139 @@
+import "./helm-charts.scss";
+
+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";
+
+@observer
+export class HelmCharts extends React.Component {
+  @observable loading = false;
+  @observable repos: HelmRepo[] = [];
+  @observable addedRepos = observable.map<string, HelmRepo>();
+
+  @computed get options(): SelectOption<HelmRepo>[] {
+    return this.repos.map(repo => ({
+      label: repo.name,
+      value: repo,
+    }));
+  }
+
+  async componentDidMount() {
+    await this.loadRepos();
+  }
+
+  @action
+  async loadRepos() {
+    this.loading = true;
+
+    try {
+      if (!this.repos.length) {
+        this.repos = await repoManager.loadAvailableRepos(); // via https://helm.sh
+      }
+      const repos = await repoManager.repositories(); // via helm-cli
+
+      this.addedRepos.clear();
+      repos.forEach(repo => this.addedRepos.set(repo.name, repo));
+    } catch (err) {
+      Notifications.error(String(err));
+    }
+
+    this.loading = false;
+  }
+
+  async addRepo(repo: HelmRepo) {
+    try {
+      await repoManager.addRepo(repo);
+      this.addedRepos.set(repo.name, repo);
+    } catch (err) {
+      Notifications.error(<>Adding helm branch <b>{repo.name}</b> has failed: {String(err)}</>);
+    }
+  }
+
+  async removeRepo(repo: HelmRepo) {
+    try {
+      await repoManager.removeRepo(repo);
+      this.addedRepos.delete(repo.name);
+    } catch (err) {
+      Notifications.error(
+        <>Removing helm branch <b>{repo.name}</b> has failed: {String(err)}</>
+      );
+    }
+  }
+
+  onRepoSelect = async ({ value: repo }: SelectOption<HelmRepo>) => {
+    const isAdded = this.addedRepos.has(repo.name);
+
+    if (isAdded) {
+      Notifications.ok(<>Helm branch <b>{repo.name}</b> already in use</>);
+
+      return;
+    }
+    this.loading = true;
+    await this.addRepo(repo);
+    this.loading = false;
+  };
+
+  formatOptionLabel = ({ value: repo }: SelectOption<HelmRepo>) => {
+    const isAdded = this.addedRepos.has(repo.name);
+
+    return (
+      <div className="flex gaps">
+        <span>{repo.name}</span>
+        {isAdded && <Icon small material="check" className="box right"/>}
+      </div>
+    );
+  };
+
+  render() {
+    return (
+      <div className="HelmCharts">
+        <div className="flex gaps">
+          <Select id="HelmRepoSelect"
+            placeholder="Repositories"
+            isLoading={this.loading}
+            isDisabled={this.loading}
+            options={this.options}
+            onChange={this.onRepoSelect}
+            formatOptionLabel={this.formatOptionLabel}
+            controlShouldRenderValue={false}
+            className="box grow"
+          />
+          <Button
+            primary
+            label="Add Custom Helm Repo"
+            onClick={AddHelmRepoDialog.open}
+          />
+        </div>
+        <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>
+                <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

@@ -24,15 +24,12 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
 
   return (
     <>
-      <h2>Kubectl Binary</h2>
+      <SubTitle title="Automatic kubectl binary download"/>
       <Checkbox
-        label="Download kubectl binaries"
+        label="Download kubectl binaries matching the Kubernetes cluster version"
         value={preferences.downloadKubectlBinaries}
         onChange={downloadKubectlBinaries => preferences.downloadKubectlBinaries = downloadKubectlBinaries}
       />
-      <small className="hint">
-        Download kubectl binaries matching to Kubernetes cluster version.
-      </small>
       <SubTitle title="Download mirror" />
       <Select
         placeholder="Download mirror for kubectl"
@@ -54,7 +51,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
       <small className="hint">
         The directory to download binaries into.
       </small>
-      <SubTitle title="Path to Kubectl binary" />
+      <SubTitle title="Path to kubectl binary" />
       <Input
         theme="round-black"
         placeholder={bundledKubectlPath()}

src/renderer/components/+preferences/preferences.scss

@@ -1,27 +1,2 @@
 .Preferences {
-  $spacing: $padding * 2;
-
-  .repos {
-    position: relative;
-
-    .Badge {
-      display: flex;
-      margin-bottom: 1px;
-      padding: $padding $spacing;
-    }
-  }
-
-  .extensions {
-    h2 {
-      margin: $spacing 0;
-    }
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  .Checkbox {
-    align-self: start; // limit clickable area to checkbox + text
-  }
 }

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

@@ -1,30 +1,24 @@
 import "./preferences.scss";
 
 import React from "react";
+import { computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { action, computed, observable } from "mobx";
-import { Icon } from "../icon";
-import { Select, SelectOption } from "../select";
+
 import { userStore } from "../../../common/user-store";
 import { isWindows } from "../../../common/vars";
-import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager";
-import { Input } from "../input";
-import { Checkbox } from "../checkbox";
-import { Notifications } from "../notifications";
-import { Badge } from "../badge";
-import { Button } from "../button";
-import { themeStore } from "../../theme.store";
-import { Tooltip } from "../tooltip";
-import { KubectlBinaries } from "./kubectl-binaries";
 import { appPreferenceRegistry } 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 { AddHelmRepoDialog } from "./add-helm-repo-dialog";
+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";
 
 @observer
 export class Preferences extends React.Component {
-  @observable helmLoading = false;
-  @observable helmRepos: HelmRepo[] = [];
-  @observable helmAddedRepos = observable.map<string, HelmRepo>();
   @observable httpProxy = userStore.preferences.httpsProxy || "";
   @observable shell = userStore.preferences.shell || "";
 
@@ -35,79 +29,6 @@ export class Preferences extends React.Component {
     }));
   }
 
-  @computed get helmOptions(): SelectOption<HelmRepo>[] {
-    return this.helmRepos.map(repo => ({
-      label: repo.name,
-      value: repo,
-    }));
-  }
-
-  async componentDidMount() {
-    await this.loadHelmRepos();
-  }
-
-  @action
-  async loadHelmRepos() {
-    this.helmLoading = true;
-
-    try {
-      if (!this.helmRepos.length) {
-        this.helmRepos = await repoManager.loadAvailableRepos(); // via https://helm.sh
-      }
-      const repos = await repoManager.repositories(); // via helm-cli
-
-      this.helmAddedRepos.clear();
-      repos.forEach(repo => this.helmAddedRepos.set(repo.name, repo));
-    } catch (err) {
-      Notifications.error(String(err));
-    }
-    this.helmLoading = false;
-  }
-
-  async addRepo(repo: HelmRepo) {
-    try {
-      await repoManager.addRepo(repo);
-      this.helmAddedRepos.set(repo.name, repo);
-    } catch (err) {
-      Notifications.error(<>Adding helm branch <b>{repo.name}</b> has failed: {String(err)}</>);
-    }
-  }
-
-  async removeRepo(repo: HelmRepo) {
-    try {
-      await repoManager.removeRepo(repo);
-      this.helmAddedRepos.delete(repo.name);
-    } catch (err) {
-      Notifications.error(
-        <>Removing helm branch <b>{repo.name}</b> has failed: {String(err)}</>
-      );
-    }
-  }
-
-  onRepoSelect = async ({ value: repo }: SelectOption<HelmRepo>) => {
-    const isAdded = this.helmAddedRepos.has(repo.name);
-
-    if (isAdded) {
-      Notifications.ok(<>Helm branch <b>{repo.name}</b> already in use</>);
-
-      return;
-    }
-    this.helmLoading = true;
-    await this.addRepo(repo);
-    this.helmLoading = false;
-  };
-
-  formatHelmOptionLabel = ({ value: repo }: SelectOption<HelmRepo>) => {
-    const isAdded = this.helmAddedRepos.has(repo.name);
-
-    return (
-      <div className="flex gaps">
-        <span>{repo.name}</span>
-        {isAdded && <Icon small material="check" className="box right"/>}
-      </div>
-    );
-  };
-
   render() {
     const { preferences } = userStore;
     const header = <h2>Preferences</h2>;
@@ -122,110 +43,110 @@ export class Preferences extends React.Component {
     }
 
     return (
-      <PageLayout showOnTop className="Preferences" header={header}>
-        <h2>Color Theme</h2>
-        <Select
-          options={this.themeOptions}
-          value={preferences.colorTheme}
-          onChange={({ value }: SelectOption) => preferences.colorTheme = value}
-        />
+      <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>
+            <section id="appearance">
+              <h2>Appearance</h2>
+              <SubTitle title="Theme"/>
+              <Select
+                options={this.themeOptions}
+                value={preferences.colorTheme}
+                onChange={({ value }: SelectOption) => preferences.colorTheme = value}
+              />
+            </section>
+            <section id="proxy">
+              <h2>Proxy</h2>
+              <SubTitle title="HTTP Proxy"/>
+              <Input
+                theme="round-black"
+                placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
+                value={this.httpProxy}
+                onChange={v => this.httpProxy = v}
+                onBlur={() => preferences.httpsProxy = this.httpProxy}
+              />
+              <small className="hint">
+                Proxy is used only for non-cluster communication.
+              </small>
 
-        <h2>HTTP Proxy</h2>
-        <Input
-          theme="round-black"
-          placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
-          value={this.httpProxy}
-          onChange={v => this.httpProxy = v}
-          onBlur={() => preferences.httpsProxy = this.httpProxy}
-        />
-        <small className="hint">
-          Proxy is used only for non-cluster communication.
-        </small>
-        <h2>Terminal Shell</h2>
-        <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>
-        <KubectlBinaries preferences={preferences}/>
+              <SubTitle title="Certificate Trust"/>
+              <Checkbox
+                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.{" "}
+                Needed with some corporate proxies that do certificate re-writing.{" "}
+                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>
 
-        <h2>Helm</h2>
-        <div className="flex gaps">
-          <Select id="HelmRepoSelect"
-            placeholder="Repositories"
-            isLoading={this.helmLoading}
-            isDisabled={this.helmLoading}
-            options={this.helmOptions}
-            onChange={this.onRepoSelect}
-            formatOptionLabel={this.formatHelmOptionLabel}
-            controlShouldRenderValue={false}
-            className="box grow"
-          />
-          <Button
-            primary
-            label="Add Custom Helm Repo"
-            onClick={AddHelmRepoDialog.open}
-          />
-        </div>
-        <AddHelmRepoDialog onAddRepo={()=>this.loadHelmRepos()}/>
-        <div className="repos flex gaps column">
-          {Array.from(this.helmAddedRepos).map(([name, repo]) => {
-            const tooltipId = `message-${name}`;
+          <section id="kubernetes">
+            <section>
+              <h1>Kubernetes</h1>
+            </section>
+            <section id="kubectl">
+              <h2>Kubectl binary</h2>
+              <KubectlBinaries preferences={preferences}/>
+            </section>
+            <section id="helm">
+              <h2>Helm Charts</h2>
+              <HelmCharts/>
+            </section>
+          </section>
 
-            return (
-              <Badge key={name} className="added-repo flex gaps align-center justify-space-between">
-                <span id={tooltipId} className="repo">{name}</span>
-                <Icon
-                  material="delete"
-                  onClick={() => this.removeRepo(repo)}
-                  tooltip="Remove"
-                />
-                <Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
-                  {repo.url}
-                </Tooltip>
-              </Badge>
-            );
-          })}
-        </div>
-
-        <h2>Auto start-up</h2>
-        <Checkbox
-          label="Automatically start Lens on login"
-          value={preferences.openAtLogin}
-          onChange={v => preferences.openAtLogin = v}
-        />
-
-        <h2>Certificate Trust</h2>
-        <Checkbox
-          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.{" "}
-          Needed with some corporate proxies that do certificate re-writing.{" "}
-          Does not affect cluster communications!
-        </small>
-
-        <div className="extensions flex column gaps">
-          {appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
-            return (
-              <div key={index} className="preference">
-                <h2>{title}</h2>
-                <Input/>
-                <small className="hint">
-                  <Hint/>
-                </small>
-              </div>
-            );
-          })}
-        </div>
-      </PageLayout>
+          <section id="extensions">
+            <section>
+              <h1>Extensions</h1>
+            </section>
+            {appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
+              return (
+                <section key={index} id={title}>
+                  <h2>{title}</h2>
+                  <Input/>
+                  <small className="hint">
+                    <Hint/>
+                  </small>
+                </section>
+              );
+            })}
+          </section>
+        </PageLayout>
+      )}/>
     );
   }
 }