From 56e29d22f56303370e47617db64c1110dfc6579c Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Mon, 26 Jul 2021 16:29:15 +0530
Subject: [PATCH] Add new nav related analytics (#6125)

Analytics events for the following have been added

- Create new datasource CTA on the property pane
- Run button at the response tab for actions
- Click on associated entity dropdown from the property pane
- Select an associated entity from the associated entity dropdown at the property pane
---
 .../editorComponents/ApiResponseView.tsx      |  9 +++++++-
 .../Editor/PropertyPane/ConnectDataCTA.tsx    | 23 +++++++++++--------
 .../PropertyPane/PropertyPaneConnections.tsx  |  6 +++++
 .../Editor/QueryEditor/EditorJSONtoForm.tsx   | 10 +++++++-
 app/client/src/utils/AnalyticsUtil.tsx        |  6 ++++-
 5 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 863bb7385f..3980f9cbb4 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -212,6 +212,13 @@ function ApiResponseView(props: Props) {
     setSelectedIndex(1);
   }, []);
 
+  const onRunClick = () => {
+    props.onRunClick();
+    AnalyticsUtil.logEvent("RESPONSE_TAB_RUN_ACTION_CLICK", {
+      source: "API_PANE",
+    });
+  };
+
   const initialIndex = useSelector(getActionTabsInitialIndex);
   const [selectedIndex, setSelectedIndex] = useState(initialIndex);
   const messages = response?.messages;
@@ -250,7 +257,7 @@ function ApiResponseView(props: Props) {
                 {EMPTY_RESPONSE_FIRST_HALF()}
                 <InlineButton
                   isLoading={isRunning}
-                  onClick={props.onRunClick}
+                  onClick={onRunClick}
                   size={Size.medium}
                   tag="button"
                   text="Run"
diff --git a/app/client/src/pages/Editor/PropertyPane/ConnectDataCTA.tsx b/app/client/src/pages/Editor/PropertyPane/ConnectDataCTA.tsx
index 5d420fbfad..6d05d02a88 100644
--- a/app/client/src/pages/Editor/PropertyPane/ConnectDataCTA.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/ConnectDataCTA.tsx
@@ -76,21 +76,24 @@ function ConnectDataCTA() {
     });
   }, []);
 
+  const onClick = () => {
+    history.push(
+      INTEGRATION_EDITOR_URL(
+        applicationId,
+        pageId,
+        INTEGRATION_TABS.NEW,
+        INTEGRATION_EDITOR_MODES.MOCK,
+      ),
+    );
+    AnalyticsUtil.logEvent("CONNECT_DATA_CLICK");
+  };
+
   return (
     <StyledDiv className="t--propertypane-connect-cta">
       Data Required
       <Button
         category={Category.primary}
-        onClick={() =>
-          history.push(
-            INTEGRATION_EDITOR_URL(
-              applicationId,
-              pageId,
-              INTEGRATION_TABS.NEW,
-              INTEGRATION_EDITOR_MODES.MOCK,
-            ),
-          )
-        }
+        onClick={onClick}
         size={Size.large}
         text="CONNECT DATA"
       />
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx
index 2858357804..940cb758dc 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx
@@ -26,6 +26,7 @@ import { ENTITY_TYPE } from "entities/DataTree/dataTreeFactory";
 import { showDebugger } from "actions/debuggerActions";
 import { setActionTabsInitialIndex } from "actions/actionActions";
 import { getTypographyByKey } from "constants/DefaultTheme";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 const CONNECTION_WIDTH = 113;
 const CONNECTION_HEIGHT = 28;
@@ -321,11 +322,16 @@ const TriggerNode = memo((props: TriggerNodeProps) => {
     : `No ${props.connectionType.toLowerCase()} connections`;
   const iconColor = props.hasError ? "#f22b2b" : "";
 
+  const onClick = () => {
+    AnalyticsUtil.logEvent("ASSOCIATED_ENTITY_DROPDOWN_CLICK");
+  };
+
   return (
     <SelectedNodeWrapper
       className={props.hasError ? "t--connection-error" : "t--connection"}
       entityCount={props.entityCount}
       hasError={props.hasError}
+      onClick={onClick}
     >
       {props.iconAlignment === "LEFT" && (
         <Icon
diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
index 23e6212224..6be8263928 100644
--- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
@@ -527,6 +527,14 @@ export function EditorJSONtoForm(props: Props) {
     );
   };
 
+  const responeTabOnRunClick = () => {
+    props.onRunClick();
+
+    AnalyticsUtil.logEvent("RESPONSE_TAB_RUN_ACTION_CLICK", {
+      source: "QUERY_PANE",
+    });
+  };
+
   const responseTabs = [
     {
       key: "Response",
@@ -581,7 +589,7 @@ export function EditorJSONtoForm(props: Props) {
                 🙌 Click on
                 <InlineButton
                   isLoading={isRunning}
-                  onClick={props.onRunClick}
+                  onClick={responeTabOnRunClick}
                   size={Size.medium}
                   tag="button"
                   text="Run"
diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx
index 88b97b55a4..383d574f61 100644
--- a/app/client/src/utils/AnalyticsUtil.tsx
+++ b/app/client/src/utils/AnalyticsUtil.tsx
@@ -130,7 +130,11 @@ export type EventName =
   | "SLASH_COMMAND"
   | "DEBUGGER_NEW_ERROR"
   | "DEBUGGER_RESOLVED_ERROR"
-  | "CREATE_DATA_SOURCE_AUTH_API_CLICK";
+  | "CREATE_DATA_SOURCE_AUTH_API_CLICK"
+  | "CONNECT_DATA_CLICK"
+  | "RESPONSE_TAB_RUN_ACTION_CLICK"
+  | "ASSOCIATED_ENTITY_CLICK"
+  | "ASSOCIATED_ENTITY_DROPDOWN_CLICK";
 
 function getApplicationId(location: Location) {
   const pathSplit = location.pathname.split("/");