Add ability to hide KubeObjectMenu Edit and Remove buttons in extensions (#5107)

src/renderer/components/confirm-dialog/confirm-dialog.tsx

@@ -7,7 +7,8 @@ import "./confirm-dialog.scss";
 
 import type { ReactNode } from "react";
 import React from "react";
-import { observable, makeObservable } from "mobx";
+import type { IObservableValue } from "mobx";
+import { observable, makeObservable, computed } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames, noop, prevDefault } from "../../utils";
 import type { ButtonProps } from "../button";
@@ -16,6 +17,8 @@ import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import confirmDialogStateInjectable from "./state.injectable";
 
 export interface ConfirmDialogProps extends Partial<DialogProps> {
 }
@@ -34,45 +37,30 @@ export interface ConfirmDialogBooleanParams {
   cancelButtonProps?: Partial<ButtonProps>;
 }
 
-const dialogState = observable.object({
-  isOpen: false,
-  params: null as ConfirmDialogParams,
-});
+interface Dependencies {
+  state: IObservableValue<ConfirmDialogParams | undefined>;
+}
+
+const defaultParams: Partial<ConfirmDialogParams> = {
+  ok: noop,
+  cancel: noop,
+  labelOk: "Ok",
+  labelCancel: "Cancel",
+  icon: <Icon big material="warning"/>,
+};
 
 @observer
-export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
+class NonInjectedConfirmDialog extends React.Component<ConfirmDialogProps & Dependencies> {
   @observable isSaving = false;
 
-  constructor(props: ConfirmDialogProps) {
+  constructor(props: ConfirmDialogProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
 
-  static open(params: ConfirmDialogParams) {
-    dialogState.isOpen = true;
-    dialogState.params = params;
-  }
-
-  static confirm(params: ConfirmDialogBooleanParams): Promise<boolean> {
-    return new Promise(resolve => {
-      ConfirmDialog.open({
-        ok: () => resolve(true),
-        cancel: () => resolve(false),
-        ...params,
-      });
-    });
-  }
-
-  static defaultParams: Partial<ConfirmDialogParams> = {
-    ok: noop,
-    cancel: noop,
-    labelOk: "Ok",
-    labelCancel: "Cancel",
-    icon: <Icon big material="warning"/>,
-  };
-
-  get params(): ConfirmDialogParams {
-    return Object.assign({}, ConfirmDialog.defaultParams, dialogState.params);
+  @computed
+  get params() {
+    return Object.assign({}, defaultParams, this.props.state.get() ?? {});
   }
 
   ok = async () => {
@@ -88,7 +76,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
       );
     } finally {
       this.isSaving = false;
-      dialogState.isOpen = false;
+      this.props.state.set(undefined);
     }
   };
 
@@ -108,12 +96,14 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
       );
     } finally {
       this.isSaving = false;
-      dialogState.isOpen = false;
+      this.props.state.set(undefined);
     }
   };
 
   render() {
-    const { className, ...dialogProps } = this.props;
+    const { state, className, ...dialogProps } = this.props;
+    const dialogState = state.get();
+    const isOpen = Boolean(dialogState);
     const {
       icon, labelOk, labelCancel, message,
       okButtonProps = {},
@@ -124,10 +114,10 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
       <Dialog
         {...dialogProps}
         className={cssNames("ConfirmDialog", className)}
-        isOpen={dialogState.isOpen}
+        isOpen={isOpen}
         onClose={this.onClose}
         close={this.close}
-        {...(dialogState.isOpen ? { "data-testid":"confirmation-dialog" } : {})}
+        {...(isOpen ? { "data-testid": "confirmation-dialog" } : {})}
       >
         <div className="confirm-content">
           {icon} {message}
@@ -154,3 +144,10 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
     );
   }
 }
+
+export const ConfirmDialog = withInjectables<Dependencies, ConfirmDialogProps>(NonInjectedConfirmDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    state: di.inject(confirmDialogStateInjectable),
+  }),
+});

src/renderer/components/confirm-dialog/confirm.injectable.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ConfirmDialogBooleanParams } from "./confirm-dialog";
+import openConfirmDialogInjectable from "./open.injectable";
+
+export type Confirm = (params: ConfirmDialogBooleanParams) => Promise<boolean>;
+
+const confirmInjectable = getInjectable({
+  id: "confirm",
+  instantiate: (di): Confirm => {
+    const open = di.inject(openConfirmDialogInjectable);
+
+    return (params) => new Promise(resolve => {
+      open({
+        ok: () => resolve(true),
+        cancel: () => resolve(false),
+        ...params,
+      });
+    });
+  },
+});
+
+export default confirmInjectable;

src/renderer/components/confirm-dialog/open.injectable.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ConfirmDialogParams } from "./confirm-dialog";
+import confirmDialogStateInjectable from "./state.injectable";
+
+export type OpenConfirmDialog = (params: ConfirmDialogParams) => void;
+
+const openConfirmDialogInjectable = getInjectable({
+  id: "open-confirm-dialog",
+  instantiate: (di): OpenConfirmDialog => {
+    const state = di.inject(confirmDialogStateInjectable);
+
+    return params => state.set(params);
+  },
+});
+
+export default openConfirmDialogInjectable;

src/renderer/components/confirm-dialog/state.injectable.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { observable } from "mobx";
+import type { ConfirmDialogParams } from ".";
+
+const confirmDialogStateInjectable = getInjectable({
+  id: "confirm-dialog-state",
+  instantiate: () => observable.box<ConfirmDialogParams | undefined>(),
+});
+
+export default confirmDialogStateInjectable;

src/renderer/components/confirm-dialog/with-confirm.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { ConfirmDialogParams } from "./confirm-dialog";
+import { getInjectable } from "@ogre-tools/injectable";
+import openConfirmDialogInjectable from "./open.injectable";
+
+export type WithConfirmation = (params: ConfirmDialogParams) => () => void;
+
+const withConfirmationInjectable = getInjectable({
+  id: "with-confirmation",
+  instantiate: (di): WithConfirmation => {
+    const open = di.inject(openConfirmDialogInjectable);
+
+    return (params) => () => open(params);
+  },
+});
+
+export default withConfirmationInjectable;