chore: Adding analytics for run action button click & fixing certain states for execution (#36800)

## Description

Adding analytics for run action button click & fixing certain states for
execution under the modularised flow. This PR combines the events
RUN_API_CLICK and RUN_QUERY_CLICK to RUN_ACTION_CLICK for the
modularised flow. It also combines the parameters we pass to these
events.

Fixes [#36794](https://github.com/appsmithorg/appsmith/issues/36794)

## 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/11273497231>
> Commit: b21315a6bb88a364501c1b7d4c0fa78b042f2f81
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11273497231&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Thu, 10 Oct 2024 13:09:34 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

- **New Features**
- Added analytics logging for action execution with the new
"RUN_ACTION_CLICK" event.
	- Introduced a new hook for tracking analytics on run actions.

- **Bug Fixes**
	- Enhanced the context handling in the PluginActionContextProvider.

- **Refactor**
- Updated the `onRunClick` function in the PluginActionToolbar for
better encapsulation.
- Improved the `useHandleRunClick` hook with additional context and
analytics integration.

- **Documentation**
	- Updated event tracking system to reflect new and removed event names.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -10,13 +10,17 @@ import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import Pagination from "pages/Editor/APIEditor/Pagination";
 import { reduxForm } from "redux-form";
-import { useHandleRunClick } from "PluginActionEditor/hooks";
+import {
+  useHandleRunClick,
+  useAnalyticsOnRunClick,
+} from "PluginActionEditor/hooks";
 
 const FORM_NAME = API_EDITOR_FORM_NAME;
 
 const APIEditorForm = () => {
   const { action } = usePluginActionContext();
   const { handleRunClick } = useHandleRunClick();
+  const { callRunActionAnalytics } = useAnalyticsOnRunClick();
   const theme = EditorTheme.LIGHT;
 
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
@@ -25,6 +29,11 @@ const APIEditorForm = () => {
     action.userPermissions,
   );
 
+  const onTestClick = () => {
+    callRunActionAnalytics();
+    handleRunClick();
+  };
+
   return (
     <CommonEditorForm
       action={action}
@@ -40,7 +49,7 @@ const APIEditorForm = () => {
       paginationUiComponent={
         <Pagination
           actionName={action.name}
-          onTestClick={handleRunClick}
+          onTestClick={onTestClick}
           paginationType={action.actionConfiguration.paginationType}
           theme={theme}
         />

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

@@ -3,7 +3,10 @@ import { IDEToolbar } from "IDE";
 import { Button, Menu, MenuContent, MenuTrigger, Tooltip } from "@appsmith/ads";
 import { modText } from "utils/helpers";
 import { usePluginActionContext } from "../PluginActionContext";
-import { useHandleRunClick } from "PluginActionEditor/hooks";
+import {
+  useHandleRunClick,
+  useAnalyticsOnRunClick,
+} from "PluginActionEditor/hooks";
 import { useToggle } from "@mantine/hooks";
 
 interface PluginActionToolbarProps {
@@ -15,8 +18,14 @@ interface PluginActionToolbarProps {
 const PluginActionToolbar = (props: PluginActionToolbarProps) => {
   const { action } = usePluginActionContext();
   const { handleRunClick } = useHandleRunClick();
+  const { callRunActionAnalytics } = useAnalyticsOnRunClick();
   const [isMenuOpen, toggleMenuOpen] = useToggle([false, true]);
 
+  const onRunClick = () => {
+    callRunActionAnalytics();
+    handleRunClick();
+  };
+
   return (
     <IDEToolbar>
       <IDEToolbar.Left>{props.children}</IDEToolbar.Left>
@@ -27,7 +36,7 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => {
           placement="topRight"
           showArrow={false}
         >
-          <Button kind="primary" onClick={() => handleRunClick()} size="sm">
+          <Button kind="primary" onClick={onRunClick} size="sm">
             Run
           </Button>
         </Tooltip>

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

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

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

@@ -27,12 +27,16 @@ 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";
+import {
+  useHandleRunClick,
+  useAnalyticsOnRunClick,
+} from "PluginActionEditor/hooks";
 
 function usePluginActionResponseTabs() {
   const { action, actionResponse, datasource, plugin } =
     usePluginActionContext();
   const { handleRunClick } = useHandleRunClick();
+  const { callRunActionAnalytics } = useAnalyticsOnRunClick();
 
   const IDEViewMode = useSelector(getIDEViewMode);
   const errorCount = useSelector(getErrorCount);
@@ -44,6 +48,11 @@ function usePluginActionResponseTabs() {
 
   const tabs: BottomTab[] = [];
 
+  const onRunClick = () => {
+    callRunActionAnalytics();
+    handleRunClick();
+  };
+
   if (IDEViewMode === EditorViewMode.FullScreen) {
     tabs.push(
       {
@@ -71,7 +80,7 @@ function usePluginActionResponseTabs() {
             actionResponse={actionResponse}
             isRunDisabled={false}
             isRunning={false}
-            onRunClick={handleRunClick}
+            onRunClick={onRunClick}
             responseTabHeight={responseTabHeight}
             theme={EditorTheme.LIGHT}
           />
@@ -86,7 +95,7 @@ function usePluginActionResponseTabs() {
             isRunDisabled={false}
             isRunning={false}
             onDebugClick={noop}
-            onRunClick={handleRunClick}
+            onRunClick={onRunClick}
           />
         ),
       },
@@ -133,7 +142,7 @@ function usePluginActionResponseTabs() {
           actionSource={actionSource}
           currentActionConfig={action}
           isRunning={false}
-          onRunClick={handleRunClick}
+          onRunClick={onRunClick}
           runErrorMessage={""} // TODO
         />
       ),

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

@@ -0,0 +1,33 @@
+import { useCallback } from "react";
+import { useSelector } from "react-redux";
+import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
+import { getPageNameByPageId } from "ee/selectors/entitiesSelector";
+import AnalyticsUtil from "ee/utils/AnalyticsUtil";
+
+function useAnalyticsOnRunClick() {
+  const { action, datasource, plugin } = usePluginActionContext();
+  const pageName = useSelector((state) =>
+    getPageNameByPageId(state, action.pageId),
+  );
+
+  const actionId = action.id;
+  const actionName = action.name;
+  const datasourceId = datasource?.id;
+  const pluginName = plugin.name;
+  const isMock = !!datasource?.isMock || false; // as mock db exists only for postgres and mongo plugins
+
+  const callRunActionAnalytics = useCallback(() => {
+    AnalyticsUtil.logEvent("RUN_ACTION_CLICK", {
+      actionId,
+      actionName,
+      datasourceId,
+      pageName,
+      pluginName,
+      isMock,
+    });
+  }, [actionId, actionName, datasourceId, pageName, pluginName, isMock]);
+
+  return { callRunActionAnalytics };
+}
+
+export { useAnalyticsOnRunClick };

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

@@ -1,8 +1,8 @@
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
 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();

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

@@ -48,9 +48,7 @@ export type EventName =
   | "DELETE_SAAS"
   | "RUN_SAAS_API"
   | "SAVE_API_CLICK"
-  | "RUN_API"
   | "RUN_API_CLICK"
-  | "RUN_API_SHORTCUT"
   | "DELETE_API"
   | "IMPORT_API"
   | "EXPAND_API"
@@ -59,9 +57,8 @@ export type EventName =
   | "ADD_API_PAGE"
   | "DUPLICATE_ACTION"
   | "DUPLICATE_ACTION_CLICK"
-  | "RUN_QUERY"
   | "RUN_QUERY_CLICK"
-  | "RUN_QUERY_SHORTCUT"
+  | "RUN_ACTION_CLICK"
   | "DELETE_QUERY"
   | "MOVE_API"
   | "3P_PROVIDER_CLICK"

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

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