Turn on strict mode in tsconfig.json, some helpful lints, and required cleanup where strictness necessitates it (#5195)

* Turn on strict mode in tsconfig.json - Add route, clusterRoute, and payloadValidatedClusterRoute helper functions to improve types with backend routes - Turn on the following new lints: - react/jsx-first-prop-new-line - react/jsx-wrap-multilines - react/jsx-one-expression-per-line - react/jsx-max-props-per-line - react/jsx-indent - react/jsx-indent-props Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace KubeObject scope strings with enum Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert package.json version changes Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move hostedCluster(Id) Signed-off-by: Sebastian Malton <sebastian@malton.name> * change some type param names to be not single letters Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove copy-extension-themes Signed-off-by: Sebastian Malton <sebastian@malton.name> * add new make clean action Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build to not use webpack for generating types Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move fileNameMigration to index Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix ref logic error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts test by overriding createStorage to not touch file system Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster.test.ts tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube=api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixed hotbar-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kubeconfig-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix daemonset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicaset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulsets/dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicasets/scale-dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments/scale/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cronjob.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stateful-set.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployment.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix job.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix scroll-spy.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix welcome.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix verify-that-all-routes-have-route-component.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pod-tolerations.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * better fix for previous 3 fixes, plus also select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix app-paths.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix isReactNode typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sub-title.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix drawer.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix list-layout.tsx and header.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix error-boundary.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix upgrade-chart/store.ts and dock-tab.store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix install-chart/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix edit-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix create-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select-filter.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crd-list.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix wrong types for extensions Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency on catalogCategoryRegistry Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-kube Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors, most <Select /> errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixing more type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * some more fixing type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeApis to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * factor out into a common file all the exports Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeObjectStores to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unused legacy KubeApi globals Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bad previous commit Signed-off-by: Sebastian Malton <sebastian@malton.name> * more crash fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * try and fix behavioural tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-core.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make ThemeStore non-singleton and fix navigation-to-terminal-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-kubernetes-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-application-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-extension-specific-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-telemetry-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix closing-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts - Fix other type errors too Signed-off-by: Sebastian Malton <sebastian@malton.name> * final tweaks Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add more tsconfig files, fix bug in <Catalog> - Make all of history, navigation injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert all of kube-details-params/ and navigate/ to injectable - This fixes a runtime error that was encountered during testing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix runtime errors on renderer - remove all static uses of `createPageParam` (and then removed the legacy global) - Made LensRendererExtension and LensMainExtension just used dependencies and not the getLegacyDi - Fixed circular dep in extension-loader Signed-off-by: Sebastian Malton <sebastian@malton.name> * Move registerStore calls to after injectMany Signed-off-by: Sebastian Malton <sebastian@malton.name> * replace all the rest of the legacy uses of apiManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stack overflow and cycles in DI Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix NamespaceSelectFilter not opening Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix WizardStep and AddNamespaceDialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix KubeApi's not being registered Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup WindowManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * Proper fix for Wizard, fix NamespaceStore.subscribe Signed-off-by: Sebastian Malton <sebastian@malton.name> * Rewrite withTooltip to be more type correct - Fixes mobx related "too many recursive actions" error - Change all the uses of withTooltips to be functional components Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add e2e test to cover kube api registration Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup internal-commands Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove cast in <Animate> Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix command-palette e2e test Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type error after rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test name Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix code to help CodeQL scanner Signed-off-by: Sebastian Malton <sebastian@malton.name> * update intree extension lock files Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix build-extensions picking wrong @types/react Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix tests from rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make KubeconfigSyncManager more injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crash in test mode for Dialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * make Select snapshots deterministic Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix new type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object.store.test.ts typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix merge build issues Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix snapshots after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * reexport BaseKubeJsonApiObjectMetadata Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo in terminalSpawningPool Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove duplicate license header Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo to waitUntilDefined Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove iter use from getLegacyGlobalDiForExtensionApi Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove complex createStorage override Signed-off-by: Sebastian Malton <sebastian@malton.name> * override logger with mocks only when needed for tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove specialized overrideStore flags for getDiForUnitTesting Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary | undefined types from the exactOptionalFieldTypes experiment Signed-off-by: Sebastian Malton <sebastian@malton.name> * use more descriptive name for local test mocks Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary addition to 'make clean' target Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove oddity of KubeObjectStore.getById(undefined) being allowed Signed-off-by: Sebastian Malton <sebastian@malton.name> * rename KubeObject.getDescriptor in favour of name without fundemental JS meaning Signed-off-by: Sebastian Malton <sebastian@malton.name> * Simplify legacyRegisterApi when working in behaviour unit tests - Don't emit within main environment as there should be no auto registering there Signed-off-by: Sebastian Malton <sebastian@malton.name> * change confusing variable name in ReactiveDuration Signed-off-by: Sebastian Malton <sebastian@malton.name> * make visitor pattern more explicit for Entity contextMenuOpen Signed-off-by: Sebastian Malton <sebastian@malton.name> * toggleDetails -> toggleKubeDetailsPane is more specific Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove outdated comment Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bug where LensExtension dependencies are not set Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests from the revert of react 18 Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix more tests from merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typings with new is-compatible-extension tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * more type fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert in-tree extension versions Signed-off-by: Sebastian Malton <sebastian@malton.name> * Improve name of guarding injectable for stores and apis - New name better implies that it is just a guard state and does not do anything Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add helper for <Select>.isMulti for storing in a Set<Value> Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix is-compatible-extension.test.ts types Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2022-05-16 07:17:57 -04:00
1 parent 381d77c633
commit dfcb7c3330
@@ -4,23 +4,23 @@
 */
 import "@testing-library/jest-dom/extend-expect";
 import { KubeConfig } from "@kubernetes/client-node";
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, screen } from "@testing-library/react";
 import mockFs from "mock-fs";
 import React from "react";
 import * as selectEvent from "react-select-event";
