Add optional badge to Catalog Category label.

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

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

@@ -3,15 +3,18 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import React from "react";
 import { CatalogCategory, CatalogCategorySpec } from "../catalog";
 
-class TestCatalogCategory extends CatalogCategory {
+class TestCatalogCategoryWithoutBadge 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: [],
@@ -21,10 +24,28 @@ class TestCatalogCategory extends CatalogCategory {
   };
 }
 
+class TestCatalogCategoryWithBadge extends TestCatalogCategoryWithoutBadge {
+  getBadge() {
+    return (<div>Test Badge</div>);
+  }
+}
+
 describe("CatalogCategory", () => {
   it("returns name", () => {
-    const category = new TestCatalogCategory();
+    const category = new TestCatalogCategoryWithoutBadge();
 
     expect(category.getName()).toEqual("Test Category");
   });
+
+  it("doesn't return badge by default", () => {
+    const category = new TestCatalogCategoryWithoutBadge();
+
+    expect(category.getBadge()).toEqual(null);
+  });
+
+  it("returns a badge", () => {
+    const category = new TestCatalogCategoryWithBadge();
+
+    expect(category.getBadge()).toBeTruthy();
+  });
 });

src/common/catalog/catalog-entity.ts

@@ -180,6 +180,15 @@ export abstract class CatalogCategory extends (EventEmitter as new () => TypedEm
     return this.metadata.name;
   }
 
+  /**
+   * Get the badge of this category.
+   * Defaults to no badge.
+   * The badge is displayed next to the Category name in the Catalog Category menu
+   */
+  public getBadge(): React.ReactNode {
+    return null;
+  }
+
   /**
    * 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/__tests__/catalog-category-label.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { CatalogCategory, CatalogCategorySpec } from "../../../../common/catalog";
+import { CatalogCategoryLabel } from "../catalog-category-label";
+
+class CatalogCategoryWithoutBadge 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",
+    },
+  };
+}
+
+class CatalogCategoryWithBadge extends CatalogCategoryWithoutBadge {
+  getBadge() {
+    return (<div>Test Badge</div>);
+  }
+}
+
+describe("CatalogCategoryLabel", () => {
+  it("renders without a badge", async () => {
+    const category = new CatalogCategoryWithoutBadge();
+
+    render(<CatalogCategoryLabel category={category}/>);
+
+    expect(await screen.findByText("Test Category")).toBeInTheDocument();
+  });
+
+  it("renders with a badge", async () => {
+    const category = new CatalogCategoryWithBadge();
+
+    render(<CatalogCategoryLabel category={category}/>);
+
+    expect(await screen.findByText("Test Category")).toBeInTheDocument();
+    expect(await screen.findByText("Test Badge")).toBeInTheDocument();
+  });
+});

src/renderer/components/+catalog/catalog-category-label.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import type { CatalogCategory } from "../../../common/catalog/catalog-entity";
+
+interface CatalogCategoryLabelProps {
+  category: CatalogCategory;
+}
+
+/**
+ * Display label for Catalog Category for the Catalog menu
+ */
+export const CatalogCategoryLabel = ({ category }: CatalogCategoryLabelProps) =>
+  (
+    <div className="flex">
+      <div>{category.metadata.name}</div>
+      <div className="flex items-center">{category.getBadge()}</div>
+    </div>
+  );

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

@@ -14,6 +14,7 @@ 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";
 
 export interface CatalogMenuProps {
   activeItem: string;
@@ -66,7 +67,7 @@ export const CatalogMenu = observer((props: CatalogMenuProps) => {
                   icon={getCategoryIcon(category)}
                   key={category.getId()}
                   nodeId={category.getId()}
-                  label={category.metadata.name}
+                  label={<CatalogCategoryLabel category={category} />}
                   data-testid={`${category.getId()}-tab`}
                   onClick={() => props.onItemClick(category.getId())}
                 />