@strapi/admin 4.6.0 → 4.6.2

package/.browserslistrc

@@ -1,3 +1,4 @@
 last 3 major versions
 Firefox ESR
-last 2 Opera versions
+last 2 Opera versions
+not dead

package/admin/src/StrapiApp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { lightTheme, darkTheme } from '@strapi/design-system/themes';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -1,10 +1,11 @@
 import axios from 'axios';
+import { getFetchClient } from '@strapi/helper-plugin';
 import checkLatestStrapiVersion from './checkLatestStrapiVersion';
-import { axiosInstance } from '../../../core/utils';
 import packageJSON from '../../../../../package.json';
 
 const strapiVersion = packageJSON.version;
 const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
+const { get } = getFetchClient();
 
 const fetchStrapiLatestRelease = async (toggleNotification) => {
   try {
@@ -38,7 +39,7 @@ const fetchStrapiLatestRelease = async (toggleNotification) => {
 
 const fetchAppInfo = async () => {
   try {
-    const { data, headers } = await axiosInstance.get('/admin/information');
+    const { data, headers } = await get('/admin/information');
 
     if (!headers['content-type'].includes('application/json')) {
       throw new Error('Not found');
@@ -52,7 +53,7 @@ const fetchAppInfo = async () => {
 
 const fetchCurrentUserPermissions = async () => {
   try {
-    const { data, headers } = await axiosInstance.get('/admin/users/me/permissions');
+    const { data, headers } = await get('/admin/users/me/permissions');
 
     if (!headers['content-type'].includes('application/json')) {
       throw new Error('Not found');
@@ -70,7 +71,7 @@ const fetchUserRoles = async () => {
       data: {
         data: { roles },
       },
-    } = await axiosInstance.get('/admin/users/me');
+    } = await get('/admin/users/me');
 
     return roles;
   } catch (err) {

package/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js

@@ -4,13 +4,9 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled, { keyframes } from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
-import Clock from '@strapi/icons/Clock';
-import Refresh from '@strapi/icons/Refresh';
-import { Link } from '@strapi/design-system/v2/Link';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Clock, Refresh } from '@strapi/icons';
+import { Link } from '@strapi/design-system/v2';
+import { Box, Stack, Flex, Typography } from '@strapi/design-system';
 import { Content, IconBox, Overlay } from './Overlay';
 
 const overlayContainer = document.createElement('div');

package/admin/src/components/AutoReloadOverlayBlockerProvider/Overlay.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Stack } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 
 const Overlay = styled(Box)`

package/admin/src/components/GuidedTour/Homepage/components/Step.js

@@ -2,9 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Typography, Box, Flex } from '@strapi/design-system';
 import StepNumber from '../../Stepper/StepNumber';
 import StepLine from '../../Stepper/StepLine';
 import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../../constants';

package/admin/src/components/GuidedTour/Homepage/components/Stepper.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 StepHomepage from './Step';
 import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../../constants';
 

package/admin/src/components/GuidedTour/Homepage/index.js

@@ -1,12 +1,8 @@
 import React from 'react';
 import { useGuidedTour, useTracking, LinkButton } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Stack, Flex, Box, Typography, Button } from '@strapi/design-system';
+import { ArrowRight } from '@strapi/icons';
 import StepperHomepage from './components/Stepper';
 import layout from '../layout';
 

package/admin/src/components/GuidedTour/Modal/components/Content.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
+import { Stack, Box, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 const LiStyled = styled.li`

package/admin/src/components/GuidedTour/Modal/components/Modal.js

@@ -3,14 +3,8 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Portal } from '@strapi/design-system/Portal';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Button } from '@strapi/design-system/Button';
-import Cross from '@strapi/icons/Cross';
+import { Portal, FocusTrap, Flex, Box, Stack, IconButton, Button } from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
 
 const ModalWrapper = styled(Flex)`
   position: fixed;

package/admin/src/components/GuidedTour/Modal/components/StepNumberWithPadding.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 StepNumber from '../../Stepper/StepNumber';
 
 const StepNumberWithPadding = ({ number, last, type }) => (

package/admin/src/components/GuidedTour/Modal/components/Stepper.js

@@ -2,11 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { pxToRem, LinkButton } from '@strapi/helper-plugin';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Typography, Button, Box, Flex } from '@strapi/design-system';
+import { ArrowRight } from '@strapi/icons';
 import Content from './Content';
 import StepLine from '../../Stepper/StepLine';
 import StepNumberWithPadding from './StepNumberWithPadding';

package/admin/src/components/GuidedTour/Stepper/StepLine.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../constants';
 
 const StepLine = ({ type, ...props }) => {

package/admin/src/components/GuidedTour/Stepper/StepNumber.js

@@ -1,10 +1,8 @@
 import React from 'react';
 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 { Icon } from '@strapi/design-system/Icon';
-import Check from '@strapi/icons/Check';
+import { Flex, Icon, Typography } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../constants';
 
 const StepNumber = ({ type, number }) => {

package/admin/src/components/LeftMenu/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { NavLink as RouterNavLink, useLocation, useHistory } from 'react-router-dom';
-import { Divider } from '@strapi/design-system/Divider';
+import { Divider, FocusTrap, Box, Typography, Stack } from '@strapi/design-system';
 import {
   MainNav,
   NavBrand,
@@ -13,16 +13,16 @@ import {
   NavUser,
   NavCondense,
   NavFooter,
-} from '@strapi/design-system/v2/MainNav';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import Write from '@strapi/icons/Write';
-import Exit from '@strapi/icons/Exit';
-import { auth, usePersistentState, useAppInfos, useTracking } from '@strapi/helper-plugin';
+} from '@strapi/design-system/v2';
+import { Write, Exit } from '@strapi/icons';
+import {
+  auth,
+  usePersistentState,
+  useAppInfos,
+  useTracking,
+  getFetchClient,
+} from '@strapi/helper-plugin';
 import { useConfigurations } from '../../hooks';
-import { axiosInstance } from '../../core/utils';
 
 const LinkUserWrapper = styled(Box)`
   width: ${150 / 16}rem;
@@ -64,6 +64,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
   const history = useHistory();
+  const { post } = getFetchClient();
 
   const initials = userDisplayName
     .split(' ')
@@ -74,7 +75,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const handleToggleUserLinks = () => setUserLinksVisible((prev) => !prev);
 
   const handleLogout = async () => {
-    await axiosInstance.post('/admin/logout');
+    await post('/admin/logout');
     auth.clearAppStorage();
     handleToggleUserLinks();
     history.push('/auth/login');

package/admin/src/components/Notifications/Notification/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Alert } from '@strapi/design-system/Alert';
-import { Link } from '@strapi/design-system/v2/Link';
+import { Alert } from '@strapi/design-system';
+import { Link } from '@strapi/design-system/v2';
 
 const Notification = ({ dispatch, notification }) => {
   const { formatMessage } = useIntl();

package/admin/src/components/Notifications/index.js

@@ -1,7 +1,7 @@
 import { NotificationsProvider } from '@strapi/helper-plugin';
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { Stack } from '@strapi/design-system/Stack';
+import { Stack } from '@strapi/design-system';
 import Notification from './Notification';
 import reducer, { initialState } from './reducer';
 

package/admin/src/components/Theme/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from '@strapi/design-system/ThemeProvider';
+import { ThemeProvider } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';

package/admin/src/components/UpgradePlanModal/index.js

@@ -2,16 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Portal } from '@strapi/design-system/Portal';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { LinkButton } from '@strapi/design-system/v2/LinkButton';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import Cross from '@strapi/icons/Cross';
+import { Portal, FocusTrap, IconButton, Box, Flex, Typography, Stack } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, Cross } from '@strapi/icons';
 import { setHexOpacity, useLockScroll } from '@strapi/helper-plugin';
 import AirBalloon from '../../assets/images/hot-air-balloon.png';
 import BigArrow from '../../assets/images/upgrade-details.png';

package/admin/src/content-manager/components/AttributeFilter/Filters.js

@@ -1,9 +1,8 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import Filter from '@strapi/icons/Filter';
+import { Box, Button } from '@strapi/design-system';
+import { Filter } from '@strapi/icons';
 import { FilterListURLQuery, FilterPopoverURLQuery, useTracking } from '@strapi/helper-plugin';
 
 const Filters = ({ displayedFilters }) => {

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

@@ -10,11 +10,12 @@ import {
   formatContentTypeData,
   contentManagementUtilRemoveFieldsFromData,
   useGuidedTour,
+  useAPIErrorHandler,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import isEqual from 'react-fast-compare';
-import { axiosInstance } from '../../../core/utils';
 import {
   createDefaultForm,
   getTrad,
@@ -45,12 +46,16 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
     useSelector(selectCrudReducer);
   const redirectionLink = useFindRedirectionLink(slug);
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
 
   const isMounted = useRef(true);
   const trackUsageRef = useRef(trackUsage);
 
   const allLayoutDataRef = useRef(allLayoutData);
 
+  const fetchClient = useFetchClient();
+  const { put, post, del } = fetchClient;
+
   const isCreatingEntry = id === null;
 
   const requestURL = useMemo(() => {
@@ -137,7 +142,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       dispatch(getData());
 
       try {
-        const { data } = await axiosInstance.get(requestURL, { cancelToken: source.token });
+        const { data } = await fetchClient.get(requestURL, { cancelToken: source.token });
 
         dispatch(getDataSucceeded(cleanReceivedData(cleanClonedData(data))));
       } catch (err) {
@@ -145,8 +150,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
           return;
         }
 
-        console.error(err);
-
         const resStatus = get(err, 'response.status', null);
 
         if (resStatus === 404) {
@@ -187,6 +190,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       source.cancel('Operation canceled by the user.');
     };
   }, [
+    fetchClient,
     cleanClonedData,
     cleanReceivedData,
     push,
@@ -199,29 +203,19 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   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(
     async (trackerProperty) => {
+      console.log('onDelete');
+
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
-        const { data } = await axiosInstance.delete(
-          getRequestUrl(`collection-types/${slug}/${id}`)
-        );
+        const { data } = await del(getRequestUrl(`collection-types/${slug}/${id}`));
 
         toggleNotification({
           type: 'success',
@@ -237,7 +231,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         return Promise.reject(err);
       }
     },
-    [id, slug, toggleNotification]
+    [id, slug, toggleNotification, del]
   );
 
   const onDeleteSucceeded = useCallback(() => {
@@ -247,12 +241,11 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const onPost = useCallback(
     async (body, trackerProperty) => {
       const endPoint = `${getRequestUrl(`collection-types/${slug}`)}${rawQuery}`;
-
       try {
         // Show a loading button in the EditView/Header.js && lock the app => no navigation
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await axiosInstance.post(endPoint, body);
+        const { data } = await post(endPoint, body);
 
         trackUsageRef.current('didCreateEntry', trackerProperty);
         toggleNotification({
@@ -291,6 +284,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       toggleNotification,
       setCurrentStep,
       queryClient,
+      post,
     ]
   );
 
@@ -303,7 +297,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       );
       dispatch(setStatus('draft-relation-check-pending'));
 
-      const numberOfDraftRelations = await axiosInstance.get(endPoint);
+      const numberOfDraftRelations = await fetchClient.get(endPoint);
       trackUsageRef.current('didCheckDraftRelations');
 
       dispatch(setStatus('resolved'));
@@ -315,7 +309,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       return Promise.reject(err);
     }
-  }, [displayErrors, id, slug, dispatch]);
+  }, [displayErrors, id, slug, dispatch, fetchClient]);
 
   const onPublish = useCallback(async () => {
     try {
@@ -324,7 +318,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       dispatch(setStatus('publish-pending'));
 
-      const { data } = await axiosInstance.post(endPoint);
+      const { data } = await post(endPoint);
 
       trackUsageRef.current('didPublishEntry');
 
@@ -343,7 +337,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       return Promise.reject(err);
     }
-  }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification]);
+  }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification, post]);
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
@@ -354,7 +348,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await axiosInstance.put(endPoint, body);
+        const { data } = await put(endPoint, body);
 
         trackUsageRef.current('didEditEntry', { trackerProperty });
         toggleNotification({
@@ -379,7 +373,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         return Promise.reject(err);
       }
     },
-    [cleanReceivedData, displayErrors, slug, id, dispatch, toggleNotification, queryClient]
+    [cleanReceivedData, displayErrors, slug, id, dispatch, toggleNotification, queryClient, put]
   );
 
   const onUnpublish = useCallback(async () => {
@@ -390,7 +384,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     try {
       trackUsageRef.current('willUnpublishEntry');
 
-      const { data } = await axiosInstance.post(endPoint);
+      const { data } = await post(endPoint);
 
       trackUsageRef.current('didUnpublishEntry');
       toggleNotification({
@@ -408,7 +402,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       return Promise.reject(err);
     }
-  }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification]);
+  }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification, post]);
 
   return children({
     componentsDataStructure,

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

@@ -2,11 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import PlusCircle from '@strapi/icons/PlusCircle';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { PlusCircle } from '@strapi/icons';
+import { Box, Stack, Flex, Typography } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
 

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

@@ -1,8 +1,7 @@
 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 { Flex, Typography } from '@strapi/design-system';
 
 const Wrapper = styled(Flex)`
   position: relative;

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { Avatar } from '@strapi/design-system/Avatar';
-import { Tooltip } from '@strapi/design-system/Tooltip';
+import React from 'react';
+import { Avatar, Tooltip } from '@strapi/design-system';
 import { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
+
 import FileWrapper from './FileWrapper';
 
 const Media = ({ url, mime, alternativeText, name, ext, formats }) => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AvatarGroup } from '@strapi/design-system/Avatar';
+import { AvatarGroup } from '@strapi/design-system';
 import Media from './Media';
 import FileWrapper from './Media/FileWrapper';
 

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

@@ -1,28 +1,30 @@
-import React, { useState, useMemo } from 'react';
+import {
+  Badge,
+  Box,
+  Flex,
+  Loader,
+  MenuItem,
+  SimpleMenu,
+  Typography,
+  useNotifyAT,
+} from '@strapi/design-system';
+import { stopPropagation, useFetchClient } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
-import { useQuery } from 'react-query';
+import React, { useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Badge } from '@strapi/design-system/Badge';
-import { Flex } from '@strapi/design-system/Flex';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import { Loader } from '@strapi/design-system/Loader';
+import { useQuery } from 'react-query';
 import styled from 'styled-components';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { stopPropagation } from '@strapi/helper-plugin';
-import CellValue from '../CellValue';
-import { axiosInstance } from '../../../../../core/utils';
 import { getRequestUrl, getTrad } from '../../../../utils';
+import CellValue from '../CellValue';
 
 const TypographyMaxWidth = styled(Typography)`
   max-width: 500px;
 `;
 
-const fetchRelation = async (endPoint, notifyStatus) => {
+const fetchRelation = async (endPoint, notifyStatus, get) => {
   const {
     data: { results, pagination },
-  } = await axiosInstance.get(endPoint);
+  } = await get(endPoint);
 
   notifyStatus();
 
@@ -37,6 +39,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
     [entityId, name, contentType]
   );
   const [isOpen, setIsOpen] = useState(false);
+  const { get } = useFetchClient();
 
   const Label = (
     <Flex gap={1} wrap="nowrap">
@@ -61,13 +64,13 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
 
   const { data, status } = useQuery(
     [fieldSchema.targetModel, entityId],
-    () => fetchRelation(relationFetchEndpoint, notify),
+    () => fetchRelation(relationFetchEndpoint, notify, get),
     {
       enabled: isOpen,
       staleTime: 0,
       select: (data) => ({
         ...data,
-        results: data.results.reverse(),
+        results: [...data.results].reverse(),
       }),
     }
   );

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationSingle/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';
 import styled from 'styled-components';
 import CellValue from '../CellValue';
 

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

@@ -2,10 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Badge } from '@strapi/design-system/Badge';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { Badge, Box, Typography, SimpleMenu, MenuItem } from '@strapi/design-system';
 import { stopPropagation } from '@strapi/helper-plugin';
 
 import CellValue from '../CellValue';