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