@strapi/admin 4.5.4 → 4.6.0-beta.0

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

@@ -2,9 +2,9 @@ import React, { memo, useMemo, useState } from 'react';
 import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
+import { Box, Stack, VisuallyHidden } from '@strapi/design-system';
 import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../utils';
 
@@ -27,14 +27,16 @@ const DynamicZone = ({
   isFieldAllowed,
   isFieldReadable,
   labelAction,
-  moveComponentUp,
-  moveComponentDown,
+  moveComponentField,
   removeComponentFromDynamicZone,
   dynamicDisplayedComponents,
   fieldSchema,
   metadatas,
 }) => {
   const [addComponentIsOpen, setAddComponentIsOpen] = useState(false);
+  const [liveText, setLiveText] = useState('');
+
+  const { formatMessage } = useIntl();
 
   const toggleNotification = useNotification();
   const { getComponentLayout, components } = useContentTypeLayout();
@@ -82,12 +84,76 @@ const DynamicZone = ({
     }
   };
 
-  const handleMoveComponentDown = (name, componentIndex) => () => {
-    moveComponentDown(name, componentIndex);
+  const handleMoveComponent = (newIndex, currentIndex) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.reorder'),
+          defaultMessage: '{item}, moved. New position in list: {position}.',
+        },
+        {
+          item: `${name}.${currentIndex}`,
+          position: getItemPos(newIndex),
+        }
+      )
+    );
+
+    moveComponentField({
+      name,
+      newIndex,
+      currentIndex,
+    });
   };
 