-
 import type { Cluster } from "../../../../common/cluster/cluster";
-import { DeleteClusterDialog } from "../delete-cluster-dialog";
-
+import { DeleteClusterDialog } from "../view";
 import type { ClusterModel } from "../../../../common/cluster-types";
 import { getDisForUnitTesting } from "../../../../test-utils/get-dis-for-unit-testing";
 import { createClusterInjectionToken } from "../../../../common/cluster/create-cluster-injection-token";
 import createContextHandlerInjectable from "../../../../main/context-handler/create-context-handler.injectable";
-import deleteClusterDialogModelInjectable from "../delete-cluster-dialog-model/delete-cluster-dialog-model.injectable";
-import type { DeleteClusterDialogModel } from "../delete-cluster-dialog-model/delete-cluster-dialog-model";
 import type { DiRender } from "../../test-utils/renderFor";
 import { renderFor } from "../../test-utils/renderFor";
-import hotbarStoreInjectable from "../../../../common/hotbar-store.injectable";
+import type { OpenDeleteClusterDialog } from "../open.injectable";
+import openDeleteClusterDialogInjectable from "../open.injectable";
+import storesAndApisCanBeCreatedInjectable from "../../../stores-apis-can-be-created.injectable";
+import createKubeconfigManagerInjectable from "../../../../main/kubeconfig-manager/create-kubeconfig-manager.injectable";
+import ipcRendererInjectable from "../../../app-paths/get-value-from-registered-channel/ipc-renderer/ipc-renderer.injectable";

 jest.mock("electron", () => ({
  app: {
@@ -93,23 +93,26 @@ let config: KubeConfig;

 describe("<DeleteClusterDialog />", () => {
  let createCluster: (model: ClusterModel) => Cluster;
-  let deleteClusterDialogModel: DeleteClusterDialogModel;
+  let openDeleteClusterDialog: OpenDeleteClusterDialog;
  let render: DiRender;

  beforeEach(async () => {
    const { mainDi, rendererDi, runSetups } = getDisForUnitTesting({ doGeneralOverrides: true });

    render = renderFor(rendererDi);
-
    mainDi.override(createContextHandlerInjectable, () => () => undefined);
-
+    mainDi.override(createKubeconfigManagerInjectable, () => () => undefined);
    mockFs();

-    rendererDi.override(hotbarStoreInjectable, () => ({}));
+    rendererDi.override(storesAndApisCanBeCreatedInjectable, () => true);
+    rendererDi.override(ipcRendererInjectable, () => ({
+      on: jest.fn(),
+      invoke: jest.fn(), // TODO: replace with proper mocking via the IPC bridge
+    } as never));

    await runSetups();

-    deleteClusterDialogModel = rendererDi.inject(deleteClusterDialogModelInjectable);
+    openDeleteClusterDialog = rendererDi.inject(openDeleteClusterDialogInjectable);
    createCluster = mainDi.inject(createClusterInjectionToken);
  });

@@ -139,7 +142,7 @@ describe("<DeleteClusterDialog />", () => {
      expect(container).toBeInstanceOf(HTMLElement);
    });

-    it("shows warning when deleting non-current-context cluster", () => {
+    it("shows warning when deleting non-current-context cluster", async () => {
      const cluster = createCluster({
        id: "test",
        contextName: "test",
@@ -149,15 +152,15 @@ describe("<DeleteClusterDialog />", () => {
        kubeConfigPath: "./temp-kube-config",
      });

-      deleteClusterDialogModel.open({ cluster, config });
-      const { getByText } = render(<DeleteClusterDialog />);
+      openDeleteClusterDialog({ cluster, config });

+      render(<DeleteClusterDialog />);
      const message = "The contents of kubeconfig file will be changed!";

-      expect(getByText(message)).toBeInstanceOf(HTMLElement);
+      expect(await screen.findByText(message)).toBeInstanceOf(HTMLElement);
    });

-    it("shows warning when deleting current-context cluster", () => {
+    it("shows warning when deleting current-context cluster", async () => {
      const cluster = createCluster({
        id: "other-cluster",
        contextName: "other-context",
@@ -167,11 +170,10 @@ describe("<DeleteClusterDialog />", () => {
        kubeConfigPath: "./temp-kube-config",
      });

-      deleteClusterDialogModel.open({ cluster, config });
+      openDeleteClusterDialog({ cluster, config });
+      render(<DeleteClusterDialog />);

-      const { getByTestId } = render(<DeleteClusterDialog />);
-
-      expect(getByTestId("current-context-warning")).toBeInstanceOf(HTMLElement);
+      expect(await screen.findByTestId("current-context-warning")).toBeInstanceOf(HTMLElement);
    });

    it("shows context switcher when deleting current cluster", async () => {
@@ -184,15 +186,16 @@ describe("<DeleteClusterDialog />", () => {
        kubeConfigPath: "./temp-kube-config",
      });

-      deleteClusterDialogModel.open({ cluster, config });
+      openDeleteClusterDialog({ cluster, config });
+      render(<DeleteClusterDialog />);

-      const { getByText } = render(<DeleteClusterDialog />);
+      const menu = await screen.findByText("Select new context...");

-      expect(getByText("Select...")).toBeInTheDocument();
-      selectEvent.openMenu(getByText("Select..."));
+      expect(menu).toBeInTheDocument();
+      selectEvent.openMenu(menu);

-      expect(getByText("test")).toBeInTheDocument();
-      expect(getByText("test2")).toBeInTheDocument();
+      expect(await screen.findByText("test")).toBeInTheDocument();
+      expect(await screen.findByText("test2")).toBeInTheDocument();
    });

    it("shows context switcher after checkbox click", async () => {
@@ -205,22 +208,24 @@ describe("<DeleteClusterDialog />", () => {
        kubeConfigPath: "./temp-kube-config",
      });

-      deleteClusterDialogModel.open({ cluster, config });
+      openDeleteClusterDialog({ cluster, config });
+      render(<DeleteClusterDialog />);

-      const { getByText, getByTestId } = render(<DeleteClusterDialog />);
-      const link = getByTestId("context-switch");
+      const link = await screen.findByTestId("context-switch");

      expect(link).toBeInstanceOf(HTMLElement);
      fireEvent.click(link);

-      expect(getByText("Select...")).toBeInTheDocument();
-      selectEvent.openMenu(getByText("Select..."));
+      const menu = await screen.findByText("Select new context...");

-      expect(getByText("test")).toBeInTheDocument();
-      expect(getByText("test2")).toBeInTheDocument();
+      expect(menu).toBeInTheDocument();
+      selectEvent.openMenu(menu);
+
+      expect(await screen.findByText("test")).toBeInTheDocument();
+      expect(await screen.findByText("test2")).toBeInTheDocument();
    });

-    it("shows warning for internal kubeconfig cluster", () => {
+    it("shows warning for internal kubeconfig cluster", async () => {
      const cluster = createCluster({
        id: "some-cluster",
        contextName: "test",
@@ -232,11 +237,10 @@ describe("<DeleteClusterDialog />", () => {

      const spy = jest.spyOn(cluster, "isInLocalKubeconfig").mockImplementation(() => true);

-      deleteClusterDialogModel.open({ cluster, config });
+      openDeleteClusterDialog({ cluster, config });
+      render(<DeleteClusterDialog />);

-      const { getByTestId } = render(<DeleteClusterDialog />);
-
-      expect(getByTestId("internal-kubeconfig-warning")).toBeInstanceOf(HTMLElement);
+      expect(await screen.findByTestId("internal-kubeconfig-warning")).toBeInstanceOf(HTMLElement);

      spy.mockRestore();
    });
@@ -258,7 +262,7 @@ describe("<DeleteClusterDialog />", () => {
      mockFs.restore();
    });

-    it("shows warning if no other contexts left", () => {
+    it("shows warning if no other contexts left", async () => {
      const cluster = createCluster({
        id: "other-cluster",
        contextName: "other-context",
@@ -268,11 +272,10 @@ describe("<DeleteClusterDialog />", () => {
        kubeConfigPath: "./temp-kube-config",
      });

-      deleteClusterDialogModel.open({ cluster, config });
+      openDeleteClusterDialog({ cluster, config });
+      render(<DeleteClusterDialog />);

-      const { getByTestId } = render(<DeleteClusterDialog />);
-
-      expect(getByTestId("no-more-contexts-warning")).toBeInstanceOf(HTMLElement);
+      expect(await screen.findByTestId("no-more-contexts-warning")).toBeInstanceOf(HTMLElement);
    });
  });
 });
@@ -1,13 +0,0 @@
-/**
- * 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 { DeleteClusterDialogModel } from "./delete-cluster-dialog-model";
-
-const deleteClusterDialogModelInjectable = getInjectable({
-  id: "delete-cluster-dialog-model",
-  instantiate: () => new DeleteClusterDialogModel(),
-});
-
-export default deleteClusterDialogModelInjectable;
@@ -1,33 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import type { KubeConfig } from "@kubernetes/client-node";
-import { observable, makeObservable, action } from "mobx";
-import type { Cluster } from "../../../../common/cluster/cluster";
-
-export class DeleteClusterDialogModel {
-  isOpen = false;
-
-  constructor() {
-    makeObservable(this, {
-      isOpen: observable,
-      open: action,
-      close: action,
-    });
-  }
-
-  cluster: Cluster;
-  config: KubeConfig;
-
-  open = ({ cluster, config }: { cluster: Cluster; config: KubeConfig }) => {
-    this.isOpen = true;
-
-    this.cluster = cluster;
-    this.config = config;
-  };
-
-  close = () => {
-    this.isOpen = false;
-  };
-}
@@ -1,252 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import styles from "./delete-cluster-dialog.module.scss";
-
-import { computed, makeObservable, observable } from "mobx";
-import { observer } from "mobx-react";
-import React from "react";
-
-import { Button } from "../button";
-import { saveKubeconfig } from "./save-config";
-import { Notifications } from "../notifications";
-import { autoBind } from "../../../common/utils";
-import { Dialog } from "../dialog";
-import { Icon } from "../icon";
-import { Select } from "../select";
-import { Checkbox } from "../checkbox";
-import { requestClearClusterAsDeleting, requestDeleteCluster, requestSetClusterAsDeleting } from "../../ipc";
-import { withInjectables } from "@ogre-tools/injectable-react";
-import hotbarStoreInjectable from "../../../common/hotbar-store.injectable";
-import type { DeleteClusterDialogModel } from "./delete-cluster-dialog-model/delete-cluster-dialog-model";
-import deleteClusterDialogModelInjectable from "./delete-cluster-dialog-model/delete-cluster-dialog-model.injectable";
-import type { HotbarStore } from "../../../common/hotbar-store";
-
-interface Dependencies {
-  hotbarStore: HotbarStore;
-  model: DeleteClusterDialogModel;
-}
-
-@observer
-class NonInjectedDeleteClusterDialog extends React.Component<Dependencies> {
-  @observable showContextSwitch = false;
-  @observable newCurrentContext = "";
-
-  constructor(props: Dependencies) {
-    super(props);
-    makeObservable(this);
-    autoBind(this);
-  }
-
-  onOpen() {
-    this.newCurrentContext = "";
-
-    if (this.isCurrentContext()) {
-      this.showContextSwitch = true;
-    }
-  }
-
-  onClose() {
-    this.props.model.close();
-    this.showContextSwitch = false;
-  }
-
-  removeContext() {
-    this.props.model.config.contexts = this.props.model.config.contexts.filter(item =>
-      item.name !== this.props.model.cluster.contextName,
-    );
-  }
-
-  changeCurrentContext() {
-    if (this.newCurrentContext && this.showContextSwitch) {
-      this.props.model.config.currentContext = this.newCurrentContext;
-    }
-  }
-
-  async onDelete() {
-    const { cluster, config } = this.props.model;
-
-    await requestSetClusterAsDeleting(cluster.id);
-    this.removeContext();
-    this.changeCurrentContext();
-
-    try {
-      await saveKubeconfig(config, cluster.kubeConfigPath);
-      this.props.hotbarStore.removeAllHotbarItems(cluster.id);
-      await requestDeleteCluster(cluster.id);
-    } catch(error) {
-      Notifications.error(`Cannot remove cluster, failed to process config file. ${error}`);
-    } finally {
-      await requestClearClusterAsDeleting(cluster.id);
-    }
-
-    this.onClose();
-  }
-
-  @computed get disableDelete() {
-    const { cluster, config } = this.props.model;
-    const noContextsAvailable = config.contexts.filter(context => context.name !== cluster.contextName).length == 0;
-    const newContextNotSelected = this.newCurrentContext === "";
-
-    if (noContextsAvailable) {
-      return false;
-    }
-
-    return this.showContextSwitch && newContextNotSelected;
-  }
-
-  isCurrentContext() {
-    return this.props.model.config.currentContext == this.props.model.cluster.contextName;
-  }
-
-  renderCurrentContextSwitch() {
-    if (!this.showContextSwitch) return null;
-    const { cluster, config } = this.props.model;
-    const contexts = config.contexts.filter(context => context.name !== cluster.contextName);
-
-    const options = [
-      ...contexts.map(context => ({
-        label: context.name,
-        value: context.name,
-      })),
-    ];
-
-    return (
-      <div className="mt-4">
-        <Select
-          id="delete-cluster-input"
-          options={options}
-          value={this.newCurrentContext}
-          onChange={({ value }) => this.newCurrentContext = value}
-          themeName="light"
-          className="ml-[1px] mr-[1px]"
-        />
-      </div>
-    );
-  }
-
-  renderDeleteMessage() {
-    const { cluster } = this.props.model;
-
-    if (cluster.isInLocalKubeconfig()) {
-      return (
-        <div>
-          Delete the <b>{cluster.getMeta().name}</b> context from Lens&apos;s internal kubeconfig?
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        Delete the <b>{cluster.getMeta().name}</b> context from <b>{cluster.kubeConfigPath}</b>?
-      </div>
-    );
-  }
-
-  getWarningMessage() {
-    const { cluster, config } = this.props.model;
-    const contexts = config.contexts.filter(context => context.name !== cluster.contextName);
-
-    if (!contexts.length) {
-      return (
-        <p data-testid="no-more-contexts-warning">
-          This will remove the last context in kubeconfig. There will be no active context.
-        </p>
-      );
-    }
-
-    if (this.isCurrentContext()) {
-      return (
-        <p data-testid="current-context-warning">
-          This will remove active context in kubeconfig. Use drop down below to&nbsp;select a&nbsp;different one.
-        </p>
-      );
-    }
-
-    if (cluster.isInLocalKubeconfig()) {
-      return (
-        <p data-testid="internal-kubeconfig-warning">
-          Are you sure you want to delete it? It can be re-added through the copy/paste mechanism.
-        </p>
-      );
-    }
-
-    return (
-      <p data-testid="kubeconfig-change-warning">The contents of kubeconfig file will be changed!</p>
-    );
-  }
-
-  renderWarning() {
-    return (
-      <div className={styles.warning}>
-        <Icon material="warning_amber" className={styles.warningIcon}/>
-        {this.getWarningMessage()}
-      </div>
-    );
-  }
-
-  render() {
-    const { cluster, config, isOpen } = this.props.model;
-
-    if (!cluster || !config) return null;
-
-    const contexts = config.contexts.filter(context => context.name !== cluster.contextName);
-
-    return (
-      <Dialog
-        className={styles.dialog}
-        isOpen={isOpen}
-        close={this.onClose}
-        onOpen={this.onOpen}
-      >
-        <div className={styles.dialogContent}>
-          {this.renderDeleteMessage()}
-          {this.renderWarning()}
-          <hr className={styles.hr}/>
-          {contexts.length > 0 && (
-            <>
-              <div className="mt-4">
-                <Checkbox
-                  data-testid="context-switch"
-                  label={(
-                    <>
-                      <span className="font-semibold">Select current-context</span>{" "}
-                      {!this.isCurrentContext() && "(optional)"}
-                    </>
-                  )}
-                  value={this.showContextSwitch}
-                  onChange={value => this.showContextSwitch = this.isCurrentContext() ? true : value}
-                />
-              </div>
-              {this.renderCurrentContextSwitch()}
-            </>
-          )}
-        </div>
-        <div className={styles.dialogButtons}>
-          <Button
-            onClick={this.onClose} plain
-            label="Cancel"
-          />
-          <Button
-            onClick={this.onDelete}
-            autoFocus accent
-            label="Delete Context"
-            disabled={this.disableDelete}
-          />
-        </div>
-      </Dialog>
-    );
-  }
-}
-
-export const DeleteClusterDialog = withInjectables<Dependencies>(
-  NonInjectedDeleteClusterDialog,
-
-  {
-    getProps: (di) => ({
-      hotbarStore: di.inject(hotbarStoreInjectable),
-      model: di.inject(deleteClusterDialogModelInjectable),
-    }),
-  },
-);
@@ -3,4 +3,4 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

-export * from "./delete-cluster-dialog";
+export * from "./view";
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { DeleteClusterDialogState } from "./state.injectable";
+import deleteClusterDialogStateInjectable from "./state.injectable";
+
+export type OpenDeleteClusterDialog = (props: DeleteClusterDialogState) => void;
+
+const openDeleteClusterDialogInjectable = getInjectable({
+  id: "open-delete-cluster-dialog",
+  instantiate: (di): OpenDeleteClusterDialog => {
+    const state = di.inject(deleteClusterDialogStateInjectable);
+
+    return (props) => state.set(props);
+  },
+});
+
+export default openDeleteClusterDialogInjectable;
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { KubeConfig } from "@kubernetes/client-node";
+import { getInjectable } from "@ogre-tools/injectable";
+import { observable } from "mobx";
+import type { Cluster } from "../../../common/cluster/cluster";
+
+export interface DeleteClusterDialogState {
+  config: KubeConfig;
+  cluster: Cluster;
+}
+
+const deleteClusterDialogStateInjectable = getInjectable({
+  id: "delete-cluster-dialog-state",
+  instantiate: () => observable.box<DeleteClusterDialogState | undefined>(),
+});
+
+export default deleteClusterDialogStateInjectable;
@@ -0,0 +1,270 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import styles from "./view.module.scss";
+
+import type { IObservableValue } from "mobx";
+import {  action, observable } from "mobx";
+import { observer } from "mobx-react";
+import React from "react";
+
+import { Button } from "../button";
+import { saveKubeconfig } from "./save-config";
+import { Notifications } from "../notifications";
+import { Dialog } from "../dialog";
+import { Icon } from "../icon";
+import { Select } from "../select";
+import { Checkbox } from "../checkbox";
+import { requestClearClusterAsDeleting, requestDeleteCluster, requestSetClusterAsDeleting } from "../../ipc";
+import type { HotbarStore } from "../../../common/hotbars/store";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import hotbarStoreInjectable from "../../../common/hotbars/store.injectable";
+import type { DeleteClusterDialogState } from "./state.injectable";
+import deleteClusterDialogStateInjectable from "./state.injectable";
+
+export interface Dependencies {
+  state: IObservableValue<DeleteClusterDialogState | undefined>;
+  hotbarStore: HotbarStore;
+}
+
+@observer
+class NonInjectedDeleteClusterDialog extends React.Component<Dependencies> {
+  private readonly showContextSwitch = observable.box(false);
+  private readonly newCurrentContext = observable.box<string | undefined>();
+
+  @action
+  onOpen(state: DeleteClusterDialogState) {
+    this.newCurrentContext.set("");
+    this.showContextSwitch.set(this.isCurrentContext(state));
+  }
+
+  onClose = () => {
+    this.showContextSwitch.set(false);
+  };
+
+  removeContext(state: DeleteClusterDialogState) {
+    state.config.contexts = state.config.contexts.filter(item =>
+      item.name !== state.cluster.contextName,
+    );
+  }
+
+  changeCurrentContext(state: DeleteClusterDialogState) {
+    const newCurrentContext = this.newCurrentContext.get();
+    const showContextSwitch = this.showContextSwitch.get();
+
+    if (newCurrentContext && showContextSwitch) {
+      state.config.currentContext = newCurrentContext;
+    }
+  }
+
+  async onDelete(state: DeleteClusterDialogState) {
+    const { cluster, config } = state;
+
+    await requestSetClusterAsDeleting(cluster.id);
+    this.removeContext(state);
+    this.changeCurrentContext(state);
+
+    try {
+      await saveKubeconfig(config, cluster.kubeConfigPath);
+      this.props.hotbarStore.removeAllHotbarItems(cluster.id);
+      await requestDeleteCluster(cluster.id);
+    } catch(error) {
+      Notifications.error(`Cannot remove cluster, failed to process config file. ${error}`);
+    } finally {
+      await requestClearClusterAsDeleting(cluster.id);
+    }
+
+    this.onClose();
+  }
+
+  shouldDeleteBeDisabled({ cluster, config }: DeleteClusterDialogState): boolean {
+    const noContextsAvailable = config.contexts.filter(context => context.name !== cluster.contextName).length == 0;
+    const newContextNotSelected = this.newCurrentContext.get() === "";
+    const showContextSwitch = this.showContextSwitch.get();
+
+    if (noContextsAvailable) {
+      return false;
+    }
+
+    return showContextSwitch && newContextNotSelected;
+  }
+
+  isCurrentContext({ cluster, config }: DeleteClusterDialogState) {
+    return config.currentContext == cluster.contextName;
+  }
+
+  renderCurrentContextSwitch({ cluster, config }: DeleteClusterDialogState) {
+    if (!this.showContextSwitch.get()) {
+      return null;
+    }
+
+    const selectOptions = config
+      .contexts
+      .filter(context => context.name !== cluster.contextName)
+      .map(context => ({
+        value: context.name,
+        label: context.name,
+      }));
+
+    return (
+      <div className="mt-4">
+        <Select
+          id="delete-cluster-input"
+          options={selectOptions}
+          value={this.newCurrentContext.get()}
+          onChange={opt => {
+            if (opt) {
+              this.newCurrentContext.set(opt.value);
+            }
+          }}
+          themeName="light"
+          className="ml-[1px] mr-[1px]"
+          placeholder="Select new context..."
+        />
+      </div>
+    );
+  }
+
+  renderDeleteMessage({ cluster }: DeleteClusterDialogState) {
+    if (cluster.isInLocalKubeconfig()) {
+      return (
+        <div>
+          {"Delete the "}
+          <b>
+            {cluster.getMeta().name}
+          </b>
+          {" context from Lens's internal kubeconfig?"}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        {"Delete the "}
+        <b>
+          {cluster.getMeta().name}
+        </b>
+        {" context from "}
+        <b>
+          {cluster.kubeConfigPath}
+        </b>
+        ?
+      </div>
+    );
+  }
+
+  getWarningMessage({ cluster, config }: DeleteClusterDialogState) {
+    const contexts = config.contexts.filter(context => context.name !== cluster.contextName);
+
+    if (!contexts.length) {
+      return (
+        <p data-testid="no-more-contexts-warning">
+          This will remove the last context in kubeconfig. There will be no active context.
+        </p>
+      );
+    }
+
+    if (this.isCurrentContext({ cluster, config })) {
+      return (
+        <p data-testid="current-context-warning">
+          This will remove active context in kubeconfig. Use drop down below to&nbsp;select a&nbsp;different one.
+        </p>
+      );
+    }
+
+    if (cluster.isInLocalKubeconfig()) {
+      return (
+        <p data-testid="internal-kubeconfig-warning">
+          Are you sure you want to delete it? It can be re-added through the copy/paste mechanism.
+        </p>
+      );
+    }
+
+    return (
+      <p data-testid="kubeconfig-change-warning">The contents of kubeconfig file will be changed!</p>
+    );
+  }
+
+  renderWarning(state: DeleteClusterDialogState) {
+    return (
+      <div className={styles.warning}>
+        <Icon material="warning_amber" className={styles.warningIcon} />
+        {this.getWarningMessage(state)}
+      </div>
+    );
+  }
+
+  renderContents(state: DeleteClusterDialogState) {
+    const contexts = state.config.contexts.filter(context => context.name !== state.cluster.contextName);
+    const disableDelete = this.shouldDeleteBeDisabled(state);
+
+    return (
+      <>
+        <div className={styles.dialogContent}>
+          {this.renderDeleteMessage(state)}
+          {this.renderWarning(state)}
+          <hr className={styles.hr} />
+          {contexts.length > 0 && (
+            <>
+              <div className="mt-4">
+                <Checkbox
+                  data-testid="context-switch"
+                  label={(
+                    <>
+                      <span className="font-semibold">Select current-context</span>
+                      {" "}
+                      {!this.isCurrentContext(state) && "(optional)"}
+                    </>
+                  )}
+                  value={this.showContextSwitch.get()}
+                  onChange={value => this.showContextSwitch.set(this.isCurrentContext(state) || value)}
+                />
+              </div>
+              {this.renderCurrentContextSwitch(state)}
+            </>
+          )}
+        </div>
+        <div className={styles.dialogButtons}>
+          <Button
+            onClick={this.close}
+            plain
+            label="Cancel"
+          />
+          <Button
+            onClick={() => this.onDelete(state)}
+            autoFocus
+            accent
+            label="Delete Context"
+            disabled={disableDelete}
+          />
+        </div>
+      </>
+    );
+  }
+
+  private close = () => this.props.state.set(undefined);
+
+  render() {
+    const state = this.props.state.get();
+
+    return (
+      <Dialog
+        className={styles.dialog}
+        isOpen={Boolean(state)}
+        close={this.close}
+        onClose={this.onClose}
+        onOpen={state && (() => this.onOpen(state))}
+      >
+        {state && this.renderContents(state)}
+      </Dialog>
+    );
+  }
+}
+
+export const DeleteClusterDialog = withInjectables<Dependencies>(NonInjectedDeleteClusterDialog, {
+  getProps: (di) => ({
+    hotbarStore: di.inject(hotbarStoreInjectable),
+    state: di.inject(deleteClusterDialogStateInjectable),
+  }),
+});