From 85151472e6598fa1aebf4e4f1c57b62366ee6a0b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 3 Jul 2025 13:34:50 +0200
Subject: [PATCH] fix segment changed name not showing

---
 .../Changes/Change/ChangeSegmentName.tsx       | 18 ++++++++++++++++++
 .../Changes/Change/SegmentChangeDetails.tsx    | 11 ++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeSegmentName.tsx

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeSegmentName.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeSegmentName.tsx
new file mode 100644
index 0000000000..dcb1ea979c
--- /dev/null
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeSegmentName.tsx
@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
+
+type ChangeSegmentNameProps = {
+    name: string;
+    previousName?: string;
+};
+
+export const ChangeSegmentName: FC<ChangeSegmentNameProps> = ({
+    name,
+    previousName,
+}) => {
+    return (
+        <span>
+            <NameWithChangeInfo newName={name} previousName={previousName} />
+        </span>
+    );
+};
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
index 3e578d5793..08bd89552f 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
@@ -17,7 +17,7 @@ import {
     Deleted,
 } from './Change.styles.tsx';
 import { SegmentDiff } from './SegmentDiff.tsx';
-import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
+import { ChangeSegmentName } from './ChangeSegmentName.tsx';
 
 const ActionsContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -72,8 +72,8 @@ export const SegmentChangeDetails: FC<{
                         <ChangeItemWrapper>
                             <ChangeItemInfo>
                                 <Deleted>Deleting segment</Deleted>
-                                <NameWithChangeInfo
-                                    newName={change.payload.name}
+                                <ChangeSegmentName
+                                    name={change.payload.name}
                                     previousName={previousName}
                                 />
                             </ChangeItemInfo>
@@ -102,8 +102,9 @@ export const SegmentChangeDetails: FC<{
                         <ChangeItemWrapper>
                             <ChangeItemInfo>
                                 <Action>Editing segment</Action>
-                                <NameWithChangeInfo
-                                    newName={change.payload.name}
+                                <ChangeSegmentName
+                                    name={change.payload.name}
+                                    previousName={previousName}
                                 />
                             </ChangeItemInfo>
                             {actionsWithTabs}