From a482ccff637c18835dc09ac42fd544d81d9c25ed Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Fri, 27 Jan 2023 12:50:00 +0100
Subject: [PATCH] feat: new project health widget (#3003)

## About the changes
<img width="233" alt="image"
src="https://user-images.githubusercontent.com/2625371/214901419-44adc6c3-ba72-4a60-9af9-ca27e9702357.png">


## Discussion points
Am I loading "potentially stale" features right?

## Other
Testing Linear integration:

Close 1-605
Close ID-1-605
Close ID1-605
---
 .../Project/ProjectInfo/HealthWidget.tsx      | 55 ++++++++++++++++++-
 .../Project/ProjectInfo/ProjectInfo.styles.ts |  3 +-
 .../Project/ProjectInfo/ProjectInfo.tsx       |  7 ++-
 .../Project/ProjectInfo/ToggleTypesWidget.tsx | 15 +++--
 4 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx
index 4f7752030a..e73844de1e 100644
--- a/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx
@@ -1,5 +1,6 @@
 import {
     StyledArrowIcon,
+    StyledCount,
     StyledDivInfoContainer,
     StyledDivPercentageContainer,
     StyledLink,
@@ -8,12 +9,64 @@ import {
     StyledSpanLinkText,
 } from './ProjectInfo.styles';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { Box, styled, Typography } from '@mui/material';
 
 interface IHealthWidgetProps {
     projectId: string;
     health: number;
+    total?: number;
+    stale?: number;
 }
-export const HealthWidget = ({ projectId, health }: IHealthWidgetProps) => {
+
+const StyledWarning = styled('span')<{ active?: boolean }>(
+    ({ theme, active }) => ({
+        color: active ? theme.palette.warning.dark : 'inherit',
+    })
+);
+
+export const HealthWidget = ({
+    projectId,
+    health,
+    total,
+    stale,
+}: IHealthWidgetProps) => {
+    const { uiConfig } = useUiConfig();
+
+    if (uiConfig?.flags?.newProjectOverview) {
+        return (
+            <StyledDivInfoContainer>
+                <StyledParagraphSubtitle data-loading>
+                    Project health
+                </StyledParagraphSubtitle>
+                <StyledDivPercentageContainer>
+                    <PercentageCircle percentage={health} />
+                </StyledDivPercentageContainer>
+                <StyledParagraphEmphasizedText data-loading>
+                    {health}%
+                </StyledParagraphEmphasizedText>
+                <Typography data-loading>
+                    <StyledCount>{total}</StyledCount> toggles in total
+                </Typography>
+                <Typography data-loading sx={{ marginBottom: 2 }}>
+                    <StyledCount>
+                        <StyledWarning active={Boolean(stale)}>
+                            {stale}
+                        </StyledWarning>
+                    </StyledCount>{' '}
+                    <StyledWarning active={Boolean(stale)}>
+                        potentially stale
+                    </StyledWarning>
+                </Typography>
+                <StyledLink data-loading to={`/projects/${projectId}/health`}>
+                    <StyledSpanLinkText data-loading>
+                        View project health
+                    </StyledSpanLinkText>
+                </StyledLink>
+            </StyledDivInfoContainer>
+        );
+    }
+
     return (
         <StyledDivInfoContainer>
             <StyledDivPercentageContainer>
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
index 6d25433d85..54701fe6d4 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
+++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
@@ -71,10 +71,9 @@ export const StyledParagraphEmphasizedText = styled('p')(({ theme }) => ({
     },
 }));
 
-export const StyledCount = styled('p')(({ theme }) => ({
+export const StyledCount = styled('span')(({ theme }) => ({
     fontSize: theme.typography.h2.fontSize,
     fontWeight: 'bold',
-    textAlign: 'right',
     color: theme.palette.text.primary,
 }));
 
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
index 812c89cd88..1662d692cc 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
@@ -26,7 +26,12 @@ const ProjectInfo = ({
     return (
         <aside>
             <StyledDivContainer>
-                <HealthWidget projectId={id} health={health} />
+                <HealthWidget
+                    projectId={id}
+                    health={health}
+                    total={features.length}
+                    stale={features.filter(feature => feature.stale).length}
+                />
                 <ConditionallyRender
                     condition={id !== DEFAULT_PROJECT_ID}
                     show={
diff --git a/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx
index 155206ca41..8597780a18 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx
@@ -7,11 +7,16 @@ import {
     StyledParagraphSubtitle,
 } from './ProjectInfo.styles';
 import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
+import { styled } from '@mui/material';
 
 export interface IToggleTypesWidgetProps {
     features: IFeatureToggleListItem[];
 }
 
+const StyledTypeCount = styled(StyledCount)(({ theme }) => ({
+    marginLeft: 'auto',
+}));
+
 export const ToggleTypesWidget = ({ features }: IToggleTypesWidgetProps) => {
     const { release, experiment, operational, kill, permission } =
         useMemo(() => {
@@ -54,27 +59,27 @@ export const ToggleTypesWidget = ({ features }: IToggleTypesWidgetProps) => {
             <StyledParagraphGridRow data-loading>
                 <ReleaseToggleIcon fontSize="small" data-loading />
                 <div>Release</div>
-                <StyledCount>{release}</StyledCount>
+                <StyledTypeCount>{release}</StyledTypeCount>
             </StyledParagraphGridRow>
             <StyledParagraphGridRow data-loading>
                 <ExperimentToggleIcon fontSize="small" data-loading />
                 <div>Experiment</div>
-                <StyledCount>{experiment}</StyledCount>
+                <StyledTypeCount>{experiment}</StyledTypeCount>
             </StyledParagraphGridRow>
             <StyledParagraphGridRow data-loading>
                 <OperationalToggleIcon fontSize="small" data-loading />
                 <div>Operational</div>
-                <StyledCount>{operational}</StyledCount>
+                <StyledTypeCount>{operational}</StyledTypeCount>
             </StyledParagraphGridRow>
             <StyledParagraphGridRow data-loading>
                 <KillToggleIcon fontSize="small" data-loading />
                 <div>Kill switch</div>
-                <StyledCount>{kill}</StyledCount>
+                <StyledTypeCount>{kill}</StyledTypeCount>
             </StyledParagraphGridRow>
             <StyledParagraphGridRow data-loading style={{ margin: 0 }}>
                 <PermissionToggleIcon fontSize="small" data-loading />
                 <div>Permission</div>
-                <StyledCount>{permission}</StyledCount>
+                <StyledTypeCount>{permission}</StyledTypeCount>
             </StyledParagraphGridRow>
         </StyledDivInfoContainer>
     );