diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index d2ca488a69..d9c684f6de 100644 --- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx +++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx @@ -20,6 +20,8 @@ import { ConnectSDK, CreateFlag } from './ConnectSDK'; import { PlaceholderFlagMetricsChart } from './FlagMetricsChart'; import { WelcomeDialog } from './WelcomeDialog'; import { useLocalStorageState } from 'hooks/useLocalStorageState'; +import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview'; +import { ProjectSetupComplete } from './ProjectSetupComplete'; const ScreenExplanation = styled(Typography)(({ theme }) => ({ marginTop: theme.spacing(1), @@ -141,6 +143,15 @@ export const PersonalDashboard = () => { const { projects, activeProject, setActiveProject } = useProjects(); + const { project: activeProjectOverview, loading } = + useProjectOverview(activeProject); + + const onboardingCompleted = Boolean( + !loading && + activeProject && + activeProjectOverview?.onboardingStatus.status === 'onboarded', + ); + const [welcomeDialog, setWelcomeDialog] = useLocalStorageState< 'seen' | 'not_seen' >('welcome-dialog:v1', 'not_seen'); @@ -216,7 +227,9 @@ export const PersonalDashboard = () => { - {activeProject ? ( + {onboardingCompleted ? ( + + ) : activeProject ? ( ) : null} diff --git a/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx b/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx new file mode 100644 index 0000000000..b656bd4da3 --- /dev/null +++ b/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx @@ -0,0 +1,45 @@ +import { styled, Typography } from '@mui/material'; +import type { FC } from 'react'; +import { Link } from 'react-router-dom'; +import Lightbulb from '@mui/icons-material/LightbulbOutlined'; + +const TitleContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + gap: theme.spacing(2), + alignItems: 'center', + justifyContent: 'center', +})); + +const ActionBox = styled('article')(({ theme }) => ({ + padding: theme.spacing(4, 2), + display: 'flex', + gap: theme.spacing(3), + flexDirection: 'column', +})); + +export const ProjectSetupComplete: FC<{ project: string }> = ({ project }) => { + return ( + + + +

Project Insight

+
+ + This project already has connected SDKs and existing feature + flags. + + + + + Create a new feature flag + {' '} + or go to the{' '} + + go to the project + {' '} + to work with existing flags + +
+ ); +};