diff --git a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.test.tsx
new file mode 100644
index 0000000000..a1488de42f
--- /dev/null
+++ b/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(
+
+ );
+
+ 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(
+
+ );
+
+ expect(screen.getByText('Feature Toggle Name')).toBeInTheDocument();
+ expect(screen.getByText('Disabled')).toBeInTheDocument();
+ expect(screen.getByText('Feature status will change')).toBeInTheDocument();
+});
diff --git a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx
index f2c2e3793a..c7a478dd72 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx
+++ b/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 = ({
feature={feature}
/>
))}
+ {feature.defaultChange ? (
+
+ {feature.defaultChange.action ===
+ 'addStrategy'
+ ? 'Default strategy will be added'
+ : 'Feature status will change'}
+
+ }
+ index={feature.changes.length}
+ changeRequest={changeRequest}
+ change={feature.defaultChange}
+ feature={feature}
+ />
+ ) : null}
))}
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx
index 6e9c7e979f..2de63edfdc 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx
+++ b/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 (