Helm components should always use version information (#949)

* clean up code to catch rejections

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+apps-helm-charts/helm-chart-details.tsx

@@ -3,8 +3,8 @@ import "./helm-chart-details.scss";
 import React, { Component } from "react";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
 import { t, Trans } from "@lingui/macro";
-import { autorun, observable } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observable, toJS } from "mobx";
+import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
 import { autobind, stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
@@ -25,39 +25,41 @@ interface Props {
 export class HelmChartDetails extends Component<Props> {
   @observable chartVersions: HelmChart[];
   @observable selectedChart: HelmChart;
-  @observable description: string = null;
+  @observable readme: string = null;
+  @observable error: string = null;
 
   private chartPromise: CancelablePromise<{ readme: string; versions: HelmChart[] }>;
 
-  @disposeOnUnmount
-  chartSelector = autorun(async () => {
-    if (!this.props.chart) return;
-    this.chartVersions = null;
-    this.selectedChart = null;
-    this.description = null;
-    this.loadChartData();
-    this.chartPromise.then(data => {
-      this.description = data.readme;
-      this.chartVersions = data.versions;
-      this.selectedChart = data.versions[0];
-    });
-  });
+  async componentDidMount() {
+    const { chart: { name, repo, version } } = this.props
 
-  loadChartData(version?: string) {
-    const { chart: { name, repo } } = this.props;
-    if (this.chartPromise) this.chartPromise.cancel();
-    this.chartPromise = helmChartsApi.get(repo, name, version);
+    try {
+      const { readme, versions } = await (this.chartPromise = helmChartsApi.get(repo, name, version))
+      this.readme = readme
+      this.chartVersions = versions
+      this.selectedChart = versions[0]
+    } catch (error) {
+      this.error = error
+    }
+  }
+
+  componentWillUnmount() {
+    this.chartPromise?.cancel();
   }
 
   @autobind()
-  onVersionChange(opt: SelectOption) {
-    const version = opt.value;
+  async onVersionChange({ value: version }: SelectOption) {
     this.selectedChart = this.chartVersions.find(chart => chart.version === version);
-    this.description = null;
-    this.loadChartData(version);
-    this.chartPromise.then(data => {
-      this.description = data.readme
-    });
+    this.readme = null;
+
+    try {
+      this.chartPromise?.cancel();
+      const { chart: { name, repo } } = this.props;
+      const { readme } = await (this.chartPromise = helmChartsApi.get(repo, name, version))
+      this.readme = readme;
+    } catch (error) {
+      this.error = error;
+    }
   }
 
   @autobind()
@@ -79,7 +81,7 @@ export class HelmChartDetails extends Component<Props> {
         <div className="intro-contents box grow">
           <div className="description flex align-center justify-space-between">
             {selectedChart.getDescription()}
-            <Button primary label={_i18n._(t`Install`)} onClick={this.install}/>
+            <Button primary label={_i18n._(t`Install`)} onClick={this.install} />
           </div>
           <DrawerItem name={_i18n._(t`Version`)} className="version" onClick={stopPropagation}>
             <Select
@@ -95,12 +97,12 @@ export class HelmChartDetails extends Component<Props> {
           </DrawerItem>
           <DrawerItem name={_i18n._(t`Maintainers`)} className="maintainers">
             {selectedChart.getMaintainers().map(({ name, email, url }) =>
-              <a key={name} href={url ? url : `mailto:${email}`} target="_blank">{name}</a>
+              <a key={name} href={url || `mailto:${email}`} target="_blank">{name}</a>
             )}
           </DrawerItem>
           {selectedChart.getKeywords().length > 0 && (
             <DrawerItem name={_i18n._(t`Keywords`)} labelsOnly>
-              {selectedChart.getKeywords().map(key => <Badge key={key} label={key}/>)}
+              {selectedChart.getKeywords().map(key => <Badge key={key} label={key} />)}
             </DrawerItem>
           )}
         </div>
@@ -108,14 +110,35 @@ export class HelmChartDetails extends Component<Props> {
     );
   }
 
+  renderReadme() {
+    if (this.readme === null) {
+      return <Spinner center />
+    }
+
+    return (
+      <div className="chart-description">
+        <MarkdownViewer markdown={this.readme} />
+      </div>
+    )
+  }
+
   renderContent() {
-    if (this.selectedChart === null || this.description === null) return <Spinner center/>;
+    if (!this.selectedChart) {
+      return <Spinner center />;
+    }
+
+    if (this.error) {
+      return (
+        <div className="box grow">
+          <p className="error">{this.error}</p>
+        </div>
+      )
+    }
+
     return (
       <div className="box grow">
         {this.renderIntroduction()}
-        <div className="chart-description">
-          <MarkdownViewer markdown={this.description}/>
-        </div>
+        {this.renderReadme()}
       </div>
     );
   }

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

@@ -72,7 +72,7 @@ export class HelmCharts extends Component<Props> {
             (items: HelmChart[]) => items.filter(item => !item.deprecated)
           ]}
           customizeHeader={() => (
-            <SearchInput placeholder={_i18n._(t`Search Helm Charts`)}/>
+            <SearchInput placeholder={_i18n._(t`Search Helm Charts`)} />
           )}
           renderTableHeader={[
             { className: "icon" },
@@ -99,10 +99,12 @@ export class HelmCharts extends Component<Props> {
           detailsItem={this.selectedChart}
           onDetails={this.showDetails}
         />
-        <HelmChartDetails
-          chart={this.selectedChart}
-          hideDetails={this.hideDetails}
-        />
+        {this.selectedChart && (
+          <HelmChartDetails
+            chart={this.selectedChart}
+            hideDetails={this.hideDetails}
+          />
+        )}
       </>
     );
   }

src/renderer/components/dock/install-chart.store.ts

@@ -5,6 +5,7 @@ import { t } from "@lingui/macro";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
 import { IReleaseUpdateDetails } from "../../api/endpoints/helm-releases.api";
 import { _i18n } from "../../i18n";
+import { Notifications } from "../notifications";
 
 export interface IChartInstallData {
   name: string;
@@ -27,45 +28,50 @@ export class InstallChartStore extends DockTabStore<IChartInstallData> {
     });
     autorun(() => {
       const { selectedTab, isOpen } = dockStore;
-      if (!isInstallChartTab(selectedTab)) return;
-      if (isOpen) {
-        this.loadData();
+      if (isInstallChartTab(selectedTab) && isOpen) {
+        this.loadData()
+          .catch(err => Notifications.error(String(err)))
       }
     }, { delay: 250 })
   }
 
   @action
   async loadData(tabId = dockStore.selectedTabId) {
-    const { values } = this.getData(tabId);
-    const versions = this.versions.getData(tabId);
-    return Promise.all([
-      !versions && this.loadVersions(tabId),
-      !values && this.loadValues(tabId),
-    ])
+    const promises = []
+
+    if (!this.getData(tabId).values) {
+      promises.push(this.loadValues(tabId))
+    }
+
+    if (!this.versions.getData(tabId)) {
+      promises.push(this.loadVersions(tabId))
+    }
+
+    await Promise.all(promises)
   }
 
   @action
   async loadVersions(tabId: TabId) {
-    const { repo, name } = this.getData(tabId);
+    const { repo, name, version } = this.getData(tabId);
     this.versions.clearData(tabId); // reset
-    const charts = await helmChartsApi.get(repo, name);
+    const charts = await helmChartsApi.get(repo, name, version);
     const versions = charts.versions.map(chartVersion => chartVersion.version);
     this.versions.setData(tabId, versions);
   }
 
   @action
   async loadValues(tabId: TabId) {
-    const data = this.getData(tabId);
-    const { repo, name, version } = data;
-    let values = "";
-    const fetchValues = async (retry = 1, maxRetries = 3) => {
-      values = await helmChartsApi.getValues(repo, name, version);
-      if (values || retry == maxRetries) return;
-      await fetchValues(retry + 1);
-    };
-    this.setData(tabId, { ...data, values: undefined }); // reset
-    await fetchValues();
-    this.setData(tabId, { ...data, values });
+    const data = this.getData(tabId)
+    const { repo, name, version } = data
+
+    // This loop is for "retrying" the "getValues" call
+    for (const _ of Array(3)) {
+      const values = await helmChartsApi.getValues(repo, name, version)
+      if (values) {
+        this.setData(tabId, { ...data, values })
+        return
+      }
+    }
   }
 }
 

src/renderer/components/dock/install-chart.tsx

@@ -107,15 +107,15 @@ export class InstallChart extends Component<Props> {
 
   render() {
     const { tabId, chartData, values, versions, install } = this;
-    if (!chartData || chartData.values === undefined || !versions) {
-      return <Spinner center/>;
+    if (chartData?.values === undefined || !versions) {
+      return <Spinner center />;
     }
 
     if (this.releaseDetails) {
       return (
         <div className="InstallChartDone flex column gaps align-center justify-center">
           <p>
-            <Icon material="check" big sticker/>
+            <Icon material="check" big sticker />
           </p>
           <p><Trans>Installation complete!</Trans></p>
           <div className="flex gaps align-center">
@@ -144,7 +144,7 @@ export class InstallChart extends Component<Props> {
     const panelControls = (
       <div className="install-controls flex gaps align-center">
         <span><Trans>Chart</Trans></span>
-        <Badge label={`${repo}/${name}`} title={_i18n._(t`Repo/Name`)}/>
+        <Badge label={`${repo}/${name}`} title={_i18n._(t`Repo/Name`)} />
         <span><Trans>Version</Trans></span>
         <Select
           className="chart-version"

src/renderer/components/notifications/notifications.store.ts

@@ -8,10 +8,16 @@ import { JsonApiErrorParsed } from "../../api/json-api";
 export type IMessageId = string | number;
 export type IMessage = React.ReactNode | React.ReactNode[] | JsonApiErrorParsed;
 
+export enum NotificationStatus {
+  OK = "ok",
+  ERROR = "error",
+  INFO = "info",
+}
+
 export interface INotification {
   id?: IMessageId;
   message: IMessage;
-  status?: "ok" | "error" | "info";
+  status?: NotificationStatus;
   timeout?: number; // auto-hiding timeout in milliseconds, 0 = no hide
 }
 

src/renderer/components/notifications/notifications.tsx

@@ -5,7 +5,7 @@ import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react"
 import { JsonApiErrorParsed } from "../../api/json-api";
 import { cssNames, prevDefault } from "../../utils";
-import { IMessage, INotification, notificationsStore } from "./notifications.store";
+import { IMessage, INotification, notificationsStore, NotificationStatus } from "./notifications.store";
 import { Animate } from "../animate";
 import { Icon } from "../icon"
 
@@ -17,7 +17,7 @@ export class Notifications extends React.Component {
     notificationsStore.add({
       message: message,
       timeout: 2500,
-      status: "ok"
+      status: NotificationStatus.OK
     })
   }
 
@@ -25,13 +25,13 @@ export class Notifications extends React.Component {
     notificationsStore.add({
       message: message,
       timeout: 10000,
-      status: "error"
+      status: NotificationStatus.ERROR
     });
   }
 
   static info(message: IMessage, customOpts: Partial<INotification> = {}) {
     return notificationsStore.add({
-      status: "info",
+      status: NotificationStatus.INFO,
       timeout: 0,
       message: message,
       ...customOpts,
@@ -78,7 +78,7 @@ export class Notifications extends React.Component {
                 onMouseLeave={() => addAutoHideTimer(notification)}
                 onMouseEnter={() => removeAutoHideTimer(notification)}>
                 <div className="box center">
-                  <Icon material="info_outline"/>
+                  <Icon material="info_outline" />
                 </div>
                 <div className="message box grow">{msgText}</div>
                 <div className="box center">