Skip to content

2355 Enable Ctrl/Cmd + Arrows to control form pages #2379

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Georgi2704 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

2355 Enable Ctrl/Cmd + Arrows to control form pages #2379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/flat-poets-battle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@orchestrator-ui/orchestrator-ui-components': patch
---

2355 Enable Ctrl/Cmd + Arrows to control form pages
2 changes: 1 addition & 1 deletion apps/wfo-ui
Open in desktop
Submodule wfo-ui updated 4 files
+68 −68 .github/workflows/lint-test-build.yml
+487 −166 package-lock.json
+1 −1 package.json
+2 −1 pages/api/copilotkit.ts
39 changes: 33 additions & 6 deletions packages/orchestrator-ui-components/src/components/WfoPydanticForm/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -21,6 +21,10 @@
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,
Expand All @@ -33,7 +37,7 @@
const t = useTranslations('pydanticForms.userInputForm');
const { showConfirmDialog } = useContext(ConfirmationDialogContext);

const handlePrevious = () => {

Check warning on line 40 in packages/orchestrator-ui-components/src/components/WfoPydanticForm/Footer.tsx

View workflow job for this annotation

GitHub Actions / linting-and-prettier 

The 'handlePrevious' function makes the dependencies of useEffect Hook (at line 72) change on every render. To fix this, wrap the definition of 'handlePrevious' in its own useCallback() Hook
if (onCancel) {
showConfirmDialog({
question: t('previousQuestion'),
Expand All @@ -44,6 +48,29 @@

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[
Expand All @@ -53,8 +80,8 @@

return (
<EuiButton
data-testid="button-submit-form-previous"
id="button-submit-form-submit"
data-testid={previousButtonId}
id={previousButtonId}
tabIndex={0}
fill
onClick={() => {
Expand All @@ -76,7 +103,7 @@

const CancelButton = () => (
<div
data-testid="button-submit-form-cancel"
data-testid={cancelButtonId}
onClick={handlePrevious}
css={{
cursor: 'pointer',
Expand Down Expand Up @@ -120,8 +147,8 @@

return (
<EuiButton
data-testid="button-submit-form-submit"
id="button-submit-form-submit"
data-testid={submitButtonId}
id={submitButtonId}
tabIndex={0}
fill
css={{
Expand Down
Loading