consistent dialogs

Author: ctate

components/settings/api-keys-dialog.tsx

@@ -253,25 +253,38 @@ export function ApiKeysDialog({ open, onOpenChange }: ApiKeysDialogProps) {
               Create a new API key for webhook authentication
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="key-name">Label (optional)</Label>
-              <Input
-                id="key-name"
-                onChange={(e) => setNewKeyName(e.target.value)}
-                placeholder="e.g., Production, Testing"
-                value={newKeyName}
-              />
+          <form
+            id="create-api-key-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleCreate();
+            }}
+          >
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <Label htmlFor="key-name">Label (optional)</Label>
+                <Input
+                  id="key-name"
+                  onChange={(e) => setNewKeyName(e.target.value)}
+                  placeholder="e.g., Production, Testing"
+                  value={newKeyName}
+                />
+              </div>
             </div>
-          </div>
+          </form>
           <DialogFooter>
             <Button
               onClick={() => setShowCreateDialog(false)}
+              type="button"
               variant="outline"
             >
               Cancel
             </Button>
-            <Button disabled={creating} onClick={handleCreate}>
+            <Button
+              disabled={creating}
+              form="create-api-key-form"
+              type="submit"
+            >
               {creating ? <Spinner className="mr-2 size-4" /> : null}
               Create
             </Button>

components/settings/index.tsx

@@ -83,21 +83,36 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
             <Spinner />
           </div>
         ) : (
-          <div className="mt-4">
+          <form
+            className="mt-4"
+            id="settings-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              saveAccount();
+            }}
+          >
             <AccountSettings
               accountEmail={accountEmail}
               accountName={accountName}
               onEmailChange={setAccountEmail}
               onNameChange={setAccountName}
             />
-          </div>
+          </form>
         )}
 
         <DialogFooter>
-          <Button onClick={() => onOpenChange(false)} variant="outline">
+          <Button
+            onClick={() => onOpenChange(false)}
+            type="button"
+            variant="outline"
+          >
             Cancel
           </Button>
-          <Button disabled={loading || saving} onClick={saveAccount}>
+          <Button
+            disabled={loading || saving}
+            form="settings-form"
+            type="submit"
+          >
             {saving ? <Spinner className="mr-2 size-4" /> : null}
             Save
           </Button>

components/settings/integration-form-dialog.tsx

@@ -498,7 +498,14 @@ export function IntegrationFormDialog({
             searchQuery={searchQuery}
           />
         ) : (
-          <div className="space-y-4">
+          <form
+            className="space-y-4"
+            id="integration-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSave();
+            }}
+          >
             <ConfigFields
               formData={formData}
               isEditMode={mode === "edit"}
@@ -516,7 +523,7 @@ export function IntegrationFormDialog({
                 value={formData.name}
               />
             </div>
-          </div>
+          </form>
         )}
 
         <DialogFooter
@@ -547,11 +554,16 @@ export function IntegrationFormDialog({
               <Button
                 disabled={saving || deleting}
                 onClick={() => onClose()}
+                type="button"
                 variant="outline"
               >
                 Cancel
               </Button>
-              <Button disabled={saving || deleting} onClick={handleSave}>
+              <Button
+                disabled={saving || deleting}
+                form="integration-form"
+                type="submit"
+              >
                 {saving ? <Spinner className="mr-2 size-4" /> : null}
                 {mode === "edit" ? "Update" : "Create"}
               </Button>

components/settings/integrations-dialog.tsx

@@ -92,14 +92,12 @@ export function IntegrationsDialog({
           </div>
         )}
 
-        <DialogFooter className="flex justify-between sm:justify-between">
-          <Button onClick={() => handleClose(false)} variant="outline">
-            Done
-          </Button>
-          <Button onClick={() => setShowCreateDialog(true)}>
+        <DialogFooter className="sm:justify-between">
+          <Button onClick={() => setShowCreateDialog(true)} variant="outline">
             <Plus className="mr-2 size-4" />
             Add Connection
           </Button>
+          <Button onClick={() => handleClose(false)}>Done</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

components/workflow/workflow-toolbar.tsx

@@ -1744,11 +1744,11 @@ function WorkflowIssuesDialog({
             )}
           </div>
 
-          <AlertDialogFooter className="flex-col gap-2 sm:flex-row">
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogFooter className="sm:justify-between">
             <Button onClick={actions.handleExecuteAnyway} variant="outline">
               Run Anyway
             </Button>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
@@ -1920,12 +1920,14 @@ function WorkflowDialogsComponent({
               the workflow?
             </AlertDialogDescription>
           </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogFooter className="sm:justify-between">
             <Button onClick={actions.handleRunWithoutSaving} variant="outline">
               Run Without Saving
             </Button>
-            <Button onClick={actions.handleSaveAndRun}>Save and Run</Button>
+            <div className="flex gap-2">
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <Button onClick={actions.handleSaveAndRun}>Save and Run</Button>
+            </div>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>