diff --git a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.test.tsx
index b32cf8a0ed28..7814b9c7e897 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.test.tsx
+++ b/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(
+
+
+ }
+ />
+ ,
+ {
+ route: 'projects/default/features/colors/strategies/edit?environmentId=development&strategyId=2e4f0555-518b-45b3-b0cd-a32cca388a92',
+ }
+ );
+
+ expect(
+ screen.getByText('Updating feature variants to:')
+ ).toBeInTheDocument();
+});
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
index 750d77888c19..b814666e5d20 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
+++ b/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 ? (
+
+
+ Updating feature variants to:
+
+
+
+ ) : null;
+
return (
<>
{change.action === 'addStrategy' && (
@@ -149,6 +171,7 @@ export const StrategyChange: VFC<{
{actions}
+ {featureStrategyVariantsDisplay}
>
)}
{change.action === 'deleteStrategy' && (
@@ -215,6 +238,7 @@ export const StrategyChange: VFC<{
}
/>
+ {featureStrategyVariantsDisplay}
>
)}
>
diff --git a/frontend/src/component/changeRequest/changeRequest.types.ts b/frontend/src/component/changeRequest/changeRequest.types.ts
index cabd151c8d16..c4159aee90f5 100644
--- a/frontend/src/component/changeRequest/changeRequest.types.ts
+++ b/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 };