Merge pull request #9525 from marmelab/backport-from-master-01

Backport master changes to next
marmelab · Dec 15, 2023 · 57efb33 · 57efb33
2 parents 6bb23a4 + 01aeeff
commit 57efb33
Show file tree

Hide file tree

Showing 85 changed files with 3,061 additions and 702 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,34 @@
 # Changelog
 
+## v4.16.2
+
+* Fix clearing a nested filter re-renders the previous value when navigating back to the list ([#9491](https://github.com/marmelab/react-admin/pull/9491)) ([slax57](https://github.com/slax57))
+* Fix `ra-data-graphql` uses a Proxy, which prevents adding more methods automatically ([#9487](https://github.com/marmelab/react-admin/pull/9487)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `useUpdateMany` doesn't accept the `returnPromise` option at call time ([#9486](https://github.com/marmelab/react-admin/pull/9486)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `<Pagination>` logs a warning ([#9474](https://github.com/marmelab/react-admin/pull/9474)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Update ra-form-layouts dialogs documentation ([#9482](https://github.com/marmelab/react-admin/pull/9482)) ([djhi](https://github.com/djhi))
+* [Doc] Fix snippets fails to render in JS ([#9478](https://github.com/marmelab/react-admin/pull/9478)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Add link to tutorial for headless admin ([#9477](https://github.com/marmelab/react-admin/pull/9477)) ([fzaninotto](https://github.com/fzaninotto))
+
+## v4.16.1
+
+* Fix `<FileInput>` should display a validation errors right away when form mode is 'onChange' ([#9459](https://github.com/marmelab/react-admin/pull/9459)) ([slax57](https://github.com/slax57))
+* [TypeScript] Fix useRecordContext may return undefined ([#9460](https://github.com/marmelab/react-admin/pull/9460)) ([groomain](https://github.com/groomain))
+* [Doc] Add link to new demo: Note-taking app ([#9465](https://github.com/marmelab/react-admin/pull/9465)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Add headless section in pages components ([#9447](https://github.com/marmelab/react-admin/pull/9447)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Add example showing how to add `<Inspector>` to a custom layout ([#9458](https://github.com/marmelab/react-admin/pull/9458)) ([rossb220](https://github.com/rossb220))
+* [Doc] Update `<DatagridAG>` doc to use the new package, and document the column order/size persistence ([#9472](https://github.com/marmelab/react-admin/pull/9472)) ([slax57](https://github.com/slax57))
+* [Doc] Update authProvider and dataProvider lists to target the documentation instead of the repository's root ([#9471](https://github.com/marmelab/react-admin/pull/9471)) ([slax57](https://github.com/slax57))
+* [Website] Reorder documentation's Discord and Github icons to match the website order ([#9454](https://github.com/marmelab/react-admin/pull/9454)) ([adguernier](https://github.com/adguernier))
+
+## v4.16.0
+
+* Add `<SingleFieldList empty gap direction>` props, and allow it to be used without `children` ([#9439](https://github.com/marmelab/react-admin/pull/9439)) ([fzaninotto](https://github.com/fzaninotto))
+* Add `<LoadingIndicator onClick>` prop, allowing to trigger actions (like a refresh) on click ([#9420](https://github.com/marmelab/react-admin/pull/9420)) ([david-bezero](https://github.com/david-bezero))
+* Add `<LocalesMenuButton icon>` prop to customize the locales button icon ([#9380](https://github.com/marmelab/react-admin/pull/9380)) ([djhi](https://github.com/djhi))
+* Add `<Form disableInvalidFormNotification>` to allow disabling notifications when the form is invalid ([#9353](https://github.com/marmelab/react-admin/pull/9353)) ([tim-hoffmann](https://github.com/tim-hoffmann))
+
+
 ## v4.15.5
 
 * Add support for `fetchOptions` to `<CheckForApplicationUpdate>` ([#9436](https://github.com/marmelab/react-admin/pull/9436)) ([smeng9](https://github.com/smeng9))

diff --git a/docs/Admin.md b/docs/Admin.md
@@ -648,7 +648,8 @@ You can also disable the `/login` route completely by passing `false` to this pr
 const authProvider = {
     // ...
     async checkAuth() {
-        if (/* not authenticated */) {
+        // ...
+        if (!authenticated) {
             throw { redirectTo: '/no-access' };
         }
     },
@@ -708,6 +709,7 @@ If you want to override the react-query default query and mutation default optio
 ```tsx
 import { Admin } from 'react-admin';
 import { QueryClient } from '@tanstack/react-query';
+import { dataProvider } from './dataProvider';
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -722,7 +724,7 @@ const queryClient = new QueryClient({
 });
 
 const App = () => (
-    <Admin queryClient={queryClient} dataProvider={...}>
+    <Admin queryClient={queryClient} dataProvider={dataProvider}>
         ...
     </Admin>
 );
@@ -915,10 +917,11 @@ But you may want to use another routing strategy, e.g. to allow server-side rend
 ```tsx
 import { BrowserRouter } from 'react-router-dom';
 import { Admin, Resource } from 'react-admin';
+import { dataProvider } from './dataProvider';
 
 const App = () => (
     <BrowserRouter>
-        <Admin dataProvider={...}>
+        <Admin dataProvider={dataProvider}>
             <Resource name="posts" />
         </Admin>
     </BrowserRouter>
@@ -934,10 +937,11 @@ However, if you serve your admin from a sub path AND use another Router (like [`
 ```tsx
 import { Admin, Resource } from 'react-admin';
 import { BrowserRouter } from 'react-router-dom';
+import { dataProvider } from './dataProvider';
 
 const App = () => (
     <BrowserRouter>
-        <Admin basename="/admin" dataProvider={...}>
+        <Admin basename="/admin" dataProvider={dataProvider}>
             <Resource name="posts" />
         </Admin>
     </BrowserRouter>
@@ -974,9 +978,11 @@ React-admin will have to prefix all the internal links with `/admin`. Use the `<
 ```tsx
 // in src/StoreAdmin.js
 import { Admin, Resource } from 'react-admin';
+import { dataProvider } from './dataProvider';
+import posts from './posts';
 
 export const StoreAdmin = () => (
-    <Admin basename="/admin" dataProvider={...}>
+    <Admin basename="/admin" dataProvider={dataProvider}>
         <Resource name="posts" {...posts} />
     </Admin>
 );

diff --git a/docs/AdvancedTutorials.md b/docs/AdvancedTutorials.md
@@ -5,88 +5,30 @@ title: "Advanced Tutorials"
 
 # Advanced Tutorials
 
-## Creating a Record Related to the Current One
-
-This tutorial explains how to add a button on a show or edit page to create a new resource related to the one displayed.
-
-<video controls autoplay playsinline muted loop>
-  <source src="https://marmelab.com/5b5e4e19163f7baca76cce020c23c41a/create-related.mp4" type="video/mp4" />
-  Your browser does not support the video tag.
-</video>
-
-* [Article](https://marmelab.com/blog/2023/10/12/react-admin-v4-advanced-recipes-creating-a-record-related-to-the-current-one.html)
-* [Code](https://github.com/marmelab/react-admin/blob/master/examples/demo/src/products/ProductEdit.tsx)
-
-## Custom Forms and UI for related records
-
-This tutorial explains how to have a `create`, `show` or `edit` view of a referenced resource inside a modal or a sliding side panel.
-
-![Screencast](https://marmelab.com/dd58004986d3bb98a32972ba8fd25fc8/screencast.gif)
-
-* [Article](https://marmelab.com/blog/2020/04/27/react-admin-tutorials-custom-forms-related-records.html)
-* [Codesandbox](https://codesandbox.io/s/react-admin-v3-advanced-recipes-quick-createpreview-voyci)
-
-## Build a Timeline as a replacement for a List component
-
-This tutorial shows how to use pure react to implement a custom component replacing react-admin default List.
-
-![Screencast](https://marmelab.com/d9b4cf0e7faf3ed208c102f8b2334409/storybook_App5.gif)
-
-* [Article](https://marmelab.com/blog/2019/01/17/react-timeline.html)
-* [Repository](https://github.com/marmelab/timeline-react-admin)
-
-## Creating and Editing a Record From the List Page
-
-This tutorial shows how to display Creation and Edition forms in a drawer or a dialog from the List page.
-
-![Screencast](https://marmelab.com/07b25da5494055c4306dd7e7a48fd010/end-result.gif)
-
-* [Article](https://marmelab.com/blog/2019/02/07/react-admin-advanced-recipes-creating-and-editing-a-record-from-the-list-page.html)
-* [Codesandbox](https://codesandbox.io/s/lrm6kl00nl)
-
-## Add a User Profile Page
-
-This tutorial explains how to create a profile page based on an `<Edit>` component, and accessible as a standalone page.
-
-![Screencast](https://marmelab.com/668056e9d8273ff5ce75dfc641151a90/end_result.gif)
-
-* [Article](https://marmelab.com/blog/2019/03/07/react-admin-advanced-recipes-user-profile.html)
-* [Codesandbox](https://codesandbox.io/s/o1jmj4lwv9)
-
-## Supplying your own Defaults to React Admin
-
-This article shows how you can customize many parts of the framework without repeating yourself.
-
-![Screencast](https://marmelab.com/54d42faced9043f7933df212cbda0f1b/react-admin-edit-defaults.gif)
-
-* [Article](https://marmelab.com/blog/2019/03/27/supplying-your-own-defaults-to-react-admin.html)
-* [Codesandbox](https://codesandbox.io/s/qzxx4mjl59)
-
-## OpenID Connect Authentication with React Admin
-
-![OpenID Connect on React Admin with a button "Login With Google"](./img/openid-connect-example.png)
-
-* [Live Example](https://marmelab.com/ra-example-oauth)
-* [Code Repository](https://github.com/marmelab/ra-example-oauth)
-
-## Changing The Look And Feel Of React-Admin Without JSX
-
-This article shows how to customize react-admin look and feel using only the Material UI theme.
-
-![Screencast](https://marmelab.com/097bee867a1d1dc55dec5456732fe94a/screencast.gif)
-
-* [Article](https://marmelab.com/blog/2020/09/11/react-admin-tutorials-build-your-own-theme.html)
-* [Code Repository](https://github.com/Luwangel/react-admin-tutorials-build-your-own-theme)
-
-## Build A Custom Tags Selector
-
-This tutorial explains how to create a custom component to select tags for a record, fetching the list of existing tags and allowing to create new tags on the fly.
-
-<video controls autoplay playsinline muted loop width="100%">
-    <source src="https://marmelab.com/b612ecd6bf066e85bad0a036614f55b0/tags-list-edit.webm" type="video/webm" />
-    Your browser does not support the video tag.
-</video>
-
-* [Article](https://marmelab.com/blog/2023/04/26/build-a-custom-tags-selector-with-react-admin.html)
-* Test it live in the [CRM Demo](https://marmelab.com/react-admin-crm/#/contacts/1/show)
-* CRM Demo [Repository](https://github.com/marmelab/react-admin/blob/master/examples/crm/src/contacts/TagsListEdit.tsx)
+If you want to learn the best practices of react-admin development by example, you've come to the right place. This page lists the advanced tutorials we've published on [the react-admin blog](https://marmelab.com/en/blog/#react-admin).
+
+* 2023-11: [Using React-Admin With DaisyUI, Tailwind CSS, Tanstack Table and React-aria](https://marmelab.com/blog/2023/11/28/using-react-admin-with-your-favorite-ui-library.html)
+* 2023-10: [Creating a Record Related to the Current One](https://marmelab.com/blog/2023/10/12/react-admin-v4-advanced-recipes-creating-a-record-related-to-the-current-one.html)
+* 2023-09: [Authentication using ActiveDirectory](https://marmelab.com/blog/2023/09/13/active-directory-integration-tutorial.html)
+* 2023-08: [Building AI-Augmented Apps](https://marmelab.com/blog/2023/08/09/ai-augmented%20react-apps.html)
+* 2023-07: [Building a Kanban Board](https://marmelab.com/blog/2023/07/28/create-a-kanban-board-in-react-admin.html)
+* 2023-04: [Building A Custom Tags Selector](https://marmelab.com/blog/2023/04/26/build-a-custom-tags-selector-with-react-admin.html)
+* 2023-03: [Creating Custom Form Layouts](https://marmelab.com/blog/2023/03/22/creating-custom-form-layouts-with-react-admin.html)
+* 2022-12: [Multi-Tenant Single-Page Apps: Dos and Don'ts](https://marmelab.com/blog/2022/12/14/multitenant-spa.html)
+* 2022-11: [Building a B2B app with Strapi and React-Admin](https://marmelab.com/blog/2022/11/28/building-a-crud-app-with-strapi-and-react-admin.html)
+* 2022-10: [Writing A Data Provider For Offline-First Applications](https://marmelab.com/blog/2022/10/26/create-an-localforage-dataprovider-in-react-admin.html)
+* 2022-04: [Introducing React-admin V4](https://marmelab.com/blog/2022/04/13/react-admin-v4.html)
+
+Older blog posts contain advice that can be outdated. We keep them here for reference.
+
+* 2021-12: [Building A Retro React-Admin Theme For Fun And Profit](https://marmelab.com/blog/2021/12/15/retro-admin.html)
+* 2021-10: [Using An SQLite Database Live In React-Admin](https://marmelab.com/blog/2021/10/14/using-an-sqlite-database-live-in-react-admin.html)
+* 2020-12: [Managing a User Profile](https://marmelab.com/blog/2020/12/14/react-admin-v3-userprofile.html)
+* 2020-11: [Changing The Look And Feel Of React-Admin Without JSX](https://marmelab.com/blog/2020/09/11/react-admin-tutorials-build-your-own-theme.html)
+* 2020-08: [Handling JWT in Admin Apps the Right Way](https://marmelab.com/blog/2020/07/02/manage-your-jwt-react-admin-authentication-in-memory.html)
+* 2020-04: [Custom Forms and UI for related records](https://marmelab.com/blog/2020/04/27/react-admin-tutorials-custom-forms-related-records.html)
+* 2019-11: [Introducing React-admin v3](https://marmelab.com/blog/2019/11/20/react-admin-3-0.html)
+* 2019-03: [Supplying your own Defaults to React Admin](https://marmelab.com/blog/2019/03/27/supplying-your-own-defaults-to-react-admin.html)
+* 2019-03: [Adding a User Profile Page](https://marmelab.com/blog/2019/03/07/react-admin-advanced-recipes-user-profile.html)
+* 2019-02: [Creating and Editing a Record From the List Page](https://marmelab.com/blog/2019/02/07/react-admin-advanced-recipes-creating-and-editing-a-record-from-the-list-page.html)
+* 2019-01: [Building a Timeline as a replacement for a List component](https://marmelab.com/blog/2019/01/17/react-timeline.html)
diff --git a/docs/AuthProviderList.md b/docs/AuthProviderList.md
@@ -7,17 +7,16 @@ 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:
 
-- **[Auth0](https://auth0.com/)**: [marmelab/ra-auth-auth0](https://github.com/marmelab/ra-auth-auth0)
+- **[Auth0](https://auth0.com/)**: [marmelab/ra-auth-auth0](https://github.com/marmelab/ra-auth-auth0/blob/main/packages/ra-auth-auth0/Readme.md)
 - **[AWS Amplify](https://docs.amplify.aws)**: [MrHertal/react-admin-amplify](https://github.com/MrHertal/react-admin-amplify)
 - **[AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/setting-up-the-javascript-sdk.html)**: [marmelab/ra-auth-cognito](https://github.com/marmelab/ra-auth-cognito/blob/main/packages/ra-auth-cognito/Readme.md)
-- **[Azure Active Directory (using MSAL)](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser)**: [marmelab/ra-auth-msal](https://github.com/marmelab/ra-auth-msal) ([Tutorial](https://marmelab.com/blog/2023/09/13/active-directory-integration-tutorial.html))
+- **[Azure Active Directory (using MSAL)](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser)**: [marmelab/ra-auth-msal](https://github.com/marmelab/ra-auth-msal/blob/main/packages/ra-auth-msal/Readme.md) ([Tutorial](https://marmelab.com/blog/2023/09/13/active-directory-integration-tutorial.html))
 - **[Casdoor](https://casdoor.com/)**: [NMB-Lab/reactadmin-casdoor-authprovider](https://github.com/NMB-Lab/reactadmin-casdoor-authprovider)
-- **[Directus](https://directus.io/)**: [marmelab/ra-directus](https://github.com/marmelab/ra-directus)
+- **[Directus](https://directus.io/)**: [marmelab/ra-directus](https://github.com/marmelab/ra-directus/blob/main/packages/ra-directus/Readme.md)
 - **[Firebase Auth (Google, Facebook, GitHub, etc.)](https://firebase.google.com/docs/auth/web/firebaseui)**: [benwinding/react-admin-firebase](https://github.com/benwinding/react-admin-firebase#auth-provider)
 - **[Google Identity & Google Workspace](https://developers.google.com/identity/gsi/web/guides/overview)**: [marmelab/ra-auth-google](https://github.com/marmelab/ra-auth-google/blob/main/packages/ra-auth-google/Readme.md)
-- **[Keycloak](https://www.keycloak.org/)**: [marmelab/ra-keycloak](https://github.com/marmelab/ra-keycloak)
-- **[Postgrest](https://postgrest.org/)**: [raphiniert-com/ra-data-postgrest](https://github.com/raphiniert-com/ra-data-postgrest)
-- **[Supabase](https://supabase.io/)**: [marmelab/ra-supabase](https://github.com/marmelab/ra-supabase)
+- **[Keycloak](https://www.keycloak.org/)**: [marmelab/ra-keycloak](https://github.com/marmelab/ra-keycloak/blob/main/packages/ra-keycloak/Readme.md)
+- **[Supabase](https://supabase.io/)**: [marmelab/ra-supabase](https://github.com/marmelab/ra-supabase/blob/main/packages/ra-supabase/README.md)
 - **[SurrealDB](https://surrealdb.com/)**: [djedi23/ra-surrealdb](https://github.com/djedi23/ra-surrealdb)
 
 Beyond ready-to-use providers, you may find help in these third-party tutorials about integrating more authentication backends:

diff --git a/docs/AuthRBAC.md b/docs/AuthRBAC.md
@@ -7,7 +7,7 @@ title: "RBAC"
 
 React-admin Enterprise Edition contains [the ra-rbac module](https://marmelab.com/ra-enterprise/modules/ra-rbac)<img class="icon" src="./img/premium.svg" />, which adds fine-grained permissions to your admin. This module extends the `authProvider` and adds replacement for many react-admin components that use these permissions.
 
-<video controls="controls" style="max-width: 100%">
+<video controls="controls" style="max-width: 96%">
     <source src="./img/ra-rbac.mp4" type="video/mp4" />
 </video>
 
@@ -905,10 +905,9 @@ For instance, to allow users access to the following tab `<TabbedShowLayout.Tab
 
 ## `<TabbedForm>`
 
-<TabbedForm> shows only the tabs for which users have write permissions, using the `[resource].tab.[tabName]` string as resource identifier. It also renders the delete button only if the user has a permission for the `delete` action in the current resource. `<TabbedForm.Tab>` shows only the child inputs for which users have the write permissions, using the `[resource].[source]` string as resource identifier.
+`<TabbedForm>` shows only the tabs for which users have write permissions, using the `[resource].tab.[tabName]` string as resource identifier. It also renders the delete button only if the user has a permission for the `delete` action in the current resource. `<TabbedForm.Tab>` shows only the child inputs for which users have the write permissions, using the `[resource].[source]` string as resource identifier.
 
 
-```jsx
 ```tsx
 import { Edit, TextInput } from 'react-admin';
 import { TabbedForm } from '@react-admin/ra-rbac';
@@ -953,7 +952,6 @@ const ProductEdit = () => (
     </Edit>
 );
 ```
-```
 
 You must add a `name` prop to the `<TabbedForm.Tab>` so you can reference it in the permissions. Then, to allow users to access a particular `<TabbedForm.Tab>`, update the permissions definition as follows: `{ action: 'write', resource: '{RESOURCE}.tab.{NAME}' }`, where `RESOURCE` is the resource name, and `NAME` the name you provided to the `<TabbedForm.Tab>`.
 

diff --git a/docs/Configurable.md b/docs/Configurable.md
@@ -214,3 +214,53 @@ const MyAppBar = () => (
     </AppBar>
 );
 ```
+
+## `<Inspector>`
+
+The `<Inspector>` is already included in the layouts provided by react-admin. If you are using a custom layout, you need to add the `<Inspector>` component to your layout.
+
+{% raw %}
+```jsx
+// in src/MyLayout.js
+import * as React from 'react';
+import { Box } from '@mui/material';
+import { AppBar, Menu, Sidebar, Inspector } from 'react-admin';
+
+const MyLayout = ({ children, dashboard }) => (
+    <Box 
+        display="flex"
+        flexDirection="column"
+        zIndex={1}
+        minHeight="100vh"
+        backgroundColor="theme.palette.background.default"
+        position="relative"
+    >
+        <Box
+            display="flex"
+            flexDirection="column"
+            overflowX="auto"
+        >
+            <AppBar />
+            <Box display="flex" flexGrow={1}>
+                <Sidebar>
+                    <Menu hasDashboard={!!dashboard} />
+                </Sidebar>
+                <Box
+                    display="flex"
+                    flexDirection="column"
+                    flexGrow={2}
+                    p={3}
+                    marginTop="4em"
+                    paddingLeft={5}
+                >
+                    {children}
+                </Box>
+            </Box>
+        </Box>
+        <Inspector />
+    </Box>
+);
+
+export default MyLayout;
+```
+{% endraw %}