@strapi/admin 4.6.0 → 4.6.2

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from '@strapi/design-system/Grid';
+import { Grid } from '@strapi/design-system';
 import RowItemsLayout from './RowItemsLayout';
 
 const RowsLayout = ({ row, onRemoveField, rowIndex }) => {

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

@@ -11,17 +11,21 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useHistory } from 'react-router-dom';
-import { Main } from '@strapi/design-system/Main';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Stack } from '@strapi/design-system/Stack';
-import { Divider } from '@strapi/design-system/Divider';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
+import {
+  Main,
+  HeaderLayout,
+  ContentLayout,
+  Button,
+  Box,
+  Typography,
+  Grid,
+  GridItem,
+  Select,
+  Option,
+  Stack,
+  Divider,
+} from '@strapi/design-system';
+import { ArrowLeft, Check } from '@strapi/icons';
 import { getTrad } from '../../utils';
 import reducer, { initialState } from './reducer';
 import init from './init';

package/admin/src/content-manager/pages/EditSettingsView/utils/api.js

@@ -1,8 +1,10 @@
-import { axiosInstance } from '../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import { getRequestUrl } from '../../../utils';
 
 const putCMSettingsEV = (body, slug, isContentTypeView) => {
-  return axiosInstance.put(
+  const { put } = getFetchClient();
+
+  return put(
     getRequestUrl(
       isContentTypeView ? `content-types/${slug}/configuration` : `components/${slug}/configuration`
     ),

package/admin/src/content-manager/pages/EditView/DeleteLink/index.js

@@ -1,10 +1,9 @@
 import React, { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
-import { Button } from '@strapi/design-system/Button';
-import Trash from '@strapi/icons/Trash';
-import { ConfirmDialog, useNotification } from '@strapi/helper-plugin';
+import { Button } from '@strapi/design-system';
+import { Trash } from '@strapi/icons';
+import { ConfirmDialog, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
@@ -13,6 +12,7 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
   const [showWarningDelete, setWarningDelete] = useState(false);
   const [isModalConfirmButtonLoading, setIsModalConfirmButtonLoading] = useState(false);
   const { formatMessage } = useIntl();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
   const toggleNotification = useNotification();
 
   const toggleWarningDelete = () => setWarningDelete((prevState) => !prevState);
@@ -29,14 +29,12 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
       toggleWarningDelete();
       onDeleteSucceeded();
     } catch (err) {
-      const errorMessage = get(
-        err,
-        'response.payload.message',
-        formatMessage({ id: getTrad('error.record.delete') })
-      );
       setIsModalConfirmButtonLoading(false);
       toggleWarningDelete();
-      toggleNotification({ type: 'warning', message: errorMessage });
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(err),
+      });
     }
   };
 

package/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/index.js

@@ -2,15 +2,13 @@ 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 Bullet from '@strapi/icons/Dot';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Dot } from '@strapi/icons';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
 
-const CustomBullet = styled(Bullet)`
+const CustomBullet = styled(Dot)`
   width: ${pxToRem(6)};
   height: ${pxToRem(6)};
   * {

package/admin/src/content-manager/pages/EditView/GridRow/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Grid, GridItem } from '@strapi/design-system';
 import Inputs from '../../../components/Inputs';
 import FieldComponent from '../../../components/FieldComponent';
 

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -6,17 +6,19 @@ import isEqualFastCompare from 'react-fast-compare';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
+import { ArrowLeft, Check, ExclamationMarkCircle } from '@strapi/icons';
 import { Link } from '@strapi/helper-plugin';
-import { HeaderLayout } from '@strapi/design-system/Layout';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Check from '@strapi/icons/Check';
+import {
+  HeaderLayout,
+  Box,
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Flex,
+  Typography,
+  Stack,
+} from '@strapi/design-system';
 import styled from 'styled-components';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';

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

@@ -8,13 +8,8 @@ import {
   LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { ContentLayout } from '@strapi/design-system/Layout';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Main } from '@strapi/design-system/Main';
