fix: ignore segment order in diff calculation (#8880)

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(
+        <Routes>
+            <Route
+                path='/projects/:projectId'
+                element={
+                    <StrategyChange
+                        featureName={feature}
+                        environmentName={environmentName}
+                        projectId={projectId}
+                        changeRequestState='Applied'
+                        change={{
+                            action: 'updateStrategy',
+                            id: 1,
+                            payload: {
+                                ...strategy,
+                                segments: [3, 2, 1],
+                                snapshot: {
+                                    ...strategy,
+                                    segments: [1, 2, 3],
+                                },
+                            },
+                        }}
+                    />
+                }
+            />
+        </Routes>,
+        { route: `/projects/${projectId}` },
+    );
+
+    const viewDiff = await screen.findByText('View Diff');
+    await userEvent.hover(viewDiff);
+    await screen.findByText('(no changes)');
+});

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

@@ -28,6 +28,18 @@ const StyledCodeSection = styled('div')(({ theme }) => ({
     },
 }));
 
+const sortSegments = <T extends { segments?: number[] }>(
+    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 (
         <StyledCodeSection>
             <EventDiff
                 entry={{
-                    preData: omit(currentStrategy, 'sortOrder'),
+                    preData: omit(sortedCurrentStrategy, 'sortOrder'),
-                    data: omit(changeRequestStrategy, 'snapshot'),
+                    data: omit(sortedChangeRequestStrategy, 'snapshot'),
                 }}
             />
         </StyledCodeSection>