1-3088: move grid allocation up to container

Unleash · Nov 14, 2024 · c0937ce · c0937ce
1 parent 026d30b
commit c0937ce
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 19 deletions.
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
@@ -5,8 +5,6 @@ import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectS
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { HealthGridTile } from './ProjectHealthGrid.styles';
 
-const HealthContainer = HealthGridTile('health');
-
 const TextContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
@@ -58,7 +56,7 @@ export const ProjectHealth = () => {
               : theme.palette.success.border;
 
     return (
-        <HealthContainer>
+        <HealthGridTile>
             <ChartRow>
                 <SVGWrapper>
                     <StyledSVG viewBox='0 0 100 100'>
@@ -106,6 +104,6 @@ export const ProjectHealth = () => {
                     )}
                 </TextContainer>
             </ChartRow>
-        </HealthContainer>
+        </HealthGridTile>
     );
 };
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.styles.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.styles.tsx
@@ -1,9 +1,7 @@
 import { styled } from '@mui/material';
 
-export const HealthGridTile = (gridArea: string) =>
-    styled('article')(({ theme }) => ({
-        gridArea,
-        backgroundColor: theme.palette.envAccordion.expanded,
-        padding: theme.spacing(3),
-        borderRadius: theme.shape.borderRadiusExtraLarge,
-    }));
+export const HealthGridTile = styled('article')(({ theme }) => ({
+    backgroundColor: theme.palette.envAccordion.expanded,
+    padding: theme.spacing(3),
+    borderRadius: theme.shape.borderRadiusExtraLarge,
+}));
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.tsx
@@ -29,13 +29,28 @@ const HealthGrid = styled('div')(({ theme }) => ({
     }),
 }));
 
+const Tile = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'gridArea',
+})<{ gridArea: string }>(({ theme, gridArea }) => ({
+    gridArea,
+    '&>*': {
+        height: '100%',
+    },
+}));
+
 export const ProjectHealthGrid = () => {
     return (
         <HealthContainer>
             <HealthGrid>
-                <ProjectHealth />
-                <StaleFlags />
-                <ProjectResources />
+                <Tile gridArea='health'>
+                    <ProjectHealth />
+                </Tile>
+                <Tile gridArea='stale'>
+                    <StaleFlags />
+                </Tile>
+                <Tile gridArea='resources'>
+                    <ProjectResources />
+                </Tile>
             </HealthGrid>
         </HealthContainer>
     );

diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
@@ -10,8 +10,6 @@ import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectS
 import useLoading from 'hooks/useLoading';
 import { HealthGridTile } from './ProjectHealthGrid.styles';
 
-const Wrapper = HealthGridTile('resources');
-
 const ProjectResourcesInner = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
@@ -110,7 +108,7 @@ export const ProjectResources = () => {
     const loadingRef = useLoading(loading, '[data-loading-resources=true]');
 
     return (
-        <Wrapper ref={loadingRef}>
+        <HealthGridTile ref={loadingRef}>
             <ProjectResourcesInner>
                 <Typography variant='h4' sx={{ margin: 0 }}>
                     Project resources
@@ -150,6 +148,6 @@ export const ProjectResources = () => {
                     </ListItem>
                 </ResourceList>
             </ProjectResourcesInner>
-        </Wrapper>
+        </HealthGridTile>
     );
 };
diff --git a/frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx b/frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx
@@ -6,7 +6,7 @@ import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { HealthGridTile } from './ProjectHealthGrid.styles';
 
-const Wrapper = styled(HealthGridTile('stale'))(({ theme }) => ({
+const Wrapper = styled(HealthGridTile)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(1),