From 8ec2d1c9b5b4761e55cb13742712d4df7e08e73a Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 10 Oct 2024 14:19:35 +0530 Subject: [PATCH 1/3] adding analytics for run action button click & fixing certain states for execution --- .../PluginActionContext.tsx | 14 ++++- .../components/PluginActionToolbar.tsx | 6 +- .../hooks/usePluginActionResponseTabs.tsx | 57 +++++++++++++++---- .../hooks/useHandleRunClick.ts | 23 +++++++- .../utils/callRunActionAnalytics.ts | 35 ++++++++++++ app/client/src/ce/utils/analyticsUtilTypes.ts | 5 +- .../utils/callRunActionAnalytics.ts | 1 + 7 files changed, 119 insertions(+), 22 deletions(-) create mode 100644 app/client/src/ce/PluginActionEditor/utils/callRunActionAnalytics.ts create mode 100644 app/client/src/ee/PluginActionEditor/utils/callRunActionAnalytics.ts diff --git a/app/client/src/PluginActionEditor/PluginActionContext.tsx b/app/client/src/PluginActionEditor/PluginActionContext.tsx index 42c0d4e67458..e37882c7d294 100644 --- a/app/client/src/PluginActionEditor/PluginActionContext.tsx +++ b/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 ( diff --git a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx index cfad25a5ee4c..ec4b00563093 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx +++ b/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 ( {props.children} @@ -27,7 +31,7 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => { placement="topRight" showArrow={false} > - diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx index 18c863ccbc78..55f2aaba95c8 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx +++ b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx @@ -17,10 +17,12 @@ 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"; @@ -28,6 +30,11 @@ 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() { @@ -83,10 +118,10 @@ function usePluginActionResponseTabs() { panelComponent: ( ), }, @@ -132,8 +167,8 @@ function usePluginActionResponseTabs() { actionName={action.name} actionSource={actionSource} currentActionConfig={action} - isRunning={false} - onRunClick={handleRunClick} + isRunning={isRunning} + onRunClick={onRunClick} runErrorMessage={""} // TODO /> ), diff --git a/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts b/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts index b44c80f5c618..f46675c5b66e 100644 --- a/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts +++ b/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], diff --git a/app/client/src/ce/PluginActionEditor/utils/callRunActionAnalytics.ts b/app/client/src/ce/PluginActionEditor/utils/callRunActionAnalytics.ts new file mode 100644 index 000000000000..651fc98ca362 --- /dev/null +++ b/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 }; diff --git a/app/client/src/ce/utils/analyticsUtilTypes.ts b/app/client/src/ce/utils/analyticsUtilTypes.ts index ec84c03efdf9..9bb8ea464f57 100644 --- a/app/client/src/ce/utils/analyticsUtilTypes.ts +++ b/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" diff --git a/app/client/src/ee/PluginActionEditor/utils/callRunActionAnalytics.ts b/app/client/src/ee/PluginActionEditor/utils/callRunActionAnalytics.ts new file mode 100644 index 000000000000..542a88203458 --- /dev/null +++ b/app/client/src/ee/PluginActionEditor/utils/callRunActionAnalytics.ts @@ -0,0 +1 @@ +export * from "ce/PluginActionEditor/utils/callRunActionAnalytics"; From b269112ab3c5e4be37dd84e4d295bd5f8df3645e Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 10 Oct 2024 15:13:04 +0530 Subject: [PATCH 2/3] reverting some changes --- .../PluginActionContext.tsx | 14 +---- .../components/PluginActionToolbar.tsx | 6 +- .../hooks/usePluginActionResponseTabs.tsx | 57 ++++--------------- 3 files changed, 15 insertions(+), 62 deletions(-) diff --git a/app/client/src/PluginActionEditor/PluginActionContext.tsx b/app/client/src/PluginActionEditor/PluginActionContext.tsx index e37882c7d294..42c0d4e67458 100644 --- a/app/client/src/PluginActionEditor/PluginActionContext.tsx +++ b/app/client/src/PluginActionEditor/PluginActionContext.tsx @@ -28,27 +28,19 @@ interface ChildrenProps { export const PluginActionContextProvider = ( props: ChildrenProps & PluginActionContextType, ) => { - const { - action, - actionResponse, - children, - datasource, - editorConfig, - plugin, - settingsConfig, - } = props; + const { action, children, datasource, editorConfig, plugin, settingsConfig } = + props; // using useMemo to avoid unnecessary renders const contextValue = useMemo( () => ({ action, - actionResponse, datasource, editorConfig, plugin, settingsConfig, }), - [action, actionResponse, datasource, editorConfig, plugin, settingsConfig], + [action, datasource, editorConfig, plugin, settingsConfig], ); return ( diff --git a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx index ec4b00563093..cfad25a5ee4c 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx @@ -17,10 +17,6 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => { const { handleRunClick } = useHandleRunClick(); const [isMenuOpen, toggleMenuOpen] = useToggle([false, true]); - const onRunClick = () => { - handleRunClick(); - }; - return ( {props.children} @@ -31,7 +27,7 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => { placement="topRight" showArrow={false} > - diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx index 55f2aaba95c8..18c863ccbc78 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx +++ b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx @@ -17,12 +17,10 @@ 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, - isActionRunning, -} from "PluginActionEditor/store"; +import { getPluginActionDebuggerState } from "PluginActionEditor/store"; import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers"; import useShowSchema from "components/editorComponents/ActionRightPane/useShowSchema"; import Schema from "components/editorComponents/Debugger/Schema"; @@ -30,11 +28,6 @@ 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 } = @@ -49,36 +42,8 @@ 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( { @@ -104,9 +69,9 @@ function usePluginActionResponseTabs() { @@ -118,10 +83,10 @@ function usePluginActionResponseTabs() { panelComponent: ( ), }, @@ -167,8 +132,8 @@ function usePluginActionResponseTabs() { actionName={action.name} actionSource={actionSource} currentActionConfig={action} - isRunning={isRunning} - onRunClick={onRunClick} + isRunning={false} + onRunClick={handleRunClick} runErrorMessage={""} // TODO /> ), From b21315a6bb88a364501c1b7d4c0fa78b042f2f81 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 10 Oct 2024 15:27:02 +0530 Subject: [PATCH 3/3] refactoring the logic --- .../components/APIEditorForm.tsx | 13 +++++-- .../components/PluginActionToolbar.tsx | 13 +++++-- .../src/PluginActionEditor/hooks/index.ts | 1 + .../hooks/usePluginActionResponseTabs.tsx | 17 ++++++--- .../hooks/useAnalyticsOnRunClick.ts | 33 +++++++++++++++++ .../hooks/useHandleRunClick.ts | 21 ++--------- .../utils/callRunActionAnalytics.ts | 35 ------------------- .../hooks/useAnalyticsOnRunClick.ts | 1 + .../utils/callRunActionAnalytics.ts | 1 - 9 files changed, 72 insertions(+), 63 deletions(-) create mode 100644 app/client/src/ce/PluginActionEditor/hooks/useAnalyticsOnRunClick.ts delete mode 100644 app/client/src/ce/PluginActionEditor/utils/callRunActionAnalytics.ts create mode 100644 app/client/src/ee/PluginActionEditor/hooks/useAnalyticsOnRunClick.ts delete mode 100644 app/client/src/ee/PluginActionEditor/utils/callRunActionAnalytics.ts diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/APIEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/APIEditorForm.tsx index 9c046e9119ce..a3065ba2e5e0 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/APIEditorForm.tsx +++ b/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 ( { paginationUiComponent={ diff --git a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx index cfad25a5ee4c..34e5b0fdfe98 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx +++ b/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 ( {props.children} @@ -27,7 +36,7 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => { placement="topRight" showArrow={false} > - diff --git a/app/client/src/PluginActionEditor/hooks/index.ts b/app/client/src/PluginActionEditor/hooks/index.ts index 00460d54c4c0..c412903be5f8 100644 --- a/app/client/src/PluginActionEditor/hooks/index.ts +++ b/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"; diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx index 18c863ccbc78..d3d599fc81b0 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx +++ b/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 /> ), diff --git a/app/client/src/ce/PluginActionEditor/hooks/useAnalyticsOnRunClick.ts b/app/client/src/ce/PluginActionEditor/hooks/useAnalyticsOnRunClick.ts new file mode 100644 index 000000000000..421b9ebcc63c --- /dev/null +++ b/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 }; diff --git a/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts b/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts index f46675c5b66e..62d8075bcbda 100644 --- a/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts +++ b/app/client/src/ce/PluginActionEditor/hooks/useHandleRunClick.ts @@ -1,32 +1,15 @@ import { useCallback } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { useLocation } from "react-router"; +import { useDispatch } from "react-redux"; import { runAction } from "actions/pluginActionActions"; import type { PaginationField } from "api/ActionAPI"; import { usePluginActionContext } from "PluginActionEditor/PluginActionContext"; -import { getIDETypeByUrl } from "ee/entities/IDE/utils"; -import { getPageNameByPageId } from "ee/selectors/entitiesSelector"; -import { callRunActionAnalytics } from "ee/PluginActionEditor/utils/callRunActionAnalytics"; function useHandleRunClick() { - const { action, datasource, plugin } = usePluginActionContext(); + const { action } = 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], diff --git a/app/client/src/ce/PluginActionEditor/utils/callRunActionAnalytics.ts b/app/client/src/ce/PluginActionEditor/utils/callRunActionAnalytics.ts deleted file mode 100644 index 651fc98ca362..000000000000 --- a/app/client/src/ce/PluginActionEditor/utils/callRunActionAnalytics.ts +++ /dev/null @@ -1,35 +0,0 @@ -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 }; diff --git a/app/client/src/ee/PluginActionEditor/hooks/useAnalyticsOnRunClick.ts b/app/client/src/ee/PluginActionEditor/hooks/useAnalyticsOnRunClick.ts new file mode 100644 index 000000000000..c77f70fc9d9e --- /dev/null +++ b/app/client/src/ee/PluginActionEditor/hooks/useAnalyticsOnRunClick.ts @@ -0,0 +1 @@ +export * from "ce/PluginActionEditor/hooks/useAnalyticsOnRunClick"; diff --git a/app/client/src/ee/PluginActionEditor/utils/callRunActionAnalytics.ts b/app/client/src/ee/PluginActionEditor/utils/callRunActionAnalytics.ts deleted file mode 100644 index 542a88203458..000000000000 --- a/app/client/src/ee/PluginActionEditor/utils/callRunActionAnalytics.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "ce/PluginActionEditor/utils/callRunActionAnalytics";