@strapi/admin 4.5.4 → 4.6.0-beta.0

package/admin/src/components/AuthenticatedApp/index.js

@@ -20,7 +20,7 @@ import {
   fetchUserRoles,
 } from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
-import { getFullName, hashAdminUserEmail } from '../../utils';
+import { getFullName } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 
@@ -31,7 +31,6 @@ const AuthenticatedApp = () => {
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
-  const [userId, setUserId] = useState(null);
   const { showReleaseNotification } = useConfigurations();
   const [
     { data: appInfos, status },
@@ -72,15 +71,6 @@ const AuthenticatedApp = () => {
     }
   }, [userRoles, appInfos]);
 
-  useEffect(() => {
-    const getUserId = async () => {
-      const userId = await hashAdminUserEmail(userInfo);
-      setUserId(userId);
-    };
-
-    getUserId();
-  }, [userInfo]);
-
   // We don't need to wait for the release query to be fetched before rendering the plugins
   // however, we need the appInfos and the permissions
   const shouldShowNotDependentQueriesLoader =
@@ -91,13 +81,12 @@ const AuthenticatedApp = () => {
   const appInfosValue = useMemo(() => {
     return {
       ...appInfos,
-      userId,
       latestStrapiReleaseTag: tag_name,
       setUserDisplayName,
       shouldUpdateStrapi,
       userDisplayName,
     };
-  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName, userId]);
+  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName]);
 
   if (shouldShowLoader) {
     return <LoadingIndicatorPage />;

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={icon && <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;