From 42198cee831221f54496d5ed6444b0608450846f Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 12 Nov 2024 12:16:33 +0100
Subject: [PATCH] chore: handle edge cases (#8719)

Handle a couple edge cases related to project lifecycle metrics:
1. If the average time spent was less than a day, we'd show "0 days".
Now we show "less than a day" instead.
2. If the number of flags grows very large, it'd start pushing out the
lifecycle icon. Instead, we now format in nicely.

Before:

![image](https://github.com/user-attachments/assets/a43cf021-7eb0-4edf-ab21-b379c1600299)

![image](https://github.com/user-attachments/assets/6243167a-cb43-4de5-a64c-a5231477d1b6)



After:

![image](https://github.com/user-attachments/assets/3efa630d-708d-4238-a4aa-09cdbbe459c1)

![image](https://github.com/user-attachments/assets/aa773ab8-7719-47f3-a684-18bec829da35)
---
 .../ProjectStatus/ProjectLifecycleSummary.tsx | 56 +++++++++++--------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx
index 5bd0c6000938..3a2b9142ac55 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx
@@ -4,8 +4,7 @@ import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectS
 import useLoading from 'hooks/useLoading';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import type { FC } from 'react';
-import { Link } from 'react-router-dom';
-
+import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber';
 const LifecycleBox = styled('li')(({ theme }) => ({
     padding: theme.spacing(2),
     borderRadius: theme.shape.borderRadiusExtraLarge,
@@ -31,7 +30,7 @@ const Counter = styled('span')({
     justifyContent: 'space-between',
 });
 
-const BigNumber = styled('span')(({ theme }) => ({
+const BigText = styled('span')(({ theme }) => ({
     fontSize: `calc(2 * ${theme.typography.body1.fontSize})`,
 }));
 
@@ -48,10 +47,6 @@ const NoData = styled('span')({
     fontWeight: 'normal',
 });
 
-const LinkNoUnderline = styled(Link)({
-    textDecoration: 'none',
-});
-
 const AverageDaysStat: FC<{ averageDays?: number | null }> = ({
     averageDays,
 }) => {
@@ -60,6 +55,9 @@ const AverageDaysStat: FC<{ averageDays?: number | null }> = ({
             return <NoData>No data</NoData>;
         }
 
+        if (averageDays < 1) {
+            return 'less than a day';
+        }
         return `${averageDays} days`;
     };
     return (
@@ -72,6 +70,18 @@ const AverageDaysStat: FC<{ averageDays?: number | null }> = ({
     );
 };
 
+const BigNumber: FC<{ value?: number }> = ({ value }) => {
+    return (
+        <BigText data-loading-project-lifecycle-summary>
+            <PrettifyLargeNumber
+                value={value ?? 0}
+                threshold={1000}
+                precision={1}
+            />
+        </BigText>
+    );
+};
+
 export const ProjectLifecycleSummary = () => {
     const projectId = useRequiredPathParam('projectId');
     const { data, loading } = useProjectStatus(projectId);
@@ -85,9 +95,9 @@ export const ProjectLifecycleSummary = () => {
             <LifecycleBox>
                 <p>
                     <Counter>
-                        <BigNumber data-loading-project-lifecycle-summary>
-                            {data?.lifecycleSummary.initial.currentFlags ?? 0}
-                        </BigNumber>
+                        <BigNumber
+                            value={data?.lifecycleSummary.initial.currentFlags}
+                        />
 
                         <FeatureLifecycleStageIcon
                             aria-hidden='true'
@@ -103,9 +113,9 @@ export const ProjectLifecycleSummary = () => {
             <LifecycleBox>
                 <p>
                     <Counter>
-                        <BigNumber data-loading-project-lifecycle-summary>
-                            {data?.lifecycleSummary.preLive.currentFlags ?? 0}
-                        </BigNumber>
+                        <BigNumber
+                            value={data?.lifecycleSummary.preLive.currentFlags}
+                        />
 
                         <FeatureLifecycleStageIcon
                             aria-hidden='true'
@@ -121,9 +131,9 @@ export const ProjectLifecycleSummary = () => {
             <LifecycleBox>
                 <p>
                     <Counter>
-                        <BigNumber data-loading-project-lifecycle-summary>
-                            {data?.lifecycleSummary.live.currentFlags ?? 0}
-                        </BigNumber>
+                        <BigNumber
+                            value={data?.lifecycleSummary.live.currentFlags}
+                        />
 
                         <FeatureLifecycleStageIcon
                             aria-hidden='true'
@@ -139,9 +149,11 @@ export const ProjectLifecycleSummary = () => {
             <LifecycleBox>
                 <p>
                     <Counter>
-                        <BigNumber data-loading-project-lifecycle-summary>
-                            {data?.lifecycleSummary.completed.currentFlags ?? 0}
-                        </BigNumber>
+                        <BigNumber
+                            value={
+                                data?.lifecycleSummary.completed.currentFlags
+                            }
+                        />
 
                         <FeatureLifecycleStageIcon
                             aria-hidden='true'
@@ -157,9 +169,9 @@ export const ProjectLifecycleSummary = () => {
             <LifecycleBox>
                 <p>
                     <Counter>
-                        <BigNumber data-loading-project-lifecycle-summary>
-                            {data?.lifecycleSummary.archived.currentFlags ?? 0}
-                        </BigNumber>
+                        <BigNumber
+                            value={data?.lifecycleSummary.archived.currentFlags}
+                        />
 
                         <FeatureLifecycleStageIcon
                             aria-hidden='true'