From 564c3ec2bab7504597e5a31ca87141e35b6a99a8 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 2 Jul 2025 13:38:37 +0200
Subject: [PATCH] revert changes to HTML semantics

---
 .../NameWithChangeInfo.test.tsx               | 22 +++++++++++++++----
 .../NameWithChangeInfo/NameWithChangeInfo.tsx | 17 ++++++++++++--
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.test.tsx
index 272139661d..697570dc76 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.test.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.test.tsx
@@ -19,7 +19,7 @@ test.each(['', undefined])(
         ).toBeNull();
 
         // expect ins element with new strategy name
-        await screen.findByText(newName, { selector: 'p' });
+        await screen.findByText(newName, { selector: 'ins' });
     },
 );
 
@@ -35,7 +35,9 @@ test.each(['', undefined])(
         );
 
         // expect no ins elements
-        expect(screen.queryByText(newName || '', { selector: 'p' })).toBeNull();
+        expect(
+            screen.queryByText(newName || '', { selector: 'ins' }),
+        ).toBeNull();
 
         // expect del element with old strategy name
         await screen.findByText(previousName, { selector: 'del' });
@@ -53,13 +55,25 @@ test('Should render the old name as deleted and the new name as inserted if the
     await screen.findByText(previousName, { selector: 'del' });
 
     // expect ins element with new strategy name
-    await screen.findByText(newName, { selector: 'p' });
+    await screen.findByText(newName, { selector: 'ins' });
+});
+
+test('Should render the name in a span if it has not changed', async () => {
+    const name = 'name';
+    render(<NameWithChangeInfo newName={name} previousName={name} />);
+
+    // expect no del or ins elements
+    expect(screen.queryByText(name, { selector: 'ins' })).toBeNull();
+    expect(screen.queryByText(name, { selector: 'del' })).toBeNull();
+
+    // expect span element with the strategy name
+    await screen.findByText(name, { selector: 'span' });
 });
 
 test('Should render nothing if there was no name and there is still no name', async () => {
     render(<NameWithChangeInfo newName={undefined} previousName={undefined} />);
 
-    expect(screen.queryByText('', { selector: 'p' })).toBeNull();
+    expect(screen.queryByText('', { selector: 'ins' })).toBeNull();
     expect(screen.queryByText('', { selector: 'del' })).toBeNull();
     expect(screen.queryByText('', { selector: 'span' })).toBeNull();
 });
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx
index 7f83e664a8..ec645c25e3 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { Typography, styled } from '@mui/material';
+import { Typography, type TypographyProps, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { textTruncated } from 'themes/themeStyles';
 
@@ -9,11 +9,18 @@ const Truncated = styled('span')(() => ({
     display: 'block',
 }));
 
+const NewName = styled(Typography)<TypographyProps>({
+    textDecoration: 'none',
+});
+
 export const NameWithChangeInfo: FC<{
     newName: string | undefined;
     previousName: string | undefined;
 }> = ({ newName, previousName }) => {
     const titleHasChanged = Boolean(previousName && previousName !== newName);
+    const titleHasChangedOrBeenAdded = Boolean(
+        titleHasChanged || (!previousName && newName),
+    );
 
     return (
         <>
@@ -31,7 +38,13 @@ export const NameWithChangeInfo: FC<{
                 condition={Boolean(newName)}
                 show={
                     <Truncated>
-                        <Typography component='span'>{newName}</Typography>
+                        <NewName
+                            component={
+                                titleHasChangedOrBeenAdded ? 'ins' : 'span'
+                            }
+                        >
+                            {newName}
+                        </NewName>
                     </Truncated>
                 }
             />