Make catalog pin icon observable

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -20,14 +20,11 @@ import { CatalogAddButton } from "./catalog-add-button";
 import type { RouteComponentProps } from "react-router";
 import { Notifications } from "../notifications";
 import { MainLayout } from "../layout/main-layout";
-import { prevDefault } from "../../utils";
 import { CatalogEntityDetails } from "./catalog-entity-details";
 import { browseCatalogTab, catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
 import { RenderDelay } from "../render-delay/render-delay";
-import { Icon } from "../icon";
 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";
@@ -188,34 +185,6 @@ class NonInjectedCatalog extends React.Component<CatalogProps & Dependencies> {
     );
   };
 
-  renderName(entity: CatalogEntity) {
-    const isItemInHotbar = HotbarStore.getInstance().isAddedToActive(entity);
-
-    return (
-      <>
-        <Avatar
-          title={entity.getName()}
-          colorHash={`${entity.getName()}-${entity.getSource()}`}
-          src={entity.spec.icon?.src}
-          background={entity.spec.icon?.background}
-          className={styles.catalogAvatar}
-          size={24}
-        >
-          {entity.spec.icon?.material && <Icon material={entity.spec.icon?.material} small/>}
-        </Avatar>
-        <span>{entity.getName()}</span>
-        <Icon
-          small
-          className={styles.pinIcon}
-          material={!isItemInHotbar && "push_pin"}
-          svg={isItemInHotbar ? "push_off" : "push_pin"}
-          tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
-          onClick={prevDefault(() => isItemInHotbar ? this.removeFromHotbar(entity) : this.addToHotbar(entity))}
-        />
-      </>
-    );
-  }
-
   renderViews = () => {
     const { catalogEntityStore, customCategoryViews } = this.props;
     const { activeCategory } = catalogEntityStore;

src/renderer/components/+catalog/internal-category-columns.tsx

@@ -14,40 +14,7 @@ import { Icon } from "../icon";
 import { prevDefault } from "../../utils";
 import { getLabelBadges } from "./helpers";
 import { KubeObject } from "../../../common/k8s-api/kube-object";
-
+import { observer } from "mobx-react";
-function renderEntityName(entity: CatalogEntity) {
-  const hotbarStore = HotbarStore.getInstance();
-  const isItemInHotbar = hotbarStore.isAddedToActive(entity);
-  const onClick = prevDefault(
-    isItemInHotbar
-      ? () => hotbarStore.removeFromHotbar(entity.getId())
-      : () => hotbarStore.addToHotbar(entity),
-  );
-
-  return (
-    <>
-      <Avatar
-        title={entity.getName()}
-        colorHash={`${entity.getName()}-${entity.getSource()}`}
-        src={entity.spec.icon?.src}
-        background={entity.spec.icon?.background}
-        className={styles.catalogAvatar}
-        size={24}
-      >
-        {entity.spec.icon?.material && <Icon material={entity.spec.icon?.material} small/>}
-      </Avatar>
-      <span>{entity.getName()}</span>
-      <Icon
-        small
-        className={styles.pinIcon}
-        material={!isItemInHotbar && "push_pin"}
-        svg={isItemInHotbar ? "push_off" : "push_pin"}
-        tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
-        onClick={onClick}
-      />
-    </>
-  );
-}
 
 export const browseAllColumns: RegisteredAdditionalCategoryColumn[] = [
   {
@@ -66,7 +33,7 @@ export const browseAllColumns: RegisteredAdditionalCategoryColumn[] = [
 export const nameCategoryColumn: RegisteredAdditionalCategoryColumn = {
   id: "name",
   priority: 0,
-  renderCell: renderEntityName,
+  renderCell: (entity) => <EntityName entity={entity}/>,
   titleProps: {
     title: "Name",
     className: styles.entityName,
@@ -119,3 +86,37 @@ export const defaultCategoryColumns: RegisteredAdditionalCategoryColumn[] = [
     searchFilter: entity => entity.status.phase,
   },
 ];
+
+const EntityName = observer(({ entity }: { entity: CatalogEntity }) => {
+  const hotbarStore = HotbarStore.getInstance();
+  const isItemInHotbar = hotbarStore.isAddedToActive(entity);
+  const onClick = prevDefault(
+    isItemInHotbar
+      ? () => hotbarStore.removeFromHotbar(entity.getId())
+      : () => hotbarStore.addToHotbar(entity),
+  );
+
+  return (
+    <>
+      <Avatar
+        title={entity.getName()}
+        colorHash={`${entity.getName()}-${entity.getSource()}`}
+        src={entity.spec.icon?.src}
+        background={entity.spec.icon?.background}
+        className={styles.catalogAvatar}
+        size={24}
+      >
+        {entity.spec.icon?.material && <Icon material={entity.spec.icon?.material} small/>}
+      </Avatar>
+      <span>{entity.getName()}</span>
+      <Icon
+        small
+        className={styles.pinIcon}
+        material={!isItemInHotbar && "push_pin"}
+        svg={isItemInHotbar ? "push_off" : "push_pin"}
+        tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
+        onClick={onClick}
+      />
+    </>
+  );
+});