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 };