Fix unit tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/common/app-event-bus/app-event-bus.injectable.ts

@@ -3,12 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import { appEventBus } from "./event-bus";
+import { EventEmitter } from "../event-emitter";
+import type { AppEvent } from "./event-bus";
 
 const appEventBusInjectable = getInjectable({
   id: "app-event-bus",
-  instantiate: () => appEventBus,
+  instantiate: () => new EventEmitter<[AppEvent]>(),
-  causesSideEffects: true,
 });
 
 export default appEventBusInjectable;

src/common/app-event-bus/event-bus.ts

@@ -3,7 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { EventEmitter } from "../event-emitter";
+import { asLegacyGlobalForExtensionApi } from "../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
+import appEventBusInjectable from "./app-event-bus.injectable";
 
 export interface AppEvent {
   name: string;
@@ -12,4 +13,7 @@ export interface AppEvent {
   params?: Record<string, any>;
 }
 
-export const appEventBus = new EventEmitter<[AppEvent]>();
+/**
+ * @deprecated Switch to using appEventBusInjectable instead
+ */
+export const appEventBus = asLegacyGlobalForExtensionApi(appEventBusInjectable);

src/extensions/common-api/event-bus.ts

@@ -3,5 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export { appEventBus } from "../../common/app-event-bus/event-bus";
+import { appEventBus as bus } from "../../common/app-event-bus/event-bus";
 export type { AppEvent } from "../../common/app-event-bus/event-bus";
+
+export const appEventBus = bus;

src/features/cluster/__snapshots__/connection-status.test.ts.snap

@@ -78,7 +78,7 @@ exports[`cluster connection status renders 1`] = `
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to OpenLens 5!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your

src/features/cluster/connection-status.test.ts

@@ -18,6 +18,8 @@ import createKubectlInjectable from "../../main/kubectl/create-kubectl.injectabl
 import type { KubeconfigManager } from "../../main/kubeconfig-manager/kubeconfig-manager";
 import type { Kubectl } from "../../main/kubectl/kubectl";
 import type { ContextHandler } from "../../main/context-handler/context-handler";
+import catalogEntityRegistryInjectable from "../../renderer/api/catalog/entity/registry.injectable";
+import { KubernetesCluster } from "../../common/catalog-entities";
 
 describe("cluster connection status", () => {
   let clusterStore: ClusterStore;
@@ -40,6 +42,37 @@ describe("cluster connection status", () => {
 
       const createCluster = applicationBuilder.dis.mainDi.inject(createClusterInjectable);
 
+      applicationBuilder.dis.rendererDi.inject(catalogEntityRegistryInjectable).updateItems([
+        new KubernetesCluster({
+          metadata: {
+            labels: {},
+            name: "minikube",
+            uid: "some-cluster-id",
+          },
+          spec: {
+            kubeconfigContext: "minikube",
+            kubeconfigPath: "/some/file/path",
+          },
+          status: {
+            phase: "disconnected",
+          },
+        }),
+        new KubernetesCluster({
+          metadata: {
+            labels: {},
+            name: "minikube-2",
+            uid: "some-cluster-id-2",
+          },
+          spec: {
+            kubeconfigContext: "minikube-2",
+            kubeconfigPath: "/some/file/path",
+          },
+          status: {
+            phase: "disconnected",
+          },
+        }),
+      ]);
+
       cluster = createCluster({
         contextName: "minikube",
         id: "some-cluster-id",

src/renderer/api/catalog-category-registry.ts

@@ -3,9 +3,5 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import catalogCategoryRegistryInjectable from "../../common/catalog/category-registry.injectable";
-import { asLegacyGlobalForExtensionApi } from "../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
 
 export type { CategoryFilter } from "../../common/catalog";
-
-export const catalogCategoryRegistry = asLegacyGlobalForExtensionApi(catalogCategoryRegistryInjectable);

src/renderer/components/+catalog/catalog-add-button.tsx

@@ -13,7 +13,9 @@ import { autoBind } from "../../../common/utils";
 import type { CatalogCategory, CatalogEntityAddMenuContext, CatalogEntityAddMenu } from "../../api/catalog-entity";
 import { EventEmitter } from "events";
 import { navigate } from "../../navigation";
-import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
+import type { CatalogCategoryRegistry } from "../../../common/catalog";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import catalogCategoryRegistryInjectable from "../../../common/catalog/category-registry.injectable";
 
 export interface CatalogAddButtonProps {
   category: CatalogCategory;
@@ -21,12 +23,16 @@ export interface CatalogAddButtonProps {
 
 type CategoryId = string;
 
+interface Dependencies {
+  catalogCategoryRegistry: CatalogCategoryRegistry;
+}
+
 @observer
-export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
+class NonInjectedCatalogAddButton extends React.Component<CatalogAddButtonProps & Dependencies> {
   @observable protected isOpen = false;
   @observable menuItems = new Map<CategoryId, CatalogEntityAddMenu[]>();
 
-  constructor(props: CatalogAddButtonProps) {
+  constructor(props: CatalogAddButtonProps & Dependencies) {
     super(props);
     makeObservable(this);
     autoBind(this);
@@ -43,7 +49,7 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
   }
 
   get categories() {
-    return catalogCategoryRegistry.filteredItems;
+    return this.props.catalogCategoryRegistry.filteredItems;
   }
 
   @action
@@ -133,3 +139,10 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
     );
   }
 }
+
+export const CatalogAddButton = withInjectables<Dependencies, CatalogAddButtonProps>(NonInjectedCatalogAddButton, {
+  getProps: (di, props) => ({
+    ...props,
+    catalogCategoryRegistry: di.inject(catalogCategoryRegistryInjectable),
+  }),
+});

src/renderer/components/+catalog/catalog-menu.tsx

@@ -9,23 +9,21 @@ import styles from "./catalog-menu.module.scss";
 import React from "react";
 import type { TreeItemProps } from "@material-ui/lab";
 import { TreeItem, TreeView } from "@material-ui/lab";
-import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
 import { Icon } from "../icon";
 import { StylesProvider } from "@material-ui/core";
 import { cssNames } from "../../utils";
 import type { CatalogCategory } from "../../api/catalog-entity";
 import { observer } from "mobx-react";
 import { CatalogCategoryLabel } from "./catalog-category-label";
+import type { CatalogCategoryRegistry } from "../../../common/catalog";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import catalogCategoryRegistryInjectable from "../../../common/catalog/category-registry.injectable";
 
 export interface CatalogMenuProps {
   activeTab: string | undefined;
   onItemClick: (id: string) => void;
 }
 
-function getCategories() {
-  return catalogCategoryRegistry.filteredItems;
-}
-
 function getCategoryIcon(category: CatalogCategory) {
   const { icon } = category.metadata ?? {};
 
@@ -44,7 +42,15 @@ function Item(props: TreeItemProps) {
   );
 }
 
-export const CatalogMenu = observer((props: CatalogMenuProps) => {
+interface Dependencies {
+  catalogCategoryRegistry: CatalogCategoryRegistry;
+}
+
+const NonInjectedCatalogMenu = observer(({
+  activeTab = "browse",
+  onItemClick,
+  catalogCategoryRegistry,
+}: CatalogMenuProps & Dependencies) => {
   return (
     // Overwrite Material UI styles with injectFirst https://material-ui.com/guides/interoperability/#controlling-priority-4
     <StylesProvider injectFirst>
@@ -54,13 +60,13 @@ export const CatalogMenu = observer((props: CatalogMenuProps) => {
           defaultExpanded={["catalog"]}
           defaultCollapseIcon={<Icon material="expand_more"/>}
           defaultExpandIcon={<Icon material="chevron_right" />}
-          selected={props.activeTab || "browse"}
+          selected={activeTab}
         >
           <Item
             nodeId="browse"
             label="Browse"
             data-testid="*-tab"
-            onClick={() => props.onItemClick("*")}
+            onClick={() => onItemClick("*")}
           />
           <Item
             nodeId="catalog"
@@ -68,14 +74,14 @@ export const CatalogMenu = observer((props: CatalogMenuProps) => {
             className={cssNames(styles.bordered)}
           >
             {
-              getCategories().map(category => (
+              catalogCategoryRegistry.filteredItems.map(category => (
                 <Item
                   icon={getCategoryIcon(category)}
                   key={category.getId()}
                   nodeId={category.getId()}
                   label={<CatalogCategoryLabel category={category}/>}
                   data-testid={`${category.getId()}-tab`}
-                  onClick={() => props.onItemClick(category.getId())}
+                  onClick={() => onItemClick(category.getId())}
                 />
               ))
             }
@@ -85,3 +91,10 @@ export const CatalogMenu = observer((props: CatalogMenuProps) => {
     </StylesProvider>
   );
 });
+
+export const CatalogMenu = withInjectables<Dependencies, CatalogMenuProps>(NonInjectedCatalogMenu, {
+  getProps: (di, props) => ({
+    ...props,
+    catalogCategoryRegistry: di.inject(catalogCategoryRegistryInjectable),
+  }),
+});

src/renderer/initializers/catalog.tsx

@@ -5,12 +5,11 @@
 
 import React from "react";
 import fs from "fs";
-import "../../common/catalog-entities/kubernetes-cluster";
 import { ClusterStore } from "../../common/cluster-store/cluster-store";
-import { catalogCategoryRegistry } from "../api/catalog-category-registry";
 import { WeblinkAddCommand } from "../components/catalog-entities/weblink-add-command";
 import { loadConfigFromString } from "../../common/kube-helpers";
 import type { OpenDeleteClusterDialog } from "../components/delete-cluster-dialog/open.injectable";
+import type { CatalogCategoryRegistry } from "../../common/catalog";
 
 async function onClusterDelete(clusterId: string, openDeleteClusterDialog: OpenDeleteClusterDialog) {
   const cluster = ClusterStore.getInstance().getById(clusterId);
@@ -31,9 +30,14 @@ async function onClusterDelete(clusterId: string, openDeleteClusterDialog: OpenD
 interface Dependencies {
   openCommandDialog: (component: React.ReactElement) => void;
   openDeleteClusterDialog: OpenDeleteClusterDialog;
+  catalogCategoryRegistry: CatalogCategoryRegistry;
 }
 
-export function initCatalog({ openCommandDialog, openDeleteClusterDialog }: Dependencies) {
+export function initCatalog({
+  openCommandDialog,
+  openDeleteClusterDialog,
+  catalogCategoryRegistry,
+}: Dependencies) {
   catalogCategoryRegistry
     .getForGroupKind("entity.k8slens.dev", "WebLink")
     ?.on("catalogAddMenu", ctx => {