fix(form-builder): show default label when field label is only whitespace (calcom#27793)

* fix(form-builder): show default label when field label is only whitespace

* fix: add validation to ensure label is not empty or whitespace

* fix: enhance label validation to prevent empty or whitespace labels in FormBuilder

* fix: refactor label validation in FormBuilder to streamline whitespace checks

* chore: retrigger CI (flaky vitest worker shutdown)

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: sahitya-chandra

apps/web/modules/event-types/components/tabs/advanced/FormBuilder.tsx

@@ -70,6 +70,23 @@ const getLocationFieldType = (field: RhfFormField) => {
   return baseFieldType;
 };
 
+function isWhitespaceOnly(val: unknown): boolean {
+  return typeof val === "string" && val.length > 0 && val.trim().length === 0;
+}
+
+function hasWhitespaceOnlyLabel(data: RhfFormField): boolean {
+  if (isWhitespaceOnly(data.label)) return true;
+  const variants = data.variantsConfig?.variants;
+  if (!variants) return false;
+  for (const variant of Object.values(variants)) {
+    const fields = variant?.fields ?? [];
+    for (const f of fields) {
+      if (isWhitespaceOnly(f?.label)) return true;
+    }
+  }
+  return false;
+}
+
 /**
  * It works with a react-hook-form only.
  * `formProp` specifies the name of the property in the react-hook-form that has the fields. This is where fields would be updated.
@@ -387,6 +404,11 @@ export const FormBuilder = function FormBuilder({
             const type = data.type || "text";
             const isNewField = !fieldDialog.data;
 
+            if (hasWhitespaceOnlyLabel(data)) {
+              showToast(t("label_cannot_be_whitespace"), "error");
+              return;
+            }
+
             if (data.name === "guests" && type !== "multiemail") {
               showToast(t("guests_field_must_be_multiemail"), "error");
               return;
@@ -900,12 +922,12 @@ function FieldLabel({ field }: { field: RhfFormField }) {
         <span
           dangerouslySetInnerHTML={{
             // Derive from field.label because label might change in b/w and field.labelAsSafeHtml will not be updated.
-            __html: markdownToSafeHTMLClient(field.label || t(field.defaultLabel || "") || ""),
+            __html: markdownToSafeHTMLClient(field.label?.trim() || t(field.defaultLabel || "") || ""),
           }}
         />
       );
     } else {
-      return <span>{field.label || t(field.defaultLabel || "")}</span>;
+      return <span>{field.label?.trim() || t(field.defaultLabel || "")}</span>;
     }
   }
   const variant = field.variant || defaultVariant;

packages/i18n/locales/en/common.json

@@ -1231,6 +1231,7 @@
   "additional_inputs": "Additional inputs",
   "additional_input_description": "Require scheduler to input additional inputs prior the booking is confirmed",
   "label": "Label",
+  "label_cannot_be_whitespace": "Label cannot be only whitespace",
   "placeholder": "Placeholder",
   "display_add_to_calendar_organizer": "Use \"Add to calendar\" email as the organizer",
   "display_email_as_organizer": "We'll display this email address as the organizer, and send confirmation emails here.",