Fix crash and update unit test

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

packages/core/src/features/helm-releases/showing-details-for-helm-release.test.ts

@@ -350,8 +350,8 @@ describe("showing details for helm release", () => {
                 expect(rendered.baseElement).toMatchSnapshot();
               });
 
-              it("does not reload", () => {
+              it("does reload", () => {
-                expect(requestDetailedHelmReleaseMock).not.toHaveBeenCalled();
+                expect(requestDetailedHelmReleaseMock).toHaveBeenCalled();
               });
             });
           });

packages/core/src/renderer/components/+helm-releases/release-details/release-details-content.tsx

@@ -11,10 +11,7 @@ import { Link } from "react-router-dom";
 import { DrawerItem, DrawerTitle } from "../../drawer";
 import { stopPropagation } from "../../../utils";
 import { observer } from "mobx-react";
-import type { IAsyncComputed } from "@ogre-tools/injectable-react";
-import { withInjectables } from "@ogre-tools/injectable-react";
 import type { ConfigurationInput, MinimalResourceGroup, OnlyUserSuppliedValuesAreShownToggle, ReleaseDetailsModel } from "./release-details-model/release-details-model.injectable";
-import releaseDetailsModelInjectable from "./release-details-model/release-details-model.injectable";
 import { Button } from "../../button";
 import { kebabCase } from "lodash/fp";
 import { Badge } from "../../badge";
@@ -22,37 +19,22 @@ import { SubTitle } from "../../layout/sub-title";
 import { Table, TableCell, TableHead, TableRow } from "../../table";
 import { Checkbox } from "../../checkbox";
 import { MonacoEditor } from "../../monaco-editor";
-import { Spinner } from "../../spinner";
-import type { TargetHelmRelease } from "./target-helm-release.injectable";
 
 interface ReleaseDetailsContentProps {
-  targetRelease: TargetHelmRelease;
+  model: ReleaseDetailsModel;
 }
 
