@strapi/admin 4.7.0-beta.0 → 4.9.0-alpha.0

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

@@ -10,6 +10,7 @@ import {
   formatContentTypeData,
   contentManagementUtilRemoveFieldsFromData,
   useGuidedTour,
+  useAPIErrorHandler,
   useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
@@ -45,6 +46,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
     useSelector(selectCrudReducer);
   const redirectionLink = useFindRedirectionLink(slug);
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
 
   const isMounted = useRef(true);
   const trackUsageRef = useRef(trackUsage);
@@ -148,8 +150,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
           return;
         }
 
-        console.error(err);
-
         const resStatus = get(err, 'response.status', null);
 
         if (resStatus === 404) {
@@ -203,23 +203,15 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const displayErrors = useCallback(
     (err) => {
-      const errorPayload = err.response.data;
-      let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
-
-      // TODO handle errors correctly when back-end ready
-      if (Array.isArray(errorMessage)) {
-        errorMessage = get(errorMessage, ['0', 'messages', '0', 'id']);
-      }
-
-      if (typeof errorMessage === 'string') {
-        toggleNotification({ type: 'warning', message: errorMessage });
-      }
+      toggleNotification({ type: 'warning', message: formatAPIError(err) });
     },
-    [toggleNotification]
+    [toggleNotification, formatAPIError]
   );
 
   const onDelete = useCallback(
     async (trackerProperty) => {
+      console.log('onDelete');
+
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js

@@ -67,7 +67,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
       staleTime: 0,
       select: (data) => ({
         ...data,
-        results: data.results.reverse(),
+        results: [...data.results].reverse(),
       }),
     }
   );

package/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js

@@ -42,6 +42,8 @@ const IconButtonCustom = styled(IconButton)`
   }
 `;
 
+// TODO: Delete once https://github.com/strapi/design-system/pull/858
+// is merged and released.
 const StyledBox = styled(Box)`
   > div:first-child {
     box-shadow: ${({ theme }) => theme.shadows.tableShadow};

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -8,6 +8,7 @@ import uniqBy from 'lodash/uniqBy';
 import merge from 'lodash/merge';
 import castArray from 'lodash/castArray';
 import isNil from 'lodash/isNil';
+import { generateNKeysBetween } from 'fractional-indexing';
 
 import {
   findLeafByPathAndReplace,
@@ -155,17 +156,33 @@ const reducer = (state, action) =>
         const initialDataRelations = get(state, initialDataPath);
         const modifiedDataRelations = get(state, modifiedDataPath);
 
-        /**
-         * Check if the values we're loading are already in initial
-         * data if they are then we don't need to load them at all
-         */
         const valuesToLoad = value.filter((relation) => {
           return !initialDataRelations.some((initialDataRelation) => {
             return initialDataRelation.id === relation.id;
           });
         });
 
-        set(draftState, initialDataPath, uniqBy([...valuesToLoad, ...initialDataRelations], 'id'));
+        const keys = generateNKeysBetween(
+          null,
+          modifiedDataRelations[0]?.__temp_key__,
+          valuesToLoad.length
+        );
+
+        /**
+         * Check if the values we're loading are already in initial
+         * data if they are then we don't need to load them at all
+         */
+
+        const valuesWithKeys = valuesToLoad.map((relation, index) => ({
+          ...relation,
+          __temp_key__: keys[index],
+        }));
+
+        set(
+          draftState,
+          initialDataPath,
+          uniqBy([...valuesWithKeys, ...initialDataRelations], 'id')
+        );
 
         /**
          * We need to set the value also on modifiedData, because initialData
@@ -175,7 +192,7 @@ const reducer = (state, action) =>
         set(
           draftState,
           modifiedDataPath,
-          uniqBy([...valuesToLoad, ...modifiedDataRelations], 'id')
+          uniqBy([...valuesWithKeys, ...modifiedDataRelations], 'id')
         );
 
         break;
@@ -192,7 +209,9 @@ const reducer = (state, action) =>
           set(draftState, path, [value]);
         } else {
           const modifiedDataRelations = get(state, path);
-          const newRelations = [...modifiedDataRelations, value];
+          const [key] = generateNKeysBetween(modifiedDataRelations.at(-1)?.__temp_key__, null, 1);
+
+          const newRelations = [...modifiedDataRelations, { ...value, __temp_key__: key }];
           set(draftState, path, newRelations);
         }
 
@@ -219,8 +238,19 @@ const reducer = (state, action) =>
 
         const newRelations = [...modifiedDataRelations];
 
-        newRelations.splice(oldIndex, 1);
-        newRelations.splice(newIndex, 0, currentItem);
+        if (action.type === 'REORDER_RELATION') {
+          const [newKey] = generateNKeysBetween(
+            modifiedDataRelations[newIndex - 1]?.__temp_key__,
+            modifiedDataRelations[newIndex]?.__temp_key__,
+            1
+          );
+
+          newRelations.splice(oldIndex, 1);
+          newRelations.splice(newIndex, 0, { ...currentItem, __temp_key__: newKey });
+        } else {
+          newRelations.splice(oldIndex, 1);
+          newRelations.splice(newIndex, 0, currentItem);
+        }
 
         set(draftState, path, newRelations);
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -95,28 +95,22 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
            */
           let actualOldValue = get(rootServerState, trueInitialDataPath, []);
 
-          const valuesWithPositions = value.map((relation, index, allRelations) => {
-            const nextRelation = allRelations[index + 1];
-
-            if (nextRelation) {
-              return { ...relation, position: { before: nextRelation.id } };
-            }
-
-            return { ...relation, position: { end: true } };
-          });
-
           /**
            * Instead of the full relation object, we only want to send its ID
            *  connectedRelations are the items that are in the browserState
            * array but not in the serverState
            */
-          const connectedRelations = valuesWithPositions.reduce((acc, relation, currentIndex) => {
-            const indexOfRelationOnServer = actualOldValue.findIndex(
+          const connectedRelations = value.reduce((acc, relation, currentIndex, array) => {
+            const relationOnServer = actualOldValue.find(
               (oldRelation) => oldRelation.id === relation.id
             );
 
-            if (indexOfRelationOnServer === -1 || indexOfRelationOnServer !== currentIndex) {
-              return [...acc, { id: relation.id, position: relation.position }];
+            const relationInFront = array[currentIndex + 1];
+
+            if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {
+              const position = relationInFront ? { before: relationInFront.id } : { end: true };
+
+              return [...acc, { id: relation.id, position }];
             }
 
             return acc;
@@ -127,7 +121,7 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
            * are no longer in the browserState
            */
           const disconnectedRelations = actualOldValue.reduce((acc, relation) => {
-            if (!valuesWithPositions.find((newRelation) => newRelation.id === relation.id)) {
+            if (!value.find((newRelation) => newRelation.id === relation.id)) {
               return [...acc, { id: relation.id }];
             }
 

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

@@ -8,6 +8,7 @@ import {
   useQueryParams,
   useNotification,
   useGuidedTour,
+  useAPIErrorHandler,
   useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
@@ -39,6 +40,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const searchToSend = buildQueryString(query);
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
   const fetchClient = useFetchClient();
   const { post, put, del } = fetchClient;
 
@@ -151,19 +153,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
   const displayErrors = useCallback(
     (err) => {
-      const errorPayload = err.response.data;
-      let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
-
-      // TODO handle errors correctly when back-end ready
-      if (Array.isArray(errorMessage)) {
-        errorMessage = get(errorMessage, ['0', 'messages', '0', 'id']);
-      }
-
-      if (typeof errorMessage === 'string') {
-        toggleNotification({ type: 'warning', message: errorMessage });
-      }
+      toggleNotification({ type: 'warning', message: formatAPIError(err) });
     },
-    [toggleNotification]
+    [toggleNotification, formatAPIError]
   );
 
   const onDelete = useCallback(

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

@@ -1,10 +1,9 @@
 import React, { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import { Button } from '@strapi/design-system/Button';
 import Trash from '@strapi/icons/Trash';
-import { ConfirmDialog, useNotification } from '@strapi/helper-plugin';
+import { ConfirmDialog, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
@@ -13,6 +12,7 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
   const [showWarningDelete, setWarningDelete] = useState(false);
   const [isModalConfirmButtonLoading, setIsModalConfirmButtonLoading] = useState(false);
   const { formatMessage } = useIntl();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
   const toggleNotification = useNotification();
 
   const toggleWarningDelete = () => setWarningDelete((prevState) => !prevState);
@@ -29,14 +29,12 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
       toggleWarningDelete();
       onDeleteSucceeded();
     } catch (err) {
-      const errorMessage = get(
-        err,
-        'response.payload.message',
-        formatMessage({ id: getTrad('error.record.delete') })
-      );
       setIsModalConfirmButtonLoading(false);
       toggleWarningDelete();
-      toggleNotification({ type: 'warning', message: errorMessage });
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(err),
+      });
     }
   };
 

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

@@ -21,6 +21,7 @@ import {
   useRBACProvider,
   useTracking,
   Link,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 
 import { IconButton } from '@strapi/design-system/IconButton';
@@ -84,6 +85,7 @@ function ListView({
   const trackUsageRef = useRef(trackUsage);
   const fetchPermissionsRef = useRef(refetchPermissions);
   const { notifyStatus } = useNotifyAT();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
 
   useFocusWhenNavigate();
 
@@ -148,7 +150,6 @@ function ListView({
           return;
         }
 
-        console.error(err);
         toggleNotification({
           type: 'warning',
           message: { id: getTrad('error.model.fetch') },
@@ -171,11 +172,11 @@ function ListView({
       } catch (err) {
         toggleNotification({
           type: 'warning',
-          message: { id: getTrad('error.record.delete') },
+          message: formatAPIError(err),
         });
       }
     },
-    [fetchData, params, slug, toggleNotification, post]
+    [fetchData, params, slug, toggleNotification, formatAPIError, post]
   );
 
   const handleConfirmDeleteData = useCallback(
@@ -191,19 +192,13 @@ function ListView({
           message: { id: getTrad('success.record.delete') },
         });
       } catch (err) {
-        const errorMessage = get(
-          err,
-          'response.payload.message',
-          formatMessage({ id: getTrad('error.record.delete') })
-        );
-
         toggleNotification({
           type: 'warning',
-          message: errorMessage,
+          message: formatAPIError(err),
         });
       }
     },
-    [slug, params, fetchData, toggleNotification, formatMessage, del]
+    [slug, params, fetchData, toggleNotification, formatAPIError, del]
   );
 
   useEffect(() => {

package/admin/src/hooks/useRegenerate/index.js

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { get } from 'lodash';
 import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 
-const useRegenerate = (url, id, onRegenerate) => {
+const useRegenerate = (id, onRegenerate) => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
   const { post } = useFetchClient();
@@ -13,7 +13,7 @@ const useRegenerate = (url, id, onRegenerate) => {
         data: {
           data: { accessKey },
         },
-      } = await post(`${url}${id}/regenerate`);
+      } = await post(`/admin/api-tokens/${id}/regenerate`);
       setIsLoadingConfirmation(false);
       onRegenerate(accessKey);
     } catch (error) {

package/admin/src/hooks/useSettingsMenu/utils/defaultGlobalLinks.js

@@ -22,13 +22,6 @@ const defaultGlobalLinks = [
     isDisplayed: false,
     permissions: adminPermissions.settings['api-tokens'].main,
   },
-  {
-    intlLabel: { id: 'Settings.transferTokens.title', defaultMessage: 'Transfer Tokens' },
-    to: '/settings/transfer-tokens?sort=name:ASC',
-    id: 'transfer-tokens',
-    isDisplayed: false,
-    permissions: adminPermissions.settings['transfer-tokens'].main,
-  },
 ];
 
 export default defaultGlobalLinks;

package/admin/src/index.js

@@ -13,6 +13,7 @@ window.strapi = {
   features: {
     SSO: 'sso',
     AUDIT_LOGS: 'audit-logs',
+    REVIEW_WORKFLOWS: 'review-workflows',
   },
   projectType: 'Community',
 };

package/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
+import { useTracking } from '@strapi/helper-plugin';
 import {
   SubNav,
   SubNavHeader,
@@ -13,6 +14,8 @@ import { getSectionsToDisplay } from '../../utils';
 
 const SettingsNav = ({ menu }) => {
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { pathname } = useLocation();
 
   const filteredMenu = getSectionsToDisplay(menu);
 
@@ -35,6 +38,10 @@ const SettingsNav = ({ menu }) => {
     defaultMessage: 'Settings',
   });
 
+  const handleClickOnLink = (destination = null) => {
+    trackUsage('willNavigate', { from: pathname, to: destination });
+  };
+
   return (
     <SubNav ariaLabel={label}>
       <SubNavHeader label={label} />
@@ -42,7 +49,13 @@ const SettingsNav = ({ menu }) => {
         {sections.map((section) => (
           <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>
             {section.links.map((link) => (
-              <SubNavLink as={NavLink} withBullet={link.hasNotification} to={link.to} key={link.id}>
+              <SubNavLink
+                as={NavLink}
+                withBullet={link.hasNotification}
+                to={link.to}
+                onClick={() => handleClickOnLink(link.to)}
+                key={link.id}
+              >
                 {formatMessage(link.intlLabel)}
               </SubNavLink>
             ))}

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

@@ -1,8 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { capitalize } from 'lodash';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Checkbox } from '@strapi/design-system/Checkbox';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
@@ -10,6 +7,8 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import CogIcon from '@strapi/icons/Cog';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
 import CheckboxWrapper from './CheckBoxWrapper';
 
@@ -31,7 +30,6 @@ const CollapsableContentType = ({
     value: { onChangeSelectAll, onChange, selectedActions, setSelectedAction, selectedAction },
   } = useApiTokenPermissionsContext();
   const [expanded, setExpanded] = useState(false);
-  const { formatMessage } = useIntl();
 
   const handleExpandedAccordion = () => {
     setExpanded((s) => !s);
@@ -85,7 +83,7 @@ const CollapsableContentType = ({
                     }}
                     disabled={disabled}
                   >
-                    {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
+                    Select all
                   </Checkbox>
                 </Box>
               </Flex>

package/admin/src/pages/SettingsPage/{components/Tokens/TokenBox → pages/ApiTokens/EditView/components/ContentBox}/index.js

@@ -1,32 +1,32 @@
 import React, { useRef } from 'react';
 import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { ContentBox, useNotification, useTracking } from '@strapi/helper-plugin';
 import { IconButton } from '@strapi/design-system/IconButton';
 import Duplicate from '@strapi/icons/Duplicate';
+import PropTypes from 'prop-types';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import Key from '@strapi/icons/Key';
 
-const TokenBox = ({ token }) => {
+const HeaderContentBox = ({ apiToken }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
-  const { trackUsage } = useTracking(); // TODO: Track different types of tokens
+  const { trackUsage } = useTracking();
   const trackUsageRef = useRef(trackUsage);
 
   return (
     <ContentBox
       endAction={
-        token && (
+        apiToken && (
           <span style={{ alignSelf: 'start' }}>
             <CopyToClipboard
               onCopy={() => {
                 trackUsageRef.current('didCopyTokenKey');
                 toggleNotification({
                   type: 'success',
-                  message: { id: 'Settings.tokens.notification.copied' },
+                  message: { id: 'Settings.apiTokens.notification.copied' },
                 });
               }}
-              text={token}
+              text={apiToken}
             >
               <IconButton
                 label={formatMessage({
@@ -42,20 +42,20 @@ const TokenBox = ({ token }) => {
         )
       }
       title={
-        token ||
+        apiToken ||
         formatMessage({
-          id: 'Settings.tokens.copy.editTitle',
+          id: 'Settings.apiTokens.copy.editTitle',
           defaultMessage: 'This token isn’t accessible anymore.',
         })
       }
       subtitle={
-        token
+        apiToken
           ? formatMessage({
-              id: 'Settings.tokens.copy.lastWarning',
+              id: 'Settings.apiTokens.copy.lastWarning',
               defaultMessage: 'Make sure to copy this token, you won’t be able to see it again!',
             })
           : formatMessage({
-              id: 'Settings.tokens.copy.editMessage',
+              id: 'Settings.apiTokens.copy.editMessage',
               defaultMessage: 'For security reasons, you can only see your token once.',
             })
       }
@@ -65,12 +65,12 @@ const TokenBox = ({ token }) => {
   );
 };
 
-TokenBox.defaultProps = {
-  token: null,
+HeaderContentBox.defaultProps = {
+  apiToken: null,
 };
 
-TokenBox.propTypes = {
-  token: PropTypes.string,
+HeaderContentBox.propTypes = {
+  apiToken: PropTypes.string,
 };
 
-export default TokenBox;
+export default HeaderContentBox;