Add context menu entry for deleting local clusters (#2923)

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

@@ -26,28 +26,18 @@ import { Drawer, DrawerItem, DrawerItemLabels } from "../drawer";
 import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
 import type { CatalogCategory } from "../../../common/catalog";
 import { Icon } from "../icon";
-import { KubeObject } from "../../api/kube-object";
 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";
 
-interface Props {
-  entity: CatalogEntity;
+interface Props<T extends CatalogEntity> {
+  item: CatalogEntityItem<T> | null | undefined;
   hideDetails(): void;
 }
 
 @observer
-export class CatalogEntityDetails extends Component<Props> {
-  private abortController?: AbortController;
-
-  constructor(props: Props) {
-    super(props);
-  }
-
-  componentWillUnmount() {
-    this.abortController?.abort();
-  }
-
+export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Props<T>> {
   categoryIcon(category: CatalogCategory) {
     if (category.metadata.icon.includes("<svg")) {
       return <Icon svg={category.metadata.icon} smallest />;
@@ -56,16 +46,10 @@ export class CatalogEntityDetails extends Component<Props> {
     }
   }
 
-  openEntity() {
-    this.props.entity.onRun(catalogEntityRunContext);
-  }
-
-  renderContent() {
-    const { entity } = this.props;
-    const labels = KubeObject.stringifyLabels(entity.metadata.labels);
-    const detailItems = CatalogEntityDetailRegistry.getInstance().getItemsForKind(entity.kind, entity.apiVersion);
-    const details = detailItems.map((item, index) => {
-      return <item.components.Details entity={entity} key={index}/>;
+  renderContent(item: CatalogEntityItem<T>) {
+    const detailItems = CatalogEntityDetailRegistry.getInstance().getItemsForKind(item.kind, item.apiVersion);
+    const details = detailItems.map(({ components }, index) => {
+      return <components.Details entity={item.entity} key={index}/>;
     });
 
     const showDetails = detailItems.find((item) => item.priority > 999) === undefined;
@@ -76,29 +60,35 @@ export class CatalogEntityDetails extends Component<Props> {
           <div className="flex CatalogEntityDetails">
             <div className="EntityIcon box top left">
               <HotbarIcon
-                uid={entity.metadata.uid}
-                title={entity.metadata.name}
-                source={entity.metadata.source}
-                icon={entity.spec.iconData}
-                onClick={() => this.openEntity()}
+                uid={item.id}
+                title={item.name}
+                source={item.source}
+                icon={item.entity.spec.iconData}
+                disabled={!item?.enabled}
+                onClick={() => item.onRun(catalogEntityRunContext)}
                 size={128} />
-              <div className="IconHint">
-                Click to open
-              </div>
+              {item?.enabled && (
+                <div className="IconHint">
+                  Click to open
+                </div>
+              )}
             </div>
             <div className="box grow EntityMetadata">
               <DrawerItem name="Name">
-                {entity.metadata.name}
+                {item.name}
               </DrawerItem>
               <DrawerItem name="Kind">
-                {entity.kind}
+                {item.kind}
               </DrawerItem>
               <DrawerItem name="Source">
-                {entity.metadata.source}
+                {item.source}
+              </DrawerItem>
+              <DrawerItem name="Status">
+                {item.phase}
               </DrawerItem>
               <DrawerItemLabels
                 name="Labels"
-                labels={labels}
+                labels={item.labels}
               />
             </div>
           </div>
@@ -111,8 +101,8 @@ export class CatalogEntityDetails extends Component<Props> {
   }
 
   render() {
-    const { entity, hideDetails } = this.props;
-    const title = `${entity.kind}: ${entity.metadata.name}`;
+    const { item, hideDetails } = this.props;
+    const title = `${item.kind}: ${item.name}`;
 
     return (
       <Drawer
@@ -120,10 +110,10 @@ export class CatalogEntityDetails extends Component<Props> {
         usePortal={true}
         open={true}
         title={title}
-        toolbar={<CatalogEntityDrawerMenu entity={entity} key={entity.getId()} />}
+        toolbar={<CatalogEntityDrawerMenu item={item} key={item.getId()} />}
         onClose={hideDetails}
       >
-        {this.renderContent()}
+        {item && this.renderContent(item)}
       </Drawer>
     );
   }

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

@@ -30,9 +30,10 @@ 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";
 
 export interface CatalogEntityDrawerMenuProps<T extends CatalogEntity> extends MenuActionsProps {
-  entity: T | null | undefined;
+  item: CatalogEntityItem<T> | null | undefined;
 }
 
 @observer
@@ -47,9 +48,9 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
   componentDidMount() {
     this.contextMenu = {
       menuItems: [],
-      navigate: (url: string) => navigate(url)
+      navigate: (url: string) => navigate(url),
     };
-    this.props.entity?.onContextMenuOpen(this.contextMenu);
+    this.props.item?.onContextMenuOpen(this.contextMenu);
   }
 
   onMenuItemClick(menuItem: CatalogEntityContextMenu) {
@@ -107,19 +108,19 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
   }
 
   render() {
-    if (!this.contextMenu) {
+    const { className, item: entity, ...menuProps } = this.props;
+    
+    if (!this.contextMenu || !entity.enabled) {
       return null;
     }
 
-    const { className, entity, ...menuProps } = this.props;
-
     return (
       <MenuActions
         className={cssNames("CatalogEntityDrawerMenu", className)}
         toolbar
         {...menuProps}
       >
-        {this.getMenuItems(entity)}
+        {this.getMenuItems(entity.entity)}
       </MenuActions>
     );
   }

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

@@ -25,13 +25,17 @@ import type { CatalogEntity, CatalogEntityActionContext } from "../../api/catalo
 import { ItemObject, ItemStore } from "../../item.store";
 import { CatalogCategory, catalogCategoryRegistry } from "../../../common/catalog";
 import { autoBind } from "../../../common/utils";
-export class CatalogEntityItem implements ItemObject {
-  constructor(public entity: CatalogEntity) {}
+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;
   }
@@ -52,6 +56,10 @@ export class CatalogEntityItem implements ItemObject {
     return this.entity.status.phase;
   }
 
+  get enabled() {
+    return this.entity.status.enabled ?? true;
+  }
+
   get labels() {
     const labels: string[] = [];
 
@@ -87,7 +95,7 @@ export class CatalogEntityItem implements ItemObject {
   }
 }
 
-export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
+export class CatalogEntityStore extends ItemStore<CatalogEntityItem<CatalogEntity>> {
   constructor() {
     super();
     makeObservable(this);
@@ -95,6 +103,7 @@ export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
   }
 
   @observable activeCategory?: CatalogCategory;
+  @observable selectedItemId?: string;
 
   @computed get entities() {
     if (!this.activeCategory) {
@@ -104,6 +113,10 @@ export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
     return catalogEntityRegistry.getItemsForCategory(this.activeCategory).map(entity => new CatalogEntityItem(entity));
   }
 
+  @computed get selectedItem() {
+    return this.entities.find(e => e.getId() === this.selectedItemId);
+  }
+
   watch() {
     const disposers: IReactionDisposer[] = [
       reaction(() => this.entities, () => this.loadAll()),

src/renderer/components/+catalog/catalog.module.css

@@ -44,7 +44,7 @@
   color: var(--colorSuccess);
 }
 
-.disconnected {
+.disconnected, .deleting {
   color: var(--halfGray);
 }
 

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

@@ -32,7 +32,7 @@ import type { CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "
 import { Badge } from "../badge";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { ConfirmDialog } from "../confirm-dialog";
-import { catalogCategoryRegistry } from "../../../common/catalog";
+import { catalogCategoryRegistry, CatalogEntity } from "../../../common/catalog";
 import { CatalogAddButton } from "./catalog-add-button";
 import type { RouteComponentProps } from "react-router";
 import { Notifications } from "../notifications";
@@ -59,7 +59,6 @@ export class Catalog extends React.Component<Props> {
   @observable private catalogEntityStore?: CatalogEntityStore;
   @observable private contextMenu: CatalogEntityContextMenuContext;
   @observable activeTab?: string;
-  @observable selectedItem?: CatalogEntityItem;
 
   constructor(props: Props) {
     super(props);
@@ -79,7 +78,7 @@ export class Catalog extends React.Component<Props> {
   async componentDidMount() {
     this.contextMenu = {
       menuItems: observable.array([]),
-      navigate: (url: string) => navigate(url)
+      navigate: (url: string) => navigate(url),
     };
     this.catalogEntityStore = new CatalogEntityStore();
     disposeOnUnmount(this, [
@@ -103,13 +102,13 @@ export class Catalog extends React.Component<Props> {
     ]);
   }
 
-  addToHotbar(item: CatalogEntityItem): void {
+  addToHotbar(item: CatalogEntityItem<CatalogEntity>): void {
     HotbarStore.getInstance().addToHotbar(item.entity);
   }
 
-  onDetails(item: CatalogEntityItem) {
-    this.selectedItem = item;
-  }
+  onDetails = (item: CatalogEntityItem<CatalogEntity>) => {
+    this.catalogEntityStore.selectedItemId = item.getId();
+  };
 
   onMenuItemClick(menuItem: CatalogEntityContextMenu) {
     if (menuItem.confirm) {
@@ -144,7 +143,7 @@ export class Catalog extends React.Component<Props> {
     return <CatalogMenu activeItem={this.activeTab} onItemClick={this.onTabChange}/>;
   }
 
-  renderItemMenu = (item: CatalogEntityItem) => {
+  renderItemMenu = (item: CatalogEntityItem<CatalogEntity>) => {
     const onOpen = () => {
       this.contextMenu.menuItems = [];
 
@@ -167,7 +166,7 @@ export class Catalog extends React.Component<Props> {
     );
   };
 
-  renderIcon(item: CatalogEntityItem) {
+  renderIcon(item: CatalogEntityItem<CatalogEntity>) {
     return (
       <HotbarIcon
         uid={item.getId()}
@@ -188,12 +187,12 @@ export class Catalog extends React.Component<Props> {
         store={this.catalogEntityStore}
         tableId="catalog-items"
         sortingCallbacks={{
-          [sortBy.name]: (item: CatalogEntityItem) => item.name,
-          [sortBy.source]: (item: CatalogEntityItem) => item.source,
-          [sortBy.status]: (item: CatalogEntityItem) => item.phase,
+          [sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
+          [sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
+          [sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
         }}
         searchFilters={[
-          (entity: CatalogEntityItem) => entity.searchFields,
+          (entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
         ]}
         renderTableHeader={[
           { title: "", className: css.iconCell },
@@ -202,14 +201,17 @@ export class Catalog extends React.Component<Props> {
           { title: "Labels", className: css.labelsCell },
           { title: "Status", className: css.statusCell, sortBy: sortBy.status },
         ]}
-        renderTableContents={(item: CatalogEntityItem) => [
+        customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
+          disabled: !item.enabled,
+        })}
+        renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
           this.renderIcon(item),
           item.name,
           item.source,
           item.labels.map((label) => <Badge className={css.badge} key={label} label={label} title={label} />),
           { title: item.phase, className: cssNames(css[item.phase]) }
         ]}
-        onDetails={(item: CatalogEntityItem) => this.onDetails(item) }
+        onDetails={this.onDetails}
         renderItemMenu={this.renderItemMenu}
       />
     );
@@ -224,13 +226,13 @@ export class Catalog extends React.Component<Props> {
         store={this.catalogEntityStore}
         tableId="catalog-items"
         sortingCallbacks={{
-          [sortBy.name]: (item: CatalogEntityItem) => item.name,
-          [sortBy.kind]: (item: CatalogEntityItem) => item.kind,
-          [sortBy.source]: (item: CatalogEntityItem) => item.source,
-          [sortBy.status]: (item: CatalogEntityItem) => item.phase,
+          [sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
+          [sortBy.kind]: (item: CatalogEntityItem<CatalogEntity>) => item.kind,
+          [sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
+          [sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
         }}
         searchFilters={[
-          (entity: CatalogEntityItem) => entity.searchFields,
+          (entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
         ]}
         renderTableHeader={[
           { title: "", className: css.iconCell },
@@ -240,7 +242,10 @@ export class Catalog extends React.Component<Props> {
           { title: "Labels", className: css.labelsCell },
           { title: "Status", className: css.statusCell, sortBy: sortBy.status },
         ]}
-        renderTableContents={(item: CatalogEntityItem) => [
+        customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
+          disabled: !item.enabled,
+        })}
+        renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
           this.renderIcon(item),
           item.name,
           item.kind,
@@ -248,8 +253,8 @@ export class Catalog extends React.Component<Props> {
           item.labels.map((label) => <Badge className={css.badge} key={label} label={label} title={label} />),
           { title: item.phase, className: cssNames(css[item.phase]) }
         ]}
-        detailsItem={this.selectedItem}
-        onDetails={(item: CatalogEntityItem) => this.onDetails(item) }
+        detailsItem={this.catalogEntityStore.selectedItem}
+        onDetails={this.onDetails}
         renderItemMenu={this.renderItemMenu}
       />
     );
@@ -265,15 +270,18 @@ export class Catalog extends React.Component<Props> {
         <div className="p-6 h-full">
           { this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() }
         </div>
-        { !this.selectedItem && (
-          <CatalogAddButton category={this.catalogEntityStore.activeCategory} />
-        )}
-        { this.selectedItem && (
-          <CatalogEntityDetails
-            entity={this.selectedItem.entity}
-            hideDetails={() => this.selectedItem = null}
-          />
-        )}
+        {
+          this.catalogEntityStore.selectedItem
+            ? (
+              <CatalogEntityDetails
+                item={this.catalogEntityStore.selectedItem}
+                hideDetails={() => this.catalogEntityStore.selectedItemId = null}
+              />
+            )
+            : (
+              <CatalogAddButton category = {this.catalogEntityStore.activeCategory} />
+            )
+        }
       </MainLayout>
     );
   }

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

@@ -54,7 +54,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
   componentDidMount() {
     this.contextMenu = {
       menuItems: [],
-      navigate: (url: string) => navigate(url)
+      navigate: (url: string) => navigate(url),
     };
   }
 

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

@@ -62,7 +62,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
 }
 
 export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => {
-  const { uid, title, icon, active, className, source, disabled, onMenuOpen, children, ...rest } = props;
+  const { uid, title, icon, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props;
   const id = `hotbarIcon-${uid}`;
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -77,7 +77,13 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
         src={icon}
         className={active ? "active" : "default"}
         width={size}
-        height={size} />;
+        height={size} 
+        onClick={(event) => {
+          if (!disabled) {
+            onClick?.(event);
+          }
+        }}
+      />;
     } else {
       return <Avatar
         {...rest}
@@ -86,6 +92,11 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
         className={active ? "active" : "default"}
         width={size}
         height={size}
+        onClick={(event) => {
+          if (!disabled) {
+            onClick?.(event);
+          }
+        }}
       />;
     }
   };
@@ -106,8 +117,10 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
         toggleEvent="contextmenu"
         position={{right: true, bottom: true }} // FIXME: position does not work
         open={() => {
-          onMenuOpen?.();
-          toggleMenu();
+          if (!disabled) {
+            onMenuOpen?.();
+            toggleMenu();
+          }
         }}
         close={() => toggleMenu()}>
         { menuItems.map((menuItem) => {