@strapi/admin 4.5.0 → 4.5.1

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

@@ -13,7 +13,8 @@ import { BaseButton } from '@strapi/design-system/BaseButton';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
-import { getTrad } from '../../../../utils';
+
+import { getTrad } from '../../../utils';
 
 const StyledAddIcon = styled(PlusCircle)`
   transform: ${({ $isOpen }) => ($isOpen ? 'rotate(45deg)' : 'rotate(0deg)')};
@@ -142,17 +143,22 @@ const AddComponentButton = ({
 };
 
 AddComponentButton.defaultProps = {
+  hasError: false,
+  hasMaxError: false,
+  hasMinError: false,
+  isDisabled: false,
+  isOpen: false,
   label: '',
   missingComponentNumber: 0,
 };
 
 AddComponentButton.propTypes = {
   label: PropTypes.string,
-  hasError: PropTypes.bool.isRequired,
-  hasMaxError: PropTypes.bool.isRequired,
-  hasMinError: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  isOpen: PropTypes.bool.isRequired,
+  hasError: PropTypes.bool,
+  hasMaxError: PropTypes.bool,
+  hasMinError: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isOpen: PropTypes.bool,
   missingComponentNumber: PropTypes.number,
   name: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,

package/admin/src/content-manager/components/DynamicZone/components/{ComponentPicker/Category/ComponentCard/index.js → ComponentCard.js}

@@ -6,13 +6,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import { Box } from '@strapi/design-system/Box';
 import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { pxToRem } from '@strapi/helper-plugin';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
 
 const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
   width: ${pxToRem(32)} !important;
@@ -53,19 +53,14 @@ const ComponentBox = styled(Box)`
   }
 `;
 
-function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
-  const { formatMessage } = useIntl();
-  const handleClick = () => {
-    onClick(componentUid);
-  };
-
+export default function ComponentCard({ children, icon, onClick }) {
   return (
-    <button type="button" onClick={handleClick}>
+    <button type="button" onClick={onClick}>
       <ComponentBox borderRadius="borderRadius">
         <Stack spacing={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
-          <StyledFontAwesomeIcon icon={icon} />
+          <StyledFontAwesomeIcon data-testid="component-card-icon" icon={icon} />
           <Typography variant="pi" fontWeight="bold" textColor="neutral600">
-            {formatMessage(intlLabel)}
+            {children}
           </Typography>
         </Stack>
       </ComponentBox>
@@ -79,13 +74,7 @@ ComponentCard.defaultProps = {
 };
 
 ComponentCard.propTypes = {
-  componentUid: PropTypes.string.isRequired,
-  intlLabel: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }).isRequired,
+  children: PropTypes.node.isRequired,
   icon: PropTypes.string,
   onClick: PropTypes.func,
 };
-
-export default ComponentCard;

package/admin/src/content-manager/components/DynamicZone/components/{ComponentPicker/Category/index.js → ComponentCategory.js}

@@ -4,6 +4,7 @@ import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-sys
 import { Box } from '@strapi/design-system/Box';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
+
 import ComponentCard from './ComponentCard';
 
 const Grid = styled.div`
@@ -12,7 +13,7 @@ const Grid = styled.div`
   grid-gap: ${({ theme }) => theme.spaces[1]};
 `;
 
