feat: change CR strategy title and name behaviour (#4004)

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

@@ -48,6 +48,36 @@ export const StrategyDiff: FC<{
         </StyledCodeSection>
     );
 };
+
+export const StrategyName: FC<{
+    change:
+        | IChangeRequestAddStrategy
+        | IChangeRequestUpdateStrategy
+        | IChangeRequestDeleteStrategy;
+    previousTitle: string | undefined;
+}> = ({ change, previousTitle }) => {
+    return (
+        <>
+            <ConditionallyRender
+                condition={Boolean(
+                    previousTitle && previousTitle !== change.payload.title
+                )}
+                show={
+                    <Truncated>
+                        <Typography component="span" color="text.secondary">
+                            {previousTitle ||
+                                formatStrategyName(change.payload.name)}
+                        </Typography>{' '}
+                    </Truncated>
+                }
+            />
+            <Truncated>
+                <Typography component="span">{change.payload.title}</Typography>
+            </Truncated>
+        </>
+    );
+};
+
 interface IStrategyTooltipLinkProps {
     change:
         | IChangeRequestAddStrategy
@@ -76,21 +106,6 @@ export const StrategyTooltipLink: FC<IStrategyTooltipLinkProps> = ({
 }) => (
     <StyledContainer>
         <GetFeatureStrategyIcon strategyName={change.payload.name} />
-        <Truncated>
-            <ConditionallyRender
-                condition={Boolean(
-                    (previousTitle && previousTitle !== change.payload.title) ||
-                        (!previousTitle && change.payload.title)
-                )}
-                show={
-                    <Truncated>
-                        <Typography component="s" color="text.secondary">
-                            {previousTitle ||
-                                formatStrategyName(change.payload.name)}
-                        </Typography>{' '}
-                    </Truncated>
-                }
-            />
         <Truncated>
             <TooltipLink
                 tooltip={children}
@@ -100,11 +115,10 @@ export const StrategyTooltipLink: FC<IStrategyTooltipLinkProps> = ({
                 }}
             >
                 <Typography component="span">
-                        {change.payload.title ||
+                    {formatStrategyName(change.payload.name)}
-                            formatStrategyName(change.payload.name)}
                 </Typography>
             </TooltipLink>
-            </Truncated>
+            {<StrategyName change={change} previousTitle={previousTitle} />}
         </Truncated>
     </StyledContainer>
 );