@strapi/admin 4.6.0-beta.1 → 4.6.0

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/Modal/ActionBody.js

@@ -0,0 +1,111 @@
+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 { JSONInput } from '@strapi/design-system/JSONInput';
+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 (
+      <Flex padding={7} justifyContent="center" alignItems="center">
+        <Loader>Loading content...</Loader>
+      </Flex>
+    );
+  }
+
+  const { action, user, payload } = data;
+
+  return (
+    <>
+      <Box marginBottom={3}>
+        <Typography variant="delta" id="title">
+          {formatMessage({
+            id: 'Settings.permissions.auditLogs.details',
+            defaultMessage: 'Log Details',
+          })}
+        </Typography>
+      </Box>
+      <Grid
+        gap={4}
+        gridCols={2}
+        paddingTop={4}
+        paddingBottom={4}
+        paddingLeft={6}
+        paddingRight={6}
+        marginBottom={4}
+        background="neutral100"
+        hasRadius
+      >
+        <ActionItem
+          actionLabel={formatMessage({
+            id: 'Settings.permissions.auditLogs.action',
+            defaultMessage: 'Action',
+          })}
+          actionName={formatMessage(
+            {
+              id: `Settings.permissions.auditLogs.${action}`,
+              defaultMessage: getDefaultMessage(action),
+            },
+            { model: payload?.model }
+          )}
+        />
+        <ActionItem
+          actionLabel={formatMessage({
+            id: 'Settings.permissions.auditLogs.date',
+            defaultMessage: 'Date',
+          })}
+          actionName={formattedDate}
+        />
+        <ActionItem
+          actionLabel={formatMessage({
+            id: 'Settings.permissions.auditLogs.user',
+            defaultMessage: 'User',
+          })}
+          actionName={user?.fullname || '-'}
+        />
+        <ActionItem
+          actionLabel={formatMessage({
+            id: 'Settings.permissions.auditLogs.userId',
+            defaultMessage: 'User ID',
+          })}
+          actionName={user?.id.toString() || '-'}
+        />
+      </Grid>
+      <JSONInput
+        value={JSON.stringify(payload, null, 2)}
+        disabled
+        height={pxToRem(150)}
+        label={formatMessage({
+          id: 'Settings.permissions.auditLogs.payload',
+          defaultMessage: 'Payload',
+        })}
+      />
+    </>
+  );
+};
+
+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;

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/Modal/ActionItem.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Flex } from '@strapi/design-system/Flex';
+import { Typography } from '@strapi/design-system/Typography';
+
+const ActionItem = ({ actionLabel, actionName }) => {
+  return (
+    <Flex direction="column" alignItems="baseline" gap={1}>
+      <Typography textColor="neutral600" variant="sigma">
+        {actionLabel}
+      </Typography>
+      <Typography textColor="neutral600">{actionName}</Typography>
+    </Flex>
+  );
+};
+
+ActionItem.propTypes = {
+  actionLabel: PropTypes.string.isRequired,
+  actionName: PropTypes.string.isRequired,
+};
+
+export default ActionItem;

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js

