Add pagination to audit logs page

packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/PaginationFooter/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
+
+const PaginationFooter = ({ pagination }) => {
+  return (
+    <Box paddingTop={4}>
+      <Flex alignItems="flex-end" justifyContent="space-between">
+        <PageSizeURLQuery trackedEvent="willChangeNumberOfEntriesPerPage" />
+        <PaginationURLQuery pagination={pagination} />
+      </Flex>
+    </Box>
+  );
+};
+
+PaginationFooter.defaultProps = {
+  pagination: {
+    pageCount: 0,
+    pageSize: 10,
+    total: 0,
+  },
+};
+
+PaginationFooter.propTypes = {
+  pagination: PropTypes.shape({
+    page: PropTypes.number,
+    pageCount: PropTypes.number,
+    pageSize: PropTypes.number,
+    total: PropTypes.number,
+  }),
+};
+
+export default PaginationFooter;

packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/index.js

@@ -16,6 +16,7 @@ import { useFetchClient } from '../../../../../hooks';
 import TableRows from './TableRows';
 import tableHeaders from './utils/tableHeaders';
 import ModalDialog from './ModalDialog';
+import PaginationFooter from './PaginationFooter';
 
 const ListView = () => {
   const { formatMessage } = useIntl();
@@ -92,6 +93,7 @@ const ListView = () => {
         >
           <TableRows headers={headers} rows={data?.results || []} onModalToggle={handleToggle} />
         </DynamicTable>
+        <PaginationFooter pagination={data?.pagination} />
       </ContentLayout>
       {isModalOpen && <ModalDialog onToggle={handleToggle} data={detailsActionData} />}
     </Main>

packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/index.test.js

@@ -8,7 +8,7 @@ import userEvent from '@testing-library/user-event';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { TrackingProvider } from '@strapi/helper-plugin';
 import ListView from '../index';
-import TEST_DATA from './utils/data';
+import { TEST_DATA, getBigTestData } from './utils/data';
 
 const history = createMemoryHistory();
 const user = userEvent.setup();
@@ -117,4 +117,71 @@ describe('ADMIN | Pages | AUDIT LOGS | ListView', () => {
     await user.click(closeButton);
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
+
+  it('should show pagination and be on page 1 on first render', async () => {
+    mockUseQuery.mockReturnValue({
+      data: {
+        results: getBigTestData(15),
+        pagination: {
+          page: 1,
+          pageSize: 10,
+          pageCount: 2,
+          total: 15,
+        },
+      },
+      isLoading: false,
+    });
+
+    const { container } = render(App);
+
+    const pagination = await waitFor(() => container.querySelector('nav[aria-label="pagination"]'));
+
+    expect(pagination).toBeInTheDocument();
+    expect(pagination.querySelectorAll('ul li')[1].querySelector('a')).toHaveTextContent('1');
+    expect(pagination.querySelectorAll('ul li')[1].querySelector('a')).toHaveClass('active');
+  });
+
+  it('should add the right query params when page 2 is clicked', async () => {
+    mockUseQuery.mockReturnValue({
+      data: {
+        results: getBigTestData(15),
+        pagination: {
+          page: 1,
+          pageSize: 10,
+          pageCount: 2,
+          total: 15,
+        },
+      },
+      isLoading: false,
+    });
+
+    const { container } = render(App);
+
+    const pagination = await waitFor(() => container.querySelector('nav[aria-label="pagination"]'));
+
+    await user.click(pagination.querySelectorAll('ul li')[2].querySelector('a'));
+    expect(history.location.search).toEqual('?page=2');
+  });
+
+  it('should show 20 elements if pageSize is 20', async () => {
+    history.location.search = '?pageSize=20';
+
+    mockUseQuery.mockReturnValue({
+      data: {
+        results: getBigTestData(20),
+        pagination: {
+          page: 1,
+          pageSize: 20,
+          pageCount: 1,
+          total: 20,
+        },
+      },
+      isLoading: false,
+    });
+
+    const { container } = render(App);
+
+    const rows = await waitFor(() => container.querySelector('tbody').querySelectorAll('tr'));
+    expect(rows.length).toEqual(20);
+  });
 });

packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/utils/data.js

@@ -1,4 +1,4 @@
-const TEST_DATA = [
+export const TEST_DATA = [
   {
     id: 1,
     action: 'role.create',
@@ -37,4 +37,15 @@ const TEST_DATA = [
   },
 ];
 
-export default TEST_DATA;
+export const getBigTestData = (quantity) => {
+  const data = [];
+
+  for (let i = 0; i < quantity; i++) {
+    data.push({
+      ...TEST_DATA[i % TEST_DATA.length],
+      id: i + 1,
+    });
+  }
+
+  return data;
+};