Technical requirements for behavioural unit tests (#5084)

* Implement a lot of technical requirements for behavioural unit tests Note: the crux of this was to make routing env-agnostic, and not based on URLs as magic strings, but instead something type-enforced. Note: extension-based routes comply to same exact interface by "late-registering" their routes when installed. Routes are just injectables. Note: another chunk of global shared state is no more. Note: a lot of explicit side effects have been cornered to injectables. Note: a lot of stuff has become reactive as part if this. Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make a directory commonly available Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Require id for <Select /> to prevent non-deterministic renders This was caused by global state in a 3rd party lib: "react-select". Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Specify id for all <Select /> to satisfy previous commit Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Prevent explicit side effect in component by using existing dependency instead Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Extract instantiation of "conf" as injectables for causing side effects Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Introduce a legacy-helper to make gradual refactoring of inheritors of Singleton easier Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Make legacy unit tests for hotbar green and more simple by using the new legacy helper Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Temporarily kludge all unit tests green with a disclaimer about allowing side-effects Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove kludge in previous commit by explicitly permitting specific side effects where old unit tests require it Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Prevent old unit test with side effects from accessing file system Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Migrate to actual typing for di.permitSideEffects Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Prevent unit tests from failing because of non-standard method of HTML-element not present in js-dom Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Adapt integration tests to recent changes Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Fix code style Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Fix artifact from bad rebase Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Add a deprecation from a review comment Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove change that is not required Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove redundant comment Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix code style Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove redundant file Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix bad merge Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Improve variable name Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Tweak logger interface to be more descriptive Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make injecting legacy singleton always provide new instance Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove conditional typing when not needed Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Improve naming of variable Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove unnecessary code style changes Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove flag for causing side effects from too broad scope Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Override side-effects in unit test using injectable instead of monkey patching Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Flag some side-effects and add general overrides Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Fix unit tests in CI by removing explicit side-effect Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove explicit side-effect from getting default shell Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Introduce abstraction for getting absolute paths Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Switch to using abstraction for getting absolute path to control explicit side effect Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Introduce abstraction for joining paths Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Switch to using abstraction for joining paths to control explicit side effect Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix fake implementation for join paths Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix test after removing explicit side effect Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove explicit side effects from kubeconfig-syncs Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix arguments after removing explicit side effect Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make registrators not async for not being needed anymore Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make generalCatalogEntities non-observable, as there is no requirement Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove redundant code Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Simplify logic for registering general catalog entity sources Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Add TODO Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Replace function for getting application menu items with reactive solution Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix typo in interface name Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove global shared state usages of hot bar store Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove redundant enum Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>
2025-05-20 05:10:56 +00:00 · 2022-03-31 16:57:05 +03:00
1 parent ab2cd27a27
commit a277cfcf02
@@ -12,6 +12,7 @@ import { CatalogCategory } from "../../../api/catalog-entity";
 import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
 import type { AdditionalCategoryColumnRegistration, CategoryColumnRegistration } from "../custom-category-columns";
 import getCategoryColumnsInjectable, { CategoryColumns, GetCategoryColumnsParams } from "../get-category-columns.injectable";
+import hotbarStoreInjectable from "../../../../common/hotbar-store.injectable";

 class TestCategory extends CatalogCategory {
  apiVersion = "catalog.k8slens.dev/v1alpha1";
@@ -39,6 +40,8 @@ describe("Custom Category Columns", () => {

  beforeEach(() => {
    di = getDiForUnitTesting();
+
+    di.override(hotbarStoreInjectable, () => ({}));
  });

  describe("without extensions", () => {
@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export const browseCatalogTab = "browse";
@@ -3,8 +3,8 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { browseCatalogTab } from "../../../../common/routes";
 import createStorageInjectable from "../../../utils/create-storage/create-storage.injectable";
+import { browseCatalogTab } from "../catalog-browse-tab";

 const catalogPreviousActiveTabStorageInjectable = getInjectable({
  id: "catalog-previous-active-tab-storage",
@@ -0,0 +1,21 @@
+/**
+ * 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 { Catalog } from "./catalog";
+import catalogRouteInjectable from "../../../common/front-end-routing/routes/catalog/catalog-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
+
+const catalogRouteComponentInjectable = getInjectable({
+  id: "catalog-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(catalogRouteInjectable),
+    Component: Catalog,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default catalogRouteComponentInjectable;
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import routePathParametersInjectable from "../../routes/route-path-parameters.injectable";
+import catalogRouteInjectable from "../../../common/front-end-routing/routes/catalog/catalog-route.injectable";
+
+const catalogRouteParametersInjectable = getInjectable({
+  id: "catalog-route-parameters",
+
+  instantiate: (di) => {
+    const route = di.inject(catalogRouteInjectable);
+    const pathParameters = di.inject(routePathParametersInjectable, route);
+
+    return {
+      group: computed(() => pathParameters.get().group),
+      kind: computed(() => pathParameters.get().kind),
+    };
+  },
+});
+
+export default catalogRouteParametersInjectable;
@@ -7,7 +7,6 @@ import React from "react";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Catalog } from "./catalog";
-import { createMemoryHistory } from "history";
 import { mockWindow } from "../../../../__mocks__/windowMock";
 import { CatalogCategoryRegistry, CatalogEntity, CatalogEntityActionContext, CatalogEntityData } from "../../../common/catalog";
 import { CatalogEntityRegistry } from "../../api/catalog-entity-registry";
@@ -16,15 +15,15 @@ import type { CatalogEntityStore } from "./catalog-entity-store/catalog-entity.s
 import { getDiForUnitTesting } from "../../getDiForUnitTesting";
 import type { DiContainer } from "@ogre-tools/injectable";
 import catalogEntityStoreInjectable from "./catalog-entity-store/catalog-entity-store.injectable";
-import catalogEntityRegistryInjectable
-  from "../../api/catalog-entity-registry/catalog-entity-registry.injectable";
+import catalogEntityRegistryInjectable from "../../api/catalog-entity-registry/catalog-entity-registry.injectable";
 import type { DiRender } from "../test-utils/renderFor";
 import { renderFor } from "../test-utils/renderFor";
 import { ThemeStore } from "../../theme.store";
 import { UserStore } from "../../../common/user-store";
 import mockFs from "mock-fs";
-import directoryForUserDataInjectable
-  from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
+import directoryForUserDataInjectable from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
+import getConfigurationFileModelInjectable from "../../../common/get-configuration-file-model/get-configuration-file-model.injectable";
+import appVersionInjectable from "../../../common/get-configuration-file-model/app-version/app-version.injectable";
 import type { AppEvent } from "../../../common/app-event-bus/event-bus";
 import appEventBusInjectable from "../../../common/app-event-bus/app-event-bus.injectable";

@@ -66,25 +65,6 @@ class MockCatalogEntity extends CatalogEntity {
 }

 describe("<Catalog />", () => {
-  const history = createMemoryHistory();
-  const mockLocation = {
-    pathname: "",
-    search: "",
-    state: "",
-    hash: "",
-  };
-  const mockMatch = {
-    params: {
-      // will be used to match activeCategory
-      // need to be the same as property values in kubernetesClusterCategory
-      group: "entity.k8slens.dev",
-      kind: "KubernetesCluster",
-    },
-    isExact: true,
-    path: "",
-    url: "",
-  };
-
  function createMockCatalogEntity(onRun: (context: CatalogEntityActionContext) => void | Promise<void>) {
    return new MockCatalogEntity({
      metadata: {
@@ -112,6 +92,9 @@ describe("<Catalog />", () => {

    di.override(directoryForUserDataInjectable, () => "some-directory-for-user-data");

+    di.permitSideEffects(getConfigurationFileModelInjectable);
+    di.permitSideEffects(appVersionInjectable);
+
    await di.runSetups();

    mockFs();
@@ -169,11 +152,7 @@ describe("<Catalog />", () => {
    );

    render(
-      <Catalog
-        history={history}
-        location={mockLocation}
-        match={mockMatch}
-      />,
+      <Catalog />,
    );

    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
@@ -198,13 +177,7 @@ describe("<Catalog />", () => {
      },
    );

-    render(
-      <Catalog
-        history={history}
-        location={mockLocation}
-        match={mockMatch}
-      />,
-    );
+    render(<Catalog />);

    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
  });
@@ -229,13 +202,7 @@ describe("<Catalog />", () => {
      },
    );

-    render(
-      <Catalog
-        history={history}
-        location={mockLocation}
-        match={mockMatch}
-      />,
-    );
+    render(<Catalog />);

    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
  });
@@ -255,13 +222,7 @@ describe("<Catalog />", () => {
      },
    );

-    render(
-      <Catalog
-        history={history}
-        location={mockLocation}
-        match={mockMatch}
-      />,
-    );
+    render(<Catalog />);

    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
  });
@@ -288,13 +249,7 @@ describe("<Catalog />", () => {
      },
    );

-    render(
-      <Catalog
-        history={history}
-        location={mockLocation}
-        match={mockMatch}
-      />,
-    );
+    render(<Catalog />);

    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
  });
@@ -319,24 +274,14 @@ describe("<Catalog />", () => {
      },
    );

-    render(
-      <Catalog
-        history={history}
-        location={mockLocation}
-        match={mockMatch}
-      />,
-    );
+    render(<Catalog />);

    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
  });

  it("emits catalog open AppEvent", () => {
    render(
-      <Catalog
-        history={history}
-        location={mockLocation}
-        match={mockMatch}
-      />,
+      <Catalog />,
    );

    expect(emitEvent).toHaveBeenCalledWith( {
@@ -347,11 +292,7 @@ describe("<Catalog />", () => {

  it("emits catalog change AppEvent when changing the category", () => {
    render(
-      <Catalog
-        history={history}
-        location={mockLocation}
-        match={mockMatch}
-      />,
+      <Catalog />,
    );

    userEvent.click(screen.getByText("Web Links"));
@@ -8,21 +8,18 @@ import styles from "./catalog.module.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ItemListLayout } from "../item-object-list";
-import { action, IComputedValue, makeObservable, observable, reaction, runInAction, when } from "mobx";
+import { action, computed, IComputedValue, makeObservable, observable, reaction, runInAction, when } from "mobx";
 import type { CatalogEntityStore } from "./catalog-entity-store/catalog-entity.store";
 import { navigate } from "../../navigation";
 import { MenuItem, MenuActions } from "../menu";
 import type { CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
-import { HotbarStore } from "../../../common/hotbar-store";
 import { ConfirmDialog } from "../confirm-dialog";
 import { catalogCategoryRegistry, CatalogEntity } from "../../../common/catalog";
 import { CatalogAddButton } from "./catalog-add-button";
-import type { RouteComponentProps } from "react-router";
 import { Notifications } from "../notifications";
 import { MainLayout } from "../layout/main-layout";
 import { prevDefault } from "../../utils";
 import { CatalogEntityDetails } from "./catalog-entity-details";
-import { browseCatalogTab, catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
 import { RenderDelay } from "../render-delay/render-delay";
 import { Icon } from "../icon";
@@ -36,10 +33,13 @@ import getCategoryColumnsInjectable from "./get-category-columns.injectable";
 import type { RegisteredCustomCategoryViewDecl } from "./custom-views.injectable";
 import customCategoryViewsInjectable from "./custom-views.injectable";
 import type { CustomCategoryViewComponents } from "./custom-views";
+import navigateToCatalogInjectable, { NavigateToCatalog } from "../../../common/front-end-routing/routes/catalog/navigate-to-catalog.injectable";
+import catalogRouteParametersInjectable from "./catalog-route-parameters.injectable";
+import { browseCatalogTab } from "./catalog-browse-tab";
 import type { AppEvent } from "../../../common/app-event-bus/event-bus";
 import appEventBusInjectable from "../../../common/app-event-bus/app-event-bus.injectable";
-
-export interface CatalogProps extends RouteComponentProps<CatalogViewRouteParam> {}
+import hotbarStoreInjectable from "../../../common/hotbar-store.injectable";
+import type { HotbarStore } from "../../../common/hotbar-store";

 interface Dependencies {
  catalogPreviousActiveTabStorage: { set: (value: string ) => void };
@@ -47,23 +47,35 @@ interface Dependencies {
  getCategoryColumns: (params: GetCategoryColumnsParams) => CategoryColumns;
  customCategoryViews: IComputedValue<Map<string, Map<string, RegisteredCustomCategoryViewDecl>>>;
  emitEvent: (event: AppEvent) => void;
+
+  routeParameters: {
+    group: IComputedValue<string>;
+    kind: IComputedValue<string>;
+  };
+
+  navigateToCatalog: NavigateToCatalog;
+  hotbarStore: HotbarStore;
 }

@observer
-class NonInjectedCatalog extends React.Component<CatalogProps & Dependencies> {
+class NonInjectedCatalog extends React.Component<Dependencies> {
  @observable private contextMenu: CatalogEntityContextMenuContext;
  @observable activeTab?: string;

-  constructor(props: CatalogProps & Dependencies) {
+  constructor(props: Dependencies) {
    super(props);
    makeObservable(this);
  }

+  @computed
  get routeActiveTab(): string {
-    const { group, kind } = this.props.match.params ?? {};
+    const { group, kind } = this.props.routeParameters;

-    if (group && kind) {
-      return `${group}/${kind}`;
+    const dereferencedGroup = group.get();
+    const dereferencedKind = kind.get();
+
+    if (dereferencedGroup && dereferencedKind) {
+      return `${dereferencedGroup}/${dereferencedKind}`;
    }

    return browseCatalogTab;
@@ -115,11 +127,11 @@ class NonInjectedCatalog extends React.Component<CatalogProps & Dependencies> {
  }

  addToHotbar(entity: CatalogEntity): void {
-    HotbarStore.getInstance().addToHotbar(entity);
+    this.props.hotbarStore.addToHotbar(entity);
  }

  removeFromHotbar(entity: CatalogEntity): void {
-    HotbarStore.getInstance().removeFromHotbar(entity.getId());
+    this.props.hotbarStore.removeFromHotbar(entity.getId());
  }

  onDetails = (entity: CatalogEntity) => {
@@ -163,9 +175,10 @@ class NonInjectedCatalog extends React.Component<CatalogProps & Dependencies> {
    });

    if (activeCategory) {
-      navigate(catalogURL({ params: { group: activeCategory.spec.group, kind: activeCategory.spec.names.kind }}));
+
+      this.props.navigateToCatalog({ group: activeCategory.spec.group, kind: activeCategory.spec.names.kind });
    } else {
-      navigate(catalogURL({ params: { group: browseCatalogTab }}));
+      this.props.navigateToCatalog({ group: browseCatalogTab });
    }
  });

@@ -205,7 +218,7 @@ class NonInjectedCatalog extends React.Component<CatalogProps & Dependencies> {
  };

  renderName(entity: CatalogEntity) {
-    const isItemInHotbar = HotbarStore.getInstance().isAddedToActive(entity);
+    const isItemInHotbar = this.props.hotbarStore.isAddedToActive(entity);

    return (
      <>
@@ -321,13 +334,15 @@ class NonInjectedCatalog extends React.Component<CatalogProps & Dependencies> {
  }
 }

-export const Catalog = withInjectables<Dependencies, CatalogProps>( NonInjectedCatalog, {
-  getProps: (di, props) => ({
+export const Catalog = withInjectables<Dependencies>( NonInjectedCatalog, {
+  getProps: (di) => ({
    catalogEntityStore: di.inject(catalogEntityStoreInjectable),
    catalogPreviousActiveTabStorage: di.inject(catalogPreviousActiveTabStorageInjectable),
    getCategoryColumns: di.inject(getCategoryColumnsInjectable),
    customCategoryViews: di.inject(customCategoryViewsInjectable),
+    routeParameters: di.inject(catalogRouteParametersInjectable),
+    navigateToCatalog: di.inject(navigateToCatalogInjectable),
    emitEvent: di.inject(appEventBusInjectable).emit,
-    ...props,
+    hotbarStore: di.inject(hotbarStoreInjectable),
  }),
 });
@@ -9,10 +9,12 @@ import type { CatalogCategory, CatalogEntity } from "../../../common/catalog";
 import type { ItemListLayoutProps } from "../item-object-list";
 import type { RegisteredAdditionalCategoryColumn } from "./custom-category-columns";
 import categoryColumnsInjectable from "./custom-category-columns.injectable";
-import { defaultCategoryColumns, browseAllColumns, nameCategoryColumn } from "./internal-category-columns";
+import { defaultCategoryColumns, browseAllColumns } from "./internal-category-columns";
+import nameCategoryColumnInjectable from "./name-category-column.injectable";

 interface Dependencies {
  extensionColumns: IComputedValue<Map<string, Map<string, RegisteredAdditionalCategoryColumn[]>>>;
+  nameCategoryColumn: RegisteredAdditionalCategoryColumn;
 }

 export interface GetCategoryColumnsParams {
@@ -21,7 +23,7 @@ export interface GetCategoryColumnsParams {

 export type CategoryColumns = Required<Pick<ItemListLayoutProps<CatalogEntity>, "sortingCallbacks" | "searchFilters" | "renderTableContents" | "renderTableHeader">>;

-function getSpecificCategoryColumns(activeCategory: CatalogCategory, extensionColumns: IComputedValue<Map<string, Map<string, RegisteredAdditionalCategoryColumn[]>>>): RegisteredAdditionalCategoryColumn[] {
+function getSpecificCategoryColumns(activeCategory: CatalogCategory, extensionColumns: IComputedValue<Map<string, Map<string, RegisteredAdditionalCategoryColumn[]>>>, nameCategoryColumn: RegisteredAdditionalCategoryColumn): RegisteredAdditionalCategoryColumn[] {
  const fromExtensions = (
    extensionColumns
      .get()
@@ -41,7 +43,7 @@ function getSpecificCategoryColumns(activeCategory: CatalogCategory, extensionCo
  ];
 }

-function getBrowseAllColumns(): RegisteredAdditionalCategoryColumn[] {
+function getBrowseAllColumns(nameCategoryColumn: RegisteredAdditionalCategoryColumn): RegisteredAdditionalCategoryColumn[] {
  return [
    ...browseAllColumns,
    nameCategoryColumn,
@@ -49,11 +51,11 @@ function getBrowseAllColumns(): RegisteredAdditionalCategoryColumn[] {
  ];
 }

-const getCategoryColumns = ({ extensionColumns }: Dependencies) => ({ activeCategory }: GetCategoryColumnsParams): CategoryColumns => {
+const getCategoryColumns = ({ extensionColumns, nameCategoryColumn }: Dependencies) => ({ activeCategory }: GetCategoryColumnsParams): CategoryColumns => {
  const allRegistrations = orderBy(
    activeCategory
-      ? getSpecificCategoryColumns(activeCategory, extensionColumns)
-      : getBrowseAllColumns(),
+      ? getSpecificCategoryColumns(activeCategory, extensionColumns, nameCategoryColumn)
+      : getBrowseAllColumns(nameCategoryColumn),
    "priority",
    "asc",
  );
@@ -89,6 +91,7 @@ const getCategoryColumnsInjectable = getInjectable({

  instantiate: (di) => getCategoryColumns({
    extensionColumns: di.inject(categoryColumnsInjectable),
+    nameCategoryColumn: di.inject(nameCategoryColumnInjectable),
  }),
 });

@@ -4,26 +4,54 @@
 */
 import React, { ReactNode, useState } from "react";

-import { HotbarStore } from "../../../common/hotbar-store";
 import { MenuItem } from "../menu";

 import type { CatalogEntity } from "../../api/catalog-entity";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import hotbarStoreInjectable from "../../../common/hotbar-store.injectable";
+import type { HotbarStore } from "../../../common/hotbar-store";

-export function HotbarToggleMenuItem(props: { entity: CatalogEntity; addContent: ReactNode; removeContent: ReactNode }) {
-  const store = HotbarStore.getInstance();
-  const [itemInHotbar, setItemInHotbar] = useState(store.isAddedToActive(props.entity));
+interface Dependencies {
+  hotbarStore: HotbarStore;
+}
+
+interface HotbarToggleMenuItemProps {
+   entity: CatalogEntity;
+   addContent: ReactNode;
+   removeContent: ReactNode;
+}
+
+function NonInjectedHotbarToggleMenuItem({
+  addContent,
+  entity,
+  hotbarStore,
+  removeContent,
+}: Dependencies & HotbarToggleMenuItemProps) {
+  const [itemInHotbar, setItemInHotbar] = useState(hotbarStore.isAddedToActive(entity));

  return (
    <MenuItem onClick={() => {
      if (itemInHotbar) {
-        store.removeFromHotbar(props.entity.getId());
+        hotbarStore.removeFromHotbar(entity.getId());
        setItemInHotbar(false);
      } else {
-        store.addToHotbar(props.entity);
+        hotbarStore.addToHotbar(entity);
        setItemInHotbar(true);
      }
    }}>
-      {itemInHotbar ? props.removeContent : props.addContent }
+      {itemInHotbar ? removeContent : addContent }
    </MenuItem>
  );
 }
+
+export const HotbarToggleMenuItem = withInjectables<Dependencies, HotbarToggleMenuItemProps>(
+  NonInjectedHotbarToggleMenuItem,
+
+  {
+    getProps: (di, props) => ({
+      hotbarStore: di.inject(hotbarStoreInjectable),
+      ...props,
+    }),
+  },
+);
+
@@ -6,49 +6,10 @@
 import styles from "./catalog.module.scss";

 import React from "react";
-import { HotbarStore } from "../../../common/hotbar-store";
-import type { CatalogEntity } from "../../api/catalog-entity";
-import { Avatar } from "../avatar";
 import type { RegisteredAdditionalCategoryColumn } from "./custom-category-columns";
-import { Icon } from "../icon";
-import { prevDefault } from "../../utils";
 import { getLabelBadges } from "./helpers";
 import { KubeObject } from "../../../common/k8s-api/kube-object";

-function renderEntityName(entity: CatalogEntity) {
-  const hotbarStore = HotbarStore.getInstance();
-  const isItemInHotbar = hotbarStore.isAddedToActive(entity);
-  const onClick = prevDefault(
-    isItemInHotbar
-      ? () => hotbarStore.removeFromHotbar(entity.getId())
-      : () => hotbarStore.addToHotbar(entity),
-  );
-
-  return (
-    <>
-      <Avatar
-        title={entity.getName()}
-        colorHash={`${entity.getName()}-${entity.getSource()}`}
-        src={entity.spec.icon?.src}
-        background={entity.spec.icon?.background}
-        className={styles.catalogAvatar}
-        size={24}
-      >
-        {entity.spec.icon?.material && <Icon material={entity.spec.icon?.material} small/>}
-      </Avatar>
-      <span>{entity.getName()}</span>
-      <Icon
-        small
-        className={styles.pinIcon}
-        material={!isItemInHotbar && "push_pin"}
-        svg={isItemInHotbar ? "push_off" : "push_pin"}
-        tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
-        onClick={onClick}
-      />
-    </>
-  );
-}
-
 export const browseAllColumns: RegisteredAdditionalCategoryColumn[] = [
  {
    id: "kind",
@@ -63,20 +24,6 @@ export const browseAllColumns: RegisteredAdditionalCategoryColumn[] = [
  },
 ];

-export const nameCategoryColumn: RegisteredAdditionalCategoryColumn = {
-  id: "name",
-  priority: 0,
-  renderCell: renderEntityName,
-  titleProps: {
-    title: "Name",
-    className: styles.entityName,
-    id: "name",
-    sortBy: "name",
-  },
-  searchFilter: entity => entity.getName(),
-  sortCallback: entity => `name=${entity.getName()}`,
-};
-
 export const defaultCategoryColumns: RegisteredAdditionalCategoryColumn[] = [
  {
    id: "source",
@@ -0,0 +1,67 @@
+/**
+ * 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 styles from "./catalog.module.scss";
+import type { CatalogEntity } from "../../../common/catalog";
+import { prevDefault } from "../../utils";
+import { Avatar } from "../avatar";
+import { Icon } from "../icon";
+import React from "react";
+import type { RegisteredAdditionalCategoryColumn } from "./custom-category-columns";
+import hotbarStoreInjectable from "../../../common/hotbar-store.injectable";
+import type { HotbarStore } from "../../../common/hotbar-store";
+
+const renderEntityName = (hotbarStore: HotbarStore) => (entity: CatalogEntity) => {
+  const isItemInHotbar = hotbarStore.isAddedToActive(entity);
+  const onClick = prevDefault(
+    isItemInHotbar
+      ? () => hotbarStore.removeFromHotbar(entity.getId())
+      : () => hotbarStore.addToHotbar(entity),
+  );
+
+  return (
+    <>
+      <Avatar
+        title={entity.getName()}
+        colorHash={`${entity.getName()}-${entity.getSource()}`}
+        src={entity.spec.icon?.src}
+        background={entity.spec.icon?.background}
+        className={styles.catalogAvatar}
+        size={24}
+      >
+        {entity.spec.icon?.material && <Icon material={entity.spec.icon?.material} small/>}
+      </Avatar>
+      <span>{entity.getName()}</span>
+      <Icon
+        small
+        className={styles.pinIcon}
+        material={!isItemInHotbar && "push_pin"}
+        svg={isItemInHotbar ? "push_off" : "push_pin"}
+        tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
+        onClick={onClick}
+      />
+    </>
+  );
+};
+
+
+const nameCategoryColumnInjectable = getInjectable({
+  id: "name-category-column",
+  instantiate: (di): RegisteredAdditionalCategoryColumn => ({
+    id: "name",
+    priority: 0,
+    renderCell: renderEntityName(di.inject(hotbarStoreInjectable)),
+    titleProps: {
+      title: "Name",
+      className: styles.entityName,
+      id: "name",
+      sortBy: "name",
+    },
+    searchFilter: (entity) => entity.getName(),
+    sortCallback: (entity) => `name=${entity.getName()}`,
+  }),
+});
+
+export default nameCategoryColumnInjectable;