Fleet UI: Hitting enter saves new pack and saves editing a pack (#7789)

frontend/components/forms/packs/EditPackForm/EditPackForm.tsx

@@ -79,7 +79,9 @@ const EditPackForm = ({
     setPackFormTargets(value);
   };
 
-  const onFormSubmit = (): void => {
+  const onFormSubmit = (evt: React.FormEvent<HTMLFormElement>): void => {
+    evt.preventDefault();
+
     if (packName === "") {
       return setErrors({
         ...errors,
@@ -140,7 +142,7 @@ const EditPackForm = ({
           Cancel
         </Button>
         <Button
-          onClick={onFormSubmit}
+          type="submit"
           variant="brand"
           className="save-loading"
           isLoading={isUpdatingPack}

frontend/components/forms/packs/PackForm/PackForm.tsx

@@ -54,7 +54,9 @@ const EditPackForm = ({
     setPackFormTargets(value);
   };
 
-  const onFormSubmit = (): void => {
+  const onFormSubmit = (evt: React.FormEvent<HTMLFormElement>): void => {
+    evt.preventDefault();
+
     if (packName === "") {
       return setErrors({
         ...errors,
@@ -113,11 +115,7 @@ const EditPackForm = ({
           />
         </div>
         <div className={`${baseClass}__pack-buttons`}>
-          <Button
-            onClick={onFormSubmit}
-            variant="brand"
-            isLoading={isUpdatingPack}
-          >
+          <Button type="submit" variant="brand" isLoading={isUpdatingPack}>
             Save query pack
           </Button>
         </div>

frontend/pages/policies/ManagePoliciesPage/components/PreviewPayloadModal/PreviewPayloadModal.tsx

@@ -43,7 +43,12 @@ const PreviewPayloadModal = ({
   };
 
   return (
-    <Modal title={"Example payload"} onExit={onCancel} className={baseClass}>
+    <Modal
+      title={"Example payload"}
+      onExit={onCancel}
+      onEnter={onCancel}
+      className={baseClass}
+    >
       <div className={`${baseClass}__preview-modal`}>
         <p>
           Want to learn more about how automations in Fleet work?{" "}

frontend/pages/software/ManageSoftwarePage/components/PreviewPayloadModal/PreviewPayloadModal.tsx

@@ -53,7 +53,12 @@ const PreviewPayloadModal = ({
   }
 
   return (
-    <Modal title={"Example payload"} onExit={onCancel} className={baseClass}>
+    <Modal
+      title={"Example payload"}
+      onExit={onCancel}
+      onEnter={onCancel}
+      className={baseClass}
+    >
       <div className={`${baseClass}__preview-modal`}>
         <p>
           Want to learn more about how automations in Fleet work?{" "}