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
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./dialog.scss";
+
+import React from "react";
+import type { IObservableValue } from "mobx";
+import { action, observable, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import type { DialogProps } from "../../dialog";
+import { Dialog } from "../../dialog";
+import { Wizard, WizardStep } from "../../wizard";
+import type { Namespace } from "../../../../common/k8s-api/endpoints";
+import { Input } from "../../input";
+import { systemName } from "../../input/input_validators";
+import { Notifications } from "../../notifications";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import namespaceStoreInjectable from "../store.injectable";
+import addNamespaceDialogStateInjectable
+  from "./state.injectable";
+import type { NamespaceStore } from "../store";
+import { autoBind } from "../../../utils";
+
+export interface AddNamespaceDialogProps extends DialogProps {
+  onSuccess?(ns: Namespace): void;
+  onError?(error: unknown): void;
+}
+
+interface Dependencies {
+  namespaceStore: NamespaceStore;
+  state: IObservableValue<boolean>;
+}
+
+@observer
+class NonInjectedAddNamespaceDialog extends React.Component<AddNamespaceDialogProps & Dependencies> {
+  @observable namespace = "";
+
+  constructor(props: AddNamespaceDialogProps & Dependencies) {
+    super(props);
+    makeObservable(this);
+    autoBind(this);
+  }
+
+  @action
+  close() {
+    this.props.state.set(false);
+  }
+
+  @action
+  reset() {
+    this.namespace = "";
+  }
+
+  async addNamespace() {
+    const { namespace } = this;
+    const { onSuccess, onError, namespaceStore } = this.props;
+
+    try {
+      const created = await namespaceStore.create({ name: namespace });
+
+      onSuccess?.(created);
+      this.close();
+    } catch (err) {
+      Notifications.checkedError(err, "Unknown error occured while creating the namespace");
+      onError?.(err);
+    }
+  }
+
+  render() {
+    const { state, namespaceStore, ...dialogProps } = this.props;
+    const { namespace } = this;
+    const isOpen = state.get();
+
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddNamespaceDialog"
+        isOpen={isOpen}
+        onClose={this.reset}
+        close={this.close}
+      >
+        <Wizard
+          header={<h5>Create Namespace</h5>}
+          done={this.close}
+        >
+          <WizardStep
+            contentClass="flex gaps column"
+            nextLabel="Create"
+            next={this.addNamespace}
+          >
+            <Input
+              required
+              autoFocus
+              iconLeft="layers"
+              placeholder="Namespace"
+              trim
+              validators={systemName}
+              value={namespace}
+              onChange={v => this.namespace = v.toLowerCase()}
+            />
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}
+
+export const AddNamespaceDialog = withInjectables<Dependencies, AddNamespaceDialogProps>(NonInjectedAddNamespaceDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    namespaceStore: di.inject(namespaceStoreInjectable),
+    state: di.inject(addNamespaceDialogStateInjectable),
+  }),
+});
@@ -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 { action } from "mobx";
+import addNamespaceDialogStateInjectable from "./state.injectable";
+
+const openAddNamepaceDialogInjectable = getInjectable({
+  id: "open-add-namepace-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addNamespaceDialogStateInjectable);
+
+    return action(() => {
+      state.set(true);
+    });
+  },
+});
+
+export default openAddNamepaceDialogInjectable;
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { observable } from "mobx";
+
+const addNamespaceDialogStateInjectable = getInjectable({
+  id: "add-namespace-dialog-state",
+  instantiate: () => observable.box(false),
+});
+
+export default addNamespaceDialogStateInjectable;
@@ -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 { AddNamespaceDialogModel } from "./add-namespace-dialog-model";
-
-const addNamespaceDialogModelInjectable = getInjectable({
-  id: "add-namespace-dialog-model",
-  instantiate: () => new AddNamespaceDialogModel(),
-});
-
-export default addNamespaceDialogModelInjectable;
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { observable, makeObservable, action } from "mobx";
-
-export class AddNamespaceDialogModel {
-  isOpen = false;
-
-  constructor() {
-    makeObservable(this, {
-      isOpen: observable,
-      open: action,
-      close: action,
-    });
-  }
-
-  open = () => {
-    this.isOpen = true;
-  };
-
-  close = () => {
-    this.isOpen = false;
-  };
-}
@@ -1,108 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import "./add-namespace-dialog.scss";
-
-import React from "react";
-import { observable, makeObservable } from "mobx";
-import { observer } from "mobx-react";
-import type { DialogProps } from "../dialog";
-import { Dialog } from "../dialog";
-import { Wizard, WizardStep } from "../wizard";
-import type { Namespace } from "../../../common/k8s-api/endpoints";
-import { Input } from "../input";
-import { systemName } from "../input/input_validators";
-import { Notifications } from "../notifications";
-import { withInjectables } from "@ogre-tools/injectable-react";
-import namespaceStoreInjectable from "./namespace-store/namespace-store.injectable";
-import type { AddNamespaceDialogModel } from "./add-namespace-dialog-model/add-namespace-dialog-model";
-import addNamespaceDialogModelInjectable
-  from "./add-namespace-dialog-model/add-namespace-dialog-model.injectable";
-import type { NamespaceStore } from "./namespace-store/namespace.store";
-
-export interface AddNamespaceDialogProps extends DialogProps {
-  onSuccess?(ns: Namespace): void;
-  onError?(error: any): void;
-}
-
-interface Dependencies {
-  namespaceStore: NamespaceStore;
-  model: AddNamespaceDialogModel;
-}
-
-@observer
-class NonInjectedAddNamespaceDialog extends React.Component<AddNamespaceDialogProps & Dependencies> {
-  @observable namespace = "";
-
-  constructor(props: AddNamespaceDialogProps & Dependencies) {
-    super(props);
-    makeObservable(this);
-  }
-
-  reset = () => {
-    this.namespace = "";
-  };
-
-  addNamespace = async () => {
-    const { namespace } = this;
-    const { onSuccess, onError } = this.props;
-
-    try {
-      const created = await this.props.namespaceStore.create({ name: namespace });
-
-      onSuccess?.(created);
-      this.props.model.close();
-    } catch (err) {
-      Notifications.error(err);
-      onError?.(err);
-    }
-  };
-
-  render() {
-    const { model, namespaceStore, ...dialogProps } = this.props;
-    const { namespace } = this;
-    const header = <h5>Create Namespace</h5>;
-
-    return (
-      <Dialog
-        {...dialogProps}
-        className="AddNamespaceDialog"
-        isOpen={this.props.model.isOpen}
-        onOpen={this.reset}
-        close={this.props.model.close}
-      >
-        <Wizard header={header} done={this.props.model.close}>
-          <WizardStep
-            contentClass="flex gaps column"
-            nextLabel="Create"
-            next={this.addNamespace}
-          >
-            <Input
-              required autoFocus
-              iconLeft="layers"
-              placeholder="Namespace"
-              trim
-              validators={systemName}
-              value={namespace} onChange={v => this.namespace = v.toLowerCase()}
-            />
-          </WizardStep>
-        </Wizard>
-      </Dialog>
-    );
-  }
-}
-
-export const AddNamespaceDialog = withInjectables<Dependencies, AddNamespaceDialogProps>(
-  NonInjectedAddNamespaceDialog,
-
-  {
-    getProps: (di, props) => ({
-      namespaceStore: di.inject(namespaceStoreInjectable),
-      model: di.inject(addNamespaceDialogModelInjectable),
-
-      ...props,
-    }),
-  },
-);
@@ -4,4 +4,4 @@
 */

 export * from "./namespace-details";
