Allow CatalogEntityDetails to be opened anywhere (#6939)

* Extract CatalogEntityDetails to seperate root component Signed-off-by: Sebastian Malton <sebastian@malton.name> * Expose entity details to extension API Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add behavioural tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fixup catalog technical tests to use ApplicationBuilder Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshot Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update test and then fix it Signed-off-by: Sebastian Malton <sebastian@malton.name> --------- Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2023-03-07 10:10:14 -05:00
1 parent f88555a1d7
commit 0084af56d6
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { CatalogEntity } from "../../catalog-entity";
+import catalogEntityRegistryInjectable from "./registry.injectable";
+
+export type GetEntityById = (id: string) => CatalogEntity | undefined;
+
+const getEntityByIdInjectable = getInjectable({
+  id: "get-entity-by-id",
+  instantiate: (di): GetEntityById => {
+    const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+
+    return (id) => catalogEntityRegistry.getById(id);
+  },
+});
+
+export default getEntityByIdInjectable;
@@ -23,7 +23,7 @@ export type CatalogEntityOnBeforeRun = (event: CatalogRunEvent) => void | Promis
 interface Dependencies {
  navigate: Navigate;
  readonly categoryRegistry: CatalogCategoryRegistry;
-  logger: Logger;
+  readonly logger: Logger;
 }

 export class CatalogEntityRegistry {
@@ -243,20 +243,24 @@ export class CatalogEntityRegistry {
   * Perform the onBeforeRun check and, if successful, then proceed to call `entity`'s onRun method
   * @param entity The instance to invoke the hooks and then execute the onRun
   */
-  onRun(entity: CatalogEntity): void {
-    this.onBeforeRun(entity)
-      .then(doOnRun => {
-        if (doOnRun) {
-          return entity.onRun?.({
-            navigate: this.dependencies.navigate,
-            setCommandPaletteContext: (entity) => {
-              this.activeEntity = entity;
-            },
-          });
-        } else {
-          this.dependencies.logger.debug(`onBeforeRun for ${entity.getId()} returned false`);
-        }
-      })
-      .catch(error => this.dependencies.logger.error(`[CATALOG-ENTITY-REGISTRY]: entity ${entity.getId()} onRun threw an error`, error));
+  async onRun(entity: CatalogEntity) {
+    try {
+      const doOnRun = await this.onBeforeRun(entity);
+
+      if (!doOnRun) {
+        this.dependencies.logger.debug(`onBeforeRun for ${entity.getId()} returned false`);
+
+        return;
+      }
+
+      await entity.onRun?.({
+        navigate: this.dependencies.navigate,
+        setCommandPaletteContext: (entity) => {
+          this.activeEntity = entity;
+        },
+      });
+    } catch (error) {
+      this.dependencies.logger.error(`[CATALOG-ENTITY-REGISTRY]: entity ${entity.getId()} onRun threw an error`, error);
+    }
  }
 }
@@ -3,12 +3,16 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

+import type { DiContainer } from "@ogre-tools/injectable";
 import type { CatalogCategoryMetadata, CatalogCategorySpec } from "../../../../common/catalog";
 import { CatalogEntity, categoryVersion } from "../../../../common/catalog";
+import catalogCategoryRegistryInjectable from "../../../../common/catalog/category-registry.injectable";
 import { CatalogCategory } from "../../../api/catalog-entity";
+import catalogEntityRegistryInjectable from "../../../api/catalog/entity/registry.injectable";
+import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
 import { noop } from "../../../utils";
-import type { CatalogEntityStore } from "../catalog-entity-store/catalog-entity.store";
-import { catalogEntityStore } from "../catalog-entity-store/catalog-entity.store";
+import type { CatalogEntityStore } from "../catalog-entity-store.injectable";
+import catalogEntityStoreInjectable from "../catalog-entity-store.injectable";

 class TestEntityOne extends CatalogEntity {
  public static readonly apiVersion: string = "entity.k8slens.dev/v1alpha1";
@@ -63,6 +67,12 @@ class TestCategoryTwo extends CatalogCategory {
 }

 describe("CatalogEntityStore", () => {
+  let di: DiContainer;
+
+  beforeEach(() => {
+    di = getDiForUnitTesting({ doGeneralOverrides: true });
+  });
+
  describe("getTotalCount", () => {
    let store: CatalogEntityStore;
    let testCategoryOne: TestCategoryOne;
@@ -129,21 +139,22 @@ describe("CatalogEntityStore", () => {

      testCategoryOne = new TestCategoryOne();
      testCategoryTwo = new TestCategoryTwo();
-      store = catalogEntityStore({
-        catalogRegistry: {
-          items: [
-            testCategoryOne,
-            testCategoryTwo,
-          ],
+
+      di.override(catalogCategoryRegistryInjectable, () => ({
+        items: [
+          testCategoryOne,
+          testCategoryTwo,
+        ],
+      }));
+      di.override(catalogEntityRegistryInjectable, () => ({
+        onRun: noop,
+        filteredItems: entityItems,
+        getItemsForCategory: <T extends CatalogEntity>(category: CatalogCategory): T[] => {
+          return entityItems.filter(item => category.spec.versions.some(version => item instanceof version.entityClass)) as T[];
        },
-        entityRegistry: {
-          onRun: noop,
-          filteredItems: entityItems,
-          getItemsForCategory: <T extends CatalogEntity>(category: CatalogCategory): T[] => {
-            return entityItems.filter(item => category.spec.versions.some(version => item instanceof version.entityClass)) as T[];
-          },
-        },
-      });
+      } as any));
+
+      store = di.inject(catalogEntityStoreInjectable);
    });

    it("given no active category, returns count of all kinds", () => {
@@ -0,0 +1,74 @@
+/**
+ * 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 catalogEntityRegistryInjectable from "../../api/catalog/entity/registry.injectable";
+
+import type { IComputedValue, IObservableValue } from "mobx";
+import { computed, observable, reaction } from "mobx";
+import type { CatalogEntity } from "../../api/catalog-entity";
+import type { CatalogCategory } from "../../../common/catalog";
+import type { Disposer } from "../../../common/utils";
+import { disposer } from "../../../common/utils";
+import type { ItemListStore } from "../item-object-list";
+import catalogCategoryRegistryInjectable from "../../../common/catalog/category-registry.injectable";
+import selectedCatalogEntityParamInjectable from "./entity-details/selected-uid.injectable";
+
+export type CatalogEntityStore = ItemListStore<CatalogEntity, false> & {
+  readonly entities: IComputedValue<CatalogEntity[]>;
+  readonly activeCategory: IObservableValue<CatalogCategory | undefined>;
+  watch(): Disposer;
+  onRun(entity: CatalogEntity): void;
+};
+
+const catalogEntityStoreInjectable = getInjectable({
+  id: "catalog-entity-store",
+
+  instantiate: (di): CatalogEntityStore => {
+    const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+    const catalogCategoryRegistry = di.inject(catalogCategoryRegistryInjectable);
+    const selectedCatalogEntityParam = di.inject(selectedCatalogEntityParamInjectable);
+
+    const activeCategory = observable.box<CatalogCategory | undefined>(undefined);
+    const entities = computed(() => {
+      const category = activeCategory.get();
+
+      return category
+        ? catalogEntityRegistry.getItemsForCategory(category, { filtered: true })
+        : catalogEntityRegistry.filteredItems;
+    });
+    const loadAll = () => {
+      const category = activeCategory.get();
+
+      if (category) {
+        category.emit("load");
+      } else {
+        for (const category of catalogCategoryRegistry.items) {
+          category.emit("load");
+        }
+      }
+    };
+
+    return {
+      entities,
+      activeCategory,
+      watch: () => disposer(
+        reaction(() => entities.get(), loadAll),
+        reaction(() => activeCategory.get(), loadAll, { delay: 100 }),
+      ),
+      onRun: entity => catalogEntityRegistry.onRun(entity),
+      failedLoading: false,
+      getTotalCount: () => entities.get().length,
+      isLoaded: true,
+      isSelected: (item) => item.getId() === selectedCatalogEntityParam.get(),
+      isSelectedAll: () => false,
+      pickOnlySelected: () => [],
+      toggleSelection: () => {},
+      toggleSelectionAll: () => {},
+      removeSelectedItems: async () => {},
+    };
+  },
+});
+
+export default catalogEntityStoreInjectable;
@@ -1,19 +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 { catalogEntityStore } from "./catalog-entity.store";
-import catalogEntityRegistryInjectable from "../../../api/catalog/entity/registry.injectable";
-import catalogCategoryRegistryInjectable from "../../../../common/catalog/category-registry.injectable";
-
-const catalogEntityStoreInjectable = getInjectable({
-  id: "catalog-entity-store",
-
-  instantiate: (di) => catalogEntityStore({
-    entityRegistry: di.inject(catalogEntityRegistryInjectable),
-    catalogRegistry: di.inject(catalogCategoryRegistryInjectable),
-  }),
-});
-
-export default catalogEntityStoreInjectable;
@@ -1,86 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type { IComputedValue, IObservableValue } from "mobx";
-import { computed, observable, reaction } from "mobx";
-import type { CatalogEntityRegistry } from "../../../api/catalog/entity/registry";
-import type { CatalogEntity } from "../../../api/catalog-entity";
-import type { CatalogCategory, CatalogCategoryRegistry } from "../../../../common/catalog";
-import type { Disposer } from "../../../../common/utils";
-import { disposer } from "../../../../common/utils";
-import type { ItemListStore } from "../../item-object-list";
-
-type EntityRegistry = Pick<CatalogEntityRegistry, "getItemsForCategory" | "filteredItems" | "onRun">;
-type CatalogRegistry = Pick<CatalogCategoryRegistry, "items">;
-
-interface Dependencies {
-  entityRegistry: EntityRegistry;
-  catalogRegistry: CatalogRegistry;
-}
-
-export type CatalogEntityStore = ItemListStore<CatalogEntity, false> & {
-  readonly entities: IComputedValue<CatalogEntity[]>;
-  readonly activeCategory: IObservableValue<CatalogCategory | undefined>;
-  readonly selectedItemId: IObservableValue<string | undefined>;
-  readonly selectedItem: IComputedValue<CatalogEntity | undefined>;
-  watch(): Disposer;
-  onRun(entity: CatalogEntity): void;
-};
-
-export function catalogEntityStore({
-  entityRegistry,
-  catalogRegistry,
-}: Dependencies): CatalogEntityStore {
-  const activeCategory = observable.box<CatalogCategory | undefined>(undefined);
-  const selectedItemId = observable.box<string | undefined>(undefined);
-  const entities = computed(() => {
-    const category = activeCategory.get();
-
-    return category
-      ? entityRegistry.getItemsForCategory(category, { filtered: true })
-      : entityRegistry.filteredItems;
-  });
-  const selectedItem = computed(() => {
-    const id = selectedItemId.get();
-
-    if (!id) {
-      return undefined;
-    }
-
-    return entities.get().find(entity => entity.getId() === id);
-  });
-  const loadAll = () => {
-    const category = activeCategory.get();
-
-    if (category) {
-      category.emit("load");
-    } else {
-      for (const category of catalogRegistry.items) {
-        category.emit("load");
-      }
-    }
-  };
-
-  return {
-    entities,
-    selectedItem,
-    activeCategory,
-    selectedItemId,
-    watch: () => disposer(
-      reaction(() => entities.get(), loadAll),
-      reaction(() => activeCategory.get(), loadAll, { delay: 100 }),
-    ),
-    onRun: entity => entityRegistry.onRun(entity),
-    failedLoading: false,
-    getTotalCount: () => entities.get().length,
-    isLoaded: true,
-    isSelected: (item) => item.getId() === selectedItemId.get(),
-    isSelectedAll: () => false,
-    pickOnlySelected: () => [],
-    toggleSelection: () => {},
-    toggleSelectionAll: () => {},
-    removeSelectedItems: async () => {},
-  };
-}
@@ -1,229 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import React from "react";
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Catalog } from "./catalog";
-import type { CatalogEntityActionContext, CatalogEntityData } from "../../../common/catalog";
-import { CatalogEntity } from "../../../common/catalog";
-import type { CatalogEntityOnBeforeRun, CatalogEntityRegistry } from "../../api/catalog/entity/registry";
-import type { CatalogEntityStore } from "./catalog-entity-store/catalog-entity.store";
-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.injectable";
-import type { DiRender } from "../test-utils/renderFor";
-import { renderFor } from "../test-utils/renderFor";
-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 type { AppEvent } from "../../../common/app-event-bus/event-bus";
-import appEventBusInjectable from "../../../common/app-event-bus/app-event-bus.injectable";
-import { computed } from "mobx";
-import broadcastMessageInjectable from "../../../common/ipc/broadcast-message.injectable";
-import type { AsyncFnMock } from "@async-fn/jest";
-import asyncFn from "@async-fn/jest";
-import { flushPromises } from "../../../common/test-utils/flush-promises";
-import userStoreInjectable from "../../../common/user-store/user-store.injectable";
-import releaseChannelInjectable from "../../../common/vars/release-channel.injectable";
-import defaultUpdateChannelInjectable from "../../../features/application-update/common/selected-update-channel/default-update-channel.injectable";
-import currentlyInClusterFrameInjectable from "../../routes/currently-in-cluster-frame.injectable";
-
-class MockCatalogEntity extends CatalogEntity {
-  public apiVersion = "api";
-  public kind = "kind";
-
-  constructor(data: CatalogEntityData, public onRun: (context: CatalogEntityActionContext) => void | Promise<void>) {
-    super(data);
-  }
-}
-
-function createMockCatalogEntity(onRun: (context: CatalogEntityActionContext) => void | Promise<void>) {
-  return new MockCatalogEntity({
-    metadata: {
-      uid: "a_catalogEntity_uid",
-      name: "a catalog entity",
-      labels: {
-        test: "label",
-      },
-    },
-    status: {
-      phase: "",
-    },
-    spec: {},
-  }, onRun);
-}
-
-describe("<Catalog />", () => {
-  let di: DiContainer;
-  let catalogEntityStore: CatalogEntityStore;
-  let catalogEntityRegistry: CatalogEntityRegistry;
-  let appEventListener: jest.MockedFunction<(event: AppEvent) => void>;
-  let onRun: jest.MockedFunction<(context: CatalogEntityActionContext) => void | Promise<void>>;
-  let catalogEntityItem: MockCatalogEntity;
-  let render: DiRender;
-
-  beforeEach(async () => {
-    di = getDiForUnitTesting({ doGeneralOverrides: true });
-
-    di.override(directoryForUserDataInjectable, () => "some-directory-for-user-data");
-    di.override(currentlyInClusterFrameInjectable, () => false);
-    di.override(broadcastMessageInjectable, () => async () => {});
-
-    di.permitSideEffects(getConfigurationFileModelInjectable);
-
-    render = renderFor(di);
-    onRun = jest.fn();
-    catalogEntityItem = createMockCatalogEntity(onRun);
-    catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
-
-    appEventListener = jest.fn();
-    di.inject(appEventBusInjectable).addListener(appEventListener);
-
-    catalogEntityStore = di.inject(catalogEntityStoreInjectable);
-    Object.assign(catalogEntityStore, {
-      selectedItem: computed(() => catalogEntityItem),
-    });
-
-    di.override(releaseChannelInjectable, () => ({
-      get: () => "latest" as const,
-      init: async () => {},
-    }));
-    await di.inject(defaultUpdateChannelInjectable).init();
-    di.inject(userStoreInjectable).load();
-  });
-
-  describe("can use catalogEntityRegistry.addOnBeforeRun to add hooks for catalog entities", () => {
-    let onBeforeRunMock: AsyncFnMock<CatalogEntityOnBeforeRun>;
-
-    beforeEach(() => {
-      onBeforeRunMock = asyncFn();
-
-      catalogEntityRegistry.addOnBeforeRun(onBeforeRunMock);
-
-      render(<Catalog />);
-
-      userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
-    });
-
-    it("calls on before run event", () => {
-      const target = onBeforeRunMock.mock.calls[0][0].target;
-
-      const actual = { id: target.getId(), name: target.getName() };
-
-      expect(actual).toEqual({
-        id: "a_catalogEntity_uid",
-        name: "a catalog entity",
-      });
-    });
-
-    it("does not call onRun yet", () => {
-      expect(onRun).not.toHaveBeenCalled();
-    });
-
-    it("when before run event resolves, calls onRun", async () => {
-      await onBeforeRunMock.resolve();
-
-      expect(onRun).toHaveBeenCalled();
-    });
-  });
-
-  it("onBeforeRun prevents event => onRun wont be triggered", async () => {
-    const onBeforeRunMock = jest.fn((event) => event.preventDefault());
-
-    catalogEntityRegistry.addOnBeforeRun(onBeforeRunMock);
-
-    render(<Catalog />);
-
-    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
-
-    await flushPromises();
-
-    expect(onRun).not.toHaveBeenCalled();
-  });
-
-  it("addOnBeforeRun throw an exception => onRun will be triggered", async () => {
-    const onBeforeRunMock = jest.fn(() => {
-      throw new Error("some error");
-    });
-
-    catalogEntityRegistry.addOnBeforeRun(onBeforeRunMock);
-
-    render(<Catalog />);
-
-    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
-
-    await flushPromises();
-
-    expect(onRun).toHaveBeenCalled();
-  });
-
-  it("addOnRunHook return a promise and does not prevent run event => onRun()", (done) => {
-    onRun.mockImplementation(() => done());
-
-    catalogEntityRegistry.addOnBeforeRun(
-      async () => {
-        // no op
-      },
-    );
-
-    render(<Catalog />);
-
-    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
-  });
-
-  it("addOnRunHook return a promise and prevents event wont be triggered", async () => {
-    const onBeforeRunMock = asyncFn();
-
-    catalogEntityRegistry.addOnBeforeRun(onBeforeRunMock);
-
-    render(<Catalog />);
-
-    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
-
-    onBeforeRunMock.mock.calls[0][0].preventDefault();
-
-    await onBeforeRunMock.resolve();
-
-    expect(onRun).not.toHaveBeenCalled();
-  });
-
-  it("addOnRunHook return a promise and reject => onRun will be triggered", async () => {
-    const onBeforeRunMock = asyncFn();
-
-    catalogEntityRegistry.addOnBeforeRun(onBeforeRunMock);
-
-    render(<Catalog />);
-
-    userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
-
-    await onBeforeRunMock.reject();
-
-    expect(onRun).toHaveBeenCalled();
-  });
-
-  it("emits catalog open AppEvent", () => {
-    render(<Catalog />);
-
-    expect(appEventListener).toHaveBeenCalledWith( {
-      action: "open",
-      name: "catalog",
-    });
-  });
-
-  it("emits catalog change AppEvent when changing the category", () => {
-    render(<Catalog />);
-
-    userEvent.click(screen.getByText("Web Links"));
-
-    expect(appEventListener).toHaveBeenCalledWith({
-      action: "change-category",
-      name: "catalog",
-      params: {
-        category: "Web Links",
-      },
-    });
-  });
-});
@@ -10,7 +10,7 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { ItemListLayout } from "../item-object-list";
 import type { IComputedValue } from "mobx";
 import { action, computed, makeObservable, observable, reaction, runInAction, when } from "mobx";
-import type { CatalogEntityStore } from "./catalog-entity-store/catalog-entity.store";
+import type { CatalogEntityStore } from "./catalog-entity-store.injectable";
 import { MenuItem, MenuActions } from "../menu";
 import type { CatalogEntityContextMenu } from "../../api/catalog-entity";
 import type { CatalogCategory, CatalogCategoryRegistry, CatalogEntity } from "../../../common/catalog";
@@ -19,7 +19,6 @@ import type { ShowNotification } from "../notifications";
 import { MainLayout } from "../layout/main-layout";
 import type { StorageLayer } from "../../utils";
 import { prevDefault } from "../../utils";
-import { CatalogEntityDetails } from "./entity-details/view";
 import { CatalogMenu } from "./catalog-menu";
 import { RenderDelay } from "../render-delay/render-delay";
 import { Icon } from "../icon";
@@ -27,7 +26,7 @@ import { HotbarToggleMenuItem } from "./hotbar-toggle-menu-item";
 import { Avatar } from "../avatar";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import catalogPreviousActiveTabStorageInjectable from "./catalog-previous-active-tab-storage/catalog-previous-active-tab-storage.injectable";
-import catalogEntityStoreInjectable from "./catalog-entity-store/catalog-entity-store.injectable";
+import catalogEntityStoreInjectable from "./catalog-entity-store.injectable";
 import type { GetCategoryColumnsParams, CategoryColumns } from "./columns/get.injectable";
 import getCategoryColumnsInjectable from "./columns/get.injectable";
 import type { RegisteredCustomCategoryViewDecl } from "./custom-views.injectable";
@@ -51,6 +50,10 @@ import emitAppEventInjectable from "../../../common/app-event-bus/emit-event.inj
 import type { Logger } from "../../../common/logger";
 import loggerInjectable from "../../../common/logger.injectable";
 import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
+import type { ShowEntityDetails } from "./entity-details/show.injectable";
+import showEntityDetailsInjectable from "./entity-details/show.injectable";
+import type { OnCatalogEntityListClick } from "./entity-details/on-catalog-click.injectable";
+import onCatalogEntityListClickInjectable from "./entity-details/on-catalog-click.injectable";

 interface Dependencies {
  catalogPreviousActiveTabStorage: StorageLayer<string | null>;
@@ -58,6 +61,8 @@ interface Dependencies {
  getCategoryColumns: (params: GetCategoryColumnsParams) => CategoryColumns;
  customCategoryViews: IComputedValue<Map<string, Map<string, RegisteredCustomCategoryViewDecl>>>;
  emitEvent: EmitAppEvent;
+  showEntityDetails: ShowEntityDetails;
+  onCatalogEntityListClick: OnCatalogEntityListClick;
  routeParameters: {
    group: IComputedValue<string>;
    kind: IComputedValue<string>;
@@ -161,26 +166,16 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
    this.props.hotbarStore.removeFromHotbar(entity.getId());
  }

-  onDetails = (entity: CatalogEntity) => {
-    if (this.props.catalogEntityStore.selectedItemId.get()) {
-      this.props.catalogEntityStore.selectedItemId.set(undefined);
-    } else {
-      this.props.catalogEntityStore.onRun(entity);
-    }
-  };
-
-  get categories() {
-    return this.props.catalogCategoryRegistry.items;
-  }
-
  onTabChange = action((tabId: string | null) => {
-    const activeCategory = this.categories.find(category => category.getId() === tabId);
+    const activeCategory = tabId
+      ? this.props.catalogCategoryRegistry.getById(tabId)
+      : undefined;

    this.props.emitEvent({
      name: "catalog",
      action: "change-category",
      params: {
-        category: activeCategory ? activeCategory.getName() : "Browse",
+        category: activeCategory?.getName() ?? "Browse",
      },
    });

@@ -211,7 +206,7 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
        <MenuItem
          key="open-details"
          data-testid={`open-details-menu-item-for-${entity.getId()}`}
-          onClick={() => this.props.catalogEntityStore.selectedItemId.set(entity.getId())}
+          onClick={() => this.props.showEntityDetails(entity.getId())}
        >
          View Details
        </MenuItem>
@@ -309,7 +304,7 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
          disabled: !entity.isEnabled(),
        })}
        {...getCategoryColumns({ activeCategory })}
-        onDetails={this.onDetails}
+        onDetails={this.props.onCatalogEntityListClick}
        renderItemMenu={this.renderItemMenu}
        data-testid={`catalog-list-for-${activeCategory?.metadata.name ?? "browse-all"}`}
      />
@@ -318,7 +313,6 @@ class NonInjectedCatalog extends React.Component<Dependencies> {

  render() {
    const activeCategory = this.props.catalogEntityStore.activeCategory.get();
-    const selectedItem = this.props.catalogEntityStore.selectedItem.get();

    return (
      <MainLayout
@@ -333,21 +327,13 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
          {this.renderViews(activeCategory)}
        </div>
        {
-          selectedItem
+          activeCategory
            ? (
-              <CatalogEntityDetails
-                entity={selectedItem}
-                hideDetails={() => this.props.catalogEntityStore.selectedItemId.set(undefined)}
-                onRun={() => this.props.catalogEntityStore.onRun(selectedItem)}
-              />
+              <RenderDelay>
+                <CatalogAddButton category={activeCategory} />
+              </RenderDelay>
            )
-            : activeCategory
-              ? (
-                <RenderDelay>
-                  <CatalogAddButton category={activeCategory} />
-                </RenderDelay>
-              )
-              : null
+            : null
        }
      </MainLayout>
    );
@@ -371,5 +357,7 @@ export const Catalog = withInjectables<Dependencies>(NonInjectedCatalog, {
    normalizeMenuItem: di.inject(normalizeCatalogEntityContextMenuInjectable),
    logger: di.inject(loggerInjectable),
    showErrorNotification: di.inject(showErrorNotificationInjectable),
+    showEntityDetails: di.inject(showEntityDetailsInjectable),
+    onCatalogEntityListClick: di.inject(onCatalogEntityListClickInjectable),
  }),
 });
@@ -0,0 +1,65 @@
+/**
+ * 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 { withInjectables } from "@ogre-tools/injectable-react";
+import type { IComputedValue } from "mobx";
+import { computed } from "mobx";
+import { observer } from "mobx-react";
+import React from "react";
+import type { CatalogEntity } from "../../../api/catalog-entity";
+import type { CatalogEntityRegistry } from "../../../api/catalog/entity/registry";
+import catalogEntityRegistryInjectable from "../../../api/catalog/entity/registry.injectable";
+import { rootFrameChildComponentInjectionToken } from "../../../frames/root-frame/root-frame-child-component-injection-token";
+import type { HideEntityDetails } from "./hide.injectable";
+import hideEntityDetailsInjectable from "./hide.injectable";
+import selectedCatalogEntityInjectable from "./selected-entity.injectable";
+import { CatalogEntityDetails } from "./view";
+
+interface Dependencies {
+  selectedCatalogEntity: IComputedValue<CatalogEntity | undefined>;
+  hideEntityDetails: HideEntityDetails;
+  catalogEntityRegistry: CatalogEntityRegistry;
+}
+
+const NonInjectedCatalogEntityDetailsComponent = observer(({
+  selectedCatalogEntity,
+  hideEntityDetails,
+  catalogEntityRegistry,
+}: Dependencies) => {
+  const entity = selectedCatalogEntity.get();
+
+  if (!entity) {
+    return null;
+  }
+
+  return (
+    <CatalogEntityDetails
+      entity={entity}
+      hideDetails={hideEntityDetails}
+      onRun={() => catalogEntityRegistry.onRun(entity)}
+    />
+  );
+});
+
+const CatalogEntityDetailsComponent = withInjectables<Dependencies>(NonInjectedCatalogEntityDetailsComponent, {
+  getProps: (di, props) => ({
+    ...props,
+    selectedCatalogEntity: di.inject(selectedCatalogEntityInjectable),
+    catalogEntityRegistry: di.inject(catalogEntityRegistryInjectable),
+    hideEntityDetails: di.inject(hideEntityDetailsInjectable),
+  }),
+});
+
+const catalogEntityDetailsComponentInjectable = getInjectable({
+  id: "catalog-entity-details-component",
+  instantiate: () => ({
+    id: "catalog-entity-details-component",
+    Component: CatalogEntityDetailsComponent,
+    shouldRender: computed(() => true),
+  }),
+  injectionToken: rootFrameChildComponentInjectionToken,
+});
+
+export default catalogEntityDetailsComponentInjectable;
@@ -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 selectedCatalogEntityParamInjectable from "./selected-uid.injectable";
+
+export type HideEntityDetails = () => void;
+
+const hideEntityDetailsInjectable = getInjectable({
+  id: "hide-entity-details",
+  instantiate: (di) => {
+    const selectedCatalogEntityParam = di.inject(selectedCatalogEntityParamInjectable);
+
+    return () => selectedCatalogEntityParam.clear();
+  },
+});
+
+export default hideEntityDetailsInjectable;
@@ -0,0 +1,31 @@
+/**
+ * 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 type { CatalogEntity } from "../../../api/catalog-entity";
+import catalogEntityRegistryInjectable from "../../../api/catalog/entity/registry.injectable";
+import selectedCatalogEntityParamInjectable from "./selected-uid.injectable";
+
+export type OnCatalogEntityListClick = (entity: CatalogEntity) => void;
+
+const onCatalogEntityListClickInjectable = getInjectable({
+  id: "on-catalog-entity-list-click",
+  instantiate: (di): OnCatalogEntityListClick => {
+    const selectedCatalogEntityParam = di.inject(selectedCatalogEntityParamInjectable);
+    const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+
+    return action(entity => {
+      if (selectedCatalogEntityParam.get() === entity.getId()) {
+        selectedCatalogEntityParam.clear();
+      } else if (selectedCatalogEntityParam.get() === undefined) {
+        catalogEntityRegistry.onRun(entity);
+      } else {
+        selectedCatalogEntityParam.set(entity.getId());
+      }
+    });
+  },
+});
+
+export default onCatalogEntityListClickInjectable;
@@ -0,0 +1,28 @@
+/**
+ * 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 getEntityByIdInjectable from "../../../api/catalog/entity/get-by-id.injectable";
+import selectedCatalogEntityParamInjectable from "./selected-uid.injectable";
+
+const selectedCatalogEntityInjectable = getInjectable({
+  id: "selected-catalog-entity",
+  instantiate: (di) => {
+    const getEntityById = di.inject(getEntityByIdInjectable);
+    const selectedCatalogEntityParam = di.inject(selectedCatalogEntityParamInjectable);
+
+    return computed(() => {
+      const id = selectedCatalogEntityParam.get();
+
+      if (!id) {
+        return undefined;
+      }
+
+      return getEntityById(id);
+    });
+  },
+});
+
+export default selectedCatalogEntityInjectable;
@@ -0,0 +1,19 @@
+/**
+ * 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 selectedCatalogEntityParamInjectable = getInjectable({
+  id: "selected-catalog-entity-param",
+  instantiate: (di) => {
+    const createPageParam = di.inject(createPageParamInjectable);
+
+    return createPageParam({
+      name: "catalog-entity-details",
+    });
+  },
+});
+
+export default selectedCatalogEntityParamInjectable;
@@ -0,0 +1,19 @@
+/**
+ * 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 selectedCatalogEntityParamInjectable from "./selected-uid.injectable";
+
+export type ShowEntityDetails = (id: string) => void;
+
+const showEntityDetailsInjectable = getInjectable({
+  id: "show-entity-details",
+  instantiate: (di): ShowEntityDetails => {
+    const selectedCatalogEntityParam = di.inject(selectedCatalogEntityParamInjectable);
+
+    return (id) => selectedCatalogEntityParam.set(id);
+  },
+});
+
+export default showEntityDetailsInjectable;