@strapi/admin 4.6.0 → 4.6.1

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

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

@@ -14,6 +14,7 @@ import {
   NoPermissions,
   CheckPermissions,
   SearchURLQuery,
+  useFetchClient,
   useFocusWhenNavigate,
   useQueryParams,
   useNotification,
@@ -33,8 +34,6 @@ import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Plus from '@strapi/icons/Plus';
 import Cog from '@strapi/icons/Cog';
 
-import { axiosInstance } from '../../../core/utils';
-
 import DynamicTable from '../../components/DynamicTable';
 import AttributeFilter from '../../components/AttributeFilter';
 import { InjectionZone } from '../../../shared/components';
@@ -97,6 +96,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 +113,7 @@ function ListView({
 
         const {
           data: { results, pagination: paginationResult },
-        } = await axiosInstance.get(endPoint, opts);
+        } = await fetchClient.get(endPoint, opts);
 
         notifyStatus(
           formatMessage(
@@ -154,13 +155,13 @@ function ListView({
         });
       }
     },
-    [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,
         });
 
@@ -174,13 +175,13 @@ function ListView({
         });
       }
     },
-    [fetchData, params, slug, toggleNotification]
+    [fetchData, params, slug, toggleNotification, 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);
@@ -202,7 +203,7 @@ function ListView({
         });
       }
     },
