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>
2025-05-20 05:10:56 +00:00 · 2022-07-20 08:15:27 +03:00
1 parent c70788569f
commit f281df1693
@@ -1,423 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<HelmChartDetails /> before getChartDetails resolves renders 1`] = `
-<body>
-  <div>
-    <div
-      class="Notifications flex column align-flex-end"
-    />
-  </div>
-  <div
-    class="Animate slide-right Drawer HelmChartDetails right enter"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          Chart: a galaxy far far away/a name
-          <i
-            class="Icon material interactive focusable"
-            id="tooltip_target_1"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="content_copy"
-            >
-              content_copy
-            </span>
-            <div />
-          </i>
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          id="tooltip_target_2"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-          <div />
-        </i>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      >
-        <div
-          class="Spinner singleColor center"
-        />
-      </div>
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
-</body>
-`;
-
-exports[`<HelmChartDetails /> before getChartDetails resolves when getChartDetails resolves with one version renders 1`] = `
-<body>
-  <div>
-    <div
-      class="Notifications flex column align-flex-end"
-    />
-  </div>
-  <div
-    class="Animate slide-right Drawer HelmChartDetails right enter"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          Chart: a galaxy far far away/a name
-          <i
-            class="Icon material interactive focusable"
-            id="tooltip_target_3"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="content_copy"
-            >
-              content_copy
-            </span>
-            <div />
-          </i>
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          id="tooltip_target_4"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-          <div />
-        </i>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      >
-        <div
-          class="box grow"
-        >
-          <div
-            class="introduction flex align-flex-start"
-          >
-            <div
-              class="intro-logo"
-            >
-              <svg
-                viewBox="0 0 722.8 702"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="currentColor"
-                >
-                  <path
-                    d="m318 299.5c2.1 1.6 4.8 2.5 7.6 2.5 6.9 0 12.6-5.5 12.9-12.3l.3-.2 4.3-76.7c-5.2.6-10.4 1.5-15.6 2.7-28.5 6.5-53.2 20.5-72.6 39.5l62.9 44.6z"
-                  />
-                  <path
-                    d="m309.5 411.9c-1.4-5.9-6.6-9.9-12.4-10-.8 0-1.7.1-2.5.2l-.1-.2-75.5 12.8c11.7 32.2 33.4 58.5 60.8 76.1l29.2-70.7-.2-.3c1.1-2.4 1.4-5.2.7-7.9z"
-                  />
-                  <path
-                    d="m284.4 357.5c2.5-.7 4.9-2.2 6.7-4.4 4.3-5.4 3.6-13.2-1.6-17.8l.1-.3-57.4-51.4c-17 27.8-25.1 61.1-21.4 95.3l73.6-21.2z"
-                  />
-                  <path
-                    d="m340.2 380 21.2 10.2 21.1-10.1 5.3-22.9-14.6-18.2h-23.6l-14.6 18.2z"
-                  />
-                  <path
-                    d="m384.2 289.4c.1 2.6 1 5.2 2.8 7.5 4.3 5.4 12.1 6.4 17.7 2.4l.2.1 62.5-44.3c-23.6-23.1-54.4-38.2-87.6-42.2z"
-                  />
-                  <path
-                    d="m490.3 283.7-57.1 51.1v.2c-2 1.7-3.5 4.1-4.1 6.8-1.5 6.8 2.5 13.5 9.2 15.3l.1.3 74 21.3c1.6-16 .6-32.5-3.2-49-3.9-16.8-10.4-32.2-18.9-46z"
-                  />
-                  <path
-                    d="m372.8 439.6c-1.2-2.3-3.2-4.3-5.8-5.5-2-.9-4-1.4-6-1.3-4.5.2-8.7 2.6-10.9 6.8h-.1l-37.1 67.1c25.7 8.8 54.1 10.7 82.5 4.2 5.1-1.2 10-2.5 14.9-4.2l-37.3-67.1z"
-                  />
-                  <path
-                    d="m711.7 425-60.4-262.2c-3.2-13.7-12.5-25.3-25.3-31.4l-244.4-116.8c-7.1-3.4-14.8-4.9-22.7-4.5-6.2.3-12.3 1.9-17.9 4.5l-244.3 116.7c-12.8 6.1-22.1 17.7-25.3 31.4l-60.2 262.3c-2.8 12.2-.5 25 6.3 35.5.8 1.3 1.7 2.5 2.7 3.7l169.1 210.3c8.9 11 22.3 17.4 36.5 17.4l271.2-.1c14.2 0 27.7-6.4 36.5-17.4l169.1-210.3c8.9-10.9 12.2-25.4 9.1-39.1zm-93-3.2c-1.8 7.8-10.2 12.6-18.9 10.7-.1 0-.2 0-.2 0-.1 0-.2-.1-.3-.1-1.2-.3-2.7-.5-3.8-.8-5-1.3-8.6-3.3-13.1-5.1-9.7-3.5-17.7-6.4-25.5-7.5-4-.3-6 1.6-8.2 3-1.1-.2-4.4-.8-6.2-1.1-14 44-43.9 82.2-84.3 106.1.7 1.7 1.9 5.3 2.4 5.9-.9 2.5-2.3 4.8-1.1 8.6 2.8 7.4 7.4 14.6 13 23.2 2.7 4 5.4 7.1 7.8 11.7.6 1.1 1.3 2.8 1.9 3.9 3.8 8 1 17.3-6.2 20.8-7.3 3.5-16.3-.2-20.2-8.3-.6-1.1-1.3-2.7-1.8-3.8-2.1-4.7-2.8-8.8-4.2-13.4-3.3-9.7-6-17.8-10-24.6-2.2-3.3-5-3.7-7.5-4.5-.5-.8-2.2-4-3.1-5.6-8.1 3.1-16.4 5.6-25.1 7.6-37.9 8.6-75.9 5.1-109.9-7.9l-3.3 6c-2.5.7-4.8 1.3-6.3 3.1-5.3 6.4-7.5 16.6-11.3 26.3-1.5 4.6-2.1 8.7-4.2 13.4-.5 1.1-1.3 2.6-1.8 3.7-3.9 8.1-12.9 11.7-20.2 8.2-7.2-3.5-10-12.7-6.2-20.8.6-1.2 1.3-2.8 1.9-3.9 2.4-4.6 5.2-7.7 7.8-11.7 5.5-8.7 10.4-16.4 13.2-23.8.7-2.4-.3-5.8-1.3-8.3l2.7-6.4c-38.9-23.1-69.7-59.8-84.3-105.3l-6.4 1.1c-1.7-1-5.1-3.2-8.4-3-7.8 1.1-15.8 4-25.5 7.5-4.5 1.7-8.1 3.7-13.1 5-1.1.3-2.6.6-3.8.8-.1 0-.2.1-.3.1s-.2 0-.2 0c-8.7 1.9-17.1-2.9-18.9-10.7s3.8-15.7 12.4-17.8c.1 0 .2 0 .2-.1h.1c1.2-.3 2.8-.7 3.9-.9 5.1-1 9.2-.7 14-1.1 10.2-1.1 18.7-1.9 26.2-4.3 2.4-1 4.7-4.3 6.3-6.3l6.1-1.8c-6.9-47.5 4.8-94.2 29.8-131.9l-4.7-4.2c-.3-1.8-.7-6-2.9-8.4-5.8-5.4-13-9.9-21.8-15.3-4.2-2.4-8-4-12.1-7.1-.9-.7-2.1-1.7-3-2.4-.1-.1-.1-.1-.2-.2-7-5.6-8.6-15.2-3.6-21.6 2.8-3.6 7.2-5.3 11.7-5.2 3.5.1 7.1 1.4 10.2 3.8 1 .8 2.4 1.8 3.2 2.6 3.9 3.4 6.3 6.7 9.6 10.2 7.2 7.3 13.2 13.4 19.7 17.8 3.4 2 6.1 1.2 8.7.8.8.6 3.7 2.6 5.3 3.8 24.9-26.4 57.6-46 95.6-54.6 8.8-2 17.7-3.3 26.4-4.1l.3-6.2c1.9-1.9 4.1-4.6 4.8-7.6.6-7.9-.4-16.3-1.6-26.5-.7-4.8-1.8-8.7-2-13.9 0-1.1 0-2.5 0-3.8 0-.1 0-.3 0-.4 0-9 6.5-16.2 14.6-16.2s14.6 7.3 14.6 16.2c0 1.3.1 3 0 4.2-.2 5.2-1.3 9.1-2 13.9-1.2 10.2-2.3 18.7-1.7 26.5.6 3.9 2.9 5.5 4.8 7.3 0 1.1.2 4.6.3 6.5 46.5 4.1 89.7 25.4 121.4 58.7l5.6-4c1.9.1 6 .7 8.9-1 6.5-4.4 12.5-10.5 19.7-17.8 3.3-3.5 5.7-6.8 9.7-10.2.9-.8 2.3-1.8 3.2-2.6 7-5.6 16.8-5 21.8 1.3s3.4 16-3.6 21.6c-1 .8-2.3 1.9-3.2 2.6-4.2 3.1-8 4.7-12.2 7.1-8.7 5.4-16 9.9-21.8 15.3-2.7 2.9-2.5 5.7-2.8 8.3-.8.7-3.7 3.3-5.2 4.7 12.6 18.8 22.1 40.1 27.4 63.3 5.3 23.1 6.1 46.1 3.1 68.3l5.9 1.7c1.1 1.5 3.2 5.2 6.3 6.3 7.5 2.4 16 3.2 26.2 4.3 4.8.4 8.9.2 14 1.1 1.2.2 3 .7 4.2 1 8.9 2.4 14.4 10.4 12.6 18.2z"
-                  />
-                  <path
-                    d="m428 401.7c-1-.2-2-.3-3-.2-1.7.1-3.3.5-4.9 1.3-6.2 3-9 10.4-6.2 16.7l-.1.1 29.6 71.4c28.5-18.2 49.8-45.3 61-76.6l-76.2-12.9z"
-                  />
-                </g>
-              </svg>
-            </div>
-            <div
-              class="intro-contents box grow"
-            >
-              <div
-                class="description flex align-center justify-space-between"
-                data-testid="selected-chart-description"
-              >
-                
-                <button
-                  class="Button primary"
-                  type="button"
-                >
-                  Install
-                </button>
-              </div>
-              <div
-                class="DrawerItem version"
-              >
-                <span
-                  class="name"
-                >
-                  Version
-                </span>
-                <span
-                  class="value"
-                >
-                  <div
-                    class="Select theme-outlined css-b62m3t-container"
-                  >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-chart-version-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
-                    <div
-                      class="Select__control css-1s2u09g-control"
-                    >
-                      <div
-                        class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
-                      >
-                        <div
-                          class="Select__single-value css-qc6sy-singleValue"
-                        >
-                          1
-                        </div>
-                        <div
-                          class="Select__input-container css-6j8wv5-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="chart-version-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
-                      <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="DrawerItem"
-              >
-                <span
-                  class="name"
-                >
-                  Home
-                </span>
-                <span
-                  class="value"
-                >
-                  <a
-                    rel="noreferrer"
-                    target="_blank"
-                  />
-                </span>
-              </div>
-              <div
-                class="DrawerItem maintainers"
-              >
-                <span
-                  class="name"
-                >
-                  Maintainers
-                </span>
-                <span
-                  class="value"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="chart-description"
-            data-testid="helmchart-readme"
-          >
-            <div
-              class="MarkDownViewer"
-            >
-              <p>
-                I am a readme
-              </p>
-              
-
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
-</body>
-`;
-
-exports[`<HelmChartDetails /> before getChartDetails resolves with getChartDetails rejects renders 1`] = `
-<body>
-  <div>
-    <div
-      class="Notifications flex column align-flex-end"
-    >
-      <div
-        class="Animate opacity notification flex error enter"
-        style="--enter-duration: 100ms; --leave-duration: 100ms;"
-      >
-        <div
-          class="box"
-        >
-          <i
-            class="Icon material focusable"
-          >
-            <span
-              class="icon"
-              data-icon-name="info_outline"
-            >
-              info_outline
-            </span>
-          </i>
-        </div>
-        <div
-          class="message box grow"
-        >
-          Error: some error
-        </div>
-        <div
-          class="box"
-        >
-          <i
-            class="Icon close material interactive focusable"
-            data-testid="close-notification-for-notification_20"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="Animate slide-right Drawer HelmChartDetails right enter"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          Chart: a galaxy far far away/a name
-          <i
-            class="Icon material interactive focusable"
-            id="tooltip_target_18"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="content_copy"
-            >
-              content_copy
-            </span>
-            <div />
-          </i>
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          id="tooltip_target_19"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-          <div />
-        </i>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      >
-        <div
-          class="Spinner singleColor center"
-        />
-      </div>
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
-</body>
-`;
@@ -0,0 +1,38 @@
+/**
+ * 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 { asyncComputed } from "@ogre-tools/injectable-react";
+import callForHelmChartReadmeInjectable from "./readme/call-for-helm-chart-readme.injectable";
+import helmChartDetailsVersionSelectionInjectable from "./versions/helm-chart-details-version-selection.injectable";
+import type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
+
+const readmeOfSelectedHelmChartInjectable = getInjectable({
+  id: "readme-of-selected-helm-chart",
+
+  instantiate: (di, chart: HelmChart) => {
+    const selection = di.inject(helmChartDetailsVersionSelectionInjectable, chart);
+    const callForHelmChartReadme = di.inject(callForHelmChartReadmeInjectable);
+
+    return asyncComputed(async () => {
+      const chartVersion = selection.value.get();
+
+      if (!chartVersion) {
+        return "";
+      }
+
+      return await callForHelmChartReadme(
+        chartVersion.getRepository(),
+        chartVersion.getName(),
+        chartVersion.getVersion(),
+      );
+    }, "");
+  },
+
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, chart: HelmChart) => chart.getId(),
+  }),
+});
+
+export default readmeOfSelectedHelmChartInjectable;
@@ -0,0 +1,29 @@
+/**
+ * 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 { getChartDetails } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
+
+export type CallForHelmChartReadme = (
+  repo: string,
+  name: string,
+  version: string,
+) => Promise<string>;
+
+const callForHelmChartReadmeInjectable = getInjectable({
+  id: "call-for-helm-chart-readme",
+
+  instantiate:
+    (): CallForHelmChartReadme =>
+      async (repository: string, name: string, version: string) => {
+        // TODO: Dismantle wrong abstraction
+        const details = await getChartDetails(repository, name, { version });
+
+        return details.readme;
+      },
+
+  causesSideEffects: true,
+});
+
+export default callForHelmChartReadmeInjectable;
@@ -0,0 +1,28 @@
+/**
+ * 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 { asyncComputed } from "@ogre-tools/injectable-react";
+import callForHelmChartVersionsInjectable from "./versions/call-for-helm-chart-versions.injectable";
+import type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
+
+const versionsOfSelectedHelmChartInjectable = getInjectable({
+  id: "versions-of-selected-helm-chart",
+
+  instantiate: (di, chart: HelmChart) => {
+    const callForHelmChartVersions = di.inject(callForHelmChartVersionsInjectable);
+
+    return asyncComputed(
+      async () =>
+        await callForHelmChartVersions(chart.getRepository(), chart.getName()),
+      [],
+    );
+  },
+
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, chart: HelmChart) => chart.getId(),
+  }),
+});
+
+export default versionsOfSelectedHelmChartInjectable;
@@ -0,0 +1,28 @@
+/**
+ * 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 type { HelmChart } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
+import { getChartDetails } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
+
+export type CallForHelmChartVersions = (
+  repo: string,
+  name: string
+) => Promise<HelmChart[]>;
+
+const callForHelmChartVersionsInjectable = getInjectable({
+  id: "call-for-helm-chart-versions",
+
+  instantiate:
+    (): CallForHelmChartVersions => async (repository: string, name: string) => {
+    // TODO: Dismantle wrong abstraction
+      const details = await getChartDetails(repository, name);
+
+      return details.versions;
+    },
+
+  causesSideEffects: true,
+});
+
+export default callForHelmChartVersionsInjectable;
@@ -0,0 +1,59 @@
+/**
+ * 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 type { IComputedValue } from "mobx";
+import { computed, observable } from "mobx";
+import versionsOfSelectedHelmChartInjectable from "../versions-of-selected-helm-chart.injectable";
+import type { HelmChart } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
+import type { SingleValue } from "react-select";
+
+interface VersionSelectionOption {
+  label: string;
+  value: HelmChart;
+}
+
+export interface HelmChartDetailsVersionSelection {
+  value: IComputedValue<HelmChart | undefined>;
+  options: IComputedValue<VersionSelectionOption[]>;
+  onChange: (option: SingleValue<VersionSelectionOption>) => void;
+}
+
+const helmChartDetailsVersionSelectionInjectable = getInjectable({
+  id: "helm-chart-details-version-selection",
+
+  instantiate: (di, chart: HelmChart): HelmChartDetailsVersionSelection => {
+    const versionsOfSelectedHelmChart = di.inject(
+      versionsOfSelectedHelmChartInjectable,
+      chart,
+    );
+
+    const state = observable.box<HelmChart>();
+
+    return {
+      value: computed(
+        () => state.get() || versionsOfSelectedHelmChart.value.get()[0],
+      ),
+
+      options: computed(() =>
+        versionsOfSelectedHelmChart.value.get().map((chartVersion) => ({
+          label: chartVersion.version,
+          value: chartVersion,
+        })),
+      ),
+
+      onChange: (option) => {
+        if (option) {
+          state.set(option.value);
+        }
+      },
+    };
+  },
+
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, chart: HelmChart) => chart.getId(),
+  }),
+});
+
+export default helmChartDetailsVersionSelectionInjectable;
@@ -1,92 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type { AsyncFnMock } from "@async-fn/jest";
-import asyncFn from "@async-fn/jest";
-import type { DiContainer } from "@ogre-tools/injectable";
-import type { RenderResult } from "@testing-library/react";
-import React from "react";
-import directoryForLensLocalStorageInjectable from "../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
-import { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
-import { getDiForUnitTesting } from "../../getDiForUnitTesting";
-import { noop } from "../../utils";
-import type { CreateInstallChartTab } from "../dock/install-chart/create-install-chart-tab.injectable";
-import createInstallChartTabInjectable from "../dock/install-chart/create-install-chart-tab.injectable";
-import { Notifications } from "../notifications";
-import type { DiRender } from "../test-utils/renderFor";
-import { renderFor } from "../test-utils/renderFor";
-import type { GetChartDetails } from "./get-char-details.injectable";
-import getChartDetailsInjectable from "./get-char-details.injectable";
-import { HelmChartDetails } from "./helm-chart-details";
-
-describe("<HelmChartDetails />", () => {
-  let di: DiContainer;
-  let getChartDetails: AsyncFnMock<GetChartDetails>;
-  let chart: HelmChart;
-  let render: DiRender;
-  let result: RenderResult;
-  let createInstallChartTab: jest.MockedFunction<CreateInstallChartTab>;
-
-  beforeEach(() => {
-    di = getDiForUnitTesting({ doGeneralOverrides: true });
-    getChartDetails = asyncFn<GetChartDetails>();
-    createInstallChartTab = jest.fn();
-    chart = HelmChart.create({
-      apiVersion: "some-api-version",
-      created: "a long time ago",
-      name: "a name",
-      repo: "a galaxy far far away",
-      version: "1",
-    });
-
-    di.override(directoryForLensLocalStorageInjectable, () => "some-directory-for-lens-local-storage");
-    di.override(getChartDetailsInjectable, () => getChartDetails);
-    di.override(createInstallChartTabInjectable, () => createInstallChartTab);
-    render = renderFor(di);
-    result = render((
-      <>
-        <HelmChartDetails chart={chart} hideDetails={noop} />
-        <Notifications />
-      </>
-    ));
-  });
-
-  describe("before getChartDetails resolves", () => {
-    it("renders", () => {
-      expect(result.baseElement).toMatchSnapshot();
-    });
-
-    describe("when getChartDetails resolves with one version", () => {
-      beforeEach(async () => {
-        await getChartDetails.resolve({
-          readme: "I am a readme",
-          versions: [chart],
-        });
-      });
-
-      it("renders", () => {
-        expect(result.baseElement).toMatchSnapshot();
-      });
-
-      it("shows the readme", () => {
-        expect(result.queryByTestId("helmchart-readme")).not.toBeNull();
-      });
-
-      it("shows the selected chart", () => {
-        expect(result.queryByTestId("selected-chart-description")).not.toBeNull();
-      });
-    });
-
-    describe("with getChartDetails rejects", () => {
-      beforeEach(async () => {
-        await getChartDetails.reject(new Error("some error"));
-      });
-
-      it("renders", () => {
-        expect(result.baseElement).toMatchSnapshot();
-      });
-    });
-  });
-});
@@ -7,8 +7,7 @@ import "./helm-chart-details.scss";

 import React, { Component } from "react";
 import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
-import { computed, observable, reaction, runInAction } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
 import { autoBind, stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
@@ -17,19 +16,19 @@ import { Button } from "../button";
 import { Select } from "../select";
 import { Badge } from "../badge";
 import { Tooltip, withStyles } from "@material-ui/core";
+import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import createInstallChartTabInjectable from "../dock/install-chart/create-install-chart-tab.injectable";
-import type { ShowCheckedErrorNotification } from "../notifications/show-checked-error.injectable";
-import type { SingleValue } from "react-select";
-import AbortController from "abort-controller";
-import showCheckedErrorNotificationInjectable from "../notifications/show-checked-error.injectable";
-import type { GetChartDetails } from "./get-char-details.injectable";
-import getChartDetailsInjectable from "./get-char-details.injectable";
 import { HelmChartIcon } from "./icon";
+import readmeOfSelectHelmChartInjectable from "./details/readme-of-selected-helm-chart.injectable";
+import versionsOfSelectedHelmChartInjectable from "./details/versions-of-selected-helm-chart.injectable";
+import type { HelmChartDetailsVersionSelection } from "./details/versions/helm-chart-details-version-selection.injectable";
+import helmChartDetailsVersionSelectionInjectable from "./details/versions/helm-chart-details-version-selection.injectable";
+import assert from "assert";

 export interface HelmChartDetailsProps {
-  chart: HelmChart;
  hideDetails(): void;
+  chart: HelmChart;
 }

 const LargeTooltip = withStyles({
@@ -40,85 +39,34 @@ const LargeTooltip = withStyles({

 interface Dependencies {
  createInstallChartTab: (helmChart: HelmChart) => void;
-  showCheckedErrorNotification: ShowCheckedErrorNotification;
-  getChartDetails: GetChartDetails;
+  versions: IAsyncComputed<HelmChart[]>;
+  readme: IAsyncComputed<string>;
+  versionSelection: HelmChartDetailsVersionSelection;
 }

@observer
 class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Dependencies> {
-  readonly chartVersions = observable.array<HelmChart>();
-  readonly selectedChart = observable.box<HelmChart | undefined>();
-  readonly readme = observable.box<string | undefined>(undefined);
-  readonly chartVerionOptions = computed(() => (
-    this.chartVersions.map(chart => ({
-      value: chart,
-      label: chart.version,
-    }))
-  ));
-
-  private abortController = new AbortController();
-
  constructor(props: HelmChartDetailsProps & Dependencies) {
    super(props);
    autoBind(this);
  }

-  componentWillUnmount() {
-    this.abortController.abort();
+  get chart() {
+    return this.props.chart;
  }

-  componentDidMount() {
-    disposeOnUnmount(this, [
-      reaction(() => this.props.chart, async ({ name, repo, version }) => {
-        runInAction(() => {
-          this.selectedChart.set(undefined);
-          this.chartVersions.clear();
-          this.readme.set("");
-        });
+  install() {
+    const chart = this.props.versionSelection.value.get();

-        try {
-          const { readme, versions } = await this.props.getChartDetails(repo, name, { version });
+    assert(chart);

-          runInAction(() => {
-            this.readme.set(readme);
-            this.chartVersions.replace(versions);
-            this.selectedChart.set(versions[0]);
-          });
-        } catch (error) {
-          this.props.showCheckedErrorNotification(error, "Unknown error occured while getting chart details");
-        }
-      }, {
-        fireImmediately: true,
-      }),
-    ]);
-  }
-
-  async onVersionChange(option: SingleValue<{ value: HelmChart }>) {
-    const chart = option?.value ?? this.chartVersions[0];
-
-    runInAction(() => {
-      this.selectedChart.set(chart ?? undefined);
-      this.readme.set(undefined);
-    });
-
-    try {
-      this.abortController.abort();
-      this.abortController = new AbortController();
-      const { chart: { name, repo }} = this.props;
-      const { readme } = await this.props.getChartDetails(repo, name, { version: chart.version, reqInit: { signal: this.abortController.signal }});
-
-      this.readme.set(readme);
-    } catch (error) {
-      this.props.showCheckedErrorNotification(error, "Unknown error occured while getting chart details");
-    }
-  }
-
-  install(selectedChart: HelmChart) {
-    this.props.createInstallChartTab(selectedChart);
+    this.props.createInstallChartTab(chart);
    this.props.hideDetails();
  }

  renderIntroduction(selectedChart: HelmChart) {
+    const testId = selectedChart.getFullName("-");
+
    return (
      <div className="introduction flex align-flex-start">
        <HelmChartIcon
@@ -131,7 +79,8 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
            <Button
              primary
              label="Install"
-              onClick={() => this.install(selectedChart)}
+              onClick={this.install}
+              data-testid={`install-chart-for-${testId}`}
            />
          </div>
          <DrawerItem
@@ -140,10 +89,10 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
            onClick={stopPropagation}
          >
            <Select
-              id="chart-version-input"
+              id={`helm-chart-version-selector-${testId}`}
              themeName="outlined"
              menuPortalTarget={null}
-              options={this.chartVerionOptions.get()}
+              options={this.props.versionSelection.options.get()}
              formatOptionLabel={({ value: chart }) => (
                chart.deprecated
                  ? (
@@ -154,8 +103,8 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
                  : chart.version
              )}
              isOptionDisabled={({ value: chart }) => chart.deprecated}
-              value={selectedChart}
-              onChange={this.onVersionChange}
+              value={this.props.versionSelection.value.get()}
+              onChange={this.props.versionSelection.onChange}
            />
          </DrawerItem>
          <DrawerItem name="Home">
@@ -190,44 +139,42 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
  }

  renderReadme() {
-    const readme = this.readme.get();
-
-    if (readme === undefined) {
-      return <Spinner center />;
-    }
-
    return (
      <div className="chart-description" data-testid="helmchart-readme">
-        <MarkdownViewer markdown={readme} />
+        <MarkdownViewer markdown={this.props.readme.value.get()} />
      </div>
    );
  }

  renderContent() {
-    const selectedChart = this.selectedChart.get();
+    const readmeIsLoading = this.props.readme.pending.get();
+    const versionsAreLoading = this.props.versions.pending.get();

-    if (!selectedChart) {
-      return <Spinner center />;
+    if (!this.chart || versionsAreLoading) {
+      return <Spinner center data-testid="spinner-for-chart-details" />;
    }

    return (
      <div className="box grow">
-        {this.renderIntroduction(selectedChart)}
-        {this.renderReadme()}
+        {this.renderIntroduction(this.chart)}
+
+        {readmeIsLoading ? (
+          <Spinner center data-testid="spinner-for-chart-readme" />
+        ) : (
+          this.renderReadme()
+        )}
      </div>
    );
  }

  render() {
-    const { chart, hideDetails } = this.props;
-
    return (
      <Drawer
        className="HelmChartDetails"
        usePortal={true}
-        open={!!chart}
-        title={chart ? `Chart: ${chart.getFullName()}` : ""}
-        onClose={hideDetails}
+        open={!!this.chart}
+        title={this.chart ? `Chart: ${this.chart.getFullName()}` : ""}
+        onClose={this.props.hideDetails}
      >
        {this.renderContent()}
      </Drawer>
@@ -239,7 +186,8 @@ export const HelmChartDetails = withInjectables<Dependencies, HelmChartDetailsPr
  getProps: (di, props) => ({
    ...props,
    createInstallChartTab: di.inject(createInstallChartTabInjectable),
-    showCheckedErrorNotification: di.inject(showCheckedErrorNotificationInjectable),
-    getChartDetails: di.inject(getChartDetailsInjectable),
+    readme: di.inject(readmeOfSelectHelmChartInjectable, props.chart),
+    versions: di.inject(versionsOfSelectedHelmChartInjectable, props.chart),
+    versionSelection: di.inject(helmChartDetailsVersionSelectionInjectable, props.chart),
  }),
 });
@@ -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 { HelmChartStore } from "./helm-chart.store";
+
+const helmChartStoreInjectable = getInjectable({
+  id: "helm-chart-store",
+  instantiate: () => new HelmChartStore(),
+});
+
+export default helmChartStoreInjectable;
@@ -12,12 +12,15 @@ import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.ap
 import { HelmChartDetails } from "./helm-chart-details";
 import { ItemListLayout } from "../item-object-list/list-layout";
 import type { IComputedValue } from "mobx";
+import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import helmChartsRouteParametersInjectable from "./helm-charts-route-parameters.injectable";
 import type { NavigateToHelmCharts } from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
 import navigateToHelmChartsInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
 import { HelmChartIcon } from "./icon";
+import helmChartsInjectable from "./helm-charts/helm-charts.injectable";
+import selectedHelmChartInjectable from "./helm-charts/selected-helm-chart.injectable";

 enum columnId {
  name = "name",
@@ -34,27 +37,15 @@ interface Dependencies {
  };

  navigateToHelmCharts: NavigateToHelmCharts;
+
+  charts: IAsyncComputed<HelmChart[]>;
+  selectedChart: IComputedValue<HelmChart | undefined>;
 }

@observer
 class NonInjectedHelmCharts extends Component<Dependencies> {
-  componentDidMount() {
-    helmChartStore.loadAll();
-  }
-
-  get selectedChart() {
-    const chartName = this.props.routeParameters.chartName.get();
-    const repo = this.props.routeParameters.repo.get();
-
-    if (!chartName || !repo) {
-      return undefined;
-    }
-
-    return helmChartStore.getByName(chartName, repo);
-  }
-
  onDetails = (chart: HelmChart) => {
-    if (chart === this.selectedChart) {
+    if (chart === this.props.selectedChart.get()) {
      this.hideDetails();
    } else {
      this.showDetails(chart);
@@ -78,6 +69,8 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
  };

  render() {
+    const selectedChart = this.props.selectedChart.get();
+
    return (
      <SiblingsInTabLayout>
        <div data-testid="page-for-helm-charts" style={{ display: "none" }}/>
@@ -87,7 +80,7 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
          tableId="helm_charts"
          className="HelmCharts"
          store={helmChartStore}
-          getItems={() => helmChartStore.items}
+          getItems={() => this.props.charts.value.get()}
          isSelectable={false}
          sortingCallbacks={{
            [columnId.name]: chart => chart.getName(),
@@ -105,6 +98,7 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
              placeholder: "Search Helm Charts...",
            },
          })}
+          customizeTableRowProps={(item) => ({ testId: `helm-chart-row-for-${item.getFullName("-")}` })}
          renderTableHeader={[
            { className: "icon", showWithColumn: columnId.name },
            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
@@ -124,12 +118,12 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
            { title: chart.getRepository(), className: chart.getRepository().toLowerCase() },
            { className: "menu" },
          ]}
-          detailsItem={this.selectedChart}
+          detailsItem={selectedChart}
          onDetails={this.onDetails}
        />
-        {this.selectedChart && (
+        {selectedChart && (
          <HelmChartDetails
-            chart={this.selectedChart}
+            chart={selectedChart}
            hideDetails={this.hideDetails}
          />
        )}
@@ -145,6 +139,8 @@ export const HelmCharts = withInjectables<Dependencies>(
    getProps: (di) => ({
      routeParameters: di.inject(helmChartsRouteParametersInjectable),
      navigateToHelmCharts: di.inject(navigateToHelmChartsInjectable),
+      charts: di.inject(helmChartsInjectable),
+      selectedChart: di.inject(selectedHelmChartInjectable),
    }),
  },
 );
@@ -0,0 +1,17 @@
+/**
+ * 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 type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
+import { listCharts } from "../../../../common/k8s-api/endpoints/helm-charts.api";
+
+export type CallForHelmCharts = () => Promise<HelmChart[]>;
+
+const callForHelmChartsInjectable = getInjectable({
+  id: "call-for-helm-charts",
+  instantiate: (): CallForHelmCharts => async () => await listCharts(),
+  causesSideEffects: true,
+});
+
+export default callForHelmChartsInjectable;
@@ -0,0 +1,19 @@
+/**
+ * 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 { asyncComputed } from "@ogre-tools/injectable-react";
+import callForHelmChartsInjectable from "./call-for-helm-charts.injectable";
+
+const helmChartsInjectable = getInjectable({
+  id: "helm-charts",
+
+  instantiate: (di) => {
+    const callForHelmCharts = di.inject(callForHelmChartsInjectable);
+
+    return asyncComputed(async () => await callForHelmCharts(), []);
+  },
+});
+
+export default helmChartsInjectable;
@@ -0,0 +1,36 @@
+/**
+ * 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 { computed } from "mobx";
+import helmChartsRouteParametersInjectable from "../helm-charts-route-parameters.injectable";
+import helmChartsInjectable from "./helm-charts.injectable";
+
+const selectedHelmChartInjectable = getInjectable({
+  id: "selected-helm-chart",
+
+  instantiate: (di) => {
+    const { chartName, repo } = di.inject(helmChartsRouteParametersInjectable);
+    const helmCharts = di.inject(helmChartsInjectable);
+
+    return computed(() => {
+      const dereferencedChartName = chartName.get();
+      const deferencedRepository = repo.get();
+
+      if (!dereferencedChartName || !deferencedRepository) {
+        return undefined;
+      }
+
+      return helmCharts.value
+        .get()
+        .find(
+          (chart) =>
+            chart.getName() === dereferencedChartName &&
+            chart.getRepository() === deferencedRepository,
+        );
+    });
+  },
+});
+
+export default selectedHelmChartInjectable;