-const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggle }) => {
+const ComponentCategory = ({ category, components, variant, isOpen, onAddComponent, onToggle }) => {
   const { formatMessage } = useIntl();
 
   const handleToggle = () => {
@@ -22,24 +23,18 @@ const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggl
   return (
     <Accordion expanded={isOpen} onToggle={handleToggle} size="S">
       <AccordionToggle
-        variant={isOdd ? 'primary' : 'secondary'}
+        variant={variant}
         title={formatMessage({ id: category, defaultMessage: category })}
         togglePosition="left"
       />
       <AccordionContent>
         <Box paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>
           <Grid>
-            {components.map(({ componentUid, info: { displayName, icon } }) => {
-              return (
-                <ComponentCard
-                  key={componentUid}
-                  componentUid={componentUid}
-                  intlLabel={{ id: displayName, defaultMessage: displayName }}
-                  icon={icon}
-                  onClick={onAddComponent}
-                />
-              );
-            })}
+            {components.map(({ componentUid, info: { displayName, icon } }) => (
+              <ComponentCard key={componentUid} icon={icon} onClick={onAddComponent(componentUid)}>
+                {formatMessage({ id: displayName, defaultMessage: displayName })}
+              </ComponentCard>
+            ))}
           </Grid>
         </Box>
       </AccordionContent>
@@ -47,13 +42,19 @@ const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggl
   );
 };
 
-Category.propTypes = {
+ComponentCategory.defaultProps = {
+  components: [],
+  isOpen: false,
+  variant: 'primary',
+};
+
+ComponentCategory.propTypes = {
   category: PropTypes.string.isRequired,
-  components: PropTypes.array.isRequired,
-  isOdd: PropTypes.bool.isRequired,
-  isOpen: PropTypes.bool.isRequired,
+  components: PropTypes.array,
+  isOpen: PropTypes.bool,
   onAddComponent: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['primary', 'secondary']),
 };
 
-export default Category;
+export default ComponentCategory;

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

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import groupBy from 'lodash/groupBy';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -6,9 +6,11 @@ import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
-import { getTrad } from '../../../../utils';
-import { useContentTypeLayout } from '../../../../hooks';
-import Category from './Category';
+
+import { getTrad } from '../../../utils';
+import { useContentTypeLayout } from '../../../hooks';
+
+import ComponentCategory from './ComponentCategory';
 
 const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   const { formatMessage } = useIntl();
@@ -32,27 +34,22 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   }, [components, getComponentLayout]);
 
   useEffect(() => {
-    if (isOpen && dynamicComponentCategories.length) {
+    if (isOpen && dynamicComponentCategories.length > 0) {
       setCategoryToOpen(dynamicComponentCategories[0].category);
     }
   }, [isOpen, dynamicComponentCategories]);
 
-  const handleAddComponentToDz = useCallback(
-    (componentUid) => {
-      onClickAddComponent(componentUid);
-      setCategoryToOpen('');
-    },
-    [onClickAddComponent]
-  );
-
-  const handleClickToggle = useCallback(
-    (categoryName) => {
-      const nextCategoryToOpen = categoryToOpen === categoryName ? '' : categoryName;
+  const handleAddComponentToDz = (componentUid) => () => {
+    onClickAddComponent(componentUid);
+    setCategoryToOpen('');
+  };
 
-      setCategoryToOpen(nextCategoryToOpen);
-    },
-    [categoryToOpen]
-  );
+  /**
+   * @type {(categoryName: string) => void}
+   */
+  const handleClickToggle = (categoryName) => {
+    setCategoryToOpen((currentCat) => (currentCat === categoryName ? '' : categoryName));
+  };
 
   if (!isOpen) {
     return null;
@@ -80,21 +77,17 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
         </Flex>
         <Box paddingTop={2}>
           <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
-            {dynamicComponentCategories.map(({ category, components }, index) => {
-              return (
-                <Category
-                  key={category}
-                  category={category}
-                  components={components}
-                  isOdd={index % 2 === 1}
-                  isOpen={category === categoryToOpen}
-                  // TODO?
-                  // isFirst={index === 0}
-                  onAddComponent={handleAddComponentToDz}
-                  onToggle={handleClickToggle}
-                />
-              );
-            })}
+            {dynamicComponentCategories.map(({ category, components }, index) => (
+              <ComponentCategory
+                key={category}
+                category={category}
+                components={components}
+                onAddComponent={handleAddComponentToDz}
+                isOpen={category === categoryToOpen}
+                onToggle={handleClickToggle}
+                variant={index % 2 === 1 ? 'primary' : 'secondary'}
+              />
+            ))}
           </KeyboardNavigable>
         </Box>
       </Box>
@@ -102,10 +95,15 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   );
 };
 
+ComponentPicker.defaultProps = {
+  components: [],
+  isOpen: false,
+};
+
 ComponentPicker.propTypes = {
-  components: PropTypes.array.isRequired,
-  isOpen: PropTypes.bool.isRequired,
+  components: PropTypes.array,
+  isOpen: PropTypes.bool,
   onClickAddComponent: PropTypes.func.isRequired,
 };
 
-export default memo(ComponentPicker);
+export default ComponentPicker;

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

