Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-31 01:16:01 +02:00
Code Issues Projects Releases Wiki Activity

refactor: use css grid for flags and no content grid (#8347)

Browse Source 
This PR uses the new CSS grid layout for the flag grid and the no
content grid.

In doing so, it also improves how you use the grid item (giving them a
`gridArea` prop) and extracts the breakpoint handling so that all
sections that use breakpoints use the same breakpoints.

As with the previous PR, here's screenies of the same screen width, but
with open and closed sidebar:
Open:

![image](https://github.com/user-attachments/assets/2d41d412-5072-4c66-9a48-e7aa0d8cff45)

Closed:

![image](https://github.com/user-attachments/assets/994e3f2c-6f4c-4db1-9f10-e1d1a4d96540)
This commit is contained in:
Thomas Heartman 2024-10-03 09:54:27 +02:00 committed by GitHub
parent 401425e35c
commit f5c78605ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 206 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
View File

@ -1,18 +1,18 @@
import { Grid, Typography, styled } from '@mui/material'; import { Typography, styled } from '@mui/material';
import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners'; import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
import type { PersonalDashboardSchemaAdminsItem } from 'openapi/models/personalDashboardSchemaAdminsItem'; import type { PersonalDashboardSchemaAdminsItem } from 'openapi/models/personalDashboardSchemaAdminsItem';
import type { PersonalDashboardSchemaProjectOwnersItem } from 'openapi/models/personalDashboardSchemaProjectOwnersItem'; import type { PersonalDashboardSchemaProjectOwnersItem } from 'openapi/models/personalDashboardSchemaProjectOwnersItem';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {
ContentGridContainer,
EmptyGridItem,
ProjectGrid,
SpacedGridItem,
} from './Grid';
const ContentGrid = styled(Grid)(({ theme }) => ({ const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
borderRadius: `${theme.shape.borderRadiusLarge}px`,
}));
const SpacedGridItem = styled(Grid)(({ theme }) => ({
padding: theme.spacing(4), padding: theme.spacing(4),
border: `0.5px solid ${theme.palette.divider}`,
})); }));
const TitleContainer = styled('div')(({ theme }) => ({ const TitleContainer = styled('div')(({ theme }) => ({
@ -68,96 +68,99 @@ type Props = {
export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => { export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
return ( return (
<ContentGrid container columns={{ lg: 12, md: 1 }}> <ContentGridContainer>
<SpacedGridItem item lg={4} md={1}> <ProjectGrid>
<Typography variant='h3'>My projects</Typography> <SpacedGridItem gridArea='title'>
</SpacedGridItem> <Typography variant='h3'>My projects</Typography>
<SpacedGridItem item lg={8} md={1}> </SpacedGridItem>
<Typography>Potential next steps</Typography> <SpacedGridItem gridArea='onboarding'>
</SpacedGridItem> <Typography>Potential next steps</Typography>
<SpacedGridItem item lg={4} md={1}> </SpacedGridItem>
<GridContent> <SpacedGridItem gridArea='projects'>
<Typography> <GridContent>
You don't currently have access to any projects in the <Typography>
system. You don't currently have access to any projects in
</Typography> the system.
<Typography> </Typography>
To get started, you can{' '} <Typography>
<Link to='/projects?create=true'> To get started, you can{' '}
create your own project <Link to='/projects?create=true'>
</Link> create your own project
. Alternatively, you can review the available projects </Link>
in the system and ask the owner for access. . Alternatively, you can review the available
</Typography> projects in the system and ask the owner for access.
</GridContent> </Typography>
</SpacedGridItem> </GridContent>
<SpacedGridItem item lg={4} md={1}> </SpacedGridItem>
<GridContent> <SpacedGridItem gridArea='box1'>
<TitleContainer> <GridContent>
<NeutralCircleContainer>1</NeutralCircleContainer> <TitleContainer>
Contact Unleash admin <NeutralCircleContainer>1</NeutralCircleContainer>
</TitleContainer> Contact Unleash admin
<BoxMainContent> </TitleContainer>
{admins.length ? ( <BoxMainContent>
<> {admins.length ? (
<>
<p>
Your Unleash administrator
{admins.length > 1 ? 's are' : ' is'}:
</p>
<AdminList>
{admins.map((admin) => {
return (
<AdminListItem key={admin.id}>
<UserAvatar
sx={{
margin: 0,
}}
user={admin}
/>
<Typography>
{admin.name ||
admin.username ||
admin.email}
</Typography>
</AdminListItem>
);
})}
</AdminList>
</>
) : (
<p> <p>
Your Unleash administrator You have no Unleash administrators to
{admins.length > 1 ? 's are' : ' is'}: contact.
</p> </p>
<AdminList> )}
{admins.map((admin) => { </BoxMainContent>
return ( </GridContent>
<AdminListItem key={admin.id}> </SpacedGridItem>
<UserAvatar <SpacedGridItem gridArea='box2'>
sx={{ <GridContent>
margin: 0, <TitleContainer>
}} <NeutralCircleContainer>2</NeutralCircleContainer>
user={admin} Ask a project owner to add you to their project
/> </TitleContainer>
<Typography> <BoxMainContent>
{admin.name || {owners.length ? (
admin.username || <>
admin.email} <p>Project owners in Unleash:</p>
</Typography> <AvatarGroupFromOwners
</AdminListItem> users={owners}
); avatarLimit={9}
})} />
</AdminList> </>
</> ) : (
) : ( <p>
<p> There are no project owners in Unleash to
You have no Unleash administrators to contact. ask for access.
</p> </p>
)} )}
</BoxMainContent> </BoxMainContent>
</GridContent> </GridContent>
</SpacedGridItem> </SpacedGridItem>
<SpacedGridItem item lg={4} md={1}> <EmptyGridItem />
<GridContent> <PaddedEmptyGridItem gridArea='owners' />
<TitleContainer> </ProjectGrid>
<NeutralCircleContainer>2</NeutralCircleContainer> </ContentGridContainer>
Ask a project owner to add you to their project
</TitleContainer>
<BoxMainContent>
{owners.length ? (
<>
<p>Project owners in Unleash:</p>
<AvatarGroupFromOwners
users={owners}
avatarLimit={9}
/>
</>
) : (
<p>
There are no project owners in Unleash to ask
for access.
</p>
)}
</BoxMainContent>
</GridContent>
</SpacedGridItem>
<SpacedGridItem item lg={4} md={1} />
<SpacedGridItem item lg={8} md={1} />
</ContentGrid>
); );
}; };

76
frontend/src/component/personalDashboard/Grid.tsx
View File

@ -1,11 +1,11 @@
import { Box, Grid, styled } from '@mui/material'; import { Box, styled } from '@mui/material';
import type { Theme } from '@mui/material/styles/createTheme'; import type { Theme } from '@mui/material/styles/createTheme';
export const ContentGridContainer = styled('div')({ export const ContentGridContainer = styled('div')({
containerType: 'inline-size', containerType: 'inline-size',
}); });
const ContentGrid2 = styled('article')(({ theme }) => { const ContentGrid = styled('article')(({ theme }) => {
return { return {
backgroundColor: theme.palette.divider, backgroundColor: theme.palette.divider,
borderRadius: `${theme.shape.borderRadiusLarge}px`, borderRadius: `${theme.shape.borderRadiusLarge}px`,
@ -21,8 +21,23 @@ const ContentGrid2 = styled('article')(({ theme }) => {
}; };
}); });
export const ProjectGrid = styled(ContentGrid2)(({ theme }) => ({ const onWideContainer =
'@container (min-width: 1000px)': { (css: object) =>
({ theme }: { theme: Theme }) => {
const containerBreakpoint = '1000px';
const screenBreakpoint = theme.breakpoints.up('lg');
return {
[`@container (min-width: ${containerBreakpoint})`]: css,
'@supports not (container-type: inline-size)': {
[screenBreakpoint]: css,
},
};
};
export const ProjectGrid = styled(ContentGrid)(
onWideContainer({
gridTemplateColumns: '1fr 1fr 1fr', gridTemplateColumns: '1fr 1fr 1fr',
display: 'grid', display: 'grid',
gridTemplateAreas: ` gridTemplateAreas: `
@ -30,47 +45,36 @@ export const ProjectGrid = styled(ContentGrid2)(({ theme }) => ({
"projects box1 box2" "projects box1 box2"
". owners owners" ". owners owners"
`, `,
}, }),
);
'@supports not (container-type: inline-size)': { export const FlagGrid = styled(ContentGrid)(
[theme.breakpoints.up('lg')]: { onWideContainer({
gridTemplateColumns: '1fr 1fr 1fr', gridTemplateColumns: '1fr 1fr 1fr',
display: 'grid', display: 'grid',
gridTemplateAreas: ` gridTemplateAreas: `
"title onboarding onboarding" "title lifecycle lifecycle"
"projects box1 box2" "flags chart chart"
". owners owners"
`, `,
}, }),
}, );
}));
export const SpacedGridItem2 = styled('div')(({ theme }) => ({ export const SpacedGridItem = styled('div', {
shouldForwardProp: (prop) => prop !== 'gridArea',
})<{ gridArea: string }>(({ theme, gridArea }) => ({
padding: theme.spacing(4), padding: theme.spacing(4),
gridArea,
})); }));
export const EmptyGridItem = styled('div')(({ theme }) => ({ export const EmptyGridItem = styled('div', {
shouldForwardProp: (prop) => prop !== 'gridArea',
})<{ gridArea?: string }>(({ theme, gridArea }) => ({
display: 'none', display: 'none',
gridArea,
'@container (min-width: 1000px)': { ...onWideContainer({
display: 'block', display: 'block',
}, })({ theme }),
'@supports not (container-type: inline-size)': {
[theme.breakpoints.up('lg')]: {
display: 'block',
},
},
}));
export const ContentGrid = styled(Grid)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
borderRadius: `${theme.shape.borderRadiusLarge}px`,
}));
export const SpacedGridItem = styled(Grid)(({ theme }) => ({
padding: theme.spacing(4),
border: `0.5px solid ${theme.palette.divider}`,
})); }));
export const ListItemBox = styled(Box)(({ theme }) => ({ export const ListItemBox = styled(Box)(({ theme }) => ({

52
frontend/src/component/personalDashboard/MyProjects.tsx
View File

@ -26,7 +26,7 @@ import {
ListItemBox, ListItemBox,
listItemStyle, listItemStyle,
ProjectGrid, ProjectGrid,
SpacedGridItem2, SpacedGridItem,
} from './Grid'; } from './Grid';
const ActiveProjectDetails: FC<{ const ActiveProjectDetails: FC<{
@ -82,29 +82,15 @@ export const MyProjects: FC<{
return ( return (
<ContentGridContainer> <ContentGridContainer>
<ProjectGrid> <ProjectGrid>
<SpacedGridItem2 <SpacedGridItem gridArea='title'>
sx={{
gridArea: 'title',
}}
>
<Typography variant='h3'>My projects</Typography> <Typography variant='h3'>My projects</Typography>
</SpacedGridItem2> </SpacedGridItem>
<SpacedGridItem2 <SpacedGridItem gridArea='onboarding'>
sx={{
gridArea: 'onboarding',
display: 'flex',
justifyContent: 'flex-end',
}}
>
{setupIncomplete ? ( {setupIncomplete ? (
<Badge color='warning'>Setup incomplete</Badge> <Badge color='warning'>Setup incomplete</Badge>
) : null} ) : null}
</SpacedGridItem2> </SpacedGridItem>
<SpacedGridItem2 <SpacedGridItem gridArea='projects'>
sx={{
gridArea: 'projects',
}}
>
<List <List
disablePadding={true} disablePadding={true}
sx={{ maxHeight: '400px', overflow: 'auto' }} sx={{ maxHeight: '400px', overflow: 'auto' }}
@ -149,12 +135,8 @@ export const MyProjects: FC<{
); );
})} })}
</List> </List>
</SpacedGridItem2> </SpacedGridItem>
<SpacedGridItem2 <SpacedGridItem gridArea='box1'>
sx={{
gridArea: 'box1',
}}
>
{activeProjectStage === 'onboarded' && {activeProjectStage === 'onboarded' &&
personalDashboardProjectDetails ? ( personalDashboardProjectDetails ? (
<ProjectSetupComplete <ProjectSetupComplete
@ -169,12 +151,8 @@ export const MyProjects: FC<{
{activeProjectStage === 'first-flag-created' ? ( {activeProjectStage === 'first-flag-created' ? (
<ExistingFlag project={activeProject} /> <ExistingFlag project={activeProject} />
) : null} ) : null}
</SpacedGridItem2> </SpacedGridItem>
<SpacedGridItem2 <SpacedGridItem gridArea='box2'>
sx={{
gridArea: 'box2',
}}
>
{activeProjectStage === 'onboarded' && {activeProjectStage === 'onboarded' &&
personalDashboardProjectDetails ? ( personalDashboardProjectDetails ? (
<LatestProjectEvents <LatestProjectEvents
@ -186,13 +164,9 @@ export const MyProjects: FC<{
{setupIncomplete || activeProjectStage === 'loading' ? ( {setupIncomplete || activeProjectStage === 'loading' ? (
<ConnectSDK project={activeProject} /> <ConnectSDK project={activeProject} />
) : null} ) : null}
</SpacedGridItem2> </SpacedGridItem>
<EmptyGridItem /> <EmptyGridItem />
<SpacedGridItem2 <SpacedGridItem gridArea='owners'>
sx={{
gridArea: 'owners',
}}
>
{personalDashboardProjectDetails ? ( {personalDashboardProjectDetails ? (
<RoleAndOwnerInfo <RoleAndOwnerInfo
roles={personalDashboardProjectDetails.roles.map( roles={personalDashboardProjectDetails.roles.map(
@ -201,7 +175,7 @@ export const MyProjects: FC<{
owners={personalDashboardProjectDetails.owners} owners={personalDashboardProjectDetails.owners}
/> />
) : null} ) : null}
</SpacedGridItem2> </SpacedGridItem>
</ProjectGrid> </ProjectGrid>
</ContentGridContainer> </ContentGridContainer>
); );

102
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -24,7 +24,8 @@ import HelpOutline from '@mui/icons-material/HelpOutline';
import useLoading from '../../hooks/useLoading'; import useLoading from '../../hooks/useLoading';
import { MyProjects } from './MyProjects'; import { MyProjects } from './MyProjects';
import { import {
ContentGrid, ContentGridContainer,
FlagGrid,
ListItemBox, ListItemBox,
listItemStyle, listItemStyle,
SpacedGridItem, SpacedGridItem,
@ -180,55 +181,58 @@ export const PersonalDashboard = () => {
/> />
)} )}
<ContentGrid container columns={{ lg: 12, md: 1 }} sx={{ mt: 2 }}> <ContentGridContainer>
<SpacedGridItem item lg={4} md={1}> <FlagGrid sx={{ mt: 2 }}>
<Typography variant='h3'>My feature flags</Typography> <SpacedGridItem gridArea='title'>
</SpacedGridItem> <Typography variant='h3'>My feature flags</Typography>
<SpacedGridItem </SpacedGridItem>
item <SpacedGridItem
lg={8} gridArea='lifecycle'
md={1} sx={{ display: 'flex', justifyContent: 'flex-end' }}
sx={{ display: 'flex', justifyContent: 'flex-end' }} >
> {activeFlag ? (
{activeFlag ? ( <FlagExposure
<FlagExposure project={activeFlag.project}
project={activeFlag.project} flagName={activeFlag.name}
flagName={activeFlag.name} onArchive={refetchDashboard}
onArchive={refetchDashboard} />
/> ) : null}
) : null} </SpacedGridItem>
</SpacedGridItem> <SpacedGridItem gridArea='flags'>
<SpacedGridItem item lg={4} md={1}> {personalDashboard &&
{personalDashboard && personalDashboard.flags.length > 0 ? ( personalDashboard.flags.length > 0 ? (
<List <List
disablePadding={true} disablePadding={true}
sx={{ maxHeight: '400px', overflow: 'auto' }} sx={{ maxHeight: '400px', overflow: 'auto' }}
> >
{personalDashboard.flags.map((flag) => ( {personalDashboard.flags.map((flag) => (
<FlagListItem <FlagListItem
key={flag.name} key={flag.name}
flag={flag} flag={flag}
selected={flag.name === activeFlag?.name} selected={
onClick={() => setActiveFlag(flag)} flag.name === activeFlag?.name
/> }
))} onClick={() => setActiveFlag(flag)}
</List> />
) : ( ))}
<Typography> </List>
You have not created or favorited any feature flags. ) : (
Once you do, they will show up here. <Typography>
</Typography> You have not created or favorited any feature
)} flags. Once you do, they will show up here.
</SpacedGridItem> </Typography>
)}
</SpacedGridItem>
<SpacedGridItem item lg={8} md={1}> <SpacedGridItem gridArea='chart'>
{activeFlag ? ( {activeFlag ? (
<FlagMetricsChart flag={activeFlag} /> <FlagMetricsChart flag={activeFlag} />
) : ( ) : (
<PlaceholderFlagMetricsChart /> <PlaceholderFlagMetricsChart />
)} )}
</SpacedGridItem> </SpacedGridItem>
</ContentGrid> </FlagGrid>
</ContentGridContainer>
<WelcomeDialog <WelcomeDialog
open={welcomeDialog === 'open'} open={welcomeDialog === 'open'}
onClose={() => setWelcomeDialog('closed')} onClose={() => setWelcomeDialog('closed')}