-import { Stack } from '@strapi/design-system/Stack';
-import Layer from '@strapi/icons/Layer';
-import Pencil from '@strapi/icons/Pencil';
+import { ContentLayout, Box, Grid, GridItem, Main, Stack } from '@strapi/design-system';
+import { Pencil, Layer } from '@strapi/icons';
 import { InjectionZone } from '../../../shared/components';
 import permissions from '../../../permissions';
 import DynamicZone from '../../components/DynamicZone';

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

@@ -1,12 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-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 { Flex, Typography, Stack } from '@strapi/design-system';
+import { Pencil, Cross, Drag } from '@strapi/icons';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
 
 const ActionBox = styled(Flex)`

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

@@ -4,13 +4,8 @@ import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-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 { Flex, Box, Typography, Stack } from '@strapi/design-system';
+import { Pencil, Cross, Drag } from '@strapi/icons';
 import CardPreview from './CardPreview';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
 import { getTrad, ItemTypes } from '../../../utils';

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

@@ -8,13 +8,14 @@ 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, GridItem } from '@strapi/design-system/Grid';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
+  Typography,
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  TextInput,
+  ToggleInput,
+} from '@strapi/design-system';
 import { getTrad } from '../../../utils';
 import FieldTypeIcon from '../../../components/FieldTypeIcon';
 

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

@@ -1,12 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+import {
+  Box,
+  Grid,
+  GridItem,
+  Select,
+  Option,
+  ToggleInput,
+  Stack,
+  Typography,
+} from '@strapi/design-system';
 import { getTrad } from '../../../utils';
 
 const Settings = ({ modifiedData, onChange, sortOptions }) => {

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

@@ -2,13 +2,16 @@ import React, { useState, useRef, useEffect } 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 { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import { IconButton } from '@strapi/design-system/IconButton';
-import Plus from '@strapi/icons/Plus';
+import {
+  Box,
+  Flex,
+  Stack,
+  Typography,
+  SimpleMenu,
+  MenuItem,
+  IconButton,
+} from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import DraggableCard from './DraggableCard';
 import { getTrad } from '../../../utils';
 

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

@@ -9,13 +9,16 @@ import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Button } from '@strapi/design-system/Button';
-import Check from '@strapi/icons/Check';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
+import {
+  Box,
+  Divider,
+  Layout,
+  HeaderLayout,
+  ContentLayout,
+  Main,
+  Button,
+} from '@strapi/design-system';
+import { Check, ArrowLeft } from '@strapi/icons';
 import { checkIfAttributeIsDisplayable, getTrad } from '../../utils';
 import ModelsContext from '../../contexts/ModelsContext';
 import { usePluginsQueryParams } from '../../hooks';

package/admin/src/content-manager/pages/ListSettingsView/utils/api.js

@@ -1,8 +1,10 @@
-import { axiosInstance } from '../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import { getRequestUrl } from '../../../utils';
 
 const putCMSettingsLV = (body, slug) => {
-  return axiosInstance.put(getRequestUrl(`content-types/${slug}/configuration`), body);
+  const { put } = getFetchClient();
+
+  return put(getRequestUrl(`content-types/${slug}/configuration`), body);
 };
 
 export default putCMSettingsLV;

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

@@ -2,8 +2,7 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Box } from '@strapi/design-system/Box';
+import { Select, Option, Box } from '@strapi/design-system';
 import { useTracking } from '@strapi/helper-plugin';
 import { onChangeListHeaders } from '../actions';
 import { selectDisplayedHeaders } from '../selectors';

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box, Flex } from '@strapi/design-system';
 import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 const PaginationFooter = ({ pagination }) => {

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

@@ -14,26 +14,28 @@ import {
   NoPermissions,
   CheckPermissions,
   SearchURLQuery,
+  useFetchClient,
   useFocusWhenNavigate,
   useQueryParams,
   useNotification,
   useRBACProvider,
   useTracking,
   Link,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Main } from '@strapi/design-system/Main';
-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 ArrowLeft from '@strapi/icons/ArrowLeft';
-import Plus from '@strapi/icons/Plus';
-import Cog from '@strapi/icons/Cog';
-
-import { axiosInstance } from '../../../core/utils';
+import {
+  IconButton,
+  Main,
+  Box,
+  ActionLayout,
+  ContentLayout,
+  HeaderLayout,
+  useNotifyAT,
+  Button,
+} from '@strapi/design-system';
+
+import { ArrowLeft, Plus, Cog } from '@strapi/icons';
 
 import DynamicTable from '../../components/DynamicTable';
 import AttributeFilter from '../../components/AttributeFilter';
@@ -85,6 +87,7 @@ function ListView({
   const trackUsageRef = useRef(trackUsage);
   const fetchPermissionsRef = useRef(refetchPermissions);
   const { notifyStatus } = useNotifyAT();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
 
   useFocusWhenNavigate();
 
@@ -97,6 +100,8 @@ function ListView({
   const { formatMessage } = useIntl();
   const contentType = layout.contentType;
   const hasDraftAndPublish = get(contentType, 'options.draftAndPublish', false);
+  const fetchClient = useFetchClient();
+  const { post, del } = fetchClient;
 
   // FIXME
   // Using a ref to avoid requests being fired multiple times on slug on change
@@ -112,7 +117,7 @@ function ListView({
 
         const {
           data: { results, pagination: paginationResult },
-        } = await axiosInstance.get(endPoint, opts);
+        } = await fetchClient.get(endPoint, opts);
 
         notifyStatus(
           formatMessage(
@@ -147,20 +152,19 @@ function ListView({
           return;
         }
 
-        console.error(err);
         toggleNotification({
           type: 'warning',
           message: { id: getTrad('error.model.fetch') },
         });
       }
     },
-    [formatMessage, getData, getDataSucceeded, notifyStatus, push, toggleNotification]
+    [formatMessage, getData, getDataSucceeded, notifyStatus, push, toggleNotification, fetchClient]
   );
 
   const handleConfirmDeleteAllData = useCallback(
     async (ids) => {
       try {
-        await axiosInstance.post(getRequestUrl(`collection-types/${slug}/actions/bulkDelete`), {
+        await post(getRequestUrl(`collection-types/${slug}/actions/bulkDelete`), {
           ids,
         });
 
@@ -170,17 +174,17 @@ function ListView({
       } catch (err) {
         toggleNotification({
           type: 'warning',
-          message: { id: getTrad('error.record.delete') },
+          message: formatAPIError(err),
         });
       }
     },
-    [fetchData, params, slug, toggleNotification]
+    [fetchData, params, slug, toggleNotification, formatAPIError, post]
   );
 
   const handleConfirmDeleteData = useCallback(
     async (idToDelete) => {
       try {
-        await axiosInstance.delete(getRequestUrl(`collection-types/${slug}/${idToDelete}`));
+        await del(getRequestUrl(`collection-types/${slug}/${idToDelete}`));
 
         const requestUrl = getRequestUrl(`collection-types/${slug}${params}`);
         fetchData(requestUrl);
@@ -190,19 +194,13 @@ function ListView({
           message: { id: getTrad('success.record.delete') },
         });
       } catch (err) {
-        const errorMessage = get(
-          err,
-          'response.payload.message',
-          formatMessage({ id: getTrad('error.record.delete') })
-        );
-
         toggleNotification({
           type: 'warning',
-          message: errorMessage,
+          message: formatAPIError(err),
         });
       }
     },
-    [slug, params, fetchData, toggleNotification, formatMessage]
+    [slug, params, fetchData, toggleNotification, formatAPIError, del]
   );
 
   useEffect(() => {
@@ -221,7 +219,6 @@ function ListView({
 
       source.cancel('Operation canceled by the user.');
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [canRead, getData, slug, params, getDataSucceeded, fetchData]);
 
   const defaultHeaderLayoutTitle = formatMessage({

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useFocusWhenNavigate, LinkButton } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
-import Plus from '@strapi/icons/Plus';
-import EmptyDocuments from '@strapi/icons/EmptyDocuments';
+import { Main, ContentLayout, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { Plus, EmptyDocuments } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFocusWhenNavigate, NoPermissions as NoPermissionsCompo } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { Main, ContentLayout, HeaderLayout } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 

package/admin/src/core/utils/index.js

@@ -1,3 +1,2 @@
-export { default as axiosInstance } from './axiosInstance';
 export { default as basename } from './basename';
 export { default as createHook } from './createHook';

package/admin/src/hooks/useFetchEnabledPlugins/utils/api.js

@@ -1,7 +1,8 @@
-import { axiosInstance } from '../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchEnabledPlugins = async () => {
-  const { data } = await axiosInstance.get('/admin/plugins');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/plugins');
 
   return data;
 };

package/admin/src/hooks/useInjectReducer/index.js

@@ -0,0 +1 @@
+export * from './useInjectReducer';

package/admin/src/hooks/useInjectReducer/useInjectReducer.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useStore } from 'react-redux';
+
+/**
+ * Inject a new reducer into the global redux-store.
+ *
+ * @export
+ * @param {string} namespace - Store namespace of the injected reducer
+ * @param {Function} reducer - Reducer function
+ * @return void
+ */
+
+export function useInjectReducer(namespace, reducer) {
+  const store = useStore();
+
+  useEffect(() => {
+    store.injectReducer(namespace, reducer);
+  }, [store, namespace, reducer]);
+}

package/admin/src/hooks/useMenu/reducer.js

@@ -1,8 +1,6 @@
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import Cog from '@strapi/icons/Cog';
-import Puzzle from '@strapi/icons/Puzzle';
-import ShoppingCart from '@strapi/icons/ShoppingCart';
+import { Cog, Puzzle, ShoppingCart } from '@strapi/icons';
 import adminPermissions from '../../permissions';
 
 const initialState = {

package/admin/src/hooks/useRegenerate/index.js

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { get } from 'lodash';
-import { useNotification } from '@strapi/helper-plugin';
-import { axiosInstance } from '../../core/utils';
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 
 const useRegenerate = (id, onRegenerate) => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
+  const { post } = useFetchClient();
 
   const regenerateData = async () => {
     try {
@@ -13,7 +13,7 @@ const useRegenerate = (id, onRegenerate) => {
         data: {
           data: { accessKey },
         },
-      } = await axiosInstance.post(`/admin/api-tokens/${id}/regenerate`);
+      } = await post(`/admin/api-tokens/${id}/regenerate`);
       setIsLoadingConfirmation(false);
       onRegenerate(accessKey);
     } catch (error) {

package/admin/src/hooks/useRolesList/index.js

@@ -1,7 +1,6 @@
 import { useEffect, useReducer, useCallback } from 'react';
-import { useNotification } from '@strapi/helper-plugin';
+import { getFetchClient, useNotification } from '@strapi/helper-plugin';
 import get from 'lodash/get';
-import { axiosInstance } from '../../core/utils';
 import init from './init';
 import reducer, { initialState } from './reducer';
 
@@ -19,6 +18,9 @@ const useRolesList = (shouldFetchData = true) => {
   }, [shouldFetchData]);
 
   const fetchRolesList = useCallback(async () => {
+    // TODO: evaluate to replace it with a useFetchClient when we work on the useCallback to remove
+    const fetchClient = getFetchClient();
+
     try {
       dispatch({
         type: 'GET_DATA',
@@ -26,7 +28,7 @@ const useRolesList = (shouldFetchData = true) => {
 
       const {
         data: { data },
-      } = await axiosInstance.get('/admin/roles');
+      } = await fetchClient.get('/admin/roles');
 
       dispatch({
         type: 'GET_DATA_SUCCEEDED',

package/admin/src/index.js

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
-import appCustomisations from './app';
+import { getFetchClient } from '@strapi/helper-plugin';
 import { Components, Fields, Middlewares, Reducers } from './core/apis';
-import { axiosInstance } from './core/utils';
+import appCustomisations from './app';
 // eslint-disable-next-line import/extensions
 import plugins from './plugins';
 import appReducers from './reducers';
@@ -29,12 +29,13 @@ const reducers = Reducers({ appReducers });
 const MOUNT_NODE = document.getElementById('app');
 
 const run = async () => {
+  const { get } = getFetchClient();
   try {
     const {
       data: {
         data: { isEE, features },
       },
-    } = await axiosInstance.get('/admin/project-type');
+    } = await get('/admin/project-type');
 
     window.strapi.isEE = isEE;
     window.strapi.features = {

package/admin/src/layouts/AppLayout/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { SkipToContent } from '@strapi/design-system/Main';
+import { Box, Flex, SkipToContent } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';