From b5d841eb4eea130c73e20750a1ae3c8542797898 Mon Sep 17 00:00:00 2001
From: Panu Horsmalahti <phorsmalahti@mirantis.com>
Date: Wed, 6 Apr 2022 14:46:08 +0300
Subject: [PATCH] Use category as prop in CatalogCategoryLabel

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>
---
 .../__tests__/catalog-category-label.test.tsx       |  4 ++--
 .../components/+catalog/catalog-category-label.tsx  | 13 ++++++++-----
 src/renderer/components/+catalog/catalog-menu.tsx   |  2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/+catalog/__tests__/catalog-category-label.test.tsx b/src/renderer/components/+catalog/__tests__/catalog-category-label.test.tsx
index 41796e3226..015929b643 100644
--- a/src/renderer/components/+catalog/__tests__/catalog-category-label.test.tsx
+++ b/src/renderer/components/+catalog/__tests__/catalog-category-label.test.tsx
@@ -37,7 +37,7 @@ describe("CatalogCategoryLabel", () => {
   it("renders without a badge", async () => {
     const category = new CatalogCategoryWithoutBadge();
 
-    render(<CatalogCategoryLabel label={category.metadata.name} badge={category.getBadge()}/>);
+    render(<CatalogCategoryLabel category={category}/>);
 
     expect(await screen.findByText("Test Category")).toBeInTheDocument();
   });
@@ -45,7 +45,7 @@ describe("CatalogCategoryLabel", () => {
   it("renders with a badge", async () => {
     const category = new CatalogCategoryWithBadge();
 
-    render(<CatalogCategoryLabel label={category.metadata.name} badge={category.getBadge()}/>);
+    render(<CatalogCategoryLabel category={category}/>);
 
     expect(await screen.findByText("Test Category")).toBeInTheDocument();
     expect(await screen.findByText("Test Badge")).toBeInTheDocument();
diff --git a/src/renderer/components/+catalog/catalog-category-label.tsx b/src/renderer/components/+catalog/catalog-category-label.tsx
index 46222490c8..170d8e92b6 100644
--- a/src/renderer/components/+catalog/catalog-category-label.tsx
+++ b/src/renderer/components/+catalog/catalog-category-label.tsx
@@ -3,19 +3,22 @@
  * 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 {
-  label: string | React.ReactNode;
-  badge?: React.ReactNode;
+  category: CatalogCategory;
 }
 
 /**
  * Display label for Catalog Category for the Catalog menu
  */
-export const CatalogCategoryLabel = ({ label, badge }: CatalogCategoryLabelProps) =>
-  (
+export const CatalogCategoryLabel = ({ category }: CatalogCategoryLabelProps) => {
+  const badge = category.getBadge();
+
+  return (
     <div className="flex">
-      <div>{label}</div>
+      <div>{category.metadata.name}</div>
       {badge ? (<div className="flex items-center">{badge}</div>) : null}
     </div>
   );
+};
diff --git a/src/renderer/components/+catalog/catalog-menu.tsx b/src/renderer/components/+catalog/catalog-menu.tsx
index eea6e012b1..36590b82a8 100644
--- a/src/renderer/components/+catalog/catalog-menu.tsx
+++ b/src/renderer/components/+catalog/catalog-menu.tsx
@@ -67,7 +67,7 @@ export const CatalogMenu = observer((props: CatalogMenuProps) => {
                   icon={getCategoryIcon(category)}
                   key={category.getId()}
                   nodeId={category.getId()}
-                  label={<CatalogCategoryLabel label={category.metadata.name} badge={category.getBadge()} />}
+                  label={<CatalogCategoryLabel category={category}/>}
                   data-testid={`${category.getId()}-tab`}
                   onClick={() => props.onItemClick(category.getId())}
                 />