Add offline support to <Edit>

Author: djhi

packages/ra-ui-materialui/src/detail/Edit.stories.tsx

@@ -6,18 +6,29 @@ import {
     useRecordContext,
     TestMemoryRouter,
     useEditContext,
+    IsOffline,
 } from 'ra-core';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
-import { Box, Card, Stack, ThemeOptions, Typography } from '@mui/material';
+import fakeRestDataProvider from 'ra-data-fakerest';
+
+import {
+    Alert,
+    Box,
+    Card,
+    Stack,
+    ThemeOptions,
+    Typography,
+} from '@mui/material';
 
 import { TextInput } from '../input';
 import { SimpleForm } from '../form/SimpleForm';
 import { ShowButton, SaveButton } from '../button';
 import TopToolbar from '../layout/TopToolbar';
-import { Edit } from './Edit';
+import { Edit, EditProps } from './Edit';
 import { deepmerge } from '@mui/utils';
 import { defaultLightTheme } from '../theme';
+import { onlineManager, useMutationState } from '@tanstack/react-query';
 
 export default { title: 'ra-ui-materialui/detail/Edit' };
 
@@ -30,9 +41,9 @@ const book = {
     year: 1869,
 };
 
-const dataProvider = {
-    getOne: () => Promise.resolve({ data: book }),
-} as any;
+const dataProvider = fakeRestDataProvider({
+    books: [book],
+});
 
 const BookTitle = () => {
     const record = useRecordContext();
@@ -418,3 +429,91 @@ export const WithRenderProp = () => (
         </Admin>
     </TestMemoryRouter>
 );
+
+export const Offline = ({
+    isOnline = true,
+    offline,
+}: {
+    isOnline?: boolean;
+    offline?: React.ReactNode;
+}) => {
+    React.useEffect(() => {
+        onlineManager.setOnline(isOnline);
+    }, [isOnline]);
+    return (
+        <TestMemoryRouter initialEntries={['/books/1/show']}>
+            <Admin dataProvider={dataProvider}>
+                <Resource
+                    name="books"
+                    show={<BookEditOffline offline={offline} />}
+                />
+            </Admin>
+        </TestMemoryRouter>
+    );
+};
+
+const BookEditOffline = (props: EditProps) => {
+    return (
+        <Edit
+            emptyWhileLoading
+            {...props}
+            redirect={false}
+            mutationMode="pessimistic"
+        >
+            <OfflineIndicator />
+            <SimpleForm>
+                <TextInput source="title" />
+                <TextInput source="author" />
+                <TextInput source="summary" />
+                <TextInput source="year" />
+            </SimpleForm>
+        </Edit>
+    );
+};
+
+const OfflineIndicator = () => {
+    const pendingMutations = useMutationState({
+        filters: {
+            status: 'pending',
+        },
+    });
+
+    if (pendingMutations.length === 0) {
+        return (
+            <IsOffline>
+                <Alert severity="warning">
+                    You are offline, the data may be outdated
+                </Alert>
+            </IsOffline>
+        );
+    }
+    return (
+        <IsOffline>
+            <Alert severity="warning">You have pending mutations</Alert>
+        </IsOffline>
+    );
+};
+
+const CustomOffline = () => {
+    return <Alert severity="warning">You are offline!</Alert>;
+};
+
+Offline.args = {
+    isOnline: true,
+    offline: 'default',
+};
+
+Offline.argTypes = {
+    isOnline: {
+        control: { type: 'boolean' },
+    },
+    offline: {
+        name: 'Offline component',
+        control: { type: 'radio' },
+        options: ['default', 'custom'],
+        mapping: {
+            default: undefined,
+            custom: <CustomOffline />,
+        },
+    },
+};

packages/ra-ui-materialui/src/detail/Edit.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-    EditBase,
-    useCheckMinimumRequiredProps,
-    RaRecord,
-    EditBaseProps,
-} from 'ra-core';
+import { EditBase, RaRecord, EditBaseProps } from 'ra-core';
 import { useThemeProps } from '@mui/material/styles';
 
 import { EditView, EditViewProps } from './EditView';
@@ -95,6 +90,8 @@ export const Edit = <RecordType extends RaRecord = any>(
             transform={transform}
             disableAuthentication={disableAuthentication}
             loading={loading}
+            // Disable offline support from ShowBase as it is handled by ShowView to keep the ShowView container
+            offline={false}
         >
             <EditView {...rest} />
         </EditBase>

packages/ra-ui-materialui/src/detail/EditView.tsx

@@ -18,8 +18,10 @@ import {
 import { EditActions } from './EditActions';
 import { Title } from '../layout';
 import { EditProps } from './Edit';
+import { Offline } from '../Offline';
 
 const defaultActions = <EditActions />;
+const defaultOffline = <Offline />;
 
 export const EditView = (props: EditViewProps) => {
     const {
@@ -30,18 +32,30 @@ export const EditView = (props: EditViewProps) => {
         className,
         component: Content = Card,
         emptyWhileLoading = false,
+        offline = defaultOffline,
         title,
         ...rest
     } = props;
 
     const { hasShow } = useResourceDefinition();
     const editContext = useEditContext();
 
-    const { resource, defaultTitle, record, isPending } = editContext;
+    const { resource, defaultTitle, record, isPaused, isPending } = editContext;
 
     const finalActions =
         typeof actions === 'undefined' && hasShow ? defaultActions : actions;
 
+    if (!record && offline !== false && isPaused) {
+        return (
+            <Root className={clsx('edit-page', className)} {...rest}>
+                <div className={clsx(EditClasses.main, EditClasses.noActions)}>
+                    <Content className={EditClasses.card}>{offline}</Content>
+                    {aside}
+                </div>
+            </Root>
+        );
+    }
+
     if (!record && isPending && emptyWhileLoading) {
         return null;
     }
@@ -82,6 +96,7 @@ export interface EditViewProps
     aside?: ReactElement;
     component?: ElementType;
     emptyWhileLoading?: boolean;
+    offline?: ReactNode;
     title?: string | ReactElement | false;
     sx?: SxProps<Theme>;
     render?: (editContext: EditControllerResult) => ReactNode;