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

src/renderer/api/catalog-entity-registry.ts

@@ -120,7 +120,7 @@ export class CatalogEntityRegistry {
       const entity = this.categoryRegistry.getEntityForData(item);
 
       if (entity) {
-        this._entities.set(entity.metadata.uid, entity);
+        this._entities.set(entity.getId(), entity);
       } else {
         this.rawEntities.push(item);
       }

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}
-            colorHash={`${this.entity.metadata.name}-${this.entity.metadata.source}`}
+            title={this.entity.getName()}
+            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/cluster-settings.tsx

@@ -11,7 +11,7 @@ import type { CatalogEntity } from "../../api/catalog-entity";
 import * as components from "./components";
 
 function getClusterForEntity(entity: CatalogEntity) {
-  return ClusterStore.getInstance().getById(entity.metadata.uid);
+  return ClusterStore.getInstance().getById(entity.getId());
 }
 
 export function GeneralSettings({ entity }: EntitySettingViewProps) {

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}`}
-                  title={entity.metadata.name}
+                  colorHash={`${entity.getName()}-${entity.metadata.source}`}
+                  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}
-        title={entity.metadata.name}
+        uid={entity.getId()}
+        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-${metadata.uid}`;
+  const id = `cluster-${clusterEntity.getId()}`;
   const tooltipId = `tooltip-${id}`;
 
   return (
@@ -106,17 +105,17 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
       data-testid="sidebar-cluster-dropdown"
     >
       <Avatar
-        title={metadata.name}
-        colorHash={`${metadata.name}-${metadata.source}`}
+        title={clusterEntity.getName()}
+        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

src/renderer/initializers/catalog.tsx

@@ -50,7 +50,7 @@ export function initCatalog({ openCommandDialog }: Dependencies) {
         context.menuItems.push({
           title: "Delete",
           icon: "delete",
-          onClick: () => onClusterDelete(entity.metadata.uid),
+          onClick: () => onClusterDelete(entity.getId()),
         });
       }
     });