@strapi/admin 4.6.0-beta.2 → 4.6.1

package/admin/src/content-manager/pages/EditView/{Informations → Information}/index.js

@@ -1,25 +1,40 @@
 import React, { useRef } from 'react';
+import propTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
-import { Typography } from '@strapi/design-system/Typography';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Divider, Flex, Stack, Typography } from '@strapi/design-system';
+
 import { getTrad } from '../../../utils';
 import getUnits from './utils/getUnits';
 import { getFullName } from '../../../../utils';
 
-const Informations = () => {
+const KeyValuePair = ({ label, value }) => {
+  return (
+    <Flex justifyContent="space-between">
+      <Typography as="dt" fontWeight="bold" textColor="neutral600">
+        {label}
+      </Typography>
+      <Typography as="dd">{value}</Typography>
+    </Flex>
+  );
+};
+
+KeyValuePair.propTypes = {
+  label: propTypes.string.isRequired,
+  value: propTypes.string.isRequired,
+};
+
+const Information = () => {
   const { formatMessage, formatRelativeTime } = useIntl();
   const { initialData, isCreatingEntry } = useCMEditViewDataManager();
   const currentTime = useRef(Date.now());
 
   const getFieldInfo = (atField, byField) => {
-    const userFirstname = initialData[byField]?.firstname || '';
-    const userLastname = initialData[byField]?.lastname || '';
-    const userUsername = initialData[byField]?.username;
-    const user = userUsername || getFullName(userFirstname, userLastname);
+    const { firstname, lastname, username } = initialData[byField] ?? {};
+
+    const userFirstname = firstname ?? '';
+    const userLastname = lastname ?? '';
+    const user = username ?? getFullName(userFirstname, userLastname);
     const timestamp = initialData[atField] ? new Date(initialData[atField]).getTime() : Date.now();
     const elapsed = timestamp - currentTime.current;
     const { unit, value } = getUnits(-elapsed);
@@ -34,56 +49,57 @@ const Informations = () => {
   const created = getFieldInfo('createdAt', 'createdBy');
 
   return (
-    <Box>
-      <Typography variant="sigma" textColor="neutral600" id="additional-informations">
+    <Stack spacing={2}>
+      <Typography variant="sigma" textColor="neutral600" id="additional-information">
         {formatMessage({
           id: getTrad('containers.Edit.information'),
           defaultMessage: 'Information',
         })}
       </Typography>
-      <Box paddingTop={2} paddingBottom={6}>
+
+      <Box paddingBottom={4}>
         <Divider />
       </Box>
+
       <Stack spacing={4}>
-        <Flex justifyContent="space-between">
-          <Typography fontWeight="bold">
-            {formatMessage({
+        <Stack spacing={2} as="dl">
+          <KeyValuePair
+            label={formatMessage({
               id: getTrad('containers.Edit.information.created'),
               defaultMessage: 'Created',
             })}
-          </Typography>
-          <Typography>{created.at}</Typography>
-        </Flex>
-        <Flex justifyContent="space-between">
-          <Typography fontWeight="bold">
-            {formatMessage({
+            value={created.at}
+          />
+
+          <KeyValuePair
+            label={formatMessage({
               id: getTrad('containers.Edit.information.by'),
               defaultMessage: 'By',
             })}
-          </Typography>
-          <Typography>{created.by}</Typography>
-        </Flex>
-        <Flex justifyContent="space-between">
-          <Typography fontWeight="bold">
-            {formatMessage({
+            value={created.by}
+          />
+        </Stack>
+
+        <Stack spacing={2} as="dl">
+          <KeyValuePair
+            label={formatMessage({
               id: getTrad('containers.Edit.information.lastUpdate'),
               defaultMessage: 'Last update',
             })}
-          </Typography>
-          <Typography>{updated.at}</Typography>
-        </Flex>
-        <Flex justifyContent="space-between">
-          <Typography fontWeight="bold">
-            {formatMessage({
+            value={updated.at}
+          />
+
+          <KeyValuePair
+            label={formatMessage({
               id: getTrad('containers.Edit.information.by'),
               defaultMessage: 'By',
             })}
-          </Typography>
-          <Typography>{updated.by}</Typography>
-        </Flex>
+            value={updated.by}
+          />
+        </Stack>
       </Stack>
-    </Box>
+    </Stack>
   );
 };
 
-export default Informations;
+export default Information;

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

@@ -25,7 +25,7 @@ import SingleTypeFormWrapper from '../../components/SingleTypeFormWrapper';
 import { getTrad } from '../../utils';
 import useLazyComponents from '../../hooks/useLazyComponents';
 import DraftAndPublishBadge from './DraftAndPublishBadge';
-import Informations from './Informations';
+import Information from './Information';
 import Header from './Header';
 import { getFieldsActionMatchingPermissions } from './utils';
 import DeleteLink from './DeleteLink';
@@ -175,7 +175,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                       <DraftAndPublishBadge />
                       <Box
                         as="aside"
-                        aria-labelledby="additional-informations"
+                        aria-labelledby="additional-information"
                         background="neutral0"
                         borderColor="neutral150"
                         hasRadius
@@ -185,7 +185,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                         paddingTop={6}
                         shadow="tableShadow"
                       >
-                        <Informations />
+                        <Information />
                         <InjectionZone area="contentManager.editView.informations" />
                       </Box>
                       <Box as="aside" aria-labelledby="links">

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/store/configureStore.js

@@ -1,5 +1,4 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import createReducer from './createReducer';
+import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
 
 const configureStore = (appMiddlewares, appReducers) => {
   let composeEnhancers = compose;
@@ -19,11 +18,30 @@ const configureStore = (appMiddlewares, appReducers) => {
     composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
   }
 
-  return createStore(
-    createReducer(appReducers),
+  const store = createStore(
+    createReducer(appReducers, {}),
     {},
     composeEnhancers(applyMiddleware(...middlewares))
   );
+
+  // Add a dictionary to keep track of the registered async reducers
+  store.asyncReducers = {};
+
+  // Create an inject reducer function
+  // This function adds the async reducer, and creates a new combined reducer
+  store.injectReducer = (key, asyncReducer) => {
+    store.asyncReducers[key] = asyncReducer;
+    store.replaceReducer(createReducer(appReducers, store.asyncReducers));
+  };
+
+  return store;
+};
+
+const createReducer = (appReducers, asyncReducers) => {
+  return combineReducers({
+    ...appReducers,
+    ...asyncReducers,
+  });
 };
 
 export default configureStore;

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/hooks/useSettingsMenu/init.js

@@ -1,7 +1,7 @@
 import omit from 'lodash/omit';
 import sortLinks from './utils/sortLinks';
-import adminPermissions from '../../permissions';
 import formatLinks from './utils/formatLinks';
+import adminLinks from './utils/adminLinks';
 import globalLinks from './utils/globalLinks';
 
 const init = (initialState, { settings, shouldUpdateStrapi }) => {
@@ -23,30 +23,7 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
     {
       id: 'permissions',
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
-      links: [
-        {
-          intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
-          to: '/settings/audit-logs?pageSize=50&page=1&sort=date:DESC',
-          id: 'auditLogs',
-          isDisplayed: false,
-          permissions: adminPermissions.settings.auditLogs.main,
-        },
-        {
-          intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
-          to: '/settings/roles',
-          id: 'roles',
-          isDisplayed: false,
-          permissions: adminPermissions.settings.roles.main,
-        },
-        {
-          intlLabel: { id: 'global.users' },
-          // Init the search params directly
-          to: '/settings/users?pageSize=10&page=1&sort=firstname',
-          id: 'users',
-          isDisplayed: false,
-          permissions: adminPermissions.settings.users.main,
-        },
-      ],
+      links: adminLinks,
     },
     ...otherSections,
   ];

package/admin/src/hooks/useSettingsMenu/utils/adminLinks.js

@@ -0,0 +1,4 @@
+import customAdminLinks from 'ee_else_ce/hooks/useSettingsMenu/utils/customAdminLinks';
+import defaultAdminLinks from './defaultAdminLinks';
+
+export default [...customAdminLinks, ...defaultAdminLinks];

package/admin/src/hooks/useSettingsMenu/utils/customAdminLinks.js

@@ -0,0 +1 @@
+export default [];

package/admin/src/hooks/useSettingsMenu/utils/defaultAdminLinks.js

@@ -0,0 +1,21 @@
+import adminPermissions from '../../../permissions';
+
+const defaultAdminLinks = [
+  {
+    intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
+    to: '/settings/roles',
+    id: 'roles',
+    isDisplayed: false,
+    permissions: adminPermissions.settings.roles.main,
+  },
+  {
+    intlLabel: { id: 'global.users' },
+    // Init the search params directly
+    to: '/settings/users?pageSize=10&page=1&sort=firstname',
+    id: 'users',
+    isDisplayed: false,
+    permissions: adminPermissions.settings.users.main,
+  },
+];
+
+export default defaultAdminLinks;

package/admin/src/index.js

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom';
+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';
@@ -12,6 +12,7 @@ window.strapi = {
   telemetryDisabled: process.env.STRAPI_TELEMETRY_DISABLED ?? false,
   features: {
     SSO: 'sso',
+    AUDIT_LOGS: 'audit-logs',
   },
   projectType: 'Community',
 };
@@ -28,18 +29,18 @@ 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 = {
       ...window.strapi.features,
-      allFeatures: features,
-      isEnabled: (f) => features.includes(f),
+      isEnabled: (featureName) => features.some((feature) => feature.name === featureName),
     };
 
     window.strapi.projectType = isEE ? 'Enterprise' : 'Community';

package/admin/src/pages/App/index.js

@@ -80,11 +80,15 @@ function App() {
       try {
         const {
           data: {
-            data: { hasAdmin, uuid, menuLogo },
+            data: { hasAdmin, uuid, menuLogo, authLogo },
           },
         } = await axios.get(`${strapi.backendURL}/admin/init`);
 
-        updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
+        updateProjectSettings({
+          menuLogo: prefixFileUrlWithBackendUrl(menuLogo),
+          authLogo: prefixFileUrlWithBackendUrl(authLogo),
+        });
+
         const deviceId = await getUID();
 
         if (uuid) {

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() {