chore: add analytics events for to see how a user moves from the canvas to any other file (#14385)

app/client/src/components/editorComponents/CloseEditor.tsx

@@ -14,6 +14,7 @@ import {
   generateTemplateFormURL,
   integrationEditorURL,
 } from "RouteBuilder";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 const IconContainer = styled.div`
   //width: 100%;
@@ -62,6 +63,12 @@ function CloseEditor() {
             params: getQueryParams(),
           })
         : redirectURL;
+
+    AnalyticsUtil.logEvent("BACK_BUTTON_CLICK", {
+      type: "BACK_BUTTON",
+      fromUrl: location.pathname,
+      toUrl: URL,
+    });
     history.push(URL);
   };
 

app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx

@@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom";
 import { getIsGeneratePageInitiator } from "utils/GenerateCrudUtil";
 import { Colors } from "constants/Colors";
 import { builderURL, generateTemplateFormURL } from "RouteBuilder";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 const Back = styled.span`
   height: 30px;
@@ -22,6 +23,12 @@ function BackButton() {
     const redirectURL = isGeneratePageInitiator
       ? generateTemplateFormURL()
       : builderURL();
+
+    AnalyticsUtil.logEvent("BACK_BUTTON_CLICK", {
+      type: "BACK_BUTTON",
+      fromUrl: location.pathname,
+      toUrl: redirectURL,
+    });
     history.push(redirectURL);
   };
   return (

app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx

@@ -12,6 +12,8 @@ import { getAction, getPlugins } from "selectors/entitiesSelector";
 import { Action, PluginType } from "entities/Action";
 import { keyBy } from "lodash";
 import { getActionConfig } from "./helpers";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+import { useLocation } from "react-router";
 
 const getUpdateActionNameReduxAction = (id: string, name: string) => {
   return saveActionName({ id, name });
@@ -31,6 +33,7 @@ export const ExplorerActionEntity = memo((props: ExplorerActionEntityProps) => {
   const action = useSelector((state) => getAction(state, props.id)) as Action;
   const plugins = useSelector(getPlugins);
   const pluginGroups = useMemo(() => keyBy(plugins, "id"), [plugins]);
+  const location = useLocation();
 
   const config = getActionConfig(props.type);
   const url = config?.getURL(
@@ -48,7 +51,13 @@ export const ExplorerActionEntity = memo((props: ExplorerActionEntityProps) => {
       url,
     });
     url && history.push(url);
-  }, [url]);
+    AnalyticsUtil.logEvent("ENTITY_EXPLORER_CLICK", {
+      type: "QUERIES/APIs",
+      fromUrl: location.pathname,
+      toUrl: url,
+      name: action.name,
+    });
+  }, [url, location.pathname, action.name]);
 
   const contextMenu = (
     <ActionEntityContextMenu

app/client/src/pages/Editor/Explorer/Datasources/DatasourceEntity.tsx

@@ -23,6 +23,8 @@ import {
   saasEditorDatasourceIdURL,
 } from "RouteBuilder";
 import { inGuidedTour } from "selectors/onboardingSelectors";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+import { useLocation } from "react-router";
 
 type ExplorerDatasourceEntityProps = {
   plugin: Plugin;
@@ -38,29 +40,35 @@ const ExplorerDatasourceEntity = React.memo(
     const guidedTourEnabled = useSelector(inGuidedTour);
     const dispatch = useDispatch();
     const icon = getPluginIcon(props.plugin);
+    const location = useLocation();
     const switchDatasource = useCallback(() => {
+      let url;
       if (props.plugin && props.plugin.type === PluginType.SAAS) {
-        history.push(
-          saasEditorDatasourceIdURL({
-            pluginPackageName: props.plugin.packageName,
-            datasourceId: props.datasource.id,
-            params: {
-              viewMode: true,
-            },
-          }),
-        );
+        url = saasEditorDatasourceIdURL({
+          pluginPackageName: props.plugin.packageName,
+          datasourceId: props.datasource.id,
+          params: {
+            viewMode: true,
+          },
+        });
       } else {
         dispatch(
           setDatsourceEditorMode({ id: props.datasource.id, viewMode: true }),
         );
-        history.push(
-          datasourcesEditorIdURL({
-            datasourceId: props.datasource.id,
-            params: getQueryParams(),
-          }),
-        );
+        url = datasourcesEditorIdURL({
+          datasourceId: props.datasource.id,
+          params: getQueryParams(),
+        });
       }
-    }, [props.datasource.id]);
+
+      AnalyticsUtil.logEvent("ENTITY_EXPLORER_CLICK", {
+        type: "DATASOURCES",
+        fromUrl: location.pathname,
+        toUrl: url,
+        name: props.datasource.name,
+      });
+      history.push(url);
+    }, [props.datasource.id, props.datasource.name, location.pathname]);
 
     const queryId = getQueryIdFromURL();
     const queryAction = useSelector((state: AppState) =>

app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx

@@ -11,6 +11,8 @@ import { JSCollection } from "entities/JSCollection";
 import { JsFileIconV2 } from "../ExplorerIcons";
 import { PluginType } from "entities/Action";
 import { jsCollectionIdURL } from "RouteBuilder";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+import { useLocation } from "react-router";
 
 type ExplorerJSCollectionEntityProps = {
   step: number;
@@ -30,13 +32,23 @@ export const ExplorerJSCollectionEntity = memo(
     const jsAction = useSelector((state: AppState) =>
       getJSCollection(state, props.id),
     ) as JSCollection;
+    const location = useLocation();
+    const navigateToUrl = jsCollectionIdURL({
+      pageId,
+      collectionId: jsAction.id,
+      params: {},
+    });
     const navigateToJSCollection = useCallback(() => {
       if (jsAction.id) {
-        history.push(
-          jsCollectionIdURL({ pageId, collectionId: jsAction.id, params: {} }),
-        );
+        AnalyticsUtil.logEvent("ENTITY_EXPLORER_CLICK", {
+          type: "JSOBJECT",
+          fromUrl: location.pathname,
+          toUrl: navigateToUrl,
+          name: jsAction.name,
+        });
+        history.push(navigateToUrl);
       }
-    }, [pageId, jsAction.id]);
+    }, [pageId, jsAction.id, jsAction.name, location.pathname]);
     const contextMenu = (
       <JSCollectionEntityContextMenu
         className={EntityClassNames.CONTEXT_MENU}

app/client/src/pages/Editor/Explorer/Pages/index.tsx

@@ -38,6 +38,8 @@ import useResize, {
   DIRECTION,
   CallbackResponseType,
 } from "utils/hooks/useResize";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+import { useLocation } from "react-router";
 
 const ENTITY_HEIGHT = 36;
 const MIN_PAGES_HEIGHT = 60;
@@ -80,6 +82,7 @@ function Pages() {
   const pageResizeRef = useRef<HTMLDivElement>(null);
   const storedHeightKey = "pagesContainerHeight_" + applicationId;
   const storedHeight = localStorage.getItem(storedHeightKey);
+  const location = useLocation();
 
   const resizeAfterCallback = (data: CallbackResponseType) => {
     localStorage.setItem(storedHeightKey, data.height.toString());
@@ -101,14 +104,22 @@ function Pages() {
     }
   }, [pageResizeRef]);
 
-  const switchPage = useCallback((page: Page) => {
-    history.push(
-      builderURL({
+  const switchPage = useCallback(
+    (page: Page) => {
+      const navigateToUrl = builderURL({
         pageSlug: page.slug as string,
         pageId: page.pageId,
-      }),
-    );
-  }, []);
+      });
+      AnalyticsUtil.logEvent("PAGE_NAME_CLICK", {
+        name: page.pageName,
+        fromUrl: location.pathname,
+        type: "PAGES",
+        toUrl: navigateToUrl,
+      });
+      history.push(navigateToUrl);
+    },
+    [location.pathname],
+  );
 
   const createPageCallback = useCallback(() => {
     const name = getNextEntityName(

app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx

@@ -10,6 +10,9 @@ import { CanvasStructure } from "reducers/uiReducers/pageCanvasStructureReducer"
 import { getSelectedWidget, getSelectedWidgets } from "selectors/ui";
 import { useNavigateToWidget } from "./useNavigateToWidget";
 import WidgetIcon from "./WidgetIcon";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+import { builderURL } from "RouteBuilder";
+import { useLocation } from "react-router";
 
 export type WidgetTree = WidgetProps & { children?: WidgetTree[] };
 
@@ -81,6 +84,7 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => {
     (state: AppState) => state.ui.widgetDragResize.selectedWidgetAncestry,
   );
   const icon = <WidgetIcon type={props.widgetType} />;
+  const location = useLocation();
 
   const shouldExpand = widgetsToExpand.includes(props.widgetId);
 
@@ -107,6 +111,22 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => {
     return widgetType === "MODAL_WIDGET" ? widgetId : parentModalId;
   }, [widgetType, widgetId, parentModalId]);
 
+  const switchWidget = useCallback(
+    (e) => {
+      AnalyticsUtil.logEvent("ENTITY_EXPLORER_CLICK", {
+        type: "WIDGETS",
+        fromUrl: location.pathname,
+        toUrl: `${builderURL({
+          pageId: props.pageId,
+          hash: widgetId,
+        })}`,
+        name: props.widgetName,
+      });
+      navigateToWidget(e);
+    },
+    [location.pathname, props.pageId, widgetId, props.widgetName],
+  );
+
   if (UNREGISTERED_WIDGETS.indexOf(props.widgetType) > -1) return null;
 
   const contextMenu = (
@@ -124,7 +144,7 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => {
 
   return (
     <Entity
-      action={navigateToWidget}
+      action={switchWidget}
       active={isWidgetSelected}
       className="widget"
       contextMenu={showContextMenu && contextMenu}

app/client/src/pages/Editor/Explorer/index.tsx

@@ -5,9 +5,11 @@ import { Colors } from "constants/Colors";
 import { tailwindLayers } from "constants/Layers";
 import React, { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useLocation } from "react-router";
 import { AppState } from "reducers";
 import { builderURL } from "RouteBuilder";
 import { getIsFirstTimeUserOnboardingEnabled } from "selectors/onboardingSelectors";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 import { trimQueryString } from "utils/helpers";
 import history from "utils/history";
 import WidgetSidebar from "../WidgetSidebar";
@@ -21,6 +23,7 @@ function ExplorerContent() {
   const isFirstTimeUserOnboardingEnabled = useSelector(
     getIsFirstTimeUserOnboardingEnabled,
   );
+  const location = useLocation();
   const switches = useMemo(
     () => [
       {
@@ -32,8 +35,14 @@ function ExplorerContent() {
         id: "widgets",
         text: "Widgets",
         action: () => {
-          !(trimQueryString(builderURL()) === window.location.pathname) &&
+          if (!(trimQueryString(builderURL()) === location.pathname)) {
             history.push(builderURL());
+            AnalyticsUtil.logEvent("WIDGET_TAB_CLICK", {
+              type: "WIDGET_TAB",
+              fromUrl: location.pathname,
+              toUrl: builderURL(),
+            });
+          }
           dispatch(forceOpenWidgetPanel(true));
           if (isFirstTimeUserOnboardingEnabled) {
             dispatch(toggleInOnboardingWidgetSelection(true));
@@ -46,6 +55,7 @@ function ExplorerContent() {
       forceOpenWidgetPanel,
       isFirstTimeUserOnboardingEnabled,
       toggleInOnboardingWidgetSelection,
+      location.pathname,
     ],
   );
   const [activeSwitch, setActiveSwitch] = useState(switches[0]);

app/client/src/utils/AnalyticsUtil.tsx

@@ -234,7 +234,11 @@ export type EventName =
   | "MANUAL_UPGRADE_CLICK"
   | "PAGE_NOT_FOUND"
   | "SIMILAR_TEMPLATE_CLICK"
-  | "RUN_JS_FUNCTION";
+  | "RUN_JS_FUNCTION"
+  | "PAGE_NAME_CLICK"
+  | "BACK_BUTTON_CLICK"
+  | "WIDGET_TAB_CLICK"
+  | "ENTITY_EXPLORER_CLICK";
 
 function getApplicationId(location: Location) {
   const pathSplit = location.pathname.split("/");