preferences page -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/_vue/components/PreferencesPage.vue

@@ -206,7 +206,10 @@ export default {
     loadHubRepositories: async function() {
       const res = await this.request({ uri: "https://hub.helm.sh/assets/js/repos.json"}).catch((error) => { this.hubRepositories = [] })
       this.hubRepositories = res.body.data.sort(this.repoCompare).map((repo) => {
-        return { text: repo.name, value: repo.name+"|"+repo.url}
+        return {
+          text: repo.name,
+          value: repo.name+"|"+repo.url
+        }
       })
     }
   },

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

@@ -1,3 +1,9 @@
 .Preferences {
+  --flex-gap: #{$padding};
 
+  h2 {
+    &:not(:first-child) {
+      margin-top: $padding * 3;
+    }
+  }
 }

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

@@ -1,14 +1,106 @@
 import "./preferences.scss"
-import React from "react";
+import React, { Fragment } from "react";
 import { observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { _i18n } from "../../i18n";
+import { WizardLayout } from "../layout/wizard-layout";
+import { Icon } from "../icon";
+import { Select, SelectOption } from "../select";
+import { ThemeType, userStore } from "../../../common/user-store";
+import { Input } from "../input";
+import { Checkbox } from "../checkbox";
+
+type ThemeSelectOption = SelectOption & { type: ThemeType }
 
 @observer
 export class Preferences extends React.Component {
-  render() {
+  themeOptions: ThemeSelectOption[] = [
+    { value: "kontena-dark", label: <Trans>Dark</Trans>, type: ThemeType.DARK },
+    { value: "kontena-light", label: <Trans>Light</Trans>, type: ThemeType.LIGHT },
+  ]
+
+  downloadMirrorOptions: SelectOption[] = [
+    { value: "default", label: "Default (Google)" },
+    { value: "china", label: "China (Azure)" },
+  ]
+
+  onThemeChange = ({ value }: ThemeSelectOption) => {
+    // themeStore.setTheme(value); // fixme: apply theme on the fly for current view
+    userStore.preferences.colorTheme = value;
+  }
+
+  renderInfo() {
     return (
-      <div className="Preferences">
-        Preferences
-      </div>
+      <Fragment>
+        <h2>
+          <Trans>Preferences</Trans>
+        </h2>
+        <div className="info-block flex gaps align-center">
+          <Icon small material="info"/>
+          <small>
+            <Trans>Lens Global Settings</Trans> (<Trans>applicable to all clusters</Trans>)
+          </small>
+        </div>
+      </Fragment>
+    )
+  }
+
+  render() {
+    const { preferences } = userStore;
+    return (
+      <WizardLayout className="Preferences" infoPanel={this.renderInfo()}>
+        <h2><Trans>Color Theme</Trans></h2>
+        <Select
+          options={this.themeOptions}
+          value={preferences.colorTheme}
+          onChange={this.onThemeChange}
+        />
+
+        <h2><Trans>Download Mirror</Trans></h2>
+        <Select
+          placeholder={_i18n._(t`Download mirror for kubectl`)}
+          options={this.downloadMirrorOptions}
+          value={preferences.downloadMirror}
+          onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
+        />
+
+        <h2><Trans>Helm</Trans></h2>
+        <div className="helm">
+          // todo: added helm repos
+        </div>
+
+        <h2><Trans>HTTP Proxy</Trans></h2>
+        <Input
+          placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
+          value={preferences.httpsProxy}
+          onChange={v => preferences.httpsProxy = v}
+        />
+        <small className="hint">
+          <Trans>Proxy is used only for non-cluster communication.</Trans>
+        </small>
+
+        <h2><Trans>Certificate Trust</Trans></h2>
+        <Checkbox
+          label={<Trans>Allow untrusted Certificate Authorities</Trans>}
+          value={preferences.allowUntrustedCAs}
+          onChange={v => preferences.allowUntrustedCAs = v}
+        />
+        <small className="hint">
+          <Trans>This will make Lens to trust ANY certificate authority without any validations.</Trans>{" "}
+          <Trans>Needed with some corporate proxies that do certificate re-writing.</Trans>{" "}
+          <Trans>Does not affect cluster communications!</Trans>
+        </small>
+
+        <h2><Trans>Telemetry & Usage Tracking</Trans></h2>
+        <Checkbox
+          label={<Trans>Allow telemetry & usage tracking</Trans>}
+          value={preferences.allowTelemetry}
+          onChange={v => preferences.allowTelemetry = v}
+        />
+        <small className="hint">
+          <Trans>Telemetry & usage data is collected to continuously improve the Lens experience.</Trans>
+        </small>
+      </WizardLayout>
     )
   }
 }

src/renderer/components/app.tsx

@@ -37,6 +37,7 @@ import { clusterIpc } from "../../common/cluster-ipc";
 import { clusterStore } from "../../common/cluster-store";
 import { ClusterStatus } from "./cluster-manager/cluster-status";
 import { clusterStatusRoute, clusterStatusURL } from "./cluster-manager/cluster-status.route";
+import { Preferences, preferencesRoute } from "./+preferences";
 import { navigation } from "../navigation";
 import { CubeSpinner } from "./spinner";
 
@@ -85,6 +86,7 @@ export class App extends React.Component {
       <ErrorBoundary>
         <Switch>
           <Route component={LandingPage} {...landingRoute}/>
+          <Route component={Preferences} {...preferencesRoute}/>
           <Route component={Workspaces} {...workspacesRoute}/>
           <Route component={AddCluster} {...addClusterRoute}/>
           <Route component={Cluster} {...clusterRoute}/>

src/renderer/components/layout/wizard-layout.scss

@@ -1,5 +1,5 @@
 .WizardLayout {
-  --flex-gap: #{$padding * 2};
+  $spacing: $padding * 2;
 
   position: relative;
   padding: $padding * 3;
@@ -8,8 +8,9 @@
   grid-template-columns: 1fr 40%;
 
   > .content-col {
-    padding: var(--flex-gap);
-    margin-right: var(--flex-gap);
+    --flex-gap: #{$spacing};
+    padding: $spacing;
+    margin-right: $spacing;
     background-color: var(--clusters-menu-bgc);
     border-radius: $radius;
 
@@ -22,7 +23,8 @@
 
   > .info-col {
     @include hidden-scrollbar;
-    padding: var(--flex-gap);
+    --flex-gap: #{$spacing};
+    padding: $spacing;
     border-left: 1px solid #353a3e;
   }
 

src/renderer/components/tooltip/tooltip.tsx

@@ -7,7 +7,7 @@ import { createPortal } from "react-dom"
 import { autobind, cssNames } from "../../utils";
 import { Animate } from "../animate";
 
-// todo: refactor -- better positioning + remove "flying effect"
+// fixme: refactor -- better positioning + remove "flying effect"
 // todo: always render outside of parent element ("overflow: auto" should not affect tooltip)
 
 export interface TooltipProps {

src/renderer/index.tsx

@@ -13,7 +13,6 @@ import { _i18n } from "./i18n";
 import { ClusterManager } from "./components/cluster-manager";
 import { ErrorBoundary } from "./components/error-boundary";
 import { WhatsNew, whatsNewRoute } from "./components/+whats-new";
-import { Preferences, preferencesRoute } from "./components/+preferences";
 
 @observer
 class LensApp extends React.Component {
@@ -37,7 +36,6 @@ class LensApp extends React.Component {
             <Switch>
               {userStore.isNewVersion && <Route component={WhatsNew}/>}
               <Route component={WhatsNew} {...whatsNewRoute}/>
-              <Route component={Preferences} {...preferencesRoute}/>
               <Route component={ClusterManager}/>
             </Switch>
           </ErrorBoundary>