Merge pull request #13754 from Byron/feat-normalize-branch-name

normalize new branch names with the backend

Author: Byron

apps/desktop/src/components/branch/AddDependentBranchModal.svelte

@@ -18,17 +18,18 @@
 
 	let modal = $state<Modal>();
 	let branchName = $state<string>();
-	let slugifiedRefName: string | undefined = $state();
+	let normalizedRefName: string | undefined = $state();
+	let isBranchNameValid = $state(false);
 
 	async function handleAddDependentBranch(close: () => void) {
-		if (!slugifiedRefName) return;
+		if (!normalizedRefName) return;
 
 		await createNewBranch({
 			projectId,
 			stackId,
 			request: {
 				targetPatch: undefined,
-				name: slugifiedRefName,
+				name: normalizedRefName,
 			},
 		});
 
@@ -52,7 +53,8 @@
 			placeholder="Branch name"
 			bind:value={branchName}
 			autofocus
-			onslugifiedvalue={(value) => (slugifiedRefName = value)}
+			onnormalizedvalue={(value) => (normalizedRefName = value)}
+			onvalidationchange={(isValid) => (isBranchNameValid = isValid)}
 		/>
 	</div>
 	{#snippet controls(close)}
@@ -61,7 +63,7 @@
 			testId={TestId.BranchHeaderAddDependanttBranchModal_ActionButton}
 			style="pop"
 			type="submit"
-			disabled={!slugifiedRefName}
+			disabled={!isBranchNameValid}
 			loading={branchCreation.current.isLoading}>Add branch</Button
 		>
 	{/snippet}

apps/desktop/src/components/branch/BranchNameTextbox.svelte

@@ -1,37 +1,117 @@
 <script lang="ts">
-	import { Textbox } from "@gitbutler/ui";
-	import { slugify } from "@gitbutler/ui/utils/string";
+	import { STACK_SERVICE } from "$lib/stacks/stackService.svelte";
+	import { debounce } from "$lib/utils/debounce";
+	import { inject } from "@gitbutler/core/context";
+	import { Icon, Textbox } from "@gitbutler/ui";
+	import { onDestroy } from "svelte";
 
 	type Props = {
 		value?: string;
 		helperText?: string;
-		onslugifiedvalue?: (slugified: string | undefined) => void;
+		onnormalizedvalue?: (normalized: string | undefined) => void;
+		onvalidationchange?: (isValid: boolean) => void;
 		[key: string]: any;
 	};
 
 	let {
 		value = $bindable(),
 		helperText,
-
-		onslugifiedvalue,
+		onnormalizedvalue,
+		onvalidationchange,
 		...restProps
 	}: Props = $props();
 
+	const stackService = inject(STACK_SERVICE);
+
 	let textbox = $state<ReturnType<typeof Textbox>>();
+	let isValidating = $state(false);
+	let validationError = $state<string | undefined>();
+	let validationCounter = $state(0);
+	let isDestroyed = false;
+
+	let normalizedResult = $state<{ fromValue: string; normalized: string } | undefined>();
+
+	const isValidState = $derived(
+		!isValidating &&
+			!validationError &&
+			!!value &&
+			!!normalizedResult?.normalized &&
+			normalizedResult.fromValue === value,
+	);
+	$effect(() => {
+		onvalidationchange?.(isValidState);
+	});
 
-	const slugifiedName = $derived(value && slugify(value));
-	const namesDiverge = $derived(!!value && slugifiedName !== value);
+	const namesDiverge = $derived(
+		!!normalizedResult && normalizedResult.normalized !== normalizedResult.fromValue,
+	);
 	const computedHelperText = $derived(
-		namesDiverge ? `Will be created as '${slugifiedName}'` : helperText,
+		namesDiverge && normalizedResult
+			? `Will be created as '${normalizedResult.normalized}'`
+			: helperText,
 	);
 
+	const debouncedNormalize = debounce(async (inputValue: string) => {
+		if (isDestroyed) return;
+
+		if (!inputValue) {
+			isValidating = false;
+			validationError = undefined;
+			normalizedResult = undefined;
+			onnormalizedvalue?.(undefined);
+			return;
+		}
+
+		const currentValidation = ++validationCounter;
+		isValidating = true;
+		validationError = undefined;
+
+		try {
+			const result = await stackService.normalizeBranchName(inputValue);
+			// Only update if the value hasn't changed during the async call
+			// and no newer validation has started
+			if (!isDestroyed && value === inputValue && currentValidation === validationCounter) {
+				normalizedResult = { fromValue: inputValue, normalized: result };
+				onnormalizedvalue?.(result);
+				validationError = undefined;
+			}
+		} catch {
+			if (!isDestroyed && value === inputValue && currentValidation === validationCounter) {
+				normalizedResult = undefined;
+				onnormalizedvalue?.(undefined);
+				validationError = "Invalid branch name";
+			}
+		} finally {
+			if (!isDestroyed && currentValidation === validationCounter) {
+				isValidating = false;
+			}
+		}
+	}, 100);
+
 	$effect(() => {
-		onslugifiedvalue?.(slugifiedName);
+		debouncedNormalize(value || "");
 	});
 
 	export async function selectAll() {
 		await textbox?.selectAll();
 	}
+
+	onDestroy(() => {
+		isDestroyed = true;
+		validationCounter++;
+	});
 </script>
 
-<Textbox bind:this={textbox} bind:value helperText={computedHelperText} {...restProps} />
+<Textbox
+	bind:this={textbox}
+	bind:value
+	helperText={computedHelperText}
+	error={validationError}
+	{...restProps}
+>
+	{#snippet customIconRight()}
+		{#if isValidating}
+			<Icon name="spinner" />
+		{/if}
+	{/snippet}
+</Textbox>

apps/desktop/src/components/branch/BranchRenameModal.svelte

@@ -20,7 +20,8 @@
 	const [renameBranch, renameQuery] = stackService.updateBranchName;
 
 	let newName: string | undefined = $state();
-	let slugifiedRefName: string | undefined = $state();
+	let normalizedRefName: string | undefined = $state();
+	let isBranchNameValid = $state(false);
 	let modal: Modal | undefined = $state();
 
 	let branchNameInput = $state<ReturnType<typeof BranchNameTextbox>>();
@@ -40,8 +41,8 @@
 	type={isPushed ? "warning" : "info"}
 	bind:this={modal}
 	onSubmit={async (close) => {
-		if (slugifiedRefName) {
-			renameBranch({ projectId, stackId, laneId, branchName, newName: slugifiedRefName });
+		if (normalizedRefName) {
+			renameBranch({ projectId, stackId, laneId, branchName, newName: normalizedRefName });
 		}
 		close();
 	}}
@@ -52,7 +53,8 @@
 		id={ElementId.NewBranchNameInput}
 		bind:value={newName}
 		autofocus
-		onslugifiedvalue={(value) => (slugifiedRefName = value)}
+		onnormalizedvalue={(value) => (normalizedRefName = value)}
+		onvalidationchange={(isValid) => (isBranchNameValid = isValid)}
 	/>
 
 	{#if isPushed}
@@ -68,7 +70,7 @@
 			testId={TestId.BranchHeaderRenameModal_ActionButton}
 			style="pop"
 			type="submit"
-			disabled={!slugifiedRefName}
+			disabled={!isBranchNameValid}
 			loading={renameQuery.current.isLoading}>Rename</Button
 		>
 	{/snippet}

apps/desktop/src/components/branch/CreateBranchModal.svelte

@@ -42,7 +42,8 @@
 	// Persisted preference for branch placement
 	const addToLeftmost = persisted<boolean>(false, "branch-placement-leftmost");
 
-	let slugifiedRefName: string | undefined = $state();
+	let normalizedRefName: string | undefined = $state();
+	let isBranchNameValid = $state(false);
 
 	// Get all stacks in the workspace
 	const allStacksQuery = $derived(stackService.stacks(projectId));
@@ -91,22 +92,21 @@
 			await createNewStack({
 				projectId,
 				branch: {
-					name: slugifiedRefName,
+					name: normalizedRefName,
 					// If addToLeftmost is true, place at position 0 (leftmost)
 					// Otherwise, leave undefined to append to the right
 					order: $addToLeftmost ? 0 : undefined,
 				},
 			});
 			createRefModal?.close();
 		} else {
-			if (!selectedStackId || !slugifiedRefName) {
-				// TODO: Add input validation.
+			if (!selectedStackId || !normalizedRefName) {
 				return;
 			}
 			await createNewBranch({
 				projectId,
 				stackId: selectedStackId,
-				request: { targetPatch: undefined, name: slugifiedRefName },
+				request: { targetPatch: undefined, name: normalizedRefName },
 			});
 			createRefModal?.close();
 		}
@@ -145,7 +145,8 @@
 			id={ElementId.NewBranchNameInput}
 			value={createRefName}
 			autofocus
-			onslugifiedvalue={(value) => (slugifiedRefName = value)}
+			onnormalizedvalue={(value) => (normalizedRefName = value)}
+			onvalidationchange={(isValid) => (isBranchNameValid = isValid)}
 		/>
 
 		<div class="options-wrap" role="radiogroup" aria-label="Branch type selection">
@@ -269,7 +270,7 @@
 					style="pop"
 					type="submit"
 					onclick={addNew}
-					disabled={!createRefName || (createRefType === "dependent" && !selectedStackId)}
+					disabled={!isBranchNameValid || (createRefType === "dependent" && !selectedStackId)}
 					loading={isAddingNew}
 					testId={TestId.ConfirmSubmit}
 				>

apps/desktop/src/components/workspace/StashIntoBranchModal.svelte

@@ -38,11 +38,13 @@
 
 	let modal: ReturnType<typeof Modal> | undefined;
 	let stashBranchName = $state<string>();
-	let slugifiedRefName: string | undefined = $state();
+	let normalizedRefName: string | undefined = $state();
+	let isStashBranchNameValid = $state(false);
 	let stashBranchNameInput = $state<ReturnType<typeof BranchNameTextbox>>();
 
 	export async function show(item: ChangedFilesItem) {
-		slugifiedRefName = undefined;
+		normalizedRefName = undefined;
+		isStashBranchNameValid = false;
 		modal?.show(item);
 		stashBranchName = await stackService.fetchNewBranchName(projectId);
 		if ($autoSelectBranchCreationFeature) {
@@ -72,7 +74,8 @@
 				placeholder="Enter your branch name..."
 				bind:value={stashBranchName}
 				autofocus
-				onslugifiedvalue={(value) => (slugifiedRefName = value)}
+				onnormalizedvalue={(value) => (normalizedRefName = value)}
+				onvalidationchange={(isValid) => (isStashBranchNameValid = isValid)}
 			/>
 			<div class="explanation">
 				<p class="primary-text">
@@ -98,10 +101,10 @@
 		<Button kind="outline" type="reset" onclick={close}>Cancel</Button>
 		<AsyncButton
 			style="pop"
-			disabled={!slugifiedRefName}
+			disabled={!isStashBranchNameValid}
 			type="submit"
 			action={async () => {
-				if (isChangedFilesItem(item)) await confirmStashIntoBranch(item, slugifiedRefName);
+				if (isChangedFilesItem(item)) await confirmStashIntoBranch(item, normalizedRefName);
 			}}
 		>
 			Stash into branch