-export * from "./add-namespace-dialog";
+export * from "./add-dialog/dialog";
@@ -9,37 +9,43 @@ import React from "react";
 import { computed, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
-import type { Disposer } from "../../utils";
-import {  cssNames } from "../../utils";
-import { getMetricsForNamespace, type IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
+import { cssNames } from "../../utils";
+import { getMetricsForNamespace, type PodMetricData, Namespace } from "../../../common/k8s-api/endpoints";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Link } from "react-router-dom";
 import { Spinner } from "../spinner";
-import { resourceQuotaStore } from "../+config-resource-quotas/resource-quotas.store";
 import { KubeObjectMeta } from "../kube-object-meta";
-import { limitRangeStore } from "../+config-limit-ranges/limit-ranges.store";
 import { ResourceMetrics } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
-import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
-import { getDetailsUrl } from "../kube-detail-params";
 import logger from "../../../common/logger";
-import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
-import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import kubeWatchApiInjectable
-  from "../../kube-watch-api/kube-watch-api.injectable";
+
+import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api";
+import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
+import type { GetActiveClusterEntity } from "../../api/catalog/entity/get-active-cluster-entity.injectable";
+import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
+import type { ResourceQuotaStore } from "../+config-resource-quotas/store";
+import type { LimitRangeStore } from "../+config-limit-ranges/store";
+import getActiveClusterEntityInjectable from "../../api/catalog/entity/get-active-cluster-entity.injectable";
+import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
+import limitRangeStoreInjectable from "../+config-limit-ranges/store.injectable";
+import resourceQuotaStoreInjectable from "../+config-resource-quotas/store.injectable";

 export interface NamespaceDetailsProps extends KubeObjectDetailsProps<Namespace> {
 }

 interface Dependencies {
-  subscribeStores: (stores: KubeObjectStore<KubeObject>[]) => Disposer;
+  subscribeStores: SubscribeStores;
+  getActiveClusterEntity: GetActiveClusterEntity;
+  getDetailsUrl: GetDetailsUrl;
+  resourceQuotaStore: ResourceQuotaStore;
+  limitRangeStore: LimitRangeStore;
 }

@observer
 class NonInjectedNamespaceDetails extends React.Component<NamespaceDetailsProps & Dependencies> {
-  @observable metrics: IPodMetrics = null;
+  @observable metrics: PodMetricData | null = null;

  constructor(props: NamespaceDetailsProps & Dependencies) {
    super(props);
@@ -53,8 +59,8 @@ class NonInjectedNamespaceDetails extends React.Component<NamespaceDetailsProps
      }),

      this.props.subscribeStores([
-        resourceQuotaStore,
-        limitRangeStore,
+        this.props.resourceQuotaStore,
+        this.props.limitRangeStore,
      ]),
    ]);
  }
