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
@@ -8,7 +8,7 @@ import "./crd-details.scss";
 import React from "react";
 import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
-import { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/crd.api";
+import { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/custom-resource-definition.api";
 import { Badge } from "../badge";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
@@ -70,7 +70,11 @@ export class CRDDetails extends React.Component<CRDDetailsProps> {
            readOnly
          />
        </DrawerItem>
-        <DrawerItem name="Conditions" className="conditions" labelsOnly>
+        <DrawerItem
+          name="Conditions"
+          className="conditions"
+          labelsOnly
+        >
          {
            crd.getConditions().map(condition => {
              const { type, message, lastTransitionTime, status } = condition;
@@ -84,7 +88,10 @@ export class CRDDetails extends React.Component<CRDDetailsProps> {
                  tooltip={(
                    <>
                      <p>{message}</p>
-                      <p>Last transition time: {lastTransitionTime}</p>
+                      <p>
+                        Last transition time:
+                        {lastTransitionTime}
+                      </p>
                    </>
                  )}
                />
@@ -107,7 +114,7 @@ export class CRDDetails extends React.Component<CRDDetailsProps> {
            <TableCell>{listKind}</TableCell>
          </TableRow>
        </Table>
-        {printerColumns.length > 0 &&
+        {printerColumns.length > 0 && (
          <>
            <DrawerTitle>Additional Printer Columns</DrawerTitle>
            <Table selectable className="printer-columns box grow">
@@ -133,8 +140,8 @@ export class CRDDetails extends React.Component<CRDDetailsProps> {
              }
            </Table>
          </>
-        }
-        {validation &&
+        )}
+        {validation && (
          <>
            <DrawerTitle>Validation</DrawerTitle>
            <MonacoEditor
@@ -143,7 +150,7 @@ export class CRDDetails extends React.Component<CRDDetailsProps> {
              style={{ height: 400 }}
            />
          </>
-        }
+        )}
      </div>
    );
  }
@@ -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 createPageParamInjectable from "../../navigation/create-page-param.injectable";
+
+const crdGroupsUrlParamInjectable = getInjectable({
+  id: "crd-groups-url-param",
+  instantiate: (di) => {
+    const createPageParam = di.inject(createPageParamInjectable);
+
+    return createPageParam<string[]>({
+      name: "groups",
+      defaultValue: [],
+    });
+  },
+});
+
+export default crdGroupsUrlParamInjectable;
@@ -6,23 +6,21 @@
 import "./crd-list.scss";

 import React from "react";
-import { computed, makeObservable } from "mobx";
+import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
-import { stopPropagation } from "../../utils";
+import { iter, stopPropagation } from "../../utils";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
-import { crdStore } from "./crd.store";
-import type { SelectOption } from "../select";
+import { customResourceDefinitionStore } from "./legacy-store";
 import { Select } from "../select";
-import { createPageParam } from "../../navigation";
 import { Icon } from "../icon";
 import { KubeObjectAge } from "../kube-object/age";
 import { TabLayout } from "../layout/tab-layout-2";
-
-export const crdGroupsUrlParam = createPageParam<string[]>({
-  name: "groups",
-  defaultValue: [],
-});
+import type { PageParam } from "../../navigation";
+import type { CustomResourceDefinitionStore } from "./definition.store";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import crdGroupsUrlParamInjectable from "./crd-groups-url-param.injectable";
+import customResourceDefinitionStoreInjectable from "./definition.store.injectable";

 enum columnId {
  kind = "kind",
@@ -32,49 +30,67 @@ enum columnId {
  age = "age",
 }

+interface Dependencies {
+  crdGroupsUrlParam: PageParam<string[]>;
+  customResourceDefinitionStore: CustomResourceDefinitionStore;
+}
+
@observer
-export class CustomResourceDefinitions extends React.Component {
-  constructor(props: {}) {
+class NonInjectedCustomResourceDefinitions extends React.Component<Dependencies> {
+  private readonly selectedGroups = observable.set(this.props.crdGroupsUrlParam.get());
+
+  constructor(props: Dependencies) {
    super(props);
    makeObservable(this);
  }

-  get selectedGroups(): string[] {
-    return crdGroupsUrlParam.get();
-  }
-
  @computed get items() {
-    if (this.selectedGroups.length) {
-      return crdStore.items.filter(item => this.selectedGroups.includes(item.getGroup()));
+    if (this.selectedGroups.size) {
+      return this.props.customResourceDefinitionStore.items.filter(item => this.selectedGroups.has(item.getGroup()));
    }

-    return crdStore.items; // show all by default
+    return this.props.customResourceDefinitionStore.items; // show all by default
  }

-  toggleSelection(group: string) {
-    const groups = new Set(crdGroupsUrlParam.get());
+  @computed get groupSelectOptions() {
+    return Object.keys(this.props.customResourceDefinitionStore.groups)
+      .map(group => ({
+        value: group,
+        label: group,
+        isSelected: this.selectedGroups.has(group),
+      }));
+  }

-    if (groups.has(group)) {
-      groups.delete(group);
-    } else {
-      groups.add(group);
+  toggleSelection = (options: readonly ({ value: string })[]) => {
+    const groups = options.map(({ value }) => value);
+
+    this.selectedGroups.replace(groups);
+    this.props.crdGroupsUrlParam.set(groups);
+  };
+
+  private getPlaceholder() {
+    if (this.selectedGroups.size === 0)  {
+      return "All groups";
    }
-    crdGroupsUrlParam.set([...groups]);
+
+    const prefix = this.selectedGroups.size === 1
+      ? "Group"
+      : "Groups";
+
+    return `${prefix}: ${iter.join(this.selectedGroups.values(), ", ")}`;
  }

  render() {
-    const { items, selectedGroups } = this;
-
    return (
      <TabLayout>
        <KubeObjectListLayout
          isConfigurable
          tableId="crd"
          className="CrdList"
-          store={crdStore}
-          // Don't subscribe the `crdStore` because <Sidebar> already has and is always mounted
+          store={customResourceDefinitionStore}
+          // Don't subscribe the `customResourceDefinitionStore` because <Sidebar> already has and is always mounted
          subscribeStores={false}
-          items={items}
+          items={this.items}
          sortingCallbacks={{
            [columnId.kind]: crd => crd.getResourceKind(),
            [columnId.group]: crd => crd.getGroup(),
@@ -90,42 +106,38 @@ export class CustomResourceDefinitions extends React.Component {
            crd => -crd.getCreationTimestamp(),
          ]}
          renderHeaderTitle="Custom Resources"
-          customizeHeader={({ filters, ...headerPlaceholders }) => {
-            let placeholder = <>All groups</>;
-
-            if (selectedGroups.length == 1) placeholder = <>Group: {selectedGroups[0]}</>;
-            if (selectedGroups.length >= 2) placeholder = <>Groups: {selectedGroups.join(", ")}</>;
-
-            return {
-              // todo: move to global filters
-              filters: (
-                <>
-                  {filters}
-                  <Select
-                    id="crd-input"
-                    className="group-select"
-                    placeholder={placeholder}
-                    options={Object.keys(crdStore.groups)}
-                    onChange={({ value: group }: SelectOption) => this.toggleSelection(group)}
-                    closeMenuOnSelect={false}
-                    controlShouldRenderValue={false}
-                    formatOptionLabel={({ value: group }: SelectOption) => {
-                      const isSelected = selectedGroups.includes(group);
-
-                      return (
-                        <div className="flex gaps align-center">
-                          <Icon small material="folder"/>
-                          <span>{group}</span>
-                          {isSelected && <Icon small material="check" className="box right"/>}
-                        </div>
-                      );
-                    }}
-                  />
-                </>
-              ),
-              ...headerPlaceholders,
-            };
-          }}
+          customizeHeader={({ filters, ...headerPlaceholders }) => ({
+            // todo: move to global filters
+            filters: (
+              <>
+                {filters}
+                <Select
+                  id="crd-input"
+                  className="group-select"
+                  placeholder={this.getPlaceholder()}
+                  options={this.groupSelectOptions}
+                  onChange={this.toggleSelection}
+                  closeMenuOnSelect={false}
+                  controlShouldRenderValue={false}
+                  isMulti={true}
+                  formatOptionLabel={({ value, isSelected }) => (
+                    <div className="flex gaps align-center">
+                      <Icon small material="folder" />
+                      <span>{value}</span>
+                      {isSelected && (
+                        <Icon
+                          small
+                          material="check"
+                          className="box right"
+                        />
+                      )}
+                    </div>
+                  )}
+                />
+              </>
+            ),
+            ...headerPlaceholders,
+          })}
          renderTableHeader={[
            { title: "Resource", className: "kind", sortBy: columnId.kind, id: columnId.kind },
            { title: "Group", className: "group", sortBy: columnId.group, id: columnId.group },
@@ -134,7 +146,11 @@ export class CustomResourceDefinitions extends React.Component {
            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
          ]}
          renderTableContents={crd => [
-            <Link key="link" to={crd.getResourceUrl()} onClick={stopPropagation}>
+            <Link
+              key="link"
+              to={crd.getResourceUrl()}
+              onClick={stopPropagation}
+            >
              {crd.getResourceKind()}
            </Link>,
            crd.getGroup(),
@@ -147,3 +163,11 @@ export class CustomResourceDefinitions extends React.Component {
    );
  }
 }
+
+export const CustomResourceDefinitions = withInjectables<Dependencies>(NonInjectedCustomResourceDefinitions, {
+  getProps: (di, props) => ({
+    ...props,
+    crdGroupsUrlParam: di.inject(crdGroupsUrlParamInjectable),
+    customResourceDefinitionStore: di.inject(customResourceDefinitionStoreInjectable),
+  }),
+});
@@ -13,10 +13,10 @@ import { DrawerItem } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { KubeObjectMeta } from "../kube-object-meta";
 import { Input } from "../input";
-import type { AdditionalPrinterColumnsV1 } from "../../../common/k8s-api/endpoints/crd.api";
-import { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/crd.api";
+import type { AdditionalPrinterColumnsV1 } from "../../../common/k8s-api/endpoints/custom-resource-definition.api";
+import { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/custom-resource-definition.api";
 import { convertKubectlJsonPathToNodeJsonPath } from "../../utils/jsonPath";
-import type { KubeObjectMetadata, KubeObjectStatus } from "../../../common/k8s-api/kube-object";
+import type { KubeObjectStatus } from "../../../common/k8s-api/kube-object";
 import { KubeObject } from "../../../common/k8s-api/kube-object";
 import logger from "../../../common/logger";
 import { JSONPath } from "@astronautlabs/jsonpath";
@@ -57,25 +57,34 @@ function convertSpecValue(value: any): any {
 export class CustomResourceDetails extends React.Component<CustomResourceDetailsProps> {
  renderAdditionalColumns(resource: KubeObject, columns: AdditionalPrinterColumnsV1[]) {
    return columns.map(({ name, jsonPath }) => (
-      <DrawerItem key={name} name={name} renderBoolean>
+      <DrawerItem
+        key={name}
+        name={name}
+        renderBoolean
+      >
        {convertSpecValue(JSONPath.query(resource, convertKubectlJsonPathToNodeJsonPath(jsonPath)))}
      </DrawerItem>
    ));
  }

-  renderStatus(customResource: KubeObject<KubeObjectMetadata, KubeObjectStatus, any>, columns: AdditionalPrinterColumnsV1[]) {
+  renderStatus(customResource: KubeObject<KubeObjectStatus, unknown>, columns: AdditionalPrinterColumnsV1[]) {
    const showStatus = !columns.find(column => column.name == "Status") && Array.isArray(customResource.status?.conditions);

    if (!showStatus) {
      return null;
    }

-    const conditions = customResource.status.conditions
-      .filter(({ type, reason }) => type || reason)
-      .map(({ type, reason, message, status }) => ({ kind: type || reason, message, status }))
+    const conditions = customResource.status?.conditions
+      ?.filter(({ type, reason }) => type || reason)
+      .map(({ type, reason, message, status }) => ({
+        kind: type || reason || "<unknown>",
+        message,
+        status,
+      }))
      .map(({ kind, message, status }, index) => (
        <Badge
-          key={kind + index} label={kind}
+          key={kind + index}
+          label={kind}
          disabled={status === "False"}
          className={kind.toLowerCase()}
          tooltip={message}
@@ -83,7 +92,11 @@ export class CustomResourceDetails extends React.Component<CustomResourceDetails
      ));

    return (
-      <DrawerItem name="Status" className="status" labelsOnly>
+      <DrawerItem
+        name="Status"
+        className="status"
+        labelsOnly
+      >
        {conditions}
      </DrawerItem>
    );
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type { KubeApi } from "../../../common/k8s-api/kube-api";
-import { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
-import type { KubeObject } from "../../../common/k8s-api/kube-object";
-
-export class CRDResourceStore<K extends KubeObject> extends KubeObjectStore<K> {
-  constructor(api: KubeApi<K>) {
-    super(api);
-  }
-}
@@ -10,13 +10,15 @@ import { observer } from "mobx-react";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import type { IComputedValue } from "mobx";
 import { computed, makeObservable } from "mobx";
-import { crdStore } from "./crd.store";
-import { apiManager } from "../../../common/k8s-api/api-manager";
+import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import { safeJSONPathValue } from "../../utils/jsonPath";
 import { TabLayout } from "../layout/tab-layout-2";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import customResourcesRouteParametersInjectable from "./custom-resources-route-parameters.injectable";
 import { KubeObjectAge } from "../kube-object/age";
+import type { CustomResourceDefinitionStore } from "./definition.store";
+import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
+import customResourceDefinitionStoreInjectable from "./definition.store.injectable";

 enum columnId {
  name = "name",
@@ -27,27 +29,29 @@ enum columnId {
 interface Dependencies {
  group: IComputedValue<string>;
  name: IComputedValue<string>;
+  apiManager: ApiManager;
+  customResourceDefinitionStore: CustomResourceDefinitionStore;
 }

@observer
-class NonInjectedCrdResources extends React.Component<Dependencies> {
+class NonInjectedCustomResources extends React.Component<Dependencies> {
  constructor(props: Dependencies) {
    super(props);
    makeObservable(this);
  }

  @computed get crd() {
-    return crdStore.getByGroup(this.props.group.get(), this.props.name.get());
+    return this.props.customResourceDefinitionStore.getByGroup(this.props.group.get(), this.props.name.get());
  }

  @computed get store() {
-    return apiManager.getStore(this.crd?.getResourceApiBase());
+    return this.props.apiManager.getStore(this.crd?.getResourceApiBase());
  }

  render() {
    const { crd, store } = this;

-    if (!crd) {
+    if (!crd || !store) {
      return null;
    }

@@ -85,7 +89,9 @@ class NonInjectedCrdResources extends React.Component<Dependencies> {
          })}
          renderTableHeader={[
            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
-            isNamespaced && { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            isNamespaced
+              ? { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }
+              : undefined,
            ...extraColumns.map(({ name }) => ({
              title: name,
              className: name.toLowerCase(),
@@ -102,9 +108,13 @@ class NonInjectedCrdResources extends React.Component<Dependencies> {
          ]}
          failedToLoadMessage={(
            <>
-              <p>Failed to load {crd.getPluralName()}</p>
+              <p>
+                {`Failed to load ${crd.getPluralName()}`}
+              </p>
              {!version.served && (
-                <p>Prefered version ({crd.getGroup()}/{version.name}) is not served</p>
+                <p>
+                  {`Prefered version (${crd.getGroup()}/${version.name}) is not served`}
+                </p>
              )}
            </>
          )}
@@ -114,18 +124,11 @@ class NonInjectedCrdResources extends React.Component<Dependencies> {
  }
 }

-export const CrdResources = withInjectables<Dependencies>(
-  NonInjectedCrdResources,
-
-  {
-    getProps: (di) => {
-      const routeParameters = di.inject(customResourcesRouteParametersInjectable);
-
-      return {
-        group: routeParameters.group,
-        name: routeParameters.name,
-      };
-    },
-  },
-);
+export const CustomResources = withInjectables<Dependencies>(NonInjectedCustomResources, {
+  getProps: (di) => ({
+    ...di.inject(customResourcesRouteParametersInjectable),
+    apiManager: di.inject(apiManagerInjectable),
+    customResourceDefinitionStore: di.inject(customResourceDefinitionStoreInjectable),
+  }),
+});

@@ -1,77 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { computed, reaction, makeObservable } from "mobx";
-import { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
-import { autoBind } from "../../utils";
-import type { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/crd.api";
-import { crdApi } from "../../../common/k8s-api/endpoints/crd.api";
-import { apiManager } from "../../../common/k8s-api/api-manager";
-import { KubeApi } from "../../../common/k8s-api/kube-api";
-import { CRDResourceStore } from "./crd-resource.store";
-import { KubeObject } from "../../../common/k8s-api/kube-object";
-
-function initStore(crd: CustomResourceDefinition) {
-  const objectConstructor = class extends KubeObject {
-    static readonly kind = crd.getResourceKind();
-    static readonly namespaced = crd.isNamespaced();
-    static readonly apiBase = crd.getResourceApiBase();
-  };
-
-  const api = apiManager.getApi(objectConstructor.apiBase)
-    ?? new KubeApi({ objectConstructor });
-
-  if (!apiManager.getStore(api)) {
-    apiManager.registerStore(new CRDResourceStore(api));
-  }
-}
-
-export class CRDStore extends KubeObjectStore<CustomResourceDefinition> {
-  api = crdApi;
-
-  constructor() {
-    super();
-
-    makeObservable(this);
-    autoBind(this);
-
-    // auto-init stores for crd-s
-    reaction(() => this.getItems(), items => items.forEach(initStore));
-  }
-
-  protected sortItems(items: CustomResourceDefinition[]) {
-    return super.sortItems(items, [
-      crd => crd.getGroup(),
-      crd => crd.getName(),
-    ]);
-  }
-
-  @computed get groups() {
-    const groups: Record<string, CustomResourceDefinition[]> = {};
-
-    for (const crd of this.items) {
-      (groups[crd.getGroup()] ??= []).push(crd);
-    }
-
-    return groups;
-  }
-
-  getByGroup(group: string, pluralName: string) {
-    return this.groups[group]?.find(crd => crd.getPluralName() === pluralName);
-  }
-
-  getByObject(obj: KubeObject) {
-    if (!obj) return null;
-    const { kind, apiVersion } = obj;
-
-    return this.items.find(crd => (
-      kind === crd.getResourceKind() && apiVersion === `${crd.getGroup()}/${crd.getVersion()}`
-    ));
-  }
-}
-
-export const crdStore = new CRDStore();
-
-apiManager.registerStore(crdStore);
@@ -3,17 +3,12 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { noop, some } from "lodash/fp";
+import { noop } from "lodash/fp";
 import { computed } from "mobx";
-
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
+import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
 import { Icon } from "../icon";
 import React from "react";
-
 import crdListRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable";
 import sidebarItemsForDefinitionGroupsInjectable from "./sidebar-items-for-definition-groups.injectable";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
@@ -26,10 +21,7 @@ const customResourceSidebarItemsInjectable = getInjectable({
    const navigateToCrdList = di.inject(navigateToCrdListInjectable);
    const crdListRoute = di.inject(crdListRouteInjectable);
    const crdListRouteIsActive = di.inject(routeIsActiveInjectable, crdListRoute);
-
-    const definitionGroupSidebarItems = di.inject(
-      sidebarItemsForDefinitionGroupsInjectable,
-    );
+    const definitionGroupSidebarItems = di.inject(sidebarItemsForDefinitionGroupsInjectable);

    return computed((): SidebarItemRegistration[] => {
      const definitionsItem = {
@@ -42,12 +34,10 @@ const customResourceSidebarItemsInjectable = getInjectable({
        orderNumber: 10,
      };

-      const definitionGroupItems = definitionGroupSidebarItems.get();
-
-      const childrenAndGrandChildren = [
+      const childrenAndGrandChildren = computed(() => [
        definitionsItem,
-        ...definitionGroupItems,
-      ];
+        ...definitionGroupSidebarItems.get(),
+      ]);

      const parentItem: SidebarItemRegistration = {
        id: "custom-resources",
@@ -55,11 +45,11 @@ const customResourceSidebarItemsInjectable = getInjectable({
        title: "Custom Resources",
        getIcon: () => <Icon material="extension" />,
        onClick: noop,
-        isVisible: computed(() => some(item => item.isVisible.get(), childrenAndGrandChildren)),
+        isVisible: computed(() => childrenAndGrandChildren.get().some(item => item.isVisible?.get())),
        orderNumber: 110,
      };

-      return [parentItem, definitionsItem, ...definitionGroupItems];
+      return [parentItem, definitionsItem, ...definitionGroupSidebarItems.get()];
    });
  },

@@ -3,7 +3,7 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { CrdResources } from "./crd-resources";
+import { CustomResources } from "./crd-resources";
 import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable";
 import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";

@@ -12,7 +12,7 @@ const customResourcesRouteComponentInjectable = getInjectable({

  instantiate: (di) => ({
    route: di.inject(customResourcesRouteInjectable),
-    Component: CrdResources,
+    Component: CustomResources,
  }),

  injectionToken: routeSpecificComponentInjectionToken,
@@ -5,23 +5,26 @@

 import { getInjectable } from "@ogre-tools/injectable";
 import { computed } from "mobx";
-import { crdStore } from "./crd.store";
+import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
 import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
-import currentlyInClusterFrameInjectable from "../../routes/currently-in-cluster-frame.injectable";
+import customResourceDefinitionStoreInjectable from "./definition.store.injectable";

 const customResourceDefinitionsInjectable = getInjectable({
  id: "custom-resource-definitions",

  instantiate: (di) => {
-    const currentlyInClusterFrame = di.inject(currentlyInClusterFrameInjectable);
+    const createStoresAndApis = di.inject(storesAndApisCanBeCreatedInjectable);

-    if (currentlyInClusterFrame) {
-      const subscribeStores = di.inject(subscribeStoresInjectable);
-
-      subscribeStores([crdStore]);
+    if (!createStoresAndApis) {
+      return computed(() => []);
    }

-    return computed(() => [...crdStore.items]);
+    const store = di.inject(customResourceDefinitionStoreInjectable);
+    const subscribeStores = di.inject(subscribeStoresInjectable);
+
+    subscribeStores([store]);
+
+    return computed(() => [...store.items]);
  },
 });

@@ -0,0 +1,27 @@
+/**
+ * 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 assert from "assert";
+import autoRegistrationEmitterInjectable from "../../../common/k8s-api/api-manager/auto-registration-emitter.injectable";
+import { kubeObjectStoreInjectionToken } from "../../../common/k8s-api/api-manager/manager.injectable";
+import customResourceDefinitionApiInjectable from "../../../common/k8s-api/endpoints/custom-resource-definition.api.injectable";
+import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
+import { CustomResourceDefinitionStore } from "./definition.store";
+
+const customResourceDefinitionStoreInjectable = getInjectable({
+  id: "custom-resource-definition-store",
+  instantiate: (di) => {
+    assert(di.inject(storesAndApisCanBeCreatedInjectable), "customResourceDefinitionStore is only available in certain environments");
+
+    const api = di.inject(customResourceDefinitionApiInjectable);
+
+    return new CustomResourceDefinitionStore({
+      autoRegistration: di.inject(autoRegistrationEmitterInjectable),
+    }, api);
+  },
+  injectionToken: kubeObjectStoreInjectionToken,
+});
+
+export default customResourceDefinitionStoreInjectable;
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { computed, reaction, makeObservable } from "mobx";
+import type { KubeObjectStoreOptions } from "../../../common/k8s-api/kube-object.store";
+import { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import { autoBind } from "../../utils";
+import type { CustomResourceDefinition, CustomResourceDefinitionApi } from "../../../common/k8s-api/endpoints/custom-resource-definition.api";
+import type { KubeObject } from "../../../common/k8s-api/kube-object";
+import type TypedEventEmitter from "typed-emitter";
+import type { LegacyAutoRegistration } from "../../../common/k8s-api/api-manager/auto-registration-emitter.injectable";
+
+export interface CustomResourceDefinitionStoreDependencies {
+  readonly autoRegistration: TypedEventEmitter<LegacyAutoRegistration>;
+}
+
+export class CustomResourceDefinitionStore extends KubeObjectStore<CustomResourceDefinition, CustomResourceDefinitionApi> {
+  constructor(
+    protected readonly dependencies: CustomResourceDefinitionStoreDependencies,
+    api: CustomResourceDefinitionApi,
+    opts?: KubeObjectStoreOptions,
+  ) {
+    super(api, opts);
+    makeObservable(this);
+    autoBind(this);
+
+    reaction(
+      () => this.getItems(),
+      crds => {
+        for (const crd of crds) {
+          this.dependencies.autoRegistration.emit("customResourceDefinition", crd);
+        }
+      },
+    );
+  }
+
+  protected sortItems(items: CustomResourceDefinition[]) {
+    return super.sortItems(items, [
+      crd => crd.getGroup(),
+      crd => crd.getName(),
+    ]);
+  }
+
+  @computed get groups() {
+    const groups: Record<string, CustomResourceDefinition[]> = {};
+
+    for (const crd of this.items) {
+      (groups[crd.getGroup()] ??= []).push(crd);
+    }
+
+    return groups;
+  }
+
+  getByGroup(group: string, pluralName: string) {
+    return this.groups[group]?.find(crd => crd.getPluralName() === pluralName);
+  }
+
+  getByObject(obj: KubeObject) {
+    if (!obj) return null;
+    const { kind, apiVersion } = obj;
+
+    return this.items.find(crd => (
+      kind === crd.getResourceKind() && apiVersion === `${crd.getGroup()}/${crd.getVersion()}`
+    ));
+  }
+}
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
+import customResourceDefinitionStoreInjectable from "./definition.store.injectable";
+
+/**
+ * @deprecated use `di.inject(customResourceDefinitionStoreInjectable)` instead
+ */
+export const customResourceDefinitionStore = asLegacyGlobalForExtensionApi(customResourceDefinitionStoreInjectable);