fix: Rename system to cluster

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

Author: dawsontoth

src/features/clusters/upsert/ClusterDetails.tsx

@@ -92,14 +92,14 @@ export function ClusterDetails({
 		<div className="grid grid-cols-3 gap-6 text-white md:grid-cols-6">
 			<FormField
 				control={form.control}
-				name="systemName"
+				name="clusterName"
 				render={({ field }) => (
 					<FormItem className="col-span-3 md:col-span-6">
-						<FormLabel className="pb-1">Harper System Name</FormLabel>
+						<FormLabel className="pb-1">Cluster Name</FormLabel>
 						<FormControl>
 							<Input
 								type="text"
-								maxLength={UpsertClusterSchema.shape.systemName.maxLength!}
+								maxLength={UpsertClusterSchema.shape.clusterName.maxLength!}
 								autoCapitalize="words"
 								disabled={!!clusterId}
 								{...field} />

src/features/clusters/upsert/ClusterForm.tsx

@@ -151,7 +151,7 @@ export function ClusterForm({
 		}
 	}, [defaultValues, firstTime, setSavedClusterState]);
 
-	const systemName = form.watch('systemName');
+	const clusterName = form.watch('clusterName');
 	const abbreviatedName = form.watch('abbreviatedName');
 	const selectedDeployment = form.watch('deploymentDescription');
 	const selectedPerformance = form.watch('performanceDescription');
@@ -202,14 +202,14 @@ export function ClusterForm({
 
 	const calculatedNames = useMemo(() => {
 		const suggestedAbbreviatedName = collapseKebabsToMaxLength(
-			toKebabCase(systemName),
+			toKebabCase(clusterName),
 			UpsertClusterSchema.shape.abbreviatedName.unwrap().maxLength!,
 		);
 		return {
 			suggestedAbbreviatedName,
 			fullHostName: `${abbreviatedName || suggestedAbbreviatedName}.${organization.subdomain || 'your-org'}.harperfabric.com`,
 		};
-	}, [systemName, abbreviatedName, organization]);
+	}, [clusterName, abbreviatedName, organization]);
 	const selectedPlan = useMemo(() =>
 		deploymentToPerformanceToPlan?.[selectedDeployment]?.[selectedPerformance], [deploymentToPerformanceToPlan, selectedDeployment, selectedPerformance]);
 
@@ -340,7 +340,7 @@ export function ClusterForm({
 					: (formData.abbreviatedName || calculatedNames.suggestedAbbreviatedName),
 				autoRenew: true,
 				fqdn: isSelfManaged && formData.fqdn || undefined,
-				name: formData.systemName,
+				name: formData.clusterName,
 				organizationId,
 				regionPlans: plans,
 			}, {
@@ -375,11 +375,9 @@ export function ClusterForm({
 			{!confirmingPaymentDetails
 				? (<>
 					<h1 className="text-lg leading-none text-white font-semibold mb-4">Cluster Configuration</h1>
-					<p className="text-muted-foreground text-sm mb-6">Configure your Harper system and define
-						deployment
-						plans.</p>
+					<p className="text-muted-foreground text-sm mb-6">
+						Configure your Harper cluster and define deployment plans.</p>
 
-					<h1 className="text-lg leading-none text-white font-semibold mb-4">System</h1>
 					<form onSubmit={form.handleSubmit(submitClusterDetailsForm)}>
 						<ClusterDetails
 							calculatedNames={calculatedNames}

src/features/clusters/upsert/index.tsx

@@ -110,7 +110,7 @@ export function UpsertCluster() {
 
 		return {
 			autoRenew: cluster?.plans?.[0]?.autoRenew ?? true,
-			systemName: cluster?.name ?? '',
+			clusterName: cluster?.name ?? '',
 			abbreviatedName: cluster?.abbreviatedName ?? '',
 			deploymentDescription: selectedPlan?.deploymentDescription ?? defaults?.deploymentDescription ?? '',
 			performanceDescription: selectedPlan?.performanceDescription ?? defaults?.performanceDescription ?? '',

src/features/clusters/upsert/upsertClusterSchema.tsx

@@ -3,9 +3,9 @@ import { maxPortNumber, minPortNumber } from '@/lib/types/portNumbers';
 import { z } from 'zod';
 
 export const UpsertClusterSchema = z.object({
-	systemName: z.string()
-		.nonempty('Please enter a system name.')
-		.max(255, 'System name cannot be longer than 255 characters long.'),
+	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.')