diff --git a/.changeset/flat-poets-battle.md b/.changeset/flat-poets-battle.md new file mode 100644 index 000000000..b6475e8da --- /dev/null +++ b/.changeset/flat-poets-battle.md @@ -0,0 +1,5 @@ +--- +'@orchestrator-ui/orchestrator-ui-components': patch +--- + +2355 Enable Ctrl/Cmd + Arrows to control form pages diff --git a/apps/wfo-ui b/apps/wfo-ui index bc7ced020..bd4679c38 160000 --- a/apps/wfo-ui +++ b/apps/wfo-ui @@ -1 +1 @@ -Subproject commit bc7ced02055fc56b37e1d1d694b2d774eb3f5083 +Subproject commit bd4679c388545c1e9693df687efba32dac112c97 diff --git a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/Footer.tsx b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/Footer.tsx index e1b4c5d77..0f7099a15 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/Footer.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/Footer.tsx @@ -3,7 +3,7 @@ * * Form footer component */ -import React, { useContext } from 'react'; +import React, { useContext, useEffect } from 'react'; import { useTranslations } from 'next-intl'; import type { PydanticFormFooterProps } from 'pydantic-forms'; @@ -21,6 +21,10 @@ type FooterProps = PydanticFormFooterProps & { isTask?: boolean; }; +const submitButtonId = 'button-submit-form-submit'; +const previousButtonId = 'button-submit-form-previous'; +const cancelButtonId = 'button-submit-form-cancel'; + export const Footer = ({ onCancel, onPrevious, @@ -44,6 +48,29 @@ export const Footer = ({ const { next, previous } = buttons || {}; + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + const isPrimary = event.metaKey || event.ctrlKey; + + if (isPrimary && event.key === 'ArrowLeft') { + event.preventDefault(); + + if (hasPrevious) { + onPrevious?.(); + } else { + handlePrevious(); + } + } + + if (isPrimary && event.key === 'ArrowRight') { + event.preventDefault(); + document.getElementById(submitButtonId)?.click(); + } + }; + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [hasPrevious, hasNext, onPrevious, onCancel, handlePrevious]); + const PreviousButton = () => { const previousButtonColor = theme.colors[ @@ -53,8 +80,8 @@ export const Footer = ({ return ( { @@ -76,7 +103,7 @@ export const Footer = ({ const CancelButton = () => (