fix: CR strategy name changes code (#4449)

This change addresses two things that were done in
https://github.com/Unleash/unleash/pull/4004 and that I believe to be
bugs.

1. It shows the previous strategy name also if there was no previous
title. So if there was no previous title, it'll show the strategy name
with a strikethrough and then the new title (see the discussion
section).
2. It changes a `span` component to a [`del`
component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del).
I believe the
span was erroneously changed from a `s` component (strikethrough
component) in the linked PR (based on a comment on the PR). This
caused the strikethrough to not be there anymore. However, the `del`
component is semantically more correct and reintroduces the
strikethrough, so it is a better change.
3. It uses [`ins`
elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins)
for names that have changed.

Finally, it removes a redundant pair of curly braces.

How it looks now:


![image](https://github.com/Unleash/unleash/assets/17786332/a9947619-056d-4cd8-8b44-8a562c83ba40)


## Discussion

Regarding point 1: It might be that we don't want to show a
strikethrough through the name of the strategy if there was no previous
title. In that case, the changes related to the first point should be
removed. If we do that, it looks like this:


![image](https://github.com/Unleash/unleash/assets/17786332/aeb6c86c-d283-4703-96e6-c4302d252417)

It makes it harder (impossible, actually) to see when a custom title was
added, but that might be what we want.

But maybe the solution is to also use `ins` elements for new data. That
way the difference is visible (and semantically correct):

![image](https://github.com/Unleash/unleash/assets/17786332/ef13a745-9f9c-4b1a-886f-a7917eb12190)

frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx

@@ -0,0 +1,72 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import React from 'react';
+import { StrategyName } from './StrategyTooltipLink';
+
+test.each(['', undefined])(
+    'Should render only the new title if the previous title was %s',
+    async previousTitle => {
+        const newTitle = 'new title';
+        render(
+            <StrategyName newTitle={newTitle} previousTitle={previousTitle} />
+        );
+
+        // expect no del elements
+        expect(
+            screen.queryByText(previousTitle || '', { selector: 'del' })
+        ).toBeNull();
+
+        // expect ins element with new strategy name
+        await screen.findByText(newTitle, { selector: 'ins' });
+    }
+);
+
+test.each(['', undefined])(
+    'Should render the old title as deleted and no new title if there was a previous title and the new one is %s',
+    async newTitle => {
+        const previousTitle = 'previous title';
+        render(
+            <StrategyName newTitle={newTitle} previousTitle={previousTitle} />
+        );
+
+        // expect no ins elements
+        expect(
+            screen.queryByText(newTitle || '', { selector: 'ins' })
+        ).toBeNull();
+
+        // expect del element with old strategy name
+        await screen.findByText(previousTitle, { selector: 'del' });
+    }
+);
+
+test('Should render the old title as deleted and the new title as inserted if the previous title was different', async () => {
+    const newTitle = 'new title';
+    const previousTitle = 'previous title';
+    render(<StrategyName newTitle={newTitle} previousTitle={previousTitle} />);
+
+    // expect del element with old strategy name
+    await screen.findByText(previousTitle, { selector: 'del' });
+
+    // expect ins element with new strategy name
+    await screen.findByText(newTitle, { selector: 'ins' });
+});
+
+test('Should render the title in a span if it has not changed', async () => {
+    const title = 'title';
+    render(<StrategyName newTitle={title} previousTitle={title} />);
+
+    // expect no del or ins elements
+    expect(screen.queryByText(title, { selector: 'ins' })).toBeNull();
+    expect(screen.queryByText(title, { selector: 'del' })).toBeNull();
+
+    // expect span element with the strategy name
+    await screen.findByText(title, { selector: 'span' });
+});
+
+test('Should render nothing if there was no title and there is still no title', async () => {
+    render(<StrategyName newTitle={undefined} previousTitle={undefined} />);
+
+    expect(screen.queryByText('', { selector: 'ins' })).toBeNull();
+    expect(screen.queryByText('', { selector: 'del' })).toBeNull();
+    expect(screen.queryByText('', { selector: 'span' })).toBeNull();
+});

frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx

@@ -50,30 +50,43 @@ export const StrategyDiff: FC<{
 };
 
 export const StrategyName: FC<{
-    change:
-        | IChangeRequestAddStrategy
-        | IChangeRequestUpdateStrategy
-        | IChangeRequestDeleteStrategy;
+    newTitle: string | undefined;
     previousTitle: string | undefined;
-}> = ({ change, previousTitle }) => {
+}> = ({ newTitle, previousTitle }) => {
+    const titleHasChanged = Boolean(
+        previousTitle && previousTitle !== newTitle
+    );
+
+    const titleHasChangedOrBeenAdded = Boolean(
+        titleHasChanged || (!previousTitle && newTitle)
+    );
+
     return (
         <>
             <ConditionallyRender
-                condition={Boolean(
-                    previousTitle && previousTitle !== change.payload.title
-                )}
+                condition={titleHasChanged}
                 show={
                     <Truncated>
-                        <Typography component="span" color="text.secondary">
-                            {previousTitle ||
-                                formatStrategyName(change.payload.name)}
-                        </Typography>{' '}
+                        <Typography component="del" color="text.secondary">
+                            {previousTitle}
+                        </Typography>
+                    </Truncated>
+                }
+            />
+            <ConditionallyRender
+                condition={Boolean(newTitle)}
+                show={
+                    <Truncated>
+                        <Typography
+                            component={
+                                titleHasChangedOrBeenAdded ? 'ins' : 'span'
+                            }
+                        >
+                            {newTitle}
+                        </Typography>
                     </Truncated>
                 }
             />
-            <Truncated>
-                <Typography component="span">{change.payload.title}</Typography>
-            </Truncated>
         </>
     );
 };
@@ -118,7 +131,10 @@ export const StrategyTooltipLink: FC<IStrategyTooltipLinkProps> = ({
                     {formatStrategyName(change.payload.name)}
                 </Typography>
             </TooltipLink>
-            {<StrategyName change={change} previousTitle={previousTitle} />}
+            <StrategyName
+                newTitle={change.payload.title}
+                previousTitle={previousTitle}
+            />
         </Truncated>
     </StyledContainer>
 );