-  const handleMoveComponentUp = (name, componentIndex) => () => {
-    moveComponentUp(name, componentIndex);
+  /**
+   *
+   * @param {number} index
+   * @returns {string}
+   */
+  const getItemPos = (index) => `${index + 1} of ${dynamicDisplayedComponents.length}`;
+
+  const handleCancel = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.cancel-item'),
+          defaultMessage: '{item}, dropped. Re-order cancelled.',
+        },
+        {
+          item: `${name}.${index}`,
+        }
+      )
+    );
+  };
+
+  const handleGrabItem = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.grab-item'),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,
+        },
+        {
+          item: `${name}.${index}`,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  const handleDropItem = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.drop-item'),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`,
+        },
+        {
+          item: `${name}.${index}`,
+          position: getItemPos(index),
+        }
+      )
+    );
   };
 
   const handleRemoveComponent = (name, currentIndex) => () => {
@@ -105,6 +171,8 @@ const DynamicZone = ({
     );
   }
 
+  const ariaDescriptionId = `${name}-item-instructions`;
+
   return (
     <Stack spacing={6}>
       {dynamicDisplayedComponentsLength > 0 && (
@@ -117,27 +185,30 @@ const DynamicZone = ({
             numberOfComponents={dynamicDisplayedComponentsLength}
             required={fieldSchema.required || false}
           />
-          {dynamicDisplayedComponents.map((componentUid, index) => {
-            const showDownIcon = isFieldAllowed && index < dynamicDisplayedComponentsLength - 1;
-            const showUpIcon = isFieldAllowed && index > 0;
-
-            return (
+          <VisuallyHidden id={ariaDescriptionId}>
+            {formatMessage({
+              id: getTrad('dnd.instructions'),
+              defaultMessage: `Press spacebar to grab and re-order`,
+            })}
+          </VisuallyHidden>
+          <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
+          <ol aria-describedby={ariaDescriptionId}>
+            {dynamicDisplayedComponents.map(({ componentUid, id }, index) => (
               <DynamicZoneComponent
                 componentUid={componentUid}
                 formErrors={formErrors}
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}
+                key={`${componentUid}-${id}`}
                 index={index}
                 isFieldAllowed={isFieldAllowed}
-                onMoveComponentDownClick={handleMoveComponentDown(name, index)}
-                onMoveComponentUpClick={handleMoveComponentUp(name, index)}
                 name={name}
+                onMoveComponent={handleMoveComponent}
                 onRemoveComponentClick={handleRemoveComponent(name, index)}
-                showDownIcon={showDownIcon}
-                showUpIcon={showUpIcon}
+                onCancel={handleCancel}
+                onDropItem={handleDropItem}
+                onGrabItem={handleGrabItem}
               />
-            );
-          })}
+            ))}
+          </ol>
         </Box>
       )}
 
@@ -172,7 +243,12 @@ DynamicZone.defaultProps = {
 
 DynamicZone.propTypes = {
   addComponentToDynamicZone: PropTypes.func.isRequired,
-  dynamicDisplayedComponents: PropTypes.array,
+  dynamicDisplayedComponents: PropTypes.arrayOf(
+    PropTypes.shape({
+      componentUid: PropTypes.string.isRequired,
+      id: PropTypes.number.isRequired,
+    })
+  ),
   fieldSchema: PropTypes.shape({
     components: PropTypes.array.isRequired,
     max: PropTypes.number,
@@ -188,8 +264,7 @@ DynamicZone.propTypes = {
     description: PropTypes.string,
     label: PropTypes.string,
   }).isRequired,
-  moveComponentUp: PropTypes.func.isRequired,
-  moveComponentDown: PropTypes.func.isRequired,
+  moveComponentField: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   removeComponentFromDynamicZone: PropTypes.func.isRequired,
 };

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

@@ -9,15 +9,20 @@ function useSelect(name) {
     isCreatingEntry,
     formErrors,
     modifiedData,
-    moveComponentUp,
-    moveComponentDown,
+    moveComponentField,
     removeComponentFromDynamicZone,
     readActionAllowedFields,
     updateActionAllowedFields,
   } = useCMEditViewDataManager();
 
   const dynamicDisplayedComponents = useMemo(
-    () => get(modifiedData, [name], []).map((data) => data.__component),
+    () =>
+      get(modifiedData, [name], []).map((data) => {
+        return {
+          componentUid: data.__component,
+          id: data.id ?? data.__temp_key__,
+        };
+      }),
     [modifiedData, name]
   );
 
@@ -39,8 +44,7 @@ function useSelect(name) {
     isCreatingEntry,
     isFieldAllowed,
     isFieldReadable,
-    moveComponentUp,
-    moveComponentDown,
+    moveComponentField,
     removeComponentFromDynamicZone,
     dynamicDisplayedComponents,
   };

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

@@ -252,7 +252,7 @@ const EditViewDataManagerProvider = ({
   /**
    * @type {({ name: string, value: Relation, toOneRelation: boolean}) => void}
    */
-  const connectRelation = useCallback(({ name, value, toOneRelation }) => {
+  const relationConnect = useCallback(({ name, value, toOneRelation }) => {
     dispatch({
       type: 'CONNECT_RELATION',
       keys: name.split('.'),
@@ -261,7 +261,7 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const loadRelation = useCallback(({ target: { name, value } }) => {
+  const relationLoad = useCallback(({ target: { name, value } }) => {
     dispatch({
       type: 'LOAD_RELATION',
       keys: name.split('.'),
@@ -534,16 +534,16 @@ const EditViewDataManagerProvider = ({
     [shouldCheckDZErrors]
   );
 
-  const moveComponentField = useCallback((pathToComponent, dragIndex, hoverIndex) => {
+  const moveComponentField = useCallback(({ name, newIndex, currentIndex }) => {
     dispatch({
       type: 'MOVE_COMPONENT_FIELD',
-      pathToComponent,
-      dragIndex,
-      hoverIndex,
+      keys: name.split('.'),
+      newIndex,
+      oldIndex: currentIndex,
     });
   }, []);
 
-  const disconnectRelation = useCallback(({ name, id }) => {
+  const relationDisconnect = useCallback(({ name, id }) => {
     dispatch({
       type: 'DISCONNECT_RELATION',
       keys: name.split('.'),
@@ -551,6 +551,25 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
+  /**
+   * @typedef Payload
+   * @type {object}
+   * @property {string} name - The name of the field in `modifiedData`
+   * @property {number} oldIndex - The relation's current index
+   * @property {number} newIndex - The relation's new index
+   *
+   *
+   * @type {(payload: Payload) => void}
+   */
+  const relationReorder = useCallback(({ name, oldIndex, newIndex }) => {
+    dispatch({
+      type: 'REORDER_RELATION',
+      keys: name.split('.'),
+      oldIndex,
+      newIndex,
+    });
+  }, []);
+
   const removeComponentFromDynamicZone = useCallback(
     (dynamicZoneName, index) => {
       trackUsageRef.current('removeComponentFromDynamicZone');
@@ -601,7 +620,6 @@ const EditViewDataManagerProvider = ({
       value={{
         addComponentToDynamicZone,
         addNonRepeatableComponentToField,
-        connectRelation,
         addRepeatableComponentToField,
         allLayoutData,
         checkFormErrors,
@@ -614,20 +632,28 @@ const EditViewDataManagerProvider = ({
         shouldNotRunValidations,
         status,
         layout: currentContentTypeLayout,
-        loadRelation,
         modifiedData,
-        moveComponentDown,
         moveComponentField,
+        /**
+         * @deprecated use `moveComponentField` instead. This will be removed in v5.
+         */
+        moveComponentDown,
+        /**
+         * @deprecated use `moveComponentField` instead. This will be removed in v5.
+         */
         moveComponentUp,
         onChange: handleChange,
         onPublish: handlePublish,
         onUnpublish,
-        disconnectRelation,
         readActionAllowedFields,
         redirectToPreviousPage,
         removeComponentFromDynamicZone,
         removeComponentFromField,
         removeRepeatableField,
+        relationConnect,
+        relationDisconnect,
+        relationLoad,
+        relationReorder,
         slug,
         triggerFormValidation,
         updateActionAllowedFields,

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

@@ -88,6 +88,7 @@ const reducer = (state, action) =>
             ? {
                 ...state.componentsDataStructure[componentLayoutData.uid],
                 __component: componentLayoutData.uid,
+                __temp_key__: getMaxTempKey(currentValue) + 1,
               }
             : {
                 ...state.componentsDataStructure[componentLayoutData.uid],
@@ -172,15 +173,29 @@ const reducer = (state, action) =>
         const { id } = action;
         const modifiedDataRelation = get(state, [...path]);
 
-        /**
-         * TODO: before merge make this performant (e.g. 1000 relations === long time)
-         */
         const newRelations = modifiedDataRelation.filter((rel) => rel.id !== id);
 
         set(draftState, path, newRelations);
 
         break;
       }
+      case 'MOVE_COMPONENT_FIELD':
+      case 'REORDER_RELATION': {
+        const { oldIndex, newIndex, keys } = action;
+        const path = ['modifiedData', ...keys];
+        const modifiedDataRelations = get(state, [...path]);
+
+        const currentItem = modifiedDataRelations[oldIndex];
+
+        const newRelations = [...modifiedDataRelations];
+
+        newRelations.splice(oldIndex, 1);
+        newRelations.splice(newIndex, 0, currentItem);
+
+        set(draftState, path, newRelations);
+
+        break;
+      }
       /**
        * This action will be called when you open your entry (first load)
        * but also every time you press publish.
@@ -256,25 +271,6 @@ const reducer = (state, action) =>
         draftState.shouldCheckErrors = false;
         break;
       }
-      case 'MOVE_COMPONENT_FIELD': {
-        const currentValue = get(state, ['modifiedData', ...action.pathToComponent]);
-        const valueToInsert = get(state, [
-          'modifiedData',
-          ...action.pathToComponent,
-          action.dragIndex,
-        ]);
-
-        const updatedValue = moveFields(
-          currentValue,
-          action.dragIndex,
-          action.hoverIndex,
-          valueToInsert
-        );
-
-        set(draftState, ['modifiedData', ...action.pathToComponent], updatedValue);
-
-        break;
-      }
       case 'MOVE_COMPONENT_UP':
       case 'MOVE_COMPONENT_DOWN': {
         const { currentIndex, dynamicZoneName, shouldCheckErrors } = action;

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

@@ -84,14 +84,28 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
            */
           let actualOldValue = oldValue ?? [];
 
+          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 = value.reduce((acc, relation) => {
-            if (!actualOldValue.find((oldRelation) => oldRelation.id === relation.id)) {
-              return [...acc, { id: relation.id }];
+          const connectedRelations = valuesWithPositions.reduce((acc, relation, currentIndex) => {
+            const indexOfRelationOnServer = actualOldValue.findIndex(
+              (oldRelation) => oldRelation.id === relation.id
+            );
+
+            if (indexOfRelationOnServer === -1 || indexOfRelationOnServer !== currentIndex) {
+              return [...acc, { id: relation.id, position: relation.position }];
             }
 
             return acc;
@@ -102,7 +116,7 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
            * are no longer in the browserState
            */
           const disconnectedRelations = actualOldValue.reduce((acc, relation) => {
-            if (!value.find((newRelation) => newRelation.id === relation.id)) {
+            if (!valuesWithPositions.find((newRelation) => newRelation.id === relation.id)) {
               return [...acc, { id: relation.id }];
             }
 
@@ -111,7 +125,12 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
 
           cleanedData = {
             disconnect: disconnectedRelations,
-            connect: connectedRelations,
+            /**
+             * Reverse the array because the API sequentially goes through the list
+             * so in an instance where you add two to the end it would fail because index0
+             * would want to attach itself to index1 which doesn't exist yet.
+             */
+            connect: connectedRelations.reverse(),
           };
 
           break;