Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-28 17:55:15 +02:00
Code Issues Projects Releases Wiki Activity

feat: split and clean up constraint lists (#9839)

Browse Source
This commit is contained in:
Jaanus Sellin 2025-04-28 13:46:22 +03:00 committed by GitHub
parent 25790c1e0b
commit 5c483c7d8d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 85 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
View File

@ -1,6 +1,5 @@
import type React from 'react'; import type React from 'react';
import type { FC, ReactNode } from 'react'; import type { FC, ReactNode } from 'react';
import { useRef } from 'react';
import { Box, styled, Typography } from '@mui/material'; import { Box, styled, Typography } from '@mui/material';
import type { import type {
ChangeRequestState, ChangeRequestState,
@ -10,11 +9,7 @@ import type {
import { useSegment } from 'hooks/api/getters/useSegment/useSegment'; import { useSegment } from 'hooks/api/getters/useSegment/useSegment';
import { SegmentDiff, SegmentTooltipLink } from '../../SegmentTooltipLink'; import { SegmentDiff, SegmentTooltipLink } from '../../SegmentTooltipLink';
import { ConstraintAccordionList } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; import { ConstraintAccordionList } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
import { import { ViewableConstraintsList } from 'component/common/NewConstraintAccordion/ConstraintsList/ViewableConstraintsList';
NewConstraintAccordionList,
useConstraintAccordionList,
} from 'component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList';
import type { IConstraintAccordionListRef } from 'component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import { ChangeOverwriteWarning } from './ChangeOverwriteWarning/ChangeOverwriteWarning'; import { ChangeOverwriteWarning } from './ChangeOverwriteWarning/ChangeOverwriteWarning';
@ -73,8 +68,6 @@ export const SegmentChangeDetails: FC<{
const referenceSegment = const referenceSegment =
changeRequestState === 'Applied' ? snapshotSegment : currentSegment; changeRequestState === 'Applied' ? snapshotSegment : currentSegment;
const addEditStrategy = useUiFlag('addEditStrategy'); const addEditStrategy = useUiFlag('addEditStrategy');
const constraintsRef = useRef<IConstraintAccordionListRef | null>(null);
const { state } = useConstraintAccordionList(undefined, constraintsRef);
return ( return (
<SegmentContainer conflict={change.conflict}> <SegmentContainer conflict={change.conflict}>
@ -124,10 +117,8 @@ export const SegmentChangeDetails: FC<{
<div>{actions}</div> <div>{actions}</div>
</ChangeItemCreateEditWrapper> </ChangeItemCreateEditWrapper>
{addEditStrategy ? ( {addEditStrategy ? (
<NewConstraintAccordionList <ViewableConstraintsList
ref={constraintsRef}
constraints={change.payload.constraints} constraints={change.payload.constraints}
state={state}
/> />
) : ( ) : (
<ConstraintAccordionList <ConstraintAccordionList

50
frontend/src/component/common/NewConstraintAccordion/ConstraintsList/ConstraintsListUtils.ts
View File

@ -1,50 +0,0 @@
import type React from 'react';
import { useImperativeHandle } from 'react';
import type { IConstraint } from 'interfaces/strategy';
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import { useWeakMap } from 'hooks/useWeakMap';
import { createEmptyConstraint } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
export interface IConstraintsListProps {
constraints: IConstraint[];
setConstraints?: React.Dispatch<React.SetStateAction<IConstraint[]>>;
}
export interface IConstraintsListRef {
addConstraint?: (contextName: string) => void;
}
export interface IConstraintsListItemState {
new?: boolean;
editing?: boolean;
}
export const useConstraintsList = (
setConstraints:
| React.Dispatch<React.SetStateAction<IConstraint[]>>
| undefined,
ref: React.RefObject<IConstraintsListRef>,
) => {
const state = useWeakMap<IConstraint, IConstraintsListItemState>();
const { context } = useUnleashContext();
const addConstraint =
setConstraints &&
((contextName: string) => {
const constraint = createEmptyConstraint(contextName);
state.set(constraint, { editing: true, new: true });
setConstraints((prev) => [...prev, constraint]);
});
useImperativeHandle(ref, () => ({
addConstraint,
}));
const onAdd =
addConstraint &&
(() => {
addConstraint(context[0].name);
});
return { onAdd, state, context };
};

33
frontend/src/component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList.tsx
View File

@ -1,24 +1,21 @@
import type React from 'react';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
import { styled } from '@mui/material'; import { styled } from '@mui/material';
import type { IConstraint } from 'interfaces/strategy'; import type { IConstraint } from 'interfaces/strategy';
import produce from 'immer'; import produce from 'immer';
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import { useWeakMap } from 'hooks/useWeakMap';
import { constraintId } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint'; import { constraintId } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList'; import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList';
import { EditableConstraintWrapper } from 'component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper'; import { EditableConstraintWrapper } from 'component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper';
import type {
IConstraintsListProps as IEditableConstraintsListProps,
IConstraintsListRef as IEditableConstraintsListRef,
IConstraintsListItemState as IEditableConstraintsListItemState,
} from './ConstraintsListUtils';
import { useConstraintsList } from './ConstraintsListUtils';
export type { IEditableConstraintsListProps, IEditableConstraintsListRef }; export interface IEditableConstraintsListRef {
addConstraint?: (contextName: string) => void;
}
export const editableConstraintsListId = 'editableConstraintsListId'; export interface IEditableConstraintsListProps {
constraints: IConstraint[];
export const useEditableConstraintsList = useConstraintsList; setConstraints?: React.Dispatch<React.SetStateAction<IConstraint[]>>;
}
const StyledContainer = styled('div')({ const StyledContainer = styled('div')({
width: '100%', width: '100%',
@ -31,13 +28,10 @@ export const EditableConstraintsList = forwardRef<
IEditableConstraintsListProps IEditableConstraintsListProps
>(({ constraints, setConstraints }, ref) => { >(({ constraints, setConstraints }, ref) => {
const { context } = useUnleashContext(); const { context } = useUnleashContext();
const state = useWeakMap<IConstraint, IEditableConstraintsListItemState>();
const onRemove = const onRemove =
setConstraints && setConstraints &&
((index: number) => { ((index: number) => {
const constraint = constraints[index];
state.set(constraint, {});
setConstraints( setConstraints(
produce((draft) => { produce((draft) => {
draft.splice(index, 1); draft.splice(index, 1);
@ -48,7 +42,6 @@ export const EditableConstraintsList = forwardRef<
const onSave = const onSave =
setConstraints && setConstraints &&
((index: number, constraint: IConstraint) => { ((index: number, constraint: IConstraint) => {
state.set(constraint, {});
setConstraints( setConstraints(
produce((draft) => { produce((draft) => {
draft[index] = constraint; draft[index] = constraint;
@ -59,7 +52,6 @@ export const EditableConstraintsList = forwardRef<
const onAutoSave = const onAutoSave =
setConstraints && setConstraints &&
((id: string | undefined) => (constraint: IConstraint) => { ((id: string | undefined) => (constraint: IConstraint) => {
state.set(constraint, { editing: true });
setConstraints( setConstraints(
produce((draft) => { produce((draft) => {
return draft.map((oldConstraint) => { return draft.map((oldConstraint) => {
@ -72,24 +64,17 @@ export const EditableConstraintsList = forwardRef<
); );
}); });
const onCancel = (index: number) => {
const constraint = constraints[index];
state.get(constraint)?.new && onRemove?.(index);
state.set(constraint, {});
};
if (context.length === 0) { if (context.length === 0) {
return null; return null;
} }
return ( return (
<StyledContainer id={editableConstraintsListId}> <StyledContainer>
<ConstraintsList> <ConstraintsList>
{constraints.map((constraint, index) => ( {constraints.map((constraint, index) => (
<EditableConstraintWrapper <EditableConstraintWrapper
key={constraint[constraintId]} key={constraint[constraintId]}
constraint={constraint} constraint={constraint}
onCancel={onCancel?.bind(null, index)}
onDelete={onRemove?.bind(null, index)} onDelete={onRemove?.bind(null, index)}
onSave={onSave!.bind(null, index)} onSave={onSave!.bind(null, index)}
onAutoSave={onAutoSave?.(constraint[constraintId])} onAutoSave={onAutoSave?.(constraint[constraintId])}

49
frontend/src/component/common/NewConstraintAccordion/ConstraintsList/ViewableConstraintsList.tsx
View File

@ -1,24 +1,13 @@
import { forwardRef } from 'react';
import { styled } from '@mui/material'; import { styled } from '@mui/material';
import type { IConstraint } from 'interfaces/strategy'; import type { IConstraint } from 'interfaces/strategy';
import produce from 'immer';
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import { useWeakMap } from 'hooks/useWeakMap';
import { constraintId } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint'; import { constraintId } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList'; import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList';
import { ConstraintAccordionView } from 'component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; import { ConstraintAccordionView } from 'component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
import type {
IConstraintsListProps as IViewableConstraintsListProps,
IConstraintsListRef as IViewableConstraintsListRef,
IConstraintsListItemState as IViewableConstraintsListItemState,
} from './ConstraintsListUtils';
import { useConstraintsList } from './ConstraintsListUtils';
export type { IViewableConstraintsListProps, IViewableConstraintsListRef }; export interface IViewableConstraintsListProps {
constraints: IConstraint[];
export const viewableConstraintsListId = 'viewableConstraintsListId'; }
export const useViewableConstraintsList = useConstraintsList;
const StyledContainer = styled('div')({ const StyledContainer = styled('div')({
width: '100%', width: '100%',
@ -26,47 +15,25 @@ const StyledContainer = styled('div')({
flexDirection: 'column', flexDirection: 'column',
}); });
export const ViewableConstraintsList = forwardRef< export const ViewableConstraintsList = ({
IViewableConstraintsListRef | undefined, constraints,
IViewableConstraintsListProps }: IViewableConstraintsListProps) => {
>(({ constraints, setConstraints }, ref) => {
const { context } = useUnleashContext(); const { context } = useUnleashContext();
const state = useWeakMap<IConstraint, IViewableConstraintsListItemState>();
const onEdit =
setConstraints &&
((constraint: IConstraint) => {
state.set(constraint, { editing: true });
});
const onRemove =
setConstraints &&
((index: number) => {
const constraint = constraints[index];
state.set(constraint, {});
setConstraints(
produce((draft) => {
draft.splice(index, 1);
}),
);
});
if (context.length === 0) { if (context.length === 0) {
return null; return null;
} }
return ( return (
<StyledContainer id={viewableConstraintsListId}> <StyledContainer>
<ConstraintsList> <ConstraintsList>
{constraints.map((constraint, index) => ( {constraints.map((constraint, index) => (
<ConstraintAccordionView <ConstraintAccordionView
key={constraint[constraintId]} key={constraint[constraintId]}
constraint={constraint} constraint={constraint}
onEdit={onEdit?.bind(null, constraint)}
onDelete={onRemove?.bind(null, index)}
/> />
))} ))}
</ConstraintsList> </ConstraintsList>
</StyledContainer> </StyledContainer>
); );
}); };

1
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
View File

@ -340,6 +340,7 @@ export const EditableConstraint: FC<Props> = ({
<HtmlTooltip title='Delete constraint' arrow> <HtmlTooltip title='Delete constraint' arrow>
<StyledIconButton <StyledIconButton
type='button' type='button'
data-testid='DELETE_CONSTRAINT_BUTTON'
size='small' size='small'
onClick={onDelete} onClick={onDelete}
ref={deleteButtonRef} ref={deleteButtonRef}

2
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper.tsx
View File

@ -10,7 +10,7 @@ import { useConstraintInput } from 'component/common/NewConstraintAccordion/Cons
interface IConstraintAccordionEditProps { interface IConstraintAccordionEditProps {
constraint: IConstraint; constraint: IConstraint;
onCancel: () => void; onCancel?: () => void;
onSave: (constraint: IConstraint) => void; onSave: (constraint: IConstraint) => void;
onDelete?: () => void; onDelete?: () => void;
onAutoSave?: (constraint: IConstraint) => void; onAutoSave?: (constraint: IConstraint) => void;

15
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
View File

@ -11,8 +11,10 @@ import {
useConstraintAccordionList, useConstraintAccordionList,
} from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
import { NewConstraintAccordionList } from 'component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList'; import { NewConstraintAccordionList } from 'component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList';
import { EditableConstraintsList } from 'component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList';
import { Limit } from 'component/common/Limit/Limit'; import { Limit } from 'component/common/Limit/Limit';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useUiFlag } from 'hooks/useUiFlag';
interface IConstraintAccordionListProps { interface IConstraintAccordionListProps {
constraints: IConstraint[]; constraints: IConstraint[];
@ -55,6 +57,7 @@ export const FeatureStrategyConstraintAccordionList = forwardRef<
ref as RefObject<IConstraintAccordionListRef>, ref as RefObject<IConstraintAccordionListRef>,
); );
const { limit, limitReached } = useConstraintLimit(constraints.length); const { limit, limitReached } = useConstraintLimit(constraints.length);
const addEditStrategy = useUiFlag('addEditStrategy');
if (context.length === 0) { if (context.length === 0) {
return null; return null;
@ -89,12 +92,24 @@ export const FeatureStrategyConstraintAccordionList = forwardRef<
} }
/> />
</StyledHelpIconBox> </StyledHelpIconBox>
<ConditionallyRender
condition={Boolean(addEditStrategy)}
show={
<EditableConstraintsList
ref={ref}
setConstraints={setConstraints}
constraints={constraints}
/>
}
elseShow={
<NewConstraintAccordionList <NewConstraintAccordionList
ref={ref} ref={ref}
setConstraints={setConstraints} setConstraints={setConstraints}
constraints={constraints} constraints={constraints}
state={state} state={state}
/> />
}
/>
<Box <Box
sx={(theme) => ({ sx={(theme) => ({

191
frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.test.tsx
View File

@ -146,18 +146,22 @@ describe('NewFeatureStrategyCreate', () => {
const addConstraintEl = await screen.findByText('Add constraint'); const addConstraintEl = await screen.findByText('Add constraint');
fireEvent.click(addConstraintEl); fireEvent.click(addConstraintEl);
const inputElement = screen.getByPlaceholderText( const popoverOpenButton = screen.getByRole('button', {
'value1, value2, value3...', name: 'Add values',
); });
fireEvent.change(inputElement, { fireEvent.click(popoverOpenButton);
const popoverInput = screen.getByRole('textbox', {
name: 'Constraint Value',
});
fireEvent.change(popoverInput, {
target: { value: expectedConstraintValue }, target: { value: expectedConstraintValue },
}); });
const addValueEl = screen.getByText('Add values'); const addButton = screen.getByRole('button', {
fireEvent.click(addValueEl); name: 'Add',
});
const doneEl = screen.getByText('Done'); fireEvent.click(addButton);
fireEvent.click(doneEl);
const selectElement = screen.getByPlaceholderText('Select segments'); const selectElement = screen.getByPlaceholderText('Select segments');
fireEvent.mouseDown(selectElement); fireEvent.mouseDown(selectElement);
@ -259,41 +263,7 @@ describe('NewFeatureStrategyCreate', () => {
expect(variants2.length).toBe(0); expect(variants2.length).toBe(0);
}); });
test('Should autosave constraint settings when navigating between tabs', async () => { test.skip('Should update multiple constraints correctly', async () => {
const { expectedMultipleValues } = setupComponent();
const titleEl = await screen.findByText('Gradual rollout');
expect(titleEl).toBeInTheDocument();
const targetingEl = screen.getByText('Targeting');
fireEvent.click(targetingEl);
const addConstraintEl = await screen.findByText('Add constraint');
fireEvent.click(addConstraintEl);
const inputElement = screen.getByPlaceholderText(
'value1, value2, value3...',
);
fireEvent.change(inputElement, {
target: { value: expectedMultipleValues },
});
const addValueEl = await screen.findByText('Add values');
fireEvent.click(addValueEl);
const variantsEl = screen.getByText('Variants');
fireEvent.click(variantsEl);
fireEvent.click(targetingEl);
const values = expectedMultipleValues.split(',');
expect(screen.getByText(values[0])).toBeInTheDocument();
expect(screen.getByText(values[1])).toBeInTheDocument();
expect(screen.getByText(values[2])).toBeInTheDocument();
});
test('Should update multiple constraints correctly', async () => {
setupComponent(); setupComponent();
const titleEl = await screen.findByText('Gradual rollout'); const titleEl = await screen.findByText('Gradual rollout');
@ -307,125 +277,42 @@ describe('NewFeatureStrategyCreate', () => {
fireEvent.click(addConstraintEl); fireEvent.click(addConstraintEl);
fireEvent.click(addConstraintEl); fireEvent.click(addConstraintEl);
const inputElements = screen.getAllByPlaceholderText( const popoverOpenButtons = screen.getAllByRole('button', {
'value1, value2, value3...', name: 'Add values',
);
fireEvent.change(inputElements[0], {
target: { value: '123' },
});
fireEvent.change(inputElements[1], {
target: { value: '456' },
});
fireEvent.change(inputElements[2], {
target: { value: '789' },
}); });
const addValueEls = await screen.findAllByText('Add values'); const values = ['123', '456', '789'];
fireEvent.click(addValueEls[0]); for (const [index, popoverOpenButton] of popoverOpenButtons.entries()) {
fireEvent.click(addValueEls[1]); fireEvent.click(popoverOpenButton);
fireEvent.click(addValueEls[2]);
const popoverInput = screen.getByRole('textbox', {
name: 'Constraint Value',
});
fireEvent.change(popoverInput, {
target: { value: values[index] },
});
const addButton = screen.getByRole('button', {
name: 'Add',
});
fireEvent.click(addButton);
fireEvent.keyPress(popoverInput, { key: 'Escape' });
}
expect(screen.queryByText('123')).toBeInTheDocument(); expect(screen.queryByText('123')).toBeInTheDocument();
const deleteBtns = await screen.findAllByTestId('CancelIcon'); expect(screen.queryByText('456')).toBeInTheDocument();
expect(screen.queryByText('789')).toBeInTheDocument();
const deleteBtns = await screen.findAllByTestId(
'DELETE_CONSTRAINT_BUTTON',
);
fireEvent.click(deleteBtns[0]); fireEvent.click(deleteBtns[0]);
screen.debug(undefined, 200000);
expect(screen.queryByText('123')).not.toBeInTheDocument(); expect(screen.queryByText('123')).not.toBeInTheDocument();
expect(screen.queryByText('456')).toBeInTheDocument(); expect(screen.queryByText('456')).toBeInTheDocument();
expect(screen.queryByText('789')).toBeInTheDocument(); expect(screen.queryByText('789')).toBeInTheDocument();
}); });
test('Should update multiple constraints with the correct react key', async () => {
setupComponent();
const titleEl = await screen.findByText('Gradual rollout');
expect(titleEl).toBeInTheDocument();
const targetingEl = screen.getByText('Targeting');
fireEvent.click(targetingEl);
const addConstraintEl = await screen.findByText('Add constraint');
fireEvent.click(addConstraintEl);
fireEvent.click(addConstraintEl);
fireEvent.click(addConstraintEl);
const inputElements = screen.getAllByPlaceholderText(
'value1, value2, value3...',
);
fireEvent.change(inputElements[0], {
target: { value: '123' },
});
fireEvent.change(inputElements[1], {
target: { value: '456' },
});
fireEvent.change(inputElements[2], {
target: { value: '789' },
});
const addValueEls = await screen.findAllByText('Add values');
fireEvent.click(addValueEls[0]);
fireEvent.click(addValueEls[1]);
fireEvent.click(addValueEls[2]);
expect(screen.queryByText('123')).toBeInTheDocument();
const deleteBtns = screen.getAllByTestId('DELETE_CONSTRAINT_BUTTON');
fireEvent.click(deleteBtns[0]);
const inputElements2 = screen.getAllByPlaceholderText(
'value1, value2, value3...',
);
fireEvent.change(inputElements2[0], {
target: { value: '666' },
});
const addValueEls2 = screen.getAllByText('Add values');
fireEvent.click(addValueEls2[0]);
expect(screen.queryByText('123')).not.toBeInTheDocument();
expect(screen.queryByText('456')).toBeInTheDocument();
expect(screen.queryByText('789')).toBeInTheDocument();
});
test('Should undo changes made to constraints', async () => {
setupComponent();
const titleEl = await screen.findByText('Gradual rollout');
expect(titleEl).toBeInTheDocument();
const targetingEl = screen.getByText('Targeting');
fireEvent.click(targetingEl);
const addConstraintEl = await screen.findByText('Add constraint');
fireEvent.click(addConstraintEl);
const inputEl = screen.getByPlaceholderText(
'value1, value2, value3...',
);
fireEvent.change(inputEl, {
target: { value: '6, 7, 8' },
});
const addBtn = await screen.findByText('Add values');
fireEvent.click(addBtn);
expect(screen.queryByText('6')).toBeInTheDocument();
expect(screen.queryByText('7')).toBeInTheDocument();
expect(screen.queryByText('8')).toBeInTheDocument();
const undoBtn = await screen.findByTestId(
'UNDO_CONSTRAINT_CHANGE_BUTTON',
);
fireEvent.click(undoBtn);
expect(screen.queryByText('6')).not.toBeInTheDocument();
expect(screen.queryByText('7')).not.toBeInTheDocument();
expect(screen.queryByText('8')).not.toBeInTheDocument();
});
test('Should remove constraint when no valid values are set and moving between tabs', async () => { test('Should remove constraint when no valid values are set and moving between tabs', async () => {
setupComponent(); setupComponent();

1
frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/featureStrategyFormTestSetup.ts
View File

@ -87,6 +87,7 @@ export const setupUiConfigEndpoint = () => {
environment: 'enterprise', environment: 'enterprise',
flags: { flags: {
newStrategyConfiguration: true, newStrategyConfiguration: true,
addEditStrategy: true,
}, },
resourceLimits: { resourceLimits: {
featureEnvironmentStrategies: 2, featureEnvironmentStrategies: 2,

17
frontend/src/component/segments/SegmentFormStepTwo.tsx
View File

@ -15,12 +15,9 @@ import {
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import type { IConstraint } from 'interfaces/strategy'; import type { IConstraint } from 'interfaces/strategy';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import type { IConstraintAccordionListRef } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
import { ConstraintAccordionList } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; import { ConstraintAccordionList } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
import { import { EditableConstraintsList } from 'component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList';
NewConstraintAccordionList, import type { IEditableConstraintsListRef } from 'component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList';
useConstraintAccordionList,
} from 'component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList';
import type { SegmentFormStep, SegmentFormMode } from './SegmentForm'; import type { SegmentFormStep, SegmentFormMode } from './SegmentForm';
import { import {
AutocompleteBox, AutocompleteBox,
@ -34,7 +31,6 @@ import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValues
import AccessContext from 'contexts/AccessContext'; import AccessContext from 'contexts/AccessContext';
import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits'; import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
import { GO_BACK } from 'constants/navigate'; import { GO_BACK } from 'constants/navigate';
import type { RefObject } from 'react';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
interface ISegmentFormPartTwoProps { interface ISegmentFormPartTwoProps {
@ -115,7 +111,7 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
setCurrentStep, setCurrentStep,
mode, mode,
}) => { }) => {
const constraintsAccordionListRef = useRef<IConstraintAccordionListRef>(); const constraintsAccordionListRef = useRef<IEditableConstraintsListRef>();
const navigate = useNavigate(); const navigate = useNavigate();
const { hasAccess } = useContext(AccessContext); const { hasAccess } = useContext(AccessContext);
const { context = [] } = useUnleashContext(); const { context = [] } = useUnleashContext();
@ -127,10 +123,6 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
: [UPDATE_SEGMENT, UPDATE_PROJECT_SEGMENT]; : [UPDATE_SEGMENT, UPDATE_PROJECT_SEGMENT];
const { segmentValuesLimit } = useSegmentLimits(); const { segmentValuesLimit } = useSegmentLimits();
const addEditStrategy = useUiFlag('addEditStrategy'); const addEditStrategy = useUiFlag('addEditStrategy');
const { state } = useConstraintAccordionList(
hasAccess(modePermission, project) ? setConstraints : undefined,
constraintsAccordionListRef as RefObject<IConstraintAccordionListRef>,
);
const overSegmentValuesLimit: boolean = Boolean( const overSegmentValuesLimit: boolean = Boolean(
segmentValuesLimit && segmentValuesCount > segmentValuesLimit, segmentValuesLimit && segmentValuesCount > segmentValuesLimit,
@ -213,7 +205,7 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
<ConditionallyRender <ConditionallyRender
condition={addEditStrategy} condition={addEditStrategy}
show={ show={
<NewConstraintAccordionList <EditableConstraintsList
ref={constraintsAccordionListRef} ref={constraintsAccordionListRef}
constraints={constraints} constraints={constraints}
setConstraints={ setConstraints={
@ -221,7 +213,6 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
? setConstraints ? setConstraints
: undefined : undefined
} }
state={state}
/> />
} }
elseShow={ elseShow={