@strapi/admin 4.5.0-beta.0 → 4.5.1

package/admin/src/content-manager/components/DynamicZone/components/{DzLabel/index.js → DynamicZoneLabel.js}

@@ -17,7 +17,14 @@ const StyledBox = styled(Box)`
   border-radius: ${pxToRem(26)};
 `;
 
-const DzLabel = ({ label, labelAction, name, numberOfComponents, required, intlDescription }) => {
+const DynamicZoneLabel = ({
+  label,
+  labelAction,
+  name,
+  numberOfComponents,
+  required,
+  intlDescription,
+}) => {
   const { formatMessage } = useIntl();
   const intlLabel = formatMessage({ id: label || name, defaultMessage: label || name });
 
@@ -58,14 +65,15 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required, intlD
   );
 };
 
-DzLabel.defaultProps = {
+DynamicZoneLabel.defaultProps = {
   intlDescription: undefined,
   label: '',
   labelAction: undefined,
+  numberOfComponents: 0,
   required: false,
 };
 
-DzLabel.propTypes = {
+DynamicZoneLabel.propTypes = {
   intlDescription: PropTypes.shape({
     id: PropTypes.string.isRequired,
     defaultMessage: PropTypes.string.isRequired,
@@ -73,8 +81,8 @@ DzLabel.propTypes = {
   label: PropTypes.string,
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
-  numberOfComponents: PropTypes.number.isRequired,
+  numberOfComponents: PropTypes.number,
   required: PropTypes.bool,
 };
 
-export default DzLabel;
+export default DynamicZoneLabel;

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

@@ -1,23 +1,22 @@
-import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
+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 { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
+
 import { getTrad } from '../../utils';
+
 import connect from './utils/connect';
 import select from './utils/select';
-import AddComponentButton from './components/AddComponentButton';
-import DzLabel from './components/DzLabel';
-import Component from './components/Component';
 
+import DynamicZoneComponent from './components/DynamicComponent';
+import AddComponentButton from './components/AddComponentButton';
+import DynamicZoneLabel from './components/DynamicZoneLabel';
 import ComponentPicker from './components/ComponentPicker';
 
-/* eslint-disable react/no-array-index-key */
-
-const createCollapses = (arrayLength) =>
-  Array.from({ length: arrayLength }).map(() => ({ isOpen: false }));
+import { useContentTypeLayout } from '../../hooks';
 
 const DynamicZone = ({
   name,
@@ -35,38 +34,16 @@ const DynamicZone = ({
   fieldSchema,
   metadatas,
 }) => {
+  const [addComponentIsOpen, setAddComponentIsOpen] = useState(false);
+
   const toggleNotification = useNotification();
-  const [isOpen, setIsOpen] = useState(false);
-  const [shouldOpenAddedComponent, setShouldOpenAddedComponent] = useState(false);
+  const { getComponentLayout, components } = useContentTypeLayout();
+
   const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
   const intlDescription = metadatas.description
     ? { id: metadatas.description, defaultMessage: metadatas.description }
     : null;
 
-  const [componentCollapses, setComponentsCollapses] = useState(
-    createCollapses(dynamicDisplayedComponentsLength)
-  );
-
-  useEffect(() => {
-    setComponentsCollapses(createCollapses(dynamicDisplayedComponentsLength));
-  }, [dynamicDisplayedComponentsLength]);
-
-  useEffect(() => {
-    if (shouldOpenAddedComponent) {
-      setComponentsCollapses((prev) =>
-        prev.map((collapse, index) => {
-          if (index === prev.length - 1) {
-            return { ...collapse, isOpen: true };
-          }
-
-          return collapse;
-        })
-      );
-
-      setShouldOpenAddedComponent(false);
-    }
-  }, [shouldOpenAddedComponent]);
-
   // We cannot use the default props here
   const { max = Infinity, min = -Infinity } = fieldSchema;
   const dynamicZoneErrors = useMemo(() => {
@@ -77,8 +54,6 @@ const DynamicZone = ({
       .map((key) => formErrors[key]);
   }, [formErrors, name]);
 
-  const dynamicZoneAvailableComponents = useMemo(() => fieldSchema.components || [], [fieldSchema]);
-
   const missingComponentNumber = min - dynamicDisplayedComponentsLength;
   const hasError = dynamicZoneErrors.length > 0;
 
@@ -88,19 +63,17 @@ const DynamicZone = ({
   const hasMaxError =
     hasError && get(dynamicZoneErrors, [0, 'id'], '') === 'components.Input.error.validation.max';
 
-  const handleAddComponent = useCallback(
-    (componentUid) => {
-      setIsOpen(false);
+  const handleAddComponent = (componentUid) => {
+    setAddComponentIsOpen(false);
 
-      addComponentToDynamicZone(name, componentUid, hasError);
-      setShouldOpenAddedComponent(true);
-    },
-    [addComponentToDynamicZone, hasError, name]
-  );
+    const componentLayoutData = getComponentLayout(componentUid);
+
+    addComponentToDynamicZone(name, componentLayoutData, components, hasError);
+  };
 
   const handleClickOpenPicker = () => {
     if (dynamicDisplayedComponentsLength < max) {
-      setIsOpen((prev) => !prev);
+      setAddComponentIsOpen((prev) => !prev);
     } else {
       toggleNotification({
         type: 'info',
@@ -109,68 +82,19 @@ const DynamicZone = ({
     }
   };
 
-  const handleToggleComponent = (indexToToggle) => {
-    setComponentsCollapses((prev) =>
-      prev.map(({ isOpen }, index) => {
-        if (index === indexToToggle) {
-          return { isOpen: !isOpen };
-        }
-
-        return { isOpen };
-      })
-    );
-  };
-
-  const handleMoveComponentDown = (name, currentIndex) => {
-    moveComponentDown(name, currentIndex);
-    setComponentsCollapses((prev) => {
-      return prev.map(({ isOpen }, index, refArray) => {
-        if (index === currentIndex + 1) {
-          return { isOpen: refArray[currentIndex].isOpen };
-        }
-
-        if (index === currentIndex) {
-          return { isOpen: refArray[index + 1].isOpen };
-        }
-
-        return { isOpen };
-      });
-    });
+  const handleMoveComponentDown = (name, componentIndex) => () => {
+    moveComponentDown(name, componentIndex);
   };
 
-  const handleMoveComponentUp = (name, currentIndex) => {
-    moveComponentUp(name, currentIndex);
-    setComponentsCollapses((prev) => {
-      return prev.map(({ isOpen }, index, refArray) => {
-        if (index === currentIndex - 1) {
-          return { isOpen: refArray[currentIndex].isOpen };
-        }
-
-        if (index === currentIndex) {
-          return { isOpen: refArray[index - 1].isOpen };
-        }
-
-        return { isOpen };
-      });
-    });
+  const handleMoveComponentUp = (name, componentIndex) => () => {
+    moveComponentUp(name, componentIndex);
   };
 
-  const handleRemoveComponent = (name, currentIndex) => {
+  const handleRemoveComponent = (name, currentIndex) => () => {
     removeComponentFromDynamicZone(name, currentIndex);
   };
 
-  if (!isFieldAllowed && isCreatingEntry) {
-    return (
-      <NotAllowedInput
-        description={intlDescription}
-        intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
-        labelAction={labelAction}
-        name={name}
-      />
-    );
-  }
-
-  if (!isFieldAllowed && !isFieldReadable && !isCreatingEntry) {
+  if (!isFieldAllowed && (isCreatingEntry || (!isFieldReadable && !isCreatingEntry))) {
     return (
       <NotAllowedInput
         description={intlDescription}
@@ -185,7 +109,7 @@ const DynamicZone = ({
     <Stack spacing={6}>
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
-          <DzLabel
+          <DynamicZoneLabel
             intlDescription={intlDescription}
             label={metadatas.label}
             labelAction={labelAction}
@@ -194,26 +118,21 @@ const DynamicZone = ({
             required={fieldSchema.required || false}
           />
           {dynamicDisplayedComponents.map((componentUid, index) => {
-            const showDownIcon =
-              isFieldAllowed &&
-              dynamicDisplayedComponentsLength > 0 &&
-              index < dynamicDisplayedComponentsLength - 1;
-            const showUpIcon = isFieldAllowed && dynamicDisplayedComponentsLength > 0 && index > 0;
-            const isOpen = componentCollapses[index]?.isOpen || false;
+            const showDownIcon = isFieldAllowed && index < dynamicDisplayedComponentsLength - 1;
+            const showUpIcon = isFieldAllowed && index > 0;
 
             return (
-              <Component
+              <DynamicZoneComponent
                 componentUid={componentUid}
                 formErrors={formErrors}
+                // eslint-disable-next-line react/no-array-index-key
                 key={index}
                 index={index}
-                isOpen={isOpen}
                 isFieldAllowed={isFieldAllowed}
-                moveComponentDown={handleMoveComponentDown}
-                moveComponentUp={handleMoveComponentUp}
-                onToggle={handleToggleComponent}
+                onMoveComponentDownClick={handleMoveComponentDown(name, index)}
+                onMoveComponentUpClick={handleMoveComponentUp(name, index)}
                 name={name}
-                removeComponentFromDynamicZone={handleRemoveComponent}
+                onRemoveComponentClick={handleRemoveComponent(name, index)}
                 showDownIcon={showDownIcon}
                 showUpIcon={showUpIcon}
               />
@@ -229,13 +148,13 @@ const DynamicZone = ({
         isDisabled={!isFieldAllowed}
         label={metadatas.label}
         missingComponentNumber={missingComponentNumber}
-        isOpen={isOpen}
+        isOpen={addComponentIsOpen}
         name={name}
         onClick={handleClickOpenPicker}
       />
       <ComponentPicker
-        isOpen={isOpen}
-        components={dynamicZoneAvailableComponents}
+        isOpen={addComponentIsOpen}
+        components={fieldSchema.components ?? []}
         onClickAddComponent={handleAddComponent}
       />
     </Stack>

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
 import React, { useCallback, useEffect, useMemo, useRef, useReducer } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import cloneDeep from 'lodash/cloneDeep';
@@ -20,7 +21,7 @@ import {
 
 import { getTrad, removeKeyInObject } from '../../utils';
 import reducer, { initialState } from './reducer';
-import { cleanData, createYupSchema } from './utils';
+import { cleanData, createYupSchema, recursivelyFindPathsBasedOnCondition } from './utils';
 
 const EditViewDataManagerProvider = ({
   allLayoutData,
@@ -46,6 +47,10 @@ const EditViewDataManagerProvider = ({
   status,
   updateActionAllowedFields,
 }) => {
+  /**
+   * TODO: this should be moved into the global reducer
+   * to match ever other reducer in the CM.
+   */
   const [reducerState, dispatch] = useReducer(reducer, initialState);
   const {
     formErrors,
@@ -137,45 +142,86 @@ const EditViewDataManagerProvider = ({
     });
   }, [componentsDataStructure, contentTypeDataStructure]);
 
+  const { components } = allLayoutData;
+
   useEffect(() => {
-    if (initialValues) {
-      const relationalFields = Object.keys(initialValues).filter(
-        (key) => currentContentTypeLayout?.attributes[key]?.type === 'relation'
-      );
+    if (initialValues && currentContentTypeLayout?.attributes) {
+      /**
+       * This will return an array of paths:
+       * ['many_to_one', 'one_to_many', 'one_to_one']
+       * it can also return a path to a relation:
+       * ['relation_component.categories']
+       */
+      const relationalFieldPaths = recursivelyFindPathsBasedOnCondition(
+        components,
+        (value) => value.type === 'relation'
+      )(currentContentTypeLayout.attributes);
+
+      const componentPaths = recursivelyFindPathsBasedOnCondition(
+        components,
+        (value) => value.type === 'component' && !value.repeatable
+      )(currentContentTypeLayout.attributes);
+
+      const repeatableComponentPaths = recursivelyFindPathsBasedOnCondition(
+        components,
+        (value) => value.type === 'component' && value.repeatable
+      )(currentContentTypeLayout.attributes);
+
+      const dynamicZonePaths = recursivelyFindPathsBasedOnCondition(
+        components,
+        (value) => value.type === 'dynamiczone'
+      )(currentContentTypeLayout.attributes);
 
       dispatch({
         type: 'INIT_FORM',
         initialValues,
-        relationalFields,
+        relationalFieldPaths,
+        componentPaths,
+        repeatableComponentPaths,
+        dynamicZonePaths,
       });
     }
-  }, [initialValues, currentContentTypeLayout]);
+  }, [initialValues, currentContentTypeLayout, components]);
 
-  const addComponentToDynamicZone = useCallback((keys, componentUid, shouldCheckErrors = false) => {
-    trackUsageRef.current('didAddComponentToDynamicZone');
+  const dispatchAddComponent = useCallback(
+    (type) =>
+      (keys, componentLayoutData, components, shouldCheckErrors = false) => {
+        trackUsageRef.current('didAddComponentToDynamicZone');
 
-    dispatch({
-      type: 'ADD_COMPONENT_TO_DYNAMIC_ZONE',
-      keys: keys.split('.'),
-      componentUid,
-      shouldCheckErrors,
-    });
-  }, []);
+        dispatch({
+          type,
+          keys: keys.split('.'),
+          componentLayoutData,
+          allComponents: components,
+          shouldCheckErrors,
+        });
+      },
+    []
+  );
 
-  const addNonRepeatableComponentToField = useCallback((keys, componentUid) => {
-    dispatch({
-      type: 'ADD_NON_REPEATABLE_COMPONENT_TO_FIELD',
-      keys: keys.split('.'),
-      componentUid,
-    });
-  }, []);
+  const addComponentToDynamicZone = dispatchAddComponent('ADD_COMPONENT_TO_DYNAMIC_ZONE');
+
+  const addNonRepeatableComponentToField = useCallback(
+    (keys, componentLayoutData, allComponents) => {
+      dispatch({
+        type: 'ADD_NON_REPEATABLE_COMPONENT_TO_FIELD',
+        keys: keys.split('.'),
+        componentLayoutData,
+        allComponents,
+      });
+    },
+    []
+  );
 
-  const connectRelation = useCallback(({ target: { name, value, replace } }) => {
+  /**
+   * @type {({ name: string, value: Relation, toOneRelation: boolean}) => void}
+   */
+  const connectRelation = useCallback(({ name, value, toOneRelation }) => {
     dispatch({
       type: 'CONNECT_RELATION',
       keys: name.split('.'),
       value,
-      replace,
+      toOneRelation,
     });
   }, []);
 
@@ -187,17 +233,7 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const addRepeatableComponentToField = useCallback(
-    (keys, componentUid, shouldCheckErrors = false) => {
-      dispatch({
-        type: 'ADD_REPEATABLE_COMPONENT_TO_FIELD',
-        keys: keys.split('.'),
-        componentUid,
-        shouldCheckErrors,
-      });
-    },
-    []
-  );
+  const addRepeatableComponentToField = dispatchAddComponent('ADD_REPEATABLE_COMPONENT_TO_FIELD');
 
   const yupSchema = useMemo(() => {
     const options = { isCreatingEntry, isDraft: shouldNotRunValidations, isFromComponent: false };
@@ -287,12 +323,12 @@ const EditViewDataManagerProvider = ({
   );
 
   const createFormData = useCallback(
-    (data) => {
+    (modifiedData, initialData) => {
       // First we need to remove the added keys needed for the dnd
-      const preparedData = removeKeyInObject(cloneDeep(data), '__temp_key__');
+      const preparedData = removeKeyInObject(cloneDeep(modifiedData), '__temp_key__');
       // Then we need to apply our helper
       const cleanedData = cleanData(
-        preparedData,
+        { browserState: preparedData, serverState: initialData },
         currentContentTypeLayout,
         allLayoutData.components
       );
@@ -331,7 +367,7 @@ const EditViewDataManagerProvider = ({
 
       try {
         if (isEmpty(errors)) {
-          const formData = createFormData(modifiedData);
+          const formData = createFormData(modifiedData, initialData);
 
           if (isCreatingEntry) {
             await onPost(formData, trackerProperty);
@@ -351,7 +387,16 @@ const EditViewDataManagerProvider = ({
         errors,
       });
     },
-    [createFormData, isCreatingEntry, modifiedData, onPost, onPut, trackerProperty, yupSchema]
+    [
+      createFormData,
+      isCreatingEntry,
+      modifiedData,
+      initialData,
+      onPost,
+      onPut,
+      trackerProperty,
+      yupSchema,
+    ]
   );
 
   const handlePublish = useCallback(async () => {
@@ -462,11 +507,11 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const disconnectRelation = useCallback(({ target: { name, value } }) => {
+  const disconnectRelation = useCallback(({ name, id }) => {
     dispatch({
       type: 'DISCONNECT_RELATION',
       keys: name.split('.'),
-      value,
+      id,
     });
   }, []);
 
@@ -554,23 +599,21 @@ const EditViewDataManagerProvider = ({
         publishConfirmation,
       }}
     >
-      <>
-        {isLoadingForData || (!isCreatingEntry && !initialData.id) ? (
-          <Main aria-busy="true">
-            <LoadingIndicatorPage />
-          </Main>
-        ) : (
-          <>
-            <Prompt
-              when={!isEqual(modifiedData, initialData)}
-              message={formatMessage({ id: 'global.prompt.unsaved' })}
-            />
-            <form noValidate onSubmit={handleSubmit}>
-              {children}
-            </form>
-          </>
-        )}
-      </>
+      {isLoadingForData || (!isCreatingEntry && !initialData.id) ? (
+        <Main aria-busy="true">
+          <LoadingIndicatorPage />
+        </Main>
+      ) : (
+        <>
+          <Prompt
+            when={!isEqual(modifiedData, initialData)}
+            message={formatMessage({ id: 'global.prompt.unsaved' })}
+          />
+          <form noValidate onSubmit={handleSubmit}>
+            {children}
+          </form>
+        </>
+      )}
     </ContentManagerEditViewDataManagerContext.Provider>
   );
 };