chore: Adding the functionality of running and deleting an action und…

…er modularised flow (#36746)

## Description

Adding the functionality of running and deleting an action under
modularised flow.

Fixes [#36645](#36645)
[#36644](#36644)

## Automation

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

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!WARNING]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11254347110>
> Commit: a1c8050
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11254347110&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.Sanity
> Spec: 
> It seems like **no tests ran** 😔. We are not able to recognize it,
please check <a
href="https://github.com/appsmithorg/appsmith/actions/runs/11254347110"
target="_blank">workflow here</a>.
> <hr>Wed, 09 Oct 2024 12:34:20 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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


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

## Release Notes

- **New Features**
- Introduced new hooks, `useHandleRunClick` and `useHandleDeleteClick`,
to enhance action handling for running and deleting actions.

- **Improvements**
- Updated the `APIEditorForm`, `PluginActionToolbar`, and
`PluginActionMoreActions` components to utilize the new hooks, improving
functionality and code organization.
- Enhanced the user interface for deletion actions by integrating
confirmation states and dynamic labels.
- Streamlined the `PluginActionToolbar` and `PluginActionResponse`
components for better action dispatching and menu management.

- **Bug Fixes**
- Removed unused `onTestClick` prop from various components, improving
clarity and reducing complexity.
  
- **Documentation**
- Added a new file documenting circular dependencies within the codebase
to assist developers in understanding module interrelations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/PluginActionEditor/components/PluginActionForm/components/APIEditorForm.tsx

@@ -9,13 +9,14 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import Pagination from "pages/Editor/APIEditor/Pagination";
-import { noop } from "lodash";
 import { reduxForm } from "redux-form";
+import { useHandleRunClick } from "PluginActionEditor/hooks";
 
 const FORM_NAME = API_EDITOR_FORM_NAME;
 
 const APIEditorForm = () => {
   const { action } = usePluginActionContext();
+  const { handleRunClick } = useHandleRunClick();
   const theme = EditorTheme.LIGHT;
 
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
@@ -39,7 +40,7 @@ const APIEditorForm = () => {
       paginationUiComponent={
         <Pagination
           actionName={action.name}
-          onTestClick={noop}
+          onTestClick={handleRunClick}
           paginationType={action.actionConfiguration.paginationType}
           theme={theme}
         />

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx

@@ -9,7 +9,6 @@ import { usePluginActionContext } from "PluginActionEditor";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
-import { noop } from "lodash";
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import useGetFormActionValues from "../CommonEditorForm/hooks/useGetFormActionValues";
 
@@ -38,7 +37,6 @@ function GraphQLEditorForm() {
         <Pagination
           actionName={action.name}
           formName={FORM_NAME}
-          onTestClick={noop}
           paginationType={action.actionConfiguration.paginationType}
           query={actionConfigurationBody}
           theme={theme}

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

@@ -1,11 +1,10 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { IDEToolbar } from "IDE";
 import { Button, Menu, MenuContent, MenuTrigger, Tooltip } from "@appsmith/ads";
 import { modText } from "utils/helpers";
 import { usePluginActionContext } from "../PluginActionContext";
-import { useDispatch } from "react-redux";
-import AnalyticsUtil from "ee/utils/AnalyticsUtil";
-import { runAction } from "actions/pluginActionActions";
+import { useHandleRunClick } from "PluginActionEditor/hooks";
+import { useToggle } from "@mantine/hooks";
 
 interface PluginActionToolbarProps {
   runOptions?: React.ReactNode;
@@ -14,25 +13,9 @@ interface PluginActionToolbarProps {
 }
 
 const PluginActionToolbar = (props: PluginActionToolbarProps) => {
-  const { action, datasource, plugin } = usePluginActionContext();
-  const dispatch = useDispatch();
-  const handleRunClick = useCallback(() => {
-    AnalyticsUtil.logEvent("RUN_QUERY_CLICK", {
-      actionName: action.name,
-      actionId: action.id,
-      pluginName: plugin.name,
-      datasourceId: datasource?.id,
-      isMock: datasource?.isMock,
-    });
-    dispatch(runAction(action.id));
-  }, [
-    action.id,
-    action.name,
-    datasource?.id,
-    datasource?.isMock,
-    dispatch,
-    plugin.name,
-  ]);
+  const { action } = usePluginActionContext();
+  const { handleRunClick } = useHandleRunClick();
+  const [isMenuOpen, toggleMenuOpen] = useToggle([false, true]);
 
   return (
     <IDEToolbar>
@@ -44,7 +27,7 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => {
           placement="topRight"
           showArrow={false}
         >
-          <Button kind="primary" onClick={handleRunClick} size="sm">
+          <Button kind="primary" onClick={() => handleRunClick()} size="sm">
             Run
           </Button>
         </Tooltip>
@@ -54,7 +37,7 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => {
           size="sm"
           startIcon="settings-2-line"
         />
-        <Menu key={action.id}>
+        <Menu onOpenChange={toggleMenuOpen} open={isMenuOpen}>
           <MenuTrigger>
             <Button
               isIconButton

app/client/src/PluginActionEditor/hooks/index.ts

@@ -1 +1,3 @@
 export { useActionSettingsConfig } from "ee/PluginActionEditor/hooks/useActionSettingsConfig";
+export { useHandleDeleteClick } from "ee/PluginActionEditor/hooks/useHandleDeleteClick";
+export { useHandleRunClick } from "ee/PluginActionEditor/hooks/useHandleRunClick";

app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx

@@ -27,10 +27,12 @@ import Schema from "components/editorComponents/Debugger/Schema";
 import QueryResponseTab from "pages/Editor/QueryEditor/QueryResponseTab";
 import type { SourceEntity } from "entities/AppsmithConsole";
 import { ENTITY_TYPE as SOURCE_ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
+import { useHandleRunClick } from "PluginActionEditor/hooks";
 
 function usePluginActionResponseTabs() {
   const { action, actionResponse, datasource, plugin } =
     usePluginActionContext();
+  const { handleRunClick } = useHandleRunClick();
 
   const IDEViewMode = useSelector(getIDEViewMode);
   const errorCount = useSelector(getErrorCount);
@@ -69,7 +71,7 @@ function usePluginActionResponseTabs() {
             actionResponse={actionResponse}
             isRunDisabled={false}
             isRunning={false}
-            onRunClick={noop}
+            onRunClick={handleRunClick}
             responseTabHeight={responseTabHeight}
             theme={EditorTheme.LIGHT}
           />
@@ -84,7 +86,7 @@ function usePluginActionResponseTabs() {
             isRunDisabled={false}
             isRunning={false}
             onDebugClick={noop}
-            onRunClick={noop}
+            onRunClick={handleRunClick}
           />
         ),
       },
@@ -131,7 +133,7 @@ function usePluginActionResponseTabs() {
           actionSource={actionSource}
           currentActionConfig={action}
           isRunning={false}
-          onRunClick={noop}
+          onRunClick={handleRunClick}
           runErrorMessage={""} // TODO
         />
       ),

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

@@ -0,0 +1,26 @@
+import { deleteAction } from "actions/pluginActionActions";
+import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
+
+function useHandleDeleteClick() {
+  const { action } = usePluginActionContext();
+  const dispatch = useDispatch();
+
+  const handleDeleteClick = useCallback(
+    ({ onSuccess }: { onSuccess?: () => void }) => {
+      dispatch(
+        deleteAction({
+          id: action?.id ?? "",
+          name: action?.name ?? "",
+          onSuccess,
+        }),
+      );
+    },
+    [action.id, action.name, dispatch],
+  );
+
+  return { handleDeleteClick };
+}
+
+export { useHandleDeleteClick };

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

@@ -0,0 +1,21 @@
+import { runAction } from "actions/pluginActionActions";
+import type { PaginationField } from "api/ActionAPI";
+import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
+
+function useHandleRunClick() {
+  const { action } = usePluginActionContext();
+  const dispatch = useDispatch();
+
+  const handleRunClick = useCallback(
+    (paginationField?: PaginationField) => {
+      dispatch(runAction(action?.id ?? "", paginationField));
+    },
+    [action.id, dispatch],
+  );
+
+  return { handleRunClick };
+}
+
+export { useHandleRunClick };

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

@@ -22,13 +22,13 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import {
   copyActionRequest,
-  deleteAction,
   moveActionRequest,
 } from "actions/pluginActionActions";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import type { Page } from "entities/Page";
 import { getPageList } from "ee/selectors/entitiesSelector";
 import { ConvertToModuleCTA } from "./ConvertToModule";
+import { useHandleDeleteClick } from "PluginActionEditor/hooks";
 
 const PageMenuItem = (props: {
   page: Page;
@@ -126,18 +126,16 @@ const Move = () => {
 };
 
 const Delete = () => {
-  const dispatch = useDispatch();
-  const { action } = usePluginActionContext();
-
+  const { handleDeleteClick } = useHandleDeleteClick();
   const [confirmDelete, setConfirmDelete] = useState(false);
 
-  const deleteActionFromPage = useCallback(() => {
-    dispatch(deleteAction({ id: action.id, name: action.name }));
-  }, [action.id, action.name, dispatch]);
-
-  const handleSelect = useCallback(() => {
-    confirmDelete ? deleteActionFromPage() : setConfirmDelete(true);
-  }, [confirmDelete, deleteActionFromPage]);
+  const handleSelect = useCallback(
+    (e?: Event) => {
+      e?.preventDefault();
+      confirmDelete ? handleDeleteClick({}) : setConfirmDelete(true);
+    },
+    [confirmDelete, handleDeleteClick],
+  );
 
   const menuLabel = confirmDelete
     ? createMessage(CONFIRM_CONTEXT_DELETE)

app/client/src/ce/utils/analyticsUtilTypes.ts

@@ -52,7 +52,6 @@ export type EventName =
   | "RUN_API_CLICK"
   | "RUN_API_SHORTCUT"
   | "DELETE_API"
-  | "DELETE_API_CLICK"
   | "IMPORT_API"
   | "EXPAND_API"
   | "IMPORT_API_CLICK"

app/client/src/ee/PluginActionEditor/hooks/useHandleDeleteClick.ts

@@ -0,0 +1 @@
+export * from "ce/PluginActionEditor/hooks/useHandleDeleteClick";

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

@@ -0,0 +1 @@
+export * from "ce/PluginActionEditor/hooks/useHandleRunClick";

app/client/src/pages/Editor/APIEditor/ApiEditorContext.tsx

@@ -5,7 +5,6 @@ import type { SaveActionNameParams } from "PluginActionEditor";
 
 interface ApiEditorContextContextProps {
   moreActionsMenu?: React.ReactNode;
-  handleDeleteClick: () => void;
   handleRunClick: (paginationField?: PaginationField) => void;
   actionRightPaneBackLink?: React.ReactNode;
   // TODO: Fix this the next time the file is edited
@@ -30,7 +29,6 @@ export function ApiEditorContextProvider({
   actionRightPaneAdditionSections,
   actionRightPaneBackLink,
   children,
-  handleDeleteClick,
   handleRunClick,
   moreActionsMenu,
   notification,
@@ -42,7 +40,6 @@ export function ApiEditorContextProvider({
     () => ({
       actionRightPaneAdditionSections,
       actionRightPaneBackLink,
-      handleDeleteClick,
       showRightPaneTabbedSection,
       handleRunClick,
       moreActionsMenu,
@@ -53,7 +50,6 @@ export function ApiEditorContextProvider({
     [
       actionRightPaneBackLink,
       actionRightPaneAdditionSections,
-      handleDeleteClick,
       showRightPaneTabbedSection,
       handleRunClick,
       moreActionsMenu,

app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx

@@ -125,7 +125,6 @@ export interface CommonFormProps {
   actionResponse?: ActionResponse;
   pluginId: string;
   onRunClick: (paginationField?: PaginationField) => void;
-  onDeleteClick: () => void;
   isRunning: boolean;
   isDeleting: boolean;
   paginationType: PaginationType;

app/client/src/pages/Editor/APIEditor/Editor.tsx

@@ -187,7 +187,6 @@ class ApiEditor extends React.Component<Props> {
             }
             isDeleting={isDeleting}
             isRunning={isRunning}
-            onDeleteClick={this.context.handleDeleteClick}
             onRunClick={this.context.handleRunClick}
             paginationType={paginationType}
             pluginId={pluginId}
@@ -205,7 +204,6 @@ class ApiEditor extends React.Component<Props> {
             isDeleting={isDeleting}
             isRunning={isRunning}
             match={this.props.match}
-            onDeleteClick={this.context.handleDeleteClick}
             onRunClick={this.context.handleRunClick}
             paginationType={paginationType}
             pluginId={pluginId}

app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx

@@ -42,7 +42,6 @@ function GraphQLEditorForm(props: Props) {
         <Pagination
           actionName={actionName}
           formName={FORM_NAME}
-          onTestClick={props.onRunClick}
           paginationType={props.paginationType}
           query={props.actionConfigurationBody}
         />

app/client/src/pages/Editor/APIEditor/GraphQL/Pagination.tsx

@@ -28,7 +28,6 @@ const PAGINATION_PREFIX =
 
 interface PaginationProps {
   actionName: string;
-  onTestClick: (test?: "PREV" | "NEXT") => void;
   paginationType: PaginationType;
   theme?: EditorTheme;
   query: string;

app/client/src/pages/Editor/APIEditor/index.tsx

@@ -8,11 +8,7 @@ import {
   getPluginSettingConfigs,
   getPlugins,
 } from "ee/selectors/entitiesSelector";
-import {
-  deleteAction,
-  runAction,
-  saveActionName,
-} from "actions/pluginActionActions";
+import { runAction, saveActionName } from "actions/pluginActionActions";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import Editor from "./Editor";
 import BackToCanvas from "components/common/BackToCanvas";
@@ -162,15 +158,6 @@ function ApiEditorWrapper(props: ApiEditorWrapperProps) {
     return <BackToCanvas basePageId={basePageId} />;
   }, [basePageId]);
 
-  const handleDeleteClick = useCallback(() => {
-    AnalyticsUtil.logEvent("DELETE_API_CLICK", {
-      apiName,
-      apiID: action?.id,
-      pageName,
-    });
-    dispatch(deleteAction({ id: action?.id ?? "", name: apiName }));
-  }, [pages, basePageId, apiName, action?.id, dispatch, pageName]);
-
   const notification = useMemo(() => {
     if (!isConverting) return null;
 
@@ -188,7 +175,6 @@ function ApiEditorWrapper(props: ApiEditorWrapperProps) {
   return (
     <ApiEditorContextProvider
       actionRightPaneBackLink={actionRightPaneBackLink}
-      handleDeleteClick={handleDeleteClick}
       handleRunClick={handleRunClick}
       moreActionsMenu={moreActionsMenu}
       notification={notification}