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 f6c7a226c34d..a0116e4dc1bd 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.test.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.test.tsx
@@ -333,3 +333,38 @@ test('Adding strategy always diffs against undefined strategy', async () => {
await screen.findByText('Setting strategy variants to:');
await screen.findByText('change_variant');
});
+
+test('Segments order does not matter for diff calculation', async () => {
+ render(
+
+
+ }
+ />
+ ,
+ { route: `/projects/${projectId}` },
+ );
+
+ const viewDiff = await screen.findByText('View Diff');
+ await userEvent.hover(viewDiff);
+ await screen.findByText('(no changes)');
+});
diff --git a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx
index 8719d91e2470..8467f01bee39 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx
@@ -28,6 +28,18 @@ const StyledCodeSection = styled('div')(({ theme }) => ({
},
}));
+const sortSegments = (
+ item?: T,
+): T | undefined => {
+ if (!item || !item.segments) {
+ return item;
+ }
+ return {
+ ...item,
+ segments: [...item.segments].sort((a, b) => a - b),
+ };
+};
+
export const StrategyDiff: FC<{
change:
| IChangeRequestAddStrategy
@@ -38,12 +50,15 @@ export const StrategyDiff: FC<{
const changeRequestStrategy =
change.action === 'deleteStrategy' ? undefined : change.payload;
+ const sortedCurrentStrategy = sortSegments(currentStrategy);
+ const sortedChangeRequestStrategy = sortSegments(changeRequestStrategy);
+
return (