feat: personal dashboard connect sdk (#8190)

frontend/src/component/personalDashboard/ConnectSDK.tsx

@@ -0,0 +1,70 @@
+import { Button, styled, Typography } from '@mui/material';
+import type { FC } from 'react';
+
+const TitleContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+    alignItems: 'center',
+    fontSize: theme.spacing(1.75),
+    fontWeight: 'bold',
+}));
+
+const NeutralCircleContainer = styled('span')(({ theme }) => ({
+    width: '28px',
+    height: '28px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.palette.neutral.border,
+    borderRadius: '50%',
+}));
+
+const ActionBox = styled('div')(({ theme }) => ({
+    flexBasis: '50%',
+    padding: theme.spacing(4, 2),
+    display: 'flex',
+    gap: theme.spacing(3),
+    flexDirection: 'column',
+}));
+
+export const CreateFlag: FC<{ project: string }> = ({ project }) => {
+    return (
+        <ActionBox>
+            <TitleContainer>
+                <NeutralCircleContainer>1</NeutralCircleContainer>
+                Create a feature flag
+            </TitleContainer>
+            <Typography>
+                <div>The project currently holds no feature toggles.</div>
+                <div>Create a feature flag to get started.</div>
+            </Typography>
+            <div>
+                <Button href={`projects/${project}`} variant='contained'>
+                    Go to project
+                </Button>
+            </div>
+        </ActionBox>
+    );
+};
+
+export const ConnectSDK: FC<{ project: string }> = ({ project }) => {
+    return (
+        <ActionBox>
+            {' '}
+            <TitleContainer>
+                <NeutralCircleContainer>2</NeutralCircleContainer>
+                Connect an SDK
+            </TitleContainer>
+            <Typography>
+                Your project is not yet connected to any SDK. In order to start
+                using your feature flag connect an SDK to the project.
+            </Typography>
+            <div>
+                <Button href={`projects/${project}`} variant='contained'>
+                    Go to project
+                </Button>
+            </div>
+        </ActionBox>
+    );
+};

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -1,21 +1,22 @@
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import {
-    Grid,
-    Paper,
-    styled,
-    Typography,
     Box,
+    IconButton,
+    Link,
     List,
     ListItem,
     ListItemButton,
-    Link,
-    IconButton,
+    styled,
+    Typography,
+    Grid,
 } from '@mui/material';
 import type { Theme } from '@mui/material/styles/createTheme';
 import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
-import { type FC, useState } from 'react';
+import { type FC, useEffect, useState } from 'react';
 import { useProfile } from 'hooks/api/getters/useProfile/useProfile';
 import LinkIcon from '@mui/icons-material/Link';
+import { Badge } from '../common/Badge/Badge';
+import { ConnectSDK, CreateFlag } from './ConnectSDK';
 
 const ScreenExplanation = styled(Typography)(({ theme }) => ({
     marginTop: theme.spacing(1),
@@ -29,10 +30,9 @@ const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 
-const Projects = styled(Paper)(({ theme }) => ({
+const ProjectsGrid = styled(Grid)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
     borderRadius: `${theme.shape.borderRadiusLarge}px`,
-    boxShadow: 'none',
-    padding: theme.spacing(4),
 }));
 
 const ProjectBox = styled(Box)(({ theme }) => ({
@@ -104,13 +104,15 @@ const ActiveProjectDetails: FC<{
     );
 };
 
-export const PersonalDashboard = () => {
-    const { user } = useAuthUser();
-
-    const name = user?.name;
+const SpacedGrid = styled(Grid)(({ theme }) => ({
+    padding: theme.spacing(4),
+    border: `0.5px solid ${theme.palette.divider}`,
+}));
 
+const useProjects = () => {
     const myProjects = useProfile().profile?.projects || [];
 
+    // TODO: add real data for flags/members/health
     const projects = myProjects.map((project) => ({
         name: project,
         flags: 0,
@@ -118,9 +120,23 @@ export const PersonalDashboard = () => {
         health: 100,
     }));
 
-    const [activeProject, setActiveProject] = useState<string | null>(
-        projects[0]?.name,
-    );
+    const [activeProject, setActiveProject] = useState(projects[0]?.name);
+
+    useEffect(() => {
+        if (!activeProject && projects.length > 0) {
+            setActiveProject(projects[0].name);
+        }
+    }, [JSON.stringify(projects)]);
+
+    return { projects, activeProject, setActiveProject };
+};
+
+export const PersonalDashboard = () => {
+    const { user } = useAuthUser();
+
+    const name = user?.name;
+
+    const { projects, activeProject, setActiveProject } = useProjects();
 
     return (
         <div>
@@ -132,14 +148,19 @@ export const PersonalDashboard = () => {
                 most of Unleash
             </ScreenExplanation>
             <StyledHeaderTitle>Your resources</StyledHeaderTitle>
-            <Projects>
-                <Grid container spacing={2} columns={{ lg: 12 }}>
-                    <Grid item lg={3}>
+            <ProjectsGrid container columns={{ lg: 12, md: 1 }}>
+                <SpacedGrid item lg={4} md={1}>
                     <Typography variant='h3'>My projects</Typography>
-                    </Grid>
-                    <Grid item lg={4} />
-                    <Grid item lg={5} />
-                    <Grid item lg={3}>
+                </SpacedGrid>
+                <SpacedGrid
+                    item
+                    lg={8}
+                    md={1}
+                    sx={{ display: 'flex', justifyContent: 'flex-end' }}
+                >
+                    <Badge color='warning'>Setup incomplete</Badge>
+                </SpacedGrid>
+                <SpacedGrid item lg={4} md={1}>
                     <List
                         disablePadding={true}
                         sx={{ maxHeight: '400px', overflow: 'auto' }}
@@ -147,6 +168,7 @@ export const PersonalDashboard = () => {
                         {projects.map((project) => {
                             return (
                                 <ListItem
+                                    key={project.name}
                                     disablePadding={true}
                                     sx={{ mb: 1 }}
                                 >
@@ -185,19 +207,29 @@ export const PersonalDashboard = () => {
                             );
                         })}
                     </List>
-                    </Grid>
-                    <Grid item lg={4}>
-                        Connect an SDK
-                    </Grid>
-                    <Grid item lg={5}>
-                        Create a feature toggle
-                    </Grid>
-                    <Grid item lg={3} />
-                    <Grid item lg={9}>
-                        Your role in this project
-                    </Grid>
-                </Grid>
-            </Projects>
+                </SpacedGrid>
+                <SpacedGrid item lg={4} md={1}>
+                    {activeProject ? (
+                        <CreateFlag project={activeProject} />
+                    ) : null}
+                </SpacedGrid>
+                <SpacedGrid item lg={4} md={1}>
+                    {activeProject ? (
+                        <ConnectSDK project={activeProject} />
+                    ) : null}
+                </SpacedGrid>
+                <SpacedGrid item lg={4} md={1} />
+                <SpacedGrid
+                    item
+                    lg={8}
+                    md={1}
+                    sx={{ display: 'flex', gap: 1, alignItems: 'center' }}
+                >
+                    <span>Your roles in this project:</span>{' '}
+                    <Badge color='secondary'>Member</Badge>{' '}
+                    <Badge color='secondary'>Another</Badge>
+                </SpacedGrid>
+            </ProjectsGrid>
         </div>
     );
 };