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
@@ -472,6 +472,7 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -1103,6 +1104,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -441,6 +441,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -983,6 +984,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -1547,6 +1549,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -1992,6 +1995,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -2414,6 +2418,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -2978,6 +2983,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -3520,6 +3526,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -441,6 +441,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -980,6 +981,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -1559,6 +1561,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -2058,6 +2061,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -2557,6 +2561,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -3015,6 +3020,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -3594,6 +3600,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -4133,6 +4140,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -411,6 +411,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -967,6 +968,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
            >
              <div
                class="Tab flex gaps align-center DockTab TerminalTab active"
+                data-testid="dock-tab-for-terminal"
                id="tab-terminal"
                role="tab"
                tabindex="0"
@@ -293,6 +293,7 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -807,6 +808,7 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -1321,6 +1323,7 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -432,6 +432,7 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -946,6 +947,7 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -1460,6 +1462,7 @@ exports[`disable sidebar items when cluster is not relevant given not yet known
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -348,6 +348,7 @@ exports[`disable kube object detail items when cluster is not relevant given ext
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -836,6 +837,7 @@ exports[`disable kube object detail items when cluster is not relevant given ext
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -1324,6 +1326,7 @@ exports[`disable kube object detail items when cluster is not relevant given not
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -298,6 +298,7 @@ exports[`disable kube object menu items when cluster is not relevant given exten
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -692,6 +693,7 @@ exports[`disable kube object menu items when cluster is not relevant given exten
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -1086,6 +1088,7 @@ exports[`disable kube object menu items when cluster is not relevant given not y
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -300,6 +300,7 @@ exports[`disable kube object statuses when cluster is not relevant given extensi
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -689,6 +690,7 @@ exports[`disable kube object statuses when cluster is not relevant given extensi
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -1078,6 +1080,7 @@ exports[`disable kube object statuses when cluster is not relevant given not yet
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -24,6 +24,7 @@ import { navigateToRouteInjectionToken } from "../../common/front-end-routing/na
 import sidebarStorageInjectable from "../../renderer/components/layout/sidebar-storage/sidebar-storage.injectable";
 import hostedClusterIdInjectable from "../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
 import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
+import storageSaveDelayInjectable from "../../renderer/utils/create-storage/storage-save-delay.injectable";

 describe("cluster - sidebar and tab navigation for core", () => {
  let applicationBuilder: ApplicationBuilder;
@@ -41,6 +42,8 @@ describe("cluster - sidebar and tab navigation for core", () => {
    applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
      rendererDi.override(hostedClusterIdInjectable, () => "some-hosted-cluster-id");

+      rendererDi.override(storageSaveDelayInjectable, () => 250);
+
      rendererDi.override(
        directoryForLensLocalStorageInjectable,
        () => "/some-directory-for-lens-local-storage",
@@ -21,6 +21,7 @@ import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-t
 import { getExtensionFakeFor } from "../../renderer/components/test-utils/get-extension-fake";
 import type { IObservableValue } from "mobx";
 import { runInAction, computed, observable } from "mobx";
+import storageSaveDelayInjectable from "../../renderer/utils/create-storage/storage-save-delay.injectable";

 // TODO: Make tooltips free of side effects by making it deterministic
 jest.mock("../../renderer/components/tooltip/withTooltip", () => ({
@@ -43,6 +44,8 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
    applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
      rendererDi.override(hostedClusterIdInjectable, () => "some-hosted-cluster-id");

+      rendererDi.override(storageSaveDelayInjectable, () => 250);
+
      rendererDi.override(
        directoryForLensLocalStorageInjectable,
        () => "/some-directory-for-lens-local-storage",
@@ -417,6 +417,7 @@ exports[`disable workloads overview details when cluster is not relevant given e
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -931,6 +932,7 @@ exports[`disable workloads overview details when cluster is not relevant given e
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -1445,6 +1447,7 @@ exports[`disable workloads overview details when cluster is not relevant given n
              >
                <div
                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  data-testid="dock-tab-for-terminal"
                  id="tab-terminal"
                  role="tab"
                  tabindex="0"
@@ -1,588 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`helm-charts - navigation to Helm charts when navigating to Helm charts renders 1`] = `
-<div>
-  <div
-    class="Notifications flex column align-flex-end"
-  />
-  <div
-    class="mainLayout"
-    style="--sidebar-width: 200px;"
-  >
-    <div
-      class="sidebar"
-    >
-      <div
-        class="flex flex-col"
-        data-testid="cluster-sidebar"
-      >
-        <div
-          class="SidebarCluster"
-        >
-          <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
-          >
-            ??
-          </div>
-          <div
-            class="loadingClusterName"
-          />
-        </div>
-        <div
-          class="sidebarNav sidebar-active-status"
-        >
-          <div
-            class="SidebarItem"
-            data-is-active-test="false"
-            data-testid="sidebar-item-workloads"
-          >
-            <a
-              class="nav-item flex gaps align-center expandable"
-              data-testid="sidebar-item-link-for-workloads"
-              href="/"
-            >
-              <i
-                class="Icon svg focusable"
-              >
-                <span
-                  class="icon"
-                />
-              </i>
-              <span
-                class="link-text box grow"
-              >
-                Workloads
-              </span>
-              <i
-                class="Icon expand-icon box right material focusable"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="keyboard_arrow_down"
-                >
-                  keyboard_arrow_down
-                </span>
-              </i>
-            </a>
-          </div>
-          <div
-            class="SidebarItem"
-            data-is-active-test="false"
-            data-testid="sidebar-item-config"
-          >
-            <a
-              class="nav-item flex gaps align-center"
-              data-testid="sidebar-item-link-for-config"
-              href="/"
-            >
-              <i
-                class="Icon material focusable"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="list"
-                >
-                  list
-                </span>
-              </i>
-              <span
-                class="link-text box grow"
-              >
-                Config
-              </span>
-            </a>
-          </div>
-          <div
-            class="SidebarItem"
-            data-is-active-test="false"
-            data-testid="sidebar-item-network"
-          >
-            <a
-              class="nav-item flex gaps align-center expandable"
-              data-testid="sidebar-item-link-for-network"
-              href="/"
-            >
-              <i
-                class="Icon material focusable"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="device_hub"
-                >
-                  device_hub
-                </span>
-              </i>
-              <span
-                class="link-text box grow"
-              >
-                Network
-              </span>
-              <i
-                class="Icon expand-icon box right material focusable"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="keyboard_arrow_down"
-                >
-                  keyboard_arrow_down
-                </span>
-              </i>
-            </a>
-          </div>
-          <div
-            class="SidebarItem"
-            data-is-active-test="false"
-            data-testid="sidebar-item-storage"
-          >
-            <a
-              class="nav-item flex gaps align-center"
-              data-testid="sidebar-item-link-for-storage"
-              href="/"
-            >
-              <i
-                class="Icon material focusable"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="storage"
-                >
-                  storage
-                </span>
-              </i>
-              <span
-                class="link-text box grow"
-              >
-                Storage
-              </span>
-            </a>
-          </div>
-          <div
-            class="SidebarItem"
-            data-is-active-test="true"
-            data-testid="sidebar-item-helm"
-          >
-            <a
-              aria-current="page"
-              class="nav-item flex gaps align-center expandable active"
-              data-testid="sidebar-item-link-for-helm"
-              href="/"
-            >
-              <i
-                class="Icon svg focusable"
-              >
-                <span
-                  class="icon"
-                />
-              </i>
-              <span
-                class="link-text box grow"
-              >
-                Helm
-              </span>
-              <i
-                class="Icon expand-icon box right material focusable"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="keyboard_arrow_down"
-                >
-                  keyboard_arrow_down
-                </span>
-              </i>
-            </a>
-          </div>
-          <div
-            class="SidebarItem"
-            data-is-active-test="false"
-            data-testid="sidebar-item-user-management"
-          >
-            <a
-              class="nav-item flex gaps align-center"
-              data-testid="sidebar-item-link-for-user-management"
-              href="/"
-            >
-              <i
-                class="Icon material focusable"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="security"
-                >
-                  security
-                </span>
-              </i>
-              <span
-                class="link-text box grow"
-              >
-                Access Control
-              </span>
-            </a>
-          </div>
-          <div
-            class="SidebarItem"
-            data-is-active-test="false"
-            data-testid="sidebar-item-custom-resources"
-          >
-            <a
-              class="nav-item flex gaps align-center expandable"
-              data-testid="sidebar-item-link-for-custom-resources"
-              href="/"
-            >
-              <i
-                class="Icon material focusable"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="extension"
-                >
-                  extension
-                </span>
-              </i>
-              <span
-                class="link-text box grow"
-              >
-                Custom Resources
-              </span>
-              <i
-                class="Icon expand-icon box right material focusable"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="keyboard_arrow_down"
-                >
-                  keyboard_arrow_down
-                </span>
-              </i>
-            </a>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ResizingAnchor horizontal trailing"
-      />
-    </div>
-    <div
-      class="contents"
-    >
-      <div
-        class="TabLayout"
-        data-testid="tab-layout"
-      >
-        <div
-          class="Tabs center scrollable"
-        >
-          <div
-            class="Tab flex gaps align-center active"
-            data-is-active-test="true"
-            data-testid="tab-link-for-charts"
-            role="tab"
-            tabindex="0"
-          >
-            <div
-              class="label"
-            >
-              Charts
-            </div>
-          </div>
-          <div
-            class="Tab flex gaps align-center"
-            data-is-active-test="false"
-            data-testid="tab-link-for-releases"
-            role="tab"
-            tabindex="0"
-          >
-            <div
-              class="label"
-            >
-              Releases
-            </div>
-          </div>
-        </div>
-        <main>
-          <div
-            data-testid="page-for-helm-charts"
-            style="display: none;"
-          />
-          <div
-            class="ItemListLayout flex column HelmCharts"
-          >
-            <div
-              class="header flex gaps align-center"
-            >
-              <div
-                class="Input SearchInput focused"
-              >
-                <label
-                  class="input-area flex gaps align-center"
-                  id=""
-                >
-                  <input
-                    class="input box grow"
-                    placeholder="Search Helm Charts..."
-                    spellcheck="false"
-                    value=""
-                  />
-                  <i
-                    class="Icon material focusable small"
-                  >
-                    <span
-                      class="icon"
-                      data-icon-name="search"
-                    >
-                      search
-                    </span>
-                  </i>
-                </label>
-                <div
-                  class="input-info flex gaps"
-                />
-              </div>
-            </div>
-            <div
-              class="items box grow flex column"
-            >
-              <div
-                class="Table flex column HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
-              >
-                <div
-                  class="TableHead sticky nowrap topLine"
-                >
-                  <div
-                    class="TableCell icon nowrap"
-                  >
-                    <div
-                      class="content"
-                    />
-                  </div>
-                  <div
-                    class="TableCell name nowrap sorting"
-                    id="name"
-                  >
-                    <div
-                      class="content"
-                    >
-                      Name
-                    </div>
-                    <i
-                      class="Icon sortIcon material focusable"
-                    >
-                      <span
-                        class="icon"
-                        data-icon-name="arrow_drop_down"
-                      >
-                        arrow_drop_down
-                      </span>
-                    </i>
-                  </div>
-                  <div
-                    class="TableCell description nowrap"
-                    id="description"
-                  >
-                    <div
-                      class="content"
-                    >
-                      Description
-                    </div>
-                  </div>
-                  <div
-                    class="TableCell version nowrap"
-                    id="version"
-                  >
-                    <div
-                      class="content"
-                    >
-                      Version
-                    </div>
-                  </div>
-                  <div
-                    class="TableCell app-version nowrap"
-                    id="app-version"
-                  >
-                    <div
-                      class="content"
-                    >
-                      App Version
-                    </div>
-                  </div>
-                  <div
-                    class="TableCell repository nowrap sorting"
-                    id="repo"
-                  >
-                    <div
-                      class="content"
-                    >
-                      Repository
-                    </div>
-                    <i
-                      class="Icon sortIcon material focusable"
-                    >
-                      <span
-                        class="icon"
-                        data-icon-name="arrow_drop_down"
-                      >
-                        arrow_drop_down
-                      </span>
-                    </i>
-                  </div>
-                  <div
-                    class="TableCell menu nowrap"
-                  >
-                    <div
-                      class="content"
-                    >
-                      <i
-                        class="Icon material interactive focusable"
-                        id="menu-actions-for-item-object-list-content"
-                        tabindex="0"
-                      >
-                        <span
-                          class="icon"
-                          data-icon-name="more_vert"
-                        >
-                          more_vert
-                        </span>
-                      </i>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="NoItems flex box grow"
-                >
-                  <div
-                    class="box center"
-                  >
-                    Item list is empty
-                  </div>
-                </div>
-              </div>
-              <div
-                class="AddRemoveButtons flex gaps"
-              />
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-    <div
-      class="footer"
-    >
-      <div
-        class="Dock"
-        tabindex="-1"
-      >
-        <div
-          class="ResizingAnchor vertical leading"
-        />
-        <div
-          class="tabs-container flex align-center"
-        >
-          <div
-            class="dockTabs"
-            role="tablist"
-          >
-            <div
-              class="Tabs tabs"
-            >
-              <div
-                class="Tab flex gaps align-center DockTab TerminalTab active"
-                id="tab-terminal"
-                role="tab"
-                tabindex="0"
-              >
-                <i
-                  class="Icon material focusable"
-                >
-                  <span
-                    class="icon"
-                    data-icon-name="terminal"
-                  >
-                    terminal
-                  </span>
-                </i>
-                <div
-                  class="label"
-                >
-                  <div
-                    class="flex align-center"
-                  >
-                    <span
-                      class="title"
-                    >
-                      Terminal
-                    </span>
-                    <div
-                      class="close"
-                    >
-                      <i
-                        class="Icon material interactive focusable small"
-                        id="tooltip_target_13"
-                        tabindex="0"
-                      >
-                        <span
-                          class="icon"
-                          data-icon-name="close"
-                        >
-                          close
-                        </span>
-                        <div />
-                      </i>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="toolbar flex gaps align-center box grow"
-          >
-            <div
-              class="dock-menu box grow"
-            >
-              <i
-                class="Icon new-dock-tab material interactive focusable"
-                id="menu-actions-for-dock"
-                tabindex="0"
-              >
-                <span
-                  class="icon"
-                  data-icon-name="add"
-                >
-                  add
-                </span>
-                <div />
-              </i>
-            </div>
-            <i
-              class="Icon material interactive focusable"
-              id="tooltip_target_15"
-              tabindex="0"
-            >
-              <span
-                class="icon"
-                data-icon-name="fullscreen"
-              >
-                fullscreen
-              </span>
-              <div />
-            </i>
-            <i
-              class="Icon material interactive focusable"
-              id="tooltip_target_16"
-              tabindex="0"
-            >
-              <span
-                class="icon"
-                data-icon-name="keyboard_arrow_up"
-              >
-                keyboard_arrow_up
-              </span>
-              <div />
-            </i>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
@@ -0,0 +1,260 @@
+/**
+ * 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 { RenderResult } from "@testing-library/react";
+import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
+import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
+import { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
+import getRandomInstallChartTabIdInjectable from "../../../renderer/components/dock/install-chart/get-random-install-chart-tab-id.injectable";
+import type { CallForHelmChartValues } from "../../../renderer/components/dock/install-chart/chart-data/call-for-helm-chart-values.injectable";
+import callForHelmChartValuesInjectable from "../../../renderer/components/dock/install-chart/chart-data/call-for-helm-chart-values.injectable";
+import namespaceStoreInjectable from "../../../renderer/components/+namespaces/store.injectable";
+import type { NamespaceStore } from "../../../renderer/components/+namespaces/store";
+import type { CallForHelmChartVersions } from "../../../renderer/components/+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
+import callForHelmChartVersionsInjectable from "../../../renderer/components/+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
+import { overrideFsWithFakes } from "../../../test-utils/override-fs-with-fakes";
+import writeJsonFileInjectable from "../../../common/fs/write-json-file.injectable";
+import directoryForLensLocalStorageInjectable from "../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
+import hostedClusterIdInjectable from "../../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
+import { TabKind } from "../../../renderer/components/dock/dock/store";
+import { controlWhenStoragesAreReady } from "../../../renderer/utils/create-storage/storages-are-ready";
+import type { DiContainer } from "@ogre-tools/injectable";
+import callForCreateHelmReleaseInjectable from "../../../renderer/components/+helm-releases/create-release/call-for-create-helm-release.injectable";
+
+// TODO: Make tooltips free of side effects by making it deterministic
+jest.mock("../../../renderer/components/tooltip/withTooltip", () => ({
+  withTooltip: (target: any) => target,
+}));
+
+describe("installing helm chart from previously opened tab", () => {
+  let builder: ApplicationBuilder;
+  let rendererDi: DiContainer;
+  let callForHelmChartVersionsMock: AsyncFnMock<CallForHelmChartVersions>;
+  let callForHelmChartValuesMock: AsyncFnMock<CallForHelmChartValues>;
+  let storagesAreReady: () => Promise<void>;
+
+  beforeEach(() => {
+    builder = getApplicationBuilder();
+
+    rendererDi = builder.dis.rendererDi;
+
+    overrideFsWithFakes(rendererDi);
+
+    callForHelmChartVersionsMock = asyncFn();
+    callForHelmChartValuesMock = asyncFn();
+
+    builder.beforeApplicationStart(({ rendererDi }) => {
+      rendererDi.override(
+        directoryForLensLocalStorageInjectable,
+        () => "/some-directory-for-lens-local-storage",
+      );
+
+      rendererDi.override(hostedClusterIdInjectable, () => "some-cluster-id");
+
+      storagesAreReady = controlWhenStoragesAreReady(rendererDi);
+
+      rendererDi.override(
+        callForHelmChartVersionsInjectable,
+        () => callForHelmChartVersionsMock,
+      );
+
+      rendererDi.override(
+        callForHelmChartValuesInjectable,
+        () => callForHelmChartValuesMock,
+      );
+
+      rendererDi.override(
+        callForHelmChartValuesInjectable,
+        () => callForHelmChartValuesMock,
+      );
+
+      rendererDi.override(
+        callForCreateHelmReleaseInjectable,
+        () => jest.fn(),
+      );
+
+      // TODO: Replace store mocking with mock for the actual side-effect (where the namespaces are coming from)
+      rendererDi.override(
+        namespaceStoreInjectable,
+        () =>
+          ({
+            contextNamespaces: [],
+            items: [
+              { getName: () => "default" },
+              { getName: () => "some-other-namespace" },
+            ],
+            selectNamespaces: () => {},
+          } as unknown as NamespaceStore),
+      );
+
+      rendererDi.override(getRandomInstallChartTabIdInjectable, () =>
+        jest
+          .fn(() => "some-irrelevant-tab-id")
+          .mockReturnValueOnce("some-first-tab-id"),
+      );
+    });
+
+    builder.setEnvironmentToClusterFrame();
+  });
+
+  describe("given tab for installing chart was previously opened, when application is started", () => {
+    let rendered: RenderResult;
+
+    beforeEach(async () => {
+      const writeJsonFile = rendererDi.inject(writeJsonFileInjectable);
+
+      writeJsonFile(
+        "/some-directory-for-lens-local-storage/some-cluster-id.json",
+        {
+          dock: {
+            height: 300,
+            tabs: [
+              {
+                id: "some-first-tab-id",
+                kind: TabKind.INSTALL_CHART,
+                title: "Helm Install: some-repository/some-name",
+                pinned: false,
+              },
+            ],
+
+            isOpen: true,
+          },
+
+          install_charts: {
+            "some-first-tab-id": {
+              name: "some-name",
+              repo: "some-repository",
+              version: "some-other-version",
+              values: "some-stored-configuration",
+              releaseName: "some-stored-custom-name",
+              namespace: "some-other-namespace",
+            },
+          },
+        },
+      );
+
+      rendered = await builder.render();
+
+      await storagesAreReady();
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("still has the dock tab for installing chart", () => {
+      expect(
+        rendered.getByTestId("dock-tab-for-some-first-tab-id"),
+      ).toBeInTheDocument();
+    });
+
+    it("shows dock tab for installing the chart", () => {
+      expect(
+        rendered.getByTestId("dock-tab-content-for-some-first-tab-id"),
+      ).toBeInTheDocument();
+    });
+
+    it("shows spinner in dock tab", () => {
+      expect(
+        rendered.getByTestId("install-chart-tab-spinner"),
+      ).toBeInTheDocument();
+    });
+
+    it("calls for default configuration of the chart", () => {
+      expect(callForHelmChartValuesMock).toHaveBeenCalledWith(
+        "some-repository",
+        "some-name",
+        "some-other-version",
+      );
+    });
+
+    it("calls for available versions", () => {
+      expect(callForHelmChartVersionsMock).toHaveBeenCalledWith(
+        "some-repository",
+        "some-name",
+      );
+    });
+
+    describe("when configuration and version resolves", () => {
+      beforeEach(async () => {
+        await callForHelmChartValuesMock.resolve(
+          "some-default-configuration",
+        );
+
+        await callForHelmChartVersionsMock.resolve([
+          HelmChart.create({
+            apiVersion: "some-api-version",
+            name: "some-name",
+            version: "some-version",
+            repo: "some-repository",
+            created: "2015-10-21T07:28:00Z",
+            description: "some-description",
+            keywords: [],
+            sources: [],
+            urls: [],
+            annotations: {},
+            dependencies: [],
+            maintainers: [],
+            deprecated: false,
+          }),
+
+          HelmChart.create({
+            apiVersion: "some-api-version",
+            name: "some-name",
+            version: "some-other-version",
+            repo: "some-repository",
+            created: "2015-10-21T07:28:00Z",
+            description: "some-description",
+            keywords: [],
+            sources: [],
+            urls: [],
+            annotations: {},
+            dependencies: [],
+            maintainers: [],
+            deprecated: false,
+          }),
+        ]);
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("has the stored configuration", () => {
+        const input = rendered.getByTestId(
+          "monaco-editor-for-some-first-tab-id",
+        );
+
+        expect(input).toHaveValue("some-stored-configuration");
+      });
+
+      it("has the stored custom name", () => {
+        const input = rendered.getByTestId(
+          "install-chart-custom-name-input-for-some-first-tab-id",
+        );
+
+        expect(input).toHaveValue("some-stored-custom-name");
+      });
+
+      it("has the stored version", () => {
+        const actual = builder.select.getValue(
+          "install-chart-version-select-for-some-first-tab-id",
+        );
+
+        expect(actual).toBe("some-other-version");
+
+      });
+
+      it("has the stored namespace", () => {
+        const actual = builder.select.getValue(
+          "install-chart-namespace-select-for-some-first-tab-id",
+        );
+
+        expect(actual).toBe("some-other-namespace");
+      });
+    });
+  });
+});
@@ -0,0 +1,361 @@
+/**
+ * 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 { RenderResult } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
+import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
+import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
+import type { CallForHelmCharts } from "../../../renderer/components/+helm-charts/helm-charts/call-for-helm-charts.injectable";
+import callForHelmChartsInjectable from "../../../renderer/components/+helm-charts/helm-charts/call-for-helm-charts.injectable";
+import { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
+import getRandomInstallChartTabIdInjectable from "../../../renderer/components/dock/install-chart/get-random-install-chart-tab-id.injectable";
+import callForHelmChartValuesInjectable from "../../../renderer/components/dock/install-chart/chart-data/call-for-helm-chart-values.injectable";
+import callForCreateHelmReleaseInjectable from "../../../renderer/components/+helm-releases/create-release/call-for-create-helm-release.injectable";
+import type { CallForHelmChartReadme } from "../../../renderer/components/+helm-charts/details/readme/call-for-helm-chart-readme.injectable";
+import callForHelmChartReadmeInjectable from "../../../renderer/components/+helm-charts/details/readme/call-for-helm-chart-readme.injectable";
+import type { CallForHelmChartVersions } from "../../../renderer/components/+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
+import callForHelmChartVersionsInjectable from "../../../renderer/components/+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
+import { flushPromises } from "../../../common/test-utils/flush-promises";
+import { overrideFsWithFakes } from "../../../test-utils/override-fs-with-fakes";
+import directoryForLensLocalStorageInjectable from "../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
+import hostedClusterIdInjectable from "../../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
+import dockStoreInjectable from "../../../renderer/components/dock/dock/store.injectable";
+import type { DiContainer } from "@ogre-tools/injectable";
+
+// TODO: Make tooltips free of side effects by making it deterministic
+jest.mock("../../../renderer/components/tooltip/withTooltip", () => ({
+  withTooltip: (target: any) => target,
+}));
+
+describe("opening dock tab for installing helm chart", () => {
+  let builder: ApplicationBuilder;
+  let rendererDi: DiContainer;
+  let callForHelmChartsMock: AsyncFnMock<CallForHelmCharts>;
+  let callForHelmChartVersionsMock: AsyncFnMock<CallForHelmChartVersions>;
+  let callForHelmChartReadmeMock: AsyncFnMock<CallForHelmChartReadme>;
+  let callForHelmChartValuesMock: jest.Mock;
+
+  beforeEach(() => {
+    builder = getApplicationBuilder();
+
+    rendererDi = builder.dis.rendererDi;
+
+    overrideFsWithFakes(rendererDi);
+
+    callForHelmChartsMock = asyncFn();
+    callForHelmChartVersionsMock = asyncFn();
+    callForHelmChartReadmeMock = asyncFn();
+    callForHelmChartValuesMock = jest.fn();
+
+    builder.beforeApplicationStart(({ rendererDi }) => {
+      rendererDi.override(
+        directoryForLensLocalStorageInjectable,
+        () => "/some-directory-for-lens-local-storage",
+      );
+
+      rendererDi.override(hostedClusterIdInjectable, () => "some-cluster-id");
+
+      rendererDi.override(
+        callForHelmChartsInjectable,
+        () => callForHelmChartsMock,
+      );
+
+      rendererDi.override(
+        callForHelmChartVersionsInjectable,
+        () => callForHelmChartVersionsMock,
+      );
+
+      rendererDi.override(
+        callForHelmChartReadmeInjectable,
+        () => callForHelmChartReadmeMock,
+      );
+
+      rendererDi.override(
+        callForHelmChartValuesInjectable,
+        () => callForHelmChartValuesMock,
+      );
+
+      rendererDi.override(
+        callForCreateHelmReleaseInjectable,
+        () => jest.fn(),
+      );
+
+      rendererDi.override(getRandomInstallChartTabIdInjectable, () =>
+        jest
+          .fn(() => "some-irrelevant-tab-id")
+          .mockReturnValueOnce("some-tab-id"),
+      );
+    });
+
+    builder.setEnvironmentToClusterFrame();
+  });
+
+  describe("given application is started, when navigating to helm charts", () => {
+    let rendered: RenderResult;
+
+    beforeEach(async () => {
+      rendered = await builder.render();
+
+      builder.helmCharts.navigate();
+
+      const dockStore = rendererDi.inject(dockStoreInjectable);
+
+      // TODO: Make TerminalWindow unit testable to allow realistic behaviour
+      dockStore.closeTab("terminal");
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("calls for charts", () => {
+      expect(callForHelmChartsMock).toHaveBeenCalled();
+    });
+
+    describe("when charts resolve", () => {
+      beforeEach(async () => {
+        await callForHelmChartsMock.resolve([
+          HelmChart.create({
+            apiVersion: "some-api-version",
+            name: "some-name",
+            version: "some-version",
+            repo: "some-repository",
+            created: "2015-10-21T07:28:00Z",
+            description: "some-description",
+            keywords: [],
+            sources: [],
+            urls: [],
+            annotations: {},
+            dependencies: [],
+            maintainers: [],
+            deprecated: false,
+          }),
+
+          HelmChart.create({
+            apiVersion: "some-api-version",
+            name: "some-other-name",
+            version: "some-version",
+            repo: "some-repository",
+            created: "2015-10-21T07:28:00Z",
+            description: "some-description",
+            keywords: [],
+            sources: [],
+            urls: [],
+            annotations: {},
+            dependencies: [],
+            maintainers: [],
+            deprecated: false,
+          }),
+        ]);
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      describe("when opening details of a chart", () => {
+        beforeEach(() => {
+          const row = rendered.getByTestId(
+            "helm-chart-row-for-some-repository-some-name",
+          );
+
+          fireEvent.click(row);
+        });
+
+        it("renders", () => {
+          expect(rendered.baseElement).toMatchSnapshot();
+        });
+
+        it("calls for chart versions", () => {
+          expect(callForHelmChartVersionsMock).toHaveBeenCalledWith(
+            "some-repository",
+            "some-name",
+          );
+        });
+
+        it("shows spinner", () => {
+          expect(
+            rendered.getByTestId("spinner-for-chart-details"),
+          ).toBeInTheDocument();
+        });
+
+        describe("when chart versions resolve", () => {
+          beforeEach(async () => {
+            await callForHelmChartVersionsMock.resolve([
+              HelmChart.create({
+                apiVersion: "some-api-version",
+                name: "some-name",
+                version: "some-version",
+                repo: "some-repository",
+                created: "2015-10-21T07:28:00Z",
+                description: "some-description",
+                keywords: [],
+                sources: [],
+                urls: [],
+                annotations: {},
+                dependencies: [],
+                maintainers: [],
+                deprecated: false,
+              }),
+
+              HelmChart.create({
+                apiVersion: "some-api-version",
+                name: "some-name",
+                version: "some-other-version",
+                repo: "some-repository",
+                created: "2015-10-21T07:28:00Z",
+                description: "some-description",
+                keywords: [],
+                sources: [],
+                urls: [],
+                annotations: {},
+                dependencies: [],
+                maintainers: [],
+                deprecated: false,
+              }),
+            ]);
+          });
+
+          it("calls for chart readme for the version", () => {
+            expect(callForHelmChartReadmeMock).toHaveBeenCalledWith(
+              "some-repository",
+              "some-name",
+              "some-version",
+            );
+          });
+
+          it("has the latest version as selected", () => {
+            const actual = builder.select.getValue(
+              "helm-chart-version-selector-some-repository-some-name",
+            );
+
+            expect(actual).toBe("some-version");
+          });
+
+          it("renders", () => {
+            expect(rendered.baseElement).toMatchSnapshot();
+          });
+
+          it("does not shows spinner for details", () => {
+            expect(
+              rendered.queryByTestId("spinner-for-chart-details"),
+            ).not.toBeInTheDocument();
+          });
+
+          it("shows spinner for readme", () => {
+            expect(
+              rendered.getByTestId("spinner-for-chart-readme"),
+            ).toBeInTheDocument();
+          });
+
+          describe("when readme resolves", () => {
+            beforeEach(async () => {
+              await callForHelmChartReadmeMock.resolve("some-readme");
+            });
+
+            it("renders", () => {
+              expect(rendered.baseElement).toMatchSnapshot();
+            });
+
+            it("does not show spinner anymore", () => {
+              expect(
+                rendered.queryByTestId("spinner-for-chart-readme"),
+              ).not.toBeInTheDocument();
+            });
+
+            describe("when selecting different version", () => {
+              beforeEach(() => {
+                callForHelmChartReadmeMock.mockClear();
+
+                builder.select
+                  .openMenu(
+                    "helm-chart-version-selector-some-repository-some-name",
+                  )
+                  .selectOption("some-other-version");
+              });
+
+              it("renders", () => {
+                expect(rendered.baseElement).toMatchSnapshot();
+              });
+
+              it("selects the version", () => {
+                const actual = builder.select.getValue(
+                  "helm-chart-version-selector-some-repository-some-name",
+                );
+
+                expect(actual).toBe("some-other-version");
+              });
+
+              it("calls for chart readme for the version", () => {
+                expect(callForHelmChartReadmeMock).toHaveBeenCalledWith(
+                  "some-repository",
+                  "some-name",
+                  "some-other-version",
+                );
+              });
+
+              describe("when readme resolves", () => {
+                beforeEach(async () => {
+                  await callForHelmChartReadmeMock.resolve("some-readme");
+                });
+
+                it("renders", () => {
+                  expect(rendered.baseElement).toMatchSnapshot();
+                });
+
+                it("when selecting to install chart, calls for the default configuration of the chart with specific version", async () => {
+                  const installButton = rendered.getByTestId(
+                    "install-chart-for-some-repository-some-name",
+                  );
+
+                  fireEvent.click(installButton);
+
+                  await flushPromises();
+
+                  expect(callForHelmChartValuesMock).toHaveBeenCalledWith(
+                    "some-repository",
+                    "some-name",
+                    "some-other-version",
+                  );
+                });
+              });
+            });
+
+            describe("when selecting to install the chart", () => {
+              beforeEach(() => {
+                callForHelmChartVersionsMock.mockClear();
+
+                const installButton = rendered.getByTestId(
+                  "install-chart-for-some-repository-some-name",
+                );
+
+                fireEvent.click(installButton);
+              });
+
+              it("renders", () => {
+                expect(rendered.baseElement).toMatchSnapshot();
+              });
+
+              it("has the dock tab for installing chart", () => {
+                expect(
+                  rendered.getByTestId("dock-tab-for-some-tab-id"),
+                ).toBeInTheDocument();
+              });
+
+              it("shows dock tab for installing chart", () => {
+                expect(
+                  rendered.getByTestId(
+                    "dock-tab-content-for-some-tab-id",
+                  ),
+                ).toBeInTheDocument();
+              });
+            });
+          });
+        });
+      });
+    });
+  });
+});
@@ -1,37 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import type { RenderResult } from "@testing-library/react";
-import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
-import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
-
-describe("helm-charts - navigation to Helm charts", () => {
-  let applicationBuilder: ApplicationBuilder;
-
-  beforeEach(() => {
-    applicationBuilder = getApplicationBuilder();
-  });
-
-  describe("when navigating to Helm charts", () => {
-    let rendered: RenderResult;
-
-    beforeEach(async () => {
-      applicationBuilder.setEnvironmentToClusterFrame();
-
-      rendered = await applicationBuilder.render();
-
-      applicationBuilder.helmCharts.navigate();
-    });
-
-    it("renders", () => {
-      expect(rendered.container).toMatchSnapshot();
-    });
-
-    it("shows page for Helm charts", () => {
-      const page = rendered.getByTestId("page-for-helm-charts");
-
-      expect(page).not.toBeNull();
-    });
-  });
-});