chore: fix demo by adapting to new constraints flow

frontend/src/component/demo/DemoSteps/DemoSteps.tsx

@@ -139,6 +139,14 @@ export const DemoSteps = ({
                     }
                 }
 
+                step.onStep?.({
+                    el,
+                    index,
+                    next,
+                    step,
+                    signal: abortController.signal,
+                });
+
                 if (!step.nextButton) {
                     const clickHandler = (e: Event) => {
                         abortController.abort();

frontend/src/component/demo/demo-topics.tsx

@@ -12,6 +12,13 @@ export interface ITutorialTopicStep extends Step {
     backCloseModal?: boolean;
     backCollapseExpanded?: boolean;
     preventDefault?: boolean;
+    onStep?: (params: {
+        el: HTMLElement;
+        index: number;
+        next: (i?: number) => void;
+        step: ITutorialTopicStep;
+        signal: AbortSignal;
+    }) => void;
     anyClick?: boolean;
     optional?: boolean;
     focus?: boolean | string;
@@ -246,6 +253,16 @@ export const TOPICS: ITutorialTopic[] = [
                 placement: 'right',
                 backCloseModal: true,
             },
+            {
+                title: 'Add constraint value',
+                target: 'button[data-testid="CONSTRAINT_ADD_VALUES_BUTTON"]',
+                content: (
+                    <Description>
+                        Add a new constraint value by using this button.
+                    </Description>
+                ),
+                optional: true,
+            },
             {
                 title: 'Input value',
                 target: 'div[data-testid="CONSTRAINT_VALUES_INPUT"]',
@@ -273,15 +290,29 @@ export const TOPICS: ITutorialTopic[] = [
                 placement: 'right',
                 nextButton: true,
                 focus: 'input',
+                onStep: ({ el, next, index, signal }) => {
+                    const input = el.querySelector('input');
+
+                    input?.addEventListener(
+                        'keydown',
+                        (e) => {
+                            if (e.key === 'Enter' && input.value.trim()) {
+                                next(index);
+                            }
+                        },
+                        { signal },
+                    );
+                },
             },
             {
                 title: 'Add value',
-                target: 'button[data-testid="CONSTRAINT_VALUES_ADD_BUTTON"]',
+                target: 'button[data-testid="CONSTRAINT_VALUES_ADD_BUTTON"]:not(:disabled)',
                 content: (
                     <Description>
                         Add the constraint value by using this button.
                     </Description>
                 ),
+                optional: true,
             },
             {
                 title: 'Save constraint setup',
@@ -623,6 +654,16 @@ export const TOPICS: ITutorialTopic[] = [
                 placement: 'right',
                 backCloseModal: true,
             },
+            {
+                title: 'Add constraint value',
+                target: 'button[data-testid="CONSTRAINT_ADD_VALUES_BUTTON"]',
+                content: (
+                    <Description>
+                        Add a new constraint value by using this button.
+                    </Description>
+                ),
+                optional: true,
+            },
             {
                 title: 'Input value',
                 target: 'div[data-testid="CONSTRAINT_VALUES_INPUT"]',
@@ -650,15 +691,29 @@ export const TOPICS: ITutorialTopic[] = [
                 placement: 'right',
                 nextButton: true,
                 focus: 'input',
+                onStep: ({ el, next, index, signal }) => {
+                    const input = el.querySelector('input');
+
+                    input?.addEventListener(
+                        'keydown',
+                        (e) => {
+                            if (e.key === 'Enter' && input.value.trim()) {
+                                next(index);
+                            }
+                        },
+                        { signal },
+                    );
+                },
             },
             {
                 title: 'Add value',
-                target: 'button[data-testid="CONSTRAINT_VALUES_ADD_BUTTON"]',
+                target: 'button[data-testid="CONSTRAINT_VALUES_ADD_BUTTON"]:not(:disabled)',
                 content: (
                     <Description>
                         Add the constraint value by using this button.
                     </Description>
                 ),
+                optional: true,
             },
             {
                 title: 'Save constraint setup',

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesPopover.tsx

@@ -130,6 +130,7 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
                         inputProps={{
                             ...inputProps,
                         }}
+                        data-testid='CONSTRAINT_VALUES_INPUT'
                     />
                     <AddButton
                         variant='text'
@@ -137,6 +138,7 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
                         size='small'
                         color='primary'
                         disabled={!inputValue?.trim()}
+                        data-testid='CONSTRAINT_VALUES_ADD_BUTTON'
                     >
                         Add
                     </AddButton>

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesWidget.tsx

@@ -74,6 +74,7 @@ export const AddValuesWidget = forwardRef<HTMLButtonElement, AddValuesProps>(
                     ref={positioningRef}
                     onClick={() => setOpen(true)}
                     type='button'
+                    data-testid='CONSTRAINT_ADD_VALUES_BUTTON'
                 >
                     <Add />
                     <span>Add values</span>