display setup complete message when project is onboarded (#8217)

This PR adds the new `ProjectSetupComplete` component (the name can be
changed) that we display when a project has been set up with a flag and
a connected SDK.

It uses the project overview to check the project's onboarding status.


![image](https://github.com/user-attachments/assets/9e7c5986-46ee-4aa1-9c35-a921f3402468)

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 = () => {
                     </List>
                 </SpacedGridItem>
                 <SpacedGridItem item lg={4} md={1}>
-                    {activeProject ? (
+                    {onboardingCompleted ? (
+                        <ProjectSetupComplete project={activeProject} />
+                    ) : activeProject ? (
                         <CreateFlag project={activeProject} />
                     ) : null}
                 </SpacedGridItem>

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 (
+        <ActionBox>
+            <TitleContainer>
+                <Lightbulb color='primary' />
+                <h3>Project Insight</h3>
+            </TitleContainer>
+            <Typography>
+                This project already has connected SDKs and existing feature
+                flags.
+            </Typography>
+
+            <Typography>
+                <Link to={`/projects/${project}?create=true`}>
+                    Create a new feature flag
+                </Link>{' '}
+                or go to the{' '}
+                <Link to={`/projects/${project}`} title={project}>
+                    go to the project
+                </Link>{' '}
+                to work with existing flags
+            </Typography>
+        </ActionBox>
+    );
+};