Admin UI is not hierarchical like it should

[tkrotoff]

Payload Version

3.0.0-beta.68

Node Version

20.12.2

Next.js Version

15.0.0-canary.53

Describe the Bug

I have a GlobalConfig named Homepage
In it I have one entry named "VisualLinks" which contains multiple links

Here the definition (no problem here):

const Homepage: GlobalConfig = {
  slug: "homepage",
  access: {
    read: () => true,
  },
  fields: [
    {
      name: "visualLinks",
      type: "group",
      fields: [
        {
          name: "title",
          type: "text",
          required: true,
        },
        {
          name: "links",
          type: "array",
          required: true,
          fields: [
            {
              name: "label",
              type: "text",
              required: true,
            },
            {
              name: "url",
              type: "text",
              required: true,
            },
          ],
        },
      ],
    },
  ],
};

Here the JSON returned (no problem here):

{
  "id": 1,

  "visualLinks": {
    "title": "Shop by Sport",

    "links": [
      {
        "id": "66a020c210a06138c707c926",
        "label": "Festival days",
        "url": "/shop-in-shop/festivals"
      },

      {
        "id": "66a0f8fa580ff342c10dd25c",
        "label": "Kayaking",
        "url": "/sports/kayaking"
      }
    ]
  },

  "globalType": "homepage"
}

• And now the UI admin:

==> it does not respect the hierarchy defined

• Compared this to the UI in Strapi where it is perfectly clear links is inside visualLinks:

• Same for Storyblok:

• Same for Contentful (working a bit differently, but still):

Reproduction Steps

Create a hierarchy of components, go to admin and see the hierarchy is not displayed like it should.

[jmikrut]

Hey @tkrotoff — you can actually customize the Label component for your field group if you'd like to set it to an H2. You could also customize the Label for the Array field if you'd like that one to be an h4 or similar. But this is specific to your application, and there is no elegant way for Payload to be able to discern which heading to render automatically given the vast amount of different potential combinations of fields.

The hierarchy from Storyblok / Strapi comes from the fact that their "group" field renders a gray background container for its sub-fields and that is something that we are unlikely to do (at least for now). Our "group" field uses a top and bottom border to separate itself from other fields, but we are open to changing this in the future if we can come up with a design pattern that fits the UX of Payload (avoiding having the light gray background container).

I will convert this to a feature discussion so that we can track it accordingly, and others can weigh in!