@strapi/admin 4.6.0-beta.2 → 4.6.1

package/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js

@@ -9,9 +9,8 @@ const Wrapper = styled.div`
   padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
   font-size: ${14 / 16}rem;
   background-color: ${({ theme }) => theme.colors.neutral0};
-  z-index: 2;
-  cursor: not-allowed;
   color: ${({ theme }) => theme.colors.neutral800};
+  line-height: ${({ theme }) => theme.lineHeights[6]};
 
   h1,
   h2,
@@ -19,12 +18,12 @@ const Wrapper = styled.div`
   h4,
   h5,
   h6 {
-    margin-block-start: 10px;
-    margin-block-end: 10px;
+    margin-block-start: ${({ theme }) => theme.spaces[2]};
+    margin-block-end: ${({ theme }) => theme.spaces[2]};
   }
 
   p {
-    margin-bottom: 10px;
+    margin-bottom: ${({ theme }) => theme.spaces[2]};
   }
 
   h1 {
@@ -56,13 +55,13 @@ const Wrapper = styled.div`
   }
 
   blockquote {
-    margin-top: 41px;
-    margin-bottom: 34px;
+    margin-top: ${({ theme }) => theme.spaces[8]};
+    margin-bottom: ${({ theme }) => theme.spaces[7]};
     font-size: ${14 / 16}rem;
     font-weight: 400;
-    border-left: 5px solid #eee;
+    border-left: 4px solid ${({ theme }) => theme.colors.neutral150};
     font-style: italic;
-    padding: 10px 20px;
+    padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};
   }
 
   img {
@@ -91,9 +90,18 @@ const Wrapper = styled.div`
 
   pre,
   code {
-    font-size: 13px;
-    border-radius: 3px;
-    background-color: #002b36;
+    font-size: ${14 / 16}rem;
+    border-radius: 4px;
+    /* 
+      Hard coded since the color is the same between themes,
+      theme.colors.neutral800 changes between themes.
+
+      Matches the color of the JSON Input component.
+    */
+    background-color: #32324d;
+    max-width: 100%;
+    overflow: auto;
+    padding: ${({ theme }) => theme.spaces[2]};
   }
 
   /* Inline code */
@@ -105,21 +113,6 @@ const Wrapper = styled.div`
     }
   }
 
-  .warning {
-    background-color: #faa684;
-    padding: 30px;
-    border-radius: 3px;
-  }
-  .tip {
-    padding: 30px;
-    border-radius: 3px;
-  }
-
-  .footnote-ref,
-  .footnote-backref {
-    color: #007bff;
-  }
-
   ol {
     list-style-type: decimal;
     margin-block-start: ${({ theme }) => theme.spaces[4]};
@@ -127,6 +120,7 @@ const Wrapper = styled.div`
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     padding-inline-start: ${({ theme }) => theme.spaces[4]};
+
     ol,
     ul {
       margin-block-start: 0px;
@@ -141,6 +135,7 @@ const Wrapper = styled.div`
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     padding-inline-start: ${({ theme }) => theme.spaces[4]};
+
     ul,
     ol {
       margin-block-start: 0px;

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

@@ -8,11 +8,11 @@ import {
   useQueryParams,
   useNotification,
   useGuidedTour,
+  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 +39,8 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const searchToSend = buildQueryString(query);
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
+  const fetchClient = useFetchClient();
+  const { post, put, del } = fetchClient;
 
   const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
     useSelector(selectCrudReducer);
@@ -103,7 +105,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,7 +138,16 @@ 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) => {
@@ -160,7 +171,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 +189,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [slug, displayErrors, toggleNotification, searchToSend]
+    [del, slug, displayErrors, toggleNotification, searchToSend]
   );
 
   const onDeleteSucceeded = useCallback(() => {
@@ -194,7 +205,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 +235,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       }
     },
     [
+      put,
       cleanReceivedData,
       displayErrors,
       slug,
@@ -242,7 +254,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 +266,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       return Promise.reject(err);
     }
-  }, [displayErrors, slug, dispatch]);
+  }, [fetchClient, displayErrors, slug, dispatch]);
 
   const onPublish = useCallback(async () => {
     try {
@@ -263,7 +275,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 +295,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 +306,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 +333,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 +354,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 +369,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/EditorLayout.js

@@ -1,15 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Portal } from '@strapi/design-system/Portal';
-import { BaseButton } from '@strapi/design-system/BaseButton';
-import { Typography } from '@strapi/design-system/Typography';
-import { pxToRem } from '@strapi/helper-plugin';
-import Collapse from '@strapi/icons/Collapse';
-import { useIntl } from 'react-intl';
+import { BaseButton, Box, Flex, FocusTrap, Portal, Typography } from '@strapi/design-system';
+import { Collapse } from '@strapi/icons';
+import { pxToRem, useLockScroll } from '@strapi/helper-plugin';
+
 import PreviewWysiwyg from '../PreviewWysiwyg';
 
 const setOpacity = (hex, alpha) =>
@@ -32,6 +28,7 @@ export const ExpandButton = styled(BaseButton)`
 
   svg {
     margin-left: ${({ theme }) => `${theme.spaces[2]}`};
+
     path {
       fill: ${({ theme }) => theme.colors.neutral700};
       width: ${12 / 16}rem;
@@ -42,19 +39,8 @@ export const ExpandButton = styled(BaseButton)`
 
 export const EditorLayout = ({ children, isExpandMode, error, previewContent, onCollapse }) => {
   const { formatMessage } = useIntl();
-  useEffect(() => {
-    const body = document.body;
-
-    if (isExpandMode) {
-      body.classList.add('lock-body-scroll');
-    }
 
-    return () => {
-      if (isExpandMode) {
-        body.classList.remove('lock-body-scroll');
-      }
-    };
-  }, [isExpandMode]);
+  useLockScroll(isExpandMode);
 
   if (isExpandMode) {
     return (
@@ -71,7 +57,6 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
             onClick={onCollapse}
           >
             <Box
-              id="wysiwyg-expand"
               background="neutral0"
               hasRadius
               shadow="popupShadow"
@@ -84,9 +69,15 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
                 <BoxWithBorder flex="1" height="100%">
                   {children}
                 </BoxWithBorder>
-                <Box flex="1" height="100%">
-                  <Flex height={pxToRem(48)} background="neutral100" justifyContent="flex-end">
-                    <ExpandButton id="collapse" onClick={onCollapse}>
+                <Flex alignItems="start" direction="column" flex={1} height="100%" width="100%">
+                  <Flex
+                    height={pxToRem(48)}
+                    background="neutral100"
+                    justifyContent="flex-end"
+                    shrink={0}
+                    width="100%"
+                  >
+                    <ExpandButton onClick={onCollapse}>
                       <Typography>
                         {formatMessage({
                           id: 'components.Wysiwyg.collapse',
@@ -97,10 +88,10 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
                     </ExpandButton>
                   </Flex>
 
-                  <Box position="relative" height="100%">
+                  <Box position="relative" height="100%" width="100%">
                     <PreviewWysiwyg data={previewContent} />
                   </Box>
-                </Box>
+                </Flex>
               </Flex>
             </Box>
           </ExpandWrapper>

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

@@ -31,7 +31,7 @@ const TypographyAsterisk = styled(Typography)`
 `;
 
 const Wysiwyg = ({
-  description,
+  hint,
   disabled,
   error,
   intlLabel,
@@ -167,7 +167,7 @@ const Wysiwyg = ({
 
           {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
         </EditorLayout>
-        <Hint description={description} name={name} error={error} />
+        <Hint hint={hint} name={name} error={error} />
       </Stack>
 
       {error && (
@@ -186,21 +186,17 @@ const Wysiwyg = ({
 };
 
 Wysiwyg.defaultProps = {
-  description: null,
   disabled: false,
   error: '',
   labelAction: undefined,
   placeholder: null,
   required: false,
   value: '',
+  hint: '',
 };
 
 Wysiwyg.propTypes = {
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   disabled: PropTypes.bool,
   error: PropTypes.string,
   intlLabel: PropTypes.shape({

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

@@ -7,10 +7,8 @@
 import React, { useMemo, useState } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
-import matchSorter from 'match-sorter';
-import sortBy from 'lodash/sortBy';
-import toLower from 'lodash/toLower';
 import { NavLink } from 'react-router-dom';
+
 import {
   SubNav,
   SubNavHeader,
@@ -18,14 +16,11 @@ import {
   SubNavSections,
   SubNavLink,
 } from '@strapi/design-system/v2/SubNav';
+
+import { matchByTitle } from './utils';
 import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
-const matchByTitle = (links, search) =>
-  search
-    ? matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] })
-    : sortBy(links, (object) => object.title.toLowerCase());
-
 const LeftMenu = () => {
   const [search, setSearch] = useState('');
   const { formatMessage } = useIntl();

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

@@ -0,0 +1 @@
+export { default as matchByTitle } from './matchByTitle';

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

@@ -0,0 +1,24 @@
+import matchSorter from 'match-sorter';
+import camelCase from 'lodash/camelCase';
+
+/**
+ * @type {(links: array, search? : string) => array }
+ */
+const matchByTitle = (links, search) =>
+  search
+    ? matchSorter(links, search.toLowerCase(), { keys: [(item) => item.title.toLowerCase()] })
+    : links.sort((link, nextLink) => {
+        const title = camelCase(link.title);
+        const nextTitle = camelCase(nextLink.title);
+
+        if (title < nextTitle) {
+          return -1;
+        }
+        if (title > nextTitle) {
+          return 1;
+        }
+
+        return 0;
+      });
+
+export default matchByTitle;

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 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/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/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/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`
     ),