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

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)

frontend/src/component/personalDashboard/ContentGridNoProjects.tsx

@@ -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 { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 import type { PersonalDashboardSchemaAdminsItem } from 'openapi/models/personalDashboardSchemaAdminsItem';
 import type { PersonalDashboardSchemaProjectOwnersItem } from 'openapi/models/personalDashboardSchemaProjectOwnersItem';
 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),
-    border: `0.5px solid ${theme.palette.divider}`,
 }));
 
 const TitleContainer = styled('div')(({ theme }) => ({
@@ -68,30 +68,31 @@ type Props = {
 
 export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
     return (
-        <ContentGrid container columns={{ lg: 12, md: 1 }}>
+        <ContentGridContainer>
-            <SpacedGridItem item lg={4} md={1}>
+            <ProjectGrid>
+                <SpacedGridItem gridArea='title'>
                     <Typography variant='h3'>My projects</Typography>
                 </SpacedGridItem>
-            <SpacedGridItem item lg={8} md={1}>
+                <SpacedGridItem gridArea='onboarding'>
                     <Typography>Potential next steps</Typography>
                 </SpacedGridItem>
-            <SpacedGridItem item lg={4} md={1}>
+                <SpacedGridItem gridArea='projects'>
                     <GridContent>
                         <Typography>
-                        You don't currently have access to any projects in the
+                            You don't currently have access to any projects in
-                        system.
+                            the system.
                         </Typography>
                         <Typography>
                             To get started, you can{' '}
                             <Link to='/projects?create=true'>
                                 create your own project
                             </Link>
-                        . Alternatively, you can review the available projects
+                            . Alternatively, you can review the available
-                        in the system and ask the owner for access.
+                            projects in the system and ask the owner for access.
                         </Typography>
                     </GridContent>
                 </SpacedGridItem>
-            <SpacedGridItem item lg={4} md={1}>
+                <SpacedGridItem gridArea='box1'>
                     <GridContent>
                         <TitleContainer>
                             <NeutralCircleContainer>1</NeutralCircleContainer>
@@ -126,13 +127,14 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                                 </>
                             ) : (
                                 <p>
-                                You have no Unleash administrators to contact.
+                                    You have no Unleash administrators to
+                                    contact.
                                 </p>
                             )}
                         </BoxMainContent>
                     </GridContent>
                 </SpacedGridItem>
-            <SpacedGridItem item lg={4} md={1}>
+                <SpacedGridItem gridArea='box2'>
                     <GridContent>
                         <TitleContainer>
                             <NeutralCircleContainer>2</NeutralCircleContainer>
@@ -149,15 +151,16 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                                 </>
                             ) : (
                                 <p>
-                                There are no project owners in Unleash to ask
+                                    There are no project owners in Unleash to
-                                for access.
+                                    ask for access.
                                 </p>
                             )}
                         </BoxMainContent>
                     </GridContent>
                 </SpacedGridItem>
-            <SpacedGridItem item lg={4} md={1} />
+                <EmptyGridItem />
-            <SpacedGridItem item lg={8} md={1} />
+                <PaddedEmptyGridItem gridArea='owners' />
-        </ContentGrid>
+            </ProjectGrid>
+        </ContentGridContainer>
     );
 };

frontend/src/component/personalDashboard/Grid.tsx

@@ -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';
 
 export const ContentGridContainer = styled('div')({
     containerType: 'inline-size',
 });
 
-const ContentGrid2 = styled('article')(({ theme }) => {
+const ContentGrid = styled('article')(({ theme }) => {
     return {
         backgroundColor: theme.palette.divider,
         borderRadius: `${theme.shape.borderRadiusLarge}px`,
@@ -21,19 +21,23 @@ const ContentGrid2 = styled('article')(({ theme }) => {
     };
 });
 
-export const ProjectGrid = styled(ContentGrid2)(({ theme }) => ({
+const onWideContainer =
-    '@container (min-width: 1000px)': {
+    (css: object) =>
-        gridTemplateColumns: '1fr 1fr 1fr',
+    ({ theme }: { theme: Theme }) => {
-        display: 'grid',
+        const containerBreakpoint = '1000px';
-        gridTemplateAreas: `
+        const screenBreakpoint = theme.breakpoints.up('lg');
-                "title onboarding onboarding"
+
-                "projects box1 box2"
+        return {
-                ". owners owners"
+            [`@container (min-width: ${containerBreakpoint})`]: css,
-            `,
-    },
 
             '@supports not (container-type: inline-size)': {
-        [theme.breakpoints.up('lg')]: {
+                [screenBreakpoint]: css,
+            },
+        };
+    };
+
+export const ProjectGrid = styled(ContentGrid)(
+    onWideContainer({
         gridTemplateColumns: '1fr 1fr 1fr',
         display: 'grid',
         gridTemplateAreas: `
@@ -41,36 +45,36 @@ export const ProjectGrid = styled(ContentGrid2)(({ theme }) => ({
                 "projects box1 box2"
                 ". owners owners"
             `,
-        },
+    }),
-    },
+);
-}));
 
-export const SpacedGridItem2 = styled('div')(({ theme }) => ({
+export const FlagGrid = styled(ContentGrid)(
+    onWideContainer({
+        gridTemplateColumns: '1fr 1fr 1fr',
+        display: 'grid',
+        gridTemplateAreas: `
+                "title lifecycle lifecycle"
+                "flags chart chart"
+            `,
+    }),
+);
+
+export const SpacedGridItem = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'gridArea',
+})<{ gridArea: string }>(({ theme, gridArea }) => ({
     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',
+    gridArea,
 
-    '@container (min-width: 1000px)': {
+    ...onWideContainer({
         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 }) => ({

frontend/src/component/personalDashboard/MyProjects.tsx

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

frontend/src/component/personalDashboard/PersonalDashboard.tsx

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