diff --git a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
index 87e8bd908a..a6bda7eebe 100644
--- a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
+++ b/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();
diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx
index c6e2dac993..767e61408a 100644
--- a/frontend/src/component/demo/demo-topics.tsx
+++ b/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: (
+
+ Add a new constraint value by using this button.
+
+ ),
+ 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: (
Add the constraint value by using this button.
),
+ 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: (
+
+ Add a new constraint value by using this button.
+
+ ),
+ 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: (
Add the constraint value by using this button.
),
+ optional: true,
},
{
title: 'Save constraint setup',
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesPopover.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesPopover.tsx
index 1b441077d6..6c84e92b86 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesPopover.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesPopover.tsx
@@ -130,6 +130,7 @@ export const AddValuesPopover: FC = ({
inputProps={{
...inputProps,
}}
+ data-testid='CONSTRAINT_VALUES_INPUT'
/>
= ({
size='small'
color='primary'
disabled={!inputValue?.trim()}
+ data-testid='CONSTRAINT_VALUES_ADD_BUTTON'
>
Add
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesWidget.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesWidget.tsx
index 52dc0ed1a8..cb24686b70 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesWidget.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesWidget.tsx
@@ -74,6 +74,7 @@ export const AddValuesWidget = forwardRef(
ref={positioningRef}
onClick={() => setOpen(true)}
type='button'
+ data-testid='CONSTRAINT_ADD_VALUES_BUTTON'
>
Add values