chore: track personal dashboard navigation (#8417)

This PR adds plausible tracking for navigating to items from the
personal dashboard.

It tracks:

- Navigating to projects from the list
- Navigating to projects from the onboarding screen
- Navigating to flags from the list
- Opening the key concepts dialog

frontend/src/component/personalDashboard/ConnectSDK.tsx

@@ -1,4 +1,5 @@
 import { Button, styled, Typography } from '@mui/material';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import type { FC } from 'react';
 
 const TitleContainer = styled('div')(({ theme }) => ({
@@ -45,6 +46,7 @@ const ActionBox = styled('div')(({ theme }) => ({
 }));
 
 export const CreateFlag: FC<{ project: string }> = ({ project }) => {
+    const { trackEvent } = usePlausibleTracker();
     return (
         <ActionBox data-loading>
             <TitleContainer>
@@ -56,7 +58,17 @@ export const CreateFlag: FC<{ project: string }> = ({ project }) => {
                 <p>Create one to get started.</p>
             </div>
             <div>
-                <Button href={`projects/${project}`} variant='contained'>
+                <Button
+                    href={`/projects/${project}`}
+                    onClick={() => {
+                        trackEvent('personal-dashboard', {
+                            props: {
+                                eventType: `Go to project from onboarding`,
+                            },
+                        });
+                    }}
+                    variant='contained'
+                >
                     Go to project
                 </Button>
             </div>

frontend/src/component/personalDashboard/MyProjects.tsx

@@ -30,6 +30,7 @@ import {
     SpacedGridItem,
 } from './Grid';
 import { ContactAdmins, DataError } from './ProjectDetailsError';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const ActiveProjectDetails: FC<{
     project: PersonalDashboardSchemaProjectsItem;
@@ -70,6 +71,7 @@ const ProjectListItem: FC<{
     onClick: () => void;
 }> = ({ project, selected, onClick }) => {
     const activeProjectRef = useRef<HTMLLIElement>(null);
+    const { trackEvent } = usePlausibleTracker();
 
     useEffect(() => {
         if (activeProjectRef.current) {
@@ -99,6 +101,13 @@ const ProjectListItem: FC<{
                         href={`projects/${project.id}`}
                         size='small'
                         sx={{ ml: 'auto' }}
+                        onClick={() => {
+                            trackEvent('personal-dashboard', {
+                                props: {
+                                    eventType: `Go to project from list`,
+                                },
+                            });
+                        }}
                     >
                         <LinkIcon titleAccess={`projects/${project.id}`} />
                     </IconButton>

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -35,6 +35,7 @@ import {
 } from './Grid';
 import { ContentGridNoProjects } from './ContentGridNoProjects';
 import ExpandMore from '@mui/icons-material/ExpandMore';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const StyledCardTitle = styled('div')<{ lines?: number }>(
     ({ theme, lines = 2 }) => ({
@@ -58,6 +59,7 @@ const FlagListItem: FC<{
     onClick: () => void;
 }> = ({ flag, selected, onClick }) => {
     const activeFlagRef = useRef<HTMLLIElement>(null);
+    const { trackEvent } = usePlausibleTracker();
 
     useEffect(() => {
         if (activeFlagRef.current) {
@@ -68,6 +70,7 @@ const FlagListItem: FC<{
         }
     }, []);
     const IconComponent = getFeatureTypeIcons(flag.type);
+    const flagLink = `/projects/${flag.project}/features/${flag.name}`;
     return (
         <ListItem
             key={flag.name}
@@ -85,13 +88,18 @@ const FlagListItem: FC<{
                     <StyledCardTitle>{flag.name}</StyledCardTitle>
                     <IconButton
                         component={Link}
-                        href={`projects/${flag.project}/features/${flag.name}`}
+                        href={flagLink}
+                        onClick={() => {
+                            trackEvent('personal-dashboard', {
+                                props: {
+                                    eventType: `Go to flag from list`,
+                                },
+                            });
+                        }}
                         size='small'
                         sx={{ ml: 'auto' }}
                     >
-                        <LinkIcon
-                            titleAccess={`projects/${flag.project}/features/${flag.name}`}
-                        />
+                        <LinkIcon titleAccess={flagLink} />
                     </IconButton>
                 </ListItemBox>
             </ListItemButton>
@@ -256,6 +264,7 @@ const NoActiveFlagsInfo = styled('div')(({ theme }) => ({
 
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
+    const { trackEvent } = usePlausibleTracker();
 
     const name = user?.name;
 
@@ -306,7 +315,14 @@ export const PersonalDashboard = () => {
                     }}
                     size={'small'}
                     variant='text'
-                    onClick={() => setWelcomeDialog('open')}
+                    onClick={() => {
+                        trackEvent('personal-dashboard', {
+                            props: {
+                                eventType: 'open key concepts',
+                            },
+                        });
+                        setWelcomeDialog('open');
+                    }}
                 >
                     View key concepts
                 </ViewKeyConceptsButton>

frontend/src/hooks/usePlausibleTracker.ts

@@ -68,7 +68,8 @@ export type CustomEvents =
     | 'search-opened'
     | 'events-exported'
     | 'event-timeline'
-    | 'onboarding';
+    | 'onboarding'
+    | 'personal-dashboard';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);