Add offline support to details components

djhi · djhi · commit 9f418bff81ee · 2025-05-15T11:21:55.000+02:00
diff --git a/packages/ra-core/src/controller/edit/useEditController.ts b/packages/ra-core/src/controller/edit/useEditController.ts
@@ -108,6 +108,7 @@ export const useEditController = <
         error,
         isLoading,
         isFetching,
+        isPaused,
         isPending,
         refetch,
     } = useGetOne<RecordType, ErrorType>(
@@ -268,6 +269,7 @@ export const useEditController = <
         error,
         isFetching,
         isLoading,
+        isPaused,
         isPending,
         mutationMode,
         record,
@@ -303,6 +305,7 @@ export interface EditControllerBaseResult<RecordType extends RaRecord = any>
     defaultTitle?: string;
     isFetching: boolean;
     isLoading: boolean;
+    isPaused: boolean;
     refetch: UseGetOneHookValue<RecordType>['refetch'];
     redirect: RedirectionSideEffect;
     resource: string;
diff --git a/packages/ra-core/src/controller/field/useReferenceOneFieldController.tsx b/packages/ra-core/src/controller/field/useReferenceOneFieldController.tsx
@@ -69,47 +69,57 @@ export const useReferenceOneFieldController = <
     const notify = useNotify();
     const { meta, ...otherQueryOptions } = queryOptions;
 
-    const { data, error, isFetching, isLoading, isPending, refetch } =
-        useGetManyReference<RecordType, ErrorType>(
-            reference,
-            {
-                target,
-                id: get(record, source),
-                pagination: { page: 1, perPage: 1 },
-                sort,
-                filter,
-                meta,
-            },
-            {
-                enabled: !!record,
-                onError: error =>
-                    notify(
-                        typeof error === 'string'
-                            ? error
-                            : (error as Error).message ||
-                                  'ra.notification.http_error',
-                        {
-                            type: 'error',
-                            messageArgs: {
-                                _:
-                                    typeof error === 'string'
-                                        ? error
-                                        : (error as Error)?.message
-                                          ? (error as Error).message
-                                          : undefined,
-                            },
-                        }
-                    ),
-                ...otherQueryOptions,
-            }
-        );
+    const {
+        data,
+        error,
+        isFetching,
+        isLoading,
+        isPending,
+        isPaused,
+        isPlaceholderData,
+        refetch,
+    } = useGetManyReference<RecordType, ErrorType>(
+        reference,
+        {
+            target,
+            id: get(record, source),
+            pagination: { page: 1, perPage: 1 },
+            sort,
+            filter,
+            meta,
+        },
+        {
+            enabled: !!record,
+            onError: error =>
+                notify(
+                    typeof error === 'string'
+                        ? error
+                        : (error as Error).message ||
+                              'ra.notification.http_error',
+                    {
+                        type: 'error',
+                        messageArgs: {
+                            _:
+                                typeof error === 'string'
+                                    ? error
+                                    : (error as Error)?.message
+                                      ? (error as Error).message
+                                      : undefined,
+                        },
+                    }
+                ),
+            ...otherQueryOptions,
+        }
+    );
 
     return {
         referenceRecord: data ? data[0] : undefined,
         error,
         isFetching,
         isLoading,
         isPending,
+        isPaused,
+        isPlaceholderData,
         refetch,
     };
 };
diff --git a/packages/ra-core/src/controller/show/useShowController.ts b/packages/ra-core/src/controller/show/useShowController.ts
@@ -96,6 +96,7 @@ export const useShowController = <
         error,
         isLoading,
         isFetching,
