Add offline support to <Show>

Author: djhi

packages/ra-ui-materialui/src/detail/Show.spec.tsx

@@ -26,8 +26,10 @@ import {
     TitleElement,
     Themed,
     WithRenderProp,
+    Offline,
 } from './Show.stories';
 import { Show } from './Show';
+import { Alert } from '@mui/material';
 
 describe('<Show />', () => {
     beforeEach(async () => {
@@ -226,4 +228,29 @@ describe('<Show />', () => {
             await screen.findByText('Foo lorem');
         });
     });
+    it('should render the default offline component node when offline', async () => {
+        const { rerender } = render(<Offline isOnline={false} />);
+        await screen.findByText('No connectivity. Could not fetch data.');
+        rerender(<Offline isOnline={true} />);
+        await screen.findByText('War and Peace');
+        expect(
+            screen.queryByText('No connectivity. Could not fetch data.')
+        ).toBeNull();
+        rerender(<Offline isOnline={false} />);
+        await screen.findByText('You are offline, the data may be outdated');
+    });
+    it('should render the custom offline component node when offline', async () => {
+        const CustomOffline = () => {
+            return <Alert severity="warning">You are offline!</Alert>;
+        };
+        const { rerender } = render(
+            <Offline isOnline={false} offline={<CustomOffline />} />
+        );
+        await screen.findByText('You are offline!');
+        rerender(<Offline isOnline={true} offline={<CustomOffline />} />);
+        await screen.findByText('War and Peace');
+        expect(screen.queryByText('You are offline!')).toBeNull();
+        rerender(<Offline isOnline={false} offline={<CustomOffline />} />);
+        await screen.findByText('You are offline, the data may be outdated');
+    });
 });

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

@@ -1,15 +1,21 @@
 import * as React from 'react';
 import { Admin } from 'react-admin';
-import { Resource, useRecordContext, TestMemoryRouter } from 'ra-core';
-import { Box, Card, Stack, ThemeOptions } from '@mui/material';
+import {
+    Resource,
+    useRecordContext,
+    TestMemoryRouter,
+    IsOffline,
+} from 'ra-core';
+import { Alert, Box, Card, Stack, ThemeOptions } from '@mui/material';
+import { deepmerge } from '@mui/utils';
+import { onlineManager } from '@tanstack/react-query';
 
 import { TextField } from '../field';
 import { Labeled } from '../Labeled';
 import { SimpleShowLayout } from './SimpleShowLayout';
 import { EditButton } from '../button';
 import TopToolbar from '../layout/TopToolbar';
-import { Show } from './Show';
-import { deepmerge } from '@mui/utils';
+import { Show, ShowProps } from './Show';
 import { defaultLightTheme } from '../theme';
 
 export default { title: 'ra-ui-materialui/detail/Show' };
@@ -299,3 +305,67 @@ 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={<BookShowOffline offline={offline} />}
+                />
+            </Admin>
+        </TestMemoryRouter>
+    );
+};
+
+const BookShowOffline = (props: ShowProps) => {
+    return (
+        <Show emptyWhileLoading {...props}>
+            <IsOffline>
+                <Alert severity="warning">
+                    You are offline, the data may be outdated
+                </Alert>
+            </IsOffline>
+            <SimpleShowLayout>
+                <TextField source="title" />
+                <TextField source="author" />
+                <TextField source="summary" />
+                <TextField source="year" />
+            </SimpleShowLayout>
+        </Show>
+    );
+};
+
+const CustomOffline = () => {
+    return <Alert severity="warning">You are offline!</Alert>;
+};
+
+Offline.args = {
+    isOnline: true,
+    offline: false,
+};
+
+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/Show.tsx

@@ -90,6 +90,8 @@ export const Show = <RecordType extends RaRecord = any>(
             queryOptions={queryOptions}
             resource={resource}
             loading={loading}
+            // Disable offline support from ShowBase as it is handled by ShowView to keep the ShowView container
+            offline={false}
         >
             <ShowView {...rest} />
         </ShowBase>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ReactElement, ElementType, ReactNode } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import {
     Card,
     type ComponentsOverrides,
@@ -16,8 +16,10 @@ import {
 import { ShowActions } from './ShowActions';
 import { Title } from '../layout';
 import { ShowProps } from './Show';
+import { Offline } from '../Offline';
 
 const defaultActions = <ShowActions />;
+const defaultOffline = <Offline />;
 
 export const ShowView = (props: ShowViewProps) => {
     const {
@@ -28,20 +30,32 @@ export const ShowView = (props: ShowViewProps) => {
         className,
         component: Content = Card,
         emptyWhileLoading = false,
+        offline = defaultOffline,
         title,
         ...rest
     } = props;
 
     const showContext = useShowContext();
-    const { resource, defaultTitle, record } = showContext;
+    const { resource, defaultTitle, isPaused, record } = showContext;
     const { hasEdit } = useResourceDefinition();
 
     const finalActions =
         typeof actions === 'undefined' && hasEdit ? defaultActions : actions;
 
+    if (!record && offline !== false && isPaused) {
+        return (
+            <Root className={clsx('show-page', className)} {...rest}>
+                <div className={clsx(ShowClasses.main, ShowClasses.noActions)}>
+                    <Content className={ShowClasses.card}>{offline}</Content>
+                    {aside}
+                </div>
+            </Root>
+        );
+    }
     if (!record && emptyWhileLoading) {
         return null;
     }
+
     return (
         <Root className={clsx('show-page', className)} {...rest}>
             {title !== false && (
@@ -68,11 +82,12 @@ export const ShowView = (props: ShowViewProps) => {
 
 export interface ShowViewProps
     extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'title'> {
-    actions?: ReactElement | false;
-    aside?: ReactElement;
+    actions?: ReactNode | false;
+    aside?: ReactNode;
     component?: ElementType;
     emptyWhileLoading?: boolean;
-    title?: string | ReactElement | false;
+    offline?: ReactNode;
+    title?: ReactNode;
     sx?: SxProps<Theme>;
     render?: (showContext: ShowControllerResult) => ReactNode;
 }

packages/ra-ui-materialui/src/layout/Title.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState, ReactElement } from 'react';
+import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { RaRecord, TitleComponent, warning } from 'ra-core';
 
@@ -50,6 +50,6 @@ export interface TitleProps {
     className?: string;
     defaultTitle?: TitleComponent;
     record?: Partial<RaRecord>;
-    title?: string | ReactElement;
+    title?: React.ReactNode;
     preferenceKey?: string | false;
 }