From 20c5a6f7ced3e970735635ef91d10c9ead35b004 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 12 Nov 2024 14:31:23 +0100
Subject: [PATCH] 1-3095: small UI tweaks sidebar boxes (#8721)

This PR fixes three minor UI issues:
1. The modal is too wide. Turns out that `SidebarModal` has a fixed
width of 1300. `DynamicSidebarModal` does not, so that switch makes it
much leaner.
2. The lifecycle boxes should grow in width to fill whatever space they
have available.
3. If you have 1 flag in any of the stages, we should say "1 flag"
instead of "1 flags".

Sidebar before:

![image](https://github.com/user-attachments/assets/d33d82ca-e04b-416d-b731-9a37f8df3b08)


Sidebar after:

![image](https://github.com/user-attachments/assets/060be979-484a-4481-8781-d171b4211b45)


The lifecycle boxes at their very widest:

![image](https://github.com/user-attachments/assets/817e437f-a0ee-4a85-9018-16ff84cb3819)
---
 .../ProjectStatus/ProjectLifecycleSummary.tsx | 24 ++++++++++++-------
 .../ProjectStatus/ProjectStatusModal.tsx      |  6 ++---
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx
index 3a2b9142ac..ecf58ea9b1 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx
@@ -5,12 +5,12 @@ import useLoading from 'hooks/useLoading';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import type { FC } from 'react';
 import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber';
+import type { ProjectStatusSchemaLifecycleSummary } from 'openapi';
 const LifecycleBox = styled('li')(({ theme }) => ({
     padding: theme.spacing(2),
     borderRadius: theme.shape.borderRadiusExtraLarge,
     border: `2px solid ${theme.palette.divider}`,
-    width: '180px',
-    height: '175px',
+    gap: theme.spacing(4),
     display: 'flex',
     flexFlow: 'column',
     justifyContent: 'space-between',
@@ -19,9 +19,10 @@ const LifecycleBox = styled('li')(({ theme }) => ({
 const Wrapper = styled('ul')(({ theme }) => ({
     display: 'grid',
     listStyle: 'none',
-    gridTemplateColumns: 'repeat(auto-fit, 180px)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
     gap: theme.spacing(1),
     justifyContent: 'center',
+    padding: 0,
 }));
 
 const Counter = styled('span')({
@@ -90,6 +91,13 @@ export const ProjectLifecycleSummary = () => {
         loading,
         '[data-loading-project-lifecycle-summary=true]',
     );
+    const flagWord = (stage: keyof ProjectStatusSchemaLifecycleSummary) => {
+        if (data?.lifecycleSummary[stage].currentFlags === 1) {
+            return 'flag';
+        } else {
+            return 'flags';
+        }
+    };
     return (
         <Wrapper ref={loadingRef}>
             <LifecycleBox>
@@ -104,7 +112,7 @@ export const ProjectLifecycleSummary = () => {
                             stage={{ name: 'initial' }}
                         />
                     </Counter>
-                    <span>flags in initial</span>
+                    <span>{flagWord('initial')} in initial</span>
                 </p>
                 <AverageDaysStat
                     averageDays={data?.lifecycleSummary.initial.averageDays}
@@ -122,7 +130,7 @@ export const ProjectLifecycleSummary = () => {
                             stage={{ name: 'pre-live' }}
                         />
                     </Counter>
-                    <span>flags in pre-live</span>
+                    <span>{flagWord('preLive')} in pre-live</span>
                 </p>
                 <AverageDaysStat
                     averageDays={data?.lifecycleSummary.preLive.averageDays}
@@ -140,7 +148,7 @@ export const ProjectLifecycleSummary = () => {
                             stage={{ name: 'live' }}
                         />
                     </Counter>
-                    <span>flags in live</span>
+                    <span>{flagWord('live')} in live</span>
                 </p>
                 <AverageDaysStat
                     averageDays={data?.lifecycleSummary.live.averageDays}
@@ -160,7 +168,7 @@ export const ProjectLifecycleSummary = () => {
                             stage={{ name: 'completed' }}
                         />
                     </Counter>
-                    <span>flags in cleanup</span>
+                    <span>{flagWord('completed')} in cleanup</span>
                 </p>
                 <AverageDaysStat
                     averageDays={data?.lifecycleSummary.completed.averageDays}
@@ -178,7 +186,7 @@ export const ProjectLifecycleSummary = () => {
                             stage={{ name: 'archived' }}
                         />
                     </Counter>
-                    <span>flags in archived</span>
+                    <span>{flagWord('archived')} in archived</span>
                 </p>
                 <Stats>
                     <dt>This month</dt>
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
index 8357c70350..98ca5917ef 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
+import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import { ProjectResources } from './ProjectResources';
 import { ProjectActivity } from './ProjectActivity';
 import { ProjectHealth } from './ProjectHealth';
@@ -34,7 +34,7 @@ const HealthRow = styled('div')(({ theme }) => ({
 
 export const ProjectStatusModal = ({ open, close }: Props) => {
     return (
-        <SidebarModal open={open} onClose={close} label='Project status'>
+        <DynamicSidebarModal open={open} onClose={close} label='Project status'>
             <ModalContentContainer>
                 <HealthRow>
                     <ProjectHealth />
@@ -45,6 +45,6 @@ export const ProjectStatusModal = ({ open, close }: Props) => {
 
                 <ProjectLifecycleSummary />
             </ModalContentContainer>
-        </SidebarModal>
+        </DynamicSidebarModal>
     );
 };