@strapi/admin 4.6.0 → 4.6.2

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

@@ -8,11 +8,12 @@ import {
   useQueryParams,
   useNotification,
   useGuidedTour,
+  useAPIErrorHandler,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { axiosInstance } from '../../../core/utils';
 import { createDefaultForm, getTrad, removePasswordFieldsFromData } from '../../utils';
 import {
   getData,
@@ -39,6 +40,9 @@ 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;
 
   const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
     useSelector(selectCrudReducer);
@@ -103,7 +107,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       setIsCreatingEntry(true);
 
       try {
-        const { data } = await axiosInstance.get(getRequestUrl(`${slug}${searchToSend}`), {
+        const { data } = await fetchClient.get(getRequestUrl(`${slug}${searchToSend}`), {
           cancelToken: source.token,
         });
 
@@ -136,23 +140,22 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     fetchData(source);
 
     return () => source.cancel('Operation canceled by the user.');
-  }, [cleanReceivedData, push, slug, dispatch, searchToSend, rawQuery, toggleNotification]);
+  }, [
+    fetchClient,
+    cleanReceivedData,
+    push,
+    slug,
+    dispatch,
+    searchToSend,
+    rawQuery,
+    toggleNotification,
+  ]);
 
   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(
@@ -160,7 +163,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
-        const { data } = await axiosInstance.delete(getRequestUrl(`${slug}${searchToSend}`));
+        const { data } = await del(getRequestUrl(`${slug}${searchToSend}`));
 
         toggleNotification({
           type: 'success',
@@ -178,7 +181,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [slug, displayErrors, toggleNotification, searchToSend]
+    [del, slug, displayErrors, toggleNotification, searchToSend]
   );
 
   const onDeleteSucceeded = useCallback(() => {
@@ -194,7 +197,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       try {
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await axiosInstance.put(endPoint, body);
+        const { data } = await put(endPoint, body);
 
         trackUsageRef.current('didCreateEntry', trackerProperty);
         toggleNotification({
@@ -224,6 +227,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       }
     },
     [
+      put,
       cleanReceivedData,
       displayErrors,
       slug,
@@ -242,7 +246,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       const endPoint = getRequestUrl(`${slug}/actions/numberOfDraftRelations`);
       dispatch(setStatus('draft-relation-check-pending'));
 
-      const numberOfDraftRelations = await axiosInstance.get(endPoint);
+      const numberOfDraftRelations = await fetchClient.get(endPoint);
       trackUsageRef.current('didCheckDraftRelations');
 
       dispatch(setStatus('resolved'));
@@ -254,7 +258,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       return Promise.reject(err);
     }
-  }, [displayErrors, slug, dispatch]);
+  }, [fetchClient, displayErrors, slug, dispatch]);
 
   const onPublish = useCallback(async () => {
     try {
@@ -263,7 +267,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       dispatch(setStatus('publish-pending'));
 
-      const { data } = await axiosInstance.post(endPoint);
+      const { data } = await post(endPoint);
 
       trackUsageRef.current('didPublishEntry');
       toggleNotification({
@@ -283,7 +287,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       return Promise.reject(err);
     }
-  }, [cleanReceivedData, displayErrors, slug, searchToSend, dispatch, toggleNotification]);
+  }, [post, cleanReceivedData, displayErrors, slug, searchToSend, dispatch, toggleNotification]);
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
@@ -294,7 +298,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await axiosInstance.put(endPoint, body);
+        const { data } = await put(endPoint, body);
 
         toggleNotification({
           type: 'success',
@@ -321,7 +325,16 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification, queryClient]
+    [
+      put,
+      cleanReceivedData,
+      displayErrors,
+      slug,
+      dispatch,
+      rawQuery,
+      toggleNotification,
+      queryClient,
+    ]
   );
 
   // The publish and unpublish method could be refactored but let's leave the duplication for now
@@ -333,7 +346,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     try {
       trackUsageRef.current('willUnpublishEntry');
 
-      const { data } = await axiosInstance.post(endPoint);
+      const { data } = await post(endPoint);
 
       trackUsageRef.current('didUnpublishEntry');
       toggleNotification({
@@ -348,7 +361,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       dispatch(setStatus('resolved'));
       displayErrors(err);
     }
-  }, [cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, searchToSend]);
+  }, [post, cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, searchToSend]);
 
   return children({
     componentsDataStructure,

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/hooks/useFetchContentTypeLayout/index.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 import axios from 'axios';
-import { axiosInstance } from '../../../core/utils';
+import { useFetchClient } from '@strapi/helper-plugin';
 import formatLayouts from './utils/formatLayouts';
 import reducer, { initialState } from './reducer';
 import { makeSelectModelAndComponentSchemas } from '../../pages/App/selectors';
@@ -12,6 +12,7 @@ const useFetchContentTypeLayout = (contentTypeUID) => {
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
   const { schemas } = useSelector((state) => schemasSelector(state), shallowEqual);
   const isMounted = useRef(true);
+  const { get } = useFetchClient();
 
   const getData = useCallback(
     async (uid, source) => {
@@ -27,7 +28,7 @@ const useFetchContentTypeLayout = (contentTypeUID) => {
 
         const {
           data: { data },
-        } = await axiosInstance.get(endPoint, { cancelToken: source.token });
+        } = await get(endPoint, { cancelToken: source.token });
 
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
@@ -47,7 +48,7 @@ const useFetchContentTypeLayout = (contentTypeUID) => {
         }
       }
     },
-    [layouts, schemas]
+    [layouts, schemas, get]
   );
 
   useEffect(() => {

package/admin/src/content-manager/hooks/useLazyComponents/index.js

@@ -11,13 +11,12 @@ const componentStore = new Map();
  */
 const useLazyComponents = (componentUids = []) => {
   const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));
-  const [loading, setLoading] = useState(() => {
-    if (componentStore.size === 0 && componentUids.length > 0) {
-      return true;
-    }
-
-    return false;
-  });
+  /**
+   * Start loading only if there are any components passed in
+   * and there are some new to load
+   */
+  const newUids = componentUids.filter((uid) => !componentStore.get(uid));
+  const [loading, setLoading] = useState(() => !!newUids.length);
   const customFieldsRegistry = useCustomFields();
 
   useEffect(() => {
@@ -36,11 +35,8 @@ const useLazyComponents = (componentUids = []) => {
       setStore(Object.fromEntries(componentStore));
     };
 
-    if (componentUids.length && loading) {
-      /**
-       * These uids are not in the component store therefore we need to get the components
-       */
-      const newUids = componentUids.filter((uid) => !componentStore.get(uid));
+    if (newUids.length > 0) {
+      setLoading(true);
 
       const componentPromises = newUids.map((uid) => {
         const customField = customFieldsRegistry.get(uid);
@@ -52,7 +48,7 @@ const useLazyComponents = (componentUids = []) => {
         lazyLoadComponents(newUids, componentPromises);
       }
     }
-  }, [componentUids, customFieldsRegistry, loading]);
+  }, [newUids, customFieldsRegistry]);
 
   /**
    * Wrap this in a callback so it can be used in

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useInfiniteQuery } from 'react-query';
 
-import { axiosInstance } from '../../../core/utils';
+import { useFetchClient } from '@strapi/helper-plugin';
 
 import { normalizeRelations } from '../../components/RelationInputDataManager/utils';
 
@@ -10,13 +10,13 @@ import { useCallbackRef } from '../useCallbackRef';
 export const useRelation = (cacheKey, { relation, search }) => {
   const [searchParams, setSearchParams] = useState({});
   const [currentPage, setCurrentPage] = useState(0);
-
+  const { get } = useFetchClient();
   /**
    * This runs in `useInfiniteQuery` to actually fetch the data
    */
   const fetchRelations = async ({ pageParam = 1 }) => {
     try {
-      const { data } = await axiosInstance.get(relation?.endpoint, {
+      const { data } = await get(relation?.endpoint, {
         params: {
           ...(relation.pageParams ?? {}),
           page: pageParam,
@@ -33,7 +33,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
 
   const fetchSearch = async ({ pageParam = 1 }) => {
     try {
-      const { data } = await axiosInstance.get(search.endpoint, {
+      const { data } = await get(search.endpoint, {
         params: {
           ...(search.pageParams ?? {}),
           ...searchParams,

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

@@ -1,10 +1,14 @@
-import { useNotification, useRBACProvider, useStrapiApp } from '@strapi/helper-plugin';
+import {
+  useNotification,
+  useRBACProvider,
+  useStrapiApp,
+  useFetchClient,
+} 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 { axiosInstance } from '../../../core/utils';
 import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
 import { getRequestUrl, getTrad } from '../../utils';
 import { getData, resetProps, setContentTypeLinks } from './actions';
@@ -22,6 +26,7 @@ const useModels = () => {
   const source = CancelToken.source();
   const { notifyStatus } = useNotifyAT();
   const { formatMessage } = useIntl();
+  const { get } = useFetchClient();
 
   const fetchData = async () => {
     dispatch(getData());
@@ -36,7 +41,7 @@ const useModels = () => {
         },
       ] = await Promise.all(
         ['components', 'content-types'].map((endPoint) =>
-          axiosInstance.get(getRequestUrl(endPoint), { cancelToken: source.token })
+          get(getRequestUrl(endPoint), { cancelToken: source.token })
         )
       );
 

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/App/utils/getContentTypeLinks.js

@@ -1,13 +1,14 @@
-import { axiosInstance } from '../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import generateModelsLinks from './generateModelsLinks';
 import checkPermissions from './checkPermissions';
 import { getRequestUrl } from '../../../utils';
 
 const getContentTypeLinks = async (models, userPermissions, toggleNotification) => {
+  const { get } = getFetchClient();
   try {
     const {
       data: { data: contentTypeConfigurations },
-    } = await axiosInstance.get(getRequestUrl('content-types-settings'));
+    } = await get(getRequestUrl('content-types-settings'));
 
     const { collectionTypesSectionLinks, singleTypesSectionLinks } = generateModelsLinks(
       models,

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/ComponentSetttingsView/index.js

@@ -1,9 +1,8 @@
 import React, { memo, useEffect, useMemo, useReducer } from 'react';
 import { useParams } from 'react-router-dom';
-import { CheckPagePermissions, LoadingIndicatorPage } from '@strapi/helper-plugin';
+import { CheckPagePermissions, LoadingIndicatorPage, useFetchClient } from '@strapi/helper-plugin';
 import { useSelector, shallowEqual } from 'react-redux';
 import axios from 'axios';
-import { axiosInstance } from '../../../core/utils';
 import { getRequestUrl, mergeMetasWithSchema } from '../../utils';
 import { makeSelectModelAndComponentSchemas } from '../App/selectors';
 import permissions from '../../../permissions';
@@ -18,6 +17,7 @@ const ComponentSettingsView = () => {
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
   const { schemas } = useSelector((state) => schemasSelector(state), shallowEqual);
   const { uid } = useParams();
+  const { get } = useFetchClient();
 
   useEffect(() => {
     const CancelToken = axios.CancelToken;
@@ -29,7 +29,7 @@ const ComponentSettingsView = () => {
 
         const {
           data: { data },
-        } = await axiosInstance.get(getRequestUrl(`components/${uid}/configuration`), {
+        } = await get(getRequestUrl(`components/${uid}/configuration`), {
           cancelToken: source.token,
         });
 
@@ -48,7 +48,7 @@ const ComponentSettingsView = () => {
     return () => {
       source.cancel('Operation canceled by the user.');
     };
-  }, [uid, schemas]);
+  }, [uid, schemas, get]);
 
   if (isLoading) {
     return <LoadingIndicatorPage />;

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';