@strapi/admin 4.6.0-alpha.0 → 4.6.0-beta.0

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

@@ -57,13 +57,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
       </Box>
       {error?.id && (
         <Typography textColor="danger600" variant="pi">
-          {formatMessage(
-            {
-              id: error.id,
-              defaultMessage: error.id,
-            },
-            { ...error.values }
-          )}
+          {formatMessage(error, { ...error.values })}
         </Typography>
       )}
     </>

package/admin/src/content-manager/components/{RepeatableComponent/DragPreview.js → DragLayer/ComponentDragPreview.js}

@@ -2,13 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { IconButton } from '@strapi/design-system/IconButton';
-import Trash from '@strapi/icons/Trash';
-import DragHandle from '@strapi/icons/Drag';
-import CarretDown from '@strapi/icons/CarretDown';
+import { Box, Flex, Typography, IconButton } from '@strapi/design-system';
+import { Trash, Drag, CarretDown } from '@strapi/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const DragPreviewBox = styled(Box)`
   border: 1px solid ${({ theme }) => theme.colors.neutral200};
@@ -31,6 +27,13 @@ const DropdownIconWrapper = styled(Box)`
   }
 `;
 
+const Icon = styled(FontAwesomeIcon)`
+  width: ${pxToRem(12)};
+  height: ${pxToRem(12)};
+
+  color: ${({ theme }) => theme.colors.neutral600};
+`;
+
 const ToggleButton = styled.button`
   border: none;
   background: transparent;
@@ -40,7 +43,7 @@ const ToggleButton = styled.button`
   padding: 0;
 `;
 
-const DragPreview = ({ displayedValue }) => {
+const DragPreview = ({ displayedValue, icon }) => {
   return (
     <DragPreviewBox
       paddingLeft={3}
@@ -57,18 +60,23 @@ const DragPreview = ({ displayedValue }) => {
             <DropdownIconWrapper background="neutral200">
               <CarretDown />
             </DropdownIconWrapper>
-            <Box paddingLeft={6} maxWidth={pxToRem(150)}>
+            <Flex gap={2} paddingLeft={icon ? 3 : 6} maxWidth={pxToRem(150)}>
+              {icon ? <Icon icon={icon} /> : null}
               <Typography textColor="neutral700" ellipsis>
                 {displayedValue}
               </Typography>
-            </Box>
+            </Flex>
           </Flex>
         </ToggleButton>
         <Box paddingLeft={3}>
           <Flex>
-            <IconButton icon={<Trash />} />
+            <IconButton noBorder>
+              <Trash />
+            </IconButton>
             <Box paddingLeft={2}>
-              <IconButton icon={<DragHandle />} />
+              <IconButton noBorder>
+                <Drag />
+              </IconButton>
             </Box>
           </Flex>
         </Box>
@@ -77,8 +85,13 @@ const DragPreview = ({ displayedValue }) => {
   );
 };
 
+DragPreview.defaultProps = {
+  icon: undefined,
+};
+
 DragPreview.propTypes = {
   displayedValue: PropTypes.string.isRequired,
+  icon: PropTypes.string,
 };
 
 export default DragPreview;

package/admin/src/content-manager/components/DragLayer/RelationDragPreview.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Box, Flex, IconButton, Typography, Status, Icon } from '@strapi/design-system';
+import { Drag, Cross } from '@strapi/icons';
+
+import { getTrad } from '../../utils';
+import { PUBLICATION_STATES } from '../RelationInputDataManager/constants';
+import { ChildrenWrapper, StackWrapper } from '../RelationInput/components/RelationItem';
+import { BoxEllipsis, DisconnectButton } from '../RelationInput/RelationInput';
+
+export const RelationDragPreview = ({ status, displayedValue, width }) => {
+  const { formatMessage } = useIntl();
+
+  const stateMessage = {
+    [PUBLICATION_STATES.DRAFT]: formatMessage({
+      id: getTrad('relation.publicationState.draft'),
+      defaultMessage: 'Draft',
+    }),
+
+    [PUBLICATION_STATES.PUBLISHED]: formatMessage({
+      id: getTrad('relation.publicationState.published'),
+      defaultMessage: 'Published',
+    }),
+  };
+
+  const statusColor = status === PUBLICATION_STATES.DRAFT ? 'secondary' : 'success';
+
+  return (
+    <Box style={{ width }}>
+      <Flex
+        paddingTop={2}
+        paddingBottom={2}
+        paddingLeft={2}
+        paddingRight={4}
+        hasRadius
+        borderSize={1}
+        background="neutral0"
+        borderColor="neutral200"
+        justifyContent="space-between"
+      >
+        <StackWrapper spacing={1} horizontal>
+          <IconButton noBorder>
+            <Drag />
+          </IconButton>
+          <ChildrenWrapper justifyContent="space-between">
+            <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+              <Typography textColor="primary600" ellipsis>
+                {displayedValue}
+              </Typography>
+            </BoxEllipsis>
+            {status && (
+              <Status variant={statusColor} showBullet={false} size="S">
+                <Typography fontWeight="bold" textColor={`${statusColor}700`}>
+                  {stateMessage[status]}
+                </Typography>
+              </Status>
+            )}
+          </ChildrenWrapper>
+        </StackWrapper>
+        <Box paddingLeft={4}>
+          <DisconnectButton type="button">
+            <Icon width="12px" as={Cross} />
+          </DisconnectButton>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+RelationDragPreview.propTypes = {
+  status: PropTypes.string.isRequired,
+  displayedValue: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+};

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

@@ -3,11 +3,10 @@ import { useDragLayer } from 'react-dnd';
 import LayoutDndProvider from '../LayoutDndProvider';
 
 import ItemTypes from '../../utils/ItemTypes';
-import RepeatableComponentPreview from '../RepeatableComponent/DragPreview';
 import CardPreview from '../../pages/ListSettingsView/components/CardPreview';
-// import RelationItem from '../SelectMany/Relation';
-// import { Li } from '../SelectMany/components';
-// import DraggedField from '../DraggedField';
+
+import ComponentPreview from './ComponentDragPreview';
+import { RelationDragPreview } from './RelationDragPreview';
 
 const layerStyles = {
   position: 'fixed',
@@ -50,15 +49,32 @@ const CustomDragLayer = () => {
     return null;
   }
 
+  /**
+   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,
+   * we append the fieldName for the item type to make them unique, however, we then want to extract that
+   * first type to apply the correct preview.
+   */
+  const [actualType] = itemType.split('_');
+
   return (
     <LayoutDndProvider>
       <div style={layerStyles}>
         <div style={getItemStyles(initialOffset, currentOffset, mouseOffset)} className="col-md-2">
-          {[ItemTypes.EDIT_RELATION, ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(itemType) && (
+          {[ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(itemType) && (
             <CardPreview labelField={item.labelField} />
           )}
-          {itemType === ItemTypes.COMPONENT && (
-            <RepeatableComponentPreview displayedValue={item.displayedValue} />
+          {actualType === ItemTypes.COMPONENT && (
+            <ComponentPreview displayedValue={item.displayedValue} />
+          )}
+          {actualType === ItemTypes.DYNAMIC_ZONE && (
+            <ComponentPreview icon={item.icon} displayedValue={item.displayedValue} />
+          )}
+          {actualType === ItemTypes.RELATION && (
+            <RelationDragPreview
+              displayedValue={item.displayedValue}
+              status={item.status}
+              width={item.width}
+            />
           )}
         </div>
       </div>

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

@@ -1,27 +1,39 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, 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 { getEmptyImage } from 'react-dnd-html5-backend';
+
+import {
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+  IconButton,
+  Box,
+  Flex,
+  Stack,
+} from '@strapi/design-system';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { Trash, Drag } from '@strapi/icons';
 
-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 { useContentTypeLayout, useDragAndDrop } from '../../../hooks';
+import { composeRefs, getTrad, ItemTypes } from '../../../utils';
 
 import FieldComponent from '../../FieldComponent';
 
+const ActionsStack = styled(Stack)`
+  /* 
+    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;
 
@@ -46,17 +58,31 @@ const Rectangle = styled(Box)`
   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 = ({
   componentUid,
   formErrors,
   index,
   isFieldAllowed,
-  onMoveComponentDownClick,
-  onMoveComponentUpClick,
   name,
   onRemoveComponentClick,
-  showDownIcon,
-  showUpIcon,
+  onMoveComponent,
+  onGrabItem,
+  onDropItem,
+  onCancel,
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const { formatMessage } = useIntl();
@@ -103,71 +129,90 @@ const DynamicZoneComponent = ({
     setIsOpen((s) => !s);
   };
 
+  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =
+    useDragAndDrop(isFieldAllowed, {
+      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,
+      index,
+      item: {
+        displayedValue: `${friendlyName}${mainValue}`,
+        icon,
+      },
+      onMoveItem: onMoveComponent,
+      onGrabItem,
+      onDropItem,
+      onCancel,
+    });
+
+  useEffect(() => {
+    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
+  }, [dragPreviewRef, index]);
+
+  const composedBoxRefs = composeRefs(boxRef, dropRef);
+
+  const accordionActions = !isFieldAllowed ? null : (
+    <ActionsStack horizontal spacing={0} expanded={isOpen}>
+      <IconButtonCustom
+        noBorder
+        label={formatMessage(
+          {
+            id: getTrad('components.DynamicZone.delete-label'),
+            defaultMessage: 'Delete {name}',
+          },
+          { name: friendlyName }
+        )}
+        onClick={onRemoveComponentClick}
+      >
+        <Trash />
+      </IconButtonCustom>
+      <IconButton
+        forwardedAs="div"
+        role="button"
+        noBorder
+        tabIndex={0}
+        onClick={(e) => e.stopPropagation()}
+        data-handler-id={handlerId}
+        ref={dragRef}
+        label={formatMessage({
+          id: getTrad('components.DragHandle-label'),
+          defaultMessage: 'Drag',
+        })}
+        onKeyDown={handleKeyDown}
+      >
+        <Drag />
+      </IconButton>
+    </ActionsStack>
+  );
+
   return (
-    <Box>
+    <ComponentContainer as="li">
       <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 ref={composedBoxRefs} hasRadius>
+        {isDragging ? (
+          <Preview padding={6} background="primary100" />
+        ) : (
+          <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
+            <AccordionToggle
+              startIcon={icon && <FontAwesomeIcon icon={icon} />}
+              action={accordionActions}
+              title={`${friendlyName}${mainValue}`}
+              togglePosition="left"
+            />
+            <AccordionContent>
+              <AccordionContentRadius background="neutral0">
+                <FieldComponent
+                  componentUid={componentUid}
+                  icon={icon}
+                  name={`${name}.${index}`}
+                  isFromDynamicZone
+                />
+              </AccordionContentRadius>
+            </AccordionContent>
+          </Accordion>
+        )}
       </StyledBox>
-    </Box>
+    </ComponentContainer>
   );
 };
 
@@ -175,8 +220,9 @@ DynamicZoneComponent.defaultProps = {
   formErrors: {},
   index: 0,
   isFieldAllowed: true,
-  showDownIcon: true,
-  showUpIcon: true,
+  onGrabItem: undefined,
+  onDropItem: undefined,
+  onCancel: undefined,
 };
 
 DynamicZoneComponent.propTypes = {
@@ -185,11 +231,11 @@ DynamicZoneComponent.propTypes = {
   index: PropTypes.number,
   isFieldAllowed: PropTypes.bool,
   name: PropTypes.string.isRequired,
-  onMoveComponentDownClick: PropTypes.func.isRequired,
-  onMoveComponentUpClick: PropTypes.func.isRequired,
+  onGrabItem: PropTypes.func,
+  onDropItem: PropTypes.func,
+  onCancel: PropTypes.func,
+  onMoveComponent: PropTypes.func.isRequired,
   onRemoveComponentClick: PropTypes.func.isRequired,
-  showDownIcon: PropTypes.bool,
-  showUpIcon: PropTypes.bool,
 };
 
 export default DynamicZoneComponent;

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

@@ -2,9 +2,9 @@ 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 { Box, Stack, VisuallyHidden } from '@strapi/design-system';
 import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../utils';
 
@@ -27,14 +27,16 @@ const DynamicZone = ({
   isFieldAllowed,
   isFieldReadable,
   labelAction,
-  moveComponentUp,
-  moveComponentDown,
+  moveComponentField,
   removeComponentFromDynamicZone,
   dynamicDisplayedComponents,
   fieldSchema,
   metadatas,
 }) => {
   const [addComponentIsOpen, setAddComponentIsOpen] = useState(false);
+  const [liveText, setLiveText] = useState('');
+
+  const { formatMessage } = useIntl();
 
   const toggleNotification = useNotification();
   const { getComponentLayout, components } = useContentTypeLayout();
@@ -82,12 +84,76 @@ const DynamicZone = ({
     }
   };
 
-  const handleMoveComponentDown = (name, componentIndex) => () => {
-    moveComponentDown(name, componentIndex);
+  const handleMoveComponent = (newIndex, currentIndex) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.reorder'),
+          defaultMessage: '{item}, moved. New position in list: {position}.',
+        },
+        {
+          item: `${name}.${currentIndex}`,
+          position: getItemPos(newIndex),
+        }
+      )
+    );
+
+    moveComponentField({
+      name,
+      newIndex,
+      currentIndex,
+    });
   };
 
-  const handleMoveComponentUp = (name, componentIndex) => () => {
-    moveComponentUp(name, componentIndex);
+  /**
+   *
+   * @param {number} index
+   * @returns {string}
+   */
+  const getItemPos = (index) => `${index + 1} of ${dynamicDisplayedComponents.length}`;
+
+  const handleCancel = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.cancel-item'),
+          defaultMessage: '{item}, dropped. Re-order cancelled.',
+        },
+        {
+          item: `${name}.${index}`,
+        }
+      )
+    );
+  };
+
+  const handleGrabItem = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.grab-item'),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,
+        },
+        {
+          item: `${name}.${index}`,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  const handleDropItem = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.drop-item'),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`,
+        },
+        {
+          item: `${name}.${index}`,
+          position: getItemPos(index),
+        }
+      )
+    );
   };
 
   const handleRemoveComponent = (name, currentIndex) => () => {
@@ -105,6 +171,8 @@ const DynamicZone = ({
     );
   }
 
+  const ariaDescriptionId = `${name}-item-instructions`;
+
   return (
     <Stack spacing={6}>
       {dynamicDisplayedComponentsLength > 0 && (
@@ -117,27 +185,30 @@ const DynamicZone = ({
             numberOfComponents={dynamicDisplayedComponentsLength}
             required={fieldSchema.required || false}
           />
-          {dynamicDisplayedComponents.map((componentUid, index) => {
-            const showDownIcon = isFieldAllowed && index < dynamicDisplayedComponentsLength - 1;
-            const showUpIcon = isFieldAllowed && index > 0;
-
-            return (
+          <VisuallyHidden id={ariaDescriptionId}>
+            {formatMessage({
+              id: getTrad('dnd.instructions'),
+              defaultMessage: `Press spacebar to grab and re-order`,
+            })}
+          </VisuallyHidden>
+          <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
+          <ol aria-describedby={ariaDescriptionId}>
+            {dynamicDisplayedComponents.map(({ componentUid, id }, index) => (
               <DynamicZoneComponent
                 componentUid={componentUid}
                 formErrors={formErrors}
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}
+                key={`${componentUid}-${id}`}
                 index={index}
                 isFieldAllowed={isFieldAllowed}
-                onMoveComponentDownClick={handleMoveComponentDown(name, index)}
-                onMoveComponentUpClick={handleMoveComponentUp(name, index)}
                 name={name}
+                onMoveComponent={handleMoveComponent}
                 onRemoveComponentClick={handleRemoveComponent(name, index)}
-                showDownIcon={showDownIcon}
-                showUpIcon={showUpIcon}
+                onCancel={handleCancel}
+                onDropItem={handleDropItem}
+                onGrabItem={handleGrabItem}
               />
-            );
-          })}
+            ))}
+          </ol>
         </Box>
       )}
 
@@ -172,7 +243,12 @@ DynamicZone.defaultProps = {
 
 DynamicZone.propTypes = {
   addComponentToDynamicZone: PropTypes.func.isRequired,
-  dynamicDisplayedComponents: PropTypes.array,
+  dynamicDisplayedComponents: PropTypes.arrayOf(
+    PropTypes.shape({
+      componentUid: PropTypes.string.isRequired,
+      id: PropTypes.number.isRequired,
+    })
+  ),
   fieldSchema: PropTypes.shape({
     components: PropTypes.array.isRequired,
     max: PropTypes.number,
@@ -188,8 +264,7 @@ DynamicZone.propTypes = {
     description: PropTypes.string,
     label: PropTypes.string,
   }).isRequired,
-  moveComponentUp: PropTypes.func.isRequired,
-  moveComponentDown: PropTypes.func.isRequired,
+  moveComponentField: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   removeComponentFromDynamicZone: PropTypes.func.isRequired,
 };