[GEN-1966]: submit forms on press "enter", resolves issue #543 (#1967)

This pull request introduces enhancements to several modal components in the frontend web application by adding a new `useKeyDown` hook to handle 'Enter' key submissions. The changes ensure a more consistent user experience across different modals by allowing form submissions via the 'Enter' key. Key changes include: ### Enhancements to modal components: * [`frontend/webapp/containers/main/actions/action-modal/index.tsx`](diffhunk://#diff-91a7e6637c5f6642f68e8b0c5d326cda0275e9d6835521b94c686a13c581900eR3): Added `useKeyDown` hook to handle 'Enter' key submissions for the `ActionModal` component. [[1]](diffhunk://#diff-91a7e6637c5f6642f68e8b0c5d326cda0275e9d6835521b94c686a13c581900eR3) [[2]](diffhunk://#diff-91a7e6637c5f6642f68e8b0c5d326cda0275e9d6835521b94c686a13c581900eL15-R20) [[3]](diffhunk://#diff-91a7e6637c5f6642f68e8b0c5d326cda0275e9d6835521b94c686a13c581900eL36) * [`frontend/webapp/containers/main/destinations/destination-modal/index.tsx`](diffhunk://#diff-abafe53761371d28f6f0a3ad30eaa63cf5232f7fd16ac6a6bf3c266e77439c99L9-R10): Integrated `useKeyDown` hook for the `DestinationModal` component to enable 'Enter' key submissions. [[1]](diffhunk://#diff-abafe53761371d28f6f0a3ad30eaa63cf5232f7fd16ac6a6bf3c266e77439c99L9-R10) [[2]](diffhunk://#diff-abafe53761371d28f6f0a3ad30eaa63cf5232f7fd16ac6a6bf3c266e77439c99R33-L36) * [`frontend/webapp/containers/main/instrumentation-rules/rule-modal/index.tsx`](diffhunk://#diff-183ce38153926d5ca73d74249c98e035a00de4a376645a10bc098c181636c501L6-R6): Implemented `useKeyDown` hook for the `RuleModal` component to manage 'Enter' key submissions. [[1]](diffhunk://#diff-183ce38153926d5ca73d74249c98e035a00de4a376645a10bc098c181636c501L6-R6) [[2]](diffhunk://#diff-183ce38153926d5ca73d74249c98e035a00de4a376645a10bc098c181636c501L15-R19) [[3]](diffhunk://#diff-183ce38153926d5ca73d74249c98e035a00de4a376645a10bc098c181636c501L35) * [`frontend/webapp/containers/main/overview/overview-drawer/index.tsx`](diffhunk://#diff-732721edf7c32d883ffefa52d6e43339c6ee328c88c3cb5f0d87f6760347b599L7-R9): Applied `useKeyDown` hook to handle 'Enter' key actions in the `OverviewDrawer` component. [[1]](diffhunk://#diff-732721edf7c32d883ffefa52d6e43339c6ee328c88c3cb5f0d87f6760347b599L7-R9) [[2]](diffhunk://#diff-732721edf7c32d883ffefa52d6e43339c6ee328c88c3cb5f0d87f6760347b599R38-L41) * [`frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx`](diffhunk://#diff-2de6982f9ae22619e89eda6e002fd17bb887b0625bbd4281c7a778c352642979L3-R17): Added `useKeyDown` hook for 'Enter' key submissions in the `AddSourceModal` component. [[1]](diffhunk://#diff-2de6982f9ae22619e89eda6e002fd17bb887b0625bbd4281c7a778c352642979L3-R17) [[2]](diffhunk://#diff-2de6982f9ae22619e89eda6e002fd17bb887b0625bbd4281c7a778c352642979L31-R33)
odigos-io · Dec 10, 2024 · 12c283c · 12c283c
1 parent 53d7580
commit 12c283c
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 13 deletions.
diff --git a/frontend/webapp/containers/main/actions/action-modal/index.tsx b/frontend/webapp/containers/main/actions/action-modal/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { ACTION } from '@/utils';
+import { useKeyDown } from '@/hooks';
 import { ActionFormBody } from '../';
 import { CenterThis, ModalBody } from '@/styles';
 import { useActionCRUD, useActionFormData } from '@/hooks/actions';
