refactor: refactor personal dashboard front end code pt1

frontend/src/component/personalDashboard/ContentGridNoProjects.tsx

@@ -9,7 +9,7 @@ import {
     EmptyGridItem,
     ProjectGrid,
     GridItem,
-} from './Grid';
+} from './SharedComponents';
 
 const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({
     padding: theme.spacing(4),

frontend/src/component/personalDashboard/MyFlags.tsx

@@ -0,0 +1,180 @@
+import { type FC, useEffect, useRef } from 'react';
+import {
+    ContentGridContainer,
+    FlagGrid,
+    ListItemBox,
+    SpacedGridItem,
+    StyledCardTitle,
+    StyledList,
+    listItemStyle,
+} from './SharedComponents';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
+import {
+    Alert,
+    IconButton,
+    Link,
+    ListItem,
+    ListItemButton,
+    Typography,
+    styled,
+} from '@mui/material';
+import LinkIcon from '@mui/icons-material/ArrowForward';
+import React from 'react';
+import type { PersonalDashboardSchemaFlagsItem } from 'openapi';
+
+const NoActiveFlagsInfo = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'column',
+    gap: theme.spacing(2),
+}));
+
+const FlagListItem: FC<{
+    flag: { name: string; project: string; type: string };
+    selected: boolean;
+    onClick: () => void;
+}> = ({ flag, selected, onClick }) => {
+    const activeFlagRef = useRef<HTMLLIElement>(null);
+    const { trackEvent } = usePlausibleTracker();
+
+    useEffect(() => {
+        if (activeFlagRef.current) {
+            activeFlagRef.current.scrollIntoView({
+                block: 'nearest',
+                inline: 'start',
+            });
+        }
+    }, []);
+    const IconComponent = getFeatureTypeIcons(flag.type);
+    const flagLink = `projects/${flag.project}/features/${flag.name}`;
+    return (
+        <ListItem
+            key={flag.name}
+            disablePadding={true}
+            sx={{ mb: 1 }}
+            ref={selected ? activeFlagRef : null}
+        >
+            <ListItemButton
+                sx={listItemStyle}
+                selected={selected}
+                onClick={onClick}
+            >
+                <ListItemBox>
+                    <IconComponent color='primary' />
+                    <StyledCardTitle>{flag.name}</StyledCardTitle>
+                    <IconButton
+                        component={Link}
+                        href={flagLink}
+                        onClick={() => {
+                            trackEvent('personal-dashboard', {
+                                props: {
+                                    eventType: `Go to flag from list`,
+                                },
+                            });
+                        }}
+                        size='small'
+                        sx={{ ml: 'auto' }}
+                    >
+                        <LinkIcon titleAccess={flagLink} />
+                    </IconButton>
+                </ListItemBox>
+            </ListItemButton>
+        </ListItem>
+    );
+};
+
+type FlagData =
+    | {
+          state: 'flags';
+          flags: PersonalDashboardSchemaFlagsItem[];
+          activeFlag?: PersonalDashboardSchemaFlagsItem;
+      }
+    | {
+          state: 'no flags';
+      };
+
+type Props = {
+    hasProjects: boolean;
+    flagData: FlagData;
+    setActiveFlag: (flag: PersonalDashboardSchemaFlagsItem) => void;
+    refetchDashboard: () => void;
+};
+
+export const MyFlags: FC<Props> = ({
+    hasProjects,
+    flagData,
+    setActiveFlag,
+    refetchDashboard,
+}) => {
+    return (
+        <ContentGridContainer>
+            <FlagGrid>
+                <SpacedGridItem gridArea='flags'>
+                    {flagData.state === 'flags' ? (
+                        <StyledList
+                            disablePadding={true}
+                            sx={{
+                                height: '100%',
+                                overflow: 'auto',
+                            }}
+                        >
+                            {flagData.flags.map((flag) => (
+                                <FlagListItem
+                                    key={flag.name}
+                                    flag={flag}
+                                    selected={
+                                        flag.name === flagData.activeFlag?.name
+                                    }
+                                    onClick={() => setActiveFlag(flag)}
+                                />
+                            ))}
+                        </StyledList>
+                    ) : hasProjects ? (
+                        <NoActiveFlagsInfo>
+                            <Typography>
+                                You have not created or favorited any feature
+                                flags. Once you do, they will show up here.
+                            </Typography>
+                            <Typography>
+                                To create a new flag, go to one of your
+                                projects.
+                            </Typography>
+                        </NoActiveFlagsInfo>
+                    ) : (
+                        <Alert severity='info'>
+                            You need to create or join a project to be able to
+                            add a flag, or you must be given the rights by your
+                            admin to add feature flags.
+                        </Alert>
+                    )}
+                </SpacedGridItem>
+
+                <SpacedGridItem gridArea='chart'>
+                    {flagData.state === 'flags' && flagData.activeFlag ? (
+                        <FlagMetricsChart
+                            flag={flagData.activeFlag}
+                            onArchive={refetchDashboard}
+                        />
+                    ) : (
+                        <PlaceholderFlagMetricsChart
+                            label={
+                                'Metrics for your feature flags will be shown here'
+                            }
+                        />
+                    )}
+                </SpacedGridItem>
+            </FlagGrid>
+        </ContentGridContainer>
+    );
+};
+
+const FlagMetricsChart = React.lazy(() =>
+    import('./FlagMetricsChart').then((module) => ({
+        default: module.FlagMetricsChart,
+    })),
+);
+const PlaceholderFlagMetricsChart = React.lazy(() =>
+    import('./FlagMetricsChart').then((module) => ({
+        default: module.PlaceholderFlagMetricsChartWithWrapper,
+    })),
+);

frontend/src/component/personalDashboard/MyProjects.tsx

@@ -13,7 +13,6 @@ import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
 import { LatestProjectEvents } from './LatestProjectEvents';
 import { RoleAndOwnerInfo } from './RoleAndOwnerInfo';
 import { forwardRef, useEffect, useRef, type FC } from 'react';
-import { StyledCardTitle } from './PersonalDashboard';
 import type {
     PersonalDashboardProjectDetailsSchema,
     PersonalDashboardSchemaAdminsItem,
@@ -28,7 +27,8 @@ import {
     GridItem,
     SpacedGridItem,
     StyledList,
-} from './Grid';
+    StyledCardTitle,
+} from './SharedComponents';
 import { ContactAdmins, DataError } from './ProjectDetailsError';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';