Merge pull request #10437 from marmelab/react-19

Supports react 19

cypress/e2e/auth.cy.js

@@ -20,7 +20,7 @@ describe('Authentication', () => {
     it('should not login with incorrect credentials', () => {
         ListPage.navigate();
         ListPage.logout();
-        LoginPage.login('foo', 'bar');
+        LoginPage.login('foo', 'bar', true);
         cy.contains('Authentication failed, please retry');
     });
     it('should login with correct credentials', () => {

cypress/support/LoginPage.js

@@ -1,8 +1,10 @@
 export default url => ({
     elements: {
+        appLoader: '.app-loader',
         username: "input[name='username']",
         password: "input[name='password']",
         submitButton: 'button',
+        title: '#react-admin-title',
     },
 
     navigate() {
@@ -14,9 +16,13 @@ export default url => ({
         cy.get(this.elements.username);
     },
 
-    login(username = 'login', password = 'password') {
+    login(username = 'login', password = 'password', shouldFail = false) {
         cy.get(this.elements.username).clear().type(username);
         cy.get(this.elements.password).clear().type(password);
         cy.get(this.elements.submitButton).click();
+        if (!shouldFail) {
+            cy.get(this.elements.title);
+            cy.get(this.elements.appLoader);
+        }
     },
 });

examples/crm/package.json

@@ -5,8 +5,8 @@
     "type": "module",
     "dependencies": {
         "@hello-pangea/dnd": "^16.3.0",
-        "@mui/icons-material": "^5.15.20",
-        "@mui/material": "^5.15.20",
+        "@mui/icons-material": "^5.16.12",
+        "@mui/material": "^5.16.12",
         "@nivo/bar": "^0.80.0",
         "@nivo/core": "^0.80.0",
         "clsx": "^2.1.1",

examples/crm/src/contacts/ContactImportDialog.tsx

@@ -1,10 +1,15 @@
-import { Box, CircularProgress, Stack, Typography } from '@mui/material';
-import Alert from '@mui/material/Alert';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import MuiLink from '@mui/material/Link';
+import {
+    Alert,
+    Box,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Link as MuiLink,
+    Stack,
+    Typography,
+} from '@mui/material';
 import {
     Button,
     FileField,

examples/crm/vite.config.ts

@@ -14,7 +14,7 @@ export default defineConfig(async () => {
         // eslint-disable-next-line prettier/prettier
         const packageJson = await import(
             path.resolve(__dirname, '../../packages', dirName, 'package.json'),
-            { assert: { type: 'json' } }
+            { with: { type: 'json' } }
         );
         aliases[packageJson.default.name] = path.resolve(
             __dirname,

examples/demo/package.json

@@ -4,9 +4,9 @@
     "private": true,
     "type": "module",
     "dependencies": {
-        "@apollo/client": "^3.3.19",
-        "@mui/icons-material": "^5.15.20",
-        "@mui/material": "^5.15.20",
+        "@apollo/client": "^3.12.4",
+        "@mui/icons-material": "^5.16.12",
+        "@mui/material": "^5.16.12",
         "@types/recharts": "^1.8.10",
         "@vitejs/plugin-react": "^2.2.0",
         "clsx": "^2.1.1",
@@ -26,12 +26,12 @@
         "ra-input-rich-text": "^5.0.0",
         "ra-language-english": "^5.0.0",
         "ra-language-french": "^5.0.0",
-        "react": "^18.3.1",
+        "react": "^19.0.0",
         "react-admin": "^5.0.0",
-        "react-dom": "^18.3.1",
+        "react-dom": "^19.0.0",
         "react-router": "^6.22.0",
         "react-router-dom": "^6.22.0",
-        "recharts": "^2.1.15"
+        "recharts": "^2.15.0"
     },
     "scripts": {
         "dev": "vite",

examples/demo/src/App.tsx

@@ -47,7 +47,7 @@ const App = () => {
     const darkTheme = themes.find(theme => theme.name === themeName)?.dark;
     return (
         <Admin
-            title=""
+            title="Posters Galore Admin"
             dataProvider={dataProviderFactory(
                 process.env.REACT_APP_DATA_PROVIDER || ''
             )}

examples/demo/src/categories/CategoryEdit.tsx

@@ -10,6 +10,8 @@ import {
     TextInput,
     useTranslate,
     useRecordContext,
+    useDefaultTitle,
+    useGetResourceLabel,
 } from 'react-admin';
 
 import ThumbnailField from '../products/ThumbnailField';
@@ -59,14 +61,21 @@ const CategoryEdit = () => (
 );
 
 const CategoryTitle = () => {
+    const appTitle = useDefaultTitle();
     const record = useRecordContext<Category>();
     const translate = useTranslate();
+    const getResourceLabel = useGetResourceLabel();
+
+    const pageTitle = translate('ra.page.edit', {
+        name: getResourceLabel('categories', 1),
+        recordRepresentation: `"${record?.name}"`,
+    });
 
     return record ? (
-        <span>
-            {translate('resources.categories.name', { smart_count: 1 })} &quot;
-            {record.name}&quot;
-        </span>
+        <>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
     ) : null;
 };
 

examples/demo/src/categories/CategoryList.tsx

@@ -3,6 +3,7 @@ import {
     EditButton,
     List,
     RecordContextProvider,
+    useDefaultTitle,
     useListContext,
 } from 'react-admin';
 import {
@@ -17,6 +18,18 @@ import { humanize } from 'inflection';
 
 import LinkToRelatedProducts from './LinkToRelatedProducts';
 import { Category } from '../types';
+import { usePageTitle } from '../usePageTitle';
+
+const CategoriesTitle = () => {
+    const title = useDefaultTitle();
+    const pageTitle = usePageTitle({ view: 'list' });
+    return (
+        <>
+            <title>{`${title} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
+};
 
 const CategoryList = () => (
     <List
@@ -25,6 +38,7 @@ const CategoryList = () => (
         pagination={false}
         component="div"
         actions={false}
+        title={<CategoriesTitle />}
     >
         <CategoryGrid />
     </List>

examples/demo/src/invoices/InvoiceList.tsx

@@ -12,11 +12,13 @@ import {
     SelectColumnsButton,
     ReferenceInput,
     FilterButton,
+    useDefaultTitle,
 } from 'react-admin';
 
 import FullNameField from '../visitors/FullNameField';
 import AddressField from '../visitors/AddressField';
 import InvoiceShow from './InvoiceShow';
+import { usePageTitle } from '../usePageTitle';
 
 const listFilters = [
     <DateInput source="date_gte" alwaysOn />,
@@ -33,12 +35,24 @@ const ListActions = () => (
     </TopToolbar>
 );
 
+const InvoicesTitle = () => {
+    const title = useDefaultTitle();
+    const pageTitle = usePageTitle({ view: 'list' });
+    return (
+        <>
+            <title>{`${title} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
+};
+
 const InvoiceList = () => (
     <List
         filters={listFilters}
         perPage={25}
         sort={{ field: 'date', order: 'DESC' }}
         actions={<ListActions />}
+        title={<InvoicesTitle />}
     >
         <DatagridConfigurable
             rowClick="expand"

examples/demo/src/orders/OrderEdit.tsx

@@ -13,12 +13,14 @@ import {
     Toolbar,
     useRecordContext,
     useTranslate,
+    useDefaultTitle,
 } from 'react-admin';
 import { Card, CardContent, Box, Grid, Typography, Link } from '@mui/material';
 
-import { Order, Customer } from '../types';
+import { Customer } from '../types';
 import Basket from './Basket';
 import Totals from './Totals';
+import { usePageTitle } from '../usePageTitle';
 
 const OrderEdit = () => (
     <Edit title={<OrderTitle />} component="div">
@@ -27,15 +29,14 @@ const OrderEdit = () => (
 );
 
 const OrderTitle = () => {
-    const translate = useTranslate();
-    const record = useRecordContext<Order>();
-    return record ? (
-        <span>
-            {translate('resources.orders.title', {
-                reference: record.reference,
-            })}
-        </span>
-    ) : null;
+    const appTitle = useDefaultTitle();
+    const pageTitle = usePageTitle({ view: 'edit' });
+    return (
+        <>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
 };
 
 const CustomerDetails = () => {

examples/demo/src/orders/OrderList.tsx

@@ -19,6 +19,7 @@ import {
     SelectColumnsButton,
     TextField,
     TopToolbar,
+    useDefaultTitle,
     useListContext,
 } from 'react-admin';
 import { useMediaQuery, Divider, Tabs, Tab, Theme } from '@mui/material';
@@ -27,6 +28,7 @@ import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import AddressField from '../visitors/AddressField';
 import MobileGrid from './MobileGrid';
 import { Customer } from '../types';
+import { usePageTitle } from '../usePageTitle';
 
 const ListActions = () => (
     <TopToolbar>
@@ -36,13 +38,25 @@ const ListActions = () => (
     </TopToolbar>
 );
 
+const OrdersTitle = () => {
+    const title = useDefaultTitle();
+    const pageTitle = usePageTitle({ view: 'list' });
+    return (
+        <>
+            <title>{`${title} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
+};
+
 const OrderList = () => (
     <List
         filterDefaultValues={{ status: 'ordered' }}
         sort={{ field: 'date', order: 'DESC' }}
         perPage={25}
         filters={orderFilters}
         actions={<ListActions />}
+        title={<OrdersTitle />}
     >
         <TabbedDatagrid />
     </List>

examples/demo/src/products/ProductCreate.tsx

@@ -1,14 +1,33 @@
 import * as React from 'react';
-import { Create, TabbedForm, TextInput, required } from 'react-admin';
+import {
+    Create,
+    TabbedForm,
+    TextInput,
+    required,
+    useDefaultTitle,
+} from 'react-admin';
 import { ProductEditDetails } from './ProductEditDetails';
+import { usePageTitle } from '../usePageTitle';
 const RichTextInput = React.lazy(() =>
     import('ra-input-rich-text').then(module => ({
         default: module.RichTextInput,
     }))
 );
 
+const ProductTitle = () => {
+    const appTitle = useDefaultTitle();
+    const pageTitle = usePageTitle({ view: 'create' });
+
+    return (
+        <>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
+};
+
 const ProductCreate = () => (
-    <Create>
+    <Create title={<ProductTitle />}>
         <TabbedForm defaultValues={{ sales: 0 }}>
             <TabbedForm.Tab
                 label="resources.products.tabs.image"

examples/demo/src/products/ProductEdit.tsx

@@ -12,6 +12,9 @@ import {
     TextField,
     TextInput,
     useRecordContext,
+    useDefaultTitle,
+    useTranslate,
+    useGetResourceLabel,
 } from 'react-admin';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import AspectRatioIcon from '@mui/icons-material/AspectRatio';
@@ -32,8 +35,21 @@ const RichTextInput = React.lazy(() =>
 );
 
 const ProductTitle = () => {
+    const appTitle = useDefaultTitle();
+    const translate = useTranslate();
     const record = useRecordContext<Product>();
-    return record ? <span>Poster "{record.reference}"</span> : null;
+    const getResourceLabel = useGetResourceLabel();
+
+    const pageTitle = translate('ra.page.edit', {
+        name: getResourceLabel('products', 1),
+        recordRepresentation: `"${record?.reference}"`,
+    });
+    return record ? (
+        <>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    ) : null;
 };
 
 const ProductEdit = () => (