From 21b82ba0ab946a2676217b034b6442f56e8c959d Mon Sep 17 00:00:00 2001
From: Graham Langford <30706330+grahamlangford@users.noreply.github.com>
Date: Tue, 12 Dec 2023 15:51:33 -0600
Subject: [PATCH] #7106: fixes empty label being replaced by field name (#7107)

* fixes empty label being replaced by field name

* fixes failing tests
---
 .../__snapshots__/customForm.test.tsx.snap    | 12 ++------
 .../ephemeralForm/EphemeralForm.test.tsx      |  3 +-
 src/components/formBuilder/FieldTemplate.tsx  |  8 +++--
 .../formBuilder/preview/FormPreview.test.tsx  | 29 +++++++++++++++++++
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/bricks/renderers/__snapshots__/customForm.test.tsx.snap b/src/bricks/renderers/__snapshots__/customForm.test.tsx.snap
index 30ebe8b571..c41e444c54 100644
--- a/src/bricks/renderers/__snapshots__/customForm.test.tsx.snap
+++ b/src/bricks/renderers/__snapshots__/customForm.test.tsx.snap
@@ -25,9 +25,7 @@ exports[`form data normalization renders normalized data 1`] = `
               <label
                 class="form-label"
                 for="root_name"
-              >
-                name
-              </label>
+              />
               <input
                 aria-describedby="root_name__error root_name__description root_name__help"
                 class="form-control"
@@ -54,9 +52,7 @@ exports[`form data normalization renders normalized data 1`] = `
               <label
                 class="form-label"
                 for="root_age"
-              >
-                age
-              </label>
+              />
               <input
                 aria-describedby="root_age__error root_age__description root_age__help"
                 class="form-control"
@@ -120,9 +116,7 @@ exports[`form data normalization renders normalized data 1`] = `
               <label
                 class="form-label"
                 for="root_rating"
-              >
-                rating
-              </label>
+              />
               <input
                 aria-describedby="root_rating__error root_rating__description root_rating__help"
                 class="form-control"
diff --git a/src/bricks/transformers/ephemeralForm/EphemeralForm.test.tsx b/src/bricks/transformers/ephemeralForm/EphemeralForm.test.tsx
index bb6b215057..ec145ab0fb 100644
--- a/src/bricks/transformers/ephemeralForm/EphemeralForm.test.tsx
+++ b/src/bricks/transformers/ephemeralForm/EphemeralForm.test.tsx
@@ -35,6 +35,7 @@ describe("EphemeralForm", () => {
         properties: {
           foo: {
             type: "string",
+            title: "Foo",
           },
         },
       },
@@ -47,7 +48,7 @@ describe("EphemeralForm", () => {
     render(<EphemeralForm />);
 
     await expect(
-      screen.findByRole("textbox", { name: "foo" }),
+      screen.findByRole("textbox", { name: /foo/i }),
     ).resolves.toBeVisible();
   });
 
diff --git a/src/components/formBuilder/FieldTemplate.tsx b/src/components/formBuilder/FieldTemplate.tsx
index 9e4563f9cd..7dc1c90810 100644
--- a/src/components/formBuilder/FieldTemplate.tsx
+++ b/src/components/formBuilder/FieldTemplate.tsx
@@ -31,8 +31,8 @@ const FieldTemplate = ({
   rawHelp,
   hidden,
   rawDescription,
-  label,
   required,
+  schema: { title },
 }: FieldTemplateProps) => {
   if (hidden) {
     return <div className="hidden">{children}</div>;
@@ -45,7 +45,11 @@ const FieldTemplate = ({
           htmlFor={id}
           className={rawErrors.length > 0 ? "text-danger" : ""}
         >
-          {label}
+          {/* Cannot use the label prop as RJSF5 defaults to the name if the title is falsy
+           * See https://github.com/rjsf-team/react-jsonschema-form/blob/e8aa9e8f2078d86a6048ff3d018bd3030d8d2aba/packages/core/src/components/fields/SchemaField.tsx#L196
+           * See https://github.com/pixiebrix/pixiebrix-extension/issues/7106
+           */}
+          {title}
           {required ? "*" : null}
         </Form.Label>
       )}
diff --git a/src/components/formBuilder/preview/FormPreview.test.tsx b/src/components/formBuilder/preview/FormPreview.test.tsx
index a08f6afd70..84559c913b 100644
--- a/src/components/formBuilder/preview/FormPreview.test.tsx
+++ b/src/components/formBuilder/preview/FormPreview.test.tsx
@@ -21,6 +21,8 @@ import testItRenders, {
 import { type Except } from "type-fest";
 import FormPreview, { type FormPreviewProps } from "./FormPreview";
 import { type Schema, type UiSchema } from "@/types/schemaTypes";
+import { render, screen } from "@testing-library/react";
+import React from "react";
 
 describe("FormPreview", () => {
   const defaultProps: Except<FormPreviewProps, "activeField"> = {
@@ -98,4 +100,31 @@ describe("FormPreview", () => {
       setActiveField: defaultProps.setActiveField,
     },
   });
+
+  test("it does not render the name as the label if the title is an empty string", () => {
+    const schema: Schema = {
+      title: "Form",
+      type: "object",
+      properties: {
+        notes: {
+          type: "string",
+          title: "",
+          description: "A note",
+        },
+      },
+    };
+    const uiSchema: UiSchema = {};
+
+    const props: FormPreviewProps = {
+      rjsfSchema: { schema, uiSchema },
+      activeField: "notes",
+      setActiveField: defaultProps.setActiveField,
+    };
+
+    render(<FormPreview {...props} />);
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("name", "root_notes");
+    expect(screen.getByText("A note")).toBeInTheDocument();
+    expect(screen.queryByText("notes")).not.toBeInTheDocument();
+  });
 });