Ensure that CatalogEntity.getName() and CatalogEntity.getId() are always used

- Also remove CatalogEntityItem again as some PR accidentally readded it

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/common/catalog-entities/web-link.ts

@@ -38,9 +38,9 @@ export class WebLink extends CatalogEntity<CatalogEntityMetadata, WebLinkStatus,
       context.menuItems.push({
         title: "Delete",
         icon: "delete",
-        onClick: async () => WeblinkStore.getInstance().removeById(this.metadata.uid),
+        onClick: async () => WeblinkStore.getInstance().removeById(this.getId()),
         confirm: {
-          message: `Remove Web Link "${this.metadata.name}" from ${productName}?`,
+          message: `Remove Web Link "${this.getName()}" from ${productName}?`,
         },
       });
     }

src/common/catalog/catalog-entity.ts

@@ -315,11 +315,24 @@ export abstract class CatalogEntity<
   @observable status: Status;
   @observable spec: Spec;
 
-  constructor(data: CatalogEntityData<Metadata, Status, Spec>) {
+  constructor({ metadata, status, spec }: CatalogEntityData<Metadata, Status, Spec>) {
     makeObservable(this);
-    this.metadata = data.metadata;
+
-    this.status = data.status;
+    if (!metadata || typeof metadata !== "object") {
-    this.spec = data.spec;
+      throw new TypeError("CatalogEntity's metadata must be a defined object");
+    }
+
+    if (!status || typeof status !== "object") {
+      throw new TypeError("CatalogEntity's status must be a defined object");
+    }
+
+    if (!spec || typeof spec !== "object") {
+      throw new TypeError("CatalogEntity's spec must be a defined object");
+    }
+
+    this.metadata = metadata;
+    this.status = status;
+    this.spec = spec;
   }
 
   /**

src/common/hotbar-store.ts

@@ -153,28 +153,28 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
   @action
   addToHotbar(item: CatalogEntity, cellIndex?: number) {
     const hotbar = this.getActive();
-    const uid = item.metadata?.uid;
+    const uid = item.getId();
-    const name = item.metadata?.name;
+    const name = item.getName();
 
     if (typeof uid !== "string") {
-      throw new TypeError("CatalogEntity.metadata.uid must be a string");
+      throw new TypeError("CatalogEntity's ID must be a string");
     }
 
     if (typeof name !== "string") {
-      throw new TypeError("CatalogEntity.metadata.name must be a string");
+      throw new TypeError("CatalogEntity's NAME must be a string");
     }
 
-    const newItem = { entity: {
-      uid,
-      name,
-      source: item.metadata.source,
-    }};
-
-
     if (this.isAddedToActive(item)) {
       return;
     }
 
+    const entity = {
+      uid,
+      name,
+      source: item.metadata.source,
+    };
+    const newItem = { entity };
+
     if (cellIndex === undefined) {
       // Add item to empty cell
       const emptyCellIndex = hotbar.items.indexOf(null);
@@ -277,11 +277,14 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
   }
 
   /**
-   * Checks if entity already pinned to hotbar
+   * Checks if entity already pinned to the active hotbar
-   * @returns boolean
    */
-  isAddedToActive(entity: CatalogEntity) {
+  isAddedToActive(entity: CatalogEntity | null | undefined): boolean {
-    return !!this.getActive().items.find(item => item?.entity.uid === entity.metadata.uid);
+    if (!entity) {
+      return false;
+    }
+
+    return this.getActive().items.findIndex(item => item?.entity.uid === entity.getId()) >= 0;
   }
 
   getDisplayLabel(hotbar: Hotbar): string {

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

@@ -1,100 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import styles from "./catalog.module.scss";
-import React from "react";
-import { action, computed } from "mobx";
-import { CatalogEntity } from "../../api/catalog-entity";
-import type { ItemObject } from "../../../common/item.store";
-import { Badge } from "../badge";
-import { navigation } from "../../navigation";
-import { searchUrlParam } from "../input";
-import { KubeObject } from "../../../common/k8s-api/kube-object";
-import type { CatalogEntityRegistry } from "../../api/catalog-entity-registry";
-
-export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
-  constructor(public entity: T, private registry: CatalogEntityRegistry) {
-    if (!(entity instanceof CatalogEntity)) {
-      throw Object.assign(new TypeError("CatalogEntityItem cannot wrap a non-CatalogEntity type"), { typeof: typeof entity, prototype: Object.getPrototypeOf(entity) });
-    }
-  }
-
-  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
-          scrollable
-          className={styles.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() {
-    this.registry.onRun(this.entity);
-  }
-
-  @action
-  async onContextMenuOpen(ctx: any) {
-    return this.entity.onContextMenuOpen(ctx);
-  }
-}

src/renderer/components/+entity-settings/entity-settings.tsx

@@ -81,14 +81,14 @@ export class EntitySettings extends React.Component<Props> {
       <>
         <div className="flex items-center pb-8">
           <Avatar
-            title={this.entity.metadata.name}
+            title={this.entity.getName()}
-            colorHash={`${this.entity.metadata.name}-${this.entity.metadata.source}`}
+            colorHash={`${this.entity.getName()}-${this.entity.metadata.source}`}
             src={this.entity.spec.icon?.src}
             className={styles.settingsAvatar}
             size={40}
           />
           <div className={styles.entityName}>
-            {this.entity.metadata.name}
+            {this.entity.getName()}
           </div>
         </div>
         <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>

src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx

@@ -75,8 +75,8 @@ export class ClusterIconSetting extends React.Component<Props> {
               accept="image/*"
               label={
                 <Avatar
-                  colorHash={`${entity.metadata.name}-${entity.metadata.source}`}
+                  colorHash={`${entity.getName()}-${entity.metadata.source}`}
-                  title={entity.metadata.name}
+                  title={entity.getName()}
                   src={entity.spec.icon?.src}
                   size={53}
                 />

src/renderer/components/cluster-settings/components/cluster-name-setting.tsx

@@ -29,7 +29,7 @@ export class ClusterNameSetting extends React.Component<Props> {
   componentDidMount() {
     disposeOnUnmount(this,
       autorun(() => {
-        this.name = this.props.cluster.preferences.clusterName || this.props.entity.metadata.name;
+        this.name = this.props.cluster.preferences.clusterName || this.props.entity.getName();
       }),
     );
   }

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -73,7 +73,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
 
     menuItems.unshift({
       title: "Remove from Hotbar",
-      onClick: () => this.props.remove(this.props.entity.metadata.uid),
+      onClick: () => this.props.remove(this.props.entity.getId()),
     });
 
     this.contextMenu.menuItems = menuItems;
@@ -90,8 +90,8 @@ export class HotbarEntityIcon extends React.Component<Props> {
 
     return (
       <HotbarIcon
-        uid={entity.metadata.uid}
+        uid={entity.getId()}
-        title={entity.metadata.name}
+        title={entity.getName()}
         source={entity.metadata.source}
         src={entity.spec.icon?.src}
         material={entity.spec.icon?.material}
@@ -101,7 +101,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
         onMenuOpen={() => this.onMenuOpen()}
         disabled={!entity}
         menuItems={this.contextMenu.menuItems}
-        tooltip={`${entity.metadata.name} (${entity.metadata.source})`}
+        tooltip={`${entity.getName()} (${entity.metadata.source})`}
         {...elemProps}
       >
         { this.ledIcon }

src/renderer/components/layout/sidebar-cluster.tsx

@@ -73,7 +73,7 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
       ? "Remove from Hotbar"
       : "Add to Hotbar";
     const onClick = isAddedToActive
-      ? () => hotbarStore.removeFromHotbar(metadata.uid)
+      ? () => hotbarStore.removeFromHotbar(clusterEntity.getId())
       : () => hotbarStore.addToHotbar(clusterEntity);
 
     contextMenu.menuItems = [{ title, onClick }];
@@ -92,8 +92,7 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
     setOpened(!opened);
   };
 
-  const { metadata, spec } = clusterEntity;
+  const id = `cluster-${clusterEntity.getId()}`;
-  const id = `cluster-${metadata.uid}`;
   const tooltipId = `tooltip-${id}`;
 
   return (
@@ -106,17 +105,17 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
       data-testid="sidebar-cluster-dropdown"
     >
       <Avatar
-        title={metadata.name}
+        title={clusterEntity.getName()}
-        colorHash={`${metadata.name}-${metadata.source}`}
+        colorHash={`${clusterEntity.getName()}-${clusterEntity.metadata.source}`}
         size={40}
-        src={spec.icon?.src}
+        src={clusterEntity.spec.icon?.src}
         className={styles.avatar}
       />
       <div className={styles.clusterName} id={tooltipId}>
-        {metadata.name}
+        {clusterEntity.getName()}
       </div>
       <Tooltip targetId={tooltipId}>
-        {metadata.name}
+        {clusterEntity.getName()}
       </Tooltip>
       <Icon material="arrow_drop_down" className={styles.dropdown}/>
       <Menu