From 52363f176a4588d22c4ed45fe048f7aaa75385d6 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 19 Mar 2024 09:01:27 +0100
Subject: [PATCH] feat: project health card (#6595)

---
 .../ProjectHealth/ProjectHealth.tsx           | 101 ++++++++++++++++++
 .../ProjectHealthChart.test.tsx               |   3 +-
 .../ProjectHealthChart.tsx                    |   0
 .../ProjectInsights/ProjectInsights.tsx       |  13 ++-
 4 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealth.tsx
 rename frontend/src/component/project/Project/ProjectInsights/{ => ProjectHealth}/ProjectHealthChart.test.tsx (97%)
 rename frontend/src/component/project/Project/ProjectInsights/{ => ProjectHealth}/ProjectHealthChart.tsx (100%)

diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealth.tsx
new file mode 100644
index 0000000000..967bdcbd64
--- /dev/null
+++ b/frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealth.tsx
@@ -0,0 +1,101 @@
+import { ProjectHealthChart } from './ProjectHealthChart';
+import { Alert, Box, styled, Typography, useTheme } from '@mui/material';
+import { Link } from 'react-router-dom';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+
+const Dot = styled('span', {
+    shouldForwardProp: (prop) => prop !== 'color',
+})<{ color?: string }>(({ theme, color }) => ({
+    height: '15px',
+    width: '15px',
+    borderRadius: '50%',
+    display: 'inline-block',
+    backgroundColor: color,
+}));
+
+const FlagsCount = styled('p')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    marginLeft: theme.spacing(3),
+}));
+
+const FlagCounts = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+}));
+
+const Container = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+}));
+
+const StatusWithDot = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+
+export const ProjectHealth = () => {
+    const theme = useTheme();
+    const projectId = useRequiredPathParam('projectId');
+    const active = 15;
+    const stale = 10;
+    const potentiallyStale = 3;
+    const health = 93;
+
+    return (
+        <Container>
+            <Typography variant='h3'>Project Health</Typography>
+            <Alert severity='warning'>
+                <b>Health alert!</b> Review your flags and delete the stale
+                flags
+            </Alert>
+            <Box
+                sx={(theme) => ({
+                    display: 'flex',
+                    gap: theme.spacing(4),
+                    marginTop: theme.spacing(3),
+                })}
+            >
+                <ProjectHealthChart
+                    active={active}
+                    stale={stale}
+                    potentiallyStale={potentiallyStale}
+                    health={health}
+                />
+                <FlagCounts>
+                    <Box>
+                        <StatusWithDot>
+                            <Dot color={theme.palette.success.border} />
+                            <Box sx={{ fontWeight: 'bold' }}>Active</Box>
+                        </StatusWithDot>
+                        <FlagsCount>{active} feature flags</FlagsCount>
+                    </Box>
+                    <Box>
+                        <StatusWithDot>
+                            <Dot color={theme.palette.warning.border} />
+                            <Box sx={{ fontWeight: 'bold' }}>
+                                Potentially stale
+                            </Box>
+                            <Link to='/feature-toggle-type'>(configure)</Link>
+                        </StatusWithDot>
+                        <FlagsCount>
+                            {potentiallyStale} feature flags
+                        </FlagsCount>
+                    </Box>
+                    <Box>
+                        <StatusWithDot>
+                            <Dot color={theme.palette.error.border} />
+                            <Box sx={{ fontWeight: 'bold' }}>Stale</Box>
+                            <Link to={`/projects/${projectId}`}>
+                                (view flags)
+                            </Link>
+                        </StatusWithDot>
+                        <FlagsCount>{stale} feature flags</FlagsCount>
+                    </Box>
+                </FlagCounts>
+            </Box>
+        </Container>
+    );
+};
diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectHealthChart.test.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealthChart.test.tsx
similarity index 97%
rename from frontend/src/component/project/Project/ProjectInsights/ProjectHealthChart.test.tsx
rename to frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealthChart.test.tsx
index 8bb05b261e..d5b563cdd1 100644
--- a/frontend/src/component/project/Project/ProjectInsights/ProjectHealthChart.test.tsx
+++ b/frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealthChart.test.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import '@testing-library/jest-dom';
 import { ProjectHealthChart } from './ProjectHealthChart';
-import { render } from 'utils/testRenderer';
+import { render } from '../../../../../utils/testRenderer';
 import { screen } from '@testing-library/react';
 
 describe('ProjectHealthChart', () => {
diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectHealthChart.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealthChart.tsx
similarity index 100%
rename from frontend/src/component/project/Project/ProjectInsights/ProjectHealthChart.tsx
rename to frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealthChart.tsx
diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx
index cf40a9b82e..cd53a2fb21 100644
--- a/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx
+++ b/frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx
@@ -1,5 +1,12 @@
 import { Box, styled } from '@mui/material';
 import { LeadTimeForChanges } from './LeadTimeForChanges/LeadTimeForChanges';
+import { ProjectHealth } from './ProjectHealth/ProjectHealth';
+
+const Container = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(3),
+    borderRadius: theme.shape.borderRadiusLarge,
+}));
 
 const Grid = styled(Box)(({ theme }) => ({
     display: 'grid',
@@ -11,7 +18,7 @@ const Overview = styled(Box)(({ theme }) => ({
     gridColumn: '1 / -1',
 }));
 
-const Health = styled(Box)(({ theme }) => ({
+const Health = styled(Container)(({ theme }) => ({
     gridColumn: 'span 5',
 }));
 
@@ -34,7 +41,9 @@ export const ProjectInsights = () => {
                 Total changes / avg time to production / feature flags /stale
                 flags
             </Overview>
-            <Health>Project Health</Health>
+            <Health>
+                <ProjectHealth />
+            </Health>
             <LeadTimeForChanges />
             <ToggleTypesUsed>Toggle types used</ToggleTypesUsed>
             <ProjectMembers>Project members</ProjectMembers>