@@ -0,0 +1,195 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import get from 'lodash/get';
+
+import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import { Stack } from '@strapi/design-system/Stack';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+import Trash from '@strapi/icons/Trash';
+import ArrowDown from '@strapi/icons/ArrowDown';
+import ArrowUp from '@strapi/icons/ArrowUp';
+
+import { useContentTypeLayout } from '../../../hooks';
+import { getTrad } from '../../../utils';
+
+import FieldComponent from '../../FieldComponent';
+
+const IconButtonCustom = styled(IconButton)`
+  background-color: transparent;
+
+  svg path {
+    fill: ${({ theme, expanded }) =>
+      expanded ? theme.colors.primary600 : theme.colors.neutral600};
+  }
+`;
+
+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 DynamicZoneComponent = ({
+  componentUid,
+  formErrors,
+  index,
+  isFieldAllowed,
+  onMoveComponentDownClick,
+  onMoveComponentUpClick,
+  name,
+  onRemoveComponentClick,
+  showDownIcon,
+  showUpIcon,
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const { formatMessage } = useIntl();
+  const { getComponentLayout } = useContentTypeLayout();
+  const { modifiedData } = useCMEditViewDataManager();
+  const { icon, friendlyName, mainValue } = useMemo(() => {
+    const componentLayoutData = getComponentLayout(componentUid);
+
+    const {
+      info: { icon, displayName },
+    } = componentLayoutData;
+
+    const mainFieldKey = get(componentLayoutData, ['settings', 'mainField'], 'id');
+
+    const mainField = get(modifiedData, [name, index, mainFieldKey]) ?? '';
+
+    const displayedValue = mainFieldKey === 'id' ? '' : mainField.trim();
+
+    const mainValue = displayedValue.length > 0 ? ` - ${displayedValue}` : displayedValue;
+
+    return { friendlyName: displayName, icon, mainValue };
+  }, [componentUid, getComponentLayout, modifiedData, name, index]);
+
+  const fieldsErrors = Object.keys(formErrors).filter((errorKey) => {
+    const errorKeysArray = errorKey.split('.');
+
+    if (`${errorKeysArray[0]}.${errorKeysArray[1]}` === `${name}.${index}`) {
+      return true;
+    }
+
+    return false;
+  });
+
+  let errorMessage;
+
+  if (fieldsErrors.length > 0) {
+    errorMessage = formatMessage({
+      id: getTrad('components.DynamicZone.error-message'),
+      defaultMessage: 'The component contains error(s)',
+    });
+  }
+
+  const handleToggle = () => {
+    setIsOpen((s) => !s);
+  };
+
+  return (
+    <Box>
+      <Flex justifyContent="center">
+        <Rectangle background="neutral200" />
+      </Flex>
+      <StyledBox hasRadius>
+        <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
+          <AccordionToggle
+            startIcon={<FontAwesomeIcon icon={icon} />}
+            action={
+              <Stack horizontal spacing={0} expanded={isOpen}>
+                {showDownIcon && (
+                  <IconButtonCustom
+                    noBorder
+                    label={formatMessage({
+                      id: getTrad('components.DynamicZone.move-down-label'),
+                      defaultMessage: 'Move component down',
+                    })}
+                    onClick={onMoveComponentDownClick}
+                    icon={<ArrowDown />}
+                  />
+                )}
+                {showUpIcon && (
+                  <IconButtonCustom
+                    noBorder
+                    label={formatMessage({
+                      id: getTrad('components.DynamicZone.move-up-label'),
+                      defaultMessage: 'Move component up',
+                    })}
+                    onClick={onMoveComponentUpClick}
+                    icon={<ArrowUp />}
+                  />
+                )}
+                {isFieldAllowed && (
+                  <IconButtonCustom
+                    noBorder
+                    label={formatMessage(
+                      {
+                        id: getTrad('components.DynamicZone.delete-label'),
+                        defaultMessage: 'Delete {name}',
+                      },
+                      { name: friendlyName }
+                    )}
+                    onClick={onRemoveComponentClick}
+                    icon={<Trash />}
+                  />
+                )}
+              </Stack>
+            }
+            title={`${friendlyName}${mainValue}`}
+            togglePosition="left"
+          />
+          <AccordionContent>
+            <AccordionContentRadius background="neutral0">
+              <FieldComponent
+                componentUid={componentUid}
+                icon={icon}
+                name={`${name}.${index}`}
+                isFromDynamicZone
+              />
+            </AccordionContentRadius>
+          </AccordionContent>
+        </Accordion>
+      </StyledBox>
+    </Box>
+  );
+};
+
+DynamicZoneComponent.defaultProps = {
+  formErrors: {},
+  index: 0,
+  isFieldAllowed: true,
+  showDownIcon: true,
+  showUpIcon: true,
+};
+
+DynamicZoneComponent.propTypes = {
+  componentUid: PropTypes.string.isRequired,
+  formErrors: PropTypes.object,
+  index: PropTypes.number,
+  isFieldAllowed: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onMoveComponentDownClick: PropTypes.func.isRequired,
+  onMoveComponentUpClick: PropTypes.func.isRequired,
+  onRemoveComponentClick: PropTypes.func.isRequired,
+  showDownIcon: PropTypes.bool,
+  showUpIcon: PropTypes.bool,
+};
+
+export default DynamicZoneComponent;

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;