From 981890919b526556f2e8cda17a7b198c9bc18d8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= Date: Wed, 4 Jan 2023 11:21:37 +0100 Subject: [PATCH 1/4] Use real data on audit log modal --- .../AuditLogs/ListView/ModalDialog/index.js | 8 ++++- .../pages/AuditLogs/ListView/index.js | 31 +++++++++++-------- .../pages/AuditLogs/ListView/utils/api.js | 10 ++++-- 3 files changed, 33 insertions(+), 16 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js index 90933ae19c..5b9602077d 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js @@ -11,7 +11,9 @@ import getDefaultMessage from '../utils/getActionTypesDefaultMessages'; import useFormatTimeStamp from '../hooks/useFormatTimeStamp'; import ActionItem from './ActionItem'; -const ModalDialog = ({ onToggle, data: { date, user, action } }) => { +const ModalDialog = ({ onToggle, data }) => { + const { date, user, action, payload } = data; + const { formatMessage } = useIntl(); const formatTimeStamp = useFormatTimeStamp(); const formattedDate = formatTimeStamp(date); @@ -67,6 +69,10 @@ const ModalDialog = ({ onToggle, data: { date, user, action } }) => { actionName={user ? user.fullname : '-'} /> + {/* TODO remove when adding JSON component */} + + {JSON.stringify({ payload }, null, 2)} + ); 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 e906105b17..59efb9880d 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 @@ -14,15 +14,11 @@ import adminPermissions from '../../../../../permissions'; // import { useFetchClient } from '../../../../../hooks'; import TableRows from './DynamicTable/TableRows'; import tableHeaders from './utils/tableHeaders'; -import { fetchData } from './utils/api'; +import { fetchAuditLogsPage, fetchAuditLog } from './utils/api'; import ModalDialog from './ModalDialog'; -const QUERY = 'audit-logs'; - const ListView = () => { const { formatMessage } = useIntl(); - const [isModalOpen, setIsModalOpen] = useState(false); - const [detailsActionData, setDetailsActionData] = useState(null); const toggleNotification = useNotification(); const { allowedActions: { canRead }, @@ -42,7 +38,7 @@ const ListView = () => { return results; }; */ - const { status, data, isFetching } = useQuery(QUERY, fetchData, { + const { status, data, isFetching } = useQuery('audit-logs', fetchAuditLogsPage, { enabled: canRead, keepPreviousData: true, retry: false, @@ -70,13 +66,20 @@ const ListView = () => { }, })); - const handleToggle = (id) => { - setIsModalOpen((prev) => !prev); - - if (id) { - const actionData = data.find((action) => action.id === id); - setDetailsActionData(actionData); + const [openedLogId, setOpenedLogId] = useState(null); + const { data: openedLogData, status: openedLogStatus } = useQuery( + ['audit-log', openedLogId], + () => fetchAuditLog(openedLogId), + { + enabled: !!openedLogId, } + ); + + console.log({ openedLogData, openedLogId }); + + const handleToggle = (id) => { + // Either saves the id of the log to open or closes the modal + setOpenedLogId(id); }; return ( @@ -100,7 +103,9 @@ const ListView = () => { - {isModalOpen && } + {openedLogId && openedLogStatus === 'success' && ( + + )} ); }; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/utils/api.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/utils/api.js index 1d6165f1f1..53f0771956 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/utils/api.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/utils/api.js @@ -1,6 +1,6 @@ import { axiosInstance } from '../../../../../../core/utils'; -const fetchData = async () => { +const fetchAuditLogsPage = async () => { const { data: { results }, } = await axiosInstance.get(`/admin/audit-logs?pageSize=30`); @@ -8,4 +8,10 @@ const fetchData = async () => { return results; }; -export { fetchData }; +const fetchAuditLog = async (id) => { + const { data } = await axiosInstance.get(`/admin/audit-logs/${id}`); + + return data; +}; + +export { fetchAuditLogsPage, fetchAuditLog }; From a72a540088f68439e9ce55d915d7f5b544dea915 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= Date: Fri, 6 Jan 2023 16:57:11 +0100 Subject: [PATCH 2/4] Add live data to audit log modal --- .../AuditLogs/ListView/ModalDialog/index.js | 72 ++++++++++++++----- .../AuditLogs/ListView/TableRows/index.js | 8 +-- .../ListView/TableRows/tests/index.test.js | 8 +-- .../pages/AuditLogs/ListView/index.js | 30 ++------ .../AuditLogs/ListView/tests/index.test.js | 32 ++++++--- .../AuditLogs/ListView/tests/utils/data.js | 18 ++++- 6 files changed, 108 insertions(+), 60 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js index 5b9602077d..042c007b56 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js @@ -1,31 +1,60 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; +import { useQuery } from 'react-query'; import { ModalLayout, ModalHeader, ModalBody } from '@strapi/design-system/ModalLayout'; import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs'; +import { Loader } from '@strapi/design-system/Loader'; import { Grid } from '@strapi/design-system/Grid'; import { Box } from '@strapi/design-system/Box'; +import { Flex } from '@strapi/design-system/Flex'; import { Typography } from '@strapi/design-system/Typography'; -import { pxToRem } from '@strapi/helper-plugin'; +import { pxToRem, useNotification } from '@strapi/helper-plugin'; import getDefaultMessage from '../utils/getActionTypesDefaultMessages'; import useFormatTimeStamp from '../hooks/useFormatTimeStamp'; import ActionItem from './ActionItem'; +import { useFetchClient } from '../../../../../../hooks'; -const ModalDialog = ({ onToggle, data }) => { - const { date, user, action, payload } = data; +const ModalDialog = ({ onClose, logId }) => { + const { get } = useFetchClient(); + const toggleNotification = useNotification(); + + const fetchAuditLog = async (id) => { + const { data } = await get(`/admin/audit-logs/${id}`); + + return data; + }; + + const { data: { date, user, action, payload } = {}, status } = useQuery( + ['audit-log', logId], + () => fetchAuditLog(logId), + { + onError() { + toggleNotification({ + type: 'warning', + message: { id: 'notification.error', defaultMessage: 'An error occured' }, + }); + onClose(); + }, + } + ); const { formatMessage } = useIntl(); const formatTimeStamp = useFormatTimeStamp(); - const formattedDate = formatTimeStamp(date); - return ( - - - - {formattedDate} - - - + const formattedDate = status === 'success' ? formatTimeStamp(date) : ''; + + const getModalBody = () => { + if (status === 'loading') { + return ( + + + + ); + } + + return ( + <> {formatMessage({ @@ -71,16 +100,27 @@ const ModalDialog = ({ onToggle, data }) => { {/* TODO remove when adding JSON component */} - {JSON.stringify({ payload }, null, 2)} + {JSON.stringify(payload, null, 2)} - + + ); + }; + + return ( + + + + {formattedDate} + + + {getModalBody()} ); }; ModalDialog.propTypes = { - onToggle: PropTypes.func.isRequired, - data: PropTypes.object.isRequired, + onClose: PropTypes.func.isRequired, + logId: PropTypes.number.isRequired, }; export default ModalDialog; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/TableRows/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/TableRows/index.js index 4264faa79f..fc49d05dc5 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/TableRows/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/TableRows/index.js @@ -10,7 +10,7 @@ import { onRowClick, stopPropagation } from '@strapi/helper-plugin'; import useFormatTimeStamp from '../hooks/useFormatTimeStamp'; import getDefaultMessage from '../utils/getActionTypesDefaultMessages'; -const TableRows = ({ headers, rows, onModalToggle }) => { +const TableRows = ({ headers, rows, onOpenModal }) => { const { formatMessage } = useIntl(); const formatTimeStamp = useFormatTimeStamp(); @@ -36,7 +36,7 @@ const TableRows = ({ headers, rows, onModalToggle }) => { onModalToggle(data.id), + fn: () => onOpenModal(data.id), })} > {headers.map(({ key, name, cellFormatter }) => { @@ -55,7 +55,7 @@ const TableRows = ({ headers, rows, onModalToggle }) => { onModalToggle(data.id)} + onClick={() => onOpenModal(data.id)} aria-label={formatMessage( { id: 'app.component.table.view', defaultMessage: '{target} details' }, { target: `${data.action} action` } @@ -79,7 +79,7 @@ TableRows.defaultProps = { TableRows.propTypes = { headers: PropTypes.array.isRequired, rows: PropTypes.array, - onModalToggle: PropTypes.func.isRequired, + onOpenModal: PropTypes.func.isRequired, }; export default TableRows; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/TableRows/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/TableRows/tests/index.test.js index 34035848da..530737f8cd 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/TableRows/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/TableRows/tests/index.test.js @@ -60,14 +60,14 @@ const rows = [ }, ]; -const onModalToggle = jest.fn(); +const onModalOpen = jest.fn(); // eslint-disable-next-line react/prop-types const App = ( - + @@ -94,13 +94,13 @@ describe('ADMIN | Pages | AUDIT LOGS | ListView | Dynamic Table | Table Rows', ( const label = screen.getByText(/update action details/i); const viewDetailsButton = label.closest('button'); fireEvent.click(viewDetailsButton); - expect(onModalToggle).toHaveBeenCalled(); + expect(onModalOpen).toHaveBeenCalled(); }); it('should open a modal when clicked on a row', () => { render(App); const rows = document.querySelectorAll('tr'); fireEvent.click(rows[0]); - expect(onModalToggle).toHaveBeenCalled(); + expect(onModalOpen).toHaveBeenCalled(); }); }); 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 a7e06ef8a6..375620963a 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 @@ -35,12 +35,6 @@ const ListView = () => { return data; }; - const fetchAuditLog = async (id) => { - const { data } = await get(`/admin/audit-logs/${id}`); - - return data; - }; - const { data, isLoading } = useQuery(['auditLogs', search], fetchAuditLogsPage, { enabled: canRead, keepPreviousData: true, @@ -68,20 +62,6 @@ const ListView = () => { })); const [openedLogId, setOpenedLogId] = useState(null); - const { data: openedLogData, status: openedLogStatus } = useQuery( - ['audit-log', openedLogId], - () => fetchAuditLog(openedLogId), - { - enabled: !!openedLogId, - } - ); - - console.log({ openedLogData, openedLogId }); - - const handleToggle = (id) => { - // Either saves the id of the log to open or closes the modal - setOpenedLogId(id); - }; return (
@@ -101,12 +81,14 @@ const ListView = () => { withBulkActions isLoading={isLoading} > - + setOpenedLogId(id)} + /> - {openedLogId && openedLogStatus === 'success' && ( - - )} + {openedLogId && setOpenedLogId(null)} logId={openedLogId} />}
); }; 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..7131192954 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 @@ -2,13 +2,13 @@ import React from 'react'; import { Router } from 'react-router-dom'; import { IntlProvider } from 'react-intl'; import { createMemoryHistory } from 'history'; -import { render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor, within } from '@testing-library/react'; import { QueryClient, QueryClientProvider } from 'react-query'; 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_PAGE_DATA, TEST_SINGLE_DATA } from './utils/data'; const history = createMemoryHistory(); const user = userEvent.setup(); @@ -83,7 +83,7 @@ describe('ADMIN | Pages | AUDIT LOGS | ListView', () => { it('should show a list of audit logs with all actions', async () => { mockUseQuery.mockReturnValue({ data: { - results: TEST_DATA, + results: TEST_PAGE_DATA, }, isLoading: false, }); @@ -100,20 +100,32 @@ describe('ADMIN | Pages | AUDIT LOGS | ListView', () => { it('should open a modal when clicked on a table row and close modal when clicked', async () => { mockUseQuery.mockReturnValue({ data: { - results: TEST_DATA, + results: TEST_PAGE_DATA, }, isLoading: false, }); + render(App); - const { container } = render(App); expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); - const rows = container.querySelector('tbody').querySelectorAll('tr'); - await user.click(rows[0]); - expect(screen.getByRole('dialog')).toBeInTheDocument(); + mockUseQuery.mockReturnValue({ + data: TEST_SINGLE_DATA, + status: 'success', + }); - const label = screen.getByText(/close the modal/i); - const closeButton = label.closest('button'); + const auditLogRow = screen.getByText('Create role').closest('tr'); + await user.click(auditLogRow); + + const modal = screen.getByRole('dialog'); + expect(modal).toBeInTheDocument(); + + expect(within(modal).getByText('Create role')).toBeInTheDocument(); + expect(within(modal).getByText('test user')).toBeInTheDocument(); + expect(within(modal).getAllByText('December 22, 2022, 16:11:03')).toHaveLength(3); + + const closeButton = within(modal) + .getByText(/close the modal/i) + .closest('button'); await user.click(closeButton); expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); }); 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..33441f02db 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 = [ +const TEST_PAGE_DATA = [ { id: 1, action: 'role.create', @@ -37,4 +37,18 @@ const TEST_DATA = [ }, ]; -export default TEST_DATA; +const TEST_SINGLE_DATA = { + id: 1, + action: 'role.create', + date: '2022-12-22T16:11:03.126Z', + payload: { + meta: 'data', + }, + user: { + id: 1, + fullname: 'test user', + email: 'test@test.com', + }, +}; + +export { TEST_PAGE_DATA, TEST_SINGLE_DATA }; From 26f750d8a6b7d0a7ac1a3f796c7a54cabdde97a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= Date: Mon, 9 Jan 2023 12:06:36 +0100 Subject: [PATCH 3/4] feedback --- .../AuditLogs/ListView/Modal/ActionBody.js | 94 +++++++++++++ .../{ModalDialog => Modal}/ActionItem.js | 0 .../pages/AuditLogs/ListView/Modal/index.js | 53 ++++++++ .../AuditLogs/ListView/ModalDialog/index.js | 126 ------------------ .../pages/AuditLogs/ListView/index.js | 8 +- .../AuditLogs/ListView/tests/index.test.js | 11 +- 6 files changed, 156 insertions(+), 136 deletions(-) create mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/ActionBody.js rename packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/{ModalDialog => Modal}/ActionItem.js (100%) create mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js delete mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/ActionBody.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/ActionBody.js new file mode 100644 index 0000000000..15cdc27f51 --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/ActionBody.js @@ -0,0 +1,94 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; +import { Loader } from '@strapi/design-system/Loader'; +import { Grid } from '@strapi/design-system/Grid'; +import { Box } from '@strapi/design-system/Box'; +import { Flex } from '@strapi/design-system/Flex'; +import { Typography } from '@strapi/design-system/Typography'; +import { pxToRem } from '@strapi/helper-plugin'; +import getDefaultMessage from '../utils/getActionTypesDefaultMessages'; +import ActionItem from './ActionItem'; + +const ActionBody = ({ status, data, formattedDate }) => { + const { formatMessage } = useIntl(); + + if (status === 'loading') { + return ( + + + + ); + } + + const { action, user, payload } = data; + + return ( + <> + + + {formatMessage({ + id: 'Settings.permissions.auditLogs.details', + defaultMessage: 'Log Details', + })} + + + + + + + + {/* TODO remove when adding JSON component */} + + {JSON.stringify(payload, null, 2)} + + + ); +}; + +ActionBody.defaultProps = { + data: {}, +}; + +ActionBody.propTypes = { + status: PropTypes.oneOf(['idle', 'loading', 'error', 'success']).isRequired, + data: PropTypes.shape({ + action: PropTypes.string, + date: PropTypes.string, + payload: PropTypes.object, + user: PropTypes.object, + }), + formattedDate: PropTypes.string.isRequired, +}; + +export default ActionBody; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/ActionItem.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/ActionItem.js similarity index 100% rename from packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/ActionItem.js rename to packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/ActionItem.js diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js new file mode 100644 index 0000000000..7ba436f603 --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js @@ -0,0 +1,53 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useQuery } from 'react-query'; +import { ModalLayout, ModalHeader, ModalBody } from '@strapi/design-system/ModalLayout'; +import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs'; +import { useNotification } from '@strapi/helper-plugin'; +import useFormatTimeStamp from '../hooks/useFormatTimeStamp'; +import { useFetchClient } from '../../../../../../hooks'; +import ActionBody from './ActionBody'; + +const Modal = ({ handleClose, logId }) => { + const { get } = useFetchClient(); + const toggleNotification = useNotification(); + + const fetchAuditLog = async (id) => { + const { data } = await get(`/admin/audit-logs/${id}`); + + return data; + }; + + const { data, status } = useQuery(['audit-log', logId], () => fetchAuditLog(logId), { + onError() { + toggleNotification({ + type: 'warning', + message: { id: 'notification.error', defaultMessage: 'An error occured' }, + }); + handleClose(); + }, + }); + + const formatTimeStamp = useFormatTimeStamp(); + const formattedDate = data ? formatTimeStamp(data.date) : ''; + + return ( + + + + {formattedDate} + + + + + + + ); +}; + +Modal.propTypes = { + handleClose: PropTypes.func.isRequired, + logId: PropTypes.number.isRequired, +}; + +export default Modal; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js deleted file mode 100644 index 042c007b56..0000000000 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js +++ /dev/null @@ -1,126 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { useIntl } from 'react-intl'; -import { useQuery } from 'react-query'; -import { ModalLayout, ModalHeader, ModalBody } from '@strapi/design-system/ModalLayout'; -import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs'; -import { Loader } from '@strapi/design-system/Loader'; -import { Grid } from '@strapi/design-system/Grid'; -import { Box } from '@strapi/design-system/Box'; -import { Flex } from '@strapi/design-system/Flex'; -import { Typography } from '@strapi/design-system/Typography'; -import { pxToRem, useNotification } from '@strapi/helper-plugin'; -import getDefaultMessage from '../utils/getActionTypesDefaultMessages'; -import useFormatTimeStamp from '../hooks/useFormatTimeStamp'; -import ActionItem from './ActionItem'; -import { useFetchClient } from '../../../../../../hooks'; - -const ModalDialog = ({ onClose, logId }) => { - const { get } = useFetchClient(); - const toggleNotification = useNotification(); - - const fetchAuditLog = async (id) => { - const { data } = await get(`/admin/audit-logs/${id}`); - - return data; - }; - - const { data: { date, user, action, payload } = {}, status } = useQuery( - ['audit-log', logId], - () => fetchAuditLog(logId), - { - onError() { - toggleNotification({ - type: 'warning', - message: { id: 'notification.error', defaultMessage: 'An error occured' }, - }); - onClose(); - }, - } - ); - - const { formatMessage } = useIntl(); - const formatTimeStamp = useFormatTimeStamp(); - - const formattedDate = status === 'success' ? formatTimeStamp(date) : ''; - - const getModalBody = () => { - if (status === 'loading') { - return ( - - - - ); - } - - return ( - <> - - - {formatMessage({ - id: 'Settings.permissions.auditLogs.details', - defaultMessage: 'Log Details', - })} - - - - - - - - {/* TODO remove when adding JSON component */} - - {JSON.stringify(payload, null, 2)} - - - ); - }; - - return ( - - - - {formattedDate} - - - {getModalBody()} - - ); -}; - -ModalDialog.propTypes = { - onClose: PropTypes.func.isRequired, - logId: PropTypes.number.isRequired, -}; - -export default ModalDialog; 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 375620963a..ed0cc4bcc5 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 @@ -15,7 +15,7 @@ import adminPermissions from '../../../../../permissions'; import { useFetchClient } from '../../../../../hooks'; import TableRows from './TableRows'; import tableHeaders from './utils/tableHeaders'; -import ModalDialog from './ModalDialog'; +import Modal from './Modal'; const ListView = () => { const { formatMessage } = useIntl(); @@ -61,7 +61,7 @@ const ListView = () => { }, })); - const [openedLogId, setOpenedLogId] = useState(null); + const [modalLogId, setModalLogId] = useState(null); return (
@@ -84,11 +84,11 @@ const ListView = () => { setOpenedLogId(id)} + onOpenModal={(id) => setModalLogId(id)} /> - {openedLogId && setOpenedLogId(null)} logId={openedLogId} />} + {modalLogId && setModalLogId(null)} logId={modalLogId} />}
); }; 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 7131192954..ced0b82cb2 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 @@ -119,13 +119,12 @@ describe('ADMIN | Pages | AUDIT LOGS | ListView', () => { const modal = screen.getByRole('dialog'); expect(modal).toBeInTheDocument(); - expect(within(modal).getByText('Create role')).toBeInTheDocument(); - expect(within(modal).getByText('test user')).toBeInTheDocument(); - expect(within(modal).getAllByText('December 22, 2022, 16:11:03')).toHaveLength(3); + const modalContainer = within(modal); + expect(modalContainer.getByText('Create role')).toBeInTheDocument(); + expect(modalContainer.getByText('test user')).toBeInTheDocument(); + expect(modalContainer.getAllByText('December 22, 2022, 16:11:03')).toHaveLength(3); - const closeButton = within(modal) - .getByText(/close the modal/i) - .closest('button'); + const closeButton = modalContainer.getByText(/close the modal/i).closest('button'); await user.click(closeButton); expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); }); From 9b5dd1b5622a41bc6b8bc1ba8af14406f73245e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= Date: Mon, 9 Jan 2023 14:37:50 +0100 Subject: [PATCH 4/4] Fix modal labelledBy --- .../pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js index 7ba436f603..51cd6b2c37 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js @@ -34,7 +34,7 @@ const Modal = ({ handleClose, logId }) => { return ( - + {formattedDate}