refactor: improve Esc handling in forms

cpvalente · Jan 24, 2025 · b8893db · b8893db
1 parent 38b7713
commit b8893db
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 7 deletions.
diff --git a/apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx b/apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx
@@ -11,6 +11,7 @@ import { maybeAxiosError } from '../../../../common/api/utils';
 import TooltipActionBtn from '../../../../common/components/buttons/TooltipActionBtn';
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
 import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
+import { preventEscape } from '../../../../common/utils/keyEvent';
 import { handleLinks } from '../../../../common/utils/linkUtils';
 import { validateUrlPresetPath } from '../../../../common/utils/urlPresets';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -88,7 +89,12 @@ export default function UrlPresetsForm() {
   const canSubmit = !isSubmitting && isDirty && isValid;
 
   return (
-    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} data-testid='url-preset-form'>
+    <Panel.Section
+      as='form'
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(event) => preventEscape(event, onReset)}
+      data-testid='url-preset-form'
+    >
       <Panel.Card>
         <Panel.SubHeader>
           URL presets

diff --git a/.../src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx b/.../src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx
@@ -7,6 +7,7 @@ import { customFieldLabelToKey, isAlphanumericWithSpace } from 'ontime-utils';
 import { maybeAxiosError } from '../../../../../common/api/utils';
 import SwatchSelect from '../../../../../common/components/input/colour-input/SwatchSelect';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
+import { preventEscape } from '../../../../../common/utils/keyEvent';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import style from '../FeatureSettings.module.scss';
@@ -71,7 +72,11 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
   const isEditMode = initialKey !== undefined;
 
   return (
-    <form onSubmit={handleSubmit(setupSubmit)} className={style.fieldForm}>
+    <form
+      onSubmit={handleSubmit(setupSubmit)}
+      className={style.fieldForm}
+      onKeyDown={(event) => preventEscape(event, onCancel)}
+    >
       <div className={style.twoCols}>
         <div>
           <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>

diff --git a/apps/client/src/features/app-settings/panel/general-panel/GeneralPanelForm.tsx b/apps/client/src/features/app-settings/panel/general-panel/GeneralPanelForm.tsx
@@ -6,6 +6,7 @@ import { Settings } from 'ontime-types';
 import { postSettings } from '../../../../common/api/settings';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import useSettings from '../../../../common/hooks-query/useSettings';
+import { preventEscape } from '../../../../common/utils/keyEvent';
 import { isOnlyNumbers } from '../../../../common/utils/regex';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -60,7 +61,12 @@ export default function GeneralPanelForm() {
   const isLoading = status === 'pending';
 
   return (
-    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} id='app-settings'>
+    <Panel.Section
+      as='form'
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(event) => preventEscape(event, onReset)}
+      id='app-settings'
+    >
       <Panel.Card>
         <Panel.SubHeader>
           General settings

diff --git a/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx b/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx
@@ -9,6 +9,7 @@ import ExternalLink from '../../../../common/components/external-link/ExternalLi
 import { SwatchPickerRHF } from '../../../../common/components/input/colour-input/SwatchPicker';
 import useInfo from '../../../../common/hooks-query/useInfo';
 import useViewSettings from '../../../../common/hooks-query/useViewSettings';
+import { preventEscape } from '../../../../common/utils/keyEvent';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
@@ -65,7 +66,12 @@ export default function ViewSettingsForm() {
   const isLoading = status === 'pending' || infoStatus === 'pending';
 
   return (
-    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} id='view-settings'>
+    <Panel.Section
+      as='form'
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(event) => preventEscape(event, onReset)}
+      id='view-settings'
+    >
       <Panel.Card>
         <Panel.SubHeader>
           View settings

diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
@@ -6,6 +6,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { PROJECT_LIST } from '../../../../common/api/constants';
 import { createProject } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import { preventEscape } from '../../../../common/utils/keyEvent';
 import { documentationUrl, websiteUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -66,7 +67,11 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
   };
 
   return (
-    <Panel.Section as='form' onSubmit={handleSubmit(handleSubmitCreate)}>
+    <Panel.Section
+      as='form'
+      onSubmit={handleSubmit(handleSubmitCreate)}
+      onKeyDown={(event) => preventEscape(event, onClose)}
+    >
       <Panel.Title>
         Create new project
         <Panel.InlineElements>

diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx
@@ -9,6 +9,7 @@ import { projectLogoPath } from '../../../../common/api/constants';
 import { postProjectData, uploadProjectLogo } from '../../../../common/api/project';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import useProjectData from '../../../../common/hooks-query/useProjectData';
+import { preventEscape } from '../../../../common/utils/keyEvent';
 import { validateLogo } from '../../../../common/utils/uploadUtils';
 import { documentationUrl, websiteUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -96,7 +97,7 @@ export default function ProjectData() {
   const isLoading = status === 'pending';
 
   return (
-    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}>
+    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}  onKeyDown={(event) => preventEscape(event, onReset)}>
       <Panel.Card>
         <Panel.SubHeader>
           Project data

diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectForm.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectForm.tsx
@@ -2,6 +2,9 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Input } from '@chakra-ui/react';
 
+import { preventEscape } from '../../../../common/utils/keyEvent';
+import * as Panel from '../../panel-utils/PanelUtils';
+
 import style from './ProjectPanel.module.scss';
 
 export type ProjectFormValues = {
@@ -34,7 +37,11 @@ export default function ProjectForm({ action, filename, onSubmit, onCancel }: Pr
   }, [setFocus]);
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className={style.form}>
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(event) => preventEscape(event, onCancel)}
+      className={style.form}
+    >
       <Input
         className={style.formInput}
         id='filename'