+        isPaused,
         isPending,
         refetch,
     } = useGetOne<RecordType, ErrorType>(
@@ -141,6 +142,7 @@ export const useShowController = <
         error,
         isLoading,
         isFetching,
+        isPaused,
         isPending,
         record,
         refetch,
@@ -162,6 +164,7 @@ export interface ShowControllerBaseResult<RecordType extends RaRecord = any> {
     defaultTitle?: string;
     isFetching: boolean;
     isLoading: boolean;
+    isPaused: boolean;
     resource: string;
     record?: RecordType;
     refetch: UseGetOneHookValue<RecordType>['refetch'];
diff --git a/packages/ra-ui-materialui/src/detail/EditView.tsx b/packages/ra-ui-materialui/src/detail/EditView.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ReactElement, ElementType } from 'react';
+import type { ReactNode, ElementType } from 'react';
 import {
     Card,
     CardContent,
@@ -14,8 +14,10 @@ import { useEditContext, useResourceDefinition } from 'ra-core';
 
 import { EditActions } from './EditActions';
 import { Title } from '../layout';
+import { Offline } from '../Offline';
 
 const defaultActions = <EditActions />;
+const defaultOffline = <Offline />;
 
 export const EditView = (inProps: EditViewProps) => {
     const props = useThemeProps({
@@ -28,13 +30,31 @@ export const EditView = (inProps: EditViewProps) => {
         children,
         className,
         component: Content = Card,
+        offline = defaultOffline,
         emptyWhileLoading = false,
         title,
         ...rest
     } = props;
 
     const { hasShow } = useResourceDefinition();
-    const { resource, defaultTitle, record, isPending } = useEditContext();
+    const { resource, defaultTitle, record, isPending, isPaused } =
+        useEditContext();
+
+    if (isPaused && offline) {
+        return (
+            <Root className={clsx('edit-page', className)} {...rest}>
+                <div
+                    className={clsx(
+                        EditClasses.main,
+                        EditClasses.noActions,
+                        EditClasses.offline
+                    )}
+                >
+                    {offline}
+                </div>
+            </Root>
+        );
+    }
 
     const finalActions =
         typeof actions === 'undefined' && hasShow ? defaultActions : actions;
@@ -68,11 +88,12 @@ export const EditView = (inProps: EditViewProps) => {
 
 export interface EditViewProps
     extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'title'> {
-    actions?: ReactElement | false;
-    aside?: ReactElement;
+    actions?: ReactNode | false;
+    aside?: ReactNode;
+    offline?: ReactNode;
     component?: ElementType;
     emptyWhileLoading?: boolean;
-    title?: string | ReactElement | false;
+    title?: ReactNode;
     sx?: SxProps<Theme>;
 }
 
@@ -82,6 +103,7 @@ export const EditClasses = {
     main: `${PREFIX}-main`,
     noActions: `${PREFIX}-noActions`,
     card: `${PREFIX}-card`,
+    offline: `${PREFIX}-offline`,
 };
 
 const Root = styled('div', {
@@ -95,6 +117,10 @@ const Root = styled('div', {
     [`& .${EditClasses.noActions}`]: {
         marginTop: '1em',
     },
+    [`& .${EditClasses.offline}`]: {
+        flexDirection: 'column',
+        alignItems: 'unset',
+    },
     [`& .${EditClasses.card}`]: {
         flex: '1 1 auto',
     },
diff --git a/packages/ra-ui-materialui/src/detail/ShowView.tsx b/packages/ra-ui-materialui/src/detail/ShowView.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ReactElement, ElementType } from 'react';
+import type { ReactNode, ElementType } from 'react';
 import {
     Card,
     type ComponentsOverrides,
@@ -12,8 +12,10 @@ import clsx from 'clsx';
 import { useShowContext, useResourceDefinition } from 'ra-core';
 import { ShowActions } from './ShowActions';
 import { Title } from '../layout';
+import { Offline } from '../Offline';
 
 const defaultActions = <ShowActions />;
+const defaultOffline = <Offline />;
 
 export const ShowView = (inProps: ShowViewProps) => {
     const props = useThemeProps({
@@ -27,13 +29,30 @@ export const ShowView = (inProps: ShowViewProps) => {
         className,
         component: Content = Card,
         emptyWhileLoading = false,
+        offline = defaultOffline,
         title,
         ...rest
     } = props;
 
-    const { resource, defaultTitle, record } = useShowContext();
+    const { resource, defaultTitle, isPaused, record } = useShowContext();
     const { hasEdit } = useResourceDefinition();
 
+    if (isPaused && offline) {
+        return (
+            <Root className={clsx('show-page', className)} {...rest}>
+                <div
+                    className={clsx(
+                        ShowClasses.main,
+                        ShowClasses.noActions,
+                        ShowClasses.offline
+                    )}
+                >
+                    {offline}
+                </div>
+            </Root>
+        );
+    }
+
     const finalActions =
         typeof actions === 'undefined' && hasEdit ? defaultActions : actions;
 
@@ -64,11 +83,12 @@ export const ShowView = (inProps: ShowViewProps) => {
 
 export interface ShowViewProps
     extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'title'> {
-    actions?: ReactElement | false;
-    aside?: ReactElement;
+    actions?: ReactNode;
+    aside?: ReactNode;
     component?: ElementType;
     emptyWhileLoading?: boolean;
-    title?: string | ReactElement | false;
+    offline?: ReactNode;
+    title?: ReactNode;
     sx?: SxProps<Theme>;
 }
 
@@ -78,6 +98,7 @@ export const ShowClasses = {
     main: `${PREFIX}-main`,
     noActions: `${PREFIX}-noActions`,
     card: `${PREFIX}-card`,
+    offline: `${PREFIX}-offline`,
 };
 
 const Root = styled('div', {
@@ -90,6 +111,10 @@ const Root = styled('div', {
     [`& .${ShowClasses.noActions}`]: {
         marginTop: '1em',
     },
+    [`& .${ShowClasses.offline}`]: {
+        flexDirection: 'column',
+        alignItems: 'unset',
+    },
     [`& .${ShowClasses.card}`]: {
         flex: '1 1 auto',
     },
diff --git a/packages/ra-ui-materialui/src/layout/Title.tsx b/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, ReactNode } 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?: ReactNode;
     preferenceKey?: string | false;
 }
