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 ( @@ -381,12 +391,25 @@ export const PersonalDashboard = () => { /> ))} + ) : activeProject ? ( + + + You have not created or favorited + any feature flags. Once you do, they + will show up here. + + + To create a new flag, go to one of + your projects. + + ) : ( - - You have not created or favorited any - feature flags. Once you do, they will - show up here. - + + 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. + )} @@ -397,7 +420,11 @@ export const PersonalDashboard = () => { onArchive={refetchDashboard} /> ) : ( - + )}