diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx index 8a8647f392..4638a3dea3 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx @@ -134,10 +134,6 @@ export const ConstraintAccordionEdit = ({ if (onAutoSave) { onAutoSave(localConstraint); } - - if (onAutoSave && localConstraint.value) { - onAutoSave(localConstraint); - } }; const recordChange = (localConstraint: IConstraint) => { @@ -233,7 +229,7 @@ export const ConstraintAccordionEdit = ({ setValuesWithRecord(valueCopy); }, - [localConstraint, setValues], + [localConstraint, setValuesWithRecord], ); const triggerTransition = () => { diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx index 5cbe4847fb..53569a1740 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx @@ -157,6 +157,7 @@ const ConstraintValueChips = ({ key={`${value}-${index}`} onDelete={() => removeValue(index)} className={styles.valueChip} + data-testid='CONSTRAINT_VALUES_CHIP' /> ); })} diff --git a/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx b/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx index 3734e970d4..be19f38377 100644 --- a/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx @@ -74,6 +74,7 @@ export const useConstraintAccordionList = ( | undefined, ref: React.RefObject, ) => { + // Constraint metadata: This is a weak map to give a constraint an ID by using the placement in memory. const state = useWeakMap(); const { context } = useUnleashContext(); @@ -97,80 +98,6 @@ export const useConstraintAccordionList = ( return { onAdd, state, context }; }; - -export const ConstraintAccordionList = forwardRef< - IConstraintAccordionListRef | undefined, - IConstraintAccordionListProps ->( - ( - { constraints, setConstraints, showCreateButton, showLabel = true }, - ref, - ) => { - const { onAdd, state, context } = useConstraintAccordionList( - setConstraints, - ref as RefObject, - ); - - if (context.length === 0) { - return null; - } - - return ( - - 0 && showLabel - } - show={ - - Constraints - - } - /> - - - -

Add any number of constraints

- - - - - -
- - - } - /> -
- ); - }, -); - interface IConstraintList { constraints: IConstraint[]; setConstraints?: React.Dispatch>; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraints.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraints.tsx index 793b255cc8..79b9cd6ea2 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraints.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraints.tsx @@ -47,14 +47,15 @@ export const FeatureStrategyConstraints = ({ }; }, []); - const constraints = useMemo(() => { - return strategy.constraints ?? []; - }, [strategy]); + const constraints = strategy.constraints || []; const setConstraints = (value: React.SetStateAction) => { setStrategy((prev) => ({ ...prev, - constraints: value instanceof Function ? value(constraints) : value, + constraints: + value instanceof Function + ? value(prev.constraints || []) + : value, })); }; diff --git a/frontend/src/component/feature/FeatureStrategy/NewFeatureStrategyCreate/NewFeatureStrategyCreate.test.tsx b/frontend/src/component/feature/FeatureStrategy/NewFeatureStrategyCreate/NewFeatureStrategyCreate.test.tsx index 9827583a84..54c0fc2970 100644 --- a/frontend/src/component/feature/FeatureStrategy/NewFeatureStrategyCreate/NewFeatureStrategyCreate.test.tsx +++ b/frontend/src/component/feature/FeatureStrategy/NewFeatureStrategyCreate/NewFeatureStrategyCreate.test.tsx @@ -277,6 +277,48 @@ describe('NewFeatureStrategyCreate', () => { expect(screen.getByText(values[2])).toBeInTheDocument(); }); + test('Should update multiple constraints correctly', 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 = await screen.findAllByTestId('CancelIcon'); + fireEvent.click(deleteBtns[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();