Skip to content

Commit

Permalink
feat: personal dashboard connect sdk (#8190)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kwasniew
kwasniew authored Sep 19, 2024
1 parent f66854a commit 10ec2e7
Show file tree
Hide file tree
Showing 2 changed files with 183 additions and 81 deletions.
70 changes: 70 additions & 0 deletions frontend/src/component/personalDashboard/ConnectSDK.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
194 changes: 113 additions & 81 deletions frontend/src/component/personalDashboard/PersonalDashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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),
Expand All @@ -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 }) => ({
Expand Down Expand Up @@ -104,23 +104,39 @@ 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,
members: 1,
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>
Expand All @@ -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>
);
};

0 comments on commit 10ec2e7

Please sign in to comment.