Merge pull request opendatahub-io#2781 from pilhuhn/home-page-tracking

[RHOAIENG-6314] Add tracking for new Homepage.
red-hat-data-services · May 21, 2024 · 1c223b6 · 1c223b6
2 parents f0914ae + 1febf2a
commit 1c223b6
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 13 deletions.
diff --git a/frontend/src/pages/home/projects/ProjectCard.tsx b/frontend/src/pages/home/projects/ProjectCard.tsx
@@ -23,6 +23,7 @@ import {
   getProjectDisplayName,
   getProjectOwner,
 } from '~/concepts/projects/utils';
+import { fireTrackingEventRaw } from '~/utilities/segmentIOUtils';
 
 interface ProjectCardProps {
   project: ProjectKind;
@@ -38,7 +39,13 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
           data-testid={`project-link-${project.metadata.name}`}
           variant="link"
           isInline
-          onClick={() => navigate(`/projects/${project.metadata.name}`)}
+          onClick={() => {
+            navigate(`/projects/${project.metadata.name}`);
+            fireTrackingEventRaw('HomeCardClicked', {
+              to: `/projects/${project.metadata.name}`,
+              type: 'project',
+            });
+          }}
           style={{ fontSize: 'var(--pf-v5-global--FontSize--md)' }}
         >
           <Truncate content={getProjectDisplayName(project)} />

diff --git a/frontend/src/pages/home/useEnableTeamSection.tsx b/frontend/src/pages/home/useEnableTeamSection.tsx
@@ -13,6 +13,7 @@ import InfoGalleryItem from '~/concepts/design/InfoGalleryItem';
 import { useBrowserStorage } from '~/components/browserStorage';
 import { SupportedArea } from '~/concepts/areas';
 import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
+import { fireTrackingEventRaw } from '~/utilities/segmentIOUtils';
 
 export const useEnableTeamSection = (): React.ReactNode => {
   const navigate = useNavigate();
@@ -32,6 +33,15 @@ export const useEnableTeamSection = (): React.ReactNode => {
     return null;
   }
 
+  const trackAndNavigate = (section: string, to: string): void => {
+    fireTrackingEventRaw('HomeCardClicked', {
+      to: `${to}`,
+      type: 'enableTeam',
+      section: `${section}`,
+    });
+    navigate(to);
+  };
+
   const infoItems = [];
 
   if (notebooksAvailable) {
@@ -41,7 +51,7 @@ export const useEnableTeamSection = (): React.ReactNode => {
         testId="landing-page-admin--notebook-images"
         isOpen={resourcesOpen}
         title="Notebook images"
-        onClick={() => navigate('/notebookImages')}
+        onClick={() => trackAndNavigate('notebook-images', '/notebookImages')}
         imgSrc={notebookImagesImage}
         sectionType={SectionType.setup}
         description={
@@ -62,7 +72,7 @@ export const useEnableTeamSection = (): React.ReactNode => {
         testId="landing-page-admin--serving-runtimes"
         isOpen={resourcesOpen}
         title="Serving runtimes"
-        onClick={() => navigate('/servingRuntimes')}
+        onClick={() => trackAndNavigate('serving-runtimes', '/servingRuntimes')}
         imgSrc={servingRuntimesImage}
         sectionType={SectionType.setup}
         description={
@@ -84,7 +94,7 @@ export const useEnableTeamSection = (): React.ReactNode => {
         testId="landing-page-admin--cluster-settings"
         isOpen={resourcesOpen}
         title="Cluster settings"
-        onClick={() => navigate('/clusterSettings')}
+        onClick={() => trackAndNavigate('cluster-settings', '/clusterSettings')}
         imgSrc={clusterSettingsImage}
         sectionType={SectionType.setup}
         description={
@@ -105,7 +115,7 @@ export const useEnableTeamSection = (): React.ReactNode => {
         testId="landing-page-admin--user-management"
         isOpen={resourcesOpen}
         title="User management"
-        onClick={() => navigate('/groupSettings')}
+        onClick={() => trackAndNavigate('user-management', '/groupSettings')}
         imgSrc={userImage}
         sectionType={SectionType.setup}
         description={

diff --git a/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx b/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx
@@ -8,6 +8,8 @@ import { isValidK8sName } from '~/concepts/k8s/utils';
 import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
 import { NameDescType } from '~/pages/projects/types';
 import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
+import { fireTrackingEventRaw } from '~/utilities/segmentIOUtils';
+import { TrackingOutcome } from '~/types';
 
 type ManageProjectModalProps = {
   editProjectData?: ProjectKind;
@@ -46,11 +48,24 @@ const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
 
   const onBeforeClose = (newProjectName?: string) => {
     onClose(newProjectName);
+    if (newProjectName) {
+      fireTrackingEventRaw(editProjectData ? 'Project Edited' : 'NewProject Created', {
+        outcome: TrackingOutcome.submit,
+        success: true,
+        projectName: newProjectName,
+      });
+    }
     setFetching(false);
     setError(undefined);
     setNameDesc({ name: '', k8sName: undefined, description: '' });
   };
   const handleError = (e: Error) => {
+    fireTrackingEventRaw(editProjectData ? 'Project Edited' : 'NewProject Created', {
+      outcome: TrackingOutcome.submit,
+      success: false,
+      projectName: '',
+      error: e.message,
+    });
     setError(e);
     setFetching(false);
   };
@@ -85,7 +100,16 @@ const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
         >
           {editProjectData ? 'Update' : 'Create'}
         </Button>,
-        <Button key="cancel" variant="link" onClick={() => onBeforeClose()}>
+        <Button
+          key="cancel"
+          variant="link"
+          onClick={() => {
+            onBeforeClose();
+            fireTrackingEventRaw(editProjectData ? 'Project Edited' : 'NewProject Created', {
+              outcome: TrackingOutcome.cancel,
+            });
+          }}
+        >
           Cancel
         </Button>,
       ]}

diff --git a/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx b/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Button } from '@patternfly/react-core';
-import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
-import { TrackingOutcome } from '~/types';
 import ManageProjectModal from './ManageProjectModal';
 
 type NewProjectButtonProps = {
@@ -24,11 +22,6 @@ const NewProjectButton: React.FC<NewProjectButtonProps> = ({ closeOnCreate, onPr
       <ManageProjectModal
         open={open}
         onClose={(newProjectName) => {
-          fireTrackingEvent('NewProject Created', {
-            outcome: newProjectName ? TrackingOutcome.submit : TrackingOutcome.cancel,
-            success: onProjectCreated != null,
-            projectName: newProjectName || '',
-          });
           if (newProjectName) {
             if (onProjectCreated) {
               onProjectCreated(newProjectName);