Improve Offline component design for reference fields and inputs

Author: djhi

docs/DataProviders.md

@@ -945,6 +945,10 @@ export const App = () => (
 ```
 {% endraw %}
 
+This is enough to make all the standard react-admin features support offline scenarios.
+
+## Adding Offline Support To Custom Mutations
+
 If you have [custom mutations](./Actions.md#calling-custom-methods) on your dataProvider, you can enable offline support for them too. For instance, if your `dataProvider` exposes a `banUser()` method:
 
 ```ts

examples/simple/src/comments/CommentList.tsx

@@ -30,6 +30,7 @@ import {
     useListContext,
     useTranslate,
     Exporter,
+    Offline,
 } from 'react-admin';
 
 const commentFilters = [
@@ -63,9 +64,10 @@ const exporter: Exporter = (records, fetchRelatedRecords) =>
     });
 
 const CommentGrid = () => {
-    const { data } = useListContext();
+    const { data, isPaused, isPlaceholderData } = useListContext();
     const translate = useTranslate();
 
+    if (isPaused && (data == null || isPlaceholderData)) return <Offline />;
     if (!data) return null;
     return (
         <Grid spacing={2} container>

examples/simple/src/posts/PostEdit.tsx

@@ -31,6 +31,7 @@ import {
     useCreateSuggestionContext,
     EditActionsProps,
     CanAccess,
+    Translate,
 } from 'react-admin';
 import {
     Box,
@@ -40,7 +41,9 @@ import {
     DialogActions,
     DialogContent,
     TextField as MuiTextField,
+    Tooltip,
 } from '@mui/material';
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import PostTitle from './PostTitle';
 import TagReferenceInput from './TagReferenceInput';
 
@@ -229,6 +232,22 @@ const PostEdit = () => (
                         reference="comments"
                         target="post_id"
                         sx={{ lineHeight: 'inherit' }}
+                        offline={
+                            <Tooltip
+                                title={
+                                    <Translate i18nKey="ra.notification.offline" />
+                                }
+                            >
+                                <ReportProblemOutlinedIcon
+                                    color="warning"
+                                    sx={{
+                                        marginTop: -2,
+                                        position: 'relative',
+                                        top: theme => theme.spacing(0.5),
+                                    }}
+                                />
+                            </Tooltip>
+                        }
                     />
                 }
             >

examples/simple/src/posts/PostShow.tsx

@@ -23,7 +23,10 @@ import {
     useShowController,
     useLocaleState,
     useRecordContext,
+    Translate,
 } from 'react-admin';
+import { Tooltip } from '@mui/material';
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import PostTitle from './PostTitle';
 
 const CreateRelatedComment = () => {
@@ -112,11 +115,36 @@ const PostShow = () => {
                     </TabbedShowLayout.Tab>
                     <TabbedShowLayout.Tab
                         label="post.form.comments"
+                        sx={{
+                            '& .MuiTab-root > span': {
+                                display: 'flex',
+                                alignItems: 'center',
+                            },
+                        }}
                         count={
                             <ReferenceManyCount
                                 reference="comments"
                                 target="post_id"
-                                sx={{ lineHeight: 'inherit' }}
+                                sx={{
+                                    lineHeight: 'inherit',
+                                }}
+                                offline={
+                                    <Tooltip
+                                        title={
+                                            <Translate i18nKey="ra.notification.offline" />
+                                        }
+                                    >
+                                        <ReportProblemOutlinedIcon
+                                            color="warning"
+                                            sx={{
+                                                marginTop: -2,
+                                                position: 'relative',
+                                                top: theme =>
+                                                    theme.spacing(0.5),
+                                            }}
+                                        />
+                                    </Tooltip>
+                                }
                             />
                         }
                     >

examples/simple/src/tags/TagList.tsx

@@ -6,6 +6,7 @@ import {
     useListContext,
     EditButton,
     Title,
+    Offline,
 } from 'react-admin';
 import {
     Box,
@@ -25,15 +26,27 @@ const TagList = () => (
     <ListBase perPage={1000}>
         <Stack>
             <ListActions />
-            <Box maxWidth="20em" marginTop="1em">
-                <Card>
-                    <Tree />
-                </Card>
-            </Box>
+            <TagListView />
         </Stack>
     </ListBase>
 );
 
+const TagListView = () => {
+    const { data, isPaused } = useListContext();
+
+    if (isPaused && data == null) {
+        return <Offline sx={{ width: '100%' }} />;
+    }
+
+    return (
+        <Box maxWidth="20em" marginTop="1em">
+            <Card>
+                <Tree />
+            </Card>
+        </Box>
+    );
+};
+
 const Tree = () => {
     const { data, defaultTitle } = useListContext();
     const [openChildren, setOpenChildren] = useState<string[]>([]);

packages/ra-ui-materialui/src/Offline.tsx

@@ -7,9 +7,10 @@ import {
     Typography,
 } from '@mui/material';
 import { useGetResourceLabel, useResourceContext, useTranslate } from 'ra-core';
+import clsx from 'clsx';
 
 export const Offline = (props: Offline) => {
-    const { message: messageProp } = props;
+    const { icon, message: messageProp, variant = 'standard', ...rest } = props;
     const translate = useTranslate();
     const resource = useResourceContext(props);
     const getResourceLabel = useGetResourceLabel();
@@ -31,23 +32,43 @@ export const Offline = (props: Offline) => {
         }
     );
     return (
-        <Root severity="warning" {...props}>
+        <Root
+            className={clsx(OfflineClasses.root, {
+                [OfflineClasses.inline]: variant === 'inline',
+            })}
+            severity="warning"
+            variant={variant === 'inline' ? 'outlined' : variant}
+            icon={variant === 'inline' ? false : icon}
+            {...rest}
+        >
             <Typography variant="body2">{message}</Typography>
         </Root>
     );
 };
 
-export interface Offline extends AlertProps {
+export interface Offline extends Omit<AlertProps, 'variant'> {
     resource?: string;
     message?: string;
+    variant?: AlertProps['variant'] | 'inline';
 }
 
 const PREFIX = 'RaOffline';
+export const OfflineClasses = {
+    root: `${PREFIX}-root`,
+    inline: `${PREFIX}-inline`,
+};
 
 const Root = styled(Alert, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(() => ({}));
+})(() => ({
+    [`&.${OfflineClasses.inline}`]: {
+        border: 'none',
+        display: 'inline-flex',
+        padding: 0,
+        margin: 0,
+    },
+}));
 
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey {

packages/ra-ui-materialui/src/field/ReferenceField.tsx

@@ -105,7 +105,7 @@ export interface ReferenceFieldProps<
 
 // useful to prevent click bubbling in a datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();
-const defaultOffline = <Offline />;
+const defaultOffline = <Offline variant="inline" />;
 
 export const ReferenceFieldView = <
     RecordType extends Record<string, any> = Record<string, any>,

packages/ra-ui-materialui/src/field/ReferenceManyCount.tsx

@@ -21,7 +21,7 @@ import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
 import { Link } from '../Link';
 import { Offline } from '../Offline';
 
-const defaultOffline = <Offline />;
+const defaultOffline = <Offline variant="inline" />;
 
 /**
  * Fetch and render the number of records related to the current one

packages/ra-ui-materialui/src/field/ReferenceOneField.tsx

@@ -19,7 +19,7 @@ import { FieldProps } from './types';
 import { ReferenceFieldView } from './ReferenceField';
 import { Offline } from '../Offline';
 
-const defaultOffline = <Offline />;
+const defaultOffline = <Offline variant="inline" />;
 
 /**
  * Render the related record in a one-to-one relationship

packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx

@@ -101,8 +101,12 @@ export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => {
 
     return isPaused && allChoices == null ? (
         offline ?? (
-            <Labeled {...props}>
-                <Offline />
+            <Labeled
+                source={props.source}
+                label={props.label}
+                resource={props.resource}
+            >
+                <Offline variant="inline" />
             </Labeled>
         )
     ) : (