diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/PaginationFooter/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/PaginationFooter/index.js
new file mode 100644
index 0000000000..63d7f73b60
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ );
+};
+
+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;
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/index.js
index cf89346387..2562a9257a 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/index.js
+++ b/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 = () => {
>
+
{isModalOpen && }
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/index.test.js
index 2cafc6fece..73624a1b56 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/index.test.js
+++ b/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);
+ });
});
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/utils/data.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/utils/data.js
index f75a75ac54..12fcc9559e 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/utils/data.js
+++ b/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;
+};