Chore(1-3894): update old/new name display + remove strategy type names (#10305)

This PR updates how we show old/new strategy/segment names in change
requests, and also removes the name of the strategy type from the
change.

For the old/new names: instead of showing them stacked vertically, we
show them side by side (old name first, then new name).

Compare before:
<img width="967" alt="image"
src="https://github.com/user-attachments/assets/d3e36f49-4abc-4cd4-8ba9-752515740185"
/>


with after:

<img width="974" alt="image"
src="https://github.com/user-attachments/assets/d0f85264-b055-4c44-b985-f992f09d8dab"
/>


Only affects the new components (legacy CR view is untouched). If we get
negative feedback while rolling it out because the strat type name is
missing, we can always add it back.

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeSegmentName.tsx

@@ -1,18 +0,0 @@
-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>
-    );
-};

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx

@@ -1,30 +0,0 @@
-import type { FC } from 'react';
-import { formatStrategyName } from 'utils/strategyNames';
-import { styled } from '@mui/material';
-import { textTruncated } from 'themes/themeStyles';
-import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
-import { Truncator } from 'component/common/Truncator/Truncator.tsx';
-
-type ChangeStrategyNameProps = {
-    name: string;
-    title?: string;
-    previousTitle?: string;
-};
-
-const Truncated = styled('span')(() => ({
-    ...textTruncated,
-    maxWidth: 500,
-}));
-
-export const ChangeStrategyName: FC<ChangeStrategyNameProps> = ({
-    name,
-    title,
-    previousTitle,
-}) => {
-    return (
-        <Truncated>
-            <Truncator component='span'>{formatStrategyName(name)}</Truncator>
-            <NameWithChangeInfo newName={title} previousName={previousTitle} />
-        </Truncated>
-    );
-};

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx

@@ -6,7 +6,6 @@ import { textTruncated } from 'themes/themeStyles';
 const Truncated = styled('span')(() => ({
     ...textTruncated,
     maxWidth: 500,
-    display: 'block',
 }));
 
 const NewName = styled(Typography)<TypographyProps>({

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 { ChangeSegmentName } from './ChangeSegmentName.tsx';
+import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
 
 const ActionsContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -72,8 +72,8 @@ export const SegmentChangeDetails: FC<{
                         <ChangeItemWrapper>
                             <ChangeItemInfo>
                                 <Deleted>Deleting segment</Deleted>
-                                <ChangeSegmentName
+                                <NameWithChangeInfo
-                                    name={change.payload.name}
+                                    newName={change.payload.name}
                                     previousName={previousName}
                                 />
                             </ChangeItemInfo>
@@ -102,8 +102,8 @@ export const SegmentChangeDetails: FC<{
                         <ChangeItemWrapper>
                             <ChangeItemInfo>
                                 <Action>Editing segment</Action>
-                                <ChangeSegmentName
+                                <NameWithChangeInfo
-                                    name={change.payload.name}
+                                    newName={change.payload.name}
                                     previousName={previousName}
                                 />
                             </ChangeItemInfo>

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.test.tsx

@@ -243,7 +243,6 @@ test('Deleting strategy before change request is applied diffs against current s
     );
 
     await screen.findByText('Deleting strategy');
-    await screen.findByText('Gradual rollout');
     await screen.findByText('current_title');
 
     await screen.findByText('current_variant');
@@ -299,7 +298,6 @@ test('Deleting strategy after change request is applied diffs against the snapsh
     );
 
     await screen.findByText('Deleting strategy');
-    await screen.findByText('Gradual rollout');
     await screen.findByText('snapshot_title');
     expect(screen.queryByText('current_title')).not.toBeInTheDocument();
 

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx

@@ -18,7 +18,6 @@ import { EnvironmentVariantsTable } from 'component/feature/FeatureView/FeatureV
 import { ChangeOverwriteWarning } from './ChangeOverwriteWarning/ChangeOverwriteWarning.tsx';
 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 {
     Action,
@@ -27,6 +26,7 @@ import {
     ChangeItemWrapper,
     Deleted,
 } from './Change.styles.tsx';
+import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
 
 const StyledBox: FC<{ children?: React.ReactNode }> = styled(Box)(
     ({ theme }) => ({
@@ -103,10 +103,6 @@ const DeleteStrategy: FC<{
     currentStrategy: IFeatureStrategy | undefined;
     actions?: ReactNode;
 }> = ({ change, changeRequestState, currentStrategy, actions }) => {
-    const name =
-        changeRequestState === 'Applied'
-            ? change.payload?.snapshot?.name
-            : currentStrategy?.name;
     const title =
         changeRequestState === 'Applied'
             ? change.payload?.snapshot?.title
@@ -121,7 +117,10 @@ const DeleteStrategy: FC<{
             <ChangeItemWrapper>
                 <ChangeItemInfo>
                     <Deleted>Deleting strategy</Deleted>
-                    <ChangeStrategyName name={name || ''} title={title} />
+                    <NameWithChangeInfo
+                        newName={title}
+                        previousName={referenceStrategy?.title}
+                    />
                 </ChangeItemInfo>
                 {actions}
             </ChangeItemWrapper>
@@ -175,10 +174,9 @@ const UpdateStrategy: FC<{
                         wasDisabled={currentStrategy?.disabled}
                         willBeDisabled={change.payload?.disabled}
                     />
-                    <ChangeStrategyName
+                    <NameWithChangeInfo
-                        name={change.payload.name}
+                        newName={change.payload.title}
-                        title={change.payload.title}
+                        previousName={previousTitle}
-                        previousTitle={previousTitle}
                     />
                 </ChangeItemInfo>
                 {actions}
@@ -248,10 +246,7 @@ const AddStrategy: FC<{
                 <AddedStrategy disabled={change.payload?.disabled}>
                     Adding {isDefaultChange && 'default'} strategy
                 </AddedStrategy>
-                <ChangeStrategyName
+                <NameWithChangeInfo newName={change.payload.title} />
-                    name={change.payload.name}
-                    title={change.payload.title}
-                />
                 <DisabledEnabledState
                     disabled
                     show={change.payload?.disabled === true}