Move CatalogEntityItem to a separate folder (easier to mock)

Signed-off-by: Hung-Han (Henry) Chen <chenhungh@gmail.com>

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -29,7 +29,7 @@ import { Icon } from "../icon";
 import { CatalogEntityDrawerMenu } from "./catalog-entity-drawer-menu";
 import { CatalogEntityDetailRegistry } from "../../../extensions/registries";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
-import type { CatalogEntityItem } from "./catalog-entity.store";
+import type { CatalogEntityItem } from "./catalog-entity-item";
 import { isDevelopment } from "../../../common/vars";
 
 interface Props<T extends CatalogEntity> {
@@ -69,7 +69,9 @@ export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Pro
                 background={item.entity.spec.icon?.background}
                 disabled={!item?.enabled}
                 onClick={() => item.onRun(catalogEntityRunContext)}
-                size={128} />
+                size={128}
+                data-testid="detail-panel-hot-bar-icon"
+              />
               {item?.enabled && (
                 <div className="IconHint">
                   Click to open

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

@@ -30,7 +30,7 @@ import { MenuItem } from "../menu";
 import { ConfirmDialog } from "../confirm-dialog";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { Icon } from "../icon";
-import type { CatalogEntityItem } from "./catalog-entity.store";
+import type { CatalogEntityItem } from "./catalog-entity-item";
 
 export interface CatalogEntityDrawerMenuProps<T extends CatalogEntity> extends MenuActionsProps {
   item: CatalogEntityItem<T> | null | undefined;

src/renderer/components/+catalog/catalog-entity.store.tsx

@@ -19,103 +19,13 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import styles from "./catalog.module.css";
+import { computed, IReactionDisposer, makeObservable, observable, reaction } from "mobx";
-
-import React from "react";
-import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from "mobx";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import type { CatalogEntity, CatalogEntityActionContext } from "../../api/catalog-entity";
+import type { CatalogEntity } from "../../api/catalog-entity";
-import { ItemObject, ItemStore } from "../../../common/item.store";
+import { ItemStore } from "../../../common/item.store";
 import { CatalogCategory, catalogCategoryRegistry } from "../../../common/catalog";
 import { autoBind } from "../../../common/utils";
-import { Badge } from "../badge";
+import { CatalogEntityItem } from "./catalog-entity-item";
-import { navigation } from "../../navigation";
-import { searchUrlParam } from "../input";
-import { makeCss } from "../../../common/utils/makeCss";
-import { KubeObject } from "../../../common/k8s-api/kube-object";
-
-const css = makeCss(styles);
-
-export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
-  constructor(public entity: T) {}
-
-  get kind() {
-    return this.entity.kind;
-  }
-
-  get apiVersion() {
-    return this.entity.apiVersion;
-  }
-
-  get name() {
-    return this.entity.metadata.name;
-  }
-
-  getName() {
-    return this.entity.metadata.name;
-  }
-
-  get id() {
-    return this.entity.metadata.uid;
-  }
-
-  getId() {
-    return this.id;
-  }
-
-  @computed get phase() {
-    return this.entity.status.phase;
-  }
-
-  get enabled() {
-    return this.entity.status.enabled ?? true;
-  }
-
-  get labels() {
-    return KubeObject.stringifyLabels(this.entity.metadata.labels);
-  }
-
-  getLabelBadges(onClick?: React.MouseEventHandler<any>) {
-    return this.labels
-      .map(label => (
-        <Badge
-          className={css.badge}
-          key={label}
-          label={label}
-          title={label}
-          onClick={(event) => {
-            navigation.searchParams.set(searchUrlParam.name, label);
-            onClick?.(event);
-            event.stopPropagation();
-          }}
-          expandable={false}
-        />
-      ));
-  }
-
-  get source() {
-    return this.entity.metadata.source || "unknown";
-  }
-
-  get searchFields() {
-    return [
-      this.name,
-      this.id,
-      this.phase,
-      `source=${this.source}`,
-      ...this.labels,
-    ];
-  }
-
-  onRun(ctx: CatalogEntityActionContext) {
-    this.entity.onRun(ctx);
-  }
-
-  @action
-  async onContextMenuOpen(ctx: any) {
-    return this.entity.onContextMenuOpen(ctx);
-  }
-}
 
 export class CatalogEntityStore extends ItemStore<CatalogEntityItem<CatalogEntity>> {
   constructor() {

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

@@ -25,7 +25,8 @@ import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ItemListLayout } from "../item-object-list";
 import { action, makeObservable, observable, reaction, runInAction, when } from "mobx";
-import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store";
+import { CatalogEntityStore } from "./catalog-entity.store";
+import type { CatalogEntityItem } from "./catalog-entity-item";
 import { navigate } from "../../navigation";
 import { MenuItem, MenuActions } from "../menu";
 import { CatalogEntityContextMenu, CatalogEntityContextMenuContext, catalogEntityRunContext } from "../../api/catalog-entity";