refactor: extract add strategy diff (#8877)

Unleash · Nov 28, 2024 · 6e9b65b · 6e9b65b
1 parent 0d72cfb
commit 6e9b65b
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 43 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
@@ -284,3 +284,52 @@ test('Deleting strategy after change request is applied diffs against the snapsh
     await screen.findByText('Deleting strategy variants:');
     await screen.findByText('snapshot_variant');
 });
+
+test('Adding strategy always diffs against undefined strategy', async () => {
+    render(
+        <Routes>
+            <Route
+                path='/projects/:projectId'
+                element={
+                    <StrategyChange
+                        featureName={feature}
+                        environmentName={environmentName}
+                        projectId={projectId}
+                        changeRequestState='Approved'
+                        change={{
+                            action: 'addStrategy',
+                            id: 1,
+                            payload: {
+                                ...strategy,
+                                variants: [
+                                    {
+                                        name: 'change_variant',
+                                        weight: 1000,
+                                        stickiness: 'default',
+                                        weightType: 'variable' as const,
+                                    },
+                                ],
+                                title: 'change_request_title',
+                                parameters: {
+                                    ...strategy.parameters,
+                                    rollout: changeRequestRollout,
+                                },
+                            },
+                        }}
+                    />
+                }
+            />
+        </Routes>,
+        { route: `/projects/${projectId}` },
+    );
+
+    await screen.findByText('+ Adding strategy:');
+    await screen.findByText('change_request_title');
+
+    const viewDiff = await screen.findByText('View Diff');
+    await userEvent.hover(viewDiff);
+    await screen.findByText(`+ name: "flexibleRollout"`);
+
+    await screen.findByText('Setting strategy variants to:');
+    await screen.findByText('change_variant');
+});
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
@@ -267,6 +267,56 @@ const UpdateStrategy: FC<{
     );
 };
 
+const AddStrategy: FC<{
+    change: IChangeRequestAddStrategy;
+    actions?: ReactNode;
+}> = ({ change, actions }) => {
+    return (
+        <>
+            <ChangeItemCreateEditDeleteWrapper>
+                <ChangeItemInfo>
+                    <Typography
+                        color={
+                            change.payload?.disabled
+                                ? 'action.disabled'
+                                : 'success.dark'
+                        }
+                    >
+                        + Adding strategy:
+                    </Typography>
+                    <StrategyTooltipLink
+                        name={change.payload.name}
+                        title={change.payload.title}
+                    >
+                        <StrategyDiff
+                            change={change}
+                            currentStrategy={undefined}
+                        />
+                    </StrategyTooltipLink>
+                    <div>
+                        <DisabledEnabledState
+                            disabled
+                            show={change.payload?.disabled === true}
+                        />
+                    </div>
+                </ChangeItemInfo>
+                <div>{actions}</div>
+            </ChangeItemCreateEditDeleteWrapper>
+            <StrategyExecution strategy={change.payload} />
+            {change.payload.variants && change.payload.variants.length > 0 && (
+                <StyledBox>
+                    <StyledTypography>
+                        Setting strategy variants to:
+                    </StyledTypography>
+                    <EnvironmentVariantsTable
+                        variants={change.payload.variants}
+                    />
+                </StyledBox>
+            )}
+        </>
+    );
+};
+
 export const StrategyChange: FC<{
     actions?: ReactNode;
     change:
@@ -295,49 +345,7 @@ export const StrategyChange: FC<{
     return (
         <>
             {change.action === 'addStrategy' && (
-                <>
-                    <ChangeItemCreateEditDeleteWrapper>
-                        <ChangeItemInfo>
-                            <Typography
-                                color={
-                                    change.payload?.disabled
-                                        ? 'action.disabled'
-                                        : 'success.dark'
-                                }
-                            >
-                                + Adding strategy:
-                            </Typography>
-                            <StrategyTooltipLink
-                                name={change.payload.name}
-                                title={change.payload.title}
-                            >
-                                <StrategyDiff
-                                    change={change}
-                                    currentStrategy={currentStrategy}
-                                />
-                            </StrategyTooltipLink>
-                            <div>
-                                <DisabledEnabledState
-                                    disabled
-                                    show={change.payload?.disabled === true}
-                                />
-                            </div>
-                        </ChangeItemInfo>
-                        <div>{actions}</div>
-                    </ChangeItemCreateEditDeleteWrapper>
-                    <StrategyExecution strategy={change.payload} />
-                    {change.payload.variants &&
-                        change.payload.variants.length > 0 && (
-                            <StyledBox>
-                                <StyledTypography>
-                                    Setting strategy variants to:
-                                </StyledTypography>
-                                <EnvironmentVariantsTable
-                                    variants={change.payload.variants}
-                                />
-                            </StyledBox>
-                        )}
-                </>
+                <AddStrategy change={change} actions={actions} />
             )}
             {change.action === 'deleteStrategy' && (
                 <DeleteStrategy