@strapi/admin 4.0.0 → 4.0.1

package/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
@@ -11,6 +11,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import Pencil from '@strapi/icons/Pencil';
 import Cross from '@strapi/icons/Cross';
 import Drag from '@strapi/icons/Drag';
+import CardPreview from './CardPreview';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
 import { getTrad, ItemTypes } from '../../../utils';
 
@@ -38,7 +39,6 @@ const DragButton = styled(ActionButton)`
 const FieldContainer = styled(Flex)`
   max-height: ${32 / 16}rem;
   cursor: pointer;
-  opacity: ${({ isDragging }) => (isDragging ? 0 : 1)};
 
   svg {
     width: ${10 / 16}rem;
@@ -77,14 +77,18 @@ const FieldWrapper = styled(Box)`
 
 const DraggableCard = ({
   index,
+  isDraggingSibling,
   labelField,
   onClickEditField,
   onMoveField,
   onRemoveField,
   name,
+  setIsDraggingSibling,
 }) => {
   const { formatMessage } = useIntl();
-  const ref = useRef(null);
+  const dragRef = useRef(null);
+  const dropRef = useRef(null);
+  const [, forceRerenderAfterDnd] = useState(false);
   const editButtonRef = useRef();
   const cardEllipsisTitle = ellipsisCardTitle(labelField);
 
@@ -96,8 +100,8 @@ const DraggableCard = ({
 
   const [, drop] = useDrop({
     accept: ItemTypes.FIELD,
-    hover(item) {
-      if (!ref.current) {
+    hover(item, monitor) {
+      if (!dropRef.current) {
         return;
       }
       const dragIndex = item.index;
@@ -108,6 +112,27 @@ const DraggableCard = ({
         return;
       }
 
+      // Determine rectangle on screen
+      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+      // Get vertical middle
+      const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+      // Get pixels to the top
+      const hoverClientX = clientOffset.x - hoverBoundingRect.left;
+
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+      // Dragging downwards
+      if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
+        return;
+      }
+
       onMoveField(dragIndex, hoverIndex);
 
       item.index = hoverIndex;
@@ -122,86 +147,117 @@ const DraggableCard = ({
     collect: monitor => ({
       isDragging: monitor.isDragging(),
     }),
+    end: () => {
+      setIsDraggingSibling(false);
+    },
   });
 
   useEffect(() => {
-    preview(getEmptyImage(), { captureDraggingState: true });
+    preview(getEmptyImage(), { captureDraggingState: false });
   }, [preview]);
 
-  drag(drop(ref));
+  useEffect(() => {
+    if (isDragging) {
+      setIsDraggingSibling(true);
+    }
+  }, [isDragging, setIsDraggingSibling]);
+
+  // Effect in order to force a rerender after reordering the components
+  // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged
+  // anymore, this hack forces a rerender in order to apply the dragRef
+  useEffect(() => {
+    if (!isDraggingSibling) {
+      forceRerenderAfterDnd(prev => !prev);
+    }
+  }, [isDraggingSibling]);
+
+  // Create the refs
+  // We need 1 for the drop target
+  // 1 for the drag target
+  const refs = {
+    dragRef: drag(dragRef),
+    dropRef: drop(dropRef),
+  };
 
   return (
-    <FieldWrapper>
-      <FieldContainer
-        borderColor="neutral150"
-        background="neutral100"
-        hasRadius
-        justifyContent="space-between"
-        onClick={handleClickEditRow}
-        isDragging={isDragging}
-      >
-        <Stack horizontal size={3}>
-          <DragButton
-            aria-label={formatMessage(
-              {
-                id: getTrad('components.DraggableCard.move.field'),
-                defaultMessage: 'Move {item}',
-              },
-              { item: name }
-            )}
-            onClick={e => e.stopPropagation()}
-            ref={ref}
-            type="button"
-          >
-            <Drag />
-          </DragButton>
-          <Typography fontWeight="bold">{cardEllipsisTitle}</Typography>
-        </Stack>
-        <Flex paddingLeft={3}>
-          <ActionButton
-            ref={editButtonRef}
-            onClick={e => {
-              e.stopPropagation();
-              onClickEditField(name);
-            }}
-            aria-label={formatMessage(
-              {
-                id: getTrad('components.DraggableCard.edit.field'),
-                defaultMessage: 'Edit {item}',
-              },
-              { item: name }
-            )}
-            type="button"
-          >
-            <Pencil />
-          </ActionButton>
-          <ActionButton
-            onClick={onRemoveField}
-            data-testid={`delete-${name}`}
-            aria-label={formatMessage(
-              {
-                id: getTrad('components.DraggableCard.delete.field'),
-                defaultMessage: 'Delete {item}',
-              },
-              { item: name }
-            )}
-            type="button"
-          >
-            <Cross />
-          </ActionButton>
-        </Flex>
-      </FieldContainer>
+    <FieldWrapper ref={refs ? refs.dropRef : null}>
+      {isDragging && <CardPreview transparent labelField={cardEllipsisTitle} />}
+      {!isDragging && isDraggingSibling && <CardPreview isSibling labelField={cardEllipsisTitle} />}
+
+      {!isDragging && !isDraggingSibling && (
+        <FieldContainer
+          borderColor="neutral150"
+          background="neutral100"
+          hasRadius
+          justifyContent="space-between"
+          onClick={handleClickEditRow}
+          isDragging={isDragging}
+        >
+          <Stack horizontal size={3}>
+            <DragButton
+              aria-label={formatMessage(
+                {
+                  id: getTrad('components.DraggableCard.move.field'),
+                  defaultMessage: 'Move {item}',
+                },
+                { item: name }
+              )}
+              onClick={e => e.stopPropagation()}
+              ref={refs.dragRef}
+              type="button"
+            >
+              <Drag />
+            </DragButton>
+            <Typography fontWeight="bold">{cardEllipsisTitle}</Typography>
+          </Stack>
+          <Flex paddingLeft={3}>
+            <ActionButton
+              ref={editButtonRef}
+              onClick={e => {
+                e.stopPropagation();
+                onClickEditField(name);
+              }}
+              aria-label={formatMessage(
+                {
+                  id: getTrad('components.DraggableCard.edit.field'),
+                  defaultMessage: 'Edit {item}',
+                },
+                { item: name }
+              )}
+              type="button"
+            >
+              <Pencil />
+            </ActionButton>
+            <ActionButton
+              onClick={onRemoveField}
+              data-testid={`delete-${name}`}
+              aria-label={formatMessage(
+                {
+                  id: getTrad('components.DraggableCard.delete.field'),
+                  defaultMessage: 'Delete {item}',
+                },
+                { item: name }
+              )}
+              type="button"
+            >
+              <Cross />
+            </ActionButton>
+          </Flex>
+        </FieldContainer>
+      )}
     </FieldWrapper>
   );
 };
 
 DraggableCard.propTypes = {
   index: PropTypes.number.isRequired,
+  isDraggingSibling: PropTypes.bool.isRequired,
   labelField: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   onClickEditField: PropTypes.func.isRequired,
   onMoveField: PropTypes.func.isRequired,
   onRemoveField: PropTypes.func.isRequired,
+  setIsDraggingSibling: PropTypes.func.isRequired,
 };
 
 export default DraggableCard;

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -35,6 +35,7 @@ const SortDisplayedFields = ({
   onRemoveField,
 }) => {
   const { formatMessage } = useIntl();
+  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
 
   return (
     <>
@@ -61,11 +62,13 @@ const SortDisplayedFields = ({
               <DraggableCard
                 key={field}
                 index={index}
+                isDraggingSibling={isDraggingSibling}
                 onMoveField={onMoveField}
                 onClickEditField={onClickEditField}
                 onRemoveField={e => onRemoveField(e, index)}
                 name={field}
                 labelField={metadatas[field].list.label || field}
+                setIsDraggingSibling={setIsDraggingSibling}
               />
             ))}
           </Stack>

package/admin/src/content-manager/pages/ListSettingsView/index.js

@@ -191,7 +191,7 @@ const ListSettingsView = ({ layout, slug }) => {
           <HeaderLayout
             navigationAction={
               <Link startIcon={<ArrowLeft />} to={goBackUrl} id="go-back">
-                {formatMessage({ id: 'app.components.go-back', defaultMessage: 'Go back' })}
+                {formatMessage({ id: 'app.components.go-back', defaultMessage: 'Back' })}
               </Link>
             }
             primaryAction={

package/admin/src/content-manager/pages/ListView/index.js

@@ -24,6 +24,8 @@ import { Box } from '@strapi/design-system/Box';
 import { ActionLayout, ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Button } from '@strapi/design-system/Button';
+import { Link } from '@strapi/design-system/Link';
+import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Plus from '@strapi/icons/Plus';
 import Cog from '@strapi/icons/Cog';
 import axios from 'axios';
@@ -234,29 +236,43 @@ function ListView({
       )
     : null;
 
-  const createAction = canCreate ? (
-    <Button
-      onClick={() => {
-        const trackerProperty = hasDraftAndPublish ? { status: 'draft' } : {};
-
-        trackUsageRef.current('willCreateEntry', trackerProperty);
-        push({
-          pathname: `${pathname}/create`,
-          search: query.plugins ? pluginsQueryParams : '',
-        });
-      }}
-      startIcon={<Plus />}
-    >
-      {formatMessage({
-        id: getTrad('HeaderLayout.button.label-add-entry'),
-        defaultMessage: 'Add new entry',
-      })}
-    </Button>
-  ) : null;
+  const getCreateAction = props =>
+    canCreate ? (
+      <Button
+        {...props}
+        onClick={() => {
+          const trackerProperty = hasDraftAndPublish ? { status: 'draft' } : {};
+
+          trackUsageRef.current('willCreateEntry', trackerProperty);
+          push({
+            pathname: `${pathname}/create`,
+            search: query.plugins ? pluginsQueryParams : '',
+          });
+        }}
+        startIcon={<Plus />}
+      >
+        {formatMessage({
+          id: getTrad('HeaderLayout.button.label-add-entry'),
+          defaultMessage: 'Create new entry',
+        })}
+      </Button>
+    ) : null;
 
   return (
     <Main aria-busy={isLoading}>
-      <HeaderLayout primaryAction={createAction} subtitle={subtitle} title={headerLayoutTitle} />
+      <HeaderLayout
+        primaryAction={getCreateAction()}
+        subtitle={subtitle}
+        title={headerLayoutTitle}
+        navigationAction={
+          <Link startIcon={<ArrowLeft />} to="/content-manager/">
+            {formatMessage({
+              id: 'app.components.HeaderLayout.link.go-back',
+              defaultMessage: 'Back',
+            })}
+          </Link>
+        }
+      />
       {!canRead && (
         <ActionLayout endActions={<InjectionZone area="contentManager.listView.actions" />} />
       )}
@@ -320,6 +336,7 @@ function ListView({
               // FIXME: remove the layout props drilling
               layout={layout}
               rows={data}
+              action={getCreateAction({ variant: 'secondary' })}
             />
             <PaginationFooter pagination={{ pageCount: pagination?.pageCount || 1 }} />
           </>

package/admin/src/hooks/useSettingsMenu/utils/defaultGlobalLinks.js

@@ -2,7 +2,7 @@ import adminPermissions from '../../../permissions';
 
 const defaultGlobalLinks = [
   {
-    intlLabel: { id: 'Settings.application.title', defaultMessage: 'Application' },
+    intlLabel: { id: 'Settings.application.title', defaultMessage: 'Overview' },
     to: '/settings/application-infos',
     id: '000-application-infos',
     isDisplayed: false,

package/admin/src/pages/App/utils/unique-identifier.js

@@ -4,7 +4,9 @@ const getUniqueIdentifier = async () => {
   const fp = await FingerprintJS.load();
   const result = await fp.get();
 
-  return result.visitorId;
+  const deviceId = `web-fingerprint-${result.visitorId}`;
+
+  return deviceId;
 };
 
 export default getUniqueIdentifier;

package/admin/src/pages/AuthPage/index.js

@@ -1,6 +1,8 @@
 import React, { useEffect, useReducer } from 'react';
 import axios from 'axios';
-import { camelCase, get, omit } from 'lodash';
+import camelCase from 'lodash/camelCase';
+import get from 'lodash/get';
+import omit from 'lodash/omit';
 import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
 import { auth, useQuery } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
@@ -117,7 +119,11 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
       push('/');
     } catch (err) {
       if (err.response) {
-        const errorMessage = get(err, ['response', 'data', 'message'], 'Something went wrong');
+        const errorMessage = get(
+          err,
+          ['response', 'data', 'error', 'message'],
+          'Something went wrong'
+        );
 
         if (camelCase(errorMessage).toLowerCase() === 'usernotactive') {
           push('/auth/oops');

package/admin/src/pages/ProfilePage/index.js

@@ -409,12 +409,38 @@ const ProfilePage = () => {
                       paddingRight={7}
                     >
                       <Stack size={4}>
-                        <Typography variant="delta" as="h2">
-                          {formatMessage({
-                            id: 'Settings.profile.form.section.experience.title',
-                            defaultMessage: 'Experience',
-                          })}
-                        </Typography>
+                        <Stack size={1}>
+                          <Typography variant="delta" as="h2">
+                            {formatMessage({
+                              id: 'Settings.profile.form.section.experience.title',
+                              defaultMessage: 'Experience',
+                            })}
+                          </Typography>
+                          <Typography>
+                            {formatMessage(
+                              {
+                                id:
+                                  'Settings.profile.form.section.experience.interfaceLanguageHelp',
+                                defaultMessage:
+                                  'Selection will change the interface language only for you. Please refer to this {documentation} to make other languages available for your team.',
+                              },
+                              {
+                                documentation: (
+                                  <a
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
+                                  >
+                                    {formatMessage({
+                                      id: 'Settings.profile.form.section.experience.documentation',
+                                      defaultMessage: 'documentation',
+                                    })}
+                                  </a>
+                                ),
+                              }
+                            )}
+                          </Typography>
+                        </Stack>
                         <Grid gap={5}>
                           <GridItem s={12} col={6}>
                             <Select

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -165,7 +165,7 @@ const ApiTokenCreateView = () => {
                   <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
                     {formatMessage({
                       id: 'app.components.go-back',
-                      defaultMessage: 'Go back',
+                      defaultMessage: 'Back',
                     })}
                   </Link>
                 }
@@ -185,7 +185,7 @@ const ApiTokenCreateView = () => {
                     <Stack size={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
-                          id: 'app.components.Users.ModalCreateBody.block-title.details',
+                          id: 'Settings.apiTokens.details',
                           defaultMessage: 'Details',
                         })}
                       </Typography>

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -26,10 +26,10 @@ const ApplicationInfosPage = () => {
       <SettingsPageTitle name="Application" />
       <Main>
         <HeaderLayout
-          title={formatMessage({ id: 'Settings.application.title', defaultMessage: 'Application' })}
+          title={formatMessage({ id: 'Settings.application.title', defaultMessage: 'Overview' })}
           subtitle={formatMessage({
             id: 'Settings.application.description',
-            defaultMessage: "See your project's details",
+            defaultMessage: 'Administration panel’s global information',
           })}
         />
         <ContentLayout>
@@ -45,8 +45,8 @@ const ApplicationInfosPage = () => {
             <Stack size={5}>
               <Typography variant="delta" as="h3">
                 {formatMessage({
-                  id: 'Settings.application.information',
-                  defaultMessage: 'Information',
+                  id: 'Settings.application.details',
+                  defaultMessage: 'Details',
                 })}
               </Typography>
 
@@ -54,11 +54,24 @@ const ApplicationInfosPage = () => {
                 <GridItem col={6} s={12}>
                   <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
-                      id: 'Settings.application.details',
-                      defaultMessage: 'details',
+                      id: 'Settings.application.strapiVersion',
+                      defaultMessage: 'strapi version',
                     })}
                   </Typography>
                   <Typography as="p">v{strapiVersion}</Typography>
+                  <Link
+                    href={
+                      appInfos.communityEdition
+                        ? 'https://discord.strapi.io'
+                        : 'https://support.strapi.io/support/home'
+                    }
+                    endIcon={<ExternalLink />}
+                  >
+                    {formatMessage({
+                      id: 'Settings.application.get-help',
+                      defaultMessage: 'Get help',
+                    })}
+                  </Link>
                 </GridItem>
                 <GridItem col={6} s={12}>
                   <Typography variant="sigma" textColor="neutral600">
@@ -96,7 +109,7 @@ const ApplicationInfosPage = () => {
                   <Link href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
                     {formatMessage({
                       id: 'Settings.application.link-pricing',
-                      defaultMessage: 'See all pricing',
+                      defaultMessage: 'See all pricing plans',
                     })}
                   </Link>
                 </GridItem>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -135,7 +135,7 @@ const EditPage = () => {
                   <Link startIcon={<ArrowLeft />} to="/settings/roles">
                     {formatMessage({
                       id: 'app.components.go-back',
-                      defaultMessage: 'Go back',
+                      defaultMessage: 'Back',
                     })}
                   </Link>
                 }

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -150,7 +150,7 @@ const EditPage = ({ canUpdate }) => {
             <Link startIcon={<ArrowLeft />} to="/settings/users?pageSize=10&page=1&sort=firstname">
               {formatMessage({
                 id: 'app.components.go-back',
-                defaultMessage: 'Go back',
+                defaultMessage: 'Back',
               })}
             </Link>
           }
@@ -194,7 +194,7 @@ const EditPage = ({ canUpdate }) => {
                   >
                     {formatMessage({
                       id: 'app.components.go-back',
-                      defaultMessage: 'Go back',
+                      defaultMessage: 'Back',
                     })}
                   </Link>
                 }
@@ -254,7 +254,7 @@ const EditPage = ({ canUpdate }) => {
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'app.components.Users.ModalCreateBody.block-title.login',
-                          defaultMessage: 'Login settings',
+                          defaultMessage: "User's role",
                         })}
                       </Typography>
                       <Grid gap={5}>

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -58,7 +58,7 @@ const ModalForm = ({ queryName, onToggle }) => {
 
   const headerTitle = formatMessage({
     id: 'Settings.permissions.users.create',
-    defaultMessage: 'Create new user',
+    defaultMessage: 'Invite new user',
   });
 
   const handleSubmit = async (body, { setErrors }) => {
@@ -118,7 +118,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                     <Typography variant="beta" as="h2">
                       {formatMessage({
                         id: 'app.components.Users.ModalCreateBody.block-title.details',
-                        defaultMessage: 'Details',
+                        defaultMessage: 'User details',
                       })}
                     </Typography>
                     <Box paddingTop={4}>
@@ -147,7 +147,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                     <Typography variant="beta" as="h2">
                       {formatMessage({
                         id: 'app.components.Users.ModalCreateBody.block-title.login',
-                        defaultMessage: 'Login settings',
+                        defaultMessage: "User's role",
                       })}
                     </Typography>
                     <Box paddingTop={4}>

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/stepper.js

@@ -2,7 +2,7 @@ const stepper = {
   create: {
     buttonSubmitLabel: {
       id: 'app.containers.Users.ModalForm.footer.button-success',
-      defaultMessage: 'Create user',
+      defaultMessage: 'Invite user',
     },
     isDisabled: false,
     next: 'magic-link',