From fe8de0e51d37dc5e72449780b8a7fad638b1a318 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 6 Nov 2024 10:58:39 +0100
Subject: [PATCH 1/3] fix: move label check to inside the component

---
 frontend/src/component/project/Project/Project.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 5b668ff22d43..d5d9b910cfd0 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -94,11 +94,14 @@ const TabText = styled('span')(({ theme }) => ({
 }));
 
 const ChangeRequestsLabel = () => {
+    const simplifyProjectOverview = useUiFlag('simplifyProjectOverview');
     const projectId = useRequiredPathParam('projectId');
     const { total } = useActionableChangeRequests(projectId);
 
+    const count = simplifyProjectOverview ? 0 : (total ?? 0);
+
     return (
-        <StyledCounterBadge badgeContent={total ?? 0} color='primary'>
+        <StyledCounterBadge badgeContent={count} color='primary'>
             <TabText>Change requests</TabText>
         </StyledCounterBadge>
     );
@@ -167,7 +170,7 @@ export const Project = () => {
             path: `${basePath}/change-requests`,
             name: 'change-request',
             isEnterprise: true,
-            label: simplifyProjectOverview ? ChangeRequestsLabel : undefined,
+            label: ChangeRequestsLabel,
         },
         {
             title: 'Applications',

From ad7aa879fa6b7ac1be54c97c8f14c8be8d7d3033 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 6 Nov 2024 11:11:38 +0100
Subject: [PATCH 2/3] fix: render just text if flag isn't active

---
 frontend/src/component/project/Project/Project.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index d5d9b910cfd0..ed767674ab0c 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -98,10 +98,12 @@ const ChangeRequestsLabel = () => {
     const projectId = useRequiredPathParam('projectId');
     const { total } = useActionableChangeRequests(projectId);
 
-    const count = simplifyProjectOverview ? 0 : (total ?? 0);
+    if (!simplifyProjectOverview) {
+        return 'Change requests';
+    }
 
     return (
-        <StyledCounterBadge badgeContent={count} color='primary'>
+        <StyledCounterBadge badgeContent={total ?? 0} color='primary'>
             <TabText>Change requests</TabText>
         </StyledCounterBadge>
     );

From fa8f2a9b4dfe11dd03d6dd43fdf86036a03bf7f4 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 6 Nov 2024 12:24:09 +0100
Subject: [PATCH 3/3] fix: change invocation from function to component

---
 frontend/src/component/project/Project/Project.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index ed767674ab0c..1c68e975add8 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -75,7 +75,7 @@ interface ITab {
     flag?: keyof UiFlags;
     new?: boolean;
     isEnterprise?: boolean;
-    label?: () => ReactNode;
+    labelOverride?: () => ReactNode;
 }
 
 const StyledCounterBadge = styled(CounterBadge)(({ theme }) => ({
@@ -172,7 +172,7 @@ export const Project = () => {
             path: `${basePath}/change-requests`,
             name: 'change-request',
             isEnterprise: true,
-            label: ChangeRequestsLabel,
+            labelOverride: ChangeRequestsLabel,
         },
         {
             title: 'Applications',
@@ -324,7 +324,13 @@ export const Project = () => {
                                 <StyledTab
                                     data-loading-project
                                     key={tab.title}
-                                    label={tab.label ? tab.label() : tab.title}
+                                    label={
+                                        tab.labelOverride ? (
+                                            <tab.labelOverride />
+                                        ) : (
+                                            tab.title
+                                        )
+                                    }
                                     value={tab.path}
                                     onClick={() => {
                                         if (tab.title !== 'Flags') {