gcp cluster name limit on fe (#4458)

dashboard/src/lib/clusters/types.ts

@@ -434,6 +434,13 @@ const clusterNameValidator = z
   .regex(/^[a-z0-9-]{1,61}$/, {
     message: 'Lowercase letters, numbers, and "-" only.',
   });
+const gkeClusterNameValidator = z
+  .string()
+  .min(1, { message: "Name must be at least 1 character" })
+  .max(20, { message: "Name must be max 20 characters" })
+  .regex(/^[a-z0-9-]{1,61}$/, {
+    message: 'Lowercase letters, numbers, and "-" only.',
+  });
 const eksConfigValidator = z.object({
   kind: z.literal("EKS"),
   clusterName: clusterNameValidator,
@@ -491,7 +498,7 @@ const eksConfigValidator = z.object({
 });
 const gkeConfigValidator = z.object({
   kind: z.literal("GKE"),
-  clusterName: clusterNameValidator,
+  clusterName: gkeClusterNameValidator,
   clusterVersion: z.string().optional().default(""),
   region: gcpRegionValidator,
   nodeGroups: gkeNodeGroupValidator.array(),

dashboard/src/main/home/infrastructure-dashboard/forms/gcp/CreateGKEClusterForm.tsx

@@ -28,9 +28,9 @@ const CreateGKEClusterForm: React.FC<Props> = ({
   const { reportToAnalytics } = useClusterAnalytics();
 
   useEffect(() => {
-    const projectNameLimit = 31 - "-cluster-".length - 6; // 6 characters for the random suffix
+    const projectNameLimit = 20 - 7; // 7 characters for the random suffix, 20 for max length of entire cluster name
     const truncatedProjectName = projectName.substring(0, projectNameLimit);
-    const clusterName = `${truncatedProjectName}-cluster-${Math.random()
+    const clusterName = `${truncatedProjectName}-${Math.random()
       .toString(36)
       .substring(2, 8)}`;