feat: visualize adding a default strategy (#3521)

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

@@ -0,0 +1,96 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { ChangeRequest } from './ChangeRequest';
+import {
+    IChangeRequest,
+    IChangeRequestAddStrategy,
+    IChangeRequestEnabled,
+} from '../changeRequest.types';
+
+const changeRequestWithDefaultChange = (
+    defaultChange: IChangeRequestEnabled | IChangeRequestAddStrategy
+) => {
+    const changeRequest: IChangeRequest = {
+        approvals: [],
+        comments: [],
+        createdAt: new Date(),
+        createdBy: {
+            id: 1,
+            username: 'author',
+            imageUrl: '',
+        },
+        features: [
+            {
+                name: 'Feature Toggle Name',
+                changes: [
+                    {
+                        id: 67,
+                        action: 'updateEnabled',
+                        payload: {
+                            enabled: true,
+                        },
+                        createdAt: new Date(),
+                        createdBy: {
+                            id: 1,
+                            username: 'admin',
+                            imageUrl:
+                                'https://gravatar.com/avatar/21232f297a57a5a743894a0e4a801fc3?size=42&default=retro',
+                        },
+                    },
+                ],
+                defaultChange,
+            },
+        ],
+        id: 0,
+        minApprovals: 1,
+        state: 'Draft',
+        title: 'My change request',
+        project: 'project',
+        environment: 'production',
+    };
+    return changeRequest;
+};
+
+test('Display default add strategy', async () => {
+    render(
+        <ChangeRequest
+            changeRequest={changeRequestWithDefaultChange({
+                id: 0,
+                action: 'addStrategy',
+                payload: {
+                    name: 'flexibleRollout',
+                    constraints: [],
+                    parameters: {
+                        rollout: '100',
+                        stickiness: 'default',
+                        groupId: 'test123',
+                    },
+                },
+            })}
+        />
+    );
+
+    expect(screen.getByText('Feature Toggle Name')).toBeInTheDocument();
+    expect(screen.getByText('Enabled')).toBeInTheDocument();
+    expect(
+        screen.getByText('Default strategy will be added')
+    ).toBeInTheDocument();
+});
+
+test('Display default disable feature', async () => {
+    render(
+        <ChangeRequest
+            changeRequest={changeRequestWithDefaultChange({
+                id: 0,
+                action: 'updateEnabled',
+                payload: {
+                    enabled: false,
+                },
+            })}
+        />
+    );
+
+    expect(screen.getByText('Feature Toggle Name')).toBeInTheDocument();
+    expect(screen.getByText('Disabled')).toBeInTheDocument();
+    expect(screen.getByText('Feature status will change')).toBeInTheDocument();
+});

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

@@ -1,5 +1,5 @@
 import React, { VFC } from 'react';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import type { IChangeRequest } from '../changeRequest.types';
 import { FeatureToggleChanges } from './Changes/FeatureToggleChanges';
 import { Change } from './Changes/Change/Change';
@@ -42,6 +42,25 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                             feature={feature}
                         />
                     ))}
+                    {feature.defaultChange ? (
+                        <Change
+                            discard={
+                                <Typography
+                                    variant="body2"
+                                    color="text.secondary"
+                                >
+                                    {feature.defaultChange.action ===
+                                    'addStrategy'
+                                        ? 'Default strategy will be added'
+                                        : 'Feature status will change'}
+                                </Typography>
+                            }
+                            index={feature.changes.length}
+                            changeRequest={changeRequest}
+                            change={feature.defaultChange}
+                            feature={feature}
+                        />
+                    ) : null}
                 </FeatureToggleChanges>
             ))}
         </Box>

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

@@ -71,13 +71,16 @@ export const Change: FC<{
     change: IChange;
     feature: IChangeRequestFeature;
 }> = ({ index, change, feature, changeRequest, discard }) => {
+    const lastIndex = feature.defaultChange
+        ? feature.changes.length + 1
+        : feature.changes.length;
     return (
         <StyledSingleChangeBox
             key={objectId(change)}
             $hasConflict={Boolean(change.conflict)}
             $isInConflictFeature={Boolean(feature.conflict)}
             $isAfterWarning={Boolean(feature.changes[index - 1]?.conflict)}
-            $isLast={index + 1 === feature.changes.length}
+            $isLast={index + 1 === lastIndex}
         >
             <ConditionallyRender
                 condition={Boolean(change.conflict) && !feature.conflict}

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

@@ -28,6 +28,7 @@ export interface IChangeRequestFeature {
     name: string;
     conflict?: string;
     changes: IChange[];
+    defaultChange?: IChangeRequestAddStrategy | IChangeRequestEnabled;
 }
 
 export interface IChangeRequestApproval {