allow to prompt on entity menu click

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

src/common/catalog-entities/kubernetes-cluster.ts

@@ -54,7 +54,10 @@ export class KubernetesCluster implements CatalogEntity {
       {
         icon: "delete",
         title: "Delete",
-        onClick: async () => clusterStore.removeById(this.metadata.uid)
+        onClick: async () => clusterStore.removeById(this.metadata.uid),
+        confirm: {
+          message: `Remove Kubernetes Cluster "${this.metadata.name} from Lens?`
+        }
       },
     ];
 

src/common/catalog-entity.ts

@@ -45,6 +45,9 @@ export type CatalogEntityContextMenu = {
   icon: string;
   title: string;
   onClick: () => Promise<void>;
+  confirm?: {
+    message: string;
+  }
 };
 
 export interface CatalogEntityContextMenuContext {

src/renderer/api/catalog-entity.ts

@@ -2,7 +2,7 @@ import { navigate } from "../navigation";
 import { commandRegistry } from "../../extensions/registries";
 import { CatalogEntity } from "../../common/catalog-entity";
 
-export { CatalogEntity, CatalogEntityData, CatalogEntityActionContext, CatalogEntityContextMenuContext } from "../../common/catalog-entity";
+export { CatalogEntity, CatalogEntityData, CatalogEntityActionContext, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../common/catalog-entity";
 
 export const catalogEntityRunContext = {
   navigate: (url: string) => navigate(url),

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

@@ -9,12 +9,13 @@ import { kebabCase } from "lodash";
 import { PageLayout } from "../layout/page-layout";
 import { MenuItem, MenuActions } from "../menu";
 import { Icon } from "../icon";
-import { CatalogEntityContextMenuContext, catalogEntityRunContext } from "../../api/catalog-entity";
+import { CatalogEntityContextMenu, CatalogEntityContextMenuContext, catalogEntityRunContext } from "../../api/catalog-entity";
 import { Badge } from "../badge";
 import { hotbarStore } from "../../../common/hotbar-store";
 import { addClusterURL } from "../+add-cluster";
 import { autobind } from "../../utils";
 import { Notifications } from "../notifications";
+import { ConfirmDialog } from "../confirm-dialog";
 
 enum sortBy {
   name = "name",
@@ -71,6 +72,23 @@ export class Catalog extends React.Component {
     item.onRun(catalogEntityRunContext);
   }
 
+  onMenuItemClick(menuItem: CatalogEntityContextMenu) {
+    if (menuItem.confirm) {
+      ConfirmDialog.open({
+        okButtonProps: {
+          primary: false,
+          accent: true,
+        },
+        ok: () => {
+          menuItem.onClick();
+        },
+        message: menuItem.confirm.message
+      });
+    } else {
+      menuItem.onClick();
+    }
+  }
+
   @autobind()
   renderItemMenu(item: CatalogEntityItem) {
     const onOpen = async () => {
@@ -87,7 +105,7 @@ export class Catalog extends React.Component {
         </MenuItem>
         { this.contextMenu.menuItems.map((menuItem, index) => {
           return (
-            <MenuItem key={`menuitem-${index}`} onClick={() => menuItem.onClick()}>
+            <MenuItem key={`menuitem-${index}`} onClick={() => this.onMenuItemClick(menuItem)}>
               <Icon material={menuItem.icon} small interactive={true} title={menuItem.title}/> {menuItem.title}
             </MenuItem>
           );

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

@@ -5,12 +5,13 @@ import { observer } from "mobx-react";
 import { cssNames, IClassName } from "../../utils";
 import { Tooltip } from "../tooltip";
 import { Avatar } from "@material-ui/core";
-import { CatalogEntity, CatalogEntityContextMenuContext } from "../../../common/catalog-entity";
+import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog-entity";
 import { Menu, MenuItem } from "../menu";
 import { Icon } from "../icon";
 import { observable } from "mobx";
 import { navigate } from "../../navigation";
 import { hotbarStore } from "../../../common/hotbar-store";
+import { ConfirmDialog } from "../confirm-dialog";
 
 interface Props extends DOMAttributes<HTMLElement> {
   entity: CatalogEntity;
@@ -66,6 +67,23 @@ export class HotbarIcon extends React.Component<Props> {
     hotbar.items = hotbar.items.filter((i) => i.entity.uid !== item.metadata.uid);
   }
 
+  onMenuItemClick(menuItem: CatalogEntityContextMenu) {
+    if (menuItem.confirm) {
+      ConfirmDialog.open({
+        okButtonProps: {
+          primary: false,
+          accent: true,
+        },
+        ok: () => {
+          menuItem.onClick();
+        },
+        message: menuItem.confirm.message
+      });
+    } else {
+      menuItem.onClick();
+    }
+  }
+
   render() {
     const {
       entity, errorClass, isActive,
@@ -99,7 +117,7 @@ export class HotbarIcon extends React.Component<Props> {
           </MenuItem>
           { this.contextMenu && this.contextMenu.menuItems.map((menuItem) => {
             return (
-              <MenuItem key={menuItem.title} onClick={() => menuItem.onClick()}>
+              <MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem) }>
                 <Icon material={menuItem.icon} small interactive={true} title={menuItem.title}/> {menuItem.title}
               </MenuItem>
             );