Fix ReferenceManyField does not show pagination when using partial pa…

…gination Closes #8014
marmelab · Nov 4, 2022 · 53cd06c · 53cd06c
1 parent d7510de
commit 53cd06c
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 4 deletions.
diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx
@@ -9,6 +9,7 @@ import { AdminContext } from '../AdminContext';
 import { ReferenceManyField } from './ReferenceManyField';
 import { TextField } from './TextField';
 import { SingleFieldList } from '../list/SingleFieldList';
+import { Pagination } from '../list/pagination/Pagination';
 
 const theme = createTheme();
 
@@ -179,4 +180,73 @@ describe('<ReferenceManyField />', () => {
         expect(links[0].getAttribute('href')).toEqual('/comments/1');
         expect(links[1].getAttribute('href')).toEqual('/comments/2');
     });
+
+    describe('pagination', () => {
+        it('should render pagination based on total from getManyReference', async () => {
+            const data = [
+                { id: 1, title: 'hello' },
+                { id: 2, title: 'world' },
+            ];
+            const history = createMemoryHistory();
+            render(
+                <AdminContext
+                    dataProvider={testDataProvider({
+                        getManyReference: () =>
+                            Promise.resolve({ data, total: 12 }),
+                    })}
+                    history={history}
+                >
+                    <ReferenceManyField
+                        {...defaultProps}
+                        pagination={<Pagination />}
+                    >
+                        <SingleFieldList>
+                            <TextField source="title" />
+                        </SingleFieldList>
+                    </ReferenceManyField>
+                </AdminContext>
+            );
+            await screen.findByText('hello');
+            await screen.findByText('world');
+            await screen.findByText('ra.navigation.page_range_info');
+            await screen.findByText('1');
+            await screen.findByText('2');
+        });
+        it('should render pagination based on pageInfo from getManyReference', async () => {
+            const data = [
+                { id: 1, title: 'hello' },
+                { id: 2, title: 'world' },
+            ];
+            const history = createMemoryHistory();
+            render(
+                <AdminContext
+                    dataProvider={testDataProvider({
+                        getManyReference: () =>
+                            Promise.resolve({
+                                data,
+                                pageInfo: {
+                                    hasPreviousPage: false,
+                                    hasNextPage: true,
+                                },
+                            }),
+                    })}
+                    history={history}
+                >
+                    <ReferenceManyField
+                        {...defaultProps}
+                        pagination={<Pagination />}
+                    >
+                        <SingleFieldList>
+                            <TextField source="title" />
+                        </SingleFieldList>
+                    </ReferenceManyField>
+                </AdminContext>
+            );
+            await screen.findByText('hello');
+            await screen.findByText('world');
+            await screen.findByText('ra.navigation.partial_page_range_info');
+            await screen.findByLabelText('ra.navigation.previous');
+            await screen.findByLabelText('ra.navigation.next');
+        });
+    });
 });
diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.tsx
@@ -89,9 +89,7 @@ export const ReferenceManyField: FC<ReferenceManyFieldProps> = props => {
         <ResourceContextProvider value={reference}>
             <ListContextProvider value={controllerProps}>
                 {children}
-                {pagination && controllerProps.total !== undefined
-                    ? pagination
-                    : null}
+                {pagination !== false && pagination}
             </ListContextProvider>
         </ResourceContextProvider>
     );
@@ -103,7 +101,7 @@ export interface ReferenceManyFieldProps
     children: ReactNode;
     filter?: FilterPayload;
     page?: number;
-    pagination?: ReactElement;
+    pagination?: ReactElement | false;
     perPage?: number;
     reference: string;
     sort?: SortPayload;