feat(ui): add 32-character limit validation for scan name in create a… (#8319)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

ui/CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Navigation link in Scans view to access Compliance Overview [(#8251)](https://github.com/prowler-cloud/prowler/pull/8251)
 - Status column for findings table in the Compliance Detail view [(#8244)](https://github.com/prowler-cloud/prowler/pull/8244)
 - Allow to restrict routes access based on user permissions [(#8287)](https://github.com/prowler-cloud/prowler/pull/8287)
+- Max character limit validation for Scan label [(#8319)](https://github.com/prowler-cloud/prowler/pull/8319)
 
 ### Security
 

ui/components/scans/launch-workflow/launch-scan-workflow-form.tsx

@@ -29,9 +29,13 @@ export const LaunchScanWorkflow = ({
   const formSchema = z.object({
     ...onDemandScanFormSchema().shape,
     scanName: z
-      .string()
-      .min(3, "Must have at least 3 characters")
-      .or(z.literal(""))
+      .union([
+        z
+          .string()
+          .min(3, "Must be at least 3 characters")
+          .max(32, "Must not exceed 32 characters"),
+        z.literal(""),
+      ])
       .optional(),
   });
 
@@ -101,7 +105,7 @@ export const LaunchScanWorkflow = ({
                   animate={{ opacity: 1, x: 0 }}
                   exit={{ opacity: 0, x: -50 }}
                   transition={{ duration: 0.3 }}
-                  className="min-w-48 self-end"
+                  className="h-[3.4rem] min-w-[15.2rem] self-end"
                 >
                   <CustomInput
                     control={form.control}

ui/types/formSchemas.ts

@@ -34,7 +34,10 @@ export const editScanFormSchema = (currentName: string) =>
     scanName: z
       .string()
       .refine((val) => val === "" || val.length >= 3, {
-        message: "The alias must be empty or have at least 3 characters.",
+        message: "Must be empty or have at least 3 characters.",
+      })
+      .refine((val) => val === "" || val.length <= 32, {
+        message: "Must not exceed 32 characters.",
       })
       .refine((val) => val !== currentName, {
         message: "The new name must be different from the current one.",