feat: add <form /> to Modal implementation (#4780)

Author: ndom91

apps/desktop/src/lib/branch/BranchLaneContextMenu.svelte

@@ -166,39 +166,36 @@
 	</ContextMenuSection>
 </ContextMenu>
 
-<Modal width="small" bind:this={renameRemoteModal}>
+<Modal
+	width="small"
+	bind:this={renameRemoteModal}
+	onSubmit={(close) => {
+		branchController.updateBranchRemoteName(branch.id, newRemoteName);
+		close();
+	}}
+>
 	<TextBox label="Remote branch name" id="newRemoteName" bind:value={newRemoteName} focus />
 
 	{#snippet controls(close)}
 		<Button style="ghost" outline type="reset" onclick={close}>Cancel</Button>
-		<Button
-			style="pop"
-			kind="solid"
-			onclick={() => {
-				branchController.updateBranchRemoteName(branch.id, newRemoteName);
-				close();
-			}}
-		>
-			Rename
-		</Button>
+		<Button style="pop" kind="solid" type="submit">Rename</Button>
 	{/snippet}
 </Modal>
 
-<Modal width="small" title="Delete branch" bind:this={deleteBranchModal}>
+<Modal
+	width="small"
+	title="Delete branch"
+	bind:this={deleteBranchModal}
+	onSubmit={async (close) => {
+		await branchController.deleteBranch(branch.id);
+		close();
+	}}
+>
 	{#snippet children(branch)}
 		Are you sure you want to delete <code class="code-string">{branch.name}</code>?
 	{/snippet}
 	{#snippet controls(close)}
 		<Button style="ghost" outline onclick={close}>Cancel</Button>
-		<Button
-			style="error"
-			kind="solid"
-			onclick={async () => {
-				await branchController.deleteBranch(branch.id);
-				close();
-			}}
-		>
-			Delete
-		</Button>
+		<Button style="error" kind="solid" type="submit">Delete</Button>
 	{/snippet}
 </Modal>

apps/desktop/src/lib/branch/BranchPreviewHeader.svelte

@@ -139,31 +139,30 @@
 	<div class="header__top-overlay" data-tauri-drag-region></div>
 </div>
 
-<Modal width="small" title="Delete branch" bind:this={deleteBranchModal}>
+<Modal
+	width="small"
+	title="Delete branch"
+	bind:this={deleteBranchModal}
+	onSubmit={async (close) => {
+		try {
+			await branchController.deleteLocalBranch(branch.name, branch.givenName);
+		} catch (e) {
+			const err = 'Failed to delete local branch';
+			error(err);
+			console.error(err, e);
+		} finally {
+			isDeleting = false;
+			close();
+		}
+		goto(`/${project.id}/board`);
+	}}
+>
 	{#snippet children(branch)}
 		Are you sure you want to delete <code class="code-string">{branch.name}</code>?
 	{/snippet}
 	{#snippet controls(close)}
 		<Button style="ghost" outline onclick={close}>Cancel</Button>
-		<Button
-			style="error"
-			kind="solid"
-			onclick={async () => {
-				try {
-					await branchController.deleteLocalBranch(branch.name, branch.givenName);
-				} catch (e) {
-					const err = 'Failed to delete local branch';
-					error(err);
-					console.error(err, e);
-				} finally {
-					isDeleting = false;
-					close();
-				}
-				goto(`/${project.id}/board`);
-			}}
-		>
-			Delete
-		</Button>
+		<Button style="error" type="submit" kind="solid">Delete</Button>
 	{/snippet}
 </Modal>
 

apps/desktop/src/lib/commit/CommitCard.svelte

@@ -154,21 +154,15 @@
 	$: conflicted = commit instanceof DetailedCommit && commit.conflicted;
 </script>
 
-<Modal bind:this={commitMessageModal} width="small">
+<Modal bind:this={commitMessageModal} width="small" onSubmit={submitCommitMessageModal}>
 	<CommitMessageInput
 		bind:commitMessage={description}
 		bind:valid={commitMessageValid}
 		isExpanded={true}
 	/>
 	{#snippet controls(close)}
 		<Button style="ghost" outline onclick={close}>Cancel</Button>
-		<Button
-			style="neutral"
-			kind="solid"
-			grow
-			disabled={!commitMessageValid}
-			onclick={submitCommitMessageModal}
-		>
+		<Button style="neutral" type="submit" kind="solid" grow disabled={!commitMessageValid}>
 			Submit
 		</Button>
 	{/snippet}

apps/desktop/src/lib/components/BaseBranch.svelte

@@ -96,7 +96,18 @@
 	</div>
 </div>
 
-<Modal width="small" bind:this={updateTargetModal} title="Merge Upstream Work">
+<Modal
+	width="small"
+	bind:this={updateTargetModal}
+	title="Merge Upstream Work"
+	onSubmit={(close) => {
+		updateBaseBranch();
+		if (mergeUpstreamWarningDismissedCheckbox) {
+			mergeUpstreamWarningDismissed.set(true);
+		}
+		close();
+	}}
+>
 	<div class="modal-content">
 		<p class="text-14 text-body">You are about to merge upstream work from your base branch.</p>
 	</div>
@@ -122,19 +133,7 @@
 
 	{#snippet controls(close)}
 		<Button style="ghost" outline onclick={close}>Cancel</Button>
-		<Button
-			style="pop"
-			kind="solid"
-			onclick={() => {
-				updateBaseBranch();
-				if (mergeUpstreamWarningDismissedCheckbox) {
-					mergeUpstreamWarningDismissed.set(true);
-				}
-				close();
-			}}
-		>
-			Merge Upstream
-		</Button>
+		<Button style="pop" kind="solid" type="submit">Merge Upstream</Button>
 	{/snippet}
 </Modal>
 

apps/desktop/src/lib/components/PromptModal.svelte

@@ -54,7 +54,8 @@
 	bind:this={modal}
 	width="small"
 	title="Git fetch requires input"
-	onclose={async () => await cancel()}
+	onClose={async () => await cancel()}
+	onSubmit={async () => await submit()}
 >
 	<div class="message">
 		{#if $error}
@@ -66,15 +67,8 @@
 	<TextBox focus type="password" bind:value disabled={!!$error || loading} />
 
 	{#snippet controls()}
-		<Button style="ghost" outline type="reset" disabled={loading} onclick={cancel}>Cancel</Button>
-		<Button
-			style="pop"
-			kind="solid"
-			grow
-			disabled={!!$error || loading}
-			{loading}
-			onclick={async () => await submit()}
-		>
+		<Button style="ghost" type="reset" outline disabled={loading} onclick={cancel}>Cancel</Button>
+		<Button style="pop" type="submit" kind="solid" grow disabled={!!$error || loading} {loading}>
 			Submit
 		</Button>
 	{/snippet}

apps/desktop/src/lib/components/PullRequestPreview.svelte

@@ -83,14 +83,14 @@
 	}
 </script>
 
-<Modal width="small" bind:this={createRemoteModal}>
+<Modal width="small" bind:this={createRemoteModal} onSubmit={createRemoteAndBranch}>
 	<p class="text-15 fork-notice">
 		In order to apply a branch from a fork, GitButler must first add a remote.
 	</p>
 	<TextBox label="Choose a remote name" bind:value={remoteName}></TextBox>
 	{#snippet controls(close)}
 		<Button style="ghost" outline onclick={() => closeModal(close)}>Cancel</Button>
-		<Button style="pop" kind="solid" grow onclick={createRemoteAndBranch} {loading}>Confirm</Button>
+		<Button style="pop" kind="solid" type="submit" grow {loading}>Confirm</Button>
 	{/snippet}
 </Modal>
 

apps/desktop/src/lib/components/RemoveProjectButton.svelte

@@ -28,7 +28,13 @@
 	Remove project…
 </Button>
 
-<Modal bind:this={modal} width="small">
+<Modal
+	bind:this={modal}
+	width="small"
+	onSubmit={(close) => {
+		onDeleteClicked().then(close);
+	}}
+>
 	<div class="remove-project-description">
 		<p class="text-14 text-body">
 			Are you sure you want to remove
@@ -41,16 +47,14 @@
 		</p>
 	</div>
 
-	{#snippet controls(close)}
+	{#snippet controls()}
 		<Button
 			style="error"
 			kind="solid"
 			reversedDirection
 			loading={isDeleting}
 			icon="bin-small"
-			onclick={() => {
-				onDeleteClicked().then(close);
-			}}
+			type="submit"
 		>
 			Remove
 		</Button>

apps/desktop/src/lib/components/ShareIssueModal.svelte

@@ -155,7 +155,11 @@
 	});
 </script>
 
-<Modal bind:this={modal} title="Share debug data with GitButler team for review">
+<Modal
+	bind:this={modal}
+	title="Share debug data with GitButler team for review"
+	onSubmit={async () => await submit()}
+>
 	<div class="content-wrapper">
 		<p class="content-wrapper__help-text text-13 text-body">
 			If you are having trouble, please share your project and logs with the GitButler team. We will
@@ -172,6 +176,7 @@
 				autocomplete={false}
 				autocorrect={false}
 				spellcheck
+				focus
 			/>
 		{/if}
 
@@ -216,11 +221,9 @@
 	</div>
 
 	<!-- Use our own close function -->
-	{#snippet controls(_close)}
+	{#snippet controls()}
 		<Button style="ghost" outline type="reset" onclick={close}>Close</Button>
-		<Button style="pop" kind="solid" type="submit" onclick={async () => await submit()}>
-			Share with GitButler
-		</Button>
+		<Button style="pop" kind="solid" type="submit">Share with GitButler</Button>
 	{/snippet}
 </Modal>
 

apps/desktop/src/lib/select/Select.svelte

@@ -13,7 +13,6 @@
 	import TextBox from '../shared/TextBox.svelte';
 	import { KeyName } from '$lib/utils/hotkeys';
 	import { resizeObserver } from '$lib/utils/resizeObserver';
-	import { portal } from '@gitbutler/ui/utils/portal';
 	import { type Snippet } from 'svelte';
 
 	interface SelectProps {
@@ -168,7 +167,6 @@
 			role="presentation"
 			class="overlay-wrapper"
 			onclick={clickOutside}
-			use:portal={'body'}
 			use:resizeObserver={() => {
 				getInputBoundingRect();
 				setMaxHeight();

apps/desktop/src/lib/settings/GithubIntegration.svelte

@@ -126,7 +126,7 @@
 	bind:this={gitHubOauthModal}
 	width="small"
 	title="Authorize with GitHub"
-	onclose={() => {
+	onClose={() => {
 		codeCopied = false;
 		GhActivationLinkPressed = false;
 		GhActivationPageOpened = false;