@@ -62,13 +68,13 @@ class NonInjectedNamespaceDetails extends React.Component<NamespaceDetailsProps
  @computed get quotas() {
    const namespace = this.props.object.getName();

-    return resourceQuotaStore.getAllByNs(namespace);
+    return this.props.resourceQuotaStore.getAllByNs(namespace);
  }

  @computed get limitranges() {
    const namespace = this.props.object.getName();

-    return limitRangeStore.getAllByNs(namespace);
+    return this.props.limitRangeStore.getAllByNs(namespace);
  }

  loadMetrics = async () => {
@@ -76,7 +82,7 @@ class NonInjectedNamespaceDetails extends React.Component<NamespaceDetailsProps
  };

  render() {
-    const { object: namespace } = this.props;
+    const { object: namespace, getActiveClusterEntity, resourceQuotaStore, getDetailsUrl, limitRangeStore } = this.props;

    if (!namespace) {
      return null;
@@ -96,7 +102,9 @@ class NonInjectedNamespaceDetails extends React.Component<NamespaceDetailsProps
        {!isMetricHidden && (
          <ResourceMetrics
            loader={this.loadMetrics}
-            tabs={podMetricTabs} object={namespace} params={{ metrics: this.metrics }}
+            tabs={podMetricTabs}
+            object={namespace}
+            metrics={this.metrics}
          >
            <PodCharts />
          </ResourceMetrics>
@@ -109,37 +117,33 @@ class NonInjectedNamespaceDetails extends React.Component<NamespaceDetailsProps

        <DrawerItem name="Resource Quotas" className="quotas flex align-center">
          {!this.quotas && resourceQuotaStore.isLoading && <Spinner/>}
-          {this.quotas.map(quota => {
-            return (
-              <Link key={quota.getId()} to={getDetailsUrl(quota.selfLink)}>
-                {quota.getName()}
-              </Link>
-            );
-          })}
+          {this.quotas.map(quota => quota.selfLink && (
+            <Link key={quota.getId()} to={getDetailsUrl(quota.selfLink)}>
+              {quota.getName()}
+            </Link>
+          ))}
        </DrawerItem>
        <DrawerItem name="Limit Ranges">
          {!this.limitranges && limitRangeStore.isLoading && <Spinner/>}
-          {this.limitranges.map(limitrange => {
-            return (
-              <Link key={limitrange.getId()} to={getDetailsUrl(limitrange.selfLink)}>
-                {limitrange.getName()}
-              </Link>
-            );
-          })}
+          {this.limitranges.map(limitrange => limitrange.selfLink && (
+            <Link key={limitrange.getId()} to={getDetailsUrl(limitrange.selfLink)}>
+              {limitrange.getName()}
+            </Link>
+          ))}
        </DrawerItem>
      </div>
    );
  }
 }

-export const NamespaceDetails = withInjectables<Dependencies, NamespaceDetailsProps>(
-  NonInjectedNamespaceDetails,
-
-  {
-    getProps: (di, props) => ({
-      subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores,
-      ...props,
-    }),
-  },
-);
+export const NamespaceDetails = withInjectables<Dependencies, NamespaceDetailsProps>(NonInjectedNamespaceDetails, {
+  getProps: (di, props) => ({
+    ...props,
+    subscribeStores: di.inject(subscribeStoresInjectable),
+    getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
+    getDetailsUrl: di.inject(getDetailsUrlInjectable),
+    limitRangeStore: di.inject(limitRangeStoreInjectable),
+    resourceQuotaStore: di.inject(resourceQuotaStoreInjectable),
+  }),
+});

@@ -4,7 +4,7 @@
 */
 import { NamespaceSelectFilterModel } from "./namespace-select-filter-model";
 import { getInjectable } from "@ogre-tools/injectable";
-import namespaceStoreInjectable from "../namespace-store/namespace-store.injectable";
+import namespaceStoreInjectable from "../store.injectable";

 const namespaceSelectFilterModelInjectable = getInjectable({
  id: "namespace-select-filter-model",
@@ -1,102 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { observable, makeObservable, action, untracked } from "mobx";
-import type { NamespaceStore } from "../namespace-store/namespace.store";
-import type { SelectOption } from "../../select";
-import { isMac } from "../../../../common/vars";
-
-interface Dependencies {
-  namespaceStore: NamespaceStore;
-}
-
-export class NamespaceSelectFilterModel {
-  constructor(private dependencies: Dependencies) {
-    makeObservable(this, {
-      menuIsOpen: observable,
-      closeMenu: action,
-      openMenu: action,
-      reset: action,
-    });
-  }
-
-  menuIsOpen = false;
-
-  closeMenu = () => {
-    this.menuIsOpen = false;
-  };
-
-  openMenu = () => {
-    this.menuIsOpen = true;
-  };
-
-  get selectedNames() {
-    return untracked(() => this.dependencies.namespaceStore.selectedNames);
-  }
-
-  isSelected = (namespace: string | string[]) =>
-    this.dependencies.namespaceStore.hasContext(namespace);
-
-  selectSingle = (namespace: string) => {
-    this.dependencies.namespaceStore.selectSingle(namespace);
-  };
-
-  selectAll = () => {
-    this.dependencies.namespaceStore.selectAll();
-  };
-
-  onChange = ([selected]: SelectOption<string>[]) => {
-    if (!selected) {
-      // This happens when pressing "Backspace" with an empty search field. Do nothing
-      return;
-    }
-
-    const { value: namespace } = selected;
-
-    if (namespace) {
-      if (this.isMultiSelection) {
-        this.dependencies.namespaceStore.toggleSingle(namespace);
-      } else {
-        this.dependencies.namespaceStore.selectSingle(namespace);
-      }
-    } else {
-      this.dependencies.namespaceStore.selectAll();
-    }
-  };
-
-  onClick = () => {
-    if (!this.menuIsOpen) {
-      this.openMenu();
-    } else if (!this.isMultiSelection) {
-      this.closeMenu();
-    }
-  };
-
-  private isMultiSelection = false;
-
-  onKeyDown = (event: React.KeyboardEvent) => {
-    if (isSelectionKey(event)) {
-      this.isMultiSelection = true;
-    }
-  };
-
-  onKeyUp = (event: React.KeyboardEvent) => {
-    if (isSelectionKey(event)) {
-      this.isMultiSelection = false;
-    }
-  };
-
-  reset = () => {
-    this.isMultiSelection = false;
-    this.closeMenu();
-  };
-}
-
-const isSelectionKey = (event: React.KeyboardEvent): boolean  => {
-  if (isMac) {
-    return event.key === "Meta";
-  }
-
-  return event.key === "Control"; // windows or linux
-};
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { observable, action, untracked, computed, makeObservable } from "mobx";
+import type { NamespaceStore } from "../store";
+import { isMac } from "../../../../common/vars";
+import type { ActionMeta } from "react-select";
+import { Icon } from "../../icon";
+import type { SelectOption } from "../../select";
+import { autoBind } from "../../../utils";
+
+interface Dependencies {
+  readonly namespaceStore: NamespaceStore;
+}
+
+export const selectAllNamespaces = Symbol("all-namespaces-selected");
+
+export type SelectAllNamespaces = typeof selectAllNamespaces;
+export type NamespaceSelectFilterOption = SelectOption<string | SelectAllNamespaces>;
+
+export class NamespaceSelectFilterModel {
+  constructor(private readonly dependencies: Dependencies) {
+    makeObservable(this);
+    autoBind(this);
+  }
+
+  readonly options = computed((): readonly NamespaceSelectFilterOption[] => {
+    const baseOptions = this.dependencies.namespaceStore.items.map(ns => ns.getName());
+
+    baseOptions.sort((
+      (left, right) =>
+        +this.selectedNames.has(right)
+        - +this.selectedNames.has(left)
+    ));
+
+    return [
+      {
+        value: selectAllNamespaces,
+        label: "All Namespaces",
+        isSelected: false,
+      },
+      ...baseOptions.map(namespace => ({
+        value: namespace,
+        label: namespace,
+        isSelected: this.selectedNames.has(namespace),
+      })),
+    ];
+  });
+
+  formatOptionLabel({ value, isSelected }: NamespaceSelectFilterOption) {
+    if (value === selectAllNamespaces) {
+      return "All Namespaces";
+    }
+
+    return (
+      <div className="flex gaps align-center">
+        <Icon small material="layers" />
+        <span>{value}</span>
+        {isSelected && (
+          <Icon
+            small
+            material="check"
+            className="box right"
+          />
+        )}
+      </div>
+    );
+  }
+
+  readonly menuIsOpen = observable.box(false);
+
+  @action
+  closeMenu() {
+    this.menuIsOpen.set(false);
+  }
+
+  @action
+  openMenu(){
+    this.menuIsOpen.set(true);
+  }
+
+  get selectedNames() {
+    return untracked(() => this.dependencies.namespaceStore.selectedNames);
+  }
+
+  isSelected(namespace: string | string[]) {
+    return this.dependencies.namespaceStore.hasContext(namespace);
+  }
+
+  selectSingle(namespace: string) {
+    this.dependencies.namespaceStore.selectSingle(namespace);
+  }
+
+  selectAll() {
+    this.dependencies.namespaceStore.selectAll();
+  }
+
+  onChange(namespace: unknown, action: ActionMeta<NamespaceSelectFilterOption>) {
+    switch (action.action) {
+      case "clear":
+        this.dependencies.namespaceStore.selectAll();
+        break;
+      case "deselect-option":
+        if (typeof action.option === "string") {
+          this.dependencies.namespaceStore.toggleSingle(action.option);
+        }
+        break;
+      case "select-option":
+        if (action.option?.value === selectAllNamespaces) {
+          this.dependencies.namespaceStore.selectAll();
+        } else if (action.option) {
+          if (this.isMultiSelection) {
+            this.dependencies.namespaceStore.toggleSingle(action.option.value);
+          } else {
+            this.dependencies.namespaceStore.selectSingle(action.option.value);
+          }
+        }
+        break;
+    }
+  }
+
+  onClick() {
+    if (!this.menuIsOpen.get()) {
+      this.openMenu();
+    } else if (!this.isMultiSelection) {
+      this.closeMenu();
+    }
+  }
+
+  private isMultiSelection = false;
+
+  onKeyDown(event: React.KeyboardEvent) {
+    if (isSelectionKey(event)) {
+      this.isMultiSelection = true;
+    }
+  }
+
+  onKeyUp(event: React.KeyboardEvent) {
+    if (isSelectionKey(event)) {
+      this.isMultiSelection = false;
+    }
+  }
+
+  @action
+  reset() {
+    this.isMultiSelection = false;
+    this.closeMenu();
+  }
+}
+
+const isSelectionKey = (event: React.KeyboardEvent): boolean  => {
+  if (isMac) {
+    return event.key === "Meta";
+  }
+
+  return event.key === "Control"; // windows or linux
+};
@@ -7,77 +7,54 @@ import "./namespace-select-filter.scss";

 import React from "react";
 import { observer } from "mobx-react";
-import { components, type PlaceholderProps } from "react-select";
-
-import { Icon } from "../icon";
-import { NamespaceSelect } from "./namespace-select";
-import type { NamespaceStore } from "./namespace-store/namespace.store";
-
-import type { SelectOption, SelectProps } from "../select";
+import type { PlaceholderProps } from "react-select";
+import { components } from "react-select";
+import type { NamespaceStore } from "./store";
+import { Select } from "../select";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import type { NamespaceSelectFilterModel } from "./namespace-select-filter-model/namespace-select-filter-model";
+import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption, SelectAllNamespaces } from "./namespace-select-filter-model/namespace-select-filter-model";
 import namespaceSelectFilterModelInjectable from "./namespace-select-filter-model/namespace-select-filter-model.injectable";
-import namespaceStoreInjectable from "./namespace-store/namespace-store.injectable";
+import namespaceStoreInjectable from "./store.injectable";
+
+interface NamespaceSelectFilterProps {
+  id: string;
+}

 interface Dependencies {
  model: NamespaceSelectFilterModel;
 }

-const NonInjectedNamespaceSelectFilter = observer(({ model }: SelectProps & Dependencies) => (
+const NonInjectedNamespaceSelectFilter = observer(({ model, id }: Dependencies & NamespaceSelectFilterProps) => (
  <div
    onKeyUp={model.onKeyUp}
    onKeyDown={model.onKeyDown}
    onClick={model.onClick}
  >
-    <NamespaceSelect
-      id="namespace-select-filter-input"
+    <Select<string | SelectAllNamespaces, NamespaceSelectFilterOption, true>
+      id={id}
      isMulti={true}
-      menuIsOpen={model.menuIsOpen}
+      isClearable={false}
+      menuIsOpen={model.menuIsOpen.get()}
      components={{ Placeholder }}
-      showAllNamespacesOption={true}
      closeMenuOnSelect={false}
      controlShouldRenderValue={false}
-      placeholder={""}
      onChange={model.onChange}
      onBlur={model.reset}
-      formatOptionLabel={formatOptionLabelFor(model)}
-      className="NamespaceSelectFilter"
-      menuClass="NamespaceSelectFilterMenu"
-      sort={(left, right) =>
-        +model.selectedNames.has(right.value)
-        - +model.selectedNames.has(left.value)
-      }
-    />
+      formatOptionLabel={model.formatOptionLabel}
+      options={model.options.get()}
+      className="NamespaceSelect NamespaceSelectFilter"
+      menuClass="NamespaceSelectFilterMenu" />
  </div>
 ));

-
-const formatOptionLabelFor =
-  (model: NamespaceSelectFilterModel) =>
-    ({ value: namespace, label }: SelectOption) => {
-      if (namespace) {
-        const isSelected = model.isSelected(namespace);
-
-        return (
-          <div className="flex gaps align-center">
-            <Icon small material="layers" />
-            <span>{namespace}</span>
-            {isSelected && <Icon small material="check" className="box right" />}
-          </div>
-        );
-      }
-
-      return label;
-    };
-
-export const NamespaceSelectFilter = withInjectables<Dependencies, SelectProps>(NonInjectedNamespaceSelectFilter, {
+export const NamespaceSelectFilter = withInjectables<Dependencies, NamespaceSelectFilterProps>(NonInjectedNamespaceSelectFilter, {
  getProps: (di, props) => ({
    model: di.inject(namespaceSelectFilterModelInjectable),
    ...props,
  }),
 });

-export interface CustomPlaceholderProps extends PlaceholderProps {}
+export interface CustomPlaceholderProps extends PlaceholderProps<NamespaceSelectFilterOption, boolean> {}

 interface PlaceholderDependencies {
  namespaceStore: NamespaceStore;
@@ -103,8 +80,7 @@ const NonInjectedPlaceholder = observer(({ namespaceStore, ...props }: CustomPla
      {getPlaceholder()}
    </components.Placeholder>
  );
-},
-);
+});

 const Placeholder = withInjectables<PlaceholderDependencies, CustomPlaceholderProps>( NonInjectedPlaceholder, {
  getProps: (di, props) => ({
@@ -5,98 +5,82 @@

 import "./namespace-select.scss";

-import React from "react";
-import { computed, makeObservable } from "mobx";
+import React, { useEffect, useState } from "react";
+import { computed } from "mobx";
 import { observer } from "mobx-react";
-import type { SelectOption, SelectProps } from "../select";
+import type { SelectProps } from "../select";
 import { Select } from "../select";
 import { cssNames } from "../../utils";
 import { Icon } from "../icon";
-import type { NamespaceStore } from "./namespace-store/namespace.store";
+import type { NamespaceStore } from "./store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import namespaceStoreInjectable from "./namespace-store/namespace-store.injectable";
+import namespaceStoreInjectable from "./store.injectable";

-export interface NamespaceSelectProps extends SelectProps {
+export type NamespaceSelectSort = (left: string, right: string) => number;
+
+export interface NamespaceSelectProps<IsMulti extends boolean> extends Omit<SelectProps<string, { value: string; label: string }, IsMulti>, "options" | "value"> {
  showIcons?: boolean;
-  sort?: (a: SelectOption<string>, b: SelectOption<string>) => number;
-  showAllNamespacesOption?: boolean; // show "All namespaces" option on the top (default: false)
-  customizeOptions?(options: SelectOption[]): SelectOption[];
+  sort?: NamespaceSelectSort;
+  value: string | null | undefined;
 }

-const defaultProps: Partial<NamespaceSelectProps> = {
-  showIcons: true,
-};
-
 interface Dependencies {
  namespaceStore: NamespaceStore;
 }

-@observer
-class NonInjectedNamespaceSelect extends React.Component<NamespaceSelectProps & Dependencies> {
-  static defaultProps = defaultProps as object;
-
-  constructor(props: NamespaceSelectProps & Dependencies) {
-    super(props);
-    makeObservable(this);
-  }
-
-  // No subscribe here because the subscribe is in <App /> (the cluster frame root component)
-
-  @computed.struct get options(): SelectOption[] {
-    const { customizeOptions, showAllNamespacesOption, sort } = this.props;
-    let options: SelectOption[] = this.props.namespaceStore.items.map(ns => ({ value: ns.getName() }));
+function getOptions(namespaceStore: NamespaceStore, sort: NamespaceSelectSort | undefined) {
+  return computed(() => {
+    const baseOptions = namespaceStore.items.map(ns => ns.getName());

    if (sort) {
-      options.sort(sort);
+      baseOptions.sort(sort);
    }

-    if (showAllNamespacesOption) {
-      options.unshift({ label: "All Namespaces", value: "" });
-    }
-
-    if (customizeOptions) {
-      options = customizeOptions(options);
-    }
-
-    return options;
-  }
-
-  formatOptionLabel = (option: SelectOption) => {
-    const { showIcons } = this.props;
-    const { value, label } = option;
-
-    return label || (
-      <>
-        {showIcons && <Icon small material="layers"/>}
-        {value}
-      </>
-    );
-  };
-
-  render() {
-    const { className, showIcons, customizeOptions, components = {}, namespaceStore, ...selectProps } = this.props;
-
-    return (
-      <Select
-        id="namespace-input"
-        className={cssNames("NamespaceSelect", className)}
-        menuClass="NamespaceSelectMenu"
-        formatOptionLabel={this.formatOptionLabel}
-        options={this.options}
-        components={components}
-        {...selectProps}
-      />
-    );
-  }
+    return baseOptions.map(namespace => ({
+      value: namespace,
+      label: namespace,
+    }));
+  });
 }

-export const NamespaceSelect = withInjectables<Dependencies, NamespaceSelectProps>(
-  NonInjectedNamespaceSelect,
+const NonInjectedNamespaceSelect = observer(({
+  namespaceStore,
+  showIcons,
+  formatOptionLabel,
+  sort,
+  className,
+  ...selectProps
+}: Dependencies & NamespaceSelectProps<boolean>) => {
+  const [baseOptions, setBaseOptions] = useState(getOptions(namespaceStore, sort));

-  {
-    getProps: (di, props) => ({
-      namespaceStore: di.inject(namespaceStoreInjectable),
-      ...props,
-    }),
-  },
-);
+  useEffect(() => setBaseOptions(getOptions(namespaceStore, sort)), [sort]);
+
+  return (
+    <Select
+      className={cssNames("NamespaceSelect", className)}
+      menuClass="NamespaceSelectMenu"
+      formatOptionLabel={showIcons
+        ? ({ value }) => (
+          <>
+            <Icon small material="layers" />
+            {value}
+          </>
+        )
+        : undefined
+      }
+      options={baseOptions.get()}
+      {...selectProps}
+    />
+  );
+});
+
+const InjectedNamespaceSelect = withInjectables<Dependencies, NamespaceSelectProps<boolean>>(NonInjectedNamespaceSelect, {
+  getProps: (di, props) => ({
+    ...props,
+    namespaceStore: di.inject(namespaceStoreInjectable),
+  }),
+});
+
+export function NamespaceSelect<IsMulti extends boolean = false>(props: NamespaceSelectProps<IsMulti>): JSX.Element {
+  return <InjectedNamespaceSelect {...(props as never)} />;
+}
@@ -1,33 +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 { NamespaceStore } from "./namespace.store";
-import apiManagerInjectable from "../../kube-object-menu/dependencies/api-manager.injectable";
-import createStorageInjectable from "../../../utils/create-storage/create-storage.injectable";
-
-const namespaceStoreInjectable = getInjectable({
-  id: "namespace-store",
-
-  instantiate: (di) => {
-    const createStorage = di.inject(createStorageInjectable);
-
-    const storage = createStorage<string[] | undefined>(
-      "selected_namespaces",
-      undefined,
-    );
-
-    const namespaceStore = new NamespaceStore({
-      storage,
-    });
-
-    const apiManager = di.inject(apiManagerInjectable);
-
-    apiManager.registerStore(namespaceStore);
-
-    return namespaceStore;
-  },
-});
-
-export default namespaceStoreInjectable;
@@ -6,17 +6,17 @@
 import "./namespaces.scss";

 import React from "react";
-import { NamespaceStatus } from "../../../common/k8s-api/endpoints";
-import { AddNamespaceDialog } from "./add-namespace-dialog";
+import { NamespaceStatusKind } from "../../../common/k8s-api/endpoints";
+import { AddNamespaceDialog } from "./add-dialog/dialog";
 import { TabLayout } from "../layout/tab-layout-2";
 import { Badge } from "../badge";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
-import type { NamespaceStore } from "./namespace-store/namespace.store";
+import type { NamespaceStore } from "./store";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import namespaceStoreInjectable from "./namespace-store/namespace-store.injectable";
-import addNamespaceDialogModelInjectable from "./add-namespace-dialog-model/add-namespace-dialog-model.injectable";
+import namespaceStoreInjectable from "./store.injectable";
 import { KubeObjectAge } from "../kube-object/age";
+import openAddNamepaceDialogInjectable from "./add-dialog/open.injectable";

 enum columnId {
  name = "name",
@@ -58,7 +58,13 @@ export const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDia
      renderTableContents={namespace => [
        namespace.getName(),
        <KubeObjectStatusIcon key="icon" object={namespace} />,
-        namespace.getLabels().map(label => <Badge scrollable key={label} label={label}/>),
+        namespace.getLabels().map(label => (
+          <Badge
+            scrollable
+            key={label}
+            label={label}
+          />
+        )),
        <KubeObjectAge key="age" object={namespace} />,
        { title: namespace.getStatus(), className: namespace.getStatus().toLowerCase() },
      ]}
@@ -67,7 +73,7 @@ export const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDia
        onAdd: openAddNamespaceDialog,
      }}
      customizeTableRowProps={item => ({
-        disabled: item.getStatus() === NamespaceStatus.TERMINATING,
+        disabled: item.getStatus() === NamespaceStatusKind.TERMINATING,
      })}
    />
    <AddNamespaceDialog/>
@@ -78,6 +84,6 @@ export const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDia
 export const NamespacesRoute = withInjectables<Dependencies>(NonInjectedNamespacesRoute, {
  getProps: (di) => ({
    namespaceStore: di.inject(namespaceStoreInjectable),
-    openAddNamespaceDialog: di.inject(addNamespaceDialogModelInjectable).open,
+    openAddNamespaceDialog: di.inject(openAddNamepaceDialogInjectable),
  }),
 });
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { NamespaceStore } from "./store";
+import { kubeObjectStoreInjectionToken } from "../../../common/k8s-api/api-manager/manager.injectable";
+import createStorageInjectable from "../../utils/create-storage/create-storage.injectable";
+import namespaceApiInjectable from "../../../common/k8s-api/endpoints/namespace.api.injectable";
+import assert from "assert";
+import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
+
+const namespaceStoreInjectable = getInjectable({
+  id: "namespace-store",
+
+  instantiate: (di) => {
+    assert(di.inject(storesAndApisCanBeCreatedInjectable), "namespaceStore is only available in certain environments");
+
+    const createStorage = di.inject(createStorageInjectable);
+    const api = di.inject(namespaceApiInjectable);
+
+    return new NamespaceStore({
+      storage: createStorage<string[] | undefined>("selected_namespaces", undefined),
+    }, api);
+  },
+  injectionToken: kubeObjectStoreInjectionToken,
+});
+
+export default namespaceStoreInjectable;
@@ -5,21 +5,20 @@

 import type { IReactionDisposer } from "mobx";
 import { action, comparer, computed, makeObservable, reaction } from "mobx";
-import type { StorageHelper } from "../../../utils";
-import { autoBind, noop, toggle } from "../../../utils";
-import type { KubeObjectStoreLoadingParams } from "../../../../common/k8s-api/kube-object.store";
-import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
-import { Namespace, namespacesApi } from "../../../../common/k8s-api/endpoints/namespaces.api";
+import type { StorageLayer } from "../../utils";
+import { autoBind, noop, toggle } from "../../utils";
+import type { KubeObjectStoreLoadingParams } from "../../../common/k8s-api/kube-object.store";
+import { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import type { NamespaceApi } from "../../../common/k8s-api/endpoints/namespace.api";
+import { Namespace } from "../../../common/k8s-api/endpoints/namespace.api";

 interface Dependencies {
-  storage: StorageHelper<string[] | undefined>;
+  storage: StorageLayer<string[] | undefined>;
 }

-export class NamespaceStore extends KubeObjectStore<Namespace> {
-  api = namespacesApi;
-
-  constructor(private dependencies: Dependencies) {
-    super();
+export class NamespaceStore extends KubeObjectStore<Namespace, NamespaceApi> {
+  constructor(protected readonly dependencies: Dependencies, api: NamespaceApi) {
+    super(api);
    makeObservable(this);
    autoBind(this);

@@ -71,7 +70,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
   * @private
   * The current value (list of namespaces names) in the storage layer
   */
-  @computed private get selectedNamespaces(): string[] {
+  @computed private get selectedNamespaces() {
    return this.dependencies.storage.get() ?? [];
  }

@@ -85,7 +84,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
  /**
   * The list of selected namespace names (for filtering)
   */
-  @computed get contextNamespaces(): string[] {
+  @computed get contextNamespaces() {
    if (!this.selectedNamespaces.length) {
      return this.allowedNamespaces; // show all namespaces when nothing selected
    }
@@ -115,7 +114,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
     * if user has given static list of namespaces let's not start watches
     * because watch adds stuff that's not wanted or will just fail
     */
-    if (this.context?.cluster.accessibleNamespaces.length > 0) {
+    if (this.context.cluster.accessibleNamespaces.length > 0) {
      return noop;
    }

@@ -146,7 +145,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
  clearSelected(namespaces?: string | string[]) {
    if (namespaces) {
      const resettingNamespaces = [namespaces].flat();
-      const newNamespaces = this.dependencies.storage.get().filter(ns => !resettingNamespaces.includes(ns));
+      const newNamespaces = this.dependencies.storage.get()?.filter(ns => !resettingNamespaces.includes(ns));

      this.dependencies.storage.set(newNamespaces);
    } else {