Fix sorting a list using a <Datagrid> inside a <ReferenceManyField>

[Luwangel]

Fixes #5059

Several bugs are fixed:

• Fix the switch between ASC and DESC orders inside <ReferenceManyField> and <ReferenceArrayField>
• Fix sorting using another field than the default one or the first selected one

I introduced a new prop named field in the <DatagridHeaderCell> which contains the same data as the prop named sort which is now deprecated.

This renaming is motivated by the confusion introduced by two similar names (sort in <Datagrid> and sort in <DatagridHeaderCell>) containing different content. The first one contains an object { field: 'id', order: 'ASC' } named sort and the second one { sort: 'id', order: 'ASC' }.

Todo

• Fix props used to memorize the <DatagridHeaderCell>
• Fix the sorting issue of the <Datagrid>
• Fix the updateSort method in the <Datagrid> to query the right order
• Fix tests

Screenshots

[fzaninotto]

We should not introduce breaking changes at this stage. I suggest you fix the bug without renaming the arguments, and open an issue for the renaming and flag it with the breaking change tag. We'll address it for 4.0.

[fzaninotto]

The default sort order can de defined on a per field basis. You must rely on the data-order attribute.

[Luwangel]

The value of the data-order attribute should be the same as the value of the currentSort.order because the <Datagrid> controls the <DatagridHeaderCell> which has no internal logic. But I made the change because it's more understandable.

[fzaninotto]

In this new piece of code, if the user clicks on the header of a column that isn't yet used for sorting (thus currentSort.field !== newField), the sort order defaults to the ASC sort order. In the previous piece of code, the sort order defaulted to event.currentTarget.dataset.order. That's a breaking change.

You see, developers can customize the default sort order for a field using the sortByOrder prop on a Field - and that prop is stored in the header dataset. If you don't use that value, you're breaking the sortByOrder feature.

See https://marmelab.com/react-admin/List.html#specify-sort-order

[fzaninotto]

In this new piece of code, if the user clicks on the header of a column that isn't yet used for sorting (thus currentSort.field !== newField), the sort order defaults to the ASC sort order. In the previous piece of code, the sort order defaulted to event.currentTarget.dataset.order. That's a breaking change.

You see, developers can customize the default sort order for a field using the sortByOrder prop on a Field - and that prop is stored in the header dataset. If you don't use that value, you're breaking the sortByOrder feature.

See https://marmelab.com/react-admin/List.html#specify-sort-order