From ee64a6b9a97430e27a3abb45d56ea06e56424544 Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Thu, 28 Nov 2024 15:24:12 +0100
Subject: [PATCH] fix: ignore segment order in diff calculation

---
 .../Changes/Change/StrategyChange.test.tsx    | 35 +++++++++++++++++++
 .../StrategyTooltipLink.tsx                   | 19 ++++++++--
 2 files changed, 52 insertions(+), 2 deletions(-)

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(
+        <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)');
+});
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 = <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'),
-                    data: omit(changeRequestStrategy, 'snapshot'),
+                    preData: omit(sortedCurrentStrategy, 'sortOrder'),
+                    data: omit(sortedChangeRequestStrategy, 'snapshot'),
                 }}
             />
         </StyledCodeSection>