From a5cfd2e80e204e5b163779d305f7a42a90ba3869 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 12:54:42 +0200
Subject: [PATCH] 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)
---
 .../personalDashboard/FlagMetricsChart.tsx    | 12 ++++--
 .../personalDashboard/PersonalDashboard.tsx   | 39 ++++++++++++++++---
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index ceb8a562b0..4921aa5747 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/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 (
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index d5ba350b8d..431ffa342c 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/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>