@strapi/admin 4.11.0-exp.9xg4-3qfm-9w8f.1 → 4.11.0

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

@@ -12,67 +12,19 @@ import {
   IconButton,
   Box,
   Flex,
+  VisuallyHidden,
 } from '@strapi/design-system';
+import { Menu, MenuItem } from '@strapi/design-system/v2';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Trash, Drag } from '@strapi/icons';
+import { Trash, Drag, More } from '@strapi/icons';
 
 import { useContentTypeLayout, useDragAndDrop } from '../../../hooks';
 import { composeRefs, getTrad, ItemTypes } from '../../../utils';
 
 import FieldComponent from '../../FieldComponent';
+import { ComponentIcon } from '../../ComponentIcon';
 
-const ActionsFlex = styled(Flex)`
-  /* 
-    we need to remove the background from the button but we can't 
-    wrap the element in styled because it breaks the forwardedAs which
-    we need for drag handler to work on firefox
-  */
-  div[role='button'] {
-    background: transparent;
-  }
-`;
-
-const IconButtonCustom = styled(IconButton)`
-  background-color: transparent;
-
-  svg path {
-    fill: ${({ theme, expanded }) =>
-      expanded ? theme.colors.primary600 : theme.colors.neutral600};
-  }
-`;
-
-// TODO: Delete once https://github.com/strapi/design-system/pull/858
-// is merged and released.
-const StyledBox = styled(Box)`
-  > div:first-child {
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-  }
-`;
-
-const AccordionContentRadius = styled(Box)`
-  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
-`;
-
-const Rectangle = styled(Box)`
-  width: ${({ theme }) => theme.spaces[2]};
-  height: ${({ theme }) => theme.spaces[4]};
-`;
-
-const Preview = styled.span`
-  display: block;
-  background-color: ${({ theme }) => theme.colors.primary100};
-  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
-  outline-offset: -1px;
-  padding: ${({ theme }) => theme.spaces[6]};
-`;
-
-const ComponentContainer = styled(Box)`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-
-const DynamicZoneComponent = ({
+export const DynamicComponent = ({
   componentUid,
   formErrors,
   index,
@@ -83,6 +35,8 @@ const DynamicZoneComponent = ({
   onGrabItem,
   onDropItem,
   onCancel,
+  dynamicComponentsByCategory,
+  onAddComponent,
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const { formatMessage } = useIntl();
@@ -180,11 +134,70 @@ const DynamicZoneComponent = ({
       >
         <Drag />
       </IconButton>
+      <Menu.Root>
+        <Menu.Trigger size="S" endIcon={undefined} paddingLeft={2} paddingRight={2}>
+          <More aria-hidden focusable={false} />
+          <VisuallyHidden as="span">
+            {formatMessage({
+              id: getTrad('components.DynamicZone.more-actions'),
+              defaultMessage: 'More actions',
+            })}
+          </VisuallyHidden>
+        </Menu.Trigger>
+        <Menu.Content>
+          <Menu.SubRoot>
+            <Menu.SubTrigger>
+              {formatMessage({
+                id: getTrad('components.DynamicZone.add-item-above'),
+                defaultMessage: 'Add component above',
+              })}
+            </Menu.SubTrigger>
+            <Menu.SubContent>
+              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (
+                <React.Fragment key={category}>
+                  <Menu.Label>{category}</Menu.Label>
+                  {components.map(({ componentUid, info: { displayName } }) => (
+                    <MenuItem
+                      key={componentUid}
+                      onSelect={() => onAddComponent(componentUid, index)}
+                    >
+                      {displayName}
+                    </MenuItem>
+                  ))}
+                </React.Fragment>
+              ))}
+            </Menu.SubContent>
+          </Menu.SubRoot>
+          <Menu.SubRoot>
+            <Menu.SubTrigger>
+              {formatMessage({
+                id: getTrad('components.DynamicZone.add-item-below'),
+                defaultMessage: 'Add component below',
+              })}
+            </Menu.SubTrigger>
+            <Menu.SubContent>
+              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (
+                <React.Fragment key={category}>
+                  <Menu.Label>{category}</Menu.Label>
+                  {components.map(({ componentUid, info: { displayName } }) => (
+                    <MenuItem
+                      key={componentUid}
+                      onSelect={() => onAddComponent(componentUid, index + 1)}
+                    >
+                      {displayName}
+                    </MenuItem>
+                  ))}
+                </React.Fragment>
+              ))}
+            </Menu.SubContent>
+          </Menu.SubRoot>
+        </Menu.Content>
+      </Menu.Root>
     </ActionsFlex>
   );
 
   return (
-    <ComponentContainer as="li">
+    <ComponentContainer as="li" width="100%">
       <Flex justifyContent="center">
         <Rectangle background="neutral200" />
       </Flex>
@@ -194,6 +207,7 @@ const DynamicZoneComponent = ({
         ) : (
           <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
             <AccordionToggle
+              startIcon={<ComponentIcon icon={icon} showBackground={false} size="S" />}
               action={accordionActions}
               title={`${friendlyName}${mainValue}`}
               togglePosition="left"
@@ -215,26 +229,86 @@ const DynamicZoneComponent = ({
   );
 };
 
-DynamicZoneComponent.defaultProps = {
+const ActionsFlex = styled(Flex)`
+  /* 
+    we need to remove the background from the button but we can't 
+    wrap the element in styled because it breaks the forwardedAs which
+    we need for drag handler to work on firefox
+  */
+  div[role='button'] {
+    background: transparent;
+  }
+`;
+
+const IconButtonCustom = styled(IconButton)`
+  background-color: transparent;
+
+  svg path {
+    fill: ${({ theme, expanded }) =>
+      expanded ? theme.colors.primary600 : theme.colors.neutral600};
+  }
+`;
+
+// TODO: Delete once https://github.com/strapi/design-system/pull/858
+// is merged and released.
+const StyledBox = styled(Box)`
+  > div:first-child {
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  }
+`;
+
+const AccordionContentRadius = styled(Box)`
+  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
+`;
+
+const Rectangle = styled(Box)`
+  width: ${({ theme }) => theme.spaces[2]};
+  height: ${({ theme }) => theme.spaces[4]};
+`;
+
+const Preview = styled.span`
+  display: block;
+  background-color: ${({ theme }) => theme.colors.primary100};
+  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline-offset: -1px;
+  padding: ${({ theme }) => theme.spaces[6]};
+`;
+
+const ComponentContainer = styled(Box)`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+
+DynamicComponent.defaultProps = {
+  dynamicComponentsByCategory: {},
   formErrors: {},
   index: 0,
   isFieldAllowed: true,
+  onAddComponent: undefined,
   onGrabItem: undefined,
   onDropItem: undefined,
   onCancel: undefined,
 };
 
