preferences page -- part 2

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

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

@@ -1,9 +1,23 @@
 .Preferences {
-  --flex-gap: #{$padding};
-
   h2 {
     &:not(:first-child) {
       margin-top: $padding * 3;
     }
   }
+
+  .info-block {
+    --flex-gap: #{$padding};
+  }
+
+  .repos {
+    --flex-gap: #{$padding};
+
+    > .title {
+      font-style: italic;
+    }
+
+    .Badge {
+      margin: $padding / 2;
+    }
+  }
 }

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

@@ -1,45 +1,121 @@
 import "./preferences.scss"
 import React, { Fragment } from "react";
 import { observer } from "mobx-react";
+import { action, computed, observable } from "mobx";
 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 { userStore } from "../../../common/user-store";
+import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager";
 import { Input } from "../input";
 import { Checkbox } from "../checkbox";
-
-type ThemeSelectOption = SelectOption & { type: ThemeType }
+import { Notifications } from "../notifications";
+import { Badge } from "../badge";
+import { Spinner } from "../spinner";
 
 @observer
 export class Preferences extends React.Component {
-  themeOptions: ThemeSelectOption[] = [
-    { value: "kontena-dark", label: <Trans>Dark</Trans>, type: ThemeType.DARK },
-    { value: "kontena-light", label: <Trans>Light</Trans>, type: ThemeType.LIGHT },
+  @observable helmLoading = false;
+  @observable helmUpdating = false;
+  @observable helmRepos: HelmRepo[] = [];
+  @observable helmAddedRepos = observable.map<string, HelmRepo>();
+
+  @observable themeOptions: SelectOption<string>[] = [
+    { value: "kontena-dark", label: <Trans>Dark</Trans> },
+    { value: "kontena-light", label: <Trans>Light</Trans> },
   ]
 
-  downloadMirrorOptions: SelectOption[] = [
+  @observable downloadMirrorOptions: SelectOption<string>[] = [
     { value: "default", label: "Default (Google)" },
     { value: "china", label: "China (Azure)" },
   ]
 
-  onThemeChange = ({ value }: ThemeSelectOption) => {
+  @computed get helmOptions(): SelectOption<HelmRepo>[] {
+    return this.helmRepos.map(repo => ({
+      value: repo,
+      label: repo.name,
+    }))
+  }
+
+  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(err);
+    }
+    this.helmLoading = false;
+  }
+
+  async addRepo(repo: HelmRepo) {
+    try {
+      await repoManager.addRepo(repo);
+      this.helmAddedRepos.set(repo.name, repo);
+    } catch (err) {
+      Notifications.error(<Trans>Adding helm branch <b>{repo.name}</b> has failed: {String(err)}</Trans>)
+    }
+  }
+
+  async removeRepo(repo: HelmRepo) {
+    try {
+      await repoManager.removeRepo(repo);
+      this.helmAddedRepos.delete(repo.name);
+    } catch (err) {
+      Notifications.error(
+        <Trans>Removing helm branch <b>{repo.name}</b> has failed: {String(err)}</Trans>
+      )
+    }
+  }
+
+  onThemeChange = ({ value }: SelectOption<string>) => {
     // themeStore.setTheme(value); // fixme: apply theme on the fly for current view
     userStore.preferences.colorTheme = value;
   }
 
+  onRepoSelect = async ({ value: repo }: SelectOption<HelmRepo>) => {
+    const isAdded = this.helmAddedRepos.has(repo.name);
+    if (isAdded) {
+      Notifications.ok(<Trans>Helm branch <b>{repo.name}</b> already in use</Trans>)
+      return;
+    }
+    this.helmUpdating = false;
+    await this.addRepo(repo);
+    this.helmUpdating = 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>
+    )
+  }
+
   renderInfo() {
     return (
       <Fragment>
         <h2>
           <Trans>Preferences</Trans>
         </h2>
-        <div className="info-block flex gaps align-center">
+        <div className="info-block flex gaps align-flex-start">
           <Icon small material="info"/>
-          <small>
+          <p>
             <Trans>Lens Global Settings</Trans> (<Trans>applicable to all clusters</Trans>)
-          </small>
+          </p>
         </div>
       </Fragment>
     )
@@ -58,15 +134,41 @@ export class Preferences extends React.Component {
 
         <h2><Trans>Download Mirror</Trans></h2>
         <Select
-          placeholder={_i18n._(t`Download mirror for kubectl`)}
+          placeholder={<Trans>Download mirror for kubectl</Trans>}
           options={this.downloadMirrorOptions}
           value={preferences.downloadMirror}
           onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
         />
 
         <h2><Trans>Helm</Trans></h2>
-        <div className="helm">
-          // todo: added helm repos
+        <Select
+          placeholder={<Trans>Repositories</Trans>}
+          isLoading={this.helmLoading}
+          isDisabled={this.helmUpdating}
+          options={this.helmOptions}
+          onChange={this.onRepoSelect}
+          formatOptionLabel={this.formatHelmOptionLabel}
+          controlShouldRenderValue={false}
+        />
+        <div className="repos flex gaps align-center">
+          <div className="title">
+            <Trans>Added repos:</Trans>
+          </div>
+          <div className="repos-list">
+            {this.helmLoading && <Spinner/>}
+            {Array.from(this.helmAddedRepos).map(([name, repo]) => {
+              return (
+                <Badge key={name} className="added-repo flex gaps align-center">
+                  <span className="repo">{name}</span>
+                  <Icon
+                    material="remove_circle_outline"
+                    onClick={() => this.removeRepo(repo)}
+                    tooltip={<Trans>Remove</Trans>}
+                  />
+                </Badge>
+              )
+            })}
+          </div>
         </div>
 
         <h2><Trans>HTTP Proxy</Trans></h2>

src/renderer/components/badge/badge.tsx

@@ -5,8 +5,8 @@ import { cssNames } from "../../utils/cssNames";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 
 interface Props extends React.HTMLAttributes<any>, TooltipDecoratorProps {
-  label: React.ReactNode;
   small?: boolean;
+  label?: React.ReactNode;
 }
 
 @withTooltip

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

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