Fix installation of helm charts (#5841)

* Relax validator for installing charts

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

* Tweak spacing between words in confirmation dialog

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

* Add mocks for monaco editor and virtualized auto sizer to allow components to be rendered in unit tests

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

* Improve typing for a function

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

* Remove usage of shared global state from a component

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

* Provide a way to unit test usages of storages

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

* Add way to get current value from select in behavioural unit tests

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

* Rework installation of helm charts to get rid of the majority of bugs

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

* Update snapshots

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

* Remove technical test for being covered in behaviours

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

* Split behaviour to smaller pieces

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

* Add tests accidentally removed back

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

* Mark functions causing side effects

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

* Remove behaviour covered by other behaviours

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

* Tweak naming

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

* Remove unused dependency

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

src/renderer/components/dock/dock-tab.tsx

@@ -115,6 +115,7 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
               </Tooltip>
             </div>
           )}
+          data-testid={`dock-tab-for-${id}`}
         />
         {this.renderMenu(id)}
       </>

src/renderer/components/dock/dock-tabs.tsx

@@ -11,8 +11,8 @@ import { DockTab } from "./dock-tab";
 import type { DockTab as DockTabModel } from "./dock/store";
 import { TabKind } from "./dock/store";
 import { TerminalTab } from "./terminal/dock-tab";
-import { useResizeObserver } from "../../hooks";
 import { cssVar } from "../../utils";
