feat: Add ids and names to all forms

https://harperdb.atlassian.net/browse/STUDIO-653

Author: dawsontoth

src/features/auth/ClusterInstanceSignIn.tsx

@@ -106,7 +106,12 @@ export function ClusterInstanceSignIn() {
 						Sign in to Harper {properNoun}
 					</h2>
 					<Form {...methods}>
-						<form onSubmit={handleSubmit(submitForm)} className="my-4">
+						<form
+							id={`auth-${commonNoun}-signin-form`}
+							name={`auth-${commonNoun}-signin-form`}
+							onSubmit={handleSubmit(submitForm)}
+							className="my-4"
+						>
 							<FormField
 								control={control}
 								name="username"

src/features/auth/ForgotPassword.tsx

@@ -57,7 +57,12 @@ export function ForgotPassword() {
 			<h2 className="text-2xl font-light">Enter your account email</h2>
 			<p className="text-sm pt-1">If a matching account exists, we'll send you a password reset link.</p>
 			<Form {...methods}>
-				<form onSubmit={handleSubmit(submitForm)} className="my-4">
+				<form
+					id="auth-forgot-password-form"
+					name="auth-forgot-password-form"
+					onSubmit={handleSubmit(submitForm)}
+					className="my-4"
+				>
 					<FormField
 						control={control}
 						name="email"

src/features/auth/ResetPassword.tsx

@@ -74,7 +74,12 @@ export function ResetPassword() {
 		<div className="text-white w-xs">
 			<h2 className="text-2xl font-light">Reset Password</h2>
 			<Form {...methods}>
-				<form className="my-4" onSubmit={handleSubmit(submitForm)}>
+				<form
+					id="auth-reset-password-form"
+					name="auth-reset-password-form"
+					className="my-4"
+					onSubmit={handleSubmit(submitForm)}
+				>
 					<FormField
 						control={control}
 						name="password"

src/features/auth/SignIn.tsx

@@ -33,7 +33,12 @@ export function SignIn() {
 		<div className="text-white w-xs">
 			<h2 className="text-2xl font-light">Sign in to Harper Fabric</h2>
 			<Form {...methods}>
-				<form onSubmit={handleSubmit(submitForm)} className="my-4">
+				<form
+					id="auth-signin-form"
+					name="auth-signin-form"
+					onSubmit={handleSubmit(submitForm)}
+					className="my-4"
+				>
 					<FormField
 						control={control}
 						name="email"

src/features/auth/SignUp.tsx

@@ -103,7 +103,12 @@ export function SignUp() {
 			<hr className="border-gray-600" />
 
 			<Form {...methods}>
-				<form onSubmit={handleSubmit(submitForm)} className="grid gap-4 my-4">
+				<form
+					id="auth-signup-form"
+					name="auth-signup-form"
+					onSubmit={handleSubmit(submitForm)}
+					className="grid gap-4 my-4"
+				>
 					<FormField
 						control={control}
 						name="firstname"

src/features/auth/VerifyEmail.tsx

@@ -54,7 +54,12 @@ function SendEmailVerification() {
 	return (
 		<Form {...methods}>
 			<p className="text-sm py-2">Please Enter an Email</p>
-			<form onSubmit={handleSubmit(submitForm)} className="my-4">
+			<form
+				id="auth-verify-email-form"
+				name="auth-verify-email-form"
+				onSubmit={handleSubmit(submitForm)}
+				className="my-4"
+			>
 				<FormField
 					control={control}
 					name="email"

src/features/cluster/FinishSetup.tsx

@@ -98,15 +98,20 @@ export function FinishSetup() {
 			<nav className="fixed top-20 w-full h-12 z-39 px-4 md:px-12 bg-grey-700 flex items-center">
 				<Breadcrumbs />
 			</nav>
-			<div className="items-center justify-center flex mt-32 py-4 min-h-[calc(100vh-theme(spacing.32))]">
+			<div className="items-center justify-center flex mt-32 py-4 min-h-[calc(100vh-(--spacing(32)))]">
 				<div className="text-white w-xs">
 					<h2 className="text-2xl font-light">Create Admin User</h2>
 					<p className="text-muted-foreground">
 						You are ready to create your first user in your new cluster. These credentials belong to you alone, and you
 						can create more users and roles once you create this first one.
 					</p>
 					<Form {...methods}>
-						<form onSubmit={handleSubmit(submitForm)} className="my-4">
+						<form
+							id="cluster-create-admin-form"
+							name="cluster-create-admin-form"
+							onSubmit={handleSubmit(submitForm)}
+							className="my-4"
+						>
 							<FormField
 								control={control}
 								name="username"

src/features/cluster/domains/Management.tsx

@@ -131,6 +131,8 @@ export function DomainsManagement() {
 				{update && (
 					<Form {...form}>
 						<form
+							id="cluster-create-domain-form"
+							name="cluster-create-domain-form"
 							onSubmit={form.handleSubmit(onSubmitClick)}
 							className="flex gap-1 flex-col md:flex-row"
 						>

src/features/clusters/upsert/ClusterForm.tsx

@@ -463,7 +463,11 @@ export function ClusterForm({
 								Configure your Harper cluster and define deployment plans.
 							</p>
 
-							<form onSubmit={form.handleSubmit(submitClusterDetailsForm)}>
+							<form
+								id="cluster-upsert-form"
+								name="cluster-upsert-form"
+								onSubmit={form.handleSubmit(submitClusterDetailsForm)}
+							>
 								<ClusterDetails
 									calculatedNames={calculatedNames}
 									clusterId={clusterId}

src/features/instance/applications/components/NewApplication/index.tsx

@@ -116,7 +116,12 @@ export function NewApplication() {
 			</div>
 
 			<Form {...methods}>
-				<form onSubmit={handleSubmit(submitForm)} className="flex flex-col gap-4 p-4">
+				<form
+					id="instance-create-application-form"
+					name="instance-create-application-form"
+					onSubmit={handleSubmit(submitForm)}
+					className="flex flex-col gap-4 p-4"
+				>
 					<fieldset disabled={isImportingApplication || isCreatingFromTemplate || isReloading}>
 						<Card className="bg-black-dark">
 							<CommonInstructions