Emit AppEvent when opening Catalog and changing Catalog Category (#5071)

* Emit AppEvent when opening Catalog and changing Catalog Category.

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

* Add getName method to CatalogCategory

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

src/common/__tests__/catalog-entity.test.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { CatalogCategory, CatalogCategorySpec } from "../catalog";
+
+class TestCatalogCategory extends CatalogCategory {
+  public readonly apiVersion = "catalog.k8slens.dev/v1alpha1";
+  public readonly kind = "CatalogCategory";
+  public metadata = {
+    name: "Test Category",
+    icon: "",
+  };
+  public spec: CatalogCategorySpec = {
+    group: "entity.k8slens.dev",
+    versions: [],
+    names: {
+      kind: "Test",
+    },
+  };
+}
+
+describe("CatalogCategory", () => {
+  it("returns name", () => {
+    const category = new TestCatalogCategory();
+
+    expect(category.getName()).toEqual("Test Category");
+  });
+});

src/common/catalog/catalog-entity.ts

@@ -173,6 +173,13 @@ export abstract class CatalogCategory extends (EventEmitter as new () => TypedEm
     return `${this.spec.group}/${this.spec.names.kind}`;
   }
 
+  /**
+   * Get the name of this category
+   */
+  public getName(): string {
+    return this.metadata.name;
+  }
+
   /**
    * Add a filter for menu items of catalogAddMenu
    * @param fn The function that should return a truthy value if that menu item should be displayed

src/renderer/components/+catalog/catalog.test.tsx

@@ -25,6 +25,8 @@ 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 type { AppEvent } from "../../../common/app-event-bus/event-bus";
+import appEventBusInjectable from "../../../common/app-event-bus/app-event-bus.injectable";
 
 mockWindow();
 jest.mock("electron", () => ({
@@ -102,6 +104,7 @@ describe("<Catalog />", () => {
   let di: DiContainer;
   let catalogEntityStore: CatalogEntityStore;
   let catalogEntityRegistry: CatalogEntityRegistry;
+  let emitEvent: (event: AppEvent) => void;
   let render: DiRender;
 
   beforeEach(async () => {
@@ -125,6 +128,12 @@ describe("<Catalog />", () => {
 
     di.override(catalogEntityRegistryInjectable, () => catalogEntityRegistry);
 
+    emitEvent = jest.fn();
+
+    di.override(appEventBusInjectable, () => ({
+      emit: emitEvent,
+    }));
+
     catalogEntityStore = di.inject(catalogEntityStoreInjectable);
   });
 
@@ -320,4 +329,39 @@ describe("<Catalog />", () => {
 
     userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
   });
+
+  it("emits catalog open AppEvent", () => {
+    render(
+      <Catalog
+        history={history}
+        location={mockLocation}
+        match={mockMatch}
+      />,
+    );
+
+    expect(emitEvent).toHaveBeenCalledWith( {
+      action: "open",
+      name: "catalog",
+    });
+  });
+
+  it("emits catalog change AppEvent when changing the category", () => {
+    render(
+      <Catalog
+        history={history}
+        location={mockLocation}
+        match={mockMatch}
+      />,
+    );
+
+    userEvent.click(screen.getByText("Web Links"));
+
+    expect(emitEvent).toHaveBeenLastCalledWith({
+      action: "change-category",
+      name: "catalog",
+      params: {
+        category: "Web Links",
+      },
+    });
+  });
 });

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

@@ -36,6 +36,8 @@ 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 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> {}
 
@@ -44,6 +46,7 @@ interface Dependencies {
   catalogEntityStore: CatalogEntityStore;
   getCategoryColumns: (params: GetCategoryColumnsParams) => CategoryColumns;
   customCategoryViews: IComputedValue<Map<string, Map<string, RegisteredCustomCategoryViewDecl>>>;
+  emitEvent: (event: AppEvent) => void;
 }
 
 @observer
@@ -104,6 +107,11 @@ class NonInjectedCatalog extends React.Component<CatalogProps & Dependencies> {
         });
       }
     }));
+
+    this.props.emitEvent({
+      name: "catalog",
+      action: "open",
+    });
   }
 
   addToHotbar(entity: CatalogEntity): void {
@@ -146,6 +154,14 @@ class NonInjectedCatalog extends React.Component<CatalogProps & Dependencies> {
   onTabChange = action((tabId: string | null) => {
     const activeCategory = this.categories.find(category => category.getId() === tabId);
 
+    this.props.emitEvent({
+      name: "catalog",
+      action: "change-category",
+      params: {
+        category: activeCategory ? activeCategory.getName() : "Browse",
+      },
+    });
+
     if (activeCategory) {
       navigate(catalogURL({ params: { group: activeCategory.spec.group, kind: activeCategory.spec.names.kind }}));
     } else {
@@ -311,6 +327,7 @@ export const Catalog = withInjectables<Dependencies, CatalogProps>( NonInjectedC
     catalogPreviousActiveTabStorage: di.inject(catalogPreviousActiveTabStorageInjectable),
     getCategoryColumns: di.inject(getCategoryColumnsInjectable),
     customCategoryViews: di.inject(customCategoryViewsInjectable),
+    emitEvent: di.inject(appEventBusInjectable).emit,
     ...props,
   }),
 });