From 10ec2e7de5a115290162c11e9a9353b42fd96224 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 19 Sep 2024 17:01:33 +0200
Subject: [PATCH] feat: personal dashboard connect sdk (#8190)

---
 .../personalDashboard/ConnectSDK.tsx          |  70 +++++++
 .../personalDashboard/PersonalDashboard.tsx   | 194 ++++++++++--------
 2 files changed, 183 insertions(+), 81 deletions(-)
 create mode 100644 frontend/src/component/personalDashboard/ConnectSDK.tsx

diff --git a/frontend/src/component/personalDashboard/ConnectSDK.tsx b/frontend/src/component/personalDashboard/ConnectSDK.tsx
new file mode 100644
index 000000000000..f8314eae337b
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 7a94b056a6d5..5267d9afe1a9 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/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,72 +148,88 @@ export const PersonalDashboard = () => {
                 most of Unleash
             </ScreenExplanation>
             <StyledHeaderTitle>Your resources</StyledHeaderTitle>
-            <Projects>
-                <Grid container spacing={2} columns={{ lg: 12 }}>
-                    <Grid item lg={3}>
-                        <Typography variant='h3'>My projects</Typography>
-                    </Grid>
-                    <Grid item lg={4} />
-                    <Grid item lg={5} />
-                    <Grid item lg={3}>
-                        <List
-                            disablePadding={true}
-                            sx={{ maxHeight: '400px', overflow: 'auto' }}
-                        >
-                            {projects.map((project) => {
-                                return (
-                                    <ListItem
-                                        disablePadding={true}
-                                        sx={{ mb: 1 }}
+            <ProjectsGrid container columns={{ lg: 12, md: 1 }}>
+                <SpacedGrid item lg={4} md={1}>
+                    <Typography variant='h3'>My projects</Typography>
+                </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' }}
+                    >
+                        {projects.map((project) => {
+                            return (
+                                <ListItem
+                                    key={project.name}
+                                    disablePadding={true}
+                                    sx={{ mb: 1 }}
+                                >
+                                    <ListItemButton
+                                        sx={projectStyle}
+                                        selected={
+                                            project.name === activeProject
+                                        }
+                                        onClick={() =>
+                                            setActiveProject(project.name)
+                                        }
                                     >
-                                        <ListItemButton
-                                            sx={projectStyle}
-                                            selected={
-                                                project.name === activeProject
-                                            }
-                                            onClick={() =>
-                                                setActiveProject(project.name)
-                                            }
-                                        >
-                                            <ProjectBox>
-                                                <ProjectIcon color='primary' />
-                                                <StyledCardTitle>
-                                                    {project.name}
-                                                </StyledCardTitle>
-                                                <IconButton
-                                                    component={Link}
-                                                    href={`projects/${project.name}`}
-                                                    size='small'
-                                                    sx={{ ml: 'auto' }}
-                                                >
-                                                    <LinkIcon
-                                                        titleAccess={`projects/${project.name}`}
-                                                    />
-                                                </IconButton>
-                                            </ProjectBox>
-                                            {project.name === activeProject ? (
-                                                <ActiveProjectDetails
-                                                    project={project}
+                                        <ProjectBox>
+                                            <ProjectIcon color='primary' />
+                                            <StyledCardTitle>
+                                                {project.name}
+                                            </StyledCardTitle>
+                                            <IconButton
+                                                component={Link}
+                                                href={`projects/${project.name}`}
+                                                size='small'
+                                                sx={{ ml: 'auto' }}
+                                            >
+                                                <LinkIcon
+                                                    titleAccess={`projects/${project.name}`}
                                                 />
-                                            ) : null}
-                                        </ListItemButton>
-                                    </ListItem>
-                                );
-                            })}
-                        </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>
+                                            </IconButton>
+                                        </ProjectBox>
+                                        {project.name === activeProject ? (
+                                            <ActiveProjectDetails
+                                                project={project}
+                                            />
+                                        ) : null}
+                                    </ListItemButton>
+                                </ListItem>
+                            );
+                        })}
+                    </List>
+                </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>
     );
 };