feat: visualize feature variants on cr (#4809)

Adds a view over feature strategy variants on addStrategy or
editStrategy action

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

@@ -1,4 +1,7 @@
 import { screen } from '@testing-library/react';
+
+import { Routes, Route } from 'react-router-dom';
+
 import { render } from 'utils/testRenderer';
 import { ChangeRequest } from './ChangeRequest';
 import {
@@ -96,3 +99,51 @@ test('Display default disable feature', async () => {
     expect(screen.getByText('Disabled')).toBeInTheDocument();
     expect(screen.getByText('Feature status will change')).toBeInTheDocument();
 });
+
+test('Displays feature strategy variants table', async () => {
+    render(
+        <Routes>
+            <Route
+                path={'projects/:projectId/features/:featureId/strategies/edit'}
+                element={
+                    <ChangeRequest
+                        changeRequest={changeRequestWithDefaultChange({
+                            id: 0,
+                            action: 'addStrategy',
+                            payload: {
+                                name: 'flexibleRollout',
+                                constraints: [],
+                                parameters: {
+                                    rollout: '100',
+                                    stickiness: 'default',
+                                    groupId: 'test123',
+                                },
+                                variants: [
+                                    {
+                                        name: 'variant1',
+                                        stickiness: 'default',
+                                        weight: 500,
+                                        weightType: 'fix',
+                                    },
+                                    {
+                                        name: 'variant2',
+                                        stickiness: 'default',
+                                        weight: 500,
+                                        weightType: 'fix',
+                                    },
+                                ],
+                            },
+                        })}
+                    />
+                }
+            />
+        </Routes>,
+        {
+            route: 'projects/default/features/colors/strategies/edit?environmentId=development&strategyId=2e4f0555-518b-45b3-b0cd-a32cca388a92',
+        }
+    );
+
+    expect(
+        screen.getByText('Updating feature variants to:')
+    ).toBeInTheDocument();
+});

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx

@@ -16,6 +16,7 @@ import { useCurrentStrategy } from './hooks/useCurrentStrategy';
 import { Badge } from 'component/common/Badge/Badge';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { flexRow } from 'themes/themeStyles';
+import { EnvironmentVariantsTable } from 'component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable';
 
 export const ChangeItemWrapper = styled(Box)({
     display: 'flex',
@@ -42,6 +43,14 @@ const ChangeItemInfo: FC = styled(Box)(({ theme }) => ({
     gap: theme.spacing(1),
 }));
 
+const StyledBox: FC = styled(Box)(({ theme }) => ({
+    marginTop: theme.spacing(2),
+}));
+
+const StyledTypography: FC = styled(Typography)(({ theme }) => ({
+    margin: `${theme.spacing(1)} 0`,
+}));
+
 const hasNameField = (payload: unknown): payload is { name: string } =>
     typeof payload === 'object' && payload !== null && 'name' in payload;
 
@@ -118,6 +127,19 @@ export const StrategyChange: VFC<{
         environmentName
     );
 
+    const isStrategyAction =
+        change.action === 'addStrategy' || change.action === 'updateStrategy';
+
+    const featureStrategyVariantsDisplay =
+        isStrategyAction && change.payload.variants ? (
+            <StyledBox>
+                <StyledTypography>
+                    Updating feature variants to:
+                </StyledTypography>
+                <EnvironmentVariantsTable variants={change.payload.variants} />
+            </StyledBox>
+        ) : null;
+
     return (
         <>
             {change.action === 'addStrategy' && (
@@ -149,6 +171,7 @@ export const StrategyChange: VFC<{
                         <div>{actions}</div>
                     </ChangeItemCreateEditWrapper>
                     <StrategyExecution strategy={change.payload} />
+                    {featureStrategyVariantsDisplay}
                 </>
             )}
             {change.action === 'deleteStrategy' && (
@@ -215,6 +238,7 @@ export const StrategyChange: VFC<{
                         }
                     />
                     <StrategyExecution strategy={change.payload} />
+                    {featureStrategyVariantsDisplay}
                 </>
             )}
         </>

frontend/src/component/changeRequest/changeRequest.types.ts

@@ -164,7 +164,12 @@ type ChangeRequestEnabled = { enabled: boolean };
 
 type ChangeRequestAddStrategy = Pick<
     IFeatureStrategy,
-    'parameters' | 'constraints' | 'segments' | 'title' | 'disabled'
+    | 'parameters'
+    | 'constraints'
+    | 'segments'
+    | 'title'
+    | 'disabled'
+    | 'variants'
 > & { name: string };
 
 type ChangeRequestEditStrategy = ChangeRequestAddStrategy & { id: string };