@strapi/admin 4.6.0-beta.0 → 4.6.0-beta.2

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -12,7 +12,6 @@ import {
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
 import { Formik } from 'formik';
-import { get } from 'lodash';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { formatAPIErrors } from '../../../../../utils';
@@ -205,12 +204,12 @@ const ApiTokenCreateView = () => {
       if (err?.response?.data?.error?.message === MSG_ERROR_NAME_TAKEN) {
         toggleNotification({
           type: 'warning',
-          message: get(err, 'response.data.message', 'notification.error.tokennamenotunique'),
+          message: err.response.data.message || 'notification.error.tokennamenotunique',
         });
       } else {
         toggleNotification({
           type: 'warning',
-          message: get(err, 'response.data.message', 'notification.error'),
+          message: err?.response?.data?.message || 'notification.error',
         });
       }
       unlockApp();

package/admin/src/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/admin/src/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/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/Modal/index.js

@@ -0,0 +1,52 @@
+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}`);
+
+    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.number.isRequired,
+};
+
+export default Modal;

package/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 />
+        <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/admin/src/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/admin/src/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/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/index.js

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  SettingsPageTitle,
+  DynamicTable,
+  useRBAC,
+  useNotification,
+  useFocusWhenNavigate,
+  useFetchClient,
+} 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 '../../../../../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();
+
+  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 * 20,
+    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),
+    },
+  }));
+
+  const [modalLogId, setModalLogId] = useState(null);
+
+  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) => setModalLogId(id)}
+          />
+        </DynamicTable>
+        <PaginationFooter pagination={data?.pagination} />
+      </ContentLayout>
+      {modalLogId && <Modal handleClose={() => setModalLogId(null)} logId={modalLogId} />}
+    </Main>
+  );
+};
+
+export default ListView;

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

@@ -0,0 +1,33 @@
+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',
+  '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/admin/src/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/admin/src/pages/SettingsPage/pages/AuditLogs/ProtectedListPage/index.js

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

package/admin/src/pages/SettingsPage/utils/defaultRoutes.js

@@ -57,6 +57,17 @@ const defaultRoutes = [
     to: '/settings/users/:id',
     exact: true,
   },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "admin-audit-logs" */ '../pages/AuditLogs/ProtectedListPage'
+      );
+
+      return component;
+    },
+    to: '/settings/audit-logs',
+    exact: true,
+  },
   {
     async Component() {
       const component = await import(

package/admin/src/permissions/defaultPermissions.js

@@ -34,6 +34,10 @@ const permissions = {
     uninstall: [{ action: 'admin::marketplace.plugins.uninstall', subject: null }],
   },
   settings: {
+    auditLogs: {
+      main: [{ action: 'admin::audit-logs.read', subject: null }],
+      read: [{ action: 'admin::audit-logs.read', subject: null }],
+    },
     roles: {
       main: [
         { action: 'admin::roles.create', subject: null },

package/admin/src/translations/ca.json

@@ -125,11 +125,10 @@
   "Settings.permissions.users.tabs.label": "Permisos de pestanyes",
   "Settings.profile.form.notify.data.loaded": "S'han carregat les dades del vostre perfil",
   "Settings.profile.form.section.experience.clear.select": "Esborrar l'idioma d'interfície seleccionat",
-  "Settings.profile.form.section.experience.documentation": "documentació",
-  "Settings.profile.form.section.experience.here": "aquí",
+  "Settings.profile.form.section.experience.here": "documentació",
   "Settings.profile.form.section.experience.interfaceLanguage": "Idioma d'interfície",
   "Settings.profile.form.section.experience.interfaceLanguage.hint": "Això només mostrarà la vostra pròpia interfície en l'idioma escollit.",
-  "Settings.profile.form.section.experience.interfaceLanguageHelp": "La selecció canviarà l'idioma de la interfície només per a vosaltres. Consulteu aquesta {documentation} perquè altres idiomes estiguin disponibles per al vostre ordinador.",
+  "Settings.profile.form.section.experience.interfaceLanguageHelp": "La selecció canviarà l'idioma de la interfície només per a vosaltres. Consulteu aquesta {here} perquè altres idiomes estiguin disponibles per al vostre ordinador.",
   "Settings.profile.form.section.experience.mode.hint": "Mostra la vostra interfície en el mode escollit.",
   "Settings.profile.form.section.experience.mode.label": "Mode d'interfície",
   "Settings.profile.form.section.experience.mode.option-label": "mode {nom}",

package/admin/src/translations/dk.json

@@ -123,10 +123,10 @@
   "Settings.permissions.users.tabs.label": "Tabs Tilladelser",
   "Settings.profile.form.notify.data.loaded": "Dine profildata er blevet hentet",
   "Settings.profile.form.section.experience.clear.select": "Nulstil det valgte interface sprog",
-  "Settings.profile.form.section.experience.documentation": "dokumentation",
+  "Settings.profile.form.section.experience.here": "dokumentation",
   "Settings.profile.form.section.experience.interfaceLanguage": "Interface sprog",
   "Settings.profile.form.section.experience.interfaceLanguage.hint": "Dette vil kun vise dit eget interface i det valgte sprog.",
-  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Valget vil kun ændre sproget for dig. Referér venligst til dette {documentation} for at gøre andre sprog tilgængelige for dit hold.",
+  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Valget vil kun ændre sproget for dig. Referér venligst til dette {here} for at gøre andre sprog tilgængelige for dit hold.",
   "Settings.profile.form.section.experience.title": "Oplevelse",
   "Settings.profile.form.section.helmet.title": "Bruger profil",
   "Settings.profile.form.section.profile.page.title": "Profil side",