feat: handle cases where user has no flags (#8416)

This PR handles the cases where a user has no flags to display. There's
a few different ways this can happen:

1. The user has no project membership.
2. The user has projects, but no flags.

In the first case, we tell them to reach out to their admin.
In the second case, we tell them to go to one of their projects to
create a new flag.

User has no projects:

![image](https://github.com/user-attachments/assets/84b94044-3577-4009-97ae-ab709b94fc2e)


User has no flags:

![image](https://github.com/user-attachments/assets/d7fa2fcc-d758-4d7b-b986-376315150846)

frontend/src/component/personalDashboard/FlagMetricsChart.tsx

@@ -27,14 +27,16 @@ import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/Feat
 
 const defaultYes = [0, 14, 28, 21, 33, 31, 31, 22, 26, 37, 31, 14, 21, 14, 0];
 
-const placeholderData = (theme: Theme) => ({
+const placeholderData = (theme: Theme, label?: string) => ({
     labels: Array.from({ length: 15 }, (_, i) => i + 1),
     datasets: [
         {
             data: defaultYes,
             backgroundColor: theme.palette.divider,
             hoverBackgroundColor: theme.palette.divider,
-            label: 'No metrics for this feature flag in the selected environment and time period',
+            label:
+                label ||
+                'No metrics for this feature flag in the selected environment and time period',
         },
     ],
 });
@@ -43,7 +45,9 @@ const ChartWrapper = styled('div')({
     width: '90%',
 });
 
-export const PlaceholderFlagMetricsChart = () => {
+export const PlaceholderFlagMetricsChart: React.FC<{ label?: string }> = ({
+    label,
+}) => {
     const theme = useTheme();
 
     const options = useMemo(() => {
@@ -51,7 +55,7 @@ export const PlaceholderFlagMetricsChart = () => {
     }, [theme]);
 
     const data = useMemo(() => {
-        return placeholderData(theme);
+        return placeholderData(theme, label);
     }, [theme]);
 
     return (

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -3,6 +3,7 @@ import {
     Accordion,
     AccordionDetails,
     AccordionSummary,
+    Alert,
     Button,
     IconButton,
     Link,
@@ -247,6 +248,12 @@ const MainContent = styled('div')(({ theme }) => ({
     gap: theme.spacing(2),
 }));
 
+const NoActiveFlagsInfo = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'column',
+    gap: theme.spacing(2),
+}));
+
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
 
@@ -283,6 +290,9 @@ export const PersonalDashboard = () => {
         !detailsError && activeProjectStage === 'loading',
     );
 
+    const [createFlagDialogOpen, setCreateFlagDialogOpen] =
+        React.useState(false);
+
     return (
         <MainContent>
             <WelcomeSection>
@@ -381,12 +391,25 @@ export const PersonalDashboard = () => {
                                             />
                                         ))}
                                     </List>
+                                ) : activeProject ? (
+                                    <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>
                                 ) : (
-                                    <Typography>
-                                        You have not created or favorited any
-                                        feature flags. Once you do, they will
-                                        show up here.
-                                    </Typography>
+                                    <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>
 
@@ -397,7 +420,11 @@ export const PersonalDashboard = () => {
                                         onArchive={refetchDashboard}
                                     />
                                 ) : (
-                                    <PlaceholderFlagMetricsChart />
+                                    <PlaceholderFlagMetricsChart
+                                        label={
+                                            'Metrics for your feature flags will be shown here'
+                                        }
+                                    />
                                 )}
                             </SpacedGridItem>
                         </FlagGrid>