From 634840cc4167228ecca39ec5f377e8ff8b6f4113 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 14 Nov 2024 11:27:25 +0100
Subject: [PATCH] 3111-1: Wires up stale data from the API

Builds on the backend code added in https://github.com/Unleash/unleash/pull/8751
---
 .../project/Project/ProjectStatus/StaleFlags.tsx      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx b/frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx
index ab91009567ac..e6dd8d099dbf 100644
--- a/frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/StaleFlags.tsx
@@ -1,6 +1,8 @@
 import { Typography } from '@mui/material';
 import { styled } from '@mui/material';
 import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber';
+import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
+import useLoading from 'hooks/useLoading';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
@@ -23,7 +25,7 @@ const BigText = styled('span')(({ theme }) => ({
 
 const BigNumber: FC<{ value?: number }> = ({ value }) => {
     return (
-        <BigText>
+        <BigText data-loading-stale-flags>
             <PrettifyLargeNumber
                 value={value ?? 0}
                 threshold={1000}
@@ -35,10 +37,13 @@ const BigNumber: FC<{ value?: number }> = ({ value }) => {
 
 export const StaleFlags = () => {
     const projectId = useRequiredPathParam('projectId');
+    const { data, loading } = useProjectStatus(projectId);
+    const loadingRef = useLoading(loading, '[data-loading-stale-flags=true]');
+
     return (
-        <Wrapper>
+        <Wrapper ref={loadingRef}>
             <Typography component='h4'>
-                <BigNumber value={6} />{' '}
+                <BigNumber value={data?.staleFlags.total ?? 0} />{' '}
                 <Link to={`/projects/${projectId}?state=IS%3Astale`}>
                     stale flags
                 </Link>