From f093351e5b65fb3c5e3d8989d6ff3ed2d3d96a24 Mon Sep 17 00:00:00 2001
From: Ian Boyes <igboyes@gmail.com>
Date: Wed, 8 Jul 2026 10:11:41 -0700
Subject: [PATCH 1/4] refactor: control create-reference dialog with local
 state instead of url

Move the create-reference dialog's open state and empty/import tab
selection off the /refs URL search params and into local React state,
since it's transient UI state rather than something that needs to be
shareable or bookmarkable. The empty/import tab switch now uses the
local-state Tabs component instead of the routing-based NavTab, with
both panes kept mounted so in-progress input isn't lost when switching
tabs. Also fixes a duplicate DOM id (name/description fields) that
surfaced once both forms could be mounted simultaneously.
---
 .../references/components/CreateReference.tsx | 75 ++++++++++---------
 .../references/components/EmptyReference.tsx  |  7 +-
 .../references/components/ImportReference.tsx | 24 ++++--
 .../references/components/ReferenceForm.tsx   | 17 +++--
 .../references/components/ReferenceList.tsx   | 16 ++--
 .../components/ReferenceToolbar.tsx           |  6 +-
 .../__tests__/CreateReference.test.tsx        | 49 ++++++++++++
 .../__tests__/ReferenceList.test.tsx          |  1 -
 .../src/routes/_authenticated/refs/index.tsx  |  2 -
 9 files changed, 134 insertions(+), 63 deletions(-)
 create mode 100644 apps/web/src/references/components/__tests__/CreateReference.test.tsx

diff --git a/apps/web/src/references/components/CreateReference.tsx b/apps/web/src/references/components/CreateReference.tsx
index bb821f733..fab4ee37f 100644
--- a/apps/web/src/references/components/CreateReference.tsx
+++ b/apps/web/src/references/components/CreateReference.tsx
@@ -1,52 +1,59 @@
 import { Dialog, DialogContent, DialogTitle } from "@base/Dialog";
-import NavTab from "@base/NavTab";
-import NavTabs from "@base/NavTabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@base/Tabs";
+import { useState } from "react";
 import EmptyReference from "./EmptyReference";
 import ImportReference from "./ImportReference";
 
 type CreateReferenceProps = {
-	createReferenceType?: string;
-	setCreateReferenceType: (type?: string) => void;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
 };
 
 /**
  * The create reference view with options to create an empty reference or import a reference
  */
