From 51a895b66095af3710a2169683a9418220fe79e8 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Thu, 3 Jul 2025 14:58:13 +0200 Subject: [PATCH] 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: image with after: image 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. --- .../Changes/Change/ChangeSegmentName.tsx | 18 ----------- .../Changes/Change/ChangeStrategyName.tsx | 30 ------------------- .../NameWithChangeInfo/NameWithChangeInfo.tsx | 1 - .../Changes/Change/SegmentChangeDetails.tsx | 10 +++---- .../Changes/Change/StrategyChange.test.tsx | 2 -- .../Changes/Change/StrategyChange.tsx | 23 ++++++-------- 6 files changed, 14 insertions(+), 70 deletions(-) delete mode 100644 frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeSegmentName.tsx delete mode 100644 frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeSegmentName.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeSegmentName.tsx deleted file mode 100644 index dcb1ea979c..0000000000 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeSegmentName.tsx +++ /dev/null @@ -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 = ({ - name, - previousName, -}) => { - return ( - - - - ); -}; diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx deleted file mode 100644 index 20eb1fca20..0000000000 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeStrategyName.tsx +++ /dev/null @@ -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 = ({ - name, - title, - previousTitle, -}) => { - return ( - - {formatStrategyName(name)} - - - ); -}; 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 d840ed899e..9fddf0a210 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx +++ b/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)({ diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx index 08bd89552f..519de546dc 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx +++ b/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<{ Deleting segment - @@ -102,8 +102,8 @@ export const SegmentChangeDetails: FC<{ Editing segment - diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.test.tsx index 01c18edbdf..8121ec7f28 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.test.tsx +++ b/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(); diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx index 9a51ddae1a..374c99ac13 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx +++ b/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<{ Deleting strategy - + {actions} @@ -175,10 +174,9 @@ const UpdateStrategy: FC<{ wasDisabled={currentStrategy?.disabled} willBeDisabled={change.payload?.disabled} /> - {actions} @@ -248,10 +246,7 @@ const AddStrategy: FC<{ Adding {isDefaultChange && 'default'} strategy - +