Merge catalog EntityName conflicts

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

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

@@ -9,14 +9,6 @@ import React from "react";
 import type { RegisteredAdditionalCategoryColumn } from "./custom-category-columns";
 import { getLabelBadges } from "./helpers";
 import { KubeObject } from "../../../common/k8s-api/kube-object";
-import { observer } from "mobx-react";
-import type { HotbarStore } from "../../../common/hotbar-store";
-import { prevDefault } from "../../utils";
-import { Avatar } from "../avatar";
-import { Icon } from "../icon";
-import { withInjectables } from "@ogre-tools/injectable-react";
-import type { CatalogEntity } from "../../api/catalog-entity";
-import hotbarStoreInjectable from "../../../common/hotbar-store.injectable";
 
 export const browseAllColumns: RegisteredAdditionalCategoryColumn[] = [
   {
@@ -32,20 +24,6 @@ export const browseAllColumns: RegisteredAdditionalCategoryColumn[] = [
   },
 ];
 
-export const nameCategoryColumn: RegisteredAdditionalCategoryColumn = {
-  id: "name",
-  priority: 0,
-  renderCell: (entity) => <EntityName entity={entity}/>,
-  titleProps: {
-    title: "Name",
-    className: styles.entityName,
-    id: "name",
-    sortBy: "name",
-  },
-  searchFilter: entity => entity.getName(),
-  sortCallback: entity => `name=${entity.getName()}`,
-};
-
 export const defaultCategoryColumns: RegisteredAdditionalCategoryColumn[] = [
   {
     id: "source",
@@ -89,55 +67,3 @@ export const defaultCategoryColumns: RegisteredAdditionalCategoryColumn[] = [
     sortCallback: entity => entity.status.phase,
   },
 ];
-
-interface Dependencies {
-  hotbarStore: HotbarStore;
-}
-
-interface EntityNameProps {
-  entity: CatalogEntity;
-}
-
-const NonInjectedEntityName = observer(({ entity, hotbarStore }: Dependencies & EntityNameProps) => {
-  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}
-      />
-    </>
-  );
-});
-
-const EntityName = withInjectables<Dependencies, EntityNameProps>(
-  NonInjectedEntityName,
-
-  {
-    getProps: (di, props) => ({
-      hotbarStore: di.inject(hotbarStoreInjectable),
-      ...props,
-    }),
-  },
-);

src/renderer/components/+catalog/name-category-column.injectable.tsx

@@ -12,8 +12,18 @@ import React from "react";
 import type { RegisteredAdditionalCategoryColumn } from "./custom-category-columns";
 import hotbarStoreInjectable from "../../../common/hotbar-store.injectable";
 import type { HotbarStore } from "../../../common/hotbar-store";
+import { observer } from "mobx-react";
+import { withInjectables } from "@ogre-tools/injectable-react";
 
-const renderEntityName = (hotbarStore: HotbarStore) => (entity: CatalogEntity) => {
+interface Dependencies {
+  hotbarStore: HotbarStore;
+}
+
+interface EntityNameProps {
+  entity: CatalogEntity;
+}
+
+const NonInjectedEntityName = observer(({ entity, hotbarStore }: Dependencies & EntityNameProps) => {
   const isItemInHotbar = hotbarStore.isAddedToActive(entity);
   const onClick = prevDefault(
     isItemInHotbar
@@ -44,15 +54,26 @@ const renderEntityName = (hotbarStore: HotbarStore) => (entity: CatalogEntity) =
       />
     </>
   );
-};
+});
+
+const EntityName = withInjectables<Dependencies, EntityNameProps>(
+  NonInjectedEntityName,
+
+  {
+    getProps: (di, props) => ({
+      hotbarStore: di.inject(hotbarStoreInjectable),
+      ...props,
+    }),
+  },
+);
 
 
 const nameCategoryColumnInjectable = getInjectable({
   id: "name-category-column",
-  instantiate: (di): RegisteredAdditionalCategoryColumn => ({
+  instantiate: (): RegisteredAdditionalCategoryColumn => ({
     id: "name",
     priority: 0,
-    renderCell: renderEntityName(di.inject(hotbarStoreInjectable)),
+    renderCell: (entity) => <EntityName entity={entity}/>,
     titleProps: {
       title: "Name",
       className: styles.entityName,