@strapi/admin 4.6.0 → 4.6.2

package/admin/src/content-manager/components/DynamicTable/CellContent/SingleComponent/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Tooltip } from '@strapi/design-system/Tooltip';
-import { Typography } from '@strapi/design-system/Typography';
+import { Tooltip, Typography } from '@strapi/design-system';
 
 import CellValue from '../CellValue';
 

package/admin/src/content-manager/components/DynamicTable/CellContent/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tooltip } from '@strapi/design-system/Tooltip';
+import { Typography, Tooltip } from '@strapi/design-system';
 import Media from './Media';
 import MultipleMedias from './MultipleMedias';
 import RelationMultiple from './RelationMultiple';

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Trash from '@strapi/icons/Trash';
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Stack,
+  Flex,
+  Typography,
+  Button,
+} from '@strapi/design-system';
+import { ExclamationMarkCircle, Trash } from '@strapi/icons';
 import InjectionZoneList from '../../InjectionZoneList';
 
 const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, onConfirm }) => {

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Trash from '@strapi/icons/Trash';
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Stack,
+  Flex,
+  Typography,
+  Button,
+} from '@strapi/design-system';
+import { ExclamationMarkCircle, Trash } from '@strapi/icons';
 import InjectionZoneList from '../../InjectionZoneList';
 import { getTrad } from '../../../utils';
 

package/admin/src/content-manager/components/DynamicTable/TableRows/index.js

@@ -3,15 +3,9 @@ import PropTypes from 'prop-types';
 import { Link, useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Tbody, Td, Tr } from '@strapi/design-system/Table';
-import { Flex } from '@strapi/design-system/Flex';
-
-import Trash from '@strapi/icons/Trash';
-import Duplicate from '@strapi/icons/Duplicate';
-import Pencil from '@strapi/icons/Pencil';
+import { BaseCheckbox, Box, IconButton, Tbody, Td, Tr, Flex } from '@strapi/design-system';
+
+import { Trash, Duplicate, Pencil } from '@strapi/icons';
 
 import { useTracking, stopPropagation, onRowClick } from '@strapi/helper-plugin';
 

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

@@ -5,8 +5,7 @@ import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
-import { Status } from '@strapi/design-system/Status';
-import { Typography } from '@strapi/design-system/Typography';
+import { Status, Typography } from '@strapi/design-system';
 
 import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';

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

@@ -8,11 +8,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import PlusCircle from '@strapi/icons/PlusCircle';
-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 { PlusCircle } from '@strapi/icons';
+import { BaseButton, Box, Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 

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

@@ -8,9 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Typography, Stack } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 
 import { ComponentIcon } from '../../ComponentIcon';

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { Box } from '@strapi/design-system/Box';
+import { Accordion, AccordionToggle, AccordionContent, Box } from '@strapi/design-system';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 

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

