Make data required for opening of release details a dependency to make sure it's present

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/components/+apps-releases/release-details/release-details.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { getRelease } from "../../../../common/k8s-api/endpoints/helm-releases.api";
+import { asyncComputed } from "@ogre-tools/injectable-react";
+import releaseInjectable from "./release.injectable";
+
+const releaseDetailsInjectable = getInjectable({
+  instantiate: (di) =>
+    asyncComputed(async () => {
+      const release = di.inject(releaseInjectable).value.get();
+
+      return await getRelease(release.name, release.namespace);
+    }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releaseDetailsInjectable;

src/renderer/components/+apps-releases/release-details/release-details.scss

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-@import "release.mixins";
+@import "../release.mixins";
 
 .ReleaseDetails {
   .DrawerItem {

src/renderer/components/+apps-releases/release-details/release-details.tsx

@@ -7,126 +7,79 @@ import "./release-details.scss";
 
 import React, { Component } from "react";
 import groupBy from "lodash/groupBy";
-import isEqual from "lodash/isEqual";
+import { computed, makeObservable, observable } from "mobx";
-import { makeObservable, observable, reaction } from "mobx";
 import { Link } from "react-router-dom";
 import kebabCase from "lodash/kebabCase";
-import {
+import type { HelmRelease, IReleaseDetails, IReleaseUpdateDetails, IReleaseUpdatePayload } from "../../../../common/k8s-api/endpoints/helm-releases.api";
-  getRelease,
+import { HelmReleaseMenu } from "../release-menu";
-  getReleaseValues,
+import { Drawer, DrawerItem, DrawerTitle } from "../../drawer";
-  HelmRelease,
+import { Badge } from "../../badge";
-  IReleaseDetails, IReleaseUpdateDetails,
+import { cssNames, stopPropagation } from "../../../utils";
-  IReleaseUpdatePayload,
+import { observer } from "mobx-react";
-} from "../../../common/k8s-api/endpoints/helm-releases.api";
+import { Spinner } from "../../spinner";
-import { HelmReleaseMenu } from "./release-menu";
+import { Table, TableCell, TableHead, TableRow } from "../../table";
-import { Drawer, DrawerItem, DrawerTitle } from "../drawer";
+import { Button } from "../../button";
-import { Badge } from "../badge";
+import { Notifications } from "../../notifications";
-import { cssNames, stopPropagation } from "../../utils";
+import { ThemeStore } from "../../../theme.store";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { apiManager } from "../../../../common/k8s-api/api-manager";
-import { Spinner } from "../spinner";
+import { SubTitle } from "../../layout/sub-title";
-import { Table, TableCell, TableHead, TableRow } from "../table";
+import { getDetailsUrl } from "../../kube-detail-params";
-import { Button } from "../button";
+import { Checkbox } from "../../checkbox";
-import { Notifications } from "../notifications";
+import { MonacoEditor } from "../../monaco-editor";
-import { ThemeStore } from "../../theme.store";
+import { IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";
-import { apiManager } from "../../../common/k8s-api/api-manager";
+import createUpgradeChartTabInjectable from "../../dock/create-upgrade-chart-tab/create-upgrade-chart-tab.injectable";
-import { SubTitle } from "../layout/sub-title";
+import updateReleaseInjectable from "../update-release/update-release.injectable";
-import { secretsStore } from "../+config-secrets/secrets.store";
+import releaseInjectable from "./release.injectable";
-import { Secret } from "../../../common/k8s-api/endpoints";
+import releaseDetailsInjectable from "./release-details.injectable";
-import { getDetailsUrl } from "../kube-detail-params";
+import releaseValuesInjectable from "./release-values.injectable";
-import { Checkbox } from "../checkbox";
+import userSuppliedValuesAreShownInjectable from "./user-supplied-values-are-shown.injectable";
-import { MonacoEditor } from "../monaco-editor";
-import { withInjectables } from "@ogre-tools/injectable-react";
-import createUpgradeChartTabInjectable
-  from "../dock/create-upgrade-chart-tab/create-upgrade-chart-tab.injectable";
-import updateReleaseInjectable from "./update-release/update-release.injectable";
-import getReleaseSecretInjectable from "./get-release-secret/get-release-secret.injectable";
 
 interface Props {
-  release: HelmRelease;
   hideDetails(): void;
 }
 
 interface Dependencies {
-  getReleaseSecret: (release: HelmRelease) => Secret
+  release: IAsyncComputed<HelmRelease>
+  releaseDetails: IAsyncComputed<IReleaseDetails>
+  releaseValues: IAsyncComputed<string>
   updateRelease: (name: string, namespace: string, payload: IReleaseUpdatePayload) => Promise<IReleaseUpdateDetails>
   createUpgradeChartTab: (release: HelmRelease) => void
+  userSuppliedValuesAreShown: { toggle: () => void, value: boolean }
 }
 
 @observer
 class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
-  @observable details: IReleaseDetails | null = null;
+
-  @observable values = "";
-  @observable valuesLoading = false;
-  @observable showOnlyUserSuppliedValues = true;
   @observable saving = false;
-  @observable releaseSecret: Secret;
   @observable error?: string = undefined;
 
-  componentDidMount() {
+  private nonSavedValues: string;
-    disposeOnUnmount(this, [
-      reaction(() => this.props.release, release => {
-        if (!release) return;
-        this.loadDetails();
-        this.loadValues();
-        this.releaseSecret = null;
-      }),
-      reaction(() => secretsStore.getItems(), () => {
-        if (!this.props.release) return;
-
-        const { release } = this.props;
-        const secret = this.props.getReleaseSecret(release);
-
-        if (this.releaseSecret) {
-          if (isEqual(this.releaseSecret.getLabels(), secret.getLabels())) return;
-          this.loadDetails();
-        }
-        this.releaseSecret = secret;
-      }),
-      reaction(() => this.showOnlyUserSuppliedValues, () => {
-        this.loadValues();
-      }),
-    ]);
-  }
 
   constructor(props: Props & Dependencies) {
     super(props);
     makeObservable(this);
   }
 
-  async loadDetails() {
+  @computed get release() {
-    const { release } = this.props;
+    return this.props.release.value.get();
-
-    try {
-      this.details = null;
-      this.details = await getRelease(release.getName(), release.getNs());
-    } catch (error) {
-      this.error = `Failed to get release details: ${error}`;
-    }
   }
 
-  async loadValues() {
+  @computed get details() {
-    const { release } = this.props;
+    return this.props.releaseDetails.value.get();
+  }
 
-    try {
+  @computed get values() {
-      this.valuesLoading = true;
+    return this.props.releaseValues.value.get();
-      this.values = (await getReleaseValues(release.getName(), release.getNs(), !this.showOnlyUserSuppliedValues)) ?? "";
-    } catch (error) {
-      Notifications.error(`Failed to load values for ${release.getName()}: ${error}`);
-      this.values = "";
-    } finally {
-      this.valuesLoading = false;
-    }
   }
 
   updateValues = async () => {
-    const { release } = this.props;
+    const name = this.release.getName();
-    const name = release.getName();
+    const namespace = this.release.getNs();
-    const namespace = release.getNs();
     const data = {
-      chart: release.getChart(),
+      chart: this.release.getChart(),
-      repo: await release.getRepo(),
+      repo: await this.release.getRepo(),
-      version: release.getVersion(),
+      version: this.release.getVersion(),
-      values: this.values,
+      values: this.nonSavedValues,
     };
 
     this.saving = true;
@@ -136,6 +89,8 @@ class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
       Notifications.ok(
         <p>Release <b>{name}</b> successfully updated!</p>,
       );
+
+      this.props.releaseValues.invalidate();
     } catch (err) {
       Notifications.error(err);
     }
@@ -143,14 +98,18 @@ class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
   };
 
   upgradeVersion = () => {
-    const { release, hideDetails } = this.props;
+    const { hideDetails } = this.props;
 
-    this.props.createUpgradeChartTab(release);
+    this.props.createUpgradeChartTab(this.release);
     hideDetails();
   };
 
   renderValues() {
-    const { values, valuesLoading, saving } = this;
+    const { saving } = this;
+
+    const releaseValuesArePending = this.props.releaseValues.pending.get();
+
+    this.nonSavedValues = this.values;
 
     return (
       <div className="values">
@@ -158,24 +117,20 @@ class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
         <div className="flex column gaps">
           <Checkbox
             label="User-supplied values only"
-            value={this.showOnlyUserSuppliedValues}
+            value={this.props.userSuppliedValuesAreShown.value}
-            onChange={value => this.showOnlyUserSuppliedValues = value}
+            onChange={this.props.userSuppliedValuesAreShown.toggle}
-            disabled={valuesLoading}
+            disabled={releaseValuesArePending}
           />
           <MonacoEditor
-            readOnly={valuesLoading}
-            className={cssNames({ loading: valuesLoading })}
             style={{ minHeight: 300 }}
-            value={values}
+            value={this.values}
-            onChange={text => this.values = text}
+            onChange={text => this.nonSavedValues = text}
-          >
+          />
-            {valuesLoading && <Spinner center/>}
-          </MonacoEditor>
           <Button
             primary
             label="Save"
             waiting={saving}
-            disabled={valuesLoading}
+            disabled={releaseValuesArePending}
             onClick={this.updateValues}
           />
         </div>
@@ -238,9 +193,7 @@ class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
   }
 
   renderContent() {
-    const { release } = this.props;
+    if (!this.release) return null;
-
-    if (!release) return null;
 
     if (this.error) {
       return (
@@ -258,7 +211,7 @@ class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
       <div>
         <DrawerItem name="Chart" className="chart">
           <div className="flex gaps align-center">
-            <span>{release.getChart()}</span>
+            <span>{this.release.getChart()}</span>
             <Button
               primary
               label="Upgrade"
@@ -268,22 +221,22 @@ class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
           </div>
         </DrawerItem>
         <DrawerItem name="Updated">
-          {release.getUpdated()} ago ({release.updated})
+          {this.release.getUpdated()} ago ({this.release.updated})
         </DrawerItem>
         <DrawerItem name="Namespace">
-          {release.getNs()}
+          {this.release.getNs()}
         </DrawerItem>
         <DrawerItem name="Version" onClick={stopPropagation}>
           <div className="version flex gaps align-center">
             <span>
-              {release.getVersion()}
+              {this.release.getVersion()}
             </span>
           </div>
         </DrawerItem>
         <DrawerItem name="Status" className="status" labelsOnly>
           <Badge
-            label={release.getStatus()}
+            label={this.release.getStatus()}
-            className={kebabCase(release.getStatus())}
+            className={kebabCase(this.release.getStatus())}
           />
         </DrawerItem>
         {this.renderValues()}
@@ -296,15 +249,15 @@ class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
   }
 
   render() {
-    const { release, hideDetails } = this.props;
+    const { hideDetails } = this.props;
-    const title = release ? `Release: ${release.getName()}` : "";
+    const title = this.release ? `Release: ${this.release.getName()}` : "";
-    const toolbar = <HelmReleaseMenu release={release} toolbar hideDetails={hideDetails}/>;
+    const toolbar = <HelmReleaseMenu release={this.release} toolbar hideDetails={hideDetails}/>;
 
     return (
       <Drawer
         className={cssNames("ReleaseDetails", ThemeStore.getInstance().activeTheme.type)}
         usePortal={true}
-        open={!!release}
+        open={!!this.release}
         title={title}
         onClose={hideDetails}
         toolbar={toolbar}
@@ -320,7 +273,12 @@ export const ReleaseDetails = withInjectables<Dependencies, Props>(
 
   {
     getProps: (di, props) => ({
-      getReleaseSecret: di.inject(getReleaseSecretInjectable),
+      release: di.inject(releaseInjectable),
+      releaseDetails: di.inject(releaseDetailsInjectable),
+      releaseValues: di.inject(releaseValuesInjectable),
+
+      userSuppliedValuesAreShown: di.inject(userSuppliedValuesAreShownInjectable),
+
       updateRelease: di.inject(updateReleaseInjectable),
       createUpgradeChartTab: di.inject(createUpgradeChartTabInjectable),
       ...props,

src/renderer/components/+apps-releases/release-details/release-route-parameters.injectable.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { matchPath } from "react-router";
+import observableHistoryInjectable from "../../../navigation/observable-history.injectable";
+import { releaseRoute, ReleaseRouteParams } from "../../../../common/routes";
+
+const releaseRouteParametersInjectable = getInjectable({
+  instantiate: (di) => {
+    const observableHistory = di.inject(observableHistoryInjectable);
+
+    return computed(() => {
+      const releasePathParameters = matchPath<ReleaseRouteParams>(observableHistory.location.pathname, {
+        path: releaseRoute.path,
+      });
+
+      if (!releasePathParameters) {
+        return {};
+      }
+
+      return releasePathParameters.params;
+    });
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releaseRouteParametersInjectable;

src/renderer/components/+apps-releases/release-details/release-values.injectable.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { getReleaseValues } from "../../../../common/k8s-api/endpoints/helm-releases.api";
+import { asyncComputed } from "@ogre-tools/injectable-react";
+import releaseInjectable from "./release.injectable";
+import { Notifications } from "../../notifications";
+import userSuppliedValuesAreShownInjectable from "./user-supplied-values-are-shown.injectable";
+
+const releaseValuesInjectable = getInjectable({
+  instantiate: (di) =>
+    asyncComputed(async () => {
+      const release = di.inject(releaseInjectable).value.get();
+      const userSuppliedValuesAreShown = di.inject(userSuppliedValuesAreShownInjectable).value;
+
+      try {
+        return await getReleaseValues(release.getName(), release.getNs(), !userSuppliedValuesAreShown) ?? "";
+      } catch (error) {
+        Notifications.error(`Failed to load values for ${release.getName()}: ${error}`);
+
+        return "";
+      }
+    }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releaseValuesInjectable;

src/renderer/components/+apps-releases/release-details/release.injectable.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { matches } from "lodash/fp";
+import releasesInjectable from "../releases.injectable";
+import releaseRouteParametersInjectable from "./release-route-parameters.injectable";
+import { asyncComputed } from "@ogre-tools/injectable-react";
+
+const releaseInjectable = getInjectable({
+  instantiate: (di) => {
+    const releases = di.inject(releasesInjectable);
+    const releaseRouteParameters = di.inject(releaseRouteParametersInjectable);
+
+    return asyncComputed(async () => {
+      const { name, namespace } = releaseRouteParameters.get();
+
+      return releases.value.get().find(matches({ name, namespace }));
+    });
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default releaseInjectable;

src/renderer/components/+apps-releases/release-details/user-supplied-values-are-shown.injectable.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { observable } from "mobx";
+
+const userSuppliedValuesAreShownInjectable = getInjectable({
+  instantiate: () => {
+    const state = observable.box(false);
+
+    return {
+      get value() {
+        return state.get();
+      },
+
+      toggle: () => {
+        state.set(!state.get());
+      },
+    };
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default userSuppliedValuesAreShownInjectable;
+

src/renderer/components/+apps-releases/releases.tsx

@@ -20,7 +20,7 @@ import { kebabCase } from "lodash/fp";
 import { HelmReleaseMenu } from "./release-menu";
 import type { ItemStore } from "../../../common/item.store";
 import { ReleaseRollbackDialog } from "./release-rollback-dialog";
-import { ReleaseDetails } from "./release-details";
+import { ReleaseDetails } from "./release-details/release-details";
 import removableReleasesInjectable from "./removable-releases.injectable";
 import type { RemovableHelmRelease } from "./removable-releases";
 import { observer } from "mobx-react";
@@ -58,20 +58,8 @@ class NonInjectedHelmReleases extends Component<Dependencies & Props> {
     }
   }
 
-  get selectedRelease() {
-    const { match: { params: { name, namespace }}} = this.props;
-
-    return this.props.releases.get().find(release => {
-      return release.getName() == name && release.getNs() == namespace;
-    });
-  }
-
   onDetails = (item: HelmRelease) => {
-    if (item === this.selectedRelease) {
+    this.showDetails(item);
-      this.hideDetails();
-    } else {
-      this.showDetails(item);
-    }
   };
 
   showDetails = (item: HelmRelease) => {
@@ -210,12 +198,10 @@ class NonInjectedHelmReleases extends Component<Dependencies & Props> {
           customizeRemoveDialog={selectedItems => ({
             message: this.renderRemoveDialogMessage(selectedItems),
           })}
-          detailsItem={this.selectedRelease}
           onDetails={this.onDetails}
         />
-
+        
         <ReleaseDetails
-          release={this.selectedRelease}
           hideDetails={this.hideDetails}
         />