fix: Action toolbar menu state (#38964)

app/client/src/PluginActionEditor/components/PluginActionContextMenu/PluginActionContextMenu.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Button, Menu, MenuContent, MenuTrigger } from "@appsmith/ads";
+import { useToggle } from "@mantine/hooks";
+import { usePluginActionContext } from "../../PluginActionContext";
+
+interface Props {
+  menuContent: React.ReactNode;
+}
+
+export function PluginActionContextMenu(props: Props) {
+  const { action } = usePluginActionContext();
+  const [isMenuOpen, toggleMenuOpen] = useToggle([false, true]);
+
+  return (
+    <Menu onOpenChange={toggleMenuOpen} open={isMenuOpen}>
+      <MenuTrigger>
+        <Button
+          data-testid="t--more-action-trigger"
+          isIconButton
+          kind="tertiary"
+          size="sm"
+          startIcon="more-2-fill"
+        />
+      </MenuTrigger>
+      <MenuContent key={action.id} loop width="204px">
+        {props.menuContent}
+      </MenuContent>
+    </Menu>
+  );
+}

app/client/src/PluginActionEditor/components/PluginActionContextMenu/index.ts

@@ -0,0 +1 @@
+export { PluginActionContextMenu } from "./PluginActionContextMenu";

app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx

@@ -1,19 +1,17 @@
 import React, { useCallback } from "react";
 import { IDEToolbar } from "IDE";
-import { Button, Menu, MenuContent, MenuTrigger, Tooltip } from "@appsmith/ads";
+import { Button, Tooltip } from "@appsmith/ads";
 import { modText } from "utils/helpers";
-import { PluginType } from "../../entities/Plugin";
-import { getIsAnvilEnabledInCurrentApplication } from "../../layoutSystems/anvil/integrations/selectors";
 import { usePluginActionContext } from "../PluginActionContext";
 import {
   useBlockExecution,
   useHandleRunClick,
   useAnalyticsOnRunClick,
 } from "../hooks";
-import { useToggle } from "@mantine/hooks";
 import { useSelector } from "react-redux";
 import { isActionRunning } from "../store";
 import PluginActionSettings from "./PluginActionSettings";
+import { PluginActionContextMenu } from "./PluginActionContextMenu";
 
 interface PluginActionToolbarProps {
   runOptions?: React.ReactNode;
@@ -22,21 +20,16 @@ interface PluginActionToolbarProps {
 }
 
 const PluginActionToolbar = (props: PluginActionToolbarProps) => {
-  const { action, plugin } = usePluginActionContext();
+  const { action } = usePluginActionContext();
   const { handleRunClick } = useHandleRunClick();
   const { callRunActionAnalytics } = useAnalyticsOnRunClick();
-  const [isMenuOpen, toggleMenuOpen] = useToggle([false, true]);
   const blockExecution = useBlockExecution();
   const isRunning = useSelector(isActionRunning(action.id));
-  const isAnvilEnabled = useSelector(getIsAnvilEnabledInCurrentApplication);
 
   const onRunClick = useCallback(() => {
-    const isSkipOpeningDebugger =
-      isAnvilEnabled && plugin.type === PluginType.AI;
-
     callRunActionAnalytics();
-    handleRunClick(isSkipOpeningDebugger);
+    handleRunClick();
-  }, [callRunActionAnalytics, handleRunClick, isAnvilEnabled, plugin.type]);
+  }, [callRunActionAnalytics, handleRunClick]);
 
   return (
     <IDEToolbar>
@@ -60,25 +53,12 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => {
           </Button>
         </Tooltip>
         <PluginActionSettings />
-        <Menu onOpenChange={toggleMenuOpen} open={isMenuOpen}>
+        {props.menuContent ? (
-          <MenuTrigger>
+          <PluginActionContextMenu
-            <Button
-              data-testid="t--more-action-trigger"
-              isIconButton
-              kind="tertiary"
-              size="sm"
-              startIcon="more-2-fill"
-            />
-          </MenuTrigger>
-          <MenuContent
             key={action.id}
-            loop
+            menuContent={props.menuContent}
-            style={{ zIndex: 100 }}
+          />
-            width="204px"
+        ) : null}
-          >
-            {props.menuContent}
-          </MenuContent>
-        </Menu>
       </IDEToolbar.Right>
     </IDEToolbar>
   );

app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts

@@ -1,18 +1,20 @@
 import { useCallback } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { runAction } from "actions/pluginActionActions";
 import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
+import { PluginType } from "../../../entities/Plugin";
+import { getIsAnvilEnabledInCurrentApplication } from "../../../layoutSystems/anvil/integrations/selectors";
 
 function useHandleRunClick() {
-  const { action } = usePluginActionContext();
+  const { action, plugin } = usePluginActionContext();
   const dispatch = useDispatch();
+  const isAnvilEnabled = useSelector(getIsAnvilEnabledInCurrentApplication);
+
+  const handleRunClick = useCallback(() => {
+    const skipOpeningDebugger = isAnvilEnabled && plugin.type === PluginType.AI;
 
-  const handleRunClick = useCallback(
-    (skipOpeningDebugger = false) => {
     dispatch(runAction(action?.id ?? "", undefined, skipOpeningDebugger));
-    },
+  }, [action?.id, dispatch, isAnvilEnabled, plugin.type]);
-    [action.id, dispatch],
-  );
 
   return { handleRunClick };
 }