From 9440b52464bb0520fdd4d870dbcc7a60bb406ad0 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Thu, 14 Nov 2024 09:55:21 +0100 Subject: [PATCH] feat: Add stale flags counter (#8741) This PR adds the stale flag component to the health grid. In doing so, it also reworks the layout of the health row (now a grid) and updates the health component. In addition to removing the text from the component, I have adjust the SVG a bit to make it not shrink on smaller screens and have adjusted it's spacing, so that it's not full of dead space at the bottom. This makes it easier to style because it doesn't add 15px of invisible content. This PR also touches up a few other visual issues I found, such as header level and sidebar width. Wide: ![image](https://github.com/user-attachments/assets/acb57b17-eb7f-4b69-9bfa-1113bb748467) Medium: ![image](https://github.com/user-attachments/assets/a57331b0-825f-4b20-9b05-3ecd81804f5d) Narrow: ![image](https://github.com/user-attachments/assets/65c6e8d1-1783-4354-b71b-2867eabcc9ec) --- .../Project/ProjectStatus/ProjectHealth.tsx | 112 ++++++++++-------- .../ProjectStatus/ProjectResources.tsx | 9 +- .../ProjectStatus/ProjectStatusModal.tsx | 49 +++++--- .../Project/ProjectStatus/StaleFlags.tsx | 52 ++++++++ 4 files changed, 155 insertions(+), 67 deletions(-) create mode 100644 frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx index c14537f3db..4b310132e4 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx @@ -1,5 +1,4 @@ -import { useTheme, Typography } from '@mui/material'; -import { styled } from '@mui/system'; +import { styled, useTheme, Typography } from '@mui/material'; import { Link } from 'react-router-dom'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus'; @@ -10,21 +9,34 @@ const HealthContainer = styled('div')(({ theme }) => ({ padding: theme.spacing(3), borderRadius: theme.shape.borderRadiusExtraLarge, minWidth: '300px', + gridArea: 'health', +})); + +const TextContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), })); const ChartRow = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', + gap: theme.spacing(2), +})); + +const SVGWrapper = styled('div')(({ theme }) => ({ + flex: 'none', + height: 85, + width: 100, + position: 'relative', })); const StyledSVG = styled('svg')({ - width: 200, - height: 100, + position: 'absolute', }); -const DescriptionText = styled(Typography)(({ theme }) => ({ - color: theme.palette.text.secondary, - marginBottom: theme.spacing(2), +const StyledLink = styled(Link)(({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, })); export const ProjectHealth = () => { @@ -53,48 +65,52 @@ export const ProjectHealth = () => { return ( - - - - - {averageHealth}% - - - - On average, your project health has remained at{' '} - {averageHealth}% the last 4 weeks - + + + + + + {averageHealth}% + + + + + + On average, your project health has remained at{' '} + {averageHealth}% the last 4 weeks + + {!isOss() && ( + + View health over time + + )} + - - Remember to archive your stale feature flags to keep the project - health growing - - {!isOss() && View health over time} ); }; diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx index 78df2231fe..9130458a07 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx @@ -14,6 +14,7 @@ const Wrapper = styled('article')(({ theme }) => ({ padding: theme.spacing(3), borderRadius: theme.shape.borderRadiusExtraLarge, minWidth: '300px', + gridArea: 'resources', })); const ProjectResourcesInner = styled('div')(({ theme }) => ({ @@ -33,9 +34,9 @@ const ItemContent = styled('span')(({ theme }) => ({ })); const onNarrowWidget = (css: object) => ({ - '@container (max-width: 400px)': css, + '@container (max-width: 385px)': css, '@supports not (container-type: inline-size)': { - '@media (max-width: 400px)': css, + '@media (max-width: 385px)': css, }, }); @@ -116,8 +117,8 @@ export const ProjectResources = () => { return ( - - Project Resources + + Project resources ({ +const ModalContentContainer = styled('section')(({ theme }) => ({ minHeight: '100vh', + maxWidth: 1100, + width: '95vw', backgroundColor: theme.palette.background.default, padding: theme.spacing(4), display: 'flex', @@ -19,27 +22,43 @@ type Props = { close: () => void; }; -const HealthRow = styled('div')(({ theme }) => ({ - display: 'flex', - flexFlow: 'row wrap', - padding: theme.spacing(2), - gap: theme.spacing(2), - '&>*': { - // todo: reconsider this value when the health widget is - // implemented. It may not be right, but it works for the - // placeholder - flex: '30%', +const onNarrowGrid = (css: object) => ({ + '@container (max-width: 650px)': css, + '@supports not (container-type: inline-size)': { + '@media (max-width: 712px)': css, }, +}); + +const HealthContainer = styled('div')({ + containerType: 'inline-size', +}); + +const HealthGrid = styled('div')(({ theme }) => ({ + display: 'grid', + gridTemplateAreas: ` + "health resources" + "stale resources" + `, + gridTemplateColumns: '1fr 1fr', + gap: theme.spacing(1, 2), + ...onNarrowGrid({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + }), })); export const ProjectStatusModal = ({ open, close }: Props) => { return ( - - - - + + + + + + + diff --git a/frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx b/frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx new file mode 100644 index 0000000000..ab91009567 --- /dev/null +++ b/frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx @@ -0,0 +1,52 @@ +import { Typography } from '@mui/material'; +import { styled } from '@mui/material'; +import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber'; +import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; +import type { FC } from 'react'; +import { Link } from 'react-router-dom'; + +const Wrapper = styled('article')(({ theme }) => ({ + backgroundColor: theme.palette.envAccordion.expanded, + padding: theme.spacing(3), + borderRadius: theme.shape.borderRadiusExtraLarge, + minWidth: '300px', + gridArea: 'stale', + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), +})); + +const BigText = styled('span')(({ theme }) => ({ + fontSize: `calc(2 * ${theme.typography.body1.fontSize})`, + lineHeight: 0, +})); + +const BigNumber: FC<{ value?: number }> = ({ value }) => { + return ( + + + + ); +}; + +export const StaleFlags = () => { + const projectId = useRequiredPathParam('projectId'); + return ( + + + {' '} + + stale flags + + + + Remember to archive your stale feature flags to keep the project + healthy + + + ); +};