@strapi/admin 4.5.0-beta.0 → 4.5.1

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

@@ -3,8 +3,15 @@ import unset from 'lodash/unset';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import take from 'lodash/take';
-import pull from 'lodash/pull';
-import { moveFields } from './utils';
+import cloneDeep from 'lodash/cloneDeep';
+import uniqBy from 'lodash/uniqBy';
+import merge from 'lodash/merge';
+
+import {
+  findLeafByPathAndReplace,
+  moveFields,
+  recursivelyFindPathsBasedOnCondition,
+} from './utils';
 import { getMaxTempKey } from '../../utils';
 
 const initialState = {
@@ -26,63 +33,111 @@ const reducer = (state, action) =>
   produce(state, (draftState) => {
     switch (action.type) {
       case 'ADD_NON_REPEATABLE_COMPONENT_TO_FIELD': {
-        set(
-          draftState,
-          ['modifiedData', ...action.keys],
-          state.componentsDataStructure[action.componentUid]
-        );
+        const { componentLayoutData, allComponents } = action;
 
-        break;
-      }
-      case 'ADD_REPEATABLE_COMPONENT_TO_FIELD': {
-        let currentValue = get(state, ['modifiedData', ...action.keys], []).slice();
+        const relationPaths = recursivelyFindPathsBasedOnCondition(
+          allComponents,
+          (value) => value.type === 'relation'
+        )(componentLayoutData.attributes);
 
         const defaultDataStructure = {
-          ...state.componentsDataStructure[action.componentUid],
-          __temp_key__: getMaxTempKey(currentValue) + 1,
+          ...state.componentsDataStructure[componentLayoutData.uid],
         };
 
-        if (Array.isArray(currentValue)) {
-          currentValue.push(defaultDataStructure);
-        } else {
-          currentValue = [defaultDataStructure];
-        }
+        const repeatableFields = recursivelyFindPathsBasedOnCondition(
+          allComponents,
+          (value) => value.type === 'component' && value.repeatable
+        )(componentLayoutData.attributes);
 
-        set(draftState, ['modifiedData', ...action.keys], currentValue);
+        const componentDataStructure = relationPaths.reduce((acc, current) => {
+          const [componentName] = current.split('.');
 
-        if (action.shouldCheckErrors) {
-          draftState.shouldCheckErrors = !state.shouldCheckErrors;
-        }
+          /**
+           * Why do we do this? Because if a repeatable component
+           * has another repeatable component inside of it we
+           * don't need to attach the array at this point because that will be
+           * done again deeper in the nest.
+           */
+          if (!repeatableFields.includes(componentName)) {
+            set(acc, current, []);
+          }
+
+          return acc;
+        }, defaultDataStructure);
+
+        set(draftState, ['modifiedData', ...action.keys], componentDataStructure);
 
         break;
       }
-      case 'ADD_COMPONENT_TO_DYNAMIC_ZONE': {
-        draftState.modifiedDZName = action.keys[0];
+      case 'ADD_COMPONENT_TO_DYNAMIC_ZONE':
+      case 'ADD_REPEATABLE_COMPONENT_TO_FIELD': {
+        const { keys, allComponents, componentLayoutData, shouldCheckErrors } = action;
 
-        if (action.shouldCheckErrors) {
+        if (shouldCheckErrors) {
           draftState.shouldCheckErrors = !state.shouldCheckErrors;
         }
 
-        const defaultDataStructure = {
-          ...state.componentsDataStructure[action.componentUid],
-          __component: action.componentUid,
-        };
+        if (action.type === 'ADD_COMPONENT_TO_DYNAMIC_ZONE') {
+          draftState.modifiedDZName = keys[0];
+        }
 
-        const currentValue = get(state, ['modifiedData', ...action.keys], null);
-        const updatedValue = currentValue
-          ? [...currentValue, defaultDataStructure]
-          : [defaultDataStructure];
+        const currentValue = get(state, ['modifiedData', ...keys], []);
 
-        set(draftState, ['modifiedData', ...action.keys], updatedValue);
+        const defaultDataStructure =
+          action.type === 'ADD_COMPONENT_TO_DYNAMIC_ZONE'
+            ? {
+                ...state.componentsDataStructure[componentLayoutData.uid],
+                __component: componentLayoutData.uid,
+              }
+            : {
+                ...state.componentsDataStructure[componentLayoutData.uid],
+                __temp_key__: getMaxTempKey(currentValue) + 1,
+              };
+
+        const relationPaths = recursivelyFindPathsBasedOnCondition(
+          allComponents,
+          (value) => value.type === 'relation'
+        )(componentLayoutData.attributes);
+
+        const repeatableFields = recursivelyFindPathsBasedOnCondition(
+          allComponents,
+          (value) => value.type === 'component' && value.repeatable
+        )(componentLayoutData.attributes);
+
+        const componentDataStructure = relationPaths.reduce((acc, current) => {
+          const [componentName] = current.split('.');
+
+          /**
+           * Why do we do this? Because if a repeatable component
+           * has another repeatable component inside of it we
+           * don't need to attach the array at this point because that will be
+           * done again deeper in the nest.
+           */
+          if (!repeatableFields.includes(componentName)) {
+            set(acc, current, []);
+          }
+
+          return acc;
+        }, defaultDataStructure);
+
+        const newValue = Array.isArray(currentValue)
+          ? [...currentValue, componentDataStructure]
+          : [componentDataStructure];
+
+        set(draftState, ['modifiedData', ...keys], newValue);
 
         break;
       }
+
       case 'LOAD_RELATION': {
-        const initialDataPath = ['initialData', ...action.keys, 'results'];
-        const modifiedDataPath = ['modifiedData', ...action.keys, 'results'];
+        const initialDataPath = ['initialData', ...action.keys];
+        const modifiedDataPath = ['modifiedData', ...action.keys];
         const { value } = action;
 
-        set(draftState, initialDataPath, value);
+        const initialDataRelations = get(state, initialDataPath);
+        const modifiedDataRelations = get(state, modifiedDataPath);
+
+        set(draftState, initialDataPath, uniqBy([...value, ...initialDataRelations], 'id'));
 
         /**
          * We need to set the value also on modifiedData, because initialData
@@ -90,156 +145,108 @@ const reducer = (state, action) =>
          * both states, to render the dirty UI state
          */
 
-        set(draftState, modifiedDataPath, value);
+        set(draftState, modifiedDataPath, uniqBy([...value, ...modifiedDataRelations], 'id'));
 
         break;
       }
       case 'CONNECT_RELATION': {
         const path = ['modifiedData', ...action.keys];
-        const { value, replace = false } = action;
-        const connectedRelations = get(state, [...path, 'connect']);
-        const disconnectedRelations = get(state, [...path, 'disconnect']) ?? [];
-        const savedRelations = get(state, [...path, 'results']) ?? [];
-        const existInSavedRelation =
-          savedRelations?.findIndex((savedRelations) => savedRelations.id === value.id) !== -1;
-
-        if (!connectedRelations) {
-          set(draftState, [...path, 'connect'], []);
-        }
+        const { value, toOneRelation } = action;
 
-        // We should add a relation in the connect array only if it is not an already saved relation
-        if (!existInSavedRelation) {
-          if (replace) {
-            set(draftState, [...path, 'connect'], [value]);
-          } else {
-            const nextValue = get(draftState, [...path, 'connect']);
-            nextValue.push(value);
-          }
-        }
-
-        // Disconnect array handling
-        if (replace) {
-          // In xToOne relations we should place the saved relation in disconnected array to not display it
-          // only needed if there is a saved relation and it is not already stored in disconnected array
-          if (savedRelations.length && !disconnectedRelations.length) {
-            set(draftState, [...path, 'disconnect'], savedRelations);
-          }
-
-          // If the saved relation is stored in disconnected array
-          // We should remove it when an action requires to reconnect this relation
-          // We then reset the connect/disconnect state
-          if (disconnectedRelations.length) {
-            const existsInDisconnectedRelations =
-              disconnectedRelations.findIndex(
-                (disconnectedRelation) => disconnectedRelation?.id === value.id
-              ) > -1;
-
-            if (existsInDisconnectedRelations) {
-              set(draftState, [...path, 'disconnect'], []);
-              set(draftState, [...path, 'connect'], []);
-            }
-          }
-        } else if (disconnectedRelations.length) {
-          // In xToMany relations, when an action requires to connect a relation
-          // We should remove it from the disconnected array if it existed in it
-          const existsInDisconnect = disconnectedRelations.find(
-            (disconnectValue) => disconnectValue.id === value.id
-          );
-
-          if (existsInDisconnect) {
-            const newDisconnectArray = pull([...disconnectedRelations], existsInDisconnect);
-            set(draftState, [...path, 'disconnect'], newDisconnectArray);
-          }
+        /**
+         * If the field is a single relation field we don't want to append
+         * we just want to replace the value.
+         */
+        if (toOneRelation) {
+          set(draftState, path, [value]);
+        } else {
+          const modifiedDataRelations = get(state, path);
+          const newRelations = [...modifiedDataRelations, value];
+          set(draftState, path, newRelations);
         }
 
         break;
       }
       case 'DISCONNECT_RELATION': {
         const path = ['modifiedData', ...action.keys];
-        const { value } = action;
-        const connectedRelations = get(state, [...path, 'connect']);
-        const disconnectedRelations = get(state, [...path, 'disconnect']);
-
-        if (!disconnectedRelations) {
-          set(draftState, [...path, 'disconnect'], []);
-        }
+        const { id } = action;
+        const modifiedDataRelation = get(state, [...path]);
 
-        const nextValue = get(draftState, [...path, 'disconnect']);
-        nextValue.push(value);
-
-        if (connectedRelations?.length) {
-          const existsInConnect = connectedRelations.find(
-            (connectValue) => connectValue.id === value.id
-          );
+        /**
+         * TODO: before merge make this performant (e.g. 1000 relations === long time)
+         */
+        const newRelations = modifiedDataRelation.filter((rel) => rel.id !== id);
 
-          if (existsInConnect) {
-            const newConnectArray = pull([...connectedRelations], existsInConnect);
-            set(draftState, [...path, 'connect'], newConnectArray);
-          }
-        }
+        set(draftState, path, newRelations);
 
         break;
       }
+      /**
+       * This action will be called when you open your entry (first load)
+       * but also every time you press publish.
+       */
       case 'INIT_FORM': {
-        const { initialValues, relationalFields = [] } = action;
+        const {
+          initialValues,
+          relationalFieldPaths = [],
+          componentPaths = [],
+          repeatableComponentPaths = [],
+          dynamicZonePaths = [],
+        } = action;
 
-        draftState.formErrors = {};
-
-        draftState.initialData = {
-          ...initialValues,
+        /**
+         * You can't mutate an actions value.
+         * and spreading an object only clones
+         * the first level, the deeply nested values
+         * are a reference.
+         */
+        const data = cloneDeep(initialValues);
 
-          /**
-           * The state we keep in the client for relations looks like:
-           *
-           * {
-           *   count: <int>
-           *   results: [<Relation>]
-           * }
-           *
-           * The content API only returns { count: <int> }, which is why
-           * we need to extend the existing state rather than overwriting it.
-           */
+        /**
+         * relationalFieldPaths won't be an array which is what we're expecting
+         * Therefore we reset these bits of state to the correct data type
+         * which is an array. Hence why we replace those fields.
+         *
+         */
 
-          ...relationalFields.reduce((acc, name) => {
-            acc[name] = {
-              ...(state.initialData?.[name] ?? {}),
-              ...(initialValues?.[name] ?? {}),
-            };
+        const mergeDataWithPreparedRelations = relationalFieldPaths
+          .map((path) => path.split('.'))
+          .reduce((acc, currentPaths) => {
+            const [componentName] = currentPaths;
+
+            if (state.modifiedData && get(state.modifiedData, componentName)) {
+              /**
+               * this will be null on initial load, however subsequent calls
+               * will have data in them correlating to the names of the relational fields.
+               *
+               * We also merge the fetched data so that things like `id` for components can be copied over
+               * which would be `undefined` in the `browserState`.
+               */
+              const currentState = cloneDeep(get(state.modifiedData, componentName));
+              set(acc, componentName, merge(currentState, get(initialValues, componentName)));
+            } else if (
+              repeatableComponentPaths.includes(componentName) ||
+              dynamicZonePaths.includes(componentName) ||
+              componentPaths.includes(componentName)
+            ) {
+              /**
+               * if the componentName is a repeatable field or dynamic zone we collect the list of paths e.g.
+               * ["repeatable_single_component_relation","categories"] and then reduce this
+               * recursively
+               */
+              const findleaf = findLeafByPathAndReplace(currentPaths.slice(-1)[0], []);
+              currentPaths.reduce(findleaf, acc);
+            } else {
+              set(acc, currentPaths, []);
+            }
 
             return acc;
-          }, {}),
-        };
+          }, data);
 
-        draftState.modifiedData = {
-          ...initialValues,
+        draftState.initialData = mergeDataWithPreparedRelations;
+        draftState.modifiedData = mergeDataWithPreparedRelations;
 
-          /**
-           * The client sends the following to the content API:
-           *
-           * {
-           *   connect: [<Relation>],
-           *   disconnect: [<Relation>]
-           * }
-           *
-           * but receives only { count: <int> } in return. After save/ publish
-           * we have to:
-           *
-           * 1) reset the connect/ disconnect arrays
-           * 2) extend the existing state with the API response, so that `count`
-           *    stays in sync
-           */
-
-          ...relationalFields.reduce((acc, name) => {
-            const { connect, disconnect, ...currentState } = state.modifiedData?.[name] ?? {};
-
-            acc[name] = {
-              ...(currentState ?? {}),
-              ...(initialValues?.[name] ?? {}),
-            };
-
-            return acc;
-          }, {}),
-        };
+        draftState.formErrors = {};
 
         draftState.modifiedDZName = null;
         draftState.shouldCheckErrors = false;

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

@@ -4,14 +4,31 @@ import isObject from 'lodash/isObject';
 
 /* eslint-disable indent */
 
-const cleanData = (retrievedData, currentSchema, componentsSchema) => {
+/**
+ *
+ * @param {{ browserState: object, serverState: object }} browserState – the modifiedData from REDUX, serverState - the initialData from REDUX
+ * @param {object} currentSchema
+ * @param {object} componentsSchema
+ * @returns
+ */
+const cleanData = ({ browserState, serverState }, currentSchema, componentsSchema) => {
   const getType = (schema, attrName) => get(schema, ['attributes', attrName, 'type'], '');
   const getOtherInfos = (schema, arr) => get(schema, ['attributes', ...arr], '');
 
-  const recursiveCleanData = (data, schema) => {
-    return Object.keys(data).reduce((acc, current) => {
+  /**
+   *
+   * @param {object} browserState – the modifiedData from REDUX
+   * @param {object} serverState – the initialData from REDUX
+   * @param {*} schema
+   * @returns
+   */
+  const recursiveCleanData = (browserState, serverState, schema) => {
+    return Object.keys(browserState).reduce((acc, current) => {
       const attrType = getType(schema, current);
-      const value = get(data, current);
+
+      // This is the field value
+      const value = get(browserState, current);
+      const oldValue = get(serverState, current);
       const component = getOtherInfos(schema, [current, 'component']);
       const isRepeatable = getOtherInfos(schema, [current, 'repeatable']);
       let cleanedData;
@@ -40,34 +57,71 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
         case 'component':
           if (isRepeatable) {
             cleanedData = value
-              ? value.map((data) => {
-                  const subCleanedData = recursiveCleanData(data, componentsSchema[component]);
+              ? value.map((data, index) => {
+                  const subCleanedData = recursiveCleanData(
+                    data,
+                    (oldValue ?? [])[index],
+                    componentsSchema[component]
+                  );
 
                   return subCleanedData;
                 })
               : value;
           } else {
-            cleanedData = value ? recursiveCleanData(value, componentsSchema[component]) : value;
+            cleanedData = value
+              ? recursiveCleanData(value, oldValue, componentsSchema[component])
+              : value;
           }
 
           break;
 
-        case 'relation':
-          // Instead of the full relation object, we only want to send its ID
-          // and need to clean-up the connect|disconnect arrays
-          cleanedData = Object.entries(value).reduce((acc, [key, value]) => {
-            if (['connect', 'disconnect'].includes(key)) {
-              acc[key] = value.map((currentValue) => ({ id: currentValue.id }));
+        case 'relation': {
+          /**
+           * Because of how repeatable components work when you dig into them the server
+           * will have no object to compare too therefore no relation array will be setup
+           * because the component has not been initialised, therefore we can safely assume
+           * it needs to be added and provide a default empty array.
+           */
+          let actualOldValue = oldValue ?? [];
+
+          /**
+           * 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 }];
             }
 
             return acc;
-          }, {});
+          }, []);
+
+          /**
+           * disconnectedRelations are the items that are in the serverState but
+           * are no longer in the browserState
+           */
+          const disconnectedRelations = actualOldValue.reduce((acc, relation) => {
+            if (!value.find((newRelation) => newRelation.id === relation.id)) {
+              return [...acc, { id: relation.id }];
+            }
+
+            return acc;
+          }, []);
+
+          cleanedData = {
+            disconnect: disconnectedRelations,
+            connect: connectedRelations,
+          };
+
           break;
+        }
 
         case 'dynamiczone':
-          cleanedData = value.map((componentData) => {
+          cleanedData = value.map((componentData, index) => {
             const subCleanedData = recursiveCleanData(
               componentData,
+              (oldValue ?? [])[index],
               componentsSchema[componentData.__component]
             );
 
@@ -84,7 +138,7 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
     }, {});
   };
 
-  return recursiveCleanData(retrievedData, currentSchema);
+  return recursiveCleanData(browserState, serverState, currentSchema);
 };
 
 // TODO: check which parts are still needed: I suspect the

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

@@ -0,0 +1,52 @@
+import set from 'lodash/set';
+
+/**
+ * @param {string} endpath – the final path that you're looking to replace
+ * @returns {function} findLeafReducer – a function that will be used in the reduce
+ */
+export const findLeafByPathAndReplace = (endpath, replaceWith) => {
+  /**
+   * @param {object} acc – the data tree
+   * @param {*} curr – string, this _could_ be used to index the accumulator
+   * @param {*} ind - your current index of the array you're reducing
+   * @returns {object} – the new object with the replaced values
+   */
+  const findLeafAndReplace = (acc, curr, ind, currentArr) => {
+    /**
+     * Because we're returning the `accumulator[current]` at the bottom
+     * and some components may not exist at this point, we check if `accumulator`
+     * exists before trying to access & replace properties.
+     */
+    if (!acc) return acc;
+
+    /**
+     * If this is the last item in the array of paths
+     * and the current path is not undefined in the accumulator
+     * then we assume it's a leaf and we can replace it.
+     */
+    if (endpath === curr && acc[curr] !== undefined) {
+      set(acc, curr, replaceWith);
+
+      return acc;
+    }
+
+    /**
+     * If the value of the accumulator[current] is an array
+     * then we need to loop over it and call the reducer again
+     * this time with each array item being the accumulator.
+     */
+    if (Array.isArray(acc[curr])) {
+      acc[curr].forEach((item) => {
+        currentArr.slice(ind + 1).reduce(findLeafAndReplace, item);
+      });
+    }
+
+    /**
+     * accumulator[current]return accumulator[current] instead of the main accumulator,
+     * this will stop the same keys overwrite the wrong objects
+     */
+    return acc[curr];
+  };
+
+  return findLeafAndReplace;
+};

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

@@ -1,3 +1,5 @@
 export { default as moveFields } from './moveFields';
 export { default as cleanData } from './cleanData';
 export { default as createYupSchema } from './schema';
+export { recursivelyFindPathsBasedOnCondition } from './recursivelyFindPathsBasedOnCondition';
+export { findLeafByPathAndReplace } from './findLeafByPathAndReplace';

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

@@ -0,0 +1,72 @@
+/**
+ * @typedef Attribute
+ * @type { { type: string }}
+ *
+ * @typedef Attributes
+ * @type {{ [key: string]: Attribute }}
+ */
+
+/**
+ * This function will recursively find all the paths in the `currentContentTypeLayout.attributes`
+ * based on the boolean return of the condition e.g. `type === 'relation'`.
+ *
+ * It's original use was for the preperation of action items for the INIT_FORM action. It requires
+ * knowledge of the `components` in the entity, however `components` doesn't change nor does the predicate
+ * function so we don't need to pass it everytime hence why it's curried.
+ *
+ *
+ * @param {{[key: string]: { attributes: Attributes }}} components
+ * @param {(value: Attribute) => boolean} predicate
+ * @returns {(attributes: Attributes) => string[]}
+ */
+const recursivelyFindPathsBasedOnConditionSetup = (components, predicate = () => false) => {
+  /**
+   *
+   * @param {Attributes} attributes
+   * @returns {string[]}
+   */
+  const recursivelyFindPathsBasedOnCondition = (attributes) => {
+    return Object.entries(attributes).reduce((acc, [key, value]) => {
+      if (predicate(value)) {
+        acc = [...acc, key];
+      }
+
+      if (value.type === 'component') {
+        const componentAttributes = components[value.component].attributes;
+
+        const attributesInComponent = recursivelyFindPathsBasedOnCondition(componentAttributes);
+
+        const attributesInComponentPaths = attributesInComponent.map((path) => `${key}.${path}`);
+
+        acc = [...acc, attributesInComponentPaths];
+      } else if (value.type === 'dynamiczone') {
+        const dynamicComponents = value.components;
+
+        const attributesInDynamicComponents = dynamicComponents
+          .flatMap((componentName) => {
+            return recursivelyFindPathsBasedOnCondition({
+              [componentName]: { type: 'component', component: componentName },
+              /**
+               * DynamicZones are an array of components, therefore the componentName shouldn't
+               * be part of the path because it's not a property of the component.
+               *
+               * e.g. { dynamic_zone: [{ __component: 'basic.simple', id: 36, my_name: null, categories: { count: 1, } }] }
+               * where the path to `id` is `dynamic_zone.id` and not `dynamic_zone.basic.simple.id`
+               *
+               * 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) => `${key}.${path}`);
+
+        acc = [...acc, attributesInDynamicComponents];
+      }
+
+      return acc.flat();
+    }, []);
+  };
+
+  return recursivelyFindPathsBasedOnCondition;
+};
+
+export { recursivelyFindPathsBasedOnConditionSetup as recursivelyFindPathsBasedOnCondition };