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

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",

package/admin/src/translations/en.json

@@ -175,6 +175,38 @@
   "Settings.permissions.users.strapi-super-admin": "Super Admin",
   "Settings.permissions.users.strapi-editor": "Editor",
   "Settings.permissions.users.strapi-author": "Author",
+  "Settings.permissions.auditLogs.action": "Action",
+  "Settings.permissions.auditLogs.date": "Date",
+  "Settings.permissions.auditLogs.user": "User",
+  "Settings.permissions.auditLogs.userId": "User ID",
+  "Settings.permissions.auditLogs.details": "Log Details",
+  "Settings.permissions.auditLogs.payload": "Payload",
+  "Settings.permissions.auditLogs.listview.header.subtitle": "Logs of all the activities that happened in your environment",
+  "Settings.permissions.auditLogs.entry.create": "Create entry ({model})",
+  "Settings.permissions.auditLogs.entry.update": "Update entry ({model})",
+  "Settings.permissions.auditLogs.entry.delete": "Delete entry ({model})",
+  "Settings.permissions.auditLogs.entry.publish": "Publish entry ({model})",
+  "Settings.permissions.auditLogs.entry.unpublish": "Unpublish entry ({model})",
+  "Settings.permissions.auditLogs.media.create": "Create media",
+  "Settings.permissions.auditLogs.media.update": "Update media",
+  "Settings.permissions.auditLogs.media.delete": "Delete media",
+  "Settings.permissions.auditLogs.user.create": "Create user",
+  "Settings.permissions.auditLogs.user.update": "Update user",
+  "Settings.permissions.auditLogs.user.delete": "Delete user",
+  "Settings.permissions.auditLogs.admin.auth.success": "Admin login",
+  "Settings.permissions.auditLogs.admin.logout": "Admin logout",
+  "Settings.permissions.auditLogs.content-type.create": "Create content type",
+  "Settings.permissions.auditLogs.content-type.update": "Update content type",
+  "Settings.permissions.auditLogs.content-type.delete": "Delete content type",
+  "Settings.permissions.auditLogs.component.create": "Create component",
+  "Settings.permissions.auditLogs.component.update": "Update component",
+  "Settings.permissions.auditLogs.component.delete": "Delete component",
+  "Settings.permissions.auditLogs.role.create": "Create role",
+  "Settings.permissions.auditLogs.role.update": "Update role",
+  "Settings.permissions.auditLogs.role.delete": "Delete role",
+  "Settings.permissions.auditLogs.permission.create": "Create permission",
+  "Settings.permissions.auditLogs.permission.update": "Update permission",
+  "Settings.permissions.auditLogs.permission.delete": "Delete permission",
   "Settings.profile.form.notify.data.loaded": "Your profile data has been loaded",
   "Settings.profile.form.section.experience.clear.select": "Clear the interface language selected",
   "Settings.profile.form.section.experience.here": "here",
@@ -303,6 +335,7 @@
   "app.component.search.label": "Search for {target}",
   "app.component.table.duplicate": "Duplicate {target}",
   "app.component.table.edit": "Edit {target}",
+  "app.component.table.view": "{target} details",
   "app.component.table.select.one-entry": "Select {target}",
   "app.components.BlockLink.blog": "Blog",
   "app.components.BlockLink.blog.content": "Read the latest news about Strapi and the ecosystem.",
@@ -728,6 +761,13 @@
   "content-manager.popUpWarning.warning.publish-question": "Do you still want to publish?",
   "content-manager.popUpwarning.warning.has-draft-relations.button-confirm": "Yes, publish",
   "content-manager.popUpwarning.warning.has-draft-relations.message": "<b>{count, plural, one { relation is } other { relations are } }</b> not published yet and might lead to unexpected behavior.",
+  "content-manager.relation.loadMore": "Load More",
+  "content-manager.relation.disconnect": "Remove",
+  "content-manager.relation.isLoading": "Relations are loading",
+  "content-manager.relation.notAvailable": "No relations available",
+  "content-manager.relation.add": "Add relation",
+  "content-manager.relation.publicationState.draft": "Draft",
+  "content-manager.relation.publicationState.published": "Published",
   "form.button.continue": "Continue",
   "form.button.done": "Done",
   "global.search": "Search",
@@ -779,6 +819,7 @@
   "global.settings": "Settings",
   "global.type": "Type",
   "global.users": "Users",
+  "global.auditLogs": "Audit Logs",
   "notification.contentType.relations.conflict": "Content type has conflicting relations",
   "notification.default.title": "Information:",
   "notification.error": "An error occurred",

package/admin/src/translations/es.json

@@ -123,10 +123,10 @@
   "Settings.permissions.users.tabs.label": "Permisos de pestañas",
   "Settings.profile.form.notify.data.loaded": "Se han cargado los datos de tu perfil",
   "Settings.profile.form.section.experience.clear.select": "Borrar el idioma de interfaz seleccionado",
-  "Settings.profile.form.section.experience.documentation": "documentación",
+  "Settings.profile.form.section.experience.here": "documentación",
   "Settings.profile.form.section.experience.interfaceLanguage": "Idioma de interfaz",
   "Settings.profile.form.section.experience.interfaceLanguage.hint": "Esto solo mostrará su propia interfaz en el idioma elegido.",
-  "Settings.profile.form.section.experience.interfaceLanguageHelp": "La selección cambiará el idioma de la interfaz solo para usted. Consulte esta {documentation} para que otros idiomas estén disponibles para su equipo.",
+  "Settings.profile.form.section.experience.interfaceLanguageHelp": "La selección cambiará el idioma de la interfaz solo para usted. Consulte esta {here} para que otros idiomas estén disponibles para su equipo.",
   "Settings.profile.form.section.experience.title": "Experiencia",
   "Settings.profile.form.section.helmet.title": "Perfil de usuario",
   "Settings.profile.form.section.profile.page.title": "Página de perfil",

package/admin/src/translations/fr.json

@@ -123,10 +123,10 @@
   "Settings.permissions.users.tabs.label": "Onglet Autorisations",
   "Settings.profile.form.notify.data.loaded": "Les données de votre profil ont été chargées",
   "Settings.profile.form.section.experience.clear.select": "Vider la langue de l'interface sélectionnée",
-  "Settings.profile.form.section.experience.documentation": "documentation",
+  "Settings.profile.form.section.experience.here": "documentation",
   "Settings.profile.form.section.experience.interfaceLanguage": "Langue de l'interface",
   "Settings.profile.form.section.experience.interfaceLanguage.hint": "Cela affichera seulement votre propre interface dans la langue sélectionnée",
-  "Settings.profile.form.section.experience.interfaceLanguageHelp": "La sélection changera la langue de l'interface uniquement pour vous. Veuillez vous référer à cette {documentation} pour rendre d'autres langues disponibles pour votre équipe.",
+  "Settings.profile.form.section.experience.interfaceLanguageHelp": "La sélection changera la langue de l'interface uniquement pour vous. Veuillez vous référer à cette {here} pour rendre d'autres langues disponibles pour votre équipe.",
   "Settings.profile.form.section.experience.title": "Expérience",
   "Settings.profile.form.section.helmet.title": "Profil utilisateur",
   "Settings.profile.form.section.profile.page.title": "Page de profil",