From 960f0322adac17103dbc9afd6c64c75a30ee55fd Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Fri, 24 Jan 2025 16:24:13 +0100
Subject: [PATCH] refactor: improve Esc handling in forms

---
 .../panel/feature-settings-panel/UrlPresetsForm.tsx      | 8 +++++++-
 .../custom-fields/CustomFieldForm.tsx                    | 7 ++++++-
 .../panel/general-panel/GeneralPanelForm.tsx             | 8 +++++++-
 .../panel/general-panel/ViewSettingsForm.tsx             | 8 +++++++-
 .../panel/project-panel/ProjectCreateForm.tsx            | 7 ++++++-
 .../app-settings/panel/project-panel/ProjectData.tsx     | 3 ++-
 .../app-settings/panel/project-panel/ProjectForm.tsx     | 9 ++++++++-
 7 files changed, 43 insertions(+), 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
index 4368dd0ad..7385c4034 100644
--- 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/apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx b/apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx
index e2ad0c2fa..e08e4e61f 100644
--- a/apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx
+++ b/apps/client/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
index 5d67d5153..76715a38a 100644
--- 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
index 017d26640..a060b54d6 100644
--- 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
index 7e2591f57..56181c462 100644
--- 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
index 6b5071538..eda01f609 100644
--- 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
index f116b5849..ee12acb8a 100644
--- 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'