chore: Adding analytics for run action button click & fixing certain states for execution

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";