chore: [Plugin Action Editor] Convert to Module (appsmithorg#36305)

## Description

CE PR for: https://github.com/appsmithorg/appsmith-ee/pull/5134




## Automation

/ok-to-test tags="@tag.Sanity"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10845636973>
> Commit: 1f40848
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10845636973&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Fri, 13 Sep 2024 08:48:25 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced flexibility for child components in the Plugin Action Editor,
allowing single or multiple React nodes.
	- Introduced a new toolbar with a dropdown menu for additional actions.
- Added components for converting actions into modules, including
callouts and disablers for better user feedback.
- **Bug Fixes**
- Improved user experience by providing notifications during the action
conversion process.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/PluginActionEditor/PluginActionContext.tsx

@@ -20,7 +20,7 @@ interface PluginActionContextType {
 const PluginActionContext = createContext<PluginActionContextType | null>(null);
 
 interface ChildrenProps {
-  children: ReactNode[];
+  children: ReactNode | ReactNode[];
 }
 
 export const PluginActionContextProvider = (

app/client/src/PluginActionEditor/PluginActionEditor.tsx

@@ -18,7 +18,7 @@ import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
 import { Text } from "@appsmith/ads";
 
 interface ChildrenProps {
-  children: React.ReactNode[];
+  children: React.ReactNode | React.ReactNode[];
 }
 
 const PluginActionEditor = (props: ChildrenProps) => {

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { IDEToolbar } from "IDE";
-import { Button, Tooltip } from "@appsmith/ads";
-import { modText } from "../../utils/helpers";
+import { Button, Menu, MenuContent, MenuTrigger, Tooltip } from "@appsmith/ads";
+import { modText } from "utils/helpers";
 
 interface PluginActionToolbarProps {
   runOptions?: React.ReactNode;
   children?: React.ReactNode[] | React.ReactNode;
+  menuContent?: React.ReactNode[] | React.ReactNode;
 }
 
 const PluginActionToolbar = (props: PluginActionToolbarProps) => {
@@ -29,12 +30,19 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => {
           size="sm"
           startIcon="settings-2-line"
         />
-        <Button
-          isIconButton
-          kind="tertiary"
-          size="sm"
-          startIcon="more-2-fill"
-        />
+        <Menu>
+          <MenuTrigger>
+            <Button
+              isIconButton
+              kind="tertiary"
+              size="sm"
+              startIcon="more-2-fill"
+            />
+          </MenuTrigger>
+          <MenuContent loop style={{ zIndex: 100 }} width="200px">
+            {props.menuContent}
+          </MenuContent>
+        </Menu>
       </IDEToolbar.Right>
     </IDEToolbar>
   );

app/client/src/ce/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx

@@ -1,17 +1,24 @@
 import React from "react";
 import {
   PluginActionEditor,
-  PluginActionToolbar,
   PluginActionForm,
   PluginActionResponsePane,
 } from "PluginActionEditor";
+import {
+  ConvertToModuleDisabler,
+  ConvertToModuleCallout,
+} from "./components/ConvertToModule";
+import AppPluginActionToolbar from "./components/AppPluginActionToolbar";
 
 const AppPluginActionEditor = () => {
   return (
     <PluginActionEditor>
-      <PluginActionToolbar />
-      <PluginActionForm />
-      <PluginActionResponsePane />
+      <ConvertToModuleDisabler>
+        <AppPluginActionToolbar />
+        <ConvertToModuleCallout />
+        <PluginActionForm />
+        <PluginActionResponsePane />
+      </ConvertToModuleDisabler>
     </PluginActionEditor>
   );
 };

app/client/src/ce/pages/Editor/AppPluginActionEditor/components/AppPluginActionToolbar.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { PluginActionToolbar } from "PluginActionEditor";
+import { ConvertToModuleCTA } from "./ConvertToModule";
+
+const AppPluginActionToolbar = () => {
+  return <PluginActionToolbar menuContent={<ConvertToModuleCTA />} />;
+};
+
+export default AppPluginActionToolbar;

app/client/src/ce/pages/Editor/AppPluginActionEditor/components/ConvertToModule/ConvertToModuleCTA.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { usePluginActionContext } from "PluginActionEditor";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import { useSelector } from "react-redux";
+import { getPagePermissions } from "selectors/editorSelectors";
+import {
+  getHasCreateActionPermission,
+  getHasDeleteActionPermission,
+} from "ee/utils/BusinessFeatures/permissionPageHelpers";
+import { MODULE_TYPE } from "ee/constants/ModuleConstants";
+import ConvertToModuleInstanceCTA from "ee/pages/Editor/EntityEditor/ConvertToModuleInstanceCTA";
+
+const ConvertToModuleCTA = () => {
+  const { action } = usePluginActionContext();
+  const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
+  const pagePermissions = useSelector(getPagePermissions);
+  const isCreatePermitted = getHasCreateActionPermission(
+    isFeatureEnabled,
+    pagePermissions,
+  );
+  const isDeletePermitted = getHasDeleteActionPermission(
+    isFeatureEnabled,
+    action.userPermissions,
+  );
+  const convertToModuleProps = {
+    canCreateModuleInstance: isCreatePermitted,
+    canDeleteEntity: isDeletePermitted,
+    entityId: action.id,
+    moduleType: MODULE_TYPE.QUERY,
+  };
+  return <ConvertToModuleInstanceCTA {...convertToModuleProps} />;
+};
+
+export default ConvertToModuleCTA;

app/client/src/ce/pages/Editor/AppPluginActionEditor/components/ConvertToModule/ConvertToModuleCallout.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Flex, Icon } from "@appsmith/ads";
+import { useSelector } from "react-redux";
+import { getIsActionConverting } from "ee/selectors/entitiesSelector";
+import { usePluginActionContext } from "PluginActionEditor";
+import {
+  ENTITY_ICON_SIZE,
+  EntityIcon,
+} from "pages/Editor/Explorer/ExplorerIcons";
+import ConvertEntityNotification from "ee/pages/common/ConvertEntityNotification";
+import { resolveIcon } from "pages/Editor/utils";
+
+const ConvertToModuleCallout = () => {
+  const { action, plugin } = usePluginActionContext();
+  const isConverting = useSelector((state) =>
+    getIsActionConverting(state, action.id),
+  );
+
+  const PluginIcon = resolveIcon({
+    iconLocation: plugin.iconLocation || "",
+    pluginType: plugin.type,
+    moduleType: action.actionConfiguration?.body?.moduleType,
+  }) || (
+    <EntityIcon
+      height={`${ENTITY_ICON_SIZE}px`}
+      width={`${ENTITY_ICON_SIZE}px`}
+    >
+      <Icon name="module" />
+    </EntityIcon>
+  );
+
+  if (!isConverting) return null;
+  return (
+    <Flex p="spaces-7" w="100%">
+      <ConvertEntityNotification icon={PluginIcon} name={action.name} />
+    </Flex>
+  );
+};
+
+export default ConvertToModuleCallout;

app/client/src/ce/pages/Editor/AppPluginActionEditor/components/ConvertToModule/ConvertToModuleDisabler.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Disabler from "pages/common/Disabler";
+import { usePluginActionContext } from "PluginActionEditor";
+import { useSelector } from "react-redux";
+import { getIsActionConverting } from "ee/selectors/entitiesSelector";
+
+interface Props {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+const ConvertToModuleDisabler = (props: Props) => {
+  const { action } = usePluginActionContext();
+  const isConverting = useSelector((state) =>
+    getIsActionConverting(state, action.id),
+  );
+  return <Disabler isDisabled={isConverting}>{props.children}</Disabler>;
+};
+
+export default ConvertToModuleDisabler;

app/client/src/ce/pages/Editor/AppPluginActionEditor/components/ConvertToModule/index.tsx

@@ -0,0 +1,3 @@
+export { default as ConvertToModuleCTA } from "./ConvertToModuleCTA";
+export { default as ConvertToModuleDisabler } from "./ConvertToModuleDisabler";
+export { default as ConvertToModuleCallout } from "./ConvertToModuleCallout";