Allow extensions to register kube-object menus + details (#1108)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

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

@@ -8,9 +8,11 @@ import { getDetails, hideDetails } from "../../navigation";
 import { Drawer } from "../drawer";
 import { KubeObject } from "../../api/kube-object";
 import { Spinner } from "../spinner";
-import { apiManager, ApiComponents } from "../../api/api-manager";
+import { apiManager } from "../../api/api-manager";
 import { crdStore } from "../+custom-resources/crd.store";
-import { CrdResourceDetails, CrdResourceMenu } from "../+custom-resources";
+import { CrdResourceDetails } from "../+custom-resources";
+import { KubeObjectMenu } from "./kube-object-menu"
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 export interface KubeObjectDetailsProps<T = KubeObject> {
   className?: string;
@@ -64,14 +66,15 @@ export class KubeObjectDetails extends React.Component {
     const { object, isLoading, loadingError, isCrdInstance } = this;
     const isOpen = !!(object || isLoading || loadingError);
     let title = "";
-    let apiComponents: ApiComponents;
+    let details: JSX.Element[];
     if (object) {
-      const { kind, getName, selfLink } = object;
+      const { kind, getName } = object;
       title = `${kind}: ${getName()}`;
-      apiComponents = apiManager.getViews(selfLink);
-      if (isCrdInstance && !apiComponents.Details) {
-        apiComponents.Details = CrdResourceDetails
-        apiComponents.Menu = CrdResourceMenu
+      details = kubeObjectDetailRegistry.getItemsForKind(object.kind, object.apiVersion).map((item, index) => {
+        return <item.components.Details object={object} key={`object-details-${index}`}/>
+      })
+      if (isCrdInstance && details.length === 0) {
+        details.push(<CrdResourceDetails object={object} />)
       }
     }
     return (
@@ -79,12 +82,12 @@ export class KubeObjectDetails extends React.Component {
         className="KubeObjectDetails flex column"
         open={isOpen}
         title={title}
-        toolbar={apiComponents && apiComponents.Menu && <apiComponents.Menu object={object} toolbar/>}
+        toolbar={<KubeObjectMenu object={object} toolbar={true} />}
         onClose={hideDetails}
       >
         {isLoading && <Spinner center/>}
         {loadingError && <div className="box center">{loadingError}</div>}
-        {apiComponents && apiComponents.Details && <apiComponents.Details object={object}/>}
+        {details}
       </Drawer>
     )
   }

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

@@ -6,6 +6,7 @@ import { KubeObject } from "../../api/kube-object";
 import { getSelectedDetails, showDetails } from "../../navigation";
 import { ItemListLayout, ItemListLayoutProps } from "../item-object-list/item-list-layout";
 import { KubeObjectStore } from "../../kube-object.store";
+import { KubeObjectMenu } from "./kube-object-menu";
 
 export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
   store: KubeObjectStore;
@@ -34,6 +35,9 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
         className={cssNames("KubeObjectListLayout", className)}
         detailsItem={this.selectedItem}
         onDetails={this.onDetails}
+        renderItemMenu={(item) => {
+          return <KubeObjectMenu object={item}/>
+        }}
       />
     );
   }

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

@@ -6,6 +6,7 @@ import { editResourceTab } from "../dock/edit-resource.store";
 import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
 import { hideDetails } from "../../navigation";
 import { apiManager } from "../../api/api-manager";
+import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
 
 export interface KubeObjectMenuProps<T extends KubeObject = any> extends MenuActionsProps {
   object: T;
@@ -57,6 +58,11 @@ export class KubeObjectMenu extends React.Component<KubeObjectMenuProps> {
   render() {
     const { remove, update, renderRemoveMessage, isEditable, isRemovable } = this;
     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}`} />
+    })
     return (
       <MenuActions
         className={cssNames("KubeObjectMenu", className)}
@@ -64,7 +70,9 @@ export class KubeObjectMenu extends React.Component<KubeObjectMenuProps> {
         removeAction={isRemovable ? remove : undefined}
         removeConfirmationMessage={renderRemoveMessage}
         {...menuProps}
-      />
+      >
+        {menuItems}
+      </MenuActions>
     )
   }
 }