chore: remove graph, update health message (#8403)

Removes the graph and updates the box to show a health message based on
current health if you don't have any trends:

With trends:

![image](https://github.com/user-attachments/assets/5c7a2102-207c-431f-9918-93a910480d48)

Without:

![image](https://github.com/user-attachments/assets/311427ba-38e9-4d49-9c10-2c932982d4d4)

frontend/src/component/personalDashboard/PersonalDashboard.test.tsx

@@ -142,10 +142,6 @@ test('Render personal dashboard for a long running project', async () => {
     await screen.findByText('70%'); // avg health past window
     await screen.findByText('someone created a flag');
     await screen.findByText('Member');
-    await screen.findByText('81%'); // current health score
-    await screen.findByText('12 feature flags'); // active flags
-    await screen.findByText('13 feature flags'); // stale flags
-    await screen.findByText('14 feature flags'); // potentially stale flags
     await screen.findByText('myFlag');
     await screen.findByText('production');
     await screen.findByText('Last 48 hours');

frontend/src/component/personalDashboard/ProjectSetupComplete.tsx

@@ -3,8 +3,6 @@ import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 import Lightbulb from '@mui/icons-material/LightbulbOutlined';
 import type { PersonalDashboardProjectDetailsSchemaInsights } from '../../openapi';
-import { ProjectHealthChart } from 'component/project/Project/ProjectInsights/ProjectHealth/ProjectHealthChart';
-import { FlagCounts } from '../project/Project/ProjectInsights/ProjectHealth/FlagCounts';
 
 const TitleContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -57,11 +55,11 @@ const ConnectedSdkProject: FC<{ project: string }> = ({ project }) => {
     );
 };
 
-type HeathTrend = 'consistent' | 'improved' | 'declined' | 'unknown';
+type HealthTrend = 'consistent' | 'improved' | 'declined' | 'unknown';
 
 const determineProjectHealthTrend = (
     insights: PersonalDashboardProjectDetailsSchemaInsights,
-): HeathTrend => {
+): HealthTrend => {
     const { avgHealthCurrentWindow, avgHealthPastWindow } = insights;
 
     if (avgHealthCurrentWindow === null || avgHealthPastWindow === null) {
@@ -80,11 +78,11 @@ const determineProjectHealthTrend = (
 };
 
 const ProjectHealthMessage: FC<{
-    trend: HeathTrend;
+    trend: HealthTrend;
     insights: PersonalDashboardProjectDetailsSchemaInsights;
     project: string;
 }> = ({ trend, insights, project }) => {
-    const { avgHealthCurrentWindow, avgHealthPastWindow } = insights;
+    const { avgHealthCurrentWindow, avgHealthPastWindow, health } = insights;
     const improveMessage =
         'Remember to archive your stale feature flags to keep the project health growing.';
     const keepDoingMessage =
@@ -92,36 +90,60 @@ const ProjectHealthMessage: FC<{
 
     if (trend === 'improved') {
         return (
+            <>
                 <Typography>
                     On average, your project health went up from{' '}
                     <PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '}
                     <PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
-                during the last 4 weeks. <br /> {keepDoingMessage}
+                    during the last 4 weeks.
                 </Typography>
+                <Typography>{keepDoingMessage}</Typography>
+            </>
         );
     }
 
     if (trend === 'declined') {
         return (
+            <>
                 <Typography>
                     On average, your project health went down from{' '}
                     <PercentageScore>{avgHealthPastWindow}%</PercentageScore> to{' '}
                     <PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
-                during the last 4 weeks. <br /> {improveMessage}
+                    during the last 4 weeks.
                 </Typography>
+                <Typography>{improveMessage}</Typography>
+            </>
         );
     }
 
     if (trend === 'consistent') {
         return (
+            <>
                 <Typography>
                     On average, your project health has remained at{' '}
                     <PercentageScore>{avgHealthCurrentWindow}%</PercentageScore>{' '}
-                during the last 4 weeks. <br />
+                    during the last 4 weeks.
+                </Typography>
+                <Typography>
                     {avgHealthCurrentWindow && avgHealthCurrentWindow >= 70
                         ? keepDoingMessage
                         : improveMessage}
                 </Typography>
+            </>
+        );
+    }
+
+    if (trend === 'unknown') {
+        return (
+            <>
+                <Typography>
+                    Your current health score is{' '}
+                    <PercentageScore>{health}%</PercentageScore>.
+                </Typography>
+                <Typography>
+                    {health >= 70 ? keepDoingMessage : improveMessage}
+                </Typography>
+            </>
         );
     }
 
@@ -141,22 +163,6 @@ export const ProjectSetupComplete: FC<{
                 <ProjectInsight>Project health</ProjectInsight>
             </TitleContainer>
 
-            <Health>
-                <ProjectHealthChart
-                    health={insights.health}
-                    active={insights.activeFlags}
-                    potentiallyStale={insights.potentiallyStaleFlags}
-                    stale={insights.staleFlags}
-                />
-                <FlagCounts
-                    projectId={project}
-                    activeCount={insights.activeFlags}
-                    potentiallyStaleCount={insights.potentiallyStaleFlags}
-                    staleCount={insights.staleFlags}
-                    hideLinks={true}
-                />
-            </Health>
-
             <ProjectHealthMessage
                 trend={projectHealthTrend}
                 insights={insights}