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

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

@@ -8,7 +8,9 @@ import set from 'lodash/set';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Prompt, Redirect } from 'react-router-dom';
-import { Main } from '@strapi/design-system/Main';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Main } from '@strapi/design-system';
 import {
   LoadingIndicatorPage,
   ContentManagerEditViewDataManagerContext,
@@ -20,8 +22,13 @@ import {
 } from '@strapi/helper-plugin';
 
 import { getTrad, removeKeyInObject } from '../../utils';
+
+import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
+
 import reducer, { initialState } from './reducer';
 import { cleanData, createYupSchema, recursivelyFindPathsBasedOnCondition } from './utils';
+import { clearSetModifiedDataOnly } from '../../sharedReducers/crudReducer/actions';
+import { usePrev } from '../../hooks';
 
 const EditViewDataManagerProvider = ({
   allLayoutData,
@@ -61,6 +68,9 @@ const EditViewDataManagerProvider = ({
     publishConfirmation,
   } = reducerState;
 
+  const { setModifiedDataOnly } = useSelector(selectCrudReducer);
+  const reduxDispatch = useDispatch();
+
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
 
@@ -144,8 +154,18 @@ const EditViewDataManagerProvider = ({
 
   const { components } = allLayoutData;
 
+  const previousInitialValues = usePrev(initialValues);
+
   useEffect(() => {
-    if (initialValues && currentContentTypeLayout?.attributes) {
+    /**
+     * Only fire this effect if the initialValues are different
+     * otherwise it's a fruitless effort no matter what happens.
+     */
+    if (
+      initialValues &&
+      currentContentTypeLayout?.attributes &&
+      !isEqual(previousInitialValues, initialValues)
+    ) {
       /**
        * This will return an array of paths:
        * ['many_to_one', 'one_to_many', 'one_to_one']
@@ -179,9 +199,25 @@ const EditViewDataManagerProvider = ({
         componentPaths,
         repeatableComponentPaths,
         dynamicZonePaths,
+        setModifiedDataOnly,
       });
+
+      /**
+       * TODO: This should be moved to a side-effect e.g. thunks
+       * something to consider for V5
+       */
+      if (setModifiedDataOnly) {
+        reduxDispatch(clearSetModifiedDataOnly());
+      }
     }
-  }, [initialValues, currentContentTypeLayout, components]);
+  }, [
+    initialValues,
+    currentContentTypeLayout,
+    components,
+    setModifiedDataOnly,
+    reduxDispatch,
+    previousInitialValues,
+  ]);
 
   const dispatchAddComponent = useCallback(
     (type) =>
@@ -216,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('.'),
@@ -225,7 +261,7 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const loadRelation = useCallback(({ target: { name, value } }) => {
+  const relationLoad = useCallback(({ target: { name, value } }) => {
     dispatch({
       type: 'LOAD_RELATION',
       keys: name.split('.'),
@@ -498,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('.'),
@@ -515,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');
@@ -565,7 +620,6 @@ const EditViewDataManagerProvider = ({
       value={{
         addComponentToDynamicZone,
         addNonRepeatableComponentToField,
-        connectRelation,
         addRepeatableComponentToField,
         allLayoutData,
         checkFormErrors,
@@ -578,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.
@@ -192,6 +207,7 @@ const reducer = (state, action) =>
           componentPaths = [],
           repeatableComponentPaths = [],
           dynamicZonePaths = [],
+          setModifiedDataOnly,
         } = action;
 
         /**
@@ -243,7 +259,10 @@ const reducer = (state, action) =>
             return acc;
           }, data);
 
-        draftState.initialData = mergeDataWithPreparedRelations;
+        if (!setModifiedDataOnly) {
+          draftState.initialData = mergeDataWithPreparedRelations;
+        }
+
         draftState.modifiedData = mergeDataWithPreparedRelations;
 
         draftState.formErrors = {};
@@ -252,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;

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

@@ -55,8 +55,15 @@ const recursivelyFindPathsBasedOnConditionSetup = (components, predicate = () =>
                *
                * NOTE: we don't need to know the path to the `array` because it's about data shape not about the actual data
                */
-            }).map((path) => path.split(`${componentName}.`)[1]);
+            }).map((path) => {
+              return path.split(`${componentName}.`)[1];
+            });
           })
+          /**
+           * We filter because this will give you `dynamiczone.undefined` because the dynamic_zone component
+           * is not required to be returned in this circumstance.
+           */
+          .filter((path) => Boolean(path))
           .map((path) => `${key}.${path}`);
 
         acc = [...acc, attributesInDynamicComponents];

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

@@ -5,7 +5,7 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
 import isEqual from 'react-fast-compare';
-import { GenericInput, NotAllowedInput, useLibrary, useCustomFields } from '@strapi/helper-plugin';
+import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
@@ -37,11 +37,11 @@ function Inputs({
   queryInfos,
   value,
   size,
+  customFieldInputs,
 }) {
   const { fields } = useLibrary();
   const { formatMessage } = useIntl();
   const { contentType: currentContentTypeLayout } = useContentTypeLayout();
-  const customFieldsRegistry = useCustomFields();
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
   const { type, customField: customFieldUid } = fieldSchema;
@@ -194,19 +194,6 @@ function Inputs({
     return minutes % metadatas.step === 0 ? metadatas.step : step;
   }, [inputType, inputValue, metadatas.step, step]);
 
-  // Memoize the component to avoid remounting it and losing state
-  const CustomFieldInput = useMemo(() => {
-    if (customFieldUid) {
-      const customField = customFieldsRegistry.get(customFieldUid);
-      const CustomFieldInput = React.lazy(customField.components.Input);
-
-      return CustomFieldInput;
-    }
-
-    // Not a custom field, component won't be used
-    return null;
-  }, [customFieldUid, customFieldsRegistry]);
-
   if (visible === false) {
     return null;
   }
@@ -268,12 +255,9 @@ function Inputs({
     media: fields.media,
     wysiwyg: Wysiwyg,
     ...fields,
+    ...customFieldInputs,
   };
 
-  if (customFieldUid) {
-    customInputs[customFieldUid] = CustomFieldInput;
-  }
-
   return (
     <GenericInput
       attribute={fieldSchema}
@@ -309,6 +293,7 @@ Inputs.defaultProps = {
   size: undefined,
   value: null,
   queryInfos: {},
+  customFieldInputs: {},
 };
 
 Inputs.propTypes = {
@@ -330,6 +315,7 @@ Inputs.propTypes = {
     defaultParams: PropTypes.object,
     endPoint: PropTypes.string,
   }),
+  customFieldInputs: PropTypes.object,
 };
 
 const Memoized = memo(Inputs, isEqual);

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

@@ -9,6 +9,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import { useContentTypeLayout } from '../../hooks';
 import FieldComponent from '../FieldComponent';
 import Inputs from '../Inputs';
+import useLazyComponents from '../../hooks/useLazyComponents';
 
 const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, name }) => {
   const { getComponentLayout } = useContentTypeLayout();
@@ -18,6 +19,8 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
   );
   const fields = componentLayoutData.layouts.edit;
 
+  const { lazyComponentStore } = useLazyComponents();
+
   return (
     <Box
       background={isFromDynamicZone ? '' : 'neutral100'}
@@ -67,6 +70,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
                       metadatas={metadatas}
                       queryInfos={queryInfos}
                       size={size}
+                      customFieldInputs={lazyComponentStore}
                     />
                   </GridItem>
                 );