Fix Count and ReferenceManyCount should allow to override the default sort

docs/Count.md

@@ -68,12 +68,13 @@ const TicketListAside = () => {
 
 ## Props
 
-| Prop       | Required | Type   | Default | Description                                                             |
-| ---------- | -------- | ------ | ------- | ----------------------------------------------------------------------- |
-| `filter`   | Optional | Object | -       | Filter to apply to the query.                                           |
-| `link`     | Optional | bool   | `false` | If true, the count is wrapped in a `<Link>` to the list view.           |
-| `resource` | Optional | string | -       | Resource to count. Default to the current `ResourceContext`             |
-| `timeout`  | Optional | number | 1000    | Number of milliseconds to wait before displaying the loading indicator. |
+| Prop       | Required | Type                                       | Default                           | Description                                                             |
+| ---------- | -------- | ------------------------------------------ | --------------------------------- | ----------------------------------------------------------------------- |
+| `filter`   | Optional | Object                                     | -                                 | Filter to apply to the query.                                           |
+| `link`     | Optional | bool                                       | `false`                           | If true, the count is wrapped in a `<Link>` to the list view.           |
+| `resource` | Optional | string                                     | -                                 | Resource to count. Default to the current `ResourceContext`             |
+| `sort`     | Optional | `{ field: string, order: 'ASC' or 'DESC' }` | `{ field: 'id', order: 'DESC' }`  | The sort option sent to `getList`                                       |
+| `timeout`  | Optional | number                                     | 1000                              | Number of milliseconds to wait before displaying the loading indicator. |
 
 Additional props are passed to [the underlying MUI `<Typography>` element](https://mui.com/material-ui/api/typography/).
 
@@ -116,6 +117,16 @@ If you want to count a different resource, pass it as the `resource` prop.
 <Count resource="comments" />
 ```
 
+## `sort`
+
+If you want to customize the sort options passed to `getList` (for instance because your table does not have an `id` column), you can pass a custom `sort` prop:
+
+{% raw %}
+```jsx
+<Count resource="posts" sort={{ field: 'custom_id', order: 'ASC' }} />;
+```
+{% endraw %}
+
 ## `timeout`
 
 The `<Count>` component displays a loading indicator after 1 second. This is useful to avoid displaying a loading indicator when the count is retrieved in a few milliseconds. You can change this delay by passing a `timeout` prop.

docs/ReferenceManyCount.md

@@ -60,14 +60,15 @@ export const PostList = () => (
 
 ## Props
 
-| Prop        | Required | Type   | Default | Description                                                               |
-| ----------- | -------- | ------ | ------- | ------------------------------------------------------------------------- |
-| `reference` | Required | string | -       | Name of the related resource to fetch (e.g. `comments`)                   |
-| `target`    | Required | string | -       | Name of the field in the related resource that points to the current one. |
-| `filter`    | Optional | Object | -       | Filter to apply to the query.                                             |
-| `link`      | Optional | bool   | `false` | If true, the count is wrapped in a `<Link>` to the filtered list view.    |
-| `resource`  | Optional | string | -       | Resource to count. Default to the current `ResourceContext`               |
-| `timeout`   | Optional | number | 1000    | Number of milliseconds to wait before displaying the loading indicator.   |
+| Prop        | Required | Type                                       | Default                           | Description                                                               |
+| ----------- | -------- | ------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------- |
+| `reference` | Required | string                                     | -                                 | Name of the related resource to fetch (e.g. `comments`)                   |
+| `target`    | Required | string                                     | -                                 | Name of the field in the related resource that points to the current one. |
+| `filter`    | Optional | Object                                     | -                                 | Filter to apply to the query.                                             |
+| `link`      | Optional | bool                                       | `false`                           | If true, the count is wrapped in a `<Link>` to the filtered list view.    |
+| `resource`  | Optional | string                                     | -                                 | Resource to count. Default to the current `ResourceContext`               |
+| `sort`      | Optional | `{ field: string, order: 'ASC' or 'DESC' }` | `{ field: 'id', order: 'DESC' }`  | The sort option sent to `getManyReference`                                |
+| `timeout`   | Optional | number                                     | 1000                              | Number of milliseconds to wait before displaying the loading indicator.   |
 
 `<ReferenceManyCount>` also accepts the [common field props](./Fields.md#common-field-props).
 
@@ -140,6 +141,21 @@ By default, the `<ReferenceManyCount>` component uses the current `ResourceConte
 />
 ```
 
+## `sort`
+
+If you want to customize the sort options passed to `getManyReference` (for instance because your relation table does not have an `id` column), you can pass a custom `sort` prop:
+
+{% raw %}
+```jsx
+<ReferenceManyCount 
+    label="Comments"
+    reference="comments"
+    target="post_id"
+    sort={{ field: 'custom_id', order: 'ASC' }}
+/>
+```
+{% endraw %}
+
 ## `target`
 
 The `target` prop is required and must be the name of the field in the related resource that points to the current one. For instance, when fetching the number of comments related to the current post, if a comment relates to a post via a `post_id` foreign key, you must set the `target` prop to `post_id`:

packages/ra-ui-materialui/src/field/ReferenceManyCount.spec.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { Basic, ErrorState, WithFilter } from './ReferenceManyCount.stories';
+import {
+    Basic,
+    ErrorState,
+    WithFilter,
+    Wrapper,
+} from './ReferenceManyCount.stories';
+import { ReferenceManyCount } from './ReferenceManyCount';
 
 describe('<ReferenceManyCount />', () => {
     it('should return the number of related records of a given reference', async () => {
@@ -17,4 +23,26 @@ describe('<ReferenceManyCount />', () => {
         render(<WithFilter />);
         await screen.findByText('2');
     });
+    it('should accept a sort prop', async () => {
+        const dataProvider = {
+            getManyReference: jest.fn(),
+        } as any;
+        render(
+            <Wrapper dataProvider={dataProvider}>
+                <ReferenceManyCount
+                    reference="comments"
+                    target="post_id"
+                    sort={{ field: 'custom_id', order: 'ASC' }}
+                />
+            </Wrapper>
+        );
+        expect(dataProvider.getManyReference).toHaveBeenCalledWith('comments', {
+            target: 'post_id',
+            id: 1,
+            filter: {},
+            pagination: { page: 1, perPage: 1 },
+            sort: { field: 'custom_id', order: 'ASC' },
+            meta: undefined,
+        });
+    });
 });

packages/ra-ui-materialui/src/field/ReferenceManyCount.stories.tsx

@@ -11,6 +11,7 @@ import { ReferenceManyCount } from './ReferenceManyCount';
 
 export default {
     title: 'ra-ui-materialui/fields/ReferenceManyCount',
+    excludeStories: ['Wrapper'],
 };
 
 const post = {
@@ -25,7 +26,7 @@ const comments = [
     { id: 5, post_id: 2, is_published: false },
 ];
 
-const Wrapper = ({ dataProvider, children }) => (
+export const Wrapper = ({ dataProvider, children }) => (
     <MemoryRouter>
         <DataProviderContext.Provider value={dataProvider}>
             <QueryClientProvider

packages/ra-ui-materialui/src/field/ReferenceManyCount.tsx

@@ -4,6 +4,7 @@ import {
     useRecordContext,
     useTimeout,
     useCreatePath,
+    SortPayload,
 } from 'ra-core';
 import { Typography, TypographyProps, CircularProgress } from '@mui/material';
 import ErrorIcon from '@mui/icons-material/Error';
@@ -31,6 +32,7 @@ export const ReferenceManyCount = (props: ReferenceManyCountProps) => {
         reference,
         target,
         filter,
+        sort,
         link,
         resource,
         source = 'id',
@@ -43,6 +45,7 @@ export const ReferenceManyCount = (props: ReferenceManyCountProps) => {
 
     const { isLoading, error, total } = useReferenceManyFieldController({
         filter,
+        sort,
         page: 1,
         perPage: 1,
         record,
@@ -99,6 +102,7 @@ export interface ReferenceManyCountProps
         Omit<TypographyProps, 'textAlign'> {
     reference: string;
     target: string;
+    sort?: SortPayload;
     filter?: any;
     label?: string;
     link?: boolean;

packages/ra-ui-materialui/src/list/Count.spec.tsx

@@ -1,7 +1,9 @@
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
+import * as React from 'react';
 
-import { Basic, ErrorState, WithFilter } from './Count.stories';
+import { ResourceContextProvider } from 'ra-core';
+import { Count } from './Count';
+import { Basic, ErrorState, WithFilter, Wrapper } from './Count.stories';
 
 describe('<Count />', () => {
     it('should return the number of records of a given resource', async () => {
@@ -17,4 +19,22 @@ describe('<Count />', () => {
         render(<WithFilter />);
         await screen.findByText('3');
     });
+    it('should accept a sort prop', async () => {
+        const dataProvider = {
+            getList: jest.fn(),
+        } as any;
+        render(
+            <Wrapper dataProvider={dataProvider}>
+                <ResourceContextProvider value="posts">
+                    <Count sort={{ field: 'custom_id', order: 'ASC' }} />
+                </ResourceContextProvider>
+            </Wrapper>
+        );
+        expect(dataProvider.getList).toHaveBeenCalledWith('posts', {
+            filter: {},
+            pagination: { page: 1, perPage: 1 },
+            sort: { field: 'custom_id', order: 'ASC' },
+            meta: undefined,
+        });
+    });
 });

packages/ra-ui-materialui/src/list/Count.stories.tsx

@@ -7,6 +7,7 @@ import { Count } from './Count';
 
 export default {
     title: 'ra-ui-materialui/list/Count',
+    excludeStories: ['Wrapper'],
 };
 
 const posts = [
@@ -17,7 +18,7 @@ const posts = [
     { id: 5, is_published: false },
 ];
 
-const Wrapper = ({ dataProvider, children }) => (
+export const Wrapper = ({ dataProvider, children }) => (
     <MemoryRouter>
         <DataProviderContext.Provider value={dataProvider}>
             <QueryClientProvider

packages/ra-ui-materialui/src/list/Count.tsx

@@ -4,6 +4,7 @@ import {
     useGetList,
     useTimeout,
     useCreatePath,
+    SortPayload,
 } from 'ra-core';
 import { Typography, TypographyProps, CircularProgress } from '@mui/material';
 import ErrorIcon from '@mui/icons-material/Error';
@@ -32,6 +33,7 @@ import { Link } from '../Link';
 export const Count = (props: CountProps) => {
     const {
         filter,
+        sort,
         link,
         resource: resourceFromProps,
         timeout = 1000,
@@ -43,6 +45,7 @@ export const Count = (props: CountProps) => {
 
     const { total, isLoading, error } = useGetList(resource, {
         filter,
+        sort,
         pagination: { perPage: 1, page: 1 },
     });
 
@@ -80,6 +83,7 @@ export const Count = (props: CountProps) => {
 
 export interface CountProps extends TypographyProps {
     filter?: any;
+    sort?: SortPayload;
     link?: Boolean;
     resource?: string;
     timeout?: number;