fix: make setConstraints work in editable constraints list (#9913)

Was missing implementation for addConstraint through ref.

Added it together with test.

frontend/src/component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList.tsx

@@ -1,10 +1,14 @@
 import type React from 'react';
+import { useImperativeHandle } from 'react';
 import { forwardRef } from 'react';
 import { styled } from '@mui/material';
 import type { IConstraint } from 'interfaces/strategy';
 import produce from 'immer';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
-import { constraintId } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
+import {
+    constraintId,
+    createEmptyConstraint,
+} from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
 import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList';
 import { EditableConstraintWrapper } from 'component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper';
 
@@ -29,6 +33,15 @@ export const EditableConstraintsList = forwardRef<
 >(({ constraints, setConstraints }, ref) => {
     const { context } = useUnleashContext();
 
+    useImperativeHandle(ref, () => ({
+        addConstraint(contextName: string) {
+            if (setConstraints) {
+                const constraint = createEmptyConstraint(contextName);
+                setConstraints((prev) => [...prev, constraint]);
+            }
+        },
+    }));
+
     const onRemove =
         setConstraints &&
         ((index: number) => {

frontend/src/component/segments/SegmentFormStepTwo.test.tsx

@@ -0,0 +1,67 @@
+import { render } from 'utils/testRenderer';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { SegmentFormStepTwo } from './SegmentFormStepTwo';
+import type { IConstraint } from 'interfaces/strategy';
+import { vi } from 'vitest';
+import {
+    CREATE_SEGMENT,
+    UPDATE_PROJECT_SEGMENT,
+} from 'component/providers/AccessProvider/permissions';
+
+const server = testServerSetup();
+
+const setupRoutes = () => {
+    testServerRoute(server, '/api/admin/context', [
+        { name: 'userId' },
+        { name: 'appName' },
+        { name: 'environment' },
+    ]);
+
+    testServerRoute(server, '/api/admin/ui-config', {
+        flags: {
+            addEditStrategy: true,
+        },
+    });
+};
+
+const defaultProps = {
+    project: undefined,
+    constraints: [] as IConstraint[],
+    setConstraints: vi.fn(),
+    setCurrentStep: vi.fn(),
+    mode: 'create' as const,
+};
+
+describe('SegmentFormStepTwo', () => {
+    beforeEach(() => {
+        setupRoutes();
+        defaultProps.setConstraints.mockClear();
+    });
+
+    test('adding context field through autocomplete updates constraints list', async () => {
+        const user = userEvent.setup();
+        render(<SegmentFormStepTwo {...defaultProps} />, {
+            permissions: [
+                { permission: CREATE_SEGMENT },
+                { permission: UPDATE_PROJECT_SEGMENT },
+            ],
+        });
+
+        const autocomplete =
+            await screen.findByPlaceholderText('Select a context');
+
+        await user.click(autocomplete);
+
+        await waitFor(() => {
+            expect(screen.getByText('userId')).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByText('userId'));
+
+        await waitFor(() => {
+            expect(defaultProps.setConstraints).toHaveBeenCalled();
+        });
+    });
+});