-interface Dependencies {
+export const ReleaseDetailsContent = observer(({ model }: ReleaseDetailsContentProps) => {
-  computedModel: IAsyncComputed<ReleaseDetailsModel>;
-}
-
-const NonInjectedReleaseDetailsContent = observer(({ computedModel }: Dependencies & ReleaseDetailsContentProps) => {
-  const model = computedModel.value.get();
-
-  if (!model) {
-    return <Spinner center data-testid="helm-release-detail-content-spinner" />;
-  }
-
   const loadingError = model.loadingError.get();
 
   if (loadingError) {
     return (
       <div data-testid="helm-release-detail-error">
-        Failed to load release:
+        {`Failed to load release: ${loadingError}`}
-        {" "}
-        {loadingError}
       </div>
     );
   }
 
-
   return (
     <div>
       <DrawerItem name="Chart" className="chart">
@@ -94,9 +76,7 @@ const NonInjectedReleaseDetailsContent = observer(({ computedModel }: Dependenci
       <ReleaseValues
         releaseId={model.id}
         configuration={model.configuration}
-        onlyUserSuppliedValuesAreShown={
+        onlyUserSuppliedValuesAreShown={model.onlyUserSuppliedValuesAreShown}
-          model.onlyUserSuppliedValuesAreShown
-        }
       />
 
       <DrawerTitle>Notes</DrawerTitle>
@@ -116,13 +96,6 @@ const NonInjectedReleaseDetailsContent = observer(({ computedModel }: Dependenci
   );
 });
 
-export const ReleaseDetailsContent = withInjectables<Dependencies, ReleaseDetailsContentProps>(NonInjectedReleaseDetailsContent, {
-  getProps: (di, props) => ({
-    ...props,
-    computedModel: di.inject(releaseDetailsModelInjectable, props.targetRelease),
-  }),
-});
-
 const ResourceGroup = ({
   group: { kind, isNamespaced, resources },
 }: {

packages/core/src/renderer/components/+helm-releases/release-details/release-details-drawer-toolbar.tsx

@@ -8,33 +8,23 @@ import "./release-details.scss";
 import React from "react";
 
 import { observer } from "mobx-react";
-import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import type { TargetHelmRelease } from "./target-helm-release.injectable";
 import navigateToHelmReleasesInjectable from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
 import type { ReleaseDetailsModel } from "./release-details-model/release-details-model.injectable";
-import releaseDetailsModelInjectable from "./release-details-model/release-details-model.injectable";
 import { HelmReleaseMenu } from "../release-menu";
 
 interface ReleaseDetailsDrawerProps {
-  targetRelease: TargetHelmRelease;
+  model: ReleaseDetailsModel;
 }
 
 interface Dependencies {
-  computedModel: IAsyncComputed<ReleaseDetailsModel>;
   navigateToHelmReleases: () => void;
 }
 
 const NonInjectedReleaseDetailsDrawerToolbar = observer(({
-  computedModel,
+  model,
   navigateToHelmReleases,
 }: Dependencies & ReleaseDetailsDrawerProps) => {
-  const model = computedModel.value.get();
-
-  if (!model) {
-    return null;
-  }
-
   if (model.loadingError.get()) {
     return null;
   }
@@ -51,7 +41,6 @@ const NonInjectedReleaseDetailsDrawerToolbar = observer(({
 export const ReleaseDetailsDrawerToolbar = withInjectables<Dependencies, ReleaseDetailsDrawerProps>(NonInjectedReleaseDetailsDrawerToolbar, {
   getProps: (di, props) => ({
     ...props,
-    computedModel: di.inject(releaseDetailsModelInjectable, props.targetRelease),
     navigateToHelmReleases: di.inject(navigateToHelmReleasesInjectable),
   }),
 });

packages/core/src/renderer/components/+helm-releases/release-details/release-details-drawer.tsx

@@ -17,6 +17,9 @@ import activeThemeTypeInjectable from "../../../themes/active-type.injectable";
 import { ReleaseDetailsContent } from "./release-details-content";
 import navigateToHelmReleasesInjectable from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
 import { ReleaseDetailsDrawerToolbar } from "./release-details-drawer-toolbar";
+import type { ReleaseDetailsModel } from "./release-details-model/release-details-model.injectable";
+import releaseDetailsModelInjectable from "./release-details-model/release-details-model.injectable";
+import { Spinner } from "../../spinner";
 
 interface ReleaseDetailsDrawerProps {
   targetRelease: TargetHelmRelease;
@@ -25,12 +28,14 @@ interface ReleaseDetailsDrawerProps {
 interface Dependencies {
   activeThemeType: ActiveThemeType;
   closeDrawer: () => void;
+  model: ReleaseDetailsModel;
 }
 
 const NonInjectedReleaseDetailsDrawer = observer(({
   activeThemeType,
   closeDrawer,
   targetRelease,
+  model,
 }: Dependencies & ReleaseDetailsDrawerProps) => (
   <Drawer
     className={cssNames("ReleaseDetails", activeThemeType.get())}
@@ -39,20 +44,50 @@ const NonInjectedReleaseDetailsDrawer = observer(({
     title={targetRelease.name}
     onClose={closeDrawer}
     testIdForClose="close-helm-release-detail"
-    toolbar={<ReleaseDetailsDrawerToolbar targetRelease={targetRelease} />}
+    toolbar={<ReleaseDetailsDrawerToolbar model={model} />}
     data-testid={`helm-release-details-for-${targetRelease.namespace}/${targetRelease.name}`}
   >
-    <ReleaseDetailsContent targetRelease={targetRelease} />
+    <ReleaseDetailsContent model={model} />
   </Drawer>
 ));
 
-export const ReleaseDetailsDrawer = withInjectables<
+interface PlaceholderDependencies {
-  Dependencies,
+  activeThemeType: ActiveThemeType;
-  ReleaseDetailsDrawerProps
+  closeDrawer: () => void;
->(NonInjectedReleaseDetailsDrawer, {
+}
+
+const NonInjectedReleaseDetailsDrawerPlaceholder = observer(({
+  targetRelease,
+  activeThemeType,
+  closeDrawer,
+}: ReleaseDetailsDrawerProps & PlaceholderDependencies) => (
+  <Drawer
+    className={cssNames("ReleaseDetails", activeThemeType.get())}
+    usePortal={true}
+    open={true}
+    title={targetRelease.name}
+    onClose={closeDrawer}
+    testIdForClose="close-helm-release-detail"
+    data-testid={`helm-release-details-for-${targetRelease.namespace}/${targetRelease.name}`}
+  >
+    <Spinner center data-testid="helm-release-detail-content-spinner" />
+  </Drawer>
+));
+
+const ReleaseDetailsDrawerPlaceholder = withInjectables<PlaceholderDependencies, ReleaseDetailsDrawerProps>(NonInjectedReleaseDetailsDrawerPlaceholder, {
   getProps: (di, props) => ({
+    ...props,
     activeThemeType: di.inject(activeThemeTypeInjectable),
     closeDrawer: di.inject(navigateToHelmReleasesInjectable),
-    ...props,
+  }),
+});
+
+export const ReleaseDetailsDrawer = withInjectables<Dependencies, ReleaseDetailsDrawerProps>(NonInjectedReleaseDetailsDrawer, {
+  getPlaceholder: ReleaseDetailsDrawerPlaceholder,
+  getProps: async (di, props) => ({
+    ...props,
+    activeThemeType: di.inject(activeThemeTypeInjectable),
+    closeDrawer: di.inject(navigateToHelmReleasesInjectable),
+    model: await di.inject(releaseDetailsModelInjectable, props.targetRelease),
   }),
 });

packages/core/src/renderer/components/+helm-releases/release-details/release-details-model/release-details-model.injectable.tsx

@@ -31,15 +31,11 @@ import assert from "assert";
 import activeThemeInjectable from "../../../../themes/active.injectable";
 import type { ToHelmRelease } from "../../to-helm-release.injectable";
 import toHelmReleaseInjectable from "../../to-helm-release.injectable";
-import { asyncComputed } from "@ogre-tools/injectable-react";
-import targetHelmReleaseInjectable from "../target-helm-release.injectable";
 
 const releaseDetailsModelInjectable = getInjectable({
   id: "release-details-model",
 
-  instantiate: (di, targetRelease: TargetHelmRelease) => {
+  instantiate: async (di, targetRelease: TargetHelmRelease) => {
-    const detailsHelmRelease = di.inject(targetHelmReleaseInjectable);
-
     const model = new ReleaseDetailsModel({
       requestDetailedHelmRelease: di.inject(requestDetailedHelmReleaseInjectable),
       targetRelease,
@@ -54,27 +50,12 @@ const releaseDetailsModelInjectable = getInjectable({
       toHelmRelease: di.inject(toHelmReleaseInjectable),
     });
 
-    return asyncComputed<ReleaseDetailsModel>({
+    await model.load();
-      getValueFromObservedPromise: async () => {
-        const currentHelmRelease = detailsHelmRelease.get();
 
-        if (
+    return model;
-          currentHelmRelease
-          && currentHelmRelease.name === targetRelease.name
-          && currentHelmRelease.namespace === targetRelease.namespace
-        ) {
-          await model.load();
-        }
-
-        return model;
-      },
-      betweenUpdates: "show-latest-value",
-    });
   },
 
-  lifecycle: lifecycleEnum.keyedSingleton({
+  lifecycle: lifecycleEnum.transient,
-    getInstanceKey: (di, release: TargetHelmRelease) => `${release.namespace}/${release.name}`,
-  }),
 });
 
 export default releaseDetailsModelInjectable;