diff --git a/frontend/src/pages/home/projects/ProjectCard.tsx b/frontend/src/pages/home/projects/ProjectCard.tsx index 0d15f9903f..a0c955d33a 100644 --- 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 = ({ 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)' }} > diff --git a/frontend/src/pages/home/useEnableTeamSection.tsx b/frontend/src/pages/home/useEnableTeamSection.tsx index 09b8f443e1..16d894e617 100644 --- 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 index 795e1c4093..dffd7752c3 100644 --- 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 = ({ 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 = ({ > {editProjectData ? 'Update' : 'Create'} , - , ]} diff --git a/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx b/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx index 0222bd7d0b..72f5d5a79e 100644 --- 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 = ({ closeOnCreate, onPr { - fireTrackingEvent('NewProject Created', { - outcome: newProjectName ? TrackingOutcome.submit : TrackingOutcome.cancel, - success: onProjectCreated != null, - projectName: newProjectName || '', - }); if (newProjectName) { if (onProjectCreated) { onProjectCreated(newProjectName);