Ordered relationship select

[skeary]

Updates the admin UI for the relation type fields so that the values in the select are ordered (ascending) by the label field. This makes it easier to find an option when dealing with larger select lists.

The behavior could be made configurable within schema.ts so that ordering could be done on another field or descending rather than ascending order. I wasn't sure of the value of this so I've not made it configurable but explore this if felt useful.

[vercel]

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/3drRmbNj8LW8puvxu1kmo18xG7um
✅ Preview: https://keystone-next-docs-git-fork-skeary-orderrelat-561fd4-keystonejs.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[dcousens]

Hi @skeary ,

This is nice to have functionality!
Unfortunately, we don't necessarily want to assume what might be a natural order for this field generally.
We might want to expand this functionality to include configuration in the schema to what the default ordering is, and use that instead.

If you want to try and do that, awesome! Otherwise we'll try and expand on this pull request when we have time 👍

[skeary]

Hi @dcousens,
Thanks for the feedback. My thinking was that this was a better default - while it may not solve all use cases it wouldn't be worse for anyone and in general would be what most people wanted? It's not a problem though to add in extra configuration, and it's definitely more flexible, so am happy to have a go at this!

I think the following might be a reasonable configuration approach but just wanted to checked what you thought before I go ahead:

    ui?: {
        orderBy: false | Array<{ labelField:  'asc' | 'desc' } | { field: string, order: 'asc' | 'desc' }> | undefined,
    } | undefined;

With examples of use in schema.ts:

      author: relationship({ ref: 'Author.posts', many: false }), // Sort by label field, ascending

      author: relationship({ ref: 'Author.posts', many: false,
        ui: {
          orderBy:  false // No ordering
        }
      }),


      author: relationship({ ref: 'Author.posts', many: false,
        ui: {
          orderBy:  [ { labelField: 'asc' }] // Sort by label field, ascending
        }
      }),

      author: relationship({ ref: 'Author.posts', many: false,
        ui: {
          orderBy:  [ { field: 'email', order: 'desc' }, { labelField: 'asc' }] // Sort by email field, descending and then label field (ascending)
        }
      }),

I've tried to make the configuration align with the GraphQL orderBy query clauses. In terms the different configuration of specifying the sort order on the label field vs named fields, I wanted to choose an approach where the TypeScript IDE help guides you on how to sort on label field.

In the future I think this could be expanded to allow custom/different sorts, since you could just union more choices onto 'asc' | 'desc'.

What do you think?

[skeary]

Note this changeset now (I think) includes a working fix for #6112. This issue was that the ui.labelField option under the relationship field config wasn't having any affect. I noticed this problem while testing my changes and have now hopefully fixed the issue. Unless I'm missing something, the support for this feature wasn't really there rather than a logic bug or similar. So I've now implemented support for this.

[skeary]

Hi @dcousens,
I've implemented the approached I outlined in a earlier comment where the configuration now supports:

 ui?: {
        orderBy: false | Array<{ labelField:  'asc' | 'desc' } | { field: string, order: 'asc' | 'desc' }> | undefined,
    } | undefined;

To me, this seems a reasonably simple way to configure the ordering and should hopefully cover the significant number of use cases. If someone doesn't want ordering they can turn off the ordering which will revert to the current behaviour. By default the ordering is still based on label field (ascending) and I think that is what is useful for most people?

I've updated the documentation to describe the new configuration options. See https://keystone-next-docs-ahungkcd8-keystonejs.vercel.app/docs/apis/fields#relationship for a rendered version.

As part of doing this changeset, I also think I've addressed #6112.

It would be great if you could review my overall approach and implementation and let me know what you think. I'm happy to tweak as needed.

Cheers,
Simon

[willemmulder]

Nice work @skeary ; let's hope this can be merged soon!

[stuible]

Would love the ability to sort relationship select and cards. Excited to see this feature merged!

[dcousens]

Replaced by #9648