@@ -0,0 +1,56 @@
+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, useFetchClient } from '@strapi/helper-plugin';
+import useFormatTimeStamp from '../hooks/useFormatTimeStamp';
+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}`);
+
+    if (!data) {
+      throw new Error('Audit log not found');
+    }
+
+    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 (
+    <ModalLayout onClose={handleClose} labelledBy="title">
+      <ModalHeader>
+        <Breadcrumbs label={formattedDate} id="title">
+          <Crumb>{formattedDate}</Crumb>
+        </Breadcrumbs>
+      </ModalHeader>
+      <ModalBody>
+        <ActionBody status={status} data={data} formattedDate={formattedDate} />
+      </ModalBody>
+    </ModalLayout>
+  );
+};
+
+Modal.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+  logId: PropTypes.string.isRequired,
+};
+
+export default Modal;

package/ee/admin/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 />
+        <PaginationURLQuery pagination={pagination} />
+      </Flex>
+    </Box>
+  );
+};
+
+PaginationFooter.defaultProps = {
+  pagination: {
+    pageCount: 0,
+    pageSize: 50,
+    total: 0,
+  },
+};
+
+PaginationFooter.propTypes = {
+  pagination: PropTypes.shape({
+    page: PropTypes.number,
+    pageCount: PropTypes.number,
+    pageSize: PropTypes.number,
+    total: PropTypes.number,
+  }),
+};
+
+export default PaginationFooter;

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/TableRows/index.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Flex } from '@strapi/design-system/Flex';
+import { Typography } from '@strapi/design-system/Typography';
+import { Tbody, Td, Tr } from '@strapi/design-system/Table';
+import Eye from '@strapi/icons/Eye';
+import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
+import useFormatTimeStamp from '../hooks/useFormatTimeStamp';
+import getDefaultMessage from '../utils/getActionTypesDefaultMessages';
+
+const TableRows = ({ headers, rows, onOpenModal }) => {
+  const { formatMessage } = useIntl();
+  const formatTimeStamp = useFormatTimeStamp();
+
+  const getCellValue = ({ type, value, model }) => {
+    if (type === 'date') {
+      return formatTimeStamp(value);
+    }
+
+    if (type === 'action') {
+      return formatMessage(
+        {
+          id: `Settings.permissions.auditLogs.${value}`,
+          defaultMessage: getDefaultMessage(value),
+        },
+        { model }
+      );
+    }
+
+    return value || '-';
+  };
+
+  return (
+    <Tbody>
+      {rows.map((data) => {
+        return (
+          <Tr
+            key={data.id}
+            {...onRowClick({
+              fn: () => onOpenModal(data.id),
+            })}
+          >
+            {headers.map(({ key, name, cellFormatter }) => {
+              return (
+                <Td key={key}>
+                  <Typography textColor="neutral800">
+                    {getCellValue({
+                      type: key,
+                      value: cellFormatter ? cellFormatter(data[name]) : data[name],
+                      model: data.payload?.model,
+                    })}
+                  </Typography>
+                </Td>
+              );
+            })}
+            <Td {...stopPropagation}>
+              <Flex justifyContent="end">
+                <IconButton
+                  onClick={() => onOpenModal(data.id)}
+                  aria-label={formatMessage(
+                    { id: 'app.component.table.view', defaultMessage: '{target} details' },
+                    { target: `${data.action} action` }
+                  )}
+                  noBorder
+                  icon={<Eye />}
+                />
+              </Flex>
+            </Td>
+          </Tr>
+        );
+      })}
+    </Tbody>
+  );
+};
+
+TableRows.defaultProps = {
+  rows: [],
+};
+
+TableRows.propTypes = {
+  headers: PropTypes.array.isRequired,
+  rows: PropTypes.array,
+  onOpenModal: PropTypes.func.isRequired,
+};
+
+export default TableRows;

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/hooks/useFormatTimeStamp.js

@@ -0,0 +1,24 @@
+import { useIntl } from 'react-intl';
+import parseISO from 'date-fns/parseISO';
+
+const useFormatTimeStamp = () => {
+  const { formatDate } = useIntl();
+
+  const formatTimeStamp = (value) => {
+    const date = parseISO(value);
+
+    const formattedDate = formatDate(date, {
+      dateStyle: 'long',
+    });
+    const formattedTime = formatDate(date, {
+      timeStyle: 'medium',
+      hourCycle: 'h24',
+    });
+
+    return `${formattedDate}, ${formattedTime}`;
+  };
+
+  return formatTimeStamp;
+};
+
+export default useFormatTimeStamp;

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/index.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import {
+  SettingsPageTitle,
+  DynamicTable,
+  useRBAC,
+  useNotification,
+  useFocusWhenNavigate,
+  useFetchClient,
+  useQueryParams,
+} from '@strapi/helper-plugin';
+import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Main } from '@strapi/design-system/Main';
+import { useLocation } from 'react-router-dom';
+import { useQuery } from 'react-query';
+import adminPermissions from '../../../../../../../admin/src/permissions';
+import TableRows from './TableRows';
+import tableHeaders from './utils/tableHeaders';
+import PaginationFooter from './PaginationFooter';
+import Modal from './Modal';
+
+const ListView = () => {
+  const { formatMessage } = useIntl();
+  const toggleNotification = useNotification();
+  const {
+    allowedActions: { canRead },
+  } = useRBAC(adminPermissions.settings.auditLogs);
+  const { get } = useFetchClient();
+  const { search } = useLocation();
+  const [{ query }, setQuery] = useQueryParams();
+
+  useFocusWhenNavigate();
+
+  const fetchAuditLogsPage = async ({ queryKey }) => {
+    const search = queryKey[1];
+    const { data } = await get(`/admin/audit-logs${search}`);
+
+    return data;
+  };
+
+  const { data, isLoading } = useQuery(['auditLogs', search], fetchAuditLogsPage, {
+    enabled: canRead,
+    keepPreviousData: true,
+    retry: false,
+    staleTime: 1000 * 10,
+    onError() {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+
+  const title = formatMessage({
+    id: 'global.auditLogs',
+    defaultMessage: 'Audit Logs',
+  });
+
+  const headers = tableHeaders.map((header) => ({
+    ...header,
+    metadatas: {
+      ...header.metadatas,
+      label: formatMessage(header.metadatas.label),
+    },
+  }));
+
+  return (
+    <Main aria-busy={isLoading}>
+      <SettingsPageTitle name={title} />
+      <HeaderLayout
+        title={title}
+        subtitle={formatMessage({
+          id: 'Settings.permissions.auditLogs.listview.header.subtitle',
+          defaultMessage: 'Logs of all the activities that happened in your environment',
+        })}
+      />
+      <ContentLayout canRead={canRead}>
+        <DynamicTable
+          contentType="Audit logs"
+          headers={headers}
+          rows={data?.results || []}
+          withBulkActions
+          isLoading={isLoading}
+        >
+          <TableRows
+            headers={headers}
+            rows={data?.results || []}
+            onOpenModal={(id) => setQuery({ id })}
+          />
+        </DynamicTable>
+        <PaginationFooter pagination={data?.pagination} />
+      </ContentLayout>
+      {query?.id && <Modal handleClose={() => setQuery({ id: null }, 'remove')} logId={query.id} />}
+    </Main>
+  );
+};
+
+export default ListView;

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/utils/getActionTypesDefaultMessages.js

@@ -0,0 +1,36 @@
+const actionTypes = {
+  'entry.create': 'Create entry ({model})',
+  'entry.update': 'Update entry ({model})',
+  'entry.delete': 'Delete entry ({model})',
+  'entry.publish': 'Publish entry ({model})',
+  'entry.unpublish': 'Unpublish entry ({model})',
+  'media.create': 'Create media',
+  'media.update': 'Update media',
+  'media.delete': 'Delete media',
+  'media-folder.create': 'Create media folder',
+  'media-folder.update': 'Update media folder',
+  'media-folder.delete': 'Delete media folder',
+  'user.create': 'Create user',
+  'user.update': 'Update user',
+  'user.delete': 'Delete user',
+  'admin.auth.success': 'Admin login',
+  'admin.logout': 'Admin logout',
+  'content-type.create': 'Create content type',
+  'content-type.update': 'Update content type',
+  'content-type.delete': 'Delete content type',
+  'component.create': 'Create component',
+  'component.update': 'Update component',
+  'component.delete': 'Delete component',
+  'role.create': 'Create role',
+  'role.update': 'Update role',
+  'role.delete': 'Delete role',
+  'permission.create': 'Create permission',
+  'permission.update': 'Update permission',
+  'permission.delete': 'Delete permission',
+};
+
+const getDefaultMessage = (value) => {
+  return actionTypes[value] || value;
+};
+
+export default getDefaultMessage;

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/utils/tableHeaders.js

@@ -0,0 +1,38 @@
+const tableHeaders = [
+  {
+    name: 'action',
+    key: 'action',
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.auditLogs.action',
+        defaultMessage: 'Action',
+      },
+      sortable: true,
+    },
+  },
+  {
+    name: 'date',
+    key: 'date',
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.auditLogs.date',
+        defaultMessage: 'Date',
+      },
+      sortable: true,
+    },
+  },
+  {
+    key: 'user',
+    name: 'user',
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.auditLogs.user',
+        defaultMessage: 'User',
+      },
+      sortable: false,
+    },
+    cellFormatter: (user) => (user ? user.fullname : ''),
+  },
+];
+
+export default tableHeaders;

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ProtectedListPage/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+import adminPermissions from '../../../../../../../admin/src/permissions';
+import ListView from '../ListView';
+
+const ProtectedListPage = () => (
+  <CheckPagePermissions permissions={adminPermissions.settings.auditLogs.main}>
+    <ListView />
+  </CheckPagePermissions>
+);
+
+export default ProtectedListPage;

package/ee/admin/pages/SettingsPage/{SingleSignOn → pages/SingleSignOn}/index.js

@@ -17,9 +17,9 @@ import { Select, Option } from '@strapi/design-system/Select';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { useIntl } from 'react-intl';
 import isEqual from 'lodash/isEqual';
-import { getRequestUrl } from '../../../../../admin/src/utils';
-import { useRolesList, useSettingsForm } from '../../../../../admin/src/hooks';
-import adminPermissions from '../../../../../admin/src/permissions';
+import { getRequestUrl } from '../../../../../../admin/src/utils';
+import { useRolesList, useSettingsForm } from '../../../../../../admin/src/hooks';
+import adminPermissions from '../../../../../../admin/src/permissions';
 import schema from './utils/schema';
 
 const ssoPermissions = {

package/ee/admin/pages/SettingsPage/utils/customRoutes.js

@@ -1,19 +1,31 @@
-const ssoRoutes = strapi.features.isEnabled(strapi.features.SSO)
-  ? [
-      {
-        async Component() {
-          const component = await import(
-            /* webpackChunkName: "sso-settings-page" */ '../SingleSignOn'
-          );
+const routes = [];
 
-          return component;
-        },
-        to: '/settings/single-sign-on',
-        exact: true,
-      },
-    ]
-  : [];
+if (strapi.features.isEnabled(strapi.features.SSO)) {
+  routes.push({
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "sso-settings-page" */ '../pages/SingleSignOn'
+      );
 
-const customRoutes = [...ssoRoutes];
+      return component;
+    },
+    to: '/settings/single-sign-on',
+    exact: true,
+  });
+}
 
-export default customRoutes;
+if (strapi.features.isEnabled(strapi.features.AUDIT_LOGS)) {
+  routes.push({
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "audit-logs-settings-page" */ '../pages/AuditLogs/ProtectedListPage'
+      );
+
+      return component;
+    },
+    to: '/settings/audit-logs',
+    exact: true,
+  });
+}
+
+export default routes;

package/ee/server/bootstrap.js

@@ -4,32 +4,20 @@
 const { features } = require('@strapi/strapi/lib/utils/ee');
 const executeCEBootstrap = require('../../server/bootstrap');
 const { getService } = require('../../server/utils');
-
-const SSO_ACTIONS = [
-  {
-    uid: 'provider-login.read',
-    displayName: 'Read',
-    pluginName: 'admin',
-    section: 'settings',
-    category: 'single sign on',
-    subCategory: 'options',
-  },
-  {
-    uid: 'provider-login.update',
-    displayName: 'Update',
-    pluginName: 'admin',
-    section: 'settings',
-    category: 'single sign on',
-    subCategory: 'options',
-  },
-];
+const actions = require('./config/admin-actions');
 
 module.exports = async () => {
   const { actionProvider } = getService('permission');
 
   if (features.isEnabled('sso')) {
-    await actionProvider.registerMany(SSO_ACTIONS);
+    await actionProvider.registerMany(actions.sso);
+  }
+
+  if (features.isEnabled('audit-logs')) {
+    await actionProvider.registerMany(actions.auditLogs);
   }
 
+  // TODO: check admin seats
+
   await executeCEBootstrap();
 };

package/ee/server/config/admin-actions.js

@@ -0,0 +1,32 @@
+'use strict';
+
+module.exports = {
+  sso: [
+    {
+      uid: 'provider-login.read',
+      displayName: 'Read',
+      pluginName: 'admin',
+      section: 'settings',
+      category: 'single sign on',
+      subCategory: 'options',
+    },
+    {
+      uid: 'provider-login.update',
+      displayName: 'Update',
+      pluginName: 'admin',
+      section: 'settings',
+      category: 'single sign on',
+      subCategory: 'options',
+    },
+  ],
+  auditLogs: [
+    {
+      uid: 'audit-logs.read',
+      displayName: 'Read',
+      pluginName: 'admin',
+      section: 'settings',
+      category: 'audit logs',
+      subCategory: 'options',
+    },
+  ],
+};