@@ -2,10 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import groupBy from 'lodash/groupBy';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-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 { KeyboardNavigable, Box, Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 import { useContentTypeLayout } from '../../../hooks';

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

@@ -9,9 +9,7 @@ import { useIntl } from 'react-intl';
 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 { Box, Flex, Typography } from '@strapi/design-system';
 
 const StyledBox = styled(Box)`
   border-radius: ${pxToRem(26)};

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

@@ -8,6 +8,7 @@ import uniqBy from 'lodash/uniqBy';
 import merge from 'lodash/merge';
 import castArray from 'lodash/castArray';
 import isNil from 'lodash/isNil';
+import { generateNKeysBetween } from 'fractional-indexing';
 
 import {
   findLeafByPathAndReplace,
@@ -155,17 +156,33 @@ const reducer = (state, action) =>
         const initialDataRelations = get(state, initialDataPath);
         const modifiedDataRelations = get(state, modifiedDataPath);
 
-        /**
-         * Check if the values we're loading are already in initial
-         * data if they are then we don't need to load them at all
-         */
         const valuesToLoad = value.filter((relation) => {
           return !initialDataRelations.some((initialDataRelation) => {
             return initialDataRelation.id === relation.id;
           });
         });
 
-        set(draftState, initialDataPath, uniqBy([...valuesToLoad, ...initialDataRelations], 'id'));
+        const keys = generateNKeysBetween(
+          null,
+          modifiedDataRelations[0]?.__temp_key__,
+          valuesToLoad.length
+        );
+
+        /**
+         * Check if the values we're loading are already in initial
+         * data if they are then we don't need to load them at all
+         */
+
+        const valuesWithKeys = valuesToLoad.map((relation, index) => ({
+          ...relation,
+          __temp_key__: keys[index],
+        }));
+
+        set(
+          draftState,
+          initialDataPath,
+          uniqBy([...valuesWithKeys, ...initialDataRelations], 'id')
+        );
 
         /**
          * We need to set the value also on modifiedData, because initialData
@@ -175,7 +192,7 @@ const reducer = (state, action) =>
         set(
           draftState,
           modifiedDataPath,
-          uniqBy([...valuesToLoad, ...modifiedDataRelations], 'id')
+          uniqBy([...valuesWithKeys, ...modifiedDataRelations], 'id')
         );
 
         break;
@@ -192,7 +209,9 @@ const reducer = (state, action) =>
           set(draftState, path, [value]);
         } else {
           const modifiedDataRelations = get(state, path);
-          const newRelations = [...modifiedDataRelations, value];
+          const [key] = generateNKeysBetween(modifiedDataRelations.at(-1)?.__temp_key__, null, 1);
+
+          const newRelations = [...modifiedDataRelations, { ...value, __temp_key__: key }];
           set(draftState, path, newRelations);
         }
 
@@ -219,8 +238,19 @@ const reducer = (state, action) =>
 
         const newRelations = [...modifiedDataRelations];
 
-        newRelations.splice(oldIndex, 1);
-        newRelations.splice(newIndex, 0, currentItem);
+        if (action.type === 'REORDER_RELATION') {
+          const [newKey] = generateNKeysBetween(
+            modifiedDataRelations[newIndex - 1]?.__temp_key__,
+            modifiedDataRelations[newIndex]?.__temp_key__,
+            1
+          );
+
+          newRelations.splice(oldIndex, 1);
+          newRelations.splice(newIndex, 0, { ...currentItem, __temp_key__: newKey });
+        } else {
+          newRelations.splice(oldIndex, 1);
+          newRelations.splice(newIndex, 0, currentItem);
+        }
 
         set(draftState, path, newRelations);
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -95,28 +95,22 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
            */
           let actualOldValue = get(rootServerState, trueInitialDataPath, []);
 
-          const valuesWithPositions = value.map((relation, index, allRelations) => {
-            const nextRelation = allRelations[index + 1];
-
-            if (nextRelation) {
-              return { ...relation, position: { before: nextRelation.id } };
-            }
-
-            return { ...relation, position: { end: true } };
-          });
-
           /**
            * Instead of the full relation object, we only want to send its ID
            *  connectedRelations are the items that are in the browserState
            * array but not in the serverState
            */
-          const connectedRelations = valuesWithPositions.reduce((acc, relation, currentIndex) => {
-            const indexOfRelationOnServer = actualOldValue.findIndex(
+          const connectedRelations = value.reduce((acc, relation, currentIndex, array) => {
+            const relationOnServer = actualOldValue.find(
               (oldRelation) => oldRelation.id === relation.id
             );
 
-            if (indexOfRelationOnServer === -1 || indexOfRelationOnServer !== currentIndex) {
-              return [...acc, { id: relation.id, position: relation.position }];
+            const relationInFront = array[currentIndex + 1];
+
+            if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {
+              const position = relationInFront ? { before: relationInFront.id } : { end: true };
+
+              return [...acc, { id: relation.id, position }];
             }
 
             return acc;
@@ -127,7 +121,7 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
            * are no longer in the browserState
            */
           const disconnectedRelations = actualOldValue.reduce((acc, relation) => {
-            if (!valuesWithPositions.find((newRelation) => newRelation.id === relation.id)) {
+            if (!value.find((newRelation) => newRelation.id === relation.id)) {
               return [...acc, { id: relation.id }];
             }
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/findLeafByPathAndReplace.js

@@ -21,11 +21,9 @@ export const findLeafByPathAndReplace = (endpath, replaceWith) => {
 
     /**
      * If this is the last item in the array of paths
-     * and the current path is not undefined in the accumulator
      * then we assume it's a leaf and we can replace it.
      */
-
-    if (ind === currentArr.length - 1 && endpath === curr && acc[curr] !== undefined) {
+    if (ind === currentArr.length - 1 && endpath === curr) {
       set(acc, curr, replaceWith);
 
       return acc;

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -216,10 +216,6 @@ const createYupSchemaAttribute = (type, validations, options) => {
     schema = yup
       .mixed(errorsTrads.json)
       .test('isJSON', errorsTrads.json, (value) => {
-        if (value === undefined) {
-          return true;
-        }
-
         try {
           JSON.parse(value);
 
@@ -228,7 +224,12 @@ const createYupSchemaAttribute = (type, validations, options) => {
           return false;
         }
       })
-      .nullable();
+      .nullable()
+      .test('required', errorsTrads.required, (value) => {
+        if (validations.required && !value.length) return false;
+
+        return true;
+      });
   }
 
   if (type === 'email') {

package/admin/src/content-manager/components/FieldComponent/Label.js

@@ -2,9 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Flex, Typography } from '@strapi/design-system';
 
 const LabelAction = styled(Box)`
   svg path {

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

@@ -6,11 +6,8 @@ import isEqual from 'react-fast-compare';
 import { useIntl } from 'react-intl';
 
 import { NotAllowedInput } from '@strapi/helper-plugin';
-import Trash from '@strapi/icons/Trash';
-import { Box } from '@strapi/design-system/Box';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
+import { Trash } from '@strapi/icons';
+import { Box, IconButton, Flex, Stack } from '@strapi/design-system';
 
 import connect from './utils/connect';
 import select from './utils/select';

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

@@ -1,19 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import { useCustomFields } from '@strapi/helper-plugin';
-import Date from '@strapi/icons/Date';
-import Boolean from '@strapi/icons/Boolean';
-import Email from '@strapi/icons/Email';
-import Enumeration from '@strapi/icons/Enumeration';
-import Media from '@strapi/icons/Media';
-import Relation from '@strapi/icons/Relation';
-import Text from '@strapi/icons/Text';
-import Uid from '@strapi/icons/Uid';
-import Number from '@strapi/icons/Number';
-import Json from '@strapi/icons/Json';
-import Component from '@strapi/icons/Component';
-import DynamicZone from '@strapi/icons/DynamicZone';
+import {
+  Date,
+  Boolean,
+  Email,
+  Enumeration,
+  Media,
+  Relation,
+  Text,
+  Uid,
+  Number,
+  Json,
+  Component,
+  DynamicZone,
+} from '@strapi/icons';
 
 const iconByTypes = {
   biginteger: <Number />,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
+import { Typography } from '@strapi/design-system';
 
 export const Hint = ({ id, error, name, hint }) => {
   if (hint.length === 0 || error) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import { useInjectionZone } from '../../../shared/hooks';
 
 const InjectionZoneList = ({ area, ...props }) => {

package/admin/src/content-manager/components/InputUID/endActionStyle.js

@@ -1,7 +1,5 @@
 import styled, { keyframes } from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { FieldAction } from '@strapi/design-system/Field';
+import { Box, Flex, FieldAction } from '@strapi/design-system';
 
 export const EndActionWrapper = styled(Box)`
   position: relative;

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

@@ -1,15 +1,10 @@
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Typography } from '@strapi/design-system/Typography';
-import Refresh from '@strapi/icons/Refresh';
-import CheckCircle from '@strapi/icons/CheckCircle';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Loader from '@strapi/icons/Loader';
-import { axiosInstance } from '../../../core/utils';
+import { TextInput, Typography } from '@strapi/design-system';
+import { Refresh, CheckCircle, ExclamationMarkCircle, Loader } from '@strapi/icons';
 import { getRequestUrl } from '../../utils';
 import useDebounce from './useDebounce';
 import UID_REGEX from './regex';
@@ -46,6 +41,7 @@ const InputUID = ({
   const debouncedTargetFieldValue = useDebounce(modifiedData[attribute.targetField], 300);
   const [isCustomized, setIsCustomized] = useState(false);
   const [regenerateLabel, setRegenerateLabel] = useState(null);
+  const { post } = useFetchClient();
 
   const label = intlLabel.id
     ? formatMessage(
@@ -67,7 +63,7 @@ const InputUID = ({
     try {
       const {
         data: { data },
-      } = await axiosInstance.post(requestURL, {
+      } = await post(requestURL, {
         contentTypeUID,
         field: name,
         data: modifiedData,
@@ -89,7 +85,7 @@ const InputUID = ({
     }
 
     try {
-      const { data } = await axiosInstance.post(requestURL, {
+      const { data } = await post(requestURL, {
         contentTypeUID,
         field: name,
         value: value ? value.trim() : '',

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

@@ -9,7 +9,6 @@ import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
-import InputJSON from '../InputJSON';
 import InputUID from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 
@@ -250,7 +249,6 @@ function Inputs({
   }
 
   const customInputs = {
-    json: InputJSON,
     uid: InputUID,
     media: fields.media,
     wysiwyg: Wysiwyg,

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

@@ -3,9 +3,7 @@
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Grid, GridItem, Stack } from '@strapi/design-system';
 import { useContentTypeLayout } from '../../hooks';
 import FieldComponent from '../FieldComponent';
 import Inputs from '../Inputs';

package/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -4,18 +4,22 @@ import styled from 'styled-components';
 import { FixedSizeList as List } from 'react-window';
 
 import { ReactSelect } from '@strapi/helper-plugin';
-import { Status } from '@strapi/design-system/Status';
-import { Box } from '@strapi/design-system/Box';
-import { Link } from '@strapi/design-system/Link';
-import { Icon } from '@strapi/design-system/Icon';
-import { FieldLabel, FieldError, FieldHint, Field } from '@strapi/design-system/Field';
-import { TextButton } from '@strapi/design-system/TextButton';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tooltip } from '@strapi/design-system/Tooltip';
-import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
-
-import Cross from '@strapi/icons/Cross';
-import Refresh from '@strapi/icons/Refresh';
+import {
+  Status,
+  Box,
+  Link,
+  Icon,
+  FieldLabel,
+  FieldError,
+  FieldHint,
+  Field,
+  TextButton,
+  Typography,
+  Tooltip,
+  VisuallyHidden,
+} from '@strapi/design-system';
+
+import { Cross, Refresh } from '@strapi/icons';
 
 import { Relation } from './components/Relation';
 import { RelationItem } from './components/RelationItem';

package/admin/src/content-manager/components/RelationInput/components/Option.js

@@ -5,8 +5,7 @@ import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 
 import { pxToRem } from '@strapi/helper-plugin';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 

package/admin/src/content-manager/components/RelationInput/components/Relation.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
+import { Stack, Flex } from '@strapi/design-system';
 
 export const Relation = ({
   children,

package/admin/src/content-manager/components/RelationInput/components/RelationList.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 
 const ShadowBox = styled(Box)`
   position: relative;