fix(console): Disable the DropDown trigger when the disabled flag is passed

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8104
GitOrigin-RevId: 4bd1ad2089693b6c1dda10b5eed2c3559113fc27

frontend/libs/console/legacy-ce/src/lib/new-components/DropdownButton/DropdownButton.stories.tsx

@@ -66,3 +66,27 @@ Default.play = async ({ args, canvasElement }) => {
   // the action is called
   expect(args.onClick).toHaveBeenCalled();
 };
+
+export const Disabled: ComponentStory<typeof Button> = args => (
+  <DropdownButton
+    items={[
+      ['Action', <span className="text-red-600">Destructive Action</span>],
+      ['Another action'],
+    ]}
+    {...args}
+    disabled
+  >
+    The DropdownButton label
+  </DropdownButton>
+);
+
+Disabled.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // click the trigger
+  userEvent.click(canvas.getByText('The DropdownButton label'));
+  // the menu is not visible (please note that this test makes sense only if there is another test
+  // that checks that the menu is visible when the button is enabled. Otherwise if the dropdown opens
+  // after a millisecond, this test could go green even if then the menu appears)
+  expect(screen.queryByText('Another action')).not.toBeInTheDocument();
+};

frontend/libs/console/legacy-ce/src/lib/new-components/DropdownButton/DropdownButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import produce from 'immer';
 import { FaChevronDown } from 'react-icons/fa';
 import { Button } from '../Button';
 import { DropdownMenu, DropdownMenuProps } from '../DropdownMenu';
@@ -10,17 +11,28 @@ interface DropdownButtonProps extends React.ComponentProps<typeof Button> {
 
 export const DropdownButton: React.FC<DropdownButtonProps> = ({
   items,
-  options,
+  options = {},
   ...rest
-}) => (
-  <DropdownMenu options={options} items={items}>
-    <Button
-      iconPosition="end"
-      icon={
-        <FaChevronDown className="transition-transform group-radix-state-open:rotate-180 w-3 h-3" />
-      }
-      size="sm"
-      {...rest}
-    />
-  </DropdownMenu>
-);
+}) => {
+  const dropdownMenuOptions = produce(options, draft => {
+    // Ensure the disabled state is passed to the trigger. Otherwise, the trigger looks as disabled
+    // but it's interactive
+    if (rest?.disabled !== undefined) {
+      draft.trigger ??= {};
+      draft.trigger.disabled = rest.disabled;
+    }
+  });
+
+  return (
+    <DropdownMenu options={dropdownMenuOptions} items={items}>
+      <Button
+        iconPosition="end"
+        icon={
+          <FaChevronDown className="transition-transform group-radix-state-open:rotate-180 w-3 h-3" />
+        }
+        size="sm"
+        {...rest}
+      />
+    </DropdownMenu>
+  );
+};