display close button on deleted kube details page (#2428)

src/renderer/components/kube-object/kube-object-list-layout.tsx

@@ -15,8 +15,14 @@ export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
   dependentStores?: KubeObjectStore[];
 }
 
+const defaultProps: Partial<KubeObjectListLayoutProps> = {
+  onDetails: (item: KubeObject) => showDetails(item.selfLink),
+};
+
 @observer
 export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutProps> {
+  static defaultProps = defaultProps as object;
+
   @computed get selectedItem() {
     return this.props.store.getByPath(kubeSelectedUrlParam.get());
   }
@@ -33,14 +39,6 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
     ]);
   }
 
-  onDetails = (item: KubeObject) => {
-    if (this.props.onDetails) {
-      this.props.onDetails(item);
-    } else {
-      showDetails(item.selfLink);
-    }
-  };
-
   render() {
     const { className, store, items = store.contextItems, ...layoutProps } = this.props;
 
@@ -52,10 +50,7 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
         items={items}
         preloadStores={false} // loading handled in kubeWatchApi.subscribeStores()
         detailsItem={this.selectedItem}
-        onDetails={this.onDetails}
+        renderItemMenu={(item: KubeObject) => <KubeObjectMenu object={item} />} // safe because we are dealing with KubeObjects here
-        renderItemMenu={(item) => {
-          return <KubeObjectMenu object={item}/>;
-        }}
       />
     );
   }

src/renderer/components/kube-object/kube-object-menu.tsx

@@ -7,13 +7,13 @@ import { hideDetails } from "./kube-object-details";
 import { apiManager } from "../../api/api-manager";
 import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
 
-export interface KubeObjectMenuProps<T extends KubeObject = any> extends MenuActionsProps {
+export interface KubeObjectMenuProps<T> extends MenuActionsProps {
-  object: T;
+  object: T | null | undefined;
   editable?: boolean;
   removable?: boolean;
 }
 
-export class KubeObjectMenu extends React.Component<KubeObjectMenuProps> {
+export class KubeObjectMenu<T extends KubeObject> extends React.Component<KubeObjectMenuProps<T>> {
   get store() {
     const { object } = this.props;
 
@@ -52,23 +52,35 @@ export class KubeObjectMenu extends React.Component<KubeObjectMenuProps> {
   @autobind()
   renderRemoveMessage() {
     const { object } = this.props;
-    const resourceKind = object.kind;
+
-    const resourceName = object.getName();
+    if (!object) {
+      return null;
+    }
 
     return (
-      <p>Remove {resourceKind} <b>{resourceName}</b>?</p>
+      <p>Remove {object.kind} <b>{object.getName()}</b>?</p>
     );
   }
 
+  getMenuItems(object: T): React.ReactChild[] {
+    if (!object) {
+      return [];
+    }
+
+    return kubeObjectMenuRegistry
+      .getItemsForKind(object.kind, object.apiVersion)
+      .map(({components: { MenuItem }}, index) => (
+        <MenuItem
+          object={object}
+          key={`menu-item-${index}`}
+          toolbar={toolbar}
+        />
+      ));
+  }
+
   render() {
     const { remove, update, renderRemoveMessage, isEditable, isRemovable } = this;
-    const { className, object, editable, removable, toolbar, ...menuProps } = this.props;
+    const { className, object, editable, removable, ...menuProps } = this.props;
-
-    if (!object) return null;
-
-    const menuItems = kubeObjectMenuRegistry.getItemsForKind(object.kind, object.apiVersion).map((item, index) => {
-      return <item.components.MenuItem object={object} key={`menu-item-${index}`} toolbar={toolbar} />;
-    });
 
     return (
       <MenuActions
@@ -76,10 +88,9 @@ export class KubeObjectMenu extends React.Component<KubeObjectMenuProps> {
         updateAction={isEditable ? update : undefined}
         removeAction={isRemovable ? remove : undefined}
         removeConfirmationMessage={renderRemoveMessage}
-        toolbar={toolbar}
         {...menuProps}
       >
-        {menuItems}
+        {this.getMenuItems(object)}
       </MenuActions>
     );
   }