@@ -12,8 +13,11 @@ interface Props {
 }
 
 export const ActionModal: React.FC<Props> = ({ isOpen, onClose }) => {
-  const { formData, formErrors, handleFormChange, resetFormData, validateForm } = useActionFormData();
+  useKeyDown({ key: 'Enter', active: isOpen }, () => handleSubmit());
+
   const { createAction, loading } = useActionCRUD({ onSuccess: handleClose });
+  const { formData, formErrors, handleFormChange, resetFormData, validateForm } = useActionFormData();
+
   const [selectedItem, setSelectedItem] = useState<ActionOption | undefined>(undefined);
 
   function handleClose() {
@@ -33,7 +37,6 @@ export const ActionModal: React.FC<Props> = ({ isOpen, onClose }) => {
     if (!isFormOk) return null;
 
     await createAction(formData);
-
     handleClose();
   };
 

diff --git a/frontend/webapp/containers/main/destinations/destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/destination-modal/index.tsx
@@ -6,8 +6,8 @@ import { SideMenu } from '@/components';
 import { ACTION, INPUT_TYPES } from '@/utils';
 import { DestinationFormBody } from '../destination-form-body';
 import { ChooseDestinationBody } from './choose-destination-body';
-import { useDestinationCRUD, useDestinationFormData } from '@/hooks';
 import type { ConfiguredDestination, DestinationTypeItem } from '@/types';
+import { useDestinationCRUD, useDestinationFormData, useKeyDown } from '@/hooks';
 import { Modal, type NavigationButtonProps, NavigationButtons } from '@/reuseable-components';
 
 interface AddDestinationModalProps {
@@ -30,10 +30,12 @@ const SideMenuWrapper = styled.div`
 `;
 
 export const DestinationModal: React.FC<AddDestinationModalProps> = ({ isOnboarding, isOpen, onClose }) => {
+  useKeyDown({ key: 'Enter', active: isOpen }, () => handleSubmit());
+
   const [selectedItem, setSelectedItem] = useState<DestinationTypeItem | undefined>();
 
+  const { addConfiguredDestination } = useAppStore();
   const { createDestination, loading } = useDestinationCRUD();
-  const addConfiguredDestination = useAppStore(({ addConfiguredDestination }) => addConfiguredDestination);
   const { formData, formErrors, handleFormChange, resetFormData, validateForm, dynamicFields, setDynamicFields } = useDestinationFormData({
     supportedSignals: selectedItem?.supportedSignals,
     preLoadedFields: selectedItem?.fields,

diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-modal/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-modal/index.tsx
@@ -3,7 +3,7 @@ import { ACTION } from '@/utils';
 import { RuleFormBody } from '../';
 import { CenterThis, ModalBody } from '@/styles';
 import { RULE_OPTIONS, RuleOption } from './rule-options';
-import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData } from '@/hooks';
+import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData, useKeyDown } from '@/hooks';
 import { AutocompleteInput, Divider, FadeLoader, Modal, NavigationButtons, NotificationNote, SectionTitle } from '@/reuseable-components';
 
 interface Props {
@@ -12,8 +12,11 @@ interface Props {
 }
 
 export const RuleModal: React.FC<Props> = ({ isOpen, onClose }) => {
-  const { formData, formErrors, handleFormChange, resetFormData, validateForm } = useInstrumentationRuleFormData();
+  useKeyDown({ key: 'Enter', active: isOpen }, () => handleSubmit());
+
   const { createInstrumentationRule, loading } = useInstrumentationRuleCRUD({ onSuccess: handleClose });
+  const { formData, formErrors, handleFormChange, resetFormData, validateForm } = useInstrumentationRuleFormData();
+
   const [selectedItem, setSelectedItem] = useState<RuleOption | undefined>(RULE_OPTIONS[0]);
 
   function handleClose() {
@@ -32,7 +35,6 @@ export const RuleModal: React.FC<Props> = ({ isOpen, onClose }) => {
     if (!isFormOk) return null;
 
     await createInstrumentationRule(formData);
-
     handleClose();
   };
 

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -4,9 +4,9 @@ import { useDrawerStore } from '@/store';
 import DrawerFooter from './drawer-footer';
 import { Drawer } from '@/reuseable-components';
 import { OVERVIEW_ENTITY_TYPES } from '@/types';
-import { useDestinationCRUD, useSourceCRUD } from '@/hooks';
 import DrawerHeader, { DrawerHeaderRef } from './drawer-header';
 import { CancelWarning, DeleteWarning } from '@/components/modals';
+import { useDestinationCRUD, useKeyDown, useSourceCRUD } from '@/hooks';
 
 const DRAWER_WIDTH = `${640 + 64}px`; // +64 because of "ContentArea" padding
 
@@ -35,10 +35,12 @@ const ContentArea = styled.div`
 `;
 
 const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title, titleTooltip, imageUri, isEdit, isFormDirty, onEdit, onSave, onDelete, onCancel }) => {
+  const { selectedItem, setSelectedItem } = useDrawerStore();
+
+  useKeyDown({ key: 'Enter', active: !!selectedItem }, () => (isEdit ? clickSave() : closeDrawer()));
+
   const { sources } = useSourceCRUD();
   const { destinations } = useDestinationCRUD();
-  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
-  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
 
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);

diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
@@ -1,18 +1,20 @@
 import React from 'react';
 import { ChooseSourcesBody } from '../choose-sources-body';
-import { useSourceCRUD, useSourceFormData } from '@/hooks';
 import { Modal, NavigationButtons } from '@/reuseable-components';
+import { useKeyDown, useSourceCRUD, useSourceFormData } from '@/hooks';
 
 interface Props {
   isOpen: boolean;
   onClose: () => void;
 }
 
 export const AddSourceModal: React.FC<Props> = ({ isOpen, onClose }) => {
+  useKeyDown({ key: 'Enter', active: isOpen }, () => handleSubmit());
+
   const menuState = useSourceFormData();
   const { createSources } = useSourceCRUD({ onSuccess: onClose });
 
-  const handleNextClick = async () => {
+  const handleSubmit = async () => {
     const { selectedSources, selectedFutureApps } = menuState;
 
     await createSources(selectedSources, selectedFutureApps);
@@ -28,7 +30,7 @@ export const AddSourceModal: React.FC<Props> = ({ isOpen, onClose }) => {
           buttons={[
             {
               label: 'DONE',
-              onClick: handleNextClick,
+              onClick: handleSubmit,
               variant: 'primary',
             },
           ]}