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

package/admin/src/content-manager/components/RelationInputDataManager/utils/select.js

@@ -17,7 +17,7 @@ function useSelect({
     readActionAllowedFields,
     updateActionAllowedFields,
     slug,
-    initialData,
+    modifiedData,
   } = useCMEditViewDataManager();
 
   const isFieldAllowed = useMemo(() => {
@@ -50,7 +50,7 @@ function useSelect({
   let componentId;
 
   if (componentUid) {
-    componentId = get(initialData, fieldNameKeys.slice(0, -1))?.id;
+    componentId = get(modifiedData, fieldNameKeys.slice(0, -1))?.id;
   }
 
   // /content-manager/relations/[model]/[id]/[field-name]
@@ -61,15 +61,15 @@ function useSelect({
 
     if (componentUid) {
       // repeatable components and dz are dynamically created
-      // if no componentId exists in initialData it means that the user just created it
+      // if no componentId exists in modifiedData it means that the user just created it
       // there then are no relations to request
       return componentId
         ? getRequestUrl(`relations/${componentUid}/${componentId}/${fieldNameKeys.at(-1)}`)
         : null;
     }
 
-    return getRequestUrl(`relations/${slug}/${initialData.id}/${name.split('.').at(-1)}`);
-  }, [isCreatingEntry, componentUid, slug, initialData.id, name, componentId, fieldNameKeys]);
+    return getRequestUrl(`relations/${slug}/${modifiedData.id}/${name.split('.').at(-1)}`);
+  }, [isCreatingEntry, componentUid, slug, modifiedData.id, name, componentId, fieldNameKeys]);
 
   // /content-manager/relations/[model]/[field-name]
   const relationSearchEndpoint = useMemo(() => {

package/admin/src/content-manager/components/RepeatableComponent/index.js

@@ -197,29 +197,24 @@ const RepeatableComponent = ({
       <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
       <Accordion.Group error={errorMessage} ariaDescribedBy={ariaDescriptionId}>
         <Accordion.Content aria-describedby={ariaDescriptionId}>
-          {componentValue.map((data, index) => {
-            const key = data.__temp_key__;
-            const componentFieldName = `${name}.${index}`;
-
-            return (
-              <Component
-                componentFieldName={componentFieldName}
-                componentUid={componentUid}
-                fields={componentLayoutData.layouts.edit}
-                key={key}
-                index={index}
-                isOpen={collapseToOpen === key}
-                isReadOnly={isReadOnly}
-                mainField={mainField}
-                moveComponentField={handleMoveComponentField}
-                onClickToggle={handleToggle(key)}
-                toggleCollapses={toggleCollapses}
-                onCancel={handleCancel}
-                onDropItem={handleDropItem}
-                onGrabItem={handleGrabItem}
-              />
-            );
-          })}
+          {componentValue.map(({ __temp_key__: key }, index) => (
+            <Component
+              componentFieldName={`${name}.${index}`}
+              componentUid={componentUid}
+              fields={componentLayoutData.layouts.edit}
+              key={key}
+              index={index}
+              isOpen={collapseToOpen === key}
+              isReadOnly={isReadOnly}
+              mainField={mainField}
+              moveComponentField={handleMoveComponentField}
+              onClickToggle={handleToggle(key)}
+              toggleCollapses={toggleCollapses}
+              onCancel={handleCancel}
+              onDropItem={handleDropItem}
+              onGrabItem={handleGrabItem}
+            />
+          ))}
         </Accordion.Content>
         <Accordion.Footer>
           <Flex justifyContent="center" height="48px" background="neutral0">

package/admin/src/content-manager/hooks/useCallbackRef.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ *
+ * @type {<T extends (...args: any[]) => any>(callback: T | undefined) => T}
+ */
+export const useCallbackRef = (callback) => {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(
+    () =>
+      (...args) =>
+        callbackRef.current?.(...args),
+    []
+  );
+};

package/admin/src/content-manager/hooks/useDragAndDrop.js

@@ -123,7 +123,7 @@ export const useDragAndDrop = (
     }),
   });
 
-  const handleKeyDown = useKeyboardDragAndDrop(index, {
+  const handleKeyDown = useKeyboardDragAndDrop(active, index, {
     onGrabItem,
     onDropItem,
     onCancel,

package/admin/src/content-manager/hooks/useKeyboardDragAndDrop.js

@@ -17,9 +17,13 @@ import { useState } from 'react';
  *
  * @internal - You should use `useDragAndDrop` instead.
  *
- * @type {(index: number, callbacks: UseKeyboardDragAndDropCallbacks) => (event: React.KeyboardEvent<HTMLButtonElement>) => void}
+ * @type {(active: boolean, index: number, callbacks: UseKeyboardDragAndDropCallbacks) => (event: React.KeyboardEvent<HTMLButtonElement>) => void}
  */
-export const useKeyboardDragAndDrop = (index, { onCancel, onDropItem, onGrabItem, onMoveItem }) => {
+export const useKeyboardDragAndDrop = (
+  active,
+  index,
+  { onCancel, onDropItem, onGrabItem, onMoveItem }
+) => {
   const [isSelected, setIsSelected] = useState(false);
   /**
    * @type {(movement: 'UP' | 'DOWN') => void})}
@@ -64,6 +68,10 @@ export const useKeyboardDragAndDrop = (index, { onCancel, onDropItem, onGrabItem
    * @type {React.KeyboardEventHandler<HTMLButtonElement>}
    */
   const handleKeyDown = (e) => {
+    if (!active) {
+      return;
+    }
+
     if (e.key === 'Tab' && !isSelected) {
       return;
     }

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -5,9 +5,12 @@ import { axiosInstance } from '../../../core/utils';
 
 import { normalizeRelations } from '../../components/RelationInputDataManager/utils';
 
-export const useRelation = (cacheKey, { name, relation, search }) => {
+import { useCallbackRef } from '../useCallbackRef';
+
+export const useRelation = (cacheKey, { relation, search }) => {
   const [searchParams, setSearchParams] = useState({});
   const [currentPage, setCurrentPage] = useState(0);
+
   /**
    * This runs in `useInfiniteQuery` to actually fetch the data
    */
@@ -44,7 +47,7 @@ export const useRelation = (cacheKey, { name, relation, search }) => {
     }
   };
 
-  const { onLoad: onLoadRelationsCallback, normalizeArguments = {} } = relation;
+  const { onLoad: onLoadRelations, normalizeArguments = {} } = relation;
 
   const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
     cacheTime: 0,
@@ -120,19 +123,19 @@ export const useRelation = (cacheKey, { name, relation, search }) => {
     }
   }, [pageGoal, currentPage, fetchNextPage, hasNextPage, status]);
 
+  const onLoadRelationsCallback = useCallbackRef(onLoadRelations);
+
   useEffect(() => {
     if (status === 'success' && data && data.pages?.at(-1)?.results && onLoadRelationsCallback) {
       // everytime we fetch, we normalize prior to adding to redux
       const normalizedResults = normalizeRelations(data.pages.at(-1).results, normalizeArguments);
 
       // this is loadRelation from EditViewDataManagerProvider
-      onLoadRelationsCallback({
-        target: { name, value: normalizedResults },
-      });
+      onLoadRelationsCallback(normalizedResults);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status, onLoadRelationsCallback, name, data]);
+  }, [status, onLoadRelationsCallback, data]);
 
   const searchRes = useInfiniteQuery(
     ['relation', cacheKey, 'search', JSON.stringify(searchParams)],

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -22,7 +22,9 @@ import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
 const matchByTitle = (links, search) =>
-  matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] });
+  search
+    ? matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] })
+    : sortBy(links, (object) => object.title.toLowerCase());
 
 const LeftMenu = () => {
   const [search, setSearch] = useState('');
@@ -52,9 +54,7 @@ const LeftMenu = () => {
         defaultMessage: 'Collection Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlCollectionTypeLinks, search), (object) =>
-        object.title.toLowerCase()
-      ),
+      links: matchByTitle(intlCollectionTypeLinks, search),
     },
     {
       id: 'singleTypes',
@@ -63,9 +63,7 @@ const LeftMenu = () => {
         defaultMessage: 'Single Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlSingleTypeLinks, search), (object) =>
-        object.title.toLowerCase()
-      ),
+      links: matchByTitle(intlSingleTypeLinks, search),
     },
   ];
 

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -74,7 +74,7 @@ const Header = ({
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
           </Button>
         )}
-        <Button disabled={!didChangeData} isLoading={status === 'submit-pending'} type="submit">
+        <Button disabled={!didChangeData} loading={status === 'submit-pending'} type="submit">
           {formatMessage({
             id: getTrad('containers.Edit.submit'),
             defaultMessage: 'Save',

package/admin/src/content-manager/pages/ListSettingsView/index.js

@@ -5,6 +5,7 @@ import isEqual from 'lodash/isEqual';
 import upperFirst from 'lodash/upperFirst';
 import pick from 'lodash/pick';
 import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
@@ -35,12 +36,12 @@ const ListSettingsView = ({ layout, slug }) => {
 
   const [showWarningSubmit, setWarningSubmit] = useState(false);
   const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);
-  const [isModalFormOpen, setIsModalFormOpen] = useState(false);
-  const toggleModalForm = () => setIsModalFormOpen((prevState) => !prevState);
   const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
     init(initialState, layout)
   );
   const { fieldToEdit, fieldForm, initialData, modifiedData } = reducerState;
+  const isModalFormOpen = !isEmpty(fieldForm);
+
   const { attributes } = layout;
   const displayedFields = modifiedData.layouts.list;
 
@@ -110,19 +111,16 @@ const ListSettingsView = ({ layout, slug }) => {
       type: 'SET_FIELD_TO_EDIT',
       fieldToEdit,
     });
-    toggleModalForm();
   };
 
   const handleCloseModal = () => {
     dispatch({
       type: 'UNSET_FIELD_TO_EDIT',
     });
-    toggleModalForm();
   };
 
   const handleSubmitFieldEdit = (e) => {
     e.preventDefault();
-    toggleModalForm();
     dispatch({
       type: 'SUBMIT_FIELD_FORM',
     });

package/admin/src/content-manager/utils/getMaxTempKey.js

@@ -3,10 +3,12 @@ const getMaxTempKey = (arr) => {
     return -1;
   }
 
-  return Math.max.apply(
+  const maxTempKey = Math.max.apply(
     Math,
-    arr.map((o) => o.__temp_key__ ?? o.id)
+    arr.map((o) => o.__temp_key__ ?? 0)
   );
+
+  return Number.isNaN(maxTempKey) ? -1 : maxTempKey;
 };
 
 export default getMaxTempKey;

package/admin/src/content-manager/utils/paths.js

@@ -0,0 +1,37 @@
+/**
+ * This file is for all helpers related to `paths` in the CM.
+ */
+import { get } from 'lodash';
+
+/**
+ * This is typically used in circumstances where there are re-orderable pieces e.g. Dynamic Zones
+ * or Repeatable fields. It finds the _original_ location of the initial data using `__temp_key__` values
+ * which are added to the fields in the `INIT_FORM` reducer to give array data a stable (when you add
+ * a new item they wont have a server ID).
+ */
+export const getInitialDataPathUsingTempKeys = (initialData, modifiedData) => (currentPath) => {
+  const splitPath = currentPath.split('.');
+
+  return splitPath.reduce((acc, currentValue, index) => {
+    const initialDataParent = get(initialData, acc);
+    const modifiedDataTempKey = get(modifiedData, [
+      ...splitPath.slice(0, index),
+      currentValue,
+      '__temp_key__',
+    ]);
+
+    if (Array.isArray(initialDataParent) && typeof modifiedDataTempKey === 'number') {
+      const initialDataIndex = initialDataParent.findIndex(
+        (entry) => entry.__temp_key__ === modifiedDataTempKey
+      );
+
+      acc.push(initialDataIndex.toString());
+
+      return acc;
+    }
+
+    acc.push(currentValue);
+
+    return acc;
+  }, []);
+};

package/admin/src/hooks/index.js

@@ -10,4 +10,3 @@ export { default as usePermissionsDataManager } from './usePermissionsDataManage
 export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useThemeToggle } from './useThemeToggle';
 export { default as useRegenerate } from './useRegenerate';
-export { default as useFetchClient } from './useFetchClient';

package/admin/src/hooks/useSettingsMenu/init.js

@@ -24,6 +24,13 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
       id: 'permissions',
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
       links: [
+        {
+          intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
+          to: '/settings/audit-logs?pageSize=50&page=1&sort=date:DESC',
+          id: 'auditLogs',
+          isDisplayed: false,
+          permissions: adminPermissions.settings.auditLogs.main,
+        },
         {
           intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
           to: '/settings/roles',

package/admin/src/pages/App/index.js

@@ -14,6 +14,7 @@ import {
   TrackingProvider,
   prefixFileUrlWithBackendUrl,
   useAppInfos,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import axios from 'axios';
 import { SkipToContent } from '@strapi/design-system/Main';
@@ -25,7 +26,7 @@ import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
 import { getUID } from './utils';
 import routes from './utils/routes';
-import { useConfigurations, useFetchClient } from '../../hooks';
+import { useConfigurations } from '../../hooks';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')

package/admin/src/pages/ProfilePage/index.js

@@ -458,7 +458,7 @@ const ProfilePage = () => {
                                     href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
                                   >
                                     {formatMessage({
-                                      id: 'Settings.profile.form.section.experience.documentation',
+                                      id: 'Settings.profile.form.section.experience.here',
                                       defaultMessage: 'here',
                                     })}
                                   </DocumentationLink>

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;