+import { useResizeObserver } from "../../hooks";
 
 export interface DockTabsProps {
   tabs: DockTabModel[];

src/renderer/components/dock/dock.tsx

@@ -124,7 +124,10 @@ class NonInjectedDock extends React.Component<DockProps & Dependencies> {
     if (!isOpen || !selectedTab) return null;
 
     return (
-      <div className={`tab-content ${selectedTab.kind}`} style={{ flexBasis: height }}>
+      <div
+        className={`tab-content ${selectedTab.kind}`}
+        style={{ flexBasis: height }}
+        data-testid={`dock-tab-content-for-${selectedTab.id}`}>
         {this.renderTab(selectedTab)}
       </div>
     );

src/renderer/components/dock/editor-panel.module.scss

@@ -8,3 +8,7 @@
   flex: 1;
   height: 100%;
 }
+
+.hidden {
+  display: none;
+}

src/renderer/components/dock/editor-panel.tsx

@@ -22,6 +22,7 @@ export interface EditorPanelProps {
   autoFocus?: boolean; // default: true
   onChange: MonacoEditorProps["onChange"];
   onError?: MonacoEditorProps["onError"];
+  hidden?: boolean;
 }
 
 interface Dependencies {
@@ -36,6 +37,7 @@ const NonInjectedEditorPanel = observer(({
   autoFocus = true,
   className,
   onError,
+  hidden,
 }: Dependencies & EditorPanelProps) => {
   const editor = createRef<MonacoEditorRef>();
 
@@ -59,7 +61,7 @@ const NonInjectedEditorPanel = observer(({
       autoFocus={autoFocus}
       id={tabId}
       value={value}
-      className={cssNames(styles.EditorPanel, className)}
+      className={cssNames(styles.EditorPanel, className, { hidden })}
       onChange={onChange}
       onError={onError}
       ref={editor}

src/renderer/components/dock/info-panel.tsx

@@ -14,9 +14,12 @@ import { Button } from "../button";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
 import type { DockStore, TabId } from "./dock/store";
-import { Notifications } from "../notifications";
+import type { ShowNotification } from "../notifications";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import dockStoreInjectable from "./dock/store.injectable";
+import type { ShowCheckedErrorNotification } from "../notifications/show-checked-error.injectable";
+import showSuccessNotificationInjectable from "../notifications/show-success-notification.injectable";
+import showCheckedErrorNotificationInjectable from "../notifications/show-checked-error.injectable";
 
 export interface InfoPanelProps extends OptionalProps {
   tabId: TabId;
@@ -35,10 +38,15 @@ export interface OptionalProps {
   showInlineInfo?: boolean;
   showNotifications?: boolean;
   showStatusPanel?: boolean;
+  submitTestId?: string;
+  cancelTestId?: string;
+  submittingTestId?: string;
 }
 
 interface Dependencies {
   dockStore: DockStore;
+  showSuccessNotification: ShowNotification;
+  showCheckedErrorNotification: ShowCheckedErrorNotification;
 }
 
 @observer
@@ -82,11 +90,11 @@ class NonInjectedInfoPanel extends Component<InfoPanelProps & Dependencies> {
       const result = await this.props.submit?.();
 
       if (showNotifications && result) {
-        Notifications.ok(result);
+        this.props.showSuccessNotification(result);
       }
     } catch (error) {
       if (showNotifications) {
-        Notifications.checkedError(error, "Unknown error while submitting");
+        this.props.showCheckedErrorNotification(error, "Unknown error while submitting");
       }
     } finally {
       this.waiting = false;
@@ -128,7 +136,7 @@ class NonInjectedInfoPanel extends Component<InfoPanelProps & Dependencies> {
           <div className="flex gaps align-center">
             {waiting ? (
               <>
-                <Spinner /> 
+                <Spinner data-testid={this.props.submittingTestId} />
                 {" "}
                 {submittingMessage}
               </>
@@ -140,7 +148,8 @@ class NonInjectedInfoPanel extends Component<InfoPanelProps & Dependencies> {
             <Button
               plain
               label="Cancel"
-              onClick={close} 
+              onClick={close}
+              data-testid={this.props.cancelTestId}
             />
             <Button
               active
@@ -149,6 +158,7 @@ class NonInjectedInfoPanel extends Component<InfoPanelProps & Dependencies> {
               label={submitLabel}
               onClick={submit}
               disabled={isDisabled}
+              data-testid={this.props.submitTestId}
             />
             {showSubmitClose && (
               <Button
@@ -172,6 +182,8 @@ export const InfoPanel = withInjectables<Dependencies, InfoPanelProps>(
   {
     getProps: (di, props) => ({
       dockStore: di.inject(dockStoreInjectable),
+      showSuccessNotification: di.inject(showSuccessNotificationInjectable),
+      showCheckedErrorNotification: di.inject(showCheckedErrorNotificationInjectable),
       ...props,
     }),
   },

src/renderer/components/dock/install-chart/chart-data/call-for-helm-chart-values.injectable.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { getChartValues } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
+
+export type CallForHelmChartValues = (
+  repo: string,
+  name: string,
+  version: string
+) => Promise<string>;
+
+const callForHelmChartValuesInjectable = getInjectable({
+  id: "call-for-helm-chart-values",
+  instantiate: (): CallForHelmChartValues => getChartValues,
+  causesSideEffects: true,
+});
+
+export default callForHelmChartValuesInjectable;

src/renderer/components/dock/install-chart/create-install-chart-tab.injectable.ts

@@ -5,52 +5,46 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import installChartTabStoreInjectable from "./store.injectable";
 import type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
-import type {
-  DockTab,
-  DockTabCreate,
-  DockTabCreateSpecific } from "../dock/store";
+import type { DockTab, DockTabCreateSpecific } from "../dock/store";
 import { TabKind } from "../dock/store";
-import type { InstallChartTabStore } from "./store";
 import createDockTabInjectable from "../dock/create-dock-tab.injectable";
-
-interface Dependencies {
-  createDockTab: (rawTab: DockTabCreate, addNumber: boolean) => DockTab;
-  installChartStore: InstallChartTabStore;
-}
+import getRandomInstallChartTabIdInjectable from "./get-random-install-chart-tab-id.injectable";
 
 export type CreateInstallChartTab = (chart: HelmChart, tabParams?: DockTabCreateSpecific) => DockTab;
 
-const createInstallChartTab = ({ createDockTab, installChartStore }: Dependencies) => (chart: HelmChart, tabParams: DockTabCreateSpecific = {}) => {
-  const { name, repo, version } = chart;
-
-  const tab = createDockTab(
-    {
-      title: `Helm Install: ${repo}/${name}`,
-      ...tabParams,
-      kind: TabKind.INSTALL_CHART,
-    },
-    false,
-  );
-
-  installChartStore.setData(tab.id, {
-    name,
-    repo,
-    version,
-    namespace: "default",
-    releaseName: "",
-    description: "",
-  });
-
-  return tab;
-};
-
 const createInstallChartTabInjectable = getInjectable({
   id: "create-install-chart-tab",
 
-  instantiate: (di) => createInstallChartTab({
-    installChartStore: di.inject(installChartTabStoreInjectable),
-    createDockTab: di.inject(createDockTabInjectable),
-  }),
+  instantiate: (di) => {
+    const installChartStore = di.inject(installChartTabStoreInjectable);
+    const createDockTab = di.inject(createDockTabInjectable);
+    const getRandomId = di.inject(getRandomInstallChartTabIdInjectable);
+
+    return (chart: HelmChart, tabParams: DockTabCreateSpecific = {}) => {
+      const { name, repo, version } = chart;
+
+      const tab = createDockTab(
+        {
+          id: getRandomId(),
+          title: `Helm Install: ${repo}/${name}`,
+          ...tabParams,
+          kind: TabKind.INSTALL_CHART,
+        },
+        false,
+      );
+
+      installChartStore.setData(tab.id, {
+        name,
+        repo,
+        version,
+        namespace: "default",
+        releaseName: "",
+        description: "",
+      });
+
+      return tab;
+    };
+  },
 });
 
 export default createInstallChartTabInjectable;

src/renderer/components/dock/install-chart/get-random-install-chart-tab-id.injectable.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import getRandomIdInjectable from "../../../../common/utils/get-random-id.injectable";
+
+const getRandomInstallChartTabIdInjectable = getInjectable({
+  id: "get-random-install-chart-tab-id",
+  instantiate: (di) => di.inject(getRandomIdInjectable),
+});
+
+export default getRandomInstallChartTabIdInjectable;

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

@@ -0,0 +1,282 @@
+/**
+ * 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 installChartTabStoreInjectable from "./store.injectable";
+import { waitUntilDefined } from "../../../../common/utils";
+import type { CallForHelmChartValues } from "./chart-data/call-for-helm-chart-values.injectable";
+import callForHelmChartValuesInjectable from "./chart-data/call-for-helm-chart-values.injectable";
+import type { IChartInstallData, InstallChartTabStore } from "./store";
+import type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
+import React from "react";
+import {
+  action,
+  computed,
+  observable,
+  runInAction,
+} from "mobx";
+import assert from "assert";
+import type { CallForCreateHelmRelease } from "../../+helm-releases/create-release/call-for-create-helm-release.injectable";
+import callForCreateHelmReleaseInjectable from "../../+helm-releases/create-release/call-for-create-helm-release.injectable";
+import type { HelmReleaseUpdateDetails } from "../../../../common/k8s-api/endpoints/helm-releases.api";
+import dockStoreInjectable from "../dock/store.injectable";
+import type { NavigateToHelmReleases } from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
+import navigateToHelmReleasesInjectable from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
+import type { SingleValue } from "react-select";
+import type { CallForHelmChartVersions } from "../../+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
+import callForHelmChartVersionsInjectable from "../../+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
+
+const installChartModelInjectable = getInjectable({
+  id: "install-chart-model",
+
+  instantiate: async (di, tabId: string) => {
+    const store = di.inject(installChartTabStoreInjectable);
+    const callForHelmChartValues = di.inject(callForHelmChartValuesInjectable);
+    const callForHelmChartVersions = di.inject(callForHelmChartVersionsInjectable);
+    const callForCreateHelmRelease = di.inject(callForCreateHelmReleaseInjectable);
+    const dockStore = di.inject(dockStoreInjectable);
+    const navigateToHelmReleases = di.inject(navigateToHelmReleasesInjectable);
+    const closeTab = () => dockStore.closeTab(tabId);
+
+    const waitForChart = async () => {
+      await waitUntilDefined(() => store.getData(tabId));
+    };
+
+    const model = new InstallChartModel({
+      tabId,
+      waitForChart,
+      callForCreateHelmRelease,
+      closeTab,
+      navigateToHelmReleases,
+      callForHelmChartValues,
+      callForHelmChartVersions,
+      store,
+    });
+
+    await model.load();
+
+    return model;
+  },
+
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, tabId: string) => tabId,
+  }),
+});
+
+export default installChartModelInjectable;
+
+interface Dependencies {
+  tabId: string;
+  closeTab: () => void;
+  navigateToHelmReleases: NavigateToHelmReleases;
+  waitForChart: () => Promise<void>;
+  callForCreateHelmRelease: CallForCreateHelmRelease;
+  callForHelmChartValues: CallForHelmChartValues;
+  callForHelmChartVersions: CallForHelmChartVersions;
+  store: InstallChartTabStore;
+}
+
+export class InstallChartModel {
+  readonly namespace = {
+    value: computed(() => this.chart?.namespace || "default"),
+
+    onChange: action(
+      (option: SingleValue<{ label: string; value: string }>) => {
+        if (option) {
+          const namespace = option.value;
+
+          this.save({ namespace });
+        }
+      },
+    ),
+  };
+
+  readonly customName = {
+    value: computed(() => this.chart?.releaseName || ""),
+
+    onChange: action((customName: string) => {
+      this.save({ releaseName: customName });
+    }),
+  };
+
+  private readonly versions = observable.array<HelmChart>([]);
+  readonly installed = observable.box<HelmReleaseUpdateDetails | undefined>();
+
+  private save = (data: Partial<IChartInstallData>) => {
+    assert(this.chart);
+
+    const chart = { ...this.chart, ...data };
+
+    this.dependencies.store.setData(this.dependencies.tabId, chart);
+  };
+
+  readonly version = {
+    value: computed(() => this.chart?.version),
+
+    onChange: async (version: string | undefined) => {
+      assert(this.chart);
+
+      if (!version) {
+        return;
+      }
+
+      this.save({ version });
+
+      runInAction(() => {
+        this.configuration.isLoading.set(true);
+      });
+
+      const configuration = await this.dependencies.callForHelmChartValues(
+        this.chart.repo,
+        this.chart.name,
+        version,
+      );
+
+      runInAction(() => {
+        this.configuration.onChange(configuration);
+        this.configuration.isLoading.set(false);
+      });
+    },
+
+    options: computed(() =>
+      this.versions.map((chart) => ({
+        label: chart.version,
+        value: chart.version,
+      })),
+    ),
+  };
+
+  readonly configuration = {
+    value: computed(() => this.chart?.values || ""),
+    isLoading: observable.box(false),
+
+    onChange: action((configuration: string) => {
+      this.errorInConfiguration.value.set(undefined);
+
+      this.save({ values: configuration });
+    }),
+  };
+
+  readonly errorInConfiguration = {
+    value: observable.box<string | undefined>(),
+
+    onChange: action((error: unknown) => {
+      this.errorInConfiguration.value.set(error as string);
+    }),
+  };
+
+  readonly executionOutput = {
+    isShown: observable.box(false),
+
+    show: action(() => {
+      this.executionOutput.isShown.set(true);
+    }),
+
+    close: action(() => {
+      this.executionOutput.isShown.set(false);
+    }),
+  };
+
+  constructor(private readonly dependencies: Dependencies) {}
+
+  @computed
+  private get chart() {
+    const chart = this.dependencies.store.getData(this.dependencies.tabId);
+
+    assert(chart);
+
+    return chart;
+  }
+
+  load = async () => {
+    await this.dependencies.waitForChart();
+
+    const [defaultConfiguration, versions] = await Promise.all([
+      this.dependencies.callForHelmChartValues(
+        this.chart.repo,
+        this.chart.name,
+        this.chart.version,
+      ),
+
+      this.dependencies.callForHelmChartVersions(
+        this.chart.repo,
+        this.chart.name,
+      ),
+    ]);
+
+    runInAction(() => {
+      // TODO: Make "default" not hard-coded
+      const namespace = this.chart.namespace || "default";
+
+      this.versions.replace(versions);
+
+      this.save({
+        version: this.chart.version,
+        namespace,
+        values: this.chart.values || defaultConfiguration,
+        releaseName: this.chart.releaseName,
+      });
+    });
+  };
+
+  @computed
+  get isValid() {
+    return !this.configuration.isLoading.get();
+  }
+
+  get chartName() {
+    return `${this.repository}/${this.name}`;
+  }
+
+  private get name() {
+    assert(this.chart);
+
+    return this.chart.name;
+  }
+
+  private get repository() {
+    assert(this.chart);
+
+    return this.chart.repo;
+  }
+
+  install = async () => {
+    const installed = await this.dependencies.callForCreateHelmRelease({
+      name: this.customName.value.get() || undefined,
+      chart: this.name,
+      repo: this.repository,
+      namespace: this.namespace.value.get() || "",
+      version: this.version.value.get() || "",
+      values: this.configuration.value.get() || "",
+    });
+
+    runInAction(() => {
+      this.installed.set(installed);
+    });
+
+    return (
+      <p>
+        {"Chart Release "}
+        <b>{installed.release.name}</b>
+        {" successfully created."}
+      </p>
+    );
+  };
+
+  navigateToInstalledRelease = () => {
+    const installed = this.installed.get();
+
+    assert(installed);
+
+    const release = installed.release;
+
+    this.dependencies.navigateToHelmReleases({
+      name: release.name,
+      namespace: release.namespace,
+    });
+
+    this.dependencies.closeTab();
+  };
+}
+

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

@@ -3,13 +3,10 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { action, makeObservable } from "mobx";
-import type { TabId } from "../dock/store";
+import { makeObservable } from "mobx";
 import type { DockTabStoreDependencies } from "../dock-tab-store/dock-tab.store";
 import { DockTabStore } from "../dock-tab-store/dock-tab.store";
-import { getChartDetails, getChartValues } from "../../../../common/k8s-api/endpoints/helm-charts.api";
 import type { HelmReleaseUpdateDetails } from "../../../../common/k8s-api/endpoints/helm-releases.api";
-import { waitUntilDefined } from "../../../../common/utils/wait";
 
 export interface IChartInstallData {
   name: string;
@@ -40,42 +37,4 @@ export class InstallChartTabStore extends DockTabStore<IChartInstallData> {
   get details() {
     return this.dependencies.detailsStore;
   }
-
-  @action
-  async loadData(tabId: string) {
-    const promises = [];
-    const data = await waitUntilDefined(() => this.getData(tabId));
-
-    if (!this.getData(tabId)?.values) {
-      promises.push(this.loadValues(tabId));
-    }
-
-    if (!this.versions.getData(tabId)) {
-      promises.push(this.loadVersions(tabId, data));
-    }
-
-    await Promise.all(promises);
-  }
-
-  @action
-  private async loadVersions(tabId: TabId, { repo, name, version }: IChartInstallData) {
-    this.versions.clearData(tabId); // reset
-    const charts = await getChartDetails(repo, name, { version });
-    const versions = charts.versions.map(chartVersion => chartVersion.version);
-
-    this.versions.setData(tabId, versions);
-  }
-
-  @action
-  async loadValues(tabId: TabId, attempt = 0): Promise<void> {
-    const data = await waitUntilDefined(() => this.getData(tabId));
-    const { repo, name, version } = data;
-    const values = await getChartValues(repo, name, version);
-
-    if (values) {
-      this.setData(tabId, { ...data, values });
-    } else if (attempt < 4) {
-      return this.loadValues(tabId, attempt + 1);
-    }
-  }
 }

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

@@ -5,154 +5,44 @@
 
 import "./install-chart.scss";
 
-import React, { Component } from "react";
-import { action, makeObservable, observable } from "mobx";
+import React from "react";
 import { observer } from "mobx-react";
-import type { DockStore, DockTab } from "../dock/store";
+import type { DockTab } from "../dock/store";
 import { InfoPanel } from "../info-panel";
 import { Badge } from "../../badge";
 import { NamespaceSelect } from "../../+namespaces/namespace-select";
 import { prevDefault } from "../../../utils";
-import type { IChartInstallData, InstallChartTabStore } from "./store";
-import { Spinner } from "../../spinner";
 import { Icon } from "../../icon";
 import { Button } from "../../button";
 import { LogsDialog } from "../../dialog/logs-dialog";
-import type { SelectOption } from "../../select";
 import { Select } from "../../select";
 import { Input } from "../../input";
 import { EditorPanel } from "../editor-panel";
-import type { HelmReleaseCreatePayload, HelmReleaseUpdateDetails } from "../../../../common/k8s-api/endpoints/helm-releases.api";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import installChartTabStoreInjectable from "./store.injectable";
-import dockStoreInjectable from "../dock/store.injectable";
-import createReleaseInjectable from "../../+helm-releases/create-release/create-release.injectable";
-import { Notifications } from "../../notifications";
-import type { NavigateToHelmReleases } from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
-import navigateToHelmReleasesInjectable from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
-import assert from "assert";
-import type { SingleValue } from "react-select";
+import type { InstallChartModel } from "./install-chart-model.injectable";
+import installChartModelInjectable from "./install-chart-model.injectable";
+import { Spinner } from "../../spinner";
 
 export interface InstallCharProps {
   tab: DockTab;
 }
 
 interface Dependencies {
-  createRelease: (payload: HelmReleaseCreatePayload) => Promise<HelmReleaseUpdateDetails>;
-  installChartStore: InstallChartTabStore;
-  dockStore: DockStore;
-  navigateToHelmReleases: NavigateToHelmReleases;
+  model: InstallChartModel;
 }
 
-@observer
-class NonInjectedInstallChart extends Component<InstallCharProps & Dependencies> {
-  @observable error = "";
-  @observable showNotes = false;
+const NonInjectedInstallChart = observer(
+  ({ model: model, tab: { id: tabId }}: InstallCharProps & Dependencies) => {
+    const installed = model.installed.get();
 
-  constructor(props: InstallCharProps & Dependencies) {
-    super(props);
-    makeObservable(this);
-  }
-
-  componentDidMount(): void {
-    this.props.installChartStore.loadData(this.tabId)
-      .catch(err => Notifications.error(String(err)));
-  }
-
-  get chartData() {
-    return this.props.installChartStore.getData(this.tabId);
-  }
-
-  get tabId() {
-    return this.props.tab.id;
-  }
-
-  get versions() {
-    return this.props.installChartStore.versions.getData(this.tabId);
-  }
-
-  get releaseDetails() {
-    return this.props.installChartStore.details.getData(this.tabId);
-  }
-
-  viewRelease = ({ release }: HelmReleaseUpdateDetails) => {
-    this.props.navigateToHelmReleases({
-      name: release.name,
-      namespace: release.namespace,
-    });
-    this.props.dockStore.closeTab(this.tabId);
-  };
-
-  save(data: Partial<IChartInstallData>) {
-    assert(this.chartData, "Cannot update data before data exists");
-
-    this.props.installChartStore.setData(this.tabId, { ...this.chartData, ...data });
-  }
-
-  onVersionChange = (option: SingleValue<SelectOption<string>>) => {
-    if (option) {
-      this.save({ ...option, values: "" });
-      this.props.installChartStore.loadValues(this.tabId);
-    }
-  };
-
-  onChange = action((values: string) => {
-    this.error = "";
-    this.save({ values });
-  });
-
-  onError = action((error: Error | string) => {
-    this.error = error.toString();
-  });
-
-  onNamespaceChange = (option: SingleValue<SelectOption<string>>) => {
-    if (option) {
-      this.save({ namespace: option.value });
-    }
-  };
-
-  onReleaseNameChange = (name: string) => {
-    this.save({ releaseName: name });
-  };
-
-  install = async ({ repo, name, version, namespace, values = "", releaseName }: IChartInstallData) => {
-    const details = await this.props.createRelease({
-      name: releaseName || undefined,
-      chart: name,
-      repo,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      namespace: namespace!,
-      version,
-      values,
-    });
-
-    this.props.installChartStore.details.setData(this.tabId, details);
-
-    return (
-      <p>
-        {"Chart Release "}
-        <b>{details.release.name}</b>
-        {" successfully created."}
-      </p>
-    );
-  };
-
-  render() {
-    const { tabId, chartData, versions, install, releaseDetails } = this;
-
-    if (chartData?.values === undefined || !versions) {
-      return <Spinner center />;
-    }
-
-    if (releaseDetails) {
+    if (installed) {
       return (
         <div className="InstallChartDone flex column gaps align-center justify-center">
           <p>
             <Icon
               material="check"
               big
-              sticker
-            />
+              sticker />
           </p>
           <p>Installation complete!</p>
           <div className="flex gaps align-center">
@@ -160,30 +50,34 @@ class NonInjectedInstallChart extends Component<InstallCharProps & Dependencies>
               autoFocus
               primary
               label="View Helm Release"
-              onClick={prevDefault(() => this.viewRelease(releaseDetails))}
+              onClick={prevDefault(model.navigateToInstalledRelease)}
+              data-testid={`show-release-${installed.release.name}-for-${tabId}`}
             />
             <Button
               plain
               active
               label="Show Notes"
-              onClick={() => this.showNotes = true}
+              onClick={model.executionOutput.show}
+              data-testid={`show-execution-output-for-${installed.release.name}-in-${tabId}`}
             />
           </div>
           <LogsDialog
             title="Helm Chart Install"
-            isOpen={this.showNotes}
-            close={() => this.showNotes = false}
-            logs={releaseDetails.log}
+            isOpen={model.executionOutput.isShown.get()}
+            close={model.executionOutput.close}
+            logs={installed.log}
           />
         </div>
       );
     }
 
-    const { repo, name, version, namespace, releaseName } = chartData;
-    const versionOptions = versions.map(version => ({
-      value: version,
-      label: version,
-    }));
+    const {
+      configuration,
+      version,
+      namespace,
+      customName,
+      errorInConfiguration,
+    } = model;
 
     return (
       <div className="InstallChart flex column">
@@ -192,60 +86,77 @@ class NonInjectedInstallChart extends Component<InstallCharProps & Dependencies>
           controls={(
             <div className="install-controls flex gaps align-center">
               <span>Chart</span>
-              <Badge label={`${repo}/${name}`} title="Repo/Name" />
+              <Badge label={model.chartName} title="Repo/Name" />
               <span>Version</span>
               <Select
                 className="chart-version"
-                value={version}
-                options={versionOptions}
-                onChange={this.onVersionChange}
+                value={version.value.get()}
+                options={version.options.get()}
+                onChange={(changed) => version.onChange(changed?.value)}
                 menuPlacement="top"
                 themeName="outlined"
+                id={`install-chart-version-select-for-${tabId}`}
               />
               <span>Namespace</span>
               <NamespaceSelect
                 showIcons={false}
                 menuPlacement="top"
                 themeName="outlined"
-                value={namespace}
-                onChange={this.onNamespaceChange}
+                value={namespace.value.get()}
+                onChange={namespace.onChange}
+                id={`install-chart-namespace-select-for-${tabId}`}
               />
               <Input
                 placeholder="Name (optional)"
                 title="Release name"
                 maxLength={50}
-                value={releaseName}
-                onChange={this.onReleaseNameChange}
+                value={customName.value.get()}
+                onChange={customName.onChange}
+                data-testid={`install-chart-custom-name-input-for-${tabId}`}
               />
             </div>
           )}
-          error={this.error}
-          submit={() => install(chartData)}
-          disableSubmit={!chartData.namespace}
+          error={errorInConfiguration.value.get()}
+          submit={model.install}
+          disableSubmit={!model.isValid} // !namespace
           submitLabel="Install"
           submittingMessage="Installing..."
           showSubmitClose={false}
+          cancelTestId={`cancel-install-chart-from-tab-for-${tabId}`}
+          submitTestId={`install-chart-from-tab-for-${tabId}`}
+          submittingTestId={`installing-chart-from-tab-${tabId}`}
         />
+
+        {configuration.isLoading.get() && (
+          <Spinner center data-testid="install-chart-configuration-spinner" />
+        )}
+
         <EditorPanel
           tabId={tabId}
-          value={chartData.values}
-          onChange={this.onChange}
-          onError={this.onError}
+          value={configuration.value.get()}
+          onChange={configuration.onChange}
+          onError={errorInConfiguration.onChange}
+          hidden={configuration.isLoading.get()}
         />
+
       </div>
     );
-  }
-}
+  },
+);
 
 export const InstallChart = withInjectables<Dependencies, InstallCharProps>(
   NonInjectedInstallChart,
 
   {
-    getProps: (di, props) => ({
-      createRelease: di.inject(createReleaseInjectable),
-      installChartStore: di.inject(installChartTabStoreInjectable),
-      dockStore: di.inject(dockStoreInjectable),
-      navigateToHelmReleases: di.inject(navigateToHelmReleasesInjectable),
+    getPlaceholder: () => (
+      <Spinner
+        center
+        data-testid="install-chart-tab-spinner"
+      />
+    ),
+
+    getProps: async (di, props) => ({
+      model: await di.inject(installChartModelInjectable, props.tab.id),
       ...props,
     }),
   },