feat(dashboard): Submit forms on Cmd + Enter (medusajs#9623)

**What**
- Changes all forms to only submit on Cmd/Ctrl + Enter instead of just Enter.
- Cleans up the position of submit/cancel buttons in many FocusModals that still had them in the header.
- Fixes responsiveness of multiple forms
- Removes the SplitView component, and replaces its usages with StackedDrawer/Modal to align the UX across the project.

Resolves CC-103, CC-535

packages/admin/dashboard/src/components/forms/metadata-form/metadata-form.tsx

@@ -24,6 +24,7 @@ import { Form } from "../../common/form"
 import { InlineTip } from "../../common/inline-tip"
 import { Skeleton } from "../../common/skeleton"
 import { RouteDrawer, useRouteModal } from "../../modals"
+import { KeyboundForm } from "../../utilities/keybound-form"
 
 type MetaDataSubmitHook<TRes> = (
   params: { metadata?: Record<string, any> | null },
@@ -125,7 +126,7 @@ const InnerForm = <TRes,>({
 
   return (
     <RouteDrawer.Form form={form}>
-      <form
+      <KeyboundForm
         onSubmit={handleSubmit}
         className="flex flex-1 flex-col overflow-hidden"
       >
@@ -277,7 +278,7 @@ const InnerForm = <TRes,>({
             </Button>
           </div>
         </RouteDrawer.Footer>
-      </form>
+      </KeyboundForm>
     </RouteDrawer.Form>
   )
 }

packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx

@@ -32,7 +32,7 @@ import {
 } from "react"
 import { useTranslation } from "react-i18next"
 
-import { genericForwardRef } from "../../common/generic-forward-ref"
+import { genericForwardRef } from "../../utilities/generic-forward-ref"
 
 type ComboboxOption = {
   value: string

packages/admin/dashboard/src/components/utilities/keybound-form/index.ts

@@ -0,0 +1 @@
+export * from "./keybound-form"

packages/admin/dashboard/src/components/utilities/keybound-form/keybound-form.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+/**
+ * A form that can only be submitted when using the meta or control key.
+ */
+export const KeyboundForm = React.forwardRef<
+  HTMLFormElement,
+  React.FormHTMLAttributes<HTMLFormElement>
+>(({ onSubmit, onKeyDown, ...rest }, ref) => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    onSubmit?.(event)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLFormElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault()
+
+      if (event.metaKey || event.ctrlKey) {
+        handleSubmit(event)
+      }
+    }
+  }
+
+  return (
+    <form
+      {...rest}
+      onSubmit={handleSubmit}
+      onKeyDown={onKeyDown ?? handleKeyDown}
+      ref={ref}
+    />
+  )
+})
+
+KeyboundForm.displayName = "KeyboundForm"

packages/admin/dashboard/src/components/utilities/visually-hidden/index.ts

@@ -0,0 +1 @@
+export * from "./visually-hidden"

packages/admin/dashboard/src/components/utilities/visually-hidden/visually-hidden.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react"
+
+export const VisuallyHidden = ({ children }: PropsWithChildren) => {
+  return <span className="sr-only">{children}</span>
+}

packages/admin/dashboard/src/i18n/translations/en.json

@@ -1877,6 +1877,7 @@
     },
     "edit": {
       "header": "Edit Campaign",
+      "description": "Edit the details of the campaign.",
       "successToast": "Campaign '{{name}}' was successfully updated."
     },
     "configuration": {
@@ -1888,6 +1889,8 @@
       }
     },
     "create": {
+      "title": "Create Campaign",
+      "description": "Create a promotional campaign.",
       "hint": "Create a promotional campaign.",
       "header": "Create Campaign",
       "successToast": "Campaign '{{name}}' was successfully created."
@@ -2301,9 +2304,12 @@
     },
     "edit": {
       "header": "Edit API Key",
+      "description": "Edit the API key's title.",
       "successToast": "API key {{title}} was successfully updated."
     },
     "salesChannels": {
+      "title": "Add Sales Channels",
+      "description": "Add the sales channels that the API key should be limited to.",
       "successToast_one": "{{count}} sales channel was successfully added to the API key.",
       "successToast_other": "{{count}} sales channels were successfully added to the API key.",
       "alreadyAddedTooltip": "The sales channel has already been added to the API key.",

packages/admin/dashboard/src/routes/api-key-management/api-key-management-create/components/api-key-create-form/api-key-create-form.tsx

@@ -12,6 +12,7 @@ import {
   RouteFocusModal,
   useRouteModal,
 } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useCreateApiKey } from "../../../../../hooks/api/api-keys"
 import { ApiKeyType } from "../../../common/constants"
 
@@ -97,36 +98,29 @@ export const ApiKeyCreateForm = ({ keyType }: ApiKeyCreateFormProps) => {
   return (
     <Fragment>
       <RouteFocusModal.Form form={form}>
-        <form
+        <KeyboundForm
           className="flex h-full flex-col overflow-hidden"
           onSubmit={handleSubmit}
         >
-          <RouteFocusModal.Header>
-            <div className="flex items-center justify-end gap-x-2">
-              <RouteFocusModal.Close asChild>
-                <Button size="small" variant="secondary">
-                  {t("actions.cancel")}
-                </Button>
-              </RouteFocusModal.Close>
-              <Button size="small" type="submit" isLoading={isPending}>
-                {t("actions.save")}
-              </Button>
-            </div>
-          </RouteFocusModal.Header>
+          <RouteFocusModal.Header />
           <RouteFocusModal.Body className="flex flex-1 flex-col overflow-hidden">
             <div className="flex flex-1 flex-col items-center overflow-y-auto">
               <div className="flex w-full max-w-[720px] flex-col gap-y-8 px-2 py-16">
                 <div>
-                  <Heading>
-                    {keyType === ApiKeyType.PUBLISHABLE
-                      ? t("apiKeyManagement.create.createPublishableHeader")
-                      : t("apiKeyManagement.create.createSecretHeader")}
-                  </Heading>
-                  <Text size="small" className="text-ui-fg-subtle">
-                    {keyType === ApiKeyType.PUBLISHABLE
-                      ? t("apiKeyManagement.create.createPublishableHint")
-                      : t("apiKeyManagement.create.createSecretHint")}
-                  </Text>
+                  <RouteFocusModal.Title asChild>
+                    <Heading>
+                      {keyType === ApiKeyType.PUBLISHABLE
+                        ? t("apiKeyManagement.create.createPublishableHeader")
+                        : t("apiKeyManagement.create.createSecretHeader")}
+                    </Heading>
+                  </RouteFocusModal.Title>
+                  <RouteFocusModal.Description asChild>
+                    <Text size="small" className="text-ui-fg-subtle">
+                      {keyType === ApiKeyType.PUBLISHABLE
+                        ? t("apiKeyManagement.create.createPublishableHint")
+                        : t("apiKeyManagement.create.createSecretHint")}
+                    </Text>
+                  </RouteFocusModal.Description>
                 </div>
                 <div className="grid grid-cols-2 gap-4">
                   <Form.Field
@@ -148,7 +142,19 @@ export const ApiKeyCreateForm = ({ keyType }: ApiKeyCreateFormProps) => {
               </div>
             </div>
           </RouteFocusModal.Body>
-        </form>
+          <RouteFocusModal.Footer>
+            <div className="flex items-center justify-end gap-x-2">
+              <RouteFocusModal.Close asChild>
+                <Button size="small" variant="secondary">
+                  {t("actions.cancel")}
+                </Button>
+              </RouteFocusModal.Close>
+              <Button size="small" type="submit" isLoading={isPending}>
+                {t("actions.save")}
+              </Button>
+            </div>
+          </RouteFocusModal.Footer>
+        </KeyboundForm>
       </RouteFocusModal.Form>
       <Prompt variant="confirmation" open={!!createdKey}>
         <Prompt.Content className="w-fit max-w-[42.5%]">

packages/admin/dashboard/src/routes/api-key-management/api-key-management-edit/api-key-management-edit.tsx

@@ -2,6 +2,7 @@ import { Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { useParams } from "react-router-dom"
 import { RouteDrawer } from "../../../components/modals"
+import { VisuallyHidden } from "../../../components/utilities/visually-hidden"
 import { useApiKey } from "../../../hooks/api/api-keys"
 import { EditApiKeyForm } from "./components/edit-api-key-form"
 
@@ -18,7 +19,14 @@ export const ApiKeyManagementEdit = () => {
   return (
     <RouteDrawer>
       <RouteDrawer.Header>
-        <Heading>{t("apiKeyManagement.edit.header")}</Heading>
+        <RouteDrawer.Title asChild>
+          <Heading>{t("apiKeyManagement.edit.header")}</Heading>
+        </RouteDrawer.Title>
+        <RouteDrawer.Description asChild>
+          <VisuallyHidden>
+            {t("apiKeyManagement.edit.description")}
+          </VisuallyHidden>
+        </RouteDrawer.Description>
       </RouteDrawer.Header>
       {!isLoading && !!api_key && <EditApiKeyForm apiKey={api_key} />}
     </RouteDrawer>

packages/admin/dashboard/src/routes/api-key-management/api-key-management-edit/components/edit-api-key-form/edit-api-key-form.tsx

@@ -7,6 +7,7 @@ import * as zod from "zod"
 import { ApiKeyDTO } from "@medusajs/types"
 import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdateApiKey } from "../../../../../hooks/api/api-keys"
 
 type EditApiKeyFormProps = {
@@ -48,7 +49,7 @@ export const EditApiKeyForm = ({ apiKey }: EditApiKeyFormProps) => {
 
   return (
     <RouteDrawer.Form form={form}>
-      <form onSubmit={handleSubmit} className="flex flex-1 flex-col">
+      <KeyboundForm onSubmit={handleSubmit} className="flex flex-1 flex-col">
         <RouteDrawer.Body>
           <div className="flex flex-col gap-y-4">
             <Form.Field
@@ -80,7 +81,7 @@ export const EditApiKeyForm = ({ apiKey }: EditApiKeyFormProps) => {
             </Button>
           </div>
         </RouteDrawer.Footer>
-      </form>
+      </KeyboundForm>
     </RouteDrawer.Form>
   )
 }