Add action to track user activity events in Installation Wizard

assets/recentActivity/index.ejs

@@ -19,6 +19,7 @@
       window.theme;
       window.mainFont;
       window.codeFont;
+      window.isJaegerEnabled;
       window.recentActivityRefreshInterval;
       window.recentActivityExpirationLimit;
       window.recentActivityDocumentationURL;

src/components/InstallationWizard/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { dispatcher } from "../../dispatcher";
+import { usePrevious } from "../../hooks/usePrevious";
 import { getActions } from "../../utils/getActions";
 import { actions as globalActions } from "../common/App";
 import { Loader } from "../common/Loader";
@@ -23,13 +24,34 @@ const firstStep = window.wizardSkipInstallationStep === true ? 1 : 0;
 
 export const InstallationWizard = () => {
   const [currentStep, setCurrentStep] = useState<number>(firstStep);
+  const previousStep = usePrevious(currentStep);
   const [isCollectorModified, setIsCollectorModified] =
     useState<boolean>(false);
   const [isAlreadyUsingOtel, setIsAlreadyUsingOtel] = useState<boolean>(false);
   const [connectionCheckStatus, setConnectionCheckStatus] =
     useState<ConnectionCheckStatus>();
 
   useEffect(() => {
+    if (previousStep === 0 && currentStep === 1) {
+      window.sendMessageToDigma({
+        action: globalActions.sendTrackingEvent,
+        payload: {
+          event_name: "installation wizard install step passed"
+        }
+      });
+    }
+  }, [previousStep, currentStep]);
+
+  useEffect(() => {
+    if (firstStep === 1) {
+      window.sendMessageToDigma({
+        action: globalActions.sendTrackingEvent,
+        payload: {
+          event_name: "installation wizard install step automatically passed"
+        }
+      });
+    }
+
     const handleConnectionCheckResultData = (data: unknown) => {
       const result = (data as ConnectionCheckResultData).result;
       setConnectionCheckStatus(result);
@@ -66,6 +88,13 @@ export const InstallationWizard = () => {
         url: "https://open.docker.com/extensions/marketplace?extensionId=digmaai/digma-docker-extension"
       }
     });
+    window.sendMessageToDigma({
+      action: globalActions.sendTrackingEvent,
+      payload: {
+        event_name:
+          "installation wizard get digma docker extension button clicked"
+      }
+    });
   };
 
   const handleContinueButtonClick = () => {
@@ -107,7 +136,7 @@ export const InstallationWizard = () => {
       <>
         <s.SectionTitle>Install Digma Docker Extension</s.SectionTitle>
         <s.SectionDescription>
-          (You’ll need{" "}
+          (You&apos;ll need{" "}
           <s.Link
             href={"https://www.docker.com/products/docker-desktop/"}
             target={"_blank"}
@@ -128,7 +157,7 @@ export const InstallationWizard = () => {
           backend:
         </s.SectionTitle>
         <s.SectionDescription>
-          (You’ll need{" "}
+          (You&apos;ll need{" "}
           <s.Link
             href={"https://docs.docker.com/get-docker/"}
             target={"_blank"}

src/components/common/App/index.tsx

@@ -31,7 +31,8 @@ export const actions = getActions(ACTION_PREFIX, {
   setColorMode: "SET_THEME",
   setMainFont: "SET_MAIN_FONT",
   setCodeFont: "SET_CODE_FONT",
-  openURLInDefaultBrowser: "OPEN_URL_IN_DEFAULT_BROWSER"
+  openURLInDefaultBrowser: "OPEN_URL_IN_DEFAULT_BROWSER",
+  sendTrackingEvent: "SEND_TRACKING_EVENT"
 });
 
 export const App = (props: AppProps) => {