-DynamicZoneComponent.propTypes = {
+DynamicComponent.propTypes = {
   componentUid: PropTypes.string.isRequired,
+  dynamicComponentsByCategory: PropTypes.shape({
+    components: PropTypes.arrayOf(
+      PropTypes.shape({
+        componentUid: PropTypes.string.isRequired,
+        info: PropTypes.object,
+      })
+    ),
+  }),
   formErrors: PropTypes.object,
   index: PropTypes.number,
   isFieldAllowed: PropTypes.bool,
   name: PropTypes.string.isRequired,
+  onAddComponent: PropTypes.func,
   onGrabItem: PropTypes.func,
   onDropItem: PropTypes.func,
   onCancel: PropTypes.func,
   onMoveComponent: PropTypes.func.isRequired,
   onRemoveComponentClick: PropTypes.func.isRequired,
 };
-
-export default DynamicZoneComponent;

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

@@ -7,15 +7,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Box, Flex, Typography } from '@strapi/design-system';
 
-const StyledBox = styled(Box)`
-  border-radius: ${pxToRem(26)};
-`;
-
-const DynamicZoneLabel = ({
+export const DynamicZoneLabel = ({
   label,
   labelAction,
   name,
@@ -28,36 +23,35 @@ const DynamicZoneLabel = ({
 
   return (
     <Flex justifyContent="center">
-      <Box>
-        <StyledBox
-          paddingTop={3}
-          paddingBottom={3}
-          paddingRight={4}
-          paddingLeft={4}
-          background="neutral0"
-          shadow="filterShadow"
-          color="neutral500"
-        >
-          <Flex direction="column" justifyContent="center">
-            <Flex maxWidth={pxToRem(356)}>
-              <Typography variant="pi" textColor="neutral600" fontWeight="bold" ellipsis>
-                {intlLabel}&nbsp;
-              </Typography>
-              <Typography variant="pi" textColor="neutral600" fontWeight="bold">
-                ({numberOfComponents})
-              </Typography>
-              {required && <Typography textColor="danger600">*</Typography>}
-              {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
-            </Flex>
-            {intlDescription && (
-              <Box paddingTop={1} maxWidth={pxToRem(356)}>
-                <Typography variant="pi" textColor="neutral600" ellipsis>
-                  {formatMessage(intlDescription)}
-                </Typography>
-              </Box>
-            )}
+      <Box
+        paddingTop={3}
+        paddingBottom={3}
+        paddingRight={4}
+        paddingLeft={4}
+        borderRadius={26}
+        background="neutral0"
+        shadow="filterShadow"
+        color="neutral500"
+      >
+        <Flex direction="column" justifyContent="center">
+          <Flex maxWidth={pxToRem(356)}>
+            <Typography variant="pi" textColor="neutral600" fontWeight="bold" ellipsis>
+              {intlLabel}&nbsp;
+            </Typography>
+            <Typography variant="pi" textColor="neutral600" fontWeight="bold">
+              ({numberOfComponents})
+            </Typography>
+            {required && <Typography textColor="danger600">*</Typography>}
+            {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
           </Flex>
-        </StyledBox>
+          {intlDescription && (
+            <Box paddingTop={1} maxWidth={pxToRem(356)}>
+              <Typography variant="pi" textColor="neutral600" ellipsis>
+                {formatMessage(intlDescription)}
+              </Typography>
+            </Box>
+          )}
+        </Flex>
       </Box>
     </Flex>
   );
@@ -82,5 +76,3 @@ DynamicZoneLabel.propTypes = {
   numberOfComponents: PropTypes.number,
   required: PropTypes.bool,
 };
-
-export default DynamicZoneLabel;

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

@@ -1,76 +1,113 @@
-import React, { memo, useMemo, useState } from 'react';
-import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Flex, VisuallyHidden } from '@strapi/design-system';
-import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
+import { NotAllowedInput, useNotification, useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../utils';
 
-import connect from './utils/connect';
-import select from './utils/select';
-
-import DynamicZoneComponent from './components/DynamicComponent';
-import AddComponentButton from './components/AddComponentButton';
-import DynamicZoneLabel from './components/DynamicZoneLabel';
-import ComponentPicker from './components/ComponentPicker';
+import { DynamicComponent } from './components/DynamicComponent';
+import { AddComponentButton } from './components/AddComponentButton';
+import { DynamicZoneLabel } from './components/DynamicZoneLabel';
+import { ComponentPicker } from './components/ComponentPicker';
 
 import { useContentTypeLayout } from '../../hooks';
 
-const DynamicZone = ({
-  name,
-  // Passed with the select function
-  addComponentToDynamicZone,
-  formErrors,
-  isCreatingEntry,
-  isFieldAllowed,
-  isFieldReadable,
-  labelAction,
-  moveComponentField,
-  removeComponentFromDynamicZone,
-  dynamicDisplayedComponents,
-  fieldSchema,
-  metadatas,
-}) => {
+const DynamicZone = ({ name, labelAction, fieldSchema, metadatas }) => {
+  // We cannot use the default props here
+  const { max = Infinity, min = -Infinity, components = [], required = false } = fieldSchema;
+
   const [addComponentIsOpen, setAddComponentIsOpen] = useState(false);
   const [liveText, setLiveText] = useState('');
 
+  const {
+    addComponentToDynamicZone,
+    createActionAllowedFields,
+    isCreatingEntry,
+    formErrors,
+    modifiedData,
+    moveComponentField,
+    removeComponentFromDynamicZone,
+    readActionAllowedFields,
+    updateActionAllowedFields,
+  } = useCMEditViewDataManager();
+
+  const dynamicDisplayedComponents = useMemo(
+    () =>
+      (modifiedData?.[name] ?? []).map((data) => {
+        return {
+          componentUid: data.__component,
+          id: data.id ?? data.__temp_key__,
+        };
+      }),
+    [modifiedData, name]
+  );
+
+  const { getComponentLayout } = useContentTypeLayout();
+
+  /**
+   * @type {Record<string, Array<{category: string; info: unknown, attributes: Record<string, unknown>}>>}
+   */
+  const dynamicComponentsByCategory = useMemo(() => {
+    return components.reduce((acc, componentUid) => {
+      const { category, info, attributes } = getComponentLayout(componentUid);
+      const component = { componentUid, info, attributes };
+
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+
+      acc[category] = [...acc[category], component];
+
+      return acc;
+    }, {});
+  }, [components, getComponentLayout]);
+
   const { formatMessage } = useIntl();
 
   const toggleNotification = useNotification();
-  const { getComponentLayout, components } = useContentTypeLayout();
+
+  const isFieldAllowed = useMemo(() => {
+    const allowedFields = isCreatingEntry ? createActionAllowedFields : updateActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [name, isCreatingEntry, createActionAllowedFields, updateActionAllowedFields]);
+
+  const isFieldReadable = useMemo(() => {
+    const allowedFields = isCreatingEntry ? [] : readActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [name, isCreatingEntry, readActionAllowedFields]);
 
   const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
   const intlDescription = metadatas.description
     ? { id: metadatas.description, defaultMessage: metadatas.description }
     : null;
 
-  // We cannot use the default props here
-  const { max = Infinity, min = -Infinity } = fieldSchema;
-  const dynamicZoneErrors = useMemo(() => {
-    return Object.keys(formErrors)
-      .filter((key) => {
-        return key === name;
-      })
-      .map((key) => formErrors[key]);
-  }, [formErrors, name]);
+  const dynamicZoneError = formErrors[name];
 
   const missingComponentNumber = min - dynamicDisplayedComponentsLength;
-  const hasError = dynamicZoneErrors.length > 0;
-
-  const hasMinError =
-    dynamicZoneErrors.length > 0 && get(dynamicZoneErrors, [0, 'id'], '').includes('min');
+  const hasError = !!dynamicZoneError;
 
-  const hasMaxError =
-    hasError && get(dynamicZoneErrors, [0, 'id'], '') === 'components.Input.error.validation.max';
-
-  const handleAddComponent = (componentUid) => {
+  const handleAddComponent = (componentUid, position) => {
     setAddComponentIsOpen(false);
 
     const componentLayoutData = getComponentLayout(componentUid);
 
-    addComponentToDynamicZone(name, componentLayoutData, components, hasError);
+    const allComponents = Object.values(dynamicComponentsByCategory).reduce((acc, components) => {
+      const componentObjects = components.reduce((acc, { componentUid, attributes }) => {
+        acc[componentUid] = {
+          attributes,
+          uid: componentUid,
+        };
+
+        return acc;
+      }, {});
+
+      return { ...acc, ...componentObjects };
+    }, {});
+
+    addComponentToDynamicZone(name, componentLayoutData, allComponents, hasError, position);
   };
 
   const handleClickOpenPicker = () => {
@@ -160,6 +197,38 @@ const DynamicZone = ({
     removeComponentFromDynamicZone(name, currentIndex);
   };
 
+  const renderButtonLabel = () => {
+    if (addComponentIsOpen) {
+      return formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' });
+    }
+
+    if (hasError && dynamicZoneError.id.includes('max')) {
+      return formatMessage({
+        id: 'components.Input.error.validation.max',
+        defaultMessage: 'The value is too high.',
+      });
+    }
+
+    if (hasError && dynamicZoneError.id.includes('min')) {
+      return formatMessage(
+        {
+          id: getTrad(`components.DynamicZone.missing-components`),
+          defaultMessage:
+            'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',
+        },
+        { number: missingComponentNumber }
+      );
+    }
+
+    return formatMessage(
+      {
+        id: getTrad('components.DynamicZone.add-component'),
+        defaultMessage: 'Add a component to {componentName}',
+      },
+      { componentName: metadatas.label || name }
+    );
+  };
+
   if (!isFieldAllowed && (isCreatingEntry || (!isFieldReadable && !isCreatingEntry))) {
     return (
       <NotAllowedInput
@@ -183,7 +252,7 @@ const DynamicZone = ({
             labelAction={labelAction}
             name={name}
             numberOfComponents={dynamicDisplayedComponentsLength}
-            required={fieldSchema.required || false}
+            required={required}
           />
           <VisuallyHidden id={ariaDescriptionId}>
             {formatMessage({
@@ -194,7 +263,7 @@ const DynamicZone = ({
           <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
           <ol aria-describedby={ariaDescriptionId}>
             {dynamicDisplayedComponents.map(({ componentUid, id }, index) => (
-              <DynamicZoneComponent
+              <DynamicComponent
                 componentUid={componentUid}
                 formErrors={formErrors}
                 key={`${componentUid}-${id}`}
@@ -206,26 +275,26 @@ const DynamicZone = ({
                 onCancel={handleCancel}
                 onDropItem={handleDropItem}
                 onGrabItem={handleGrabItem}
+                onAddComponent={handleAddComponent}
+                dynamicComponentsByCategory={dynamicComponentsByCategory}
               />
             ))}
           </ol>
         </Box>
       )}
-
-      <AddComponentButton
-        hasError={hasError}
-        hasMaxError={hasMaxError}
-        hasMinError={hasMinError}
-        isDisabled={!isFieldAllowed}
-        label={metadatas.label}
-        missingComponentNumber={missingComponentNumber}
-        isOpen={addComponentIsOpen}
-        name={name}
-        onClick={handleClickOpenPicker}
-      />
+      <Flex justifyContent="center">
+        <AddComponentButton
+          hasError={hasError}
+          isDisabled={!isFieldAllowed}
+          isOpen={addComponentIsOpen}
+          onClick={handleClickOpenPicker}
+        >
+          {renderButtonLabel()}
+        </AddComponentButton>
+      </Flex>
       <ComponentPicker
+        dynamicComponentsByCategory={dynamicComponentsByCategory}
         isOpen={addComponentIsOpen}
-        components={fieldSchema.components ?? []}
         onClickAddComponent={handleAddComponent}
       />
     </Flex>
@@ -233,44 +302,23 @@ const DynamicZone = ({
 };
 
 DynamicZone.defaultProps = {
-  dynamicDisplayedComponents: [],
-  fieldSchema: {
-    max: Infinity,
-    min: -Infinity,
-  },
+  fieldSchema: {},
   labelAction: null,
 };
 
 DynamicZone.propTypes = {
-  addComponentToDynamicZone: PropTypes.func.isRequired,
-  dynamicDisplayedComponents: PropTypes.arrayOf(
-    PropTypes.shape({
-      componentUid: PropTypes.string.isRequired,
-      id: PropTypes.number.isRequired,
-    })
-  ),
   fieldSchema: PropTypes.shape({
-    components: PropTypes.array.isRequired,
+    components: PropTypes.array,
     max: PropTypes.number,
     min: PropTypes.number,
     required: PropTypes.bool,
   }),
-  formErrors: PropTypes.object.isRequired,
-  isCreatingEntry: PropTypes.bool.isRequired,
-  isFieldAllowed: PropTypes.bool.isRequired,
-  isFieldReadable: PropTypes.bool.isRequired,
   labelAction: PropTypes.element,
   metadatas: PropTypes.shape({
     description: PropTypes.string,
     label: PropTypes.string,
   }).isRequired,
-  moveComponentField: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
-  removeComponentFromDynamicZone: PropTypes.func.isRequired,
 };
 
-const Memoized = memo(DynamicZone, isEqual);
-
-export default connect(Memoized, select);
-
 export { DynamicZone };

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

@@ -22,12 +22,13 @@ import {
   getAPIInnerErrors,
 } from '@strapi/helper-plugin';
 
-import { getTrad } from '../../utils';
+import { createYupSchema, getTrad } from '../../utils';
 
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
 
 import reducer, { initialState } from './reducer';
-import { cleanData, createYupSchema } from './utils';
+import { cleanData } from './utils';
+
 import { clearSetModifiedDataOnly } from '../../sharedReducers/crudReducer/actions';
 import { usePrev } from '../../hooks';
 
@@ -195,14 +196,21 @@ const EditViewDataManagerProvider = ({
 
   const dispatchAddComponent = useCallback(
     (type) =>
-      (keys, componentLayoutData, components, shouldCheckErrors = false) => {
+      (
+        keys,
+        componentLayoutData,
+        allComponents,
+        shouldCheckErrors = false,
+        position = undefined
+      ) => {
         trackUsageRef.current('didAddComponentToDynamicZone');
 
         dispatch({
           type,
           keys: keys.split('.'),
+          position,
           componentLayoutData,
-          allComponents: components,
+          allComponents,
           shouldCheckErrors,
         });
       },