From 9b7a1f4d81b432bcb3aebaaa79c089dfb5ac9726 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 1 Jul 2025 13:46:40 +0200
Subject: [PATCH] rework some stuff

---
 .../Changes/Change/Change.styles.tsx          | 27 +++++++++++++--
 .../Changes/Change/ChangeStrategyName.tsx     |  7 ++--
 .../Changes/Change/StrategyChange.tsx         | 34 +++----------------
 3 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx
index 20c895ba9f..158b02bb75 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx
@@ -1,4 +1,5 @@
 import { styled, Typography } from '@mui/material';
+import type { PropsWithChildren } from 'react';
 
 export const Deleted = styled(Typography)(({ theme }) => ({
     color: theme.palette.error.main,
@@ -7,8 +8,30 @@ export const Deleted = styled(Typography)(({ theme }) => ({
 
 export const Added = styled(Typography)(({ theme }) => ({
     '::before': { content: '"+ "' },
+    color: theme.palette.success.dark,
 }));
 
-export const Added = styled(Typography)(({ theme }) => ({
-    '::before': { content: '"+ "' },
+export const AddedStrategy = styled(Added, {
+    shouldForwardProp: (prop) => prop !== 'disabled',
+})<{ disabled?: boolean }>(({ theme, disabled }) => ({
+    color: disabled ? theme.palette.text.disabled : undefined,
+}));
+
+const Change = styled('span')({
+    fontWeight: 'bold',
+});
+
+export const ChangeItemInfo = styled(
+    ({ children, ...props }: PropsWithChildren) => (
+        <Typography {...props}>
+            <Change>Change:</Change>
+            {children}
+        </Typography>
+    ),
+)(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'row',
+    alignItems: 'center',
+    flex: 'auto',
+    gap: `1ch`,
 }));
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx
index 7e83a1ee75..b798bd1028 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx
@@ -1,8 +1,9 @@
 import type { FC } from 'react';
 import { formatStrategyName } from 'utils/strategyNames';
-import { Typography, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { textTruncated } from 'themes/themeStyles';
 import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
+import { Truncator } from 'component/common/Truncator/Truncator.tsx';
 
 interface IStrategyTooltipLinkProps {
     name: string;
@@ -10,7 +11,7 @@ interface IStrategyTooltipLinkProps {
     previousTitle?: string;
 }
 
-const Truncated = styled('div')(() => ({
+const Truncated = styled('span')(() => ({
     ...textTruncated,
     maxWidth: 500,
 }));
@@ -22,7 +23,7 @@ export const ChangeStrategyName: FC<IStrategyTooltipLinkProps> = ({
 }) => {
     return (
         <Truncated>
-            <Typography component='span'>{formatStrategyName(name)}</Typography>
+            <Truncator component='span'>{formatStrategyName(name)}</Truncator>
             <NameWithChangeInfo newName={title} previousName={previousTitle} />
         </Truncated>
     );
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
index b44e2e8eba..68714322d9 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
@@ -20,6 +20,7 @@ import type { IFeatureStrategy } from 'interfaces/strategy';
 import { Tab, TabList, TabPanel, Tabs } from './ChangeTabComponents.tsx';
 import { ChangeStrategyName } from './ChangeStrategyName.tsx';
 import { StrategyDiff } from './StrategyDiff.tsx';
+import { AddedStrategy, ChangeItemInfo, Deleted } from './Change.styles.tsx';
 
 export const ChangeItemWrapper = styled(Box)({
     display: 'flex',
@@ -36,17 +37,6 @@ const ChangeItemCreateEditDeleteWrapper = styled(Box)(({ theme }) => ({
     width: '100%',
 }));
 
-const ChangeItemInfo: FC<{ children?: React.ReactNode }> = styled(Box)(
-    ({ theme }) => ({
-        display: 'flex',
-        flexFlow: 'row',
-        alignItems: 'center',
-        flex: 'auto',
-        gap: theme.spacing(1),
-        '::before': { content: '"Change: "', fontWeight: 'bold' },
-    }),
-);
-
 const StyledBox: FC<{ children?: React.ReactNode }> = styled(Box)(
     ({ theme }) => ({
         marginTop: theme.spacing(2),
@@ -112,7 +102,7 @@ const EditHeader: FC<{
         return <Typography color='success.dark'>Editing strategy</Typography>;
     }
 
-    return <Typography>Editing strategy:</Typography>;
+    return <Typography>Editing strategy</Typography>;
 };
 
 const hasDiff = (object: unknown, objectToCompare: unknown) =>
@@ -141,14 +131,7 @@ const DeleteStrategy: FC<{
         <>
             <ChangeItemCreateEditDeleteWrapper>
                 <ChangeItemInfo>
-                    <Typography
-                        sx={(theme) => ({
-                            color: theme.palette.error.main,
-                            '::before': { content: '"- "' },
-                        })}
-                    >
-                        Deleting strategy
-                    </Typography>
+                    <Deleted>Deleting strategy</Deleted>
                     <ChangeStrategyName name={name || ''} title={title} />
                 </ChangeItemInfo>
                 {actions}
@@ -272,16 +255,9 @@ const AddStrategy: FC<{
     <>
         <ChangeItemCreateEditDeleteWrapper>
             <ChangeItemInfo>
-                <Typography
-                    color={
-                        change.payload?.disabled
-                            ? 'action.disabled'
-                            : 'success.dark'
-                    }
-                    sx={{ '::before': { content: '"+ "' } }}
-                >
+                <AddedStrategy disabled={change.payload?.disabled}>
                     Adding strategy
-                </Typography>
+                </AddedStrategy>
                 <ChangeStrategyName
                     name={change.payload.name}
                     title={change.payload.title}