feat: add disabled prop to ActionDropdown (DET-7937) (#4867)

webui/react/src/shared/components/ActionDropdown/ActionDropdown.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import ActionDropdown from './ActionDropdown';
+
+export default {
+  component: ActionDropdown,
+  title: 'ActionDropdown',
+};
+
+const FIRST_ACTION = 'First Action';
+const SECOND_ACTION = 'Second Action';
+const THIRD_ACTION = 'Third Action';
+
+const actions = [
+  FIRST_ACTION,
+  SECOND_ACTION,
+  THIRD_ACTION,
+];
+
+const disabled = {
+  [FIRST_ACTION]: false,
+  [SECOND_ACTION]: true,
+  [THIRD_ACTION]: false,
+};
+
+const triggers = {
+  [FIRST_ACTION]: () => { return; },
+  [SECOND_ACTION]: () => { return; },
+  [THIRD_ACTION]: () => { return; },
+};
+
+export const Default = (): React.ReactNode => (
+  <ActionDropdown
+    actionOrder={actions}
+    id="id"
+    kind="kind"
+    onError={() => { return; }}
+    onTrigger={triggers}
+  />
+);
+
+export const DisabledAction = (): React.ReactNode => (
+  <ActionDropdown
+    actionOrder={actions}
+    disabled={disabled}
+    id="id"
+    kind="kind"
+    onError={() => { return; }}
+    onTrigger={triggers}
+  />
+);

webui/react/src/shared/components/ActionDropdown/ActionDropdown.tsx

@@ -15,7 +15,9 @@ import css from './ActionDropdown.module.scss';
 // TODO parameterize Action using Enums? https://github.com/microsoft/TypeScript/issues/30611
 export type Triggers<T extends string> = Partial<{ [key in T]: () => Eventually<void> }>
 export type Confirmations<T extends string> =
-  Partial<{ [key in T]: Omit<ModalFuncProps, 'onOk'>}>
+  Partial<{ [key in T]: Omit<ModalFuncProps, 'onOk'> }>
+type DisabledActions<T extends string> =
+  Partial<{ [key in T]: boolean }>
 
 interface Props<T extends string> {
   /**
@@ -27,6 +29,10 @@ interface Props<T extends string> {
    * with options to customize the generated modal.
    */
   confirmations?: Confirmations<T>
+  /**
+   * whether to disable the action or not.
+   */
+  disabled?: DisabledActions<T>;
   /**
    * How to identify the entity that the action is being performed on.
    * This is used to generate the modal content and for logging purposes.
@@ -53,14 +59,14 @@ interface Props<T extends string> {
 const stopPropagation = (e: React.MouseEvent): void => e.stopPropagation();
 
 const ActionDropdown = <T extends string>(
-  { id, kind, onComplete, onTrigger, confirmations, actionOrder, onError }: Props<T>,
+  { id, kind, onComplete, onTrigger, confirmations, disabled, actionOrder, onError }: Props<T>,
 ): React.ReactElement<unknown, JSXElementConstructor<unknown>> | null => {
 
   const menuClickErrorHandler = useCallback((
     e: unknown,
     actionKey: string,
     kind: string,
-    id : string,
+    id: string,
   ): void => {
     onError(new DetError(e, {
       level: ErrorLevel.Error,
@@ -104,7 +110,7 @@ const ActionDropdown = <T extends string>(
 
   const menuItems: MenuProps['items'] = actionOrder
     .filter((act) => !!onTrigger[act])
-    .map((action) => ({ key: action, label: action }));
+    .map((action) => ({ disabled: disabled?.[action], key: action, label: action }));
 
   if (menuItems.length === 0) {
     return (