-    [slug, params, fetchData, toggleNotification, formatMessage]
+    [slug, params, fetchData, toggleNotification, formatMessage, del]
   );
 
   useEffect(() => {
@@ -221,7 +222,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/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/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/pages/ProfilePage/utils/api.js

@@ -1,15 +1,17 @@
 import omit from 'lodash/omit';
-import { axiosInstance } from '../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchUser = async () => {
-  const { data } = await axiosInstance.get('/admin/users/me');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/users/me');
 
   return data.data;
 };
 
 const putUser = async (body) => {
   const dataToSend = omit(body, ['confirmPassword', 'currentTheme']);
-  const { data } = await axiosInstance.put('/admin/users/me', dataToSend);
+  const { put } = getFetchClient();
+  const { data } = await put('/admin/users/me', dataToSend);
 
   return { ...data.data, currentTheme: body.currentTheme };
 };

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -9,13 +9,13 @@ import {
   useTracking,
   useGuidedTour,
   useRBAC,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
 import { Formik } from 'formik';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { formatAPIErrors } from '../../../../../utils';
-import { axiosInstance } from '../../../../../core/utils';
 import { schema } from './utils';
 import LoadingView from './components/LoadingView';
 import FormHead from './components/FormHead';
@@ -50,6 +50,7 @@ const ApiTokenCreateView = () => {
   const {
     params: { id },
   } = useRouteMatch('/settings/api-tokens/:id');
+  const { get, post, put } = useFetchClient();
 
   const isCreating = id === 'create';
 
@@ -58,7 +59,7 @@ const ApiTokenCreateView = () => {
     async () => {
       const [permissions, routes] = await Promise.all(
         ['/admin/content-api/permissions', '/admin/content-api/routes'].map(async (url) => {
-          const { data } = await axiosInstance.get(url);
+          const { data } = await get(url);
 
           return data.data;
         })
@@ -112,7 +113,7 @@ const ApiTokenCreateView = () => {
     async () => {
       const {
         data: { data },
-      } = await axiosInstance.get(`/admin/api-tokens/${id}`);
+      } = await get(`/admin/api-tokens/${id}`);
 
       setApiToken({
         ...data,
@@ -160,12 +161,12 @@ const ApiTokenCreateView = () => {
       const {
         data: { data: response },
       } = isCreating
-        ? await axiosInstance.post(`/admin/api-tokens`, {
+        ? await post(`/admin/api-tokens`, {
             ...body,
             lifespan: lifespanVal,
             permissions: body.type === 'custom' ? state.selectedActions : null,
           })
-        : await axiosInstance.put(`/admin/api-tokens/${id}`, {
+        : await put(`/admin/api-tokens/${id}`, {
             name: body.name,
             description: body.description,
             type: body.type,

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js

@@ -14,6 +14,7 @@ import {
   DynamicTable,
   useTracking,
   useGuidedTour,
+  useFetchClient,
   LinkButton,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
@@ -21,7 +22,6 @@ import { Main } from '@strapi/design-system/Main';
 import { Button } from '@strapi/design-system/Button';
 import Plus from '@strapi/icons/Plus';
 
-import { axiosInstance } from '../../../../../core/utils';
 import adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';
 import TableRows from './DynamicTable';
@@ -38,6 +38,7 @@ const ApiTokenListView = () => {
   const { trackUsage } = useTracking();
   const { startSection } = useGuidedTour();
   const startSectionRef = useRef(startSection);
+  const { get, del } = useFetchClient();
 
   useEffect(() => {
     if (startSectionRef.current) {
@@ -67,7 +68,7 @@ const ApiTokenListView = () => {
       trackUsage('willAccessTokenList');
       const {
         data: { data },
-      } = await axiosInstance.get(`/admin/api-tokens`);
+      } = await get(`/admin/api-tokens`);
 
       trackUsage('didAccessTokenList', { number: data.length });
 
@@ -90,7 +91,7 @@ const ApiTokenListView = () => {
 
   const deleteMutation = useMutation(
     async (id) => {
-      await axiosInstance.delete(`/admin/api-tokens/${id}`);
+      await del(`/admin/api-tokens/${id}`);
     },
     {
       async onSuccess() {

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/api.js

@@ -1,14 +1,16 @@
-import { axiosInstance } from '../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import prefixAllUrls from './prefixAllUrls';
 
 const fetchProjectSettings = async () => {
-  const { data } = await axiosInstance.get('/admin/project-settings');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/project-settings');
 
   return prefixAllUrls(data);
 };
 
 const postProjectSettings = async (body) => {
-  const { data } = await axiosInstance.post('/admin/project-settings', body, {
+  const { post } = getFetchClient();
+  const { data } = await post('/admin/project-settings', body, {
     headers: {
       'Content-Type': 'multipart/form-data',
     },

package/admin/src/pages/SettingsPage/pages/Users/EditPage/utils/api.js

@@ -1,13 +1,16 @@
-import { axiosInstance } from '../../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchUser = async (id) => {
-  const { data } = await axiosInstance.get(`/admin/users/${id}`);
+  const { get } = getFetchClient();
+  const { data } = await get(`/admin/users/${id}`);
 
   return data.data;
 };
 
 const putUser = async (id, body) => {
-  const { data } = await axiosInstance.put(`/admin/users/${id}`, body);
+  const { put } = getFetchClient();
+
+  const { data } = await put(`/admin/users/${id}`, body);
 
   return data.data;
 };

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -15,12 +15,17 @@ import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 
 import { Formik } from 'formik';
-import { Form, GenericInput, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import {
+  Form,
+  GenericInput,
+  useNotification,
+  useOverlayBlocker,
+  useFetchClient,
+} from '@strapi/helper-plugin';
 import { useQueryClient, useMutation } from 'react-query';
 import formDataModel from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/formDataModel';
 import roleSettingsForm from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/roleSettingsForm';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
-import { axiosInstance } from '../../../../../../core/utils';
 import SelectRoles from '../../components/SelectRoles';
 import layout from './utils/layout';
 import schema from './utils/schema';
@@ -34,9 +39,10 @@ const ModalForm = ({ queryName, onToggle }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
+  const { post } = useFetchClient();
   const postMutation = useMutation(
     (body) => {
-      return axiosInstance.post('/admin/users', body);
+      return post('/admin/users', body);
     },
     {
       async onSuccess({ data }) {

package/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -18,7 +18,7 @@ import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import adminPermissions from '../../../../../permissions';
 import TableRows from './DynamicTable/TableRows';
-import Filters from './Filters';
+import Filters from '../../../components/Filters';
 import ModalForm from './ModalForm';
 import PaginationFooter from './PaginationFooter';
 import { deleteData, fetchData } from './utils/api';

package/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/api.js

@@ -1,9 +1,10 @@
-import { axiosInstance } from '../../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchData = async (search, notify) => {
+  const { get } = getFetchClient();
   const {
     data: { data },
-  } = await axiosInstance.get(`/admin/users${search}`);
+  } = await get(`/admin/users${search}`);
 
   notify();
 
@@ -11,7 +12,9 @@ const fetchData = async (search, notify) => {
 };
 
 const deleteData = async (ids) => {
-  await axiosInstance.post('/admin/users/batch-delete', { ids });
+  const { post } = getFetchClient();
+
+  await post('/admin/users/batch-delete', { ids });
 };
 
 export { deleteData, fetchData };

package/admin/src/pages/SettingsPage/pages/Users/components/SelectRoles/index.js

@@ -5,7 +5,7 @@ import { Select, Option } from '@strapi/design-system/Select';
 import { useQuery } from 'react-query';
 import styled, { keyframes } from 'styled-components';
 import LoadingIcon from '@strapi/icons/Loader';
-import { axiosInstance } from '../../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const rotation = keyframes`
   from {
@@ -27,7 +27,8 @@ const Loader = () => (
 );
 
 const fetchData = async () => {
-  const { data } = await axiosInstance.get('/admin/roles');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/roles');
 
   return data.data;
 };

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/index.js

@@ -11,12 +11,12 @@ import {
   to,
   useNotification,
   useOverlayBlocker,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { useModels } from '../../../../../hooks';
-import { axiosInstance } from '../../../../../core/utils';
 import WebhookForm from './components/WebhookForm';
 import cleanData from './utils/formatData';
 
@@ -30,6 +30,7 @@ const EditView = () => {
   const toggleNotification = useNotification();
   const queryClient = useQueryClient();
   const { isLoading: isLoadingForModels, collectionTypes } = useModels();
+  const { post } = useFetchClient();
 
   const isCreating = id === 'create';
 
@@ -64,7 +65,7 @@ const EditView = () => {
     data: triggerResponse,
     isIdle: isTriggerIdle,
     mutate,
-  } = useMutation(() => axiosInstance.post(`/admin/webhooks/${id}/trigger`));
+  } = useMutation(() => post(`/admin/webhooks/${id}/trigger`));
 
   const triggerWebhook = () =>
     mutate(null, {

package/admin/src/translations/en.json

@@ -181,15 +181,16 @@
   "Settings.permissions.auditLogs.action": "Action",
   "Settings.permissions.auditLogs.date": "Date",
   "Settings.permissions.auditLogs.user": "User",
+  "Settings.permissions.auditLogs.user.fullname": "{firstname} {lastname}",
   "Settings.permissions.auditLogs.userId": "User ID",
   "Settings.permissions.auditLogs.details": "Log Details",
   "Settings.permissions.auditLogs.payload": "Payload",
   "Settings.permissions.auditLogs.listview.header.subtitle": "Logs of all the activities that happened in your environment",
-  "Settings.permissions.auditLogs.entry.create": "Create entry ({model})",
-  "Settings.permissions.auditLogs.entry.update": "Update entry ({model})",
-  "Settings.permissions.auditLogs.entry.delete": "Delete entry ({model})",
-  "Settings.permissions.auditLogs.entry.publish": "Publish entry ({model})",
-  "Settings.permissions.auditLogs.entry.unpublish": "Unpublish entry ({model})",
+  "Settings.permissions.auditLogs.entry.create": "Create entry{model, select, undefined {} other { ({model})}}",
+  "Settings.permissions.auditLogs.entry.update": "Update entry{model, select, undefined {} other { ({model})}}",
+  "Settings.permissions.auditLogs.entry.delete": "Delete entry{model, select, undefined {} other { ({model})}}",
+  "Settings.permissions.auditLogs.entry.publish": "Publish entry {model, select, undefined {} other {({model})}}",
+  "Settings.permissions.auditLogs.entry.unpublish": "Unpublish entry{model, select, undefined {} other { ({model})}}",
   "Settings.permissions.auditLogs.media.create": "Create media",
   "Settings.permissions.auditLogs.media.update": "Update media",
   "Settings.permissions.auditLogs.media.delete": "Delete media",
@@ -210,6 +211,7 @@
   "Settings.permissions.auditLogs.permission.create": "Create permission",
   "Settings.permissions.auditLogs.permission.update": "Update permission",
   "Settings.permissions.auditLogs.permission.delete": "Delete permission",
+  "Settings.permissions.auditLogs.filters.combobox.aria-label": "Search and select an option to filter",
   "Settings.profile.form.notify.data.loaded": "Your profile data has been loaded",
   "Settings.profile.form.section.experience.clear.select": "Clear the interface language selected",
   "Settings.profile.form.section.experience.here": "here",