diff --git a/app/client/src/PluginActionEditor/components/PluginActionContextMenu/PluginActionContextMenu.tsx b/app/client/src/PluginActionEditor/components/PluginActionContextMenu/PluginActionContextMenu.tsx new file mode 100644 index 0000000000..9ba941a5d1 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/app/client/src/PluginActionEditor/components/PluginActionContextMenu/index.ts b/app/client/src/PluginActionEditor/components/PluginActionContextMenu/index.ts new file mode 100644 index 0000000000..13ee55f92e --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionContextMenu/index.ts @@ -0,0 +1 @@ +export { PluginActionContextMenu } from "./PluginActionContextMenu"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx index 0087807f5d..d0ff690cf1 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx +++ b/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); - }, [callRunActionAnalytics, handleRunClick, isAnvilEnabled, plugin.type]); + handleRunClick(); + }, [callRunActionAnalytics, handleRunClick]); return ( @@ -60,25 +53,12 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => { - - - + menuContent={props.menuContent} + /> + ) : null} ); diff --git a/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts b/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts index 6eb749e6fa..6d9b679afd 100644 --- a/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts +++ b/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( - (skipOpeningDebugger = false) => { - dispatch(runAction(action?.id ?? "", undefined, skipOpeningDebugger)); - }, - [action.id, dispatch], - ); + const handleRunClick = useCallback(() => { + const skipOpeningDebugger = isAnvilEnabled && plugin.type === PluginType.AI; + + dispatch(runAction(action?.id ?? "", undefined, skipOpeningDebugger)); + }, [action?.id, dispatch, isAnvilEnabled, plugin.type]); return { handleRunClick }; }