adding analytics for run action button click & fixing certain states …

…for execution

app/client/src/PluginActionEditor/PluginActionContext.tsx

@@ -28,19 +28,27 @@ interface ChildrenProps {
 export const PluginActionContextProvider = (
   props: ChildrenProps & PluginActionContextType,
 ) => {
-  const { action, children, datasource, editorConfig, plugin, settingsConfig } =
-    props;
+  const {
+    action,
+    actionResponse,
+    children,
+    datasource,
+    editorConfig,
+    plugin,
+    settingsConfig,
+  } = props;
 
   // using useMemo to avoid unnecessary renders
   const contextValue = useMemo(
     () => ({
       action,
+      actionResponse,
       datasource,
       editorConfig,
       plugin,
       settingsConfig,
     }),
-    [action, datasource, editorConfig, plugin, settingsConfig],
+    [action, actionResponse, datasource, editorConfig, plugin, settingsConfig],
   );
 
   return (

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

@@ -17,6 +17,10 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => {
   const { handleRunClick } = useHandleRunClick();
   const [isMenuOpen, toggleMenuOpen] = useToggle([false, true]);
 
+  const onRunClick = () => {
+    handleRunClick();
+  };
+
   return (
     <IDEToolbar>
       <IDEToolbar.Left>{props.children}</IDEToolbar.Left>
@@ -27,7 +31,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/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx

@@ -17,17 +17,24 @@ import DebuggerLogs from "components/editorComponents/Debugger/DebuggerLogs";
 import { PluginType } from "entities/Action";
 import { ApiResponse } from "PluginActionEditor/components/PluginActionResponse/components/ApiResponse";
 import { ApiResponseHeaders } from "PluginActionEditor/components/PluginActionResponse/components/ApiResponseHeaders";
-import { noop } from "lodash";
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import { getErrorCount } from "selectors/debuggerSelectors";
-import { getPluginActionDebuggerState } from "PluginActionEditor/store";
+import {
+  getPluginActionDebuggerState,
+  isActionRunning,
+} from "PluginActionEditor/store";
 import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers";
 import useShowSchema from "components/editorComponents/ActionRightPane/useShowSchema";
 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 useDebuggerTriggerClick from "components/editorComponents/Debugger/hooks/useDebuggerTriggerClick";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import { getHasExecuteActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
+import { DEFAULT_DATASOURCE_NAME } from "constants/ApiEditorConstants/ApiEditorConstants";
 
 function usePluginActionResponseTabs() {
   const { action, actionResponse, datasource, plugin } =
@@ -42,8 +49,36 @@ function usePluginActionResponseTabs() {
 
   const { responseTabHeight } = useSelector(getPluginActionDebuggerState);
 
+  const onDebugClick = useDebuggerTriggerClick();
+  const isRunning = useSelector(isActionRunning(action.id));
+
+  const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
+  const isExecutePermitted = getHasExecuteActionPermission(
+    isFeatureEnabled,
+    action?.userPermissions,
+  );
+  // this gets the url of the current action's datasource
+  const actionDatasourceUrl =
+    action?.datasource?.datasourceConfiguration?.url || "";
+  const actionDatasourceUrlPath = action?.actionConfiguration?.path || "";
+  // this gets the name of the current action's datasource
+  const actionDatasourceName = action?.datasource.name || "";
+
+  // if the url is empty and the action's datasource name is the default datasource name (this means the api does not have a datasource attached)
+  // or the user does not have permission,
+  // we block action execution.
+  const blockExecution =
+    (!actionDatasourceUrl &&
+      !actionDatasourceUrlPath &&
+      actionDatasourceName === DEFAULT_DATASOURCE_NAME) ||
+    !isExecutePermitted;
+
   const tabs: BottomTab[] = [];
 
+  const onRunClick = () => {
+    handleRunClick();
+  };
+
   if (IDEViewMode === EditorViewMode.FullScreen) {
     tabs.push(
       {
@@ -69,9 +104,9 @@ function usePluginActionResponseTabs() {
           <ApiResponse
             action={action}
             actionResponse={actionResponse}
-            isRunDisabled={false}
-            isRunning={false}
-            onRunClick={handleRunClick}
+            isRunDisabled={blockExecution}
+            isRunning={isRunning}
+            onRunClick={onRunClick}
             responseTabHeight={responseTabHeight}
             theme={EditorTheme.LIGHT}
           />
@@ -83,10 +118,10 @@ function usePluginActionResponseTabs() {
         panelComponent: (
           <ApiResponseHeaders
             actionResponse={actionResponse}
-            isRunDisabled={false}
-            isRunning={false}
-            onDebugClick={noop}
-            onRunClick={handleRunClick}
+            isRunDisabled={blockExecution}
+            isRunning={isRunning}
+            onDebugClick={onDebugClick}
+            onRunClick={onRunClick}
           />
         ),
       },
@@ -132,8 +167,8 @@ function usePluginActionResponseTabs() {
           actionName={action.name}
           actionSource={actionSource}
           currentActionConfig={action}
-          isRunning={false}
-          onRunClick={handleRunClick}
+          isRunning={isRunning}
+          onRunClick={onRunClick}
           runErrorMessage={""} // TODO
         />
       ),

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

@@ -1,15 +1,32 @@
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation } from "react-router";
 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";
+import { getIDETypeByUrl } from "ee/entities/IDE/utils";
+import { getPageNameByPageId } from "ee/selectors/entitiesSelector";
+import { callRunActionAnalytics } from "ee/PluginActionEditor/utils/callRunActionAnalytics";
 
 function useHandleRunClick() {
-  const { action } = usePluginActionContext();
+  const { action, datasource, plugin } = usePluginActionContext();
   const dispatch = useDispatch();
+  const { pathname } = useLocation();
+  const IDEType = getIDETypeByUrl(pathname);
+
+  const pageName = useSelector((state) =>
+    getPageNameByPageId(state, action.pageId),
+  );
 
   const handleRunClick = useCallback(
     (paginationField?: PaginationField) => {
+      callRunActionAnalytics({
+        action,
+        IDEType,
+        pageName,
+        plugin,
+        datasource,
+      });
       dispatch(runAction(action?.id ?? "", paginationField));
     },
     [action.id, dispatch],

app/client/src/ce/PluginActionEditor/utils/callRunActionAnalytics.ts

@@ -0,0 +1,35 @@
+import type { Plugin } from "api/PluginApi";
+import type { Datasource, EmbeddedRestDatasource } from "entities/Datasource";
+import AnalyticsUtil from "ee/utils/AnalyticsUtil";
+import type { Action } from "entities/Action";
+import { type IDEType } from "ee/entities/IDE/constants";
+
+function callRunActionAnalytics({
+  action,
+  datasource,
+  pageName,
+  plugin,
+}: {
+  action: Action;
+  IDEType: IDEType;
+  pageName: string;
+  plugin: Plugin;
+  datasource?: EmbeddedRestDatasource | Datasource;
+}) {
+  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
+
+  AnalyticsUtil.logEvent("RUN_ACTION_CLICK", {
+    actionId,
+    actionName,
+    datasourceId,
+    pageName,
+    pluginName,
+    isMock,
+  });
+}
+
+export { callRunActionAnalytics };

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/utils/callRunActionAnalytics.ts

@@ -0,0 +1 @@
+export * from "ce/PluginActionEditor/utils/callRunActionAnalytics";