@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

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

@@ -1,24 +1,24 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { Flex } from '@buffetjs/core';
-import { LabelIconWrapper, NotAllowedInput, useNotification } from '@strapi/helper-plugin';
+import { Stack } from '@strapi/parts/Stack';
+import { Box } from '@strapi/parts/Box';
+import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
 import connect from './utils/connect';
 import select from './utils/select';
-import BaselineAlignement from './BaselineAlignement';
-import Button from './Button';
-import Component from './Component';
-import ComponentWrapper from './ComponentWrapper';
-import DynamicZoneWrapper from './DynamicZoneWrapper';
-import Label from './Label';
-import Wrapper from './Wrapper';
-import Picker from './Picker';
+import AddComponentButton from './components/AddComponentButton';
+import DzLabel from './components/DzLabel';
+import Component from './components/Component';
+
+import ComponentPicker from './components/ComponentPicker';
 
 /* eslint-disable react/no-array-index-key */
 
+const createCollapses = arrayLength =>
+  Array.from({ length: arrayLength }).map(() => ({ isOpen: false }));
+
 const DynamicZone = ({
   name,
   // Passed with the select function
@@ -27,7 +27,7 @@ const DynamicZone = ({
   isCreatingEntry,
   isFieldAllowed,
   isFieldReadable,
-  labelIcon,
+  labelAction,
   moveComponentUp,
   moveComponentDown,
   removeComponentFromDynamicZone,
@@ -37,7 +37,11 @@ const DynamicZone = ({
 }) => {
   const toggleNotification = useNotification();
   const [isOpen, setIsOpen] = useState(false);
-  const { formatMessage } = useIntl();
+  const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
+  const [componentCollapses, setComponentsCollapses] = useState(
+    createCollapses(dynamicDisplayedComponentsLength)
+  );
+
   // We cannot use the default props here
   const { max = Infinity, min = -Infinity } = fieldSchema;
   const dynamicZoneErrors = useMemo(() => {
@@ -49,13 +53,13 @@ const DynamicZone = ({
   }, [formErrors, name]);
 
   const dynamicZoneAvailableComponents = useMemo(() => fieldSchema.components || [], [fieldSchema]);
-  const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
+
   const missingComponentNumber = min - dynamicDisplayedComponentsLength;
   const hasError = dynamicZoneErrors.length > 0;
+
   const hasMinError =
     dynamicZoneErrors.length > 0 && get(dynamicZoneErrors, [0, 'id'], '').includes('min');
 
-  const hasRequiredError = hasError && !hasMinError;
   const hasMaxError =
     hasError && get(dynamicZoneErrors, [0, 'id'], '') === 'components.Input.error.validation.max';
 
@@ -64,6 +68,7 @@ const DynamicZone = ({
       setIsOpen(false);
 
       addComponentToDynamicZone(name, componentUid, hasError);
+      setComponentsCollapses(prev => [...prev, { isOpen: true }]);
     },
     [addComponentToDynamicZone, hasError, name]
   );
@@ -79,123 +84,143 @@ const DynamicZone = ({
     }
   };
 
-  const formattedLabelIcon = labelIcon
-    ? { icon: labelIcon.icon, title: formatMessage(labelIcon.title) }
-    : null;
+  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 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 handleRemoveComponent = (name, currentIndex) => {
+    removeComponentFromDynamicZone(name, currentIndex);
+
+    setComponentsCollapses(prev => prev.filter((_, index) => index !== currentIndex));
+  };
 
   if (!isFieldAllowed && isCreatingEntry) {
     return (
-      <BaselineAlignement>
-        <NotAllowedInput
-          label={metadatas.label}
-          spacerHeight="5px"
-          labelIcon={formattedLabelIcon}
-        />
-      </BaselineAlignement>
+      <NotAllowedInput
+        description={
+          metadatas.description
+            ? { id: metadatas.description, defaultMessage: metadatas.description }
+            : null
+        }
+        intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
+        labelAction={labelAction}
+        name={name}
+      />
     );
   }
 
   if (!isFieldAllowed && !isFieldReadable && !isCreatingEntry) {
     return (
-      <BaselineAlignement>
-        <NotAllowedInput
-          label={metadatas.label}
-          spacerHeight="5px"
-          labelIcon={formattedLabelIcon}
-        />
-      </BaselineAlignement>
+      <NotAllowedInput
+        description={
+          metadatas.description
+            ? { id: metadatas.description, defaultMessage: metadatas.description }
+            : null
+        }
+        intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
+        labelAction={labelAction}
+        name={name}
+      />
     );
   }
 
   return (
-    <DynamicZoneWrapper>
+    <Stack size={6}>
       {dynamicDisplayedComponentsLength > 0 && (
-        <Label>
-          <Flex>
-            <p>
-              <span>{metadatas.label}</span>
-            </p>
-            {formattedLabelIcon && (
-              <LabelIconWrapper title={formattedLabelIcon.title}>
-                {formattedLabelIcon.icon}
-              </LabelIconWrapper>
-            )}
-          </Flex>
-          <p>{metadatas.description}</p>
-        </Label>
-      )}
-
-      {/* List of displayed components */}
-      <ComponentWrapper>
-        {dynamicDisplayedComponents.map((componentUid, index) => {
-          const showDownIcon =
-            isFieldAllowed &&
-            dynamicDisplayedComponentsLength > 0 &&
-            index < dynamicDisplayedComponentsLength - 1;
-          const showUpIcon = isFieldAllowed && dynamicDisplayedComponentsLength > 0 && index > 0;
-
-          return (
-            <Component
-              componentUid={componentUid}
-              key={index}
-              index={index}
-              isFieldAllowed={isFieldAllowed}
-              moveComponentDown={moveComponentDown}
-              moveComponentUp={moveComponentUp}
-              name={name}
-              removeComponentFromDynamicZone={removeComponentFromDynamicZone}
-              showDownIcon={showDownIcon}
-              showUpIcon={showUpIcon}
-            />
-          );
-        })}
-      </ComponentWrapper>
-      {isFieldAllowed ? (
-        <Wrapper>
-          <Button
-            type="button"
-            hasError={hasError}
-            className={isOpen && 'isOpen'}
-            onClick={handleClickOpenPicker}
+        <Box>
+          <DzLabel
+            label={metadatas.label}
+            labelAction={labelAction}
+            name={name}
+            numberOfComponents={dynamicDisplayedComponentsLength}
           />
-          {hasRequiredError && !isOpen && !hasMaxError && (
-            <div className="error-label">
-              <FormattedMessage id={getTrad('components.DynamicZone.required')} />
-            </div>
-          )}
-          {hasMaxError && !isOpen && (
-            <div className="error-label">
-              <FormattedMessage id="components.Input.error.validation.max" />
-            </div>
-          )}
-          {hasMinError && !isOpen && (
-            <div className="error-label">
-              <FormattedMessage
-                id={getTrad(
-                  `components.DynamicZone.missing${
-                    missingComponentNumber > 1 ? '.plural' : '.singular'
-                  }`
-                )}
-                values={{ count: missingComponentNumber }}
+          {dynamicDisplayedComponents.map((componentUid, index) => {
+            const showDownIcon =
+              isFieldAllowed &&
+              dynamicDisplayedComponentsLength > 0 &&
+              index < dynamicDisplayedComponentsLength - 1;
+            const showUpIcon = isFieldAllowed && dynamicDisplayedComponentsLength > 0 && index > 0;
+            const isOpen = componentCollapses[index].isOpen;
+
+            return (
+              <Component
+                componentUid={componentUid}
+                key={index}
+                index={index}
+                isOpen={isOpen}
+                isFieldAllowed={isFieldAllowed}
+                moveComponentDown={handleMoveComponentDown}
+                moveComponentUp={handleMoveComponentUp}
+                onToggle={handleToggleComponent}
+                name={name}
+                removeComponentFromDynamicZone={handleRemoveComponent}
+                showDownIcon={showDownIcon}
+                showUpIcon={showUpIcon}
               />
-            </div>
-          )}
-          <div className="info">
-            <FormattedMessage
-              id={getTrad('components.DynamicZone.add-compo')}
-              values={{ componentName: metadatas.label }}
-            />
-          </div>
-          <Picker
-            isOpen={isOpen}
-            components={dynamicZoneAvailableComponents}
-            onClickAddComponent={handleAddComponent}
-          />
-        </Wrapper>
-      ) : (
-        <BaselineAlignement top="9px" />
+            );
+          })}
+        </Box>
       )}
-    </DynamicZoneWrapper>
+
+      <AddComponentButton
+        hasError={hasError}
+        hasMaxError={hasMaxError}
+        hasMinError={hasMinError}
+        isDisabled={!isFieldAllowed}
+        label={metadatas.label}
+        missingComponentNumber={missingComponentNumber}
+        isOpen={isOpen}
+        name={name}
+        onClick={handleClickOpenPicker}
+      />
+      <ComponentPicker
+        isOpen={isOpen}
+        components={dynamicZoneAvailableComponents}
+        onClickAddComponent={handleAddComponent}
+      />
+    </Stack>
   );
 };
 
@@ -205,7 +230,7 @@ DynamicZone.defaultProps = {
     max: Infinity,
     min: -Infinity,
   },
-  labelIcon: null,
+  labelAction: null,
 };
 
 DynamicZone.propTypes = {
@@ -220,13 +245,7 @@ DynamicZone.propTypes = {
   isCreatingEntry: PropTypes.bool.isRequired,
   isFieldAllowed: PropTypes.bool.isRequired,
   isFieldReadable: PropTypes.bool.isRequired,
-  labelIcon: PropTypes.shape({
-    icon: PropTypes.node.isRequired,
-    title: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      defaultMessage: PropTypes.string.isRequired,
-    }).isRequired,
-  }),
+  labelAction: PropTypes.element,
   metadatas: PropTypes.shape({
     description: PropTypes.string,
     label: PropTypes.string,

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { get } from 'lodash';
-import { useContentManagerEditViewDataManager } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect(name) {
   const {
@@ -14,7 +14,7 @@ function useSelect(name) {
     removeComponentFromDynamicZone,
     readActionAllowedFields,
     updateActionAllowedFields,
-  } = useContentManagerEditViewDataManager();
+  } = useCMEditViewDataManager();
 
   const dynamicDisplayedComponents = useMemo(
     () => get(modifiedData, [name], []).map(data => data.__component),

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

@@ -3,6 +3,7 @@ import { cloneDeep, get, isEmpty, isEqual, set } from 'lodash';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Prompt, Redirect } from 'react-router-dom';
+import { Main } from '@strapi/parts/Main';
 import {
   LoadingIndicatorPage,
   ContentManagerEditViewDataManagerContext,
@@ -88,6 +89,21 @@ const EditViewDataManagerProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shouldCheckErrors]);
 
+  useEffect(() => {
+    const errorsInForm = Object.keys(formErrors);
+
+    // TODO check if working with DZ, components...
+    // TODO use querySelector querySelectorAll('[data-strapi-field-error]')
+    if (errorsInForm.length > 0) {
+      const firstError = errorsInForm[0];
+      const el = document.getElementById(firstError);
+
+      if (el) {
+        el.focus();
+      }
+    }
+  }, [formErrors]);
+
   useEffect(() => {
     if (shouldRedirectToHomepageWhenEditingEntry) {
       toggleNotification({
@@ -288,6 +304,14 @@ const EditViewDataManagerProvider = ({
         console.error(err);
 
         errors = getYupInnerErrors(err);
+
+        toggleNotification({
+          type: 'warning',
+          message: {
+            id: getTrad('containers.EditView.notification.errors'),
+            defaultMessage: 'The form contains some errors',
+          },
+        });
       }
 
       dispatch({
@@ -295,7 +319,16 @@ const EditViewDataManagerProvider = ({
         errors,
       });
     },
-    [createFormData, isCreatingEntry, modifiedData, onPost, onPut, trackerProperty, yupSchema]
+    [
+      createFormData,
+      isCreatingEntry,
+      modifiedData,
+      onPost,
+      onPut,
+      toggleNotification,
+      trackerProperty,
+      yupSchema,
+    ]
   );
 
   const handlePublish = useCallback(async () => {
@@ -426,14 +459,6 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  // const overlayBlockerParams = useMemo(
-  //   () => ({
-  //     children: <div />,
-  //     noGradient: true,
-  //   }),
-  //   []
-  // );
-
   // Redirect the user to the previous page if he is not allowed to read/update a document
   if (shouldRedirectToHomepageWhenEditingEntry) {
     return <Redirect to={from} />;
@@ -477,13 +502,10 @@ const EditViewDataManagerProvider = ({
       }}
     >
       <>
-        {/* <OverlayBlocker
-          key="overlayBlocker"
-          isOpen={status !== 'resolved'}
-          {...overlayBlockerParams}
-        /> */}
-        {isLoadingForData ? (
-          <LoadingIndicatorPage />
+        {isLoadingForData || (!isCreatingEntry && !initialData.id) ? (
+          <Main aria-busy="true">
+            <LoadingIndicatorPage />
+          </Main>
         ) : (
           <>
             <Prompt
@@ -506,7 +528,7 @@ EditViewDataManagerProvider.defaultProps = {
 EditViewDataManagerProvider.propTypes = {
   allLayoutData: PropTypes.object.isRequired,
   allowedActions: PropTypes.object.isRequired,
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  children: PropTypes.node.isRequired,
   componentsDataStructure: PropTypes.object.isRequired,
   contentTypeDataStructure: PropTypes.object.isRequired,
   createActionAllowedFields: PropTypes.array.isRequired,

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

@@ -1,4 +1,6 @@
-import { get, isArray, isObject } from 'lodash';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
 
 /* eslint-disable indent */
 
@@ -23,13 +25,24 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
           }
 
           break;
-        case 'date':
-          cleanedData =
-            value && value._isAMomentObject === true ? value.format('YYYY-MM-DD') : value;
-          break;
-        case 'datetime':
-          cleanedData = value && value._isAMomentObject === true ? value.toISOString() : value;
+        // TODO
+        // case 'date':
+        //   cleanedData =
+        //     value && value._isAMomentObject === true ? value.format('YYYY-MM-DD') : value;
+        //   break;
+        // case 'datetime':
+        //   cleanedData = value && value._isAMomentObject === true ? value.toISOString() : value;
+        //   break;
+        case 'time': {
+          cleanedData = value;
+
+          // FIXME
+          if (value && value.split(':').length < 3) {
+            cleanedData = `${value}:00`;
+          }
+
           break;
+        }
         case 'media':
           if (getOtherInfos(schema, [current, 'multiple']) === true) {
             cleanedData = value ? value.filter(file => !(file instanceof File)) : null;

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

@@ -9,7 +9,7 @@ import {
   isNaN,
   toNumber,
 } from 'lodash';
-import moment from 'moment';
+
 import * as yup from 'yup';
 import { translatedErrors as errorsTrads } from '@strapi/helper-plugin';
 
@@ -169,14 +169,14 @@ const createYupSchema = (
             dynamicZoneSchema = dynamicZoneSchema
               .test('min', errorsTrads.min, value => {
                 if (options.isCreatingEntry) {
-                  return value && value.length > 0;
+                  return value && value.length >= min;
                 }
 
                 if (value === undefined) {
                   return true;
                 }
 
-                return value !== null && value.length > 0;
+                return value !== null && value.length >= min;
               })
               .test('required', errorsTrads.required, value => {
                 if (options.isCreatingEntry) {
@@ -291,14 +291,18 @@ const createYupSchemaAttribute = (type, validations, options) => {
                     return !!value;
                   }
 
-                  if (['date', 'datetime'].includes(type)) {
-                    return moment(value)._isValid === true;
-                  }
-
                   if (type === 'boolean') {
                     return value !== null;
                   }
 
+                  if (type === 'date' || type === 'datetime') {
+                    if (typeof value === 'string') {
+                      return !isEmpty(value);
+                    }
+
+                    return !isEmpty(value.toString());
+                  }
+
                   return !isEmpty(value);
                 });
               }

package/admin/src/content-manager/components/FieldComponent/Label.js

@@ -1,10 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 import styled from 'styled-components';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
 
-const Label = styled.label`
-  font-weight: 500;
-  font-size: 13px;
-  margin-bottom: 1rem;
-  display: block;
+const LabelAction = styled(Box)`
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
 `;
 
+const Label = ({ intlLabel, id, labelAction, name, numberOfEntries, showNumberOfEntries }) => {
+  const { formatMessage } = useIntl();
+  const label = intlLabel?.id ? formatMessage(intlLabel) : name;
+
+  return (
+    <Box paddingBottom={1}>
+      <Row>
+        <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
+          {label}
+          {showNumberOfEntries && <>&nbsp;({numberOfEntries})</>}
+        </Text>
+        {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
+      </Row>
+    </Box>
+  );
+};
+
+Label.defaultProps = {
+  id: undefined,
+  labelAction: undefined,
+  numberOfEntries: 0,
+  showNumberOfEntries: false,
+};
+
+Label.propTypes = {
+  id: PropTypes.string,
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }).isRequired,
+  labelAction: PropTypes.element,
+  name: PropTypes.string.isRequired,
+  numberOfEntries: PropTypes.number,
+  showNumberOfEntries: PropTypes.bool,
+};
+
 export default Label;