-export function CreateReference({
-	createReferenceType,
-	setCreateReferenceType,
-}: CreateReferenceProps) {
+export function CreateReference({ open, onOpenChange }: CreateReferenceProps) {
+	const [tab, setTab] = useState<"empty" | "import">("empty");
+
+	function handleOpenChange(open: boolean) {
+		onOpenChange(open);
+		if (!open) {
+			setTab("empty");
+		}
+	}
+
+	function handleSuccess() {
+		onOpenChange(false);
+		setTab("empty");
+	}
+
 	return (
-		<Dialog
-			open={Boolean(createReferenceType)}
-			onOpenChange={() => {
-				setCreateReferenceType(undefined);
-			}}
-		>
+		<Dialog open={open} onOpenChange={handleOpenChange}>
 			<DialogContent size="lg">
 				<DialogTitle>Create Reference</DialogTitle>
-				<NavTabs>
-					<NavTab
-						to="."
-						search={{ createReferenceType: "empty" }}
-						isActive={createReferenceType === "empty"}
+				<Tabs
+					value={tab}
+					onValueChange={(value) => setTab(value as "empty" | "import")}
+				>
+					<TabsList>
+						<TabsTrigger value="empty">Empty</TabsTrigger>
+						<TabsTrigger value="import">Import</TabsTrigger>
+					</TabsList>
+					<TabsContent
+						value="empty"
+						forceMount
+						className="data-[state=inactive]:hidden"
 					>
-						Empty
-					</NavTab>
-					<NavTab
-						to="."
-						search={{ createReferenceType: "import" }}
-						isActive={createReferenceType === "import"}
+						<EmptyReference onSuccess={handleSuccess} />
+					</TabsContent>
+					<TabsContent
+						value="import"
+						forceMount
+						className="data-[state=inactive]:hidden"
 					>
-						Import
-					</NavTab>
-				</NavTabs>
-
-				{createReferenceType === "import" ? (
-					<ImportReference />
-				) : (
-					<EmptyReference />
-				)}
+						<ImportReference onSuccess={handleSuccess} />
+					</TabsContent>
+				</Tabs>
 			</DialogContent>
 		</Dialog>
 	);
diff --git a/apps/web/src/references/components/EmptyReference.tsx b/apps/web/src/references/components/EmptyReference.tsx
index 3dbded2b2..911315c46 100644
--- a/apps/web/src/references/components/EmptyReference.tsx
+++ b/apps/web/src/references/components/EmptyReference.tsx
@@ -11,10 +11,14 @@ type FormValues = {
 	organism: string;
 };
 
+type EmptyReferenceProps = {
+	onSuccess?: () => void;
+};
+
 /**
  * A form for creating an empty reference
  */
-export default function EmptyReference() {
+export default function EmptyReference({ onSuccess }: EmptyReferenceProps) {
 	const navigate = useNavigate();
 
 	const mutation = useCreateReference();
@@ -37,6 +41,7 @@ export default function EmptyReference() {
 				mutation.mutate(values, {
 					onSuccess: () => {
 						navigate({ to: "/refs" });
+						onSuccess?.();
 					},
 				}),
 			)}
diff --git a/apps/web/src/references/components/ImportReference.tsx b/apps/web/src/references/components/ImportReference.tsx
index 527f428d2..8f9b6bd89 100644
--- a/apps/web/src/references/components/ImportReference.tsx
+++ b/apps/web/src/references/components/ImportReference.tsx
@@ -7,12 +7,19 @@ import InputSimple from "@base/InputSimple";
 import ProgressBarAffixed from "@base/ProgressBarAffixed";
 import SaveButton from "@base/SaveButton";
 import { useNavigate } from "@tanstack/react-router";
+import { useId } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { UploadBar } from "@/uploads/components/UploadBar";
 import { useImportReference, useUploadReference } from "../queries";
 
-export default function ImportReference() {
+type ImportReferenceProps = {
+	onSuccess?: () => void;
+};
+
+export default function ImportReference({ onSuccess }: ImportReferenceProps) {
 	const navigate = useNavigate();
+	const nameId = useId();
+	const descriptionId = useId();
 
 	const importMutation = useImportReference();
 	const { uploadMutation, fileName, uploadId, progress } = useUploadReference();
@@ -85,20 +92,25 @@ export default function ImportReference() {
 					}
 					importMutation.mutate(
 						{ ...values, importFrom: uploadId },
-						{ onSuccess: () => navigate({ to: "/refs", replace: true }) },
+						{
+							onSuccess: () => {
+								navigate({ to: "/refs", replace: true });
+								onSuccess?.();
+							},
+						},
 					);
 				})}
 			>
 				<InputGroup>
-					<InputLabel htmlFor="name">Name</InputLabel>
-					<InputSimple id="name" {...register("name", { required: true })} />
+					<InputLabel htmlFor={nameId}>Name</InputLabel>
+					<InputSimple id={nameId} {...register("name", { required: true })} />
 					<InputError>{errors.name?.type && "A name is required."}</InputError>
 				</InputGroup>
 				<InputGroup>
-					<InputLabel htmlFor="description">Description</InputLabel>
+					<InputLabel htmlFor={descriptionId}>Description</InputLabel>
 					<InputSimple
 						as="textarea"
-						id="description"
+						id={descriptionId}
 						{...register("description")}
 					/>
 				</InputGroup>
diff --git a/apps/web/src/references/components/ReferenceForm.tsx b/apps/web/src/references/components/ReferenceForm.tsx
index 95040c8fa..9f101c5f3 100644
--- a/apps/web/src/references/components/ReferenceForm.tsx
+++ b/apps/web/src/references/components/ReferenceForm.tsx
@@ -3,6 +3,7 @@ import InputGroup from "@base/InputGroup";
 import InputLabel from "@base/InputLabel";
 import InputSimple from "@base/InputSimple";
 import TextArea from "@base/TextArea";
+import { useId } from "react";
 import type { FieldErrors, UseFormRegister } from "react-hook-form";
 
 export type ReferenceFormMode = "edit" | "empty";
@@ -26,20 +27,24 @@ type ReferenceFormProps = {
  * Form input fields for organism, name and description
  */
 export function ReferenceForm({ errors, mode, register }: ReferenceFormProps) {
+	const nameId = useId();
+	const organismId = useId();
+	const descriptionId = useId();
+
 	const organismComponent =
 		mode === "empty" || mode === "edit" ? (
 			<InputGroup>
-				<InputLabel htmlFor="organism">Organism</InputLabel>
-				<InputSimple id="organism" {...register("organism")} />
+				<InputLabel htmlFor={organismId}>Organism</InputLabel>
+				<InputSimple id={organismId} {...register("organism")} />
 			</InputGroup>
 		) : null;
 
 	return (
 		<>
 			<InputGroup className="pb-0">
-				<InputLabel htmlFor="name">Name</InputLabel>
+				<InputLabel htmlFor={nameId}>Name</InputLabel>
 				<InputSimple
-					id="name"
+					id={nameId}
 					{...register("name", { required: "Required Field" })}
 				/>
 				<InputError>{errors.name?.message}</InputError>
@@ -48,8 +53,8 @@ export function ReferenceForm({ errors, mode, register }: ReferenceFormProps) {
 			{organismComponent}
 
 			<InputGroup>
-				<InputLabel htmlFor="description">Description</InputLabel>
-				<TextArea id="description" {...register("description")} />
+				<InputLabel htmlFor={descriptionId}>Description</InputLabel>
+				<TextArea id={descriptionId} {...register("description")} />
 			</InputGroup>
 		</>
 	);
diff --git a/apps/web/src/references/components/ReferenceList.tsx b/apps/web/src/references/components/ReferenceList.tsx
index 6a8dfb91b..3e9506448 100644
--- a/apps/web/src/references/components/ReferenceList.tsx
+++ b/apps/web/src/references/components/ReferenceList.tsx
@@ -9,6 +9,7 @@ import ViewHeader from "@base/ViewHeader";
 import ViewHeaderTitle from "@base/ViewHeaderTitle";
 import ViewHeaderTitleBadge from "@base/ViewHeaderTitleBadge";
 import { Library } from "lucide-react";
+import { useState } from "react";
 import { useFindReferences } from "../queries";
 import Clone from "./CloneReference";
 import { CreateReference } from "./CreateReference";
@@ -18,14 +19,12 @@ import ReferenceToolbar from "./ReferenceToolbar";
 type ReferenceListProps = {
 	archived?: boolean;
 	cloneReferenceId?: string;
-	createReferenceType?: string;
 	find?: string;
 	page?: number;
 	setSearch?: (
 		next: {
 			archived?: boolean;
 			cloneReferenceId?: string;
-			createReferenceType?: string;
 			find?: string;
 			page?: number;
 		},
@@ -39,11 +38,12 @@ type ReferenceListProps = {
 export default function ReferenceList({
 	archived = false,
 	cloneReferenceId,
-	createReferenceType,
 	find = "",
 	page = 1,
 	setSearch = () => {},
 }: ReferenceListProps) {
+	const [isCreateReferenceOpen, setIsCreateReferenceOpen] = useState(false);
+
 	const { data, isPending, isError } = useFindReferences(
 		page,
 		25,
@@ -73,17 +73,13 @@ export default function ReferenceList({
 				<ReferenceToolbar
 					archived={archived}
 					find={find}
+					onCreate={() => setIsCreateReferenceOpen(true)}
 					setArchived={(archived) => setSearch({ archived, page: 1 })}
-					setCreateReferenceType={(createReferenceType) =>
-						setSearch({ createReferenceType })
-					}
 					setFind={(find) => setSearch({ find, page: 1 }, { replace: true })}
 				/>
 				<CreateReference
-					createReferenceType={createReferenceType}
-					setCreateReferenceType={(createReferenceType) =>
-						setSearch({ createReferenceType })
-					}
+					open={isCreateReferenceOpen}
+					onOpenChange={setIsCreateReferenceOpen}
 				/>
 				{!items.length ? (
 					<Box>
diff --git a/apps/web/src/references/components/ReferenceToolbar.tsx b/apps/web/src/references/components/ReferenceToolbar.tsx
index af38c61f4..292eb8752 100644
--- a/apps/web/src/references/components/ReferenceToolbar.tsx
+++ b/apps/web/src/references/components/ReferenceToolbar.tsx
@@ -9,8 +9,8 @@ import Toolbar from "@base/Toolbar";
 type ReferenceToolbarProps = {
 	archived: boolean;
 	find: string;
+	onCreate: () => void;
 	setArchived: (archived: boolean) => void;
-	setCreateReferenceType: (type: string) => void;
 	setFind: (find: string) => void;
 };
 
@@ -20,8 +20,8 @@ type ReferenceToolbarProps = {
 export default function ReferenceToolbar({
 	archived,
 	find,
+	onCreate,
 	setArchived,
-	setCreateReferenceType,
 	setFind,
 }: ReferenceToolbarProps) {
 	const { hasPermission: canCreate } =
@@ -46,7 +46,7 @@ export default function ReferenceToolbar({
 				<ToggleGroupItem value="archived">Archived</ToggleGroupItem>
 			</ToggleGroup>
 			{canCreate && (
-				<Button color="blue" onClick={() => setCreateReferenceType("empty")}>
+				<Button color="blue" onClick={onCreate}>
 					Create
 				</Button>
 			)}
diff --git a/apps/web/src/references/components/__tests__/CreateReference.test.tsx b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
new file mode 100644
index 000000000..d8b6a4858
--- /dev/null
+++ b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
@@ -0,0 +1,49 @@
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "@tests/setup";
+import { describe, expect, it } from "vitest";
+import { CreateReference } from "../CreateReference";
+
+describe("<CreateReference />", () => {
+	it("should not render dialog content when closed", () => {
+		renderWithProviders(
+			<CreateReference open={false} onOpenChange={() => {}} />,
+		);
+
+		expect(screen.queryByText("Create Reference")).not.toBeInTheDocument();
+	});
+
+	it("should default to the Empty tab when opened", () => {
+		renderWithProviders(
+			<CreateReference open={true} onOpenChange={() => {}} />,
+		);
+
+		expect(screen.getByText("Create Reference")).toBeInTheDocument();
+		expect(screen.getByRole("tab", { name: "Empty" })).toHaveAttribute(
+			"data-state",
+			"active",
+		);
+	});
+
+	it("should preserve input values when switching between tabs", async () => {
+		renderWithProviders(
+			<CreateReference open={true} onOpenChange={() => {}} />,
+		);
+
+		const emptyPanel = screen.getByRole("tabpanel", { name: "Empty" });
+		await userEvent.type(
+			within(emptyPanel).getByRole("textbox", { name: "Name" }),
+			"Test Reference",
+		);
+
+		await userEvent.click(screen.getByRole("tab", { name: "Import" }));
+		await userEvent.click(screen.getByRole("tab", { name: "Empty" }));
+
+		expect(
+			within(screen.getByRole("tabpanel", { name: "Empty" })).getByRole(
+				"textbox",
+				{ name: "Name" },
+			),
+		).toHaveValue("Test Reference");
+	});
+});
diff --git a/apps/web/src/references/components/__tests__/ReferenceList.test.tsx b/apps/web/src/references/components/__tests__/ReferenceList.test.tsx
index e02426bd9..7936790f9 100644
--- a/apps/web/src/references/components/__tests__/ReferenceList.test.tsx
+++ b/apps/web/src/references/components/__tests__/ReferenceList.test.tsx
@@ -16,7 +16,6 @@ import ReferenceList from "../ReferenceList";
 type ReferenceListSearch = {
 	archived?: boolean;
 	cloneReferenceId?: string;
-	createReferenceType?: string;
 	find?: string;
 	page?: number;
 };
diff --git a/apps/web/src/routes/_authenticated/refs/index.tsx b/apps/web/src/routes/_authenticated/refs/index.tsx
index 9fb637615..f6a2e2644 100644
--- a/apps/web/src/routes/_authenticated/refs/index.tsx
+++ b/apps/web/src/routes/_authenticated/refs/index.tsx
@@ -6,7 +6,6 @@ const refsSearchSchema = z.object({
 	archived: z.boolean().default(false).catch(false),
 	find: z.string().default("").catch(""),
 	page: z.number().default(1).catch(1),
-	createReferenceType: z.string().optional().catch(undefined),
 	cloneReferenceId: z.string().optional().catch(undefined),
 });
 
@@ -23,7 +22,6 @@ function ReferencesRoute() {
 		<ReferenceList
 			archived={search.archived}
 			cloneReferenceId={search.cloneReferenceId}
-			createReferenceType={search.createReferenceType}
 			find={search.find}
 			page={search.page}
 			setSearch={(next, options) =>

From 8f45dca02cc0b0ba500bff730e294f9b3fe98987 Mon Sep 17 00:00:00 2001
From: Ian Boyes <igboyes@gmail.com>
Date: Wed, 8 Jul 2026 10:18:27 -0700
Subject: [PATCH 2/4] fix: keep name and description when switching
 create-reference mode

EmptyReference and ImportReference were two independent forms, so
switching between them lost whatever had been typed. Merge them into
one CreateReferenceForm with a single react-hook-form instance shared
across modes, and swap the empty/import tabs for a ToggleGroup mode
switch since these were never really independent content panes -
just two variants of the same form.
---
 .../references/components/CreateReference.tsx |  42 ++--
 .../components/CreateReferenceForm.tsx        | 179 ++++++++++++++++++
 .../references/components/EmptyReference.tsx  |  57 ------
 .../references/components/ImportReference.tsx | 127 -------------
 .../__tests__/CreateReference.test.tsx        |  45 +++--
 .../__tests__/CreateReferenceForm.test.tsx    | 110 +++++++++++
 .../__tests__/EmptyReference.test.tsx         |  52 -----
 .../__tests__/ImportReference.test.tsx        |  62 ------
 8 files changed, 334 insertions(+), 340 deletions(-)
 create mode 100644 apps/web/src/references/components/CreateReferenceForm.tsx
 delete mode 100644 apps/web/src/references/components/EmptyReference.tsx
 delete mode 100644 apps/web/src/references/components/ImportReference.tsx
 create mode 100644 apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
 delete mode 100644 apps/web/src/references/components/__tests__/EmptyReference.test.tsx
 delete mode 100644 apps/web/src/references/components/__tests__/ImportReference.test.tsx

diff --git a/apps/web/src/references/components/CreateReference.tsx b/apps/web/src/references/components/CreateReference.tsx
index fab4ee37f..99c05538b 100644
--- a/apps/web/src/references/components/CreateReference.tsx
+++ b/apps/web/src/references/components/CreateReference.tsx
@@ -1,8 +1,8 @@
 import { Dialog, DialogContent, DialogTitle } from "@base/Dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@base/Tabs";
+import ToggleGroup from "@base/ToggleGroup";
+import ToggleGroupItem from "@base/ToggleGroupItem";
 import { useState } from "react";
-import EmptyReference from "./EmptyReference";
-import ImportReference from "./ImportReference";
+import { CreateReferenceForm } from "./CreateReferenceForm";
 
 type CreateReferenceProps = {
 	open: boolean;
@@ -13,47 +13,33 @@ type CreateReferenceProps = {
  * The create reference view with options to create an empty reference or import a reference
  */
 export function CreateReference({ open, onOpenChange }: CreateReferenceProps) {
-	const [tab, setTab] = useState<"empty" | "import">("empty");
+	const [mode, setMode] = useState<"empty" | "import">("empty");
 
 	function handleOpenChange(open: boolean) {
 		onOpenChange(open);
 		if (!open) {
-			setTab("empty");
+			setMode("empty");
 		}
 	}
 
 	function handleSuccess() {
 		onOpenChange(false);
-		setTab("empty");
+		setMode("empty");
 	}
 
 	return (
 		<Dialog open={open} onOpenChange={handleOpenChange}>
 			<DialogContent size="lg">
 				<DialogTitle>Create Reference</DialogTitle>
-				<Tabs
-					value={tab}
-					onValueChange={(value) => setTab(value as "empty" | "import")}
+				<ToggleGroup
+					className="mb-4"
+					value={mode}
+					onValueChange={(value) => setMode(value as "empty" | "import")}
 				>
-					<TabsList>
-						<TabsTrigger value="empty">Empty</TabsTrigger>
-						<TabsTrigger value="import">Import</TabsTrigger>
-					</TabsList>
-					<TabsContent
-						value="empty"
-						forceMount
-						className="data-[state=inactive]:hidden"
-					>
-						<EmptyReference onSuccess={handleSuccess} />
-					</TabsContent>
-					<TabsContent
-						value="import"
-						forceMount
-						className="data-[state=inactive]:hidden"
-					>
-						<ImportReference onSuccess={handleSuccess} />
-					</TabsContent>
-				</Tabs>
+					<ToggleGroupItem value="empty">Empty</ToggleGroupItem>
+					<ToggleGroupItem value="import">Import</ToggleGroupItem>
+				</ToggleGroup>
+				<CreateReferenceForm mode={mode} onSuccess={handleSuccess} />
 			</DialogContent>
 		</Dialog>
 	);
diff --git a/apps/web/src/references/components/CreateReferenceForm.tsx b/apps/web/src/references/components/CreateReferenceForm.tsx
new file mode 100644
index 000000000..c7f7b3429
--- /dev/null
+++ b/apps/web/src/references/components/CreateReferenceForm.tsx
@@ -0,0 +1,179 @@
+import Alert from "@base/Alert";
+import { DialogFooter } from "@base/Dialog";
+import InputError from "@base/InputError";
+import InputGroup from "@base/InputGroup";
+import InputLabel from "@base/InputLabel";
+import InputSimple from "@base/InputSimple";
+import ProgressBarAffixed from "@base/ProgressBarAffixed";
+import SaveButton from "@base/SaveButton";
+import TextArea from "@base/TextArea";
+import { useNavigate } from "@tanstack/react-router";
+import { useId } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { UploadBar } from "@/uploads/components/UploadBar";
+import {
+	useCreateReference,
+	useImportReference,
+	useUploadReference,
+} from "../queries";
+
+type FormValues = {
+	name: string;
+	description: string;
+	organism: string;
+	upload: string;
+};
+
+type CreateReferenceFormProps = {
+	mode: "empty" | "import";
+	onSuccess: () => void;
+};
+
+/**
+ * A form for creating a reference from scratch or by importing a file, sharing
+ * name and description between the two modes
+ */
+export function CreateReferenceForm({
+	mode,
+	onSuccess,
+}: CreateReferenceFormProps) {
+	const navigate = useNavigate();
+	const createMutation = useCreateReference();
+	const importMutation = useImportReference();
+	const { uploadMutation, fileName, uploadId, progress } = useUploadReference();
+
+	const nameId = useId();
+	const organismId = useId();
+	const descriptionId = useId();
+
+	const {
+		control,
+		formState: { errors },
+		handleSubmit,
+		register,
+	} = useForm<FormValues>({
+		defaultValues: {
+			name: "",
+			description: "",
+			organism: "",
+			upload: "",
+		},
+	});
+
+	function handleDrop(acceptedFiles: File[]) {
+		const file = acceptedFiles[0];
+		if (file === undefined) {
+			return;
+		}
+
+		uploadMutation.mutate(file);
+	}
+
+	function onSubmit(values: FormValues) {
+		if (mode === "import") {
+			if (uploadId === null) {
+				return;
+			}
+
+			importMutation.mutate(
+				{
+					name: values.name,
+					description: values.description,
+					importFrom: uploadId,
+				},
+				{
+					onSuccess: () => {
+						navigate({ to: "/refs", replace: true });
+						onSuccess();
+					},
+				},
+			);
+
+			return;
+		}
+
+		createMutation.mutate(
+			{
+				name: values.name,
+				description: values.description,
+				organism: values.organism,
+			},
+			{
+				onSuccess: () => {
+					navigate({ to: "/refs" });
+					onSuccess();
+				},
+			},
+		);
+	}
+
+	const uploadBarMessage =
+		fileName || (progress === 0 ? "Drag file here to upload" : "Uploading...");
+
+	return (
+		<form onSubmit={handleSubmit(onSubmit)}>
+			{mode === "import" && (
+				<>
+					<Alert>
+						<strong>
+							Create a reference from a file previously exported from another
+							Virtool reference.
+						</strong>
+					</Alert>
+
+					<Controller
+						control={control}
+						name="upload"
+						rules={{ required: "A reference file must be uploaded" }}
+						render={({ field: { onChange } }) => (
+							<div className="mb-4">
+								<ProgressBarAffixed color="green" now={progress} />
+								<UploadBar
+									message={uploadBarMessage}
+									onDrop={(acceptedFiles) => {
+										handleDrop(acceptedFiles);
+										const file = acceptedFiles[0];
+										if (file) {
+											onChange(file.name);
+										}
+									}}
+									multiple={false}
+								/>
+
+								<InputError>{errors.upload?.message}</InputError>
+							</div>
+						)}
+					/>
+				</>
+			)}
+
+			<InputGroup className="pb-0">
+				<InputLabel htmlFor={nameId}>Name</InputLabel>
+				<InputSimple
+					id={nameId}
+					{...register("name", { required: "Required Field" })}
+				/>
+				<InputError>{errors.name?.message}</InputError>
+			</InputGroup>
+
+			{mode === "empty" && (
+				<InputGroup>
+					<InputLabel htmlFor={organismId}>Organism</InputLabel>
+					<InputSimple id={organismId} {...register("organism")} />
+				</InputGroup>
+			)}
+
+			<InputGroup>
+				<InputLabel htmlFor={descriptionId}>Description</InputLabel>
+				<TextArea id={descriptionId} {...register("description")} />
+			</InputGroup>
+
+			<DialogFooter>
+				<SaveButton
+					altText={mode === "import" ? "Import" : "Save"}
+					disabled={mode === "import" && progress > 0 && uploadId === null}
+				/>
+			</DialogFooter>
+		</form>
+	);
+}
diff --git a/apps/web/src/references/components/EmptyReference.tsx b/apps/web/src/references/components/EmptyReference.tsx
deleted file mode 100644
index 911315c46..000000000
--- a/apps/web/src/references/components/EmptyReference.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import Button from "@base/Button";
-import { DialogFooter } from "@base/Dialog";
-import { useNavigate } from "@tanstack/react-router";
-import { useForm } from "react-hook-form";
-import { useCreateReference } from "../queries";
-import { ReferenceForm } from "./ReferenceForm";
-
-type FormValues = {
-	name: string;
-	description: string;
-	organism: string;
-};
-
-type EmptyReferenceProps = {
-	onSuccess?: () => void;
-};
-
-/**
- * A form for creating an empty reference
- */
-export default function EmptyReference({ onSuccess }: EmptyReferenceProps) {
-	const navigate = useNavigate();
-
-	const mutation = useCreateReference();
-
-	const {
-		formState: { errors },
-		handleSubmit,
-		register,
-	} = useForm<FormValues>({
-		defaultValues: {
-			name: "",
-			description: "",
-			organism: "",
-		},
-	});
-
-	return (
-		<form
-			onSubmit={handleSubmit((values) =>
-				mutation.mutate(values, {
-					onSuccess: () => {
-						navigate({ to: "/refs" });
-						onSuccess?.();
-					},
-				}),
-			)}
-		>
-			<ReferenceForm errors={errors} mode="empty" register={register} />
-			<DialogFooter>
-				<Button type="submit" color="blue">
-					Save
-				</Button>
-			</DialogFooter>
-		</form>
-	);
-}
diff --git a/apps/web/src/references/components/ImportReference.tsx b/apps/web/src/references/components/ImportReference.tsx
deleted file mode 100644
index 8f9b6bd89..000000000
--- a/apps/web/src/references/components/ImportReference.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import Alert from "@base/Alert";
-import { DialogFooter } from "@base/Dialog";
-import InputError from "@base/InputError";
-import InputGroup from "@base/InputGroup";
-import InputLabel from "@base/InputLabel";
-import InputSimple from "@base/InputSimple";
-import ProgressBarAffixed from "@base/ProgressBarAffixed";
-import SaveButton from "@base/SaveButton";
-import { useNavigate } from "@tanstack/react-router";
-import { useId } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { UploadBar } from "@/uploads/components/UploadBar";
-import { useImportReference, useUploadReference } from "../queries";
-
-type ImportReferenceProps = {
-	onSuccess?: () => void;
-};
-
-export default function ImportReference({ onSuccess }: ImportReferenceProps) {
-	const navigate = useNavigate();
-	const nameId = useId();
-	const descriptionId = useId();
-
-	const importMutation = useImportReference();
-	const { uploadMutation, fileName, uploadId, progress } = useUploadReference();
-
-	const {
-		control,
-		formState: { errors },
-		handleSubmit,
-		register,
-	} = useForm({
-		defaultValues: {
-			name: "",
-			description: "",
-			upload: "",
-		},
-	});
-
-	function handleDrop(acceptedFiles: File[]) {
-		const file = acceptedFiles[0];
-		if (file === undefined) {
-			return;
-		}
-
-		uploadMutation.mutate(file);
-	}
-
-	const uploadBarMessage =
-		fileName || (progress === 0 ? "Drag file here to upload" : "Uploading...");
-
-	return (
-		<>
-			<Alert>
-				<strong>
-					Create a reference from a file previously exported from another
-					Virtool reference.
-				</strong>
-			</Alert>
-
-			<Controller
-				control={control}
-				name="upload"
-				rules={{ required: true }}
-				render={({ field: { onChange } }) => (
-					<div className="mb-4">
-						<ProgressBarAffixed color="green" now={progress} />
-						<UploadBar
-							message={uploadBarMessage}
-							onDrop={(acceptedFiles) => {
-								handleDrop(acceptedFiles);
-								const file = acceptedFiles[0];
-								if (file) {
-									onChange(file.name);
-								}
-							}}
-							multiple={false}
-						/>
-
-						<InputError>
-							{errors.upload?.type === "required" &&
-								"A reference file must be uploaded"}
-						</InputError>
-					</div>
-				)}
-			/>
-
-			<form
-				onSubmit={handleSubmit((values) => {
-					if (uploadId === null) {
-						return;
-					}
-					importMutation.mutate(
-						{ ...values, importFrom: uploadId },
-						{
-							onSuccess: () => {
-								navigate({ to: "/refs", replace: true });
-								onSuccess?.();
-							},
-						},
-					);
-				})}
-			>
-				<InputGroup>
-					<InputLabel htmlFor={nameId}>Name</InputLabel>
-					<InputSimple id={nameId} {...register("name", { required: true })} />
-					<InputError>{errors.name?.type && "A name is required."}</InputError>
-				</InputGroup>
-				<InputGroup>
-					<InputLabel htmlFor={descriptionId}>Description</InputLabel>
-					<InputSimple
-						as="textarea"
-						id={descriptionId}
-						{...register("description")}
-					/>
-				</InputGroup>
-
-				<DialogFooter>
-					<SaveButton
-						disabled={progress > 0 && uploadId === null}
-						altText="Import"
-					/>
-				</DialogFooter>
-			</form>
-		</>
-	);
-}
diff --git a/apps/web/src/references/components/__tests__/CreateReference.test.tsx b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
index d8b6a4858..ea1509896 100644
--- a/apps/web/src/references/components/__tests__/CreateReference.test.tsx
+++ b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
@@ -1,4 +1,4 @@
-import { screen, within } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders } from "@tests/setup";
 import { describe, expect, it } from "vitest";
@@ -13,37 +13,54 @@ describe("<CreateReference />", () => {
 		expect(screen.queryByText("Create Reference")).not.toBeInTheDocument();
 	});
 
-	it("should default to the Empty tab when opened", () => {
+	it("should default to the Empty mode when opened", () => {
 		renderWithProviders(
 			<CreateReference open={true} onOpenChange={() => {}} />,
 		);
 
 		expect(screen.getByText("Create Reference")).toBeInTheDocument();
-		expect(screen.getByRole("tab", { name: "Empty" })).toHaveAttribute(
+		expect(screen.getByRole("radio", { name: "Empty" })).toHaveAttribute(
 			"data-state",
-			"active",
+			"on",
 		);
+		expect(
+			screen.getByRole("textbox", { name: "Organism" }),
+		).toBeInTheDocument();
 	});
 
-	it("should preserve input values when switching between tabs", async () => {
+	it("should preserve name and description when switching between modes", async () => {
 		renderWithProviders(
 			<CreateReference open={true} onOpenChange={() => {}} />,
 		);
 
-		const emptyPanel = screen.getByRole("tabpanel", { name: "Empty" });
 		await userEvent.type(
-			within(emptyPanel).getByRole("textbox", { name: "Name" }),
+			screen.getByRole("textbox", { name: "Name" }),
 			"Test Reference",
 		);
+		await userEvent.type(
+			screen.getByRole("textbox", { name: "Description" }),
+			"A description",
+		);
 
-		await userEvent.click(screen.getByRole("tab", { name: "Import" }));
-		await userEvent.click(screen.getByRole("tab", { name: "Empty" }));
+		await userEvent.click(screen.getByRole("radio", { name: "Import" }));
 
+		expect(screen.getByRole("textbox", { name: "Name" })).toHaveValue(
+			"Test Reference",
+		);
+		expect(screen.getByRole("textbox", { name: "Description" })).toHaveValue(
+			"A description",
+		);
 		expect(
-			within(screen.getByRole("tabpanel", { name: "Empty" })).getByRole(
-				"textbox",
-				{ name: "Name" },
-			),
-		).toHaveValue("Test Reference");
+			screen.queryByRole("textbox", { name: "Organism" }),
+		).not.toBeInTheDocument();
+
+		await userEvent.click(screen.getByRole("radio", { name: "Empty" }));
+
+		expect(screen.getByRole("textbox", { name: "Name" })).toHaveValue(
+			"Test Reference",
+		);
+		expect(screen.getByRole("textbox", { name: "Description" })).toHaveValue(
+			"A description",
+		);
 	});
 });
diff --git a/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx b/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
new file mode 100644
index 000000000..56a13e323
--- /dev/null
+++ b/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
@@ -0,0 +1,110 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mockApiCreateReference } from "@tests/fake/references";
+import { renderWithRouter } from "@tests/setup";
+import nock from "nock";
+import { describe, expect, it } from "vitest";
+import { CreateReferenceForm } from "../CreateReferenceForm";
+
+describe("<CreateReferenceForm />", () => {
+	describe("mode='empty'", () => {
+		it("should display error and block submission when name is empty", async () => {
+			await renderWithRouter(
+				<CreateReferenceForm mode="empty" onSuccess={() => {}} />,
+			);
+
+			await userEvent.click(screen.getByRole("button", { name: "Save" }));
+
+			expect(screen.getByText("Required Field")).toBeInTheDocument();
+		});
+
+		it("should submit and call onSuccess when name is provided", async () => {
+			const scope = mockApiCreateReference("Test Reference", "", "");
+
+			let succeeded = false;
+			await renderWithRouter(
+				<CreateReferenceForm
+					mode="empty"
+					onSuccess={() => {
+						succeeded = true;
+					}}
+				/>,
+			);
+
+			await userEvent.type(
+				screen.getByRole("textbox", { name: "Name" }),
+				"Test Reference",
+			);
+			await userEvent.click(screen.getByRole("button", { name: "Save" }));
+
+			await screen.findByRole("button", { name: "Save" });
+			expect(succeeded).toBe(true);
+			scope.done();
+		});
+	});
+
+	describe("mode='import'", () => {
+		it("should upload file and import reference", async () => {
+			const scope = nock("http://localhost");
+
+			scope
+				.post("/api/uploads?name=external.json.gz&type=reference")
+				.reply(200, {
+					id: 12,
+					name: "external.json.gz",
+				});
+
+			scope
+				.post("/api/refs", {
+					name: "External",
+					description: "External reference",
+					import_from: 12,
+				})
+				.reply(201, {
+					id: "foo",
+					name: "External",
+					description: "External reference",
+				});
+
+			await renderWithRouter(
+				<CreateReferenceForm mode="import" onSuccess={() => {}} />,
+			);
+
+			await userEvent.upload(
+				screen.getByLabelText("Upload file"),
+				new File(['{"test": true}'], "external.json.gz", {
+					type: "application/gzip",
+				}),
+			);
+			await userEvent.type(
+				screen.getByRole("textbox", { name: "Name" }),
+				"External",
+			);
+			await userEvent.type(
+				screen.getByRole("textbox", { name: "Description" }),
+				"External reference",
+			);
+			await userEvent.click(screen.getByRole("button", { name: "Import" }));
+
+			expect(scope.isDone()).toBeTruthy();
+		});
+
+		it("should display errors when file or name missing", async () => {
+			await renderWithRouter(
+				<CreateReferenceForm mode="import" onSuccess={() => {}} />,
+			);
+
+			expect(
+				screen.queryByText("A reference file must be uploaded"),
+			).not.toBeInTheDocument();
+			expect(screen.queryByText("Required Field")).not.toBeInTheDocument();
+
+			await userEvent.click(screen.getByRole("button", { name: "Import" }));
+
+			expect(
+				screen.getByText("A reference file must be uploaded"),
+			).toBeInTheDocument();
+			expect(screen.getByText("Required Field")).toBeInTheDocument();
+		});
+	});
+});
diff --git a/apps/web/src/references/components/__tests__/EmptyReference.test.tsx b/apps/web/src/references/components/__tests__/EmptyReference.test.tsx
deleted file mode 100644
index 7db1e2137..000000000
--- a/apps/web/src/references/components/__tests__/EmptyReference.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { mockApiCreateReference } from "@tests/fake/references";
-import { renderWithProviders } from "@tests/setup";
-import { describe, expect, it } from "vitest";
-import EmptyReference from "../EmptyReference";
-
-describe("<EmptyReference />", () => {
-	it("should display error and block submission when name is empty", async () => {
-		renderWithProviders(<EmptyReference />);
-
-		await userEvent.click(screen.getByRole("button", { name: "Save" }));
-
-		expect(screen.getByText("Required Field")).toBeInTheDocument();
-	});
-
-	it("should submit when name length is non-zero", async () => {
-		const scope = mockApiCreateReference("Test Reference", "", "");
-
-		renderWithProviders(<EmptyReference />);
-
-		await userEvent.type(
-			screen.getByRole("textbox", { name: "Name" }),
-			"Test Reference",
-		);
-		await userEvent.click(screen.getByRole("button", { name: "Save" }));
-
-		scope.done();
-	});
-
-	it("should submit all filled fields", async () => {
-		const name = "Test Reference";
-		const organism = "Virus";
-		const description = "A collection of pathogenic virus genomes.";
-
-		const scope = mockApiCreateReference(name, description, organism);
-		renderWithProviders(<EmptyReference />);
-
-		await userEvent.type(screen.getByRole("textbox", { name: "Name" }), name);
-		await userEvent.type(
-			screen.getByRole("textbox", { name: "Organism" }),
-			organism,
-		);
-		await userEvent.type(
-			screen.getByRole("textbox", { name: "Description" }),
-			description,
-		);
-		await userEvent.click(screen.getByRole("button", { name: "Save" }));
-
-		scope.done();
-	});
-});
diff --git a/apps/web/src/references/components/__tests__/ImportReference.test.tsx b/apps/web/src/references/components/__tests__/ImportReference.test.tsx
deleted file mode 100644
index d4d64794b..000000000
--- a/apps/web/src/references/components/__tests__/ImportReference.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { renderWithProviders } from "@tests/setup";
-import nock from "nock";
-import { describe, expect, it } from "vitest";
-import ImportReference from "../ImportReference";
-
-describe("<ImportReference />", () => {
-	it("should upload file and import reference", async () => {
-		const scope = nock("http://localhost");
-
-		scope.post("/api/uploads?name=external.json.gz&type=reference").reply(200, {
-			id: 12,
-			name: "external.json.gz",
-		});
-
-		scope
-			.post("/api/refs", {
-				name: "External",
-				description: "External reference",
-				import_from: 12,
-			})
-			.reply(201, {
-				id: "foo",
-				name: "External",
-				description: "External reference",
-			});
-
-		renderWithProviders(<ImportReference />);
-
-		await userEvent.upload(
-			screen.getByLabelText("Upload file"),
-			new File(['{"test": true}'], "external.json.gz", {
-				type: "application/gzip",
-			}),
-		);
-		await userEvent.type(screen.getByLabelText("Name"), "External");
-		await userEvent.type(
-			screen.getByLabelText("Description"),
-			"External reference",
-		);
-		await userEvent.click(screen.getByRole("button", { name: "Import" }));
-
-		expect(scope.isDone()).toBeTruthy();
-	});
-
-	it("should display errors when file or name missing", async () => {
-		renderWithProviders(<ImportReference />);
-
-		expect(
-			screen.queryByText("A reference file must be uploaded"),
-		).not.toBeInTheDocument();
-		expect(screen.queryByText("A name is required.")).not.toBeInTheDocument();
-
-		await userEvent.click(screen.getByRole("button", { name: "Import" }));
-
-		expect(
-			screen.getByText("A reference file must be uploaded"),
-		).toBeInTheDocument();
-		expect(screen.getByText("A name is required.")).toBeInTheDocument();
-	});
-});

From 49bdde7aa260cc70f84f93fd2fa6b539cabec4bd Mon Sep 17 00:00:00 2001
From: Ian Boyes <igboyes@gmail.com>
Date: Wed, 8 Jul 2026 10:29:59 -0700
Subject: [PATCH 3/4] fix: clarify empty vs import options and simplify
 create-reference button

Swap the create-reference method toggle for the existing SelectBox
component so each option carries a description instead of just a
label, and drop the now-redundant import alert. Also make the submit
button always read "Create" instead of switching text by method.
---
 .../references/components/CreateReference.tsx | 25 +++++---
 .../components/CreateReferenceForm.tsx        | 58 ++++++++-----------
 .../__tests__/CreateReference.test.tsx        |  6 +-
 .../__tests__/CreateReferenceForm.test.tsx    | 10 ++--
 4 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/apps/web/src/references/components/CreateReference.tsx b/apps/web/src/references/components/CreateReference.tsx
index 99c05538b..cc23341ae 100644
--- a/apps/web/src/references/components/CreateReference.tsx
+++ b/apps/web/src/references/components/CreateReference.tsx
@@ -1,6 +1,5 @@
 import { Dialog, DialogContent, DialogTitle } from "@base/Dialog";
-import ToggleGroup from "@base/ToggleGroup";
-import ToggleGroupItem from "@base/ToggleGroupItem";
+import { SelectBox, SelectBoxItem } from "@base/SelectBox";
 import { useState } from "react";
 import { CreateReferenceForm } from "./CreateReferenceForm";
 
@@ -31,14 +30,24 @@ export function CreateReference({ open, onOpenChange }: CreateReferenceProps) {
 		<Dialog open={open} onOpenChange={handleOpenChange}>
 			<DialogContent size="lg">
 				<DialogTitle>Create Reference</DialogTitle>
-				<ToggleGroup
-					className="mb-4"
-					value={mode}
+				<SelectBox
+					className="grid-cols-2"
+					label="Method"
 					onValueChange={(value) => setMode(value as "empty" | "import")}
+					value={mode}
 				>
-					<ToggleGroupItem value="empty">Empty</ToggleGroupItem>
-					<ToggleGroupItem value="import">Import</ToggleGroupItem>
-				</ToggleGroup>
+					<SelectBoxItem value="empty">
+						<div>Empty</div>
+						<span>Start from a blank reference.</span>
+					</SelectBoxItem>
+					<SelectBoxItem value="import">
+						<div>Import</div>
+						<span>
+							Create a reference from a file previously exported from another
+							Virtool reference.
+						</span>
+					</SelectBoxItem>
+				</SelectBox>
 				<CreateReferenceForm mode={mode} onSuccess={handleSuccess} />
 			</DialogContent>
 		</Dialog>
diff --git a/apps/web/src/references/components/CreateReferenceForm.tsx b/apps/web/src/references/components/CreateReferenceForm.tsx
index c7f7b3429..5699321c0 100644
--- a/apps/web/src/references/components/CreateReferenceForm.tsx
+++ b/apps/web/src/references/components/CreateReferenceForm.tsx
@@ -1,4 +1,3 @@
-import Alert from "@base/Alert";
 import { DialogFooter } from "@base/Dialog";
 import InputError from "@base/InputError";
 import InputGroup from "@base/InputGroup";
@@ -113,38 +112,29 @@ export function CreateReferenceForm({
 	return (
 		<form onSubmit={handleSubmit(onSubmit)}>
 			{mode === "import" && (
-				<>
-					<Alert>
-						<strong>
-							Create a reference from a file previously exported from another
-							Virtool reference.
-						</strong>
-					</Alert>
-
-					<Controller
-						control={control}
-						name="upload"
-						rules={{ required: "A reference file must be uploaded" }}
-						render={({ field: { onChange } }) => (
-							<div className="mb-4">
-								<ProgressBarAffixed color="green" now={progress} />
-								<UploadBar
-									message={uploadBarMessage}
-									onDrop={(acceptedFiles) => {
-										handleDrop(acceptedFiles);
-										const file = acceptedFiles[0];
-										if (file) {
-											onChange(file.name);
-										}
-									}}
-									multiple={false}
-								/>
-
-								<InputError>{errors.upload?.message}</InputError>
-							</div>
-						)}
-					/>
-				</>
+				<Controller
+					control={control}
+					name="upload"
+					rules={{ required: "A reference file must be uploaded" }}
+					render={({ field: { onChange } }) => (
+						<div className="mb-4">
+							<ProgressBarAffixed color="green" now={progress} />
+							<UploadBar
+								message={uploadBarMessage}
+								onDrop={(acceptedFiles) => {
+									handleDrop(acceptedFiles);
+									const file = acceptedFiles[0];
+									if (file) {
+										onChange(file.name);
+									}
+								}}
+								multiple={false}
+							/>
+
+							<InputError>{errors.upload?.message}</InputError>
+						</div>
+					)}
+				/>
 			)}
 
 			<InputGroup className="pb-0">
@@ -170,7 +160,7 @@ export function CreateReferenceForm({
 
 			<DialogFooter>
 				<SaveButton
-					altText={mode === "import" ? "Import" : "Save"}
+					altText="Create"
 					disabled={mode === "import" && progress > 0 && uploadId === null}
 				/>
 			</DialogFooter>
diff --git a/apps/web/src/references/components/__tests__/CreateReference.test.tsx b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
index ea1509896..4c044601f 100644
--- a/apps/web/src/references/components/__tests__/CreateReference.test.tsx
+++ b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
@@ -19,7 +19,7 @@ describe("<CreateReference />", () => {
 		);
 
 		expect(screen.getByText("Create Reference")).toBeInTheDocument();
-		expect(screen.getByRole("radio", { name: "Empty" })).toHaveAttribute(
+		expect(screen.getByRole("radio", { name: /Empty/i })).toHaveAttribute(
 			"data-state",
 			"on",
 		);
@@ -42,7 +42,7 @@ describe("<CreateReference />", () => {
 			"A description",
 		);
 
-		await userEvent.click(screen.getByRole("radio", { name: "Import" }));
+		await userEvent.click(screen.getByRole("radio", { name: /Import/i }));
 
 		expect(screen.getByRole("textbox", { name: "Name" })).toHaveValue(
 			"Test Reference",
@@ -54,7 +54,7 @@ describe("<CreateReference />", () => {
 			screen.queryByRole("textbox", { name: "Organism" }),
 		).not.toBeInTheDocument();
 
-		await userEvent.click(screen.getByRole("radio", { name: "Empty" }));
+		await userEvent.click(screen.getByRole("radio", { name: /Empty/i }));
 
 		expect(screen.getByRole("textbox", { name: "Name" })).toHaveValue(
 			"Test Reference",
diff --git a/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx b/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
index 56a13e323..147ca6fdb 100644
--- a/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
+++ b/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
@@ -13,7 +13,7 @@ describe("<CreateReferenceForm />", () => {
 				<CreateReferenceForm mode="empty" onSuccess={() => {}} />,
 			);
 
-			await userEvent.click(screen.getByRole("button", { name: "Save" }));
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
 
 			expect(screen.getByText("Required Field")).toBeInTheDocument();
 		});
@@ -35,9 +35,9 @@ describe("<CreateReferenceForm />", () => {
 				screen.getByRole("textbox", { name: "Name" }),
 				"Test Reference",
 			);
-			await userEvent.click(screen.getByRole("button", { name: "Save" }));
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
 
-			await screen.findByRole("button", { name: "Save" });
+			await screen.findByRole("button", { name: "Create" });
 			expect(succeeded).toBe(true);
 			scope.done();
 		});
@@ -84,7 +84,7 @@ describe("<CreateReferenceForm />", () => {
 				screen.getByRole("textbox", { name: "Description" }),
 				"External reference",
 			);
-			await userEvent.click(screen.getByRole("button", { name: "Import" }));
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
 
 			expect(scope.isDone()).toBeTruthy();
 		});
@@ -99,7 +99,7 @@ describe("<CreateReferenceForm />", () => {
 			).not.toBeInTheDocument();
 			expect(screen.queryByText("Required Field")).not.toBeInTheDocument();
 
-			await userEvent.click(screen.getByRole("button", { name: "Import" }));
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
 
 			expect(
 				screen.getByText("A reference file must be uploaded"),

From e5e6ee0bf3fe72c28daf237f0326766d3163e8f8 Mon Sep 17 00:00:00 2001
From: Ian Boyes <igboyes@gmail.com>
Date: Wed, 8 Jul 2026 10:44:16 -0700
Subject: [PATCH 4/4] fix: surface an error if create-reference import submits
 before upload finishes

Address PR review feedback: submitting the import form while the
upload is still in flight (form validation passes once a file is
chosen, before its upload resolves) silently did nothing. Surface a
field error instead. Also switch CreateReference tests to
renderWithRouter for consistency, since CreateReferenceForm calls
useNavigate.
---
 .../components/CreateReferenceForm.tsx        |  4 +++
 .../__tests__/CreateReference.test.tsx        | 12 ++++-----
 .../__tests__/CreateReferenceForm.test.tsx    | 27 +++++++++++++++++++
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/references/components/CreateReferenceForm.tsx b/apps/web/src/references/components/CreateReferenceForm.tsx
index 5699321c0..01fb5dce4 100644
--- a/apps/web/src/references/components/CreateReferenceForm.tsx
+++ b/apps/web/src/references/components/CreateReferenceForm.tsx
@@ -50,6 +50,7 @@ export function CreateReferenceForm({
 		formState: { errors },
 		handleSubmit,
 		register,
+		setError,
 	} = useForm<FormValues>({
 		defaultValues: {
 			name: "",
@@ -71,6 +72,9 @@ export function CreateReferenceForm({
 	function onSubmit(values: FormValues) {
 		if (mode === "import") {
 			if (uploadId === null) {
+				setError("upload", {
+					message: "Please wait for the upload to finish",
+				});
 				return;
 			}
 
diff --git a/apps/web/src/references/components/__tests__/CreateReference.test.tsx b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
index 4c044601f..6a6e7ee4d 100644
--- a/apps/web/src/references/components/__tests__/CreateReference.test.tsx
+++ b/apps/web/src/references/components/__tests__/CreateReference.test.tsx
@@ -1,20 +1,20 @@
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders } from "@tests/setup";
+import { renderWithRouter } from "@tests/setup";
 import { describe, expect, it } from "vitest";
 import { CreateReference } from "../CreateReference";
 
 describe("<CreateReference />", () => {
-	it("should not render dialog content when closed", () => {
-		renderWithProviders(
+	it("should not render dialog content when closed", async () => {
+		await renderWithRouter(
 			<CreateReference open={false} onOpenChange={() => {}} />,
 		);
 
 		expect(screen.queryByText("Create Reference")).not.toBeInTheDocument();
 	});
 
-	it("should default to the Empty mode when opened", () => {
-		renderWithProviders(
+	it("should default to the Empty mode when opened", async () => {
+		await renderWithRouter(
 			<CreateReference open={true} onOpenChange={() => {}} />,
 		);
 
@@ -29,7 +29,7 @@ describe("<CreateReference />", () => {
 	});
 
 	it("should preserve name and description when switching between modes", async () => {
-		renderWithProviders(
+		await renderWithRouter(
 			<CreateReference open={true} onOpenChange={() => {}} />,
 		);
 
diff --git a/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx b/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
index 147ca6fdb..22cd69b6b 100644
--- a/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
+++ b/apps/web/src/references/components/__tests__/CreateReferenceForm.test.tsx
@@ -89,6 +89,33 @@ describe("<CreateReferenceForm />", () => {
 			expect(scope.isDone()).toBeTruthy();
 		});
 
+		it("should surface an error when submitted before the upload finishes", async () => {
+			nock("http://localhost")
+				.post("/api/uploads?name=external.json.gz&type=reference")
+				.delay(100)
+				.reply(200, { id: 12, name: "external.json.gz" });
+
+			await renderWithRouter(
+				<CreateReferenceForm mode="import" onSuccess={() => {}} />,
+			);
+
+			await userEvent.upload(
+				screen.getByLabelText("Upload file"),
+				new File(['{"test": true}'], "external.json.gz", {
+					type: "application/gzip",
+				}),
+			);
+			await userEvent.type(
+				screen.getByRole("textbox", { name: "Name" }),
+				"External",
+			);
+			await userEvent.click(screen.getByRole("button", { name: "Create" }));
+
+			expect(
+				screen.getByText("Please wait for the upload to finish"),
+			).toBeInTheDocument();
+		});
+
 		it("should display errors when file or name missing", async () => {
 			await renderWithRouter(
 				<CreateReferenceForm mode="import" onSuccess={() => {}} />,