From 137f09c2c0db4d7b397c9f0cd3a11cc7d1b0392f Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 25 Mar 2021 16:18:00 +0300
Subject: [PATCH] Adding Tab navigation to Preferences

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+preferences/preferences.tsx   | 65 ++++++++++++++-----
 1 file changed, 49 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index eada7eb41e..d0314ba4cc 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -15,13 +15,20 @@ 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";
+
+enum PreferencesTab {
+  Application = "application",
+  Kubernetes = "kubernetes",
+  Extensions = "extensions"
+}
 
 @observer
 export class Preferences extends React.Component {
   @observable httpProxy = userStore.preferences.httpsProxy || "";
   @observable shell = userStore.preferences.shell || "";
+  @observable activeTab = PreferencesTab.Application;
 
   @computed get themeOptions(): SelectOption<string>[] {
     return themeStore.themes.map(theme => ({
@@ -45,9 +52,35 @@ export class Preferences extends React.Component {
     ]);
   }
 
+  onTabChange = (tabId: PreferencesTab) => {
+    this.activeTab = tabId;
+  };
+
+  renderNavigation() {
+    return (
+      <Tabs className="flex column" scrollable={false} onChange={this.onTabChange}>
+        <div className="header">Preferences</div>
+        <Tab
+          value={PreferencesTab.Application}
+          label="Application"
+          active={this.activeTab == PreferencesTab.Application}
+        />
+        <Tab
+          value={PreferencesTab.Kubernetes}
+          label="Kubernetes"
+          active={this.activeTab == PreferencesTab.Kubernetes}
+        />
+        <Tab
+          value={PreferencesTab.Extensions}
+          label="Extensions"
+          active={this.activeTab == PreferencesTab.Extensions}
+        />
+      </Tabs>
+    );
+  }
+
   render() {
     const { preferences } = userStore;
-    const header = <h2>Preferences</h2>;
     let defaultShell = process.env.SHELL || process.env.PTYSHELL;
 
     if (!defaultShell) {
@@ -59,18 +92,14 @@ 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 == PreferencesTab.Application && (
+          <section id="application">
             <section id="appearance">
               <h2>Appearance</h2>
               <SubTitle title="Theme"/>
@@ -130,7 +159,9 @@ export class Preferences extends React.Component {
               />
             </section>
           </section>
+        )}
 
+        {this.activeTab == PreferencesTab.Kubernetes && (
           <section id="kubernetes">
             <section>
               <h1>Kubernetes</h1>
@@ -144,7 +175,9 @@ export class Preferences extends React.Component {
               <HelmCharts/>
             </section>
           </section>
+        )}
 
+        {this.activeTab == PreferencesTab.Extensions && (
           <section id="extensions">
             <section>
               <h1>Extensions</h1>
@@ -161,8 +194,8 @@ export class Preferences extends React.Component {
               );
             })}
           </section>
-        </PageLayout>
-      )}/>
+        )}
+      </PageLayout>
     );
   }
 }