Allow Offline to work outside of a ResourceContext

Author: fzaninotto

packages/ra-core/src/i18n/useResourceTranslation.ts

@@ -13,17 +13,18 @@ export const useResourceTranslation = (
         }
         return translate(userText, { _: userText, ...options });
     }
+    if (!resourceI18nKey) {
+        return translate(baseI18nKey, options);
+    }
 
-    const translatedText = translate(resourceI18nKey, {
+    return translate(resourceI18nKey, {
         ...options,
         _: translate(baseI18nKey, options),
     });
-
-    return translatedText;
 };
 
 export interface UseResourceTranslationOptions {
-    resourceI18nKey: string;
+    resourceI18nKey?: string;
     baseI18nKey: string;
     userText?: ReactNode;
     options?: Record<string, any>;

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

@@ -17,17 +17,15 @@ export const Offline = (props: Offline) => {
     const { icon, message: messageProp, variant = 'standard', ...rest } = props;
     const resource = useResourceContext(props);
     const getResourceLabel = useGetResourceLabel();
-    if (!resource) {
-        throw new Error(
-            '<Offline> must be used inside a <Resource> component or provided a resource prop'
-        );
-    }
+
     const message = useResourceTranslation({
         baseI18nKey: 'ra.notification.offline',
-        resourceI18nKey: `resources.${resource}.notification.offline`,
+        resourceI18nKey: resource
+            ? `resources.${resource}.notification.offline`
+            : undefined,
         userText: messageProp,
         options: {
-            name: getResourceLabel(resource, 0),
+            name: resource ? getResourceLabel(resource, 0) : undefined,
             _: 'No connectivity. Could not fetch data.',
         },
     });