From c0937ce392c9beb88a2a4c612a90df1e83e23e3a Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 14 Nov 2024 14:31:54 +0100
Subject: [PATCH] 1-3088: move grid allocation up to container

---
 .../Project/ProjectStatus/ProjectHealth.tsx   |  6 ++----
 .../ProjectHealthGrid.styles.tsx              | 12 +++++------
 .../ProjectStatus/ProjectHealthGrid.tsx       | 21 ++++++++++++++++---
 .../ProjectStatus/ProjectResources.tsx        |  6 ++----
 .../Project/ProjectStatus/StaleFlags.tsx      |  2 +-
 5 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
index 652670e25307..b7ba14579cfc 100644
--- 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
index 21612d9d1df2..2102a9ebb522 100644
--- 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
index d40f5ff1a7e3..bc6517a306d7 100644
--- 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
index 5ddb98e561e7..d8b7bfdd176b 100644
--- 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
index 4d6c6b24344b..a0e7c0ec3070 100644
--- 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),