feat: submit forms on press "enter", resolves odigos-io#543

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();
   };
 

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,

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();
   };
 

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);

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',
             },
           ]}