From 14b6b38238fe5d9c8997600d33347bab539fa046 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 18 Feb 2025 13:34:46 +0100
Subject: [PATCH] feat(1-3379): add stale badge to the new header (#9320)

Without this, there's no way to tell if a flag is stale or not on the
flag page, so we're adding it back in. However, we'll only show the
badge if it's stale, not if it's an active flag.

Stale flag with badge:

![image](https://github.com/user-attachments/assets/eded97ab-0bba-41e5-8e1c-37cc90684c63)

When it wraps:

![image](https://github.com/user-attachments/assets/223eb672-20d2-4f3c-a5d9-34c3b739ce5e)

To make the badge line up properly when it wraps, I removed the
hard-coded margin in the badge. To counteract that, I've also removed
the hard-coded margin in the "copy name" button and switched to using
flex gaps to sort that.

It still looks right.

Before:

![image](https://github.com/user-attachments/assets/d945b067-c182-4448-967f-5505cf2e47ca)

After:

![image](https://github.com/user-attachments/assets/3b78b9fc-82b9-4d21-a53a-a3849819e916)
---
 .../FeatureStatusChip/FeatureStatusChip.tsx   |  2 +-
 .../feature/FeatureView/FeatureViewHeader.tsx | 21 +++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx
index befa7f5b20..d75321470d 100644
--- a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx
+++ b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx
@@ -19,7 +19,7 @@ export const FeatureStatusChip = ({
     const value = stale ? 'Stale' : 'Active';
 
     return (
-        <div data-loading style={{ marginLeft: '8px' }}>
+        <div data-loading>
             <Badge color={stale ? 'error' : 'success'} title={title}>
                 {value}
             </Badge>
diff --git a/frontend/src/component/feature/FeatureView/FeatureViewHeader.tsx b/frontend/src/component/feature/FeatureView/FeatureViewHeader.tsx
index 2c502496cb..a1e5c26130 100644
--- a/frontend/src/component/feature/FeatureView/FeatureViewHeader.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureViewHeader.tsx
@@ -51,11 +51,15 @@ const NewStyledHeader = styled('div')(({ theme }) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
 }));
 
-const LowerHeaderRow = styled('div')(({ theme }) => ({
+const UpperHeaderRow = styled('div')(({ theme }) => ({
     display: 'flex',
     flexFlow: 'row wrap',
-    justifyContent: 'space-between',
     columnGap: theme.spacing(4),
+    alignItems: 'center',
+}));
+
+const LowerHeaderRow = styled(UpperHeaderRow)(({ theme }) => ({
+    justifyContent: 'space-between',
 }));
 
 const HeaderActions = styled('div')(({ theme }) => ({
@@ -99,10 +103,11 @@ const StyledInnerContainer = styled('div')(({ theme }) => ({
     },
 }));
 
-const StyledFlagInfoContainer = styled('div')({
+const StyledFlagInfoContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-});
+    columnGap: theme.spacing(1),
+}));
 
 const StyledDependency = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -259,7 +264,12 @@ export const FeatureViewHeader: FC<Props> = ({ feature }) => {
         <>
             {flagOverviewRedesign ? (
                 <NewStyledHeader>
-                    <Typography variant='h1'>{feature.name}</Typography>
+                    <UpperHeaderRow>
+                        <Typography variant='h1'>{feature.name}</Typography>
+                        {feature.stale ? (
+                            <FeatureStatusChip stale={true} />
+                        ) : null}
+                    </UpperHeaderRow>
                     <LowerHeaderRow>
                         <Tabs
                             value={activeTab.path}
@@ -357,7 +367,6 @@ export const FeatureViewHeader: FC<Props> = ({ feature }) => {
                                     >
                                         <IconButton
                                             onClick={handleCopyToClipboard}
-                                            style={{ marginLeft: 8 }}
                                         >
                                             {isFeatureNameCopied ? (
                                                 <Check