#7106: fixes empty label being replaced by field name (#7107)

* fixes empty label being replaced by field name

* fixes failing tests

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();
   });
 

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>
       )}

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();
+  });
 });