@strapi/admin 4.6.0-alpha.0 → 4.6.0-alpha.1

package/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/DynamicTable/TableRows/index.js

@@ -0,0 +1,65 @@
+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 CellValue from './CellValue';
+
+const TableRows = ({ headers, rows, onModalToggle }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Tbody>
+      {rows.map((data) => {
+        return (
+          <Tr
+            key={data.id}
+            {...onRowClick({
+              fn: () => onModalToggle(data.id),
+            })}
+          >
+            {headers.map(({ key, name }) => {
+              return (
+                <Td key={key}>
+                  <Typography textColor="neutral800">
+                    <CellValue type={key} value={data[name]} />
+                  </Typography>
+                </Td>
+              );
+            })}
+
+            <Td {...stopPropagation}>
+              <Flex justifyContent="end">
+                <IconButton
+                  onClick={() => onModalToggle(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,
+  onModalToggle: PropTypes.func.isRequired,
+};
+
+export default TableRows;

package/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/ActionItem.js

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

package/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/ModalDialog/index.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { ModalLayout, ModalHeader, ModalBody } from '@strapi/design-system/ModalLayout';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
+import { Grid } from '@strapi/design-system/Grid';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import { pxToRem } from '@strapi/helper-plugin';
+import useFormatTimeStamp from '../hooks/useFormatTimeStamp';
+import ActionItem from './ActionItem';
+
+const ModalDialog = ({ onToggle, data: { date, user, action } }) => {
+  const { formatMessage } = useIntl();
+  const formatTimeStamp = useFormatTimeStamp();
+  const formattedDate = formatTimeStamp(date);
+
+  return (
+    <ModalLayout onClose={onToggle} labelledBy="title">
+      <ModalHeader>
+        <Breadcrumbs label={formattedDate}>
+          <Crumb>{formattedDate}</Crumb>
+        </Breadcrumbs>
+      </ModalHeader>
+      <ModalBody>
+        <Box marginBottom={pxToRem(12)}>
+          <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}
+          background="neutral100"
+          hasRadius
+        >
+          <ActionItem
+            actionLabel={{
+              id: 'Settings.permissions.auditLogs.action',
+              defaultMessage: 'Action',
+            }}
+            actionName={action}
+          />
+          <ActionItem
+            actionLabel={{
+              id: 'Settings.permissions.auditLogs.date',
+              defaultMessage: 'Date',
+            }}
+            actionName={formattedDate}
+          />
+          <ActionItem
+            actionLabel={{
+              id: 'Settings.permissions.auditLogs.user',
+              defaultMessage: 'User',
+            }}
+            actionName={user}
+          />
+        </Grid>
+      </ModalBody>
+    </ModalLayout>
+  );
+};
+
+ModalDialog.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+};
+
+export default ModalDialog;

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,84 @@
+import React, { useState } from 'react';
+import { SettingsPageTitle, DynamicTable } from '@strapi/helper-plugin';
+import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Main } from '@strapi/design-system/Main';
+import { useIntl } from 'react-intl';
+import TableRows from './DynamicTable/TableRows';
+import tableHeaders from './utils/tableHeaders';
+import ModalDialog from './ModalDialog';
+
+const data = [
+  {
+    id: 1,
+    action: 'Update',
+    date: '2022-11-14T23:04:00.000Z',
+    user: 'John Doe',
+  },
+  {
+    id: 2,
+    action: 'Create',
+    date: '2022-11-04T18:24:00.000Z',
+    user: 'Kai Doe',
+  },
+  {
+    id: 3,
+    action: 'Delete',
+    date: '2022-10-09T11:26:00.000Z',
+    user: 'John Doe',
+  },
+  {
+    id: 4,
+    action: 'Log in',
+    date: '2022-10-09T11:24:00.000Z',
+    user: 'Kai Doe',
+  },
+];
+
+const ListView = () => {
+  const { formatMessage } = useIntl();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [detailsActionData, setDetailsActionData] = useState(null);
+
+  const title = formatMessage({
+    id: 'global.auditLogs',
+    defaultMessage: 'Audit Logs',
+  });
+
+  const headers = tableHeaders.map((header) => ({
+    ...header,
+    metadatas: {
+      ...header.metadatas,
+      label: formatMessage(header.metadatas.label),
+    },
+  }));
+
+  const handleToggle = (id) => {
+    setIsModalOpen((prev) => !prev);
+
+    if (id) {
+      const actionData = data.find((action) => action.id === id);
+      setDetailsActionData(actionData);
+    }
+  };
+
+  return (
+    <Main>
+      <SettingsPageTitle name={title} />
+      <HeaderLayout
+        title={title}
+        subtitle={formatMessage({
+          id: 'Settings.permissions.auditLogs.listview.header.subtitle',
+          defaultMessage: 'Logs of all the activities that happened on your environment',
+        })}
+      />
+      <ContentLayout>
+        <DynamicTable contentType="Audit logs" headers={headers} rows={data} withBulkActions>
+          <TableRows headers={headers} rows={data} onModalToggle={handleToggle} />
+        </DynamicTable>
+      </ContentLayout>
+      {isModalOpen && <ModalDialog onToggle={handleToggle} data={detailsActionData} />}
+    </Main>
+  );
+};
+
+export default ListView;

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

@@ -0,0 +1,37 @@
+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: true,
+    },
+  },
+];
+
+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: {
+      // Note:update to admin::auditLogs permissions when set in BE
+      main: [{ action: 'admin::roles.create', subject: null }],
+    },
     roles: {
       main: [
         { action: 'admin::roles.create', subject: null },

package/admin/src/translations/en.json

@@ -175,6 +175,11 @@
   "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.details": "Log Details",
+  "Settings.permissions.auditLogs.listview.header.subtitle": "Logs of all the activities that happened on your environment",
   "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 +308,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.",
@@ -772,6 +778,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",