@strapi/admin 4.6.1 → 4.6.2

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/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

@@ -3,12 +3,8 @@ import PropTypes from 'prop-types';
 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 { 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';

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;

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

@@ -8,6 +8,7 @@ import {
   useQueryParams,
   useNotification,
   useGuidedTour,
+  useAPIErrorHandler,
   useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
@@ -39,6 +40,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const searchToSend = buildQueryString(query);
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
   const fetchClient = useFetchClient();
   const { post, put, del } = fetchClient;
 
@@ -151,19 +153,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
   const displayErrors = useCallback(
     (err) => {
-      const errorPayload = err.response.data;
-      let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
-
-      // TODO handle errors correctly when back-end ready
-      if (Array.isArray(errorMessage)) {
-        errorMessage = get(errorMessage, ['0', 'messages', '0', 'id']);
-      }
-
-      if (typeof errorMessage === 'string') {
-        toggleNotification({ type: 'warning', message: errorMessage });
-      }
+      toggleNotification({ type: 'warning', message: formatAPIError(err) });
     },
-    [toggleNotification]
+    [toggleNotification, formatAPIError]
   );
 
   const onDelete = useCallback(

package/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import Expand from '@strapi/icons/Expand';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Expand } from '@strapi/icons';
 import { ExpandButton } from './WysiwygStyles';
 
 const WysiwygFooter = ({ onToggleExpand }) => {

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -1,24 +1,30 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { IconButtonGroup } from '@strapi/design-system/IconButton';
-import { Option, Select } from '@strapi/design-system/Select';
-import { Popover } from '@strapi/design-system/Popover';
-import { Flex } from '@strapi/design-system/Flex';
-import Bold from '@strapi/icons/Bold';
-import Italic from '@strapi/icons/Italic';
-import Underline from '@strapi/icons/Underline';
-import StrikeThrough from '@strapi/icons/StrikeThrough';
-import BulletList from '@strapi/icons/BulletList';
-import NumberList from '@strapi/icons/NumberList';
-import Code from '@strapi/icons/Code';
-import Image from '@strapi/icons/Picture';
-import Link from '@strapi/icons/Link';
-import Quote from '@strapi/icons/Quote';
-import More from '@strapi/icons/More';
+import {
+  FocusTrap,
+  Box,
+  Button,
+  IconButtonGroup,
+  Option,
+  Select,
+  Popover,
+  Flex,
+} from '@strapi/design-system';
+import {
+  Bold,
+  Italic,
+  Underline,
+  StrikeThrough,
+  BulletList,
+  NumberList,
+  Code,
+  Picture as Image,
+  Link,
+  Quote,
+  More,
+} from '@strapi/icons';
+
 import {
   MainButtons,
   CustomIconButton,

package/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-import { IconButtonGroup, IconButton } from '@strapi/design-system/IconButton';
-import { BaseButton } from '@strapi/design-system/BaseButton';
+import { IconButtonGroup, IconButton, BaseButton } from '@strapi/design-system';
 
 // NAV BUTTONS
 export const CustomIconButton = styled(IconButton)`

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

@@ -2,9 +2,7 @@ import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
+import { Typography, Box, Stack } from '@strapi/design-system';
 import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
 import Editor from './Editor';
 import WysiwygNav from './WysiwygNav';

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -15,7 +15,7 @@ import {
   SubNavSection,
   SubNavSections,
   SubNavLink,
-} from '@strapi/design-system/v2/SubNav';
+} from '@strapi/design-system/v2';
 
 import { matchByTitle } from './utils';
 import getTrad from '../../../utils/getTrad';

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

@@ -7,8 +7,7 @@ import {
   NotFound,
   useGuidedTour,
 } from '@strapi/helper-plugin';
-import { Layout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
+import { Layout, HeaderLayout, Main } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import sortBy from 'lodash/sortBy';
 import permissions from '../../../permissions';

package/admin/src/content-manager/pages/App/useModels.js

@@ -6,7 +6,7 @@ import {
 } from '@strapi/helper-plugin';
 import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { useNotifyAT } from '@strapi/design-system';
 import axios from 'axios';
 import { useIntl } from 'react-intl';
 import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';

package/admin/src/content-manager/pages/App/utils/generateModelsLinks.js

@@ -1,4 +1,5 @@
-import { chain, get } from 'lodash';
+import groupBy from 'lodash/groupBy';
+import sortBy from 'lodash/sortBy';
 import { stringify } from 'qs';
 
 const generateLinks = (links, type, configurations = []) => {
@@ -44,19 +45,19 @@ const generateLinks = (links, type, configurations = []) => {
 };
 
 const generateModelsLinks = (models, modelsConfigurations) => {
-  const [collectionTypes, singleTypes] = chain(models)
-    .groupBy('kind')
-    .map((value, key) => ({ name: key, links: value }))
-    .sortBy('name')
-    .value();
+  const groupedModels = Object.entries(groupBy(models, 'kind')).map(([key, value]) => ({
+    name: key,
+    links: value,
+  }));
+  const [collectionTypes, singleTypes] = sortBy(groupedModels, 'name');
 
   return {
     collectionTypesSectionLinks: generateLinks(
-      get(collectionTypes, 'links', []),
+      collectionTypes?.links || [],
       'collectionTypes',
       modelsConfigurations
     ),
-    singleTypesSectionLinks: generateLinks(get(singleTypes, 'links', []), 'singleTypes'),
+    singleTypesSectionLinks: generateLinks(singleTypes?.links ?? [], 'singleTypes'),
   };
 };
 

package/admin/src/content-manager/pages/CollectionTypeRecursivePath/components/ErrorFallback.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnErrorOccurred } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 
 const ErrorFallback = () => {
   return (

package/admin/src/content-manager/pages/EditSettingsView/components/ComponentFieldList.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } 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 Cog from '@strapi/icons/Cog';
+import { Box, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
+import { Cog } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
 import getTrad from '../../../utils/getTrad';
 

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFieldButton.js

@@ -3,10 +3,8 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useDrop, useDrag } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { GridItem } from '@strapi/design-system/Grid';
-import Drag from '@strapi/icons/Drag';
+import { Flex, Box, GridItem } from '@strapi/design-system';
+import { Drag } from '@strapi/icons';
 import { ItemTypes } from '../../../utils';
 import FieldButtonContent from './FieldButtonContent';
 import { useLayoutDnd } from '../../../hooks';

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js

@@ -1,13 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import Plus from '@strapi/icons/Plus';
+import { Button, Box, Typography, Stack, Flex, SimpleMenu, MenuItem } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import { getTrad } from '../../../utils';
 import RowsLayout from './RowsLayout';
 import LinkToCTB from './LinkToCTB';

package/admin/src/content-manager/pages/EditSettingsView/components/FieldButtonContent.js

@@ -2,12 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Typography } from '@strapi/design-system/Typography';
-import Pencil from '@strapi/icons/Pencil';
-import Trash from '@strapi/icons/Trash';
+import { Box, Flex, IconButton, Typography } from '@strapi/design-system';
+import { Pencil, Trash } from '@strapi/icons';
 import { getTrad } from '../../../utils';
 import ComponentFieldList from './ComponentFieldList';
 import DynamicZoneList from './DynamicZoneList';

package/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js

@@ -7,11 +7,11 @@ import {
   ModalHeader,
   ModalFooter,
   ModalBody,
-} from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import { Flex } from '@strapi/design-system/Flex';
-import { Grid } from '@strapi/design-system/Grid';
+  Typography,
+  Button,
+  Flex,
+  Grid,
+} from '@strapi/design-system';
 import styled from 'styled-components';
 import { getTrad } from '../../../utils';
 import { useLayoutDnd } from '../../../hooks';

package/admin/src/content-manager/pages/EditSettingsView/components/GenericInput.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Select, Option } from '@strapi/design-system/Select';
+import { TextInput, ToggleInput, Select, Option } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 const GenericInput = ({ type, options, onChange, value, name, ...inputProps }) => {

package/admin/src/content-manager/pages/EditSettingsView/components/LinkToCTB.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { useTracking, CheckPermissions, LinkButton } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import Pencil from '@strapi/icons/Pencil';
+import { Pencil } from '@strapi/icons';
 import getTrad from '../../../utils/getTrad';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
 

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -1,8 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
+import { GridItem, Select, Option } from '@strapi/design-system';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { useLayoutDnd } from '../../../hooks';