Merge branch 'next' into useMutationWithMutationMode

Author: djhi

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 5.10.2
+
+* Add warning when using `queryOptions` to add a `meta` in `<Edit>` and `<EditBase>` ([#10882](https://github.com/marmelab/react-admin/pull/10882)) ([Madeorsk](https://github.com/Madeorsk))
+* Fix error when authProvider check methods are not async ([#10890](https://github.com/marmelab/react-admin/pull/10890)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `ChipField` consider zero to be empty ([#10877](https://github.com/marmelab/react-admin/pull/10877)) ([djhi](https://github.com/djhi))
+* [Doc] Add Apisix OIDC auth provider ([#10888](https://github.com/marmelab/react-admin/pull/10888)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Add details about Datagrid to DataTable migration ([#10884](https://github.com/marmelab/react-admin/pull/10884)) ([Madeorsk](https://github.com/Madeorsk))
+
+## 5.10.1
+
+* Fix `<ColumnsButton>` cannot be used with keyboard ([#10869](https://github.com/marmelab/react-admin/pull/10869)) ([djhi](https://github.com/djhi))
+* Fix unused imports ([#10866](https://github.com/marmelab/react-admin/pull/10866)) ([Madeorsk](https://github.com/Madeorsk))
+* Fix `<ReferenceArrayInput>` does not accept `alwaysOn` prop ([#10863](https://github.com/marmelab/react-admin/pull/10863)) ([djhi](https://github.com/djhi))
+* Fix `DateInput` JSDoc formatting and example ([#10855](https://github.com/marmelab/react-admin/pull/10855)) ([ogroppo](https://github.com/ogroppo))
+* Fix B&W theme label is invisible for inputs with `standard` variant ([#10854](https://github.com/marmelab/react-admin/pull/10854)) ([djhi](https://github.com/djhi))
+* Fix Show and Edit controllers can trigger a redirect loop with react-router v7 if getOne rejects ([#10850](https://github.com/marmelab/react-admin/pull/10850)) ([slax57](https://github.com/slax57))
+* [Demo] Migrate from `fetch-mock` to `msw` ([#10844](https://github.com/marmelab/react-admin/pull/10844)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* Bump linkifyjs from 4.1.1 to 4.3.2 ([#10868](https://github.com/marmelab/react-admin/pull/10868)) ([dependabot[bot]](https://github.com/apps/dependabot))
+
 ## 5.10.0
 
 * Add filter input to `<ColumnsButton>` when there are many columns ([#10848](https://github.com/marmelab/react-admin/pull/10848)) ([slax57](https://github.com/slax57))

context7.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://context7.com/schema/context7.json",
+  "projectTitle": "React-admin",
+  "description": "A frontend Framework for building single-page applications running in the browser on top of REST/GraphQL APIs, using TypeScript, React, react-router, react-hook-form, react-query, and Material Design.",
+  "folders": ["docs"],
+  "excludeFolders": ["src"],
+  "excludeFiles": ["*.html","*.js","*.css"],
+  "previousVersions": [
+    {
+      "tag": "v4.16.0",
+      "title": "version 4.16"
+    },
+    {
+      "tag": "v3.19.0",
+      "title": "version 3.19"
+    },
+    {
+      "tag": "v2.9.0",
+      "title": "version 2.9"
+    }
+  ]
+}

docs/AuthProviderList.md

@@ -8,6 +8,7 @@ title: "Supported Auth Provider Backends"
 It's very common that your auth logic is so specific that you'll need to write your own `authProvider`. However, the community has built a few open-source Auth Providers that may fit your need:
 
 <div class="providers-list" markdown="1">
+- ![Apisix logo](./img/backend-logos/apisix.svg "Apisix logo")**[Apache Apisix OIDC](https://apisix.apache.org/)**: [@arte/ra-apisix-oidc](https://www.npmjs.com/package/@arte/ra-apisix-oidc)
 - ![Appwrite Logo](./img/backend-logos/appwrite.svg "Appwrite Logo")**[Appwrite](https://appwrite.io/)**: [marmelab/ra-appwrite](https://github.com/marmelab/ra-appwrite)
 - ![auth0 Logo](./img/backend-logos/auth0.svg "auth0 Logo")**[Auth0 by Okta](https://auth0.com/)**: [marmelab/ra-auth-auth0](https://github.com/marmelab/ra-auth-auth0/blob/main/packages/ra-auth-auth0/Readme.md)
 - ![amplify Logo](./img/backend-logos/amplify.svg "amplify Logo")**[AWS Amplify](https://docs.amplify.aws)**: [MrHertal/react-admin-amplify](https://github.com/MrHertal/react-admin-amplify)

docs/DataTable.md

@@ -1871,3 +1871,23 @@ npx jscodeshift ./path/to/src/ \
     --parser=tsx \
     --transform=./node_modules/ra-core/codemods/replace-Datagrid-DataTable.ts
 ```
+
+Here is what the codemod will transform for you:
+
+- Replace `<Datagrid>` with `<DataTable>`.
+- Replace `rowStyle` with `rowSx`.
+- Remove the `optimized` prop (which isn't necessary anymore)
+- Rename the keys in `sx` prop from `"& .RaDatagrid-xxxx"` to `"& .RaDataTable-xxxx"`.
+- Replace simple `<TextField>` with `<DataTable.Col>`.
+- Replace simple `<NumberField>` with `<DataTable.NumberCol>`.
+- Wrap all other fields in `<DataTable.Col>`, keeping `source` and `label` properties in `<DataTable.Col>`.
+- Replace `Datagrid` imports by `DataTable`, and remove unused `TextField` and `NumberField` imports if they are now all replaced.
+
+However, the codemod will **not**:
+
+- Replace `<DatagridConfigurable>` with `<DataTable>` (column selection is now natively supported by `<DataTable>`).
+- Remove the `sortBy` and `sortable` props on fields (sorting is now managed by `<DataTable.Col source>`)
+- Move the `sortByOrder` prop from the field to `<DataTable.Col>`
+- Replace a `<FunctionField>` child with `<DataTable.Col render>`
+- Replace `<Datagrid>` from `@react-admin/ra-rbac` (and all its children). Refer to [Access Control section](#access-control) to use `<DataTable>` with `<CanAccess>`.
+- Move the column styles from `<Datagrid sx>` to the individual `<DataTable.Col sx>`

docs/Edit.md

@@ -414,6 +414,8 @@ const PostEdit = () => (
 
 {% endraw %}
 
+**Warning**: If you set `mutationOptions` meta without [redirecting](#redirect), make sure that [`queryOptions`](#queryoptions) meta is the same, or you will have data update issues.
+
 You can also use `mutationOptions` to override success or error side effects, by setting the `mutationOptions` prop. Refer to the [useMutation documentation](https://tanstack.com/query/v5/docs/react/reference/useMutation) in the react-query website for a list of the possible options.
 
 Let's see an example with the success side effect. By default, when the save action succeeds, react-admin shows a notification, and redirects to the list page. You can override this behavior and pass custom success side effects by providing a `mutationOptions` prop with an `onSuccess` key:
@@ -542,7 +544,7 @@ The default `onError` function is:
 
 ## `offline`
 
-By default, `<EditBase>` renders nothing when there is no connectivity and the record hasn't been cached yet. You can provide your own component via the `offline` prop:
+By default, `<Edit>` renders the `<Offline>` component when there is no connectivity and the record hasn't been cached yet. You can provide your own component via the `offline` prop:
 
 ```jsx
 import { Edit } from 'react-admin';
@@ -594,6 +596,8 @@ export const PostEdit = () => (
 
 {% endraw %}
 
+**Warning**: If you set `queryOptions` meta without [redirecting](#redirect), make sure that [`mutationOptions`](#mutationoptions) meta is the same, or you will have data update issues.
+
 You can also use `queryOptions` to force a refetch on reconnect:
 
 {% raw %}
@@ -629,7 +633,9 @@ const PostEdit = () => (
 );
 ```
 
-Note that the `redirect` prop is ignored if you set [the `mutationOptions` prop](#mutationoptions). See that prop for how to set a different redirection path in that case.
+Note that the `redirect` prop is ignored if you set an `onSuccess` callback of [the `mutationOptions` prop](#mutationoptions). See that prop for how to set a different redirection path in that case.
+
+**Warning**: If you set [`queryOptions`](#queryoptions) meta without redirecting, make sure that [`mutationOptions`](#mutationoptions) meta is the same, or you will have data update issues.
 
 ## `render`
 

docs/InfiniteList.md

@@ -72,6 +72,7 @@ The props are the same as [the `<List>` component](./List.md):
 | `filters`                  | Optional | `ReactElement` | -                       | The filters to display in the toolbar.                                                       |
 | `filter`                   | Optional | `object`       | -                       | The permanent filter values.                                                                 |
 | `filter DefaultValues`     | Optional | `object`       | -                       | The default filter values.                                                                   |
+| `offline`                  | Optional | `ReactNode`    | `<Offline>`             | The component to render when there is no connectivity and there is no data in the cache      |
 | `pagination`               | Optional | `ReactElement` | `<Infinite Pagination>` | The pagination component to use.                                                             |
 | `perPage`                  | Optional | `number`       | `10`                    | The number of records to fetch per page.                                                     |
 | `queryOptions`             | Optional | `object`       | -                       | The options to pass to the `useQuery` hook.                                                  |
@@ -85,6 +86,49 @@ Check the [`<List>` component](./List.md) for details about each prop.
 
 Additional props are passed down to the root component (a MUI `<Card>` by default).
 
+## `offline`
+
+By default, `<InfiniteList>` renders the `<Offline>` component when there is no connectivity and there are no records in the cache yet for the current parameters (page, sort, etc.). You can provide your own component via the `offline` prop:
+
+```jsx
+import { InfiniteList, InfinitePagination } from 'react-admin';
+import { Alert } from '@mui/material';
+
+const offline = <Alert severity="warning">No network. Could not load the posts.</Alert>;
+// The offline component may be displayed at the bottom of the page if the network connectivity is lost
+// when loading new pages. Make sure you pass your custom offline component here too
+const pagination = <InfinitePagination offline={offline} />;
+
+export const PostList = () => (
+    <InfiniteList offline={offline} pagination={pagination}>
+        ...
+    </InfiniteList>
+);
+```
+
+**Tip**: If the record is in the Tanstack Query cache but you want to warn the user that they may see an outdated version, you can use the `<IsOffline>` component:
+
+```jsx
+import { InfiniteList, InfinitePagination, IsOffline } from 'react-admin';
+import { Alert } from '@mui/material';
+
+const offline = <Alert severity="warning">No network. Could not load the posts.</Alert>;
+// The offline component may be displayed at the bottom of the page if the network connectivity is lost
+// when loading new pages. Make sure you pass your custom offline component here too
+const pagination = <InfinitePagination offline={offline} />;
+
+export const PostList = () => (
+    <InfiniteList offline={offline} pagination={pagination}>
+        <IsOffline>
+           <Alert severity="warning">
+                You are offline, the data may be outdated
+            </Alert>
+        </IsOffline>
+        ...
+    </InfiniteList>
+);
+```
+
 ## `pagination`
 
 You can replace the default "load on scroll" pagination (triggered by a component named `<InfinitePagination>`) by a custom pagination component. To get the pagination state and callbacks, you'll need to read the `InfinitePaginationContext`.

docs/List.md

@@ -69,6 +69,7 @@ You can find more advanced examples of `<List>` usage in the [demos](./Demos.md)
 | `filters`                 | Optional | `ReactElement` | -              | The filters to display in the toolbar.                                                       |
 | `filter`                  | Optional | `object`       | -              | The permanent filter values.                                                                 |
 | `filter DefaultValues`    | Optional | `object`       | -              | The default filter values.                                                                   |
+| `offline`                 | Optional | `ReactNode`    | `<Offline>`    | The component to render when there is no connectivity and there is no data in the cache      |
 | `pagination`              | Optional | `ReactElement` | `<Pagination>` | The pagination component to use.                                                             |
 | `perPage`                 | Optional | `number`       | `10`           | The number of records to fetch per page.                                                     |
 | `queryOptions`            | Optional | `object`       | -              | The options to pass to the `useQuery` hook.                                                  |
@@ -774,6 +775,43 @@ export const PostList = () => (
 const filterSentToDataProvider = { ...filterDefaultValues, ...filterChosenByUser, ...filter };
 ```
 
+## `offline`
+
+By default, `<List>` renders the `<Offline>` component when there is no connectivity and there are no records in the cache yet for the current parameters (page, sort, etc.). You can provide your own component via the `offline` prop:
+
+```jsx
+import { List } from 'react-admin';
+import { Alert } from '@mui/material';
+
+const offline = <Alert severity="warning">No network. Could not load the posts.</Alert>;
+
+export const PostList = () => (
+    <List offline={offline}>
+        ...
+    </List>
+);
+```
+
+**Tip**: If the record is in the Tanstack Query cache but you want to warn the user that they may see an outdated version, you can use the `<IsOffline>` component:
+
+```jsx
+import { List, IsOffline } from 'react-admin';
+import { Alert } from '@mui/material';
+
+const offline = <Alert severity="warning">No network. Could not load the posts.</Alert>;
+
+export const PostList = () => (
+    <List offline={offline}>
+        <IsOffline>
+           <Alert severity="warning">
+                You are offline, the data may be outdated
+            </Alert>
+        </IsOffline>
+        ...
+    </List>
+);
+```
+
 ## `pagination`
 
 By default, the `<List>` view displays a set of pagination controls at the bottom of the list.

docs/ListBase.md

@@ -87,11 +87,13 @@ The `<ListBase>` component accepts the following props:
 * [`exporter`](./List.md#exporter)
 * [`filter`](./List.md#filter-permanent-filter)
 * [`filterDefaultValues`](./List.md#filterdefaultvalues)
+* [`offline`](./List.md#offline)
 * [`perPage`](./List.md#perpage)
 * [`queryOptions`](./List.md#queryoptions)
 * `render`
 * [`resource`](./List.md#resource)
 * [`sort`](./List.md#sort)
+* [`storeKey`](./List.md#storeKey)
 
 In addition, `<ListBase>` renders its children components inside a `ListContext`. Check [the `<List children>` documentation](./List.md#children) for usage examples.