Merge pull request marmelab#10334 from marmelab/fix-datagrid-header-sort-label

Fix Datagrid header tooltip sometimes indicates the wrong sort order

Author: djhi

packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.spec.tsx

@@ -41,11 +41,11 @@ describe('<DatagridHeaderCell />', () => {
         await screen.findByText('ID');
         await screen.findByLabelText('Sort by Id descending');
         await screen.findByText('TITLE');
-        await screen.findByLabelText('Sort by Title descending');
+        await screen.findByLabelText('Sort by Title ascending');
         await screen.findByText('AUTHOR');
-        await screen.findByLabelText('Sort by Author descending');
+        await screen.findByLabelText('Sort by Author ascending');
         await screen.findByText('YEAR');
-        await screen.findByLabelText('Sort by Year descending');
+        await screen.findByLabelText('Sort by Year ascending');
     });
 
     describe('sorting on a column', () => {

packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx

@@ -7,10 +7,15 @@ import { TableCellProps } from '@mui/material/TableCell';
 import {
     FieldTitle,
     useTranslate,
-    SortPayload,
     useResourceContext,
     useTranslateLabel,
 } from 'ra-core';
+import type { SortPayload } from 'ra-core';
+
+const oppositeOrder: Record<SortPayload['order'], SortPayload['order']> = {
+    ASC: 'DESC',
+    DESC: 'ASC',
+};
 
 export const DatagridHeaderCell = (
     props: DatagridHeaderCellProps
@@ -20,6 +25,13 @@ export const DatagridHeaderCell = (
 
     const translate = useTranslate();
     const translateLabel = useTranslateLabel();
+    const nextSortOrder = field
+        ? sort && sort.field === (field.props.sortBy || field.props.source)
+            ? // active sort field, use opposite order
+              oppositeOrder[sort.order]
+            : // non active sort field, use default order
+              field?.props.sortByOrder ?? 'ASC'
+        : undefined;
     const sortLabel = translate('ra.sort.sort_by', {
         field: field
             ? translateLabel({
@@ -31,7 +43,7 @@ export const DatagridHeaderCell = (
                   source: field.props.source,
               })
             : undefined,
-        order: translate(`ra.sort.${sort?.order === 'ASC' ? 'DESC' : 'ASC'}`),
+        order: translate(`ra.sort.${nextSortOrder}`),
         _: translate('ra.action.sort'),
     });