fix: Properly validate optionality with the new valid domain restrictions

Author: dawsontoth

src/features/clusters/upsert/ClusterDetails.tsx

@@ -14,7 +14,7 @@ import { Suspense, useEffect, useMemo } from 'react';
 import { UseFormReturn, useFormState } from 'react-hook-form';
 import { ClusterRegions } from './ClusterRegions';
 import { ClusterInstances } from './components/ClusterInstances';
-import { UpsertClusterSchema, UpsertClusterSchemaType } from './upsertClusterSchema';
+import { specifiedAbbreviatedName, UpsertClusterSchema, UpsertClusterSchemaType } from './upsertClusterSchema';
 
 interface ClusterDetailsProps {
 	calculatedNames: { suggestedAbbreviatedName: string; fullHostName: string };
@@ -245,7 +245,7 @@ export function ClusterDetails({
 											<Input
 												{...field}
 												type="text"
-												maxLength={UpsertClusterSchema.shape.abbreviatedName.unwrap().maxLength!}
+												maxLength={specifiedAbbreviatedName.maxLength!}
 												autoCapitalize="none"
 												autoComplete="off"
 												autoCorrect="off"

src/features/clusters/upsert/ClusterForm.tsx

@@ -27,7 +27,7 @@ import { ClusterDetails } from './ClusterDetails';
 import { calculateInstanceFQDN } from './lib/calculateInstanceFQDN';
 import { pickDefaultDeploymentPerformanceAndRegionPlans } from './lib/pickDefaultDeploymentPerformanceAndRegionPlans';
 import { PriceDisplay } from './PriceDisplay';
-import { UpsertClusterSchema, UpsertClusterSchemaType } from './upsertClusterSchema';
+import { specifiedAbbreviatedName, UpsertClusterSchema, UpsertClusterSchemaType } from './upsertClusterSchema';
 
 interface ClusterFormProps {
 	alreadyUsingFree: boolean;
@@ -225,7 +225,7 @@ export function ClusterForm({
 	const calculatedNames = useMemo(() => {
 		const suggestedAbbreviatedName = collapseKebabsToMaxLength(
 			toKebabCase(clusterName),
-			UpsertClusterSchema.shape.abbreviatedName.unwrap().maxLength!,
+			specifiedAbbreviatedName.maxLength!,
 		);
 		return {
 			suggestedAbbreviatedName,

src/features/clusters/upsert/upsertClusterSchema.test.ts

@@ -92,9 +92,9 @@ describe('UpsertClusterSchema', () => {
 			expect(result.success).toBe(true);
 		});
 
-		it('invalidates empty string (must match regex if provided)', () => {
+		it('allows it to be optional (empty string)', () => {
 			const result = validateAbbreviated('');
-			expect(result.success).toBe(false);
+			expect(result.success).toBe(true);
 		});
 	});
 

src/features/clusters/upsert/upsertClusterSchema.tsx

@@ -2,18 +2,23 @@ import { hostNameRegex } from '@/lib/string/regex/hostNameRegex';
 import { maxPortNumber, minPortNumber } from '@/lib/types/portNumbers';
 import { z } from 'zod';
 
+export const specifiedAbbreviatedName = z
+	.string()
+	.max(20, 'Must be at most 20 characters long.')
+	.regex(
+		/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/,
+		'Can only contain lowercase letters, numbers and dashes. Must not start or end with a dash.',
+	);
+
 export const UpsertClusterSchema = z.object({
 	clusterName: z.string()
 		.nonempty('Please enter a cluster name.')
 		.max(255, 'Cluster name cannot be longer than 255 characters long.'),
-	abbreviatedName: z
-		.string()
-		.max(20, 'Must be at most 20 characters long.')
-		.regex(
-			/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/,
-			'Can only contain lowercase letters, numbers and dashes. Must not start or end with a dash.',
-		)
-		.optional(),
+	abbreviatedName: z.union([
+		z.literal(''),
+		z.undefined(),
+		specifiedAbbreviatedName,
+	]),
 	fqdn: z
 		.string()
 		.regex(hostNameRegex, 'Please enter a valid host name without the port or any path.')

src/features/organizations/components/NewOrgForm.tsx

@@ -10,7 +10,7 @@ import { Input } from '@/components/ui/input';
 import { currentUserQueryKey } from '@/features/auth/queries/getCurrentUser';
 import { authStore, OverallAppSignIn } from '@/features/auth/store/authStore';
 import { useCreateNewOrganizationMutation } from '@/features/organizations/hooks/useCreateNewOrganization';
-import { NewOrganizationSchema } from '@/features/organizations/mutations/newOrganizationSchema';
+import { NewOrganizationSchema, specifiedSubdomain } from '@/features/organizations/mutations/newOrganizationSchema';
 import { useCloudAuth } from '@/hooks/useAuth';
 import { collapseKebabsToMaxLength } from '@/lib/string/collapseKebabsToMaxLength';
 import { toKebabCase } from '@/lib/string/to-kebab-case';
@@ -45,7 +45,7 @@ export function NewOrgForm() {
 	const calculatedNames = useMemo(() => {
 		const suggestedSubdomain = collapseKebabsToMaxLength(
 			toKebabCase(name),
-			NewOrganizationSchema.shape.subdomain.maxLength!,
+			specifiedSubdomain.maxLength!,
 		);
 		return {
 			suggestedSubdomain,
@@ -102,7 +102,7 @@ export function NewOrgForm() {
 								<FormControl>
 									<Input
 										type="text"
-										maxLength={NewOrganizationSchema.shape.subdomain.maxLength!}
+										maxLength={specifiedSubdomain.maxLength!}
 										autoCapitalize="none"
 										placeholder={calculatedNames.suggestedSubdomain}
 										{...field}

src/features/organizations/mutations/newOrganizationSchema.test.ts

@@ -75,18 +75,18 @@ describe('NewOrganizationSchema', () => {
 			const result = validateSubdomain('a'.repeat(63));
 			expect(result.success).toBe(false);
 			if (!result.success) {
-				expect(result.error.issues[0].message).toBe('The subdomain cannot be longer than 62 characters.');
+				expect(result.error.issues[0].message).toBe('Must be at most 62 characters long.');
 			}
 		});
 
-		it('is required', () => {
+		it('can be left blank (undefined)', () => {
 			const result = validateSubdomain(undefined);
-			expect(result.success).toBe(false);
+			expect(result.success).toBe(true);
 		});
 
-		it('invalidates empty string (must match regex)', () => {
+		it('can be left blank (empty string)', () => {
 			const result = validateSubdomain('');
-			expect(result.success).toBe(false);
+			expect(result.success).toBe(true);
 		});
 	});
 });

src/features/organizations/mutations/newOrganizationSchema.ts

@@ -1,18 +1,22 @@
 import { z } from 'zod';
 
+export const specifiedSubdomain = z
+	.string()
+	.max(62, { error: 'Must be at most 62 characters long.' })
+	.regex(/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/, {
+		error:
+			'Please only use lowercase letters, digits and dashes (-) in the subdomain. Must not start or end with a dash.',
+	});
+
 export const NewOrganizationSchema = z.object({
 	name: z
 		.string()
 		.max(255, {
 			error: 'Name cannot be longer than 255 characters.',
 		}),
-	subdomain: z
-		.string()
-		.max(62, {
-			error: 'The subdomain cannot be longer than 62 characters.',
-		})
-		.regex(/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/, {
-			error:
-				'Please only use lowercase letters, digits and dashes (-) in the subdomain. Must not start or end with a dash.',
-		}),
+	subdomain: z.union([
+		z.literal(''),
+		z.undefined(),
+		specifiedSubdomain,
+	]),
 });