[POC] Allow fields to be grouped in admin app

[kschingiz]

trafficstars

Hi, I have some django framework background, it has very good feature to group item fields into separated blocks. I was playing with keystone and decided to try to implement it. This PR adds new fieldGroups field to schema config:

keystone.createList('Event', {
  fields: {
    name: { type: Text },
    status: { type: Select, options: 'draft, active', defaultValue: 'draft' },
    themeColor: { type: Text },
    startTime: { type: DateTime },
    durationMins: { type: Integer },
    description: { type: Text },
    locationAddress: { type: Text },
    locationDescription: { type: Text },
    maxRsvps: { type: Integer, defaultValue: 120 },
    isRsvpAvailable: { type: Checkbox, defaultValue: true },
  },
  fieldGroups: [
    {
      label: 'Base',
      fields: ['name', 'status', 'description', 'startTime']
    },
    {
      label: 'Location',
      fields: ['locationAddress', 'locationDescription']
    },
    {
      label: 'Misc',
      fields: ['maxRsvps', 'isRsvpAvailable', 'themeColor']
    },
  ]
});

Admin app will separate fields into 3 blocks: Base, Location, Misc and render their appropriate fields. This feature will give us more control over:

1. Which fields should be hidden, in this case you just remove it from the fields array
2. In which order fields should be displayed
3. Logically separate fields into blocks

This is a very first commit, code still needs to be cleaned up. The result of the schema above:

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 1a1d23383ed1a976e9380874aa684649e0c20607

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/keystonejs/keystone-next-docs/eew43n3jc
✅ Preview: https://keystone-next-git-fork-kschingiz-allow-fields-to-be-gro-0b2e16.keystonejs.vercel.app

[gautamsi]

I like this.

alternate config (do not make changes before hearing from the core team, I am just giving my opinion)

keystone.createList('Event', {
  fields: {
    name: { type: Text, group:  'Base' },
    status: { type: Select, options: 'draft, active', defaultValue: 'draft', group:  'Base'  },
    themeColor: { type: Text, group:  'Misc'  },
    startTime: { type: DateTime, group:  'Base'  },
    durationMins: { type: Integer  },
    description: { type: Text, group:  'Base'  },
    locationAddress: { type: Text, group:  'Location'  },
    locationDescription: { type: Text, group:  'Location'  },
    maxRsvps: { type: Integer, defaultValue: 120, group:  'Misc'  },
    isRsvpAvailable: { type: Checkbox, defaultValue: true, group:  'Misc'  },
  },
});

Only thing is devs would have to sort fields in way they want in display.

It would also be nice feature to have these groups collapsible and default collapse option as in original configs.

I believe this also qualifies for the UI customization rather than built in field feature. UI customization would be handled in separate file ./admin-ui/index.js and would not clutter schema definition.

[stale[bot]]

It looks like there hasn't been any activity here in over 6 months. Sorry about that! We've flagged this issue for special attention. It wil be manually reviewed by maintainers, not automatically closed. If you have any additional information please leave us a comment. It really helps! Thank you for you contribution. :)

[dcousens]

This pull request wasn't up to date with keystone-6, but for posterity, this feature has been added in https://github.com/keystonejs/keystone/pull/8088