Merge pull request #8319 from marmelab/fix-list-error-display

Fix `List` page display on dataProvider error

Author: fzaninotto

packages/ra-ui-materialui/src/list/List.spec.tsx

@@ -207,4 +207,26 @@ describe('<List />', () => {
             ).toHaveLength(1);
         });
     });
+
+    it('should render a list page with an error message when there is an error', async () => {
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+        const Datagrid = () => <div>datagrid</div>;
+        const dataProvider = {
+            getList: jest.fn(() =>
+                Promise.reject({ error: { key: 'error.unknown' } })
+            ),
+        } as any;
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <ThemeProvider theme={theme}>
+                    <List resource="posts">
+                        <Datagrid />
+                    </List>
+                </ThemeProvider>
+            </CoreAdminContext>
+        );
+        await waitFor(() => {
+            expect(screen.getByText('ra.page.error'));
+        });
+    });
 });

packages/ra-ui-materialui/src/list/ListView.tsx

@@ -12,6 +12,7 @@ import { ListToolbar } from './ListToolbar';
 import { Pagination as DefaultPagination } from './pagination';
 import { ListActions as DefaultActions } from './ListActions';
 import { Empty } from './Empty';
+import { Error } from '../layout';
 
 const defaultActions = <DefaultActions />;
 const defaultPagination = <DefaultPagination />;
@@ -50,10 +51,6 @@ export const ListView = <RecordType extends RaRecord = any>(
         return null;
     }
 
-    if (error) {
-        return null;
-    }
-
     const renderList = () => (
         <div className={ListClasses.main}>
             {(filters || actions) && (
@@ -70,7 +67,11 @@ export const ListView = <RecordType extends RaRecord = any>(
                       })
                     : children}
             </Content>
-            {pagination !== false && pagination}
+            {error ? (
+                <Error error={error} resetErrorBoundary={null} />
+            ) : (
+                pagination !== false && pagination
+            )}
         </div>
     );