@strapi/admin 4.6.0-beta.2 → 4.6.1

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

@@ -1,45 +1,48 @@
-import React, { useMemo, useReducer, useRef } from 'react';
+import React, { useCallback, useMemo, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { ConfigurationsContext } from '../../contexts';
 import reducer, { initialState } from './reducer';
 
 const ConfigurationsProvider = ({
   children,
-  authLogo,
+  authLogo: defaultAuthLogo,
   menuLogo: defaultMenuLogo,
   showReleaseNotification,
   showTutorials,
 }) => {
-  const [{ menuLogo }, dispatch] = useReducer(reducer, initialState);
+  const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState);
 
-  const updateProjectSettings = ({ menuLogo }) => {
-    return dispatch({
-      type: 'UPDATE_PROJECT_SETTINGS',
-      values: {
-        menuLogo: menuLogo || defaultMenuLogo,
-      },
-    });
-  };
-
-  const updateProjectSettingsRef = useRef(updateProjectSettings);
+  const updateProjectSettings = useCallback(
+    ({ menuLogo, authLogo }) => {
+      return dispatch({
+        type: 'UPDATE_PROJECT_SETTINGS',
+        values: {
+          menuLogo: menuLogo || defaultMenuLogo,
+          authLogo: authLogo || defaultAuthLogo,
+        },
+      });
+    },
+    [defaultAuthLogo, defaultMenuLogo]
+  );
 
   const configurationValue = useMemo(() => {
     return {
       logos: {
         menu: { custom: menuLogo, default: defaultMenuLogo },
-        auth: { custom: null, default: authLogo },
+        auth: { custom: authLogo, default: defaultAuthLogo },
       },
-      updateProjectSettings: updateProjectSettingsRef.current,
+      updateProjectSettings,
       showReleaseNotification,
       showTutorials,
     };
   }, [
-    authLogo,
     menuLogo,
+    defaultMenuLogo,
+    authLogo,
+    defaultAuthLogo,
+    updateProjectSettings,
     showReleaseNotification,
     showTutorials,
-    updateProjectSettingsRef,
-    defaultMenuLogo,
   ]);
 
   return (

package/admin/src/components/ConfigurationsProvider/reducer.js

@@ -9,6 +9,7 @@ import produce from 'immer';
 
 const initialState = {
   menuLogo: null,
+  authLogo: null,
 };
 
 const reducer = (state = initialState, action) =>

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

@@ -12,6 +12,7 @@ import {
   NavSection,
   NavUser,
   NavCondense,
+  NavFooter,
 } from '@strapi/design-system/v2/MainNav';
 import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
@@ -19,9 +20,14 @@ 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';
+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;
@@ -63,6 +69,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
   const history = useHistory();
+  const { post } = getFetchClient();
 
   const initials = userDisplayName
     .split(' ')
@@ -73,7 +80,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');
@@ -183,57 +190,59 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         ) : null}
       </NavSections>
 
-      <NavUser
-        id="main-nav-user-button"
-        ref={buttonRef}
-        onClick={handleToggleUserLinks}
-        initials={initials}
-      >
-        {userDisplayName}
-      </NavUser>
-      {userLinksVisible && (
-        <LinkUserWrapper
-          onBlur={handleBlur}
-          padding={1}
-          shadow="tableShadow"
-          background="neutral0"
-          hasRadius
+      <NavFooter>
+        <NavUser
+          id="main-nav-user-button"
+          ref={buttonRef}
+          onClick={handleToggleUserLinks}
+          initials={initials}
         >
-          <FocusTrap onEscape={handleToggleUserLinks}>
-            <Stack spacing={0}>
-              <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
-                <Typography>
-                  {formatMessage({
-                    id: 'global.profile',
-                    defaultMessage: 'Profile',
-                  })}
-                </Typography>
-              </LinkUser>
-              <LinkUser as="button" tabIndex={0} onClick={handleLogout} logout="logout">
-                <Typography textColor="danger600">
-                  {formatMessage({
-                    id: 'app.components.LeftMenu.logout',
-                    defaultMessage: 'Logout',
-                  })}
-                </Typography>
-                <Exit />
-              </LinkUser>
-            </Stack>
-          </FocusTrap>
-        </LinkUserWrapper>
-      )}
-
-      <NavCondense onClick={() => setCondensed((s) => !s)}>
-        {condensed
-          ? formatMessage({
-              id: 'app.components.LeftMenu.expand',
-              defaultMessage: 'Expand the navbar',
-            })
-          : formatMessage({
-              id: 'app.components.LeftMenu.collapse',
-              defaultMessage: 'Collapse the navbar',
-            })}
-      </NavCondense>
+          {userDisplayName}
+        </NavUser>
+        {userLinksVisible && (
+          <LinkUserWrapper
+            onBlur={handleBlur}
+            padding={1}
+            shadow="tableShadow"
+            background="neutral0"
+            hasRadius
+          >
+            <FocusTrap onEscape={handleToggleUserLinks}>
+              <Stack spacing={0}>
+                <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
+                  <Typography>
+                    {formatMessage({
+                      id: 'global.profile',
+                      defaultMessage: 'Profile',
+                    })}
+                  </Typography>
+                </LinkUser>
+                <LinkUser tabIndex={0} onClick={handleLogout} logout="logout" to="/auth/login">
+                  <Typography textColor="danger600">
+                    {formatMessage({
+                      id: 'app.components.LeftMenu.logout',
+                      defaultMessage: 'Logout',
+                    })}
+                  </Typography>
+                  <Exit />
+                </LinkUser>
+              </Stack>
+            </FocusTrap>
+          </LinkUserWrapper>
+        )}
+
+        <NavCondense onClick={() => setCondensed((s) => !s)}>
+          {condensed
+            ? formatMessage({
+                id: 'app.components.LeftMenu.expand',
+                defaultMessage: 'Expand the navbar',
+              })
+            : formatMessage({
+                id: 'app.components.LeftMenu.collapse',
+                defaultMessage: 'Collapse the navbar',
+              })}
+        </NavCondense>
+      </NavFooter>
     </MainNav>
   );
 };

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

@@ -11,7 +11,7 @@ const Logo = () => {
     logos: { auth },
   } = useConfigurations();
 
-  return <Img src={auth.default} aria-hidden alt="" />;
+  return <Img src={auth?.custom ?? auth.default} aria-hidden alt="" />;
 };
 
 export default Logo;

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

@@ -10,11 +10,11 @@ import {
   formatContentTypeData,
   contentManagementUtilRemoveFieldsFromData,
   useGuidedTour,
+  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,
@@ -51,6 +51,9 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const allLayoutDataRef = useRef(allLayoutData);
 
+  const fetchClient = useFetchClient();
+  const { put, post, del } = fetchClient;
+
   const isCreatingEntry = id === null;
 
   const requestURL = useMemo(() => {
@@ -137,7 +140,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) {
@@ -187,6 +190,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       source.cancel('Operation canceled by the user.');
     };
   }, [
+    fetchClient,
     cleanClonedData,
     cleanReceivedData,
     push,
@@ -216,12 +220,12 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   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 +241,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         return Promise.reject(err);
       }
     },
-    [id, slug, toggleNotification]
+    [id, slug, toggleNotification, del]
   );
 
   const onDeleteSucceeded = useCallback(() => {
@@ -247,12 +251,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 +294,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       toggleNotification,
       setCurrentStep,
       queryClient,
+      post,
     ]
   );
 
@@ -303,7 +307,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 +319,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 +328,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 +347,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 +358,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 +383,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 +394,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 +412,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/DynamicTable/CellContent/RelationMultiple/index.js

@@ -10,19 +10,18 @@ import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
 import { Loader } from '@strapi/design-system/Loader';
 import styled from 'styled-components';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { stopPropagation } from '@strapi/helper-plugin';
+import { stopPropagation, useFetchClient } from '@strapi/helper-plugin';
 import CellValue from '../CellValue';
-import { axiosInstance } from '../../../../../core/utils';
 import { getRequestUrl, getTrad } from '../../../../utils';
 
 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 +36,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,7 +61,7 @@ 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,

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/findLeafByPathAndReplace.js

@@ -21,11 +21,9 @@ export const findLeafByPathAndReplace = (endpath, replaceWith) => {
 
     /**
      * If this is the last item in the array of paths
-     * and the current path is not undefined in the accumulator
      * then we assume it's a leaf and we can replace it.
      */
-
-    if (ind === currentArr.length - 1 && endpath === curr && acc[curr] !== undefined) {
+    if (ind === currentArr.length - 1 && endpath === curr) {
       set(acc, curr, replaceWith);
 
       return acc;

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -216,10 +216,6 @@ const createYupSchemaAttribute = (type, validations, options) => {
     schema = yup
       .mixed(errorsTrads.json)
       .test('isJSON', errorsTrads.json, (value) => {
-        if (value === undefined) {
-          return true;
-        }
-
         try {
           JSON.parse(value);
 
@@ -228,7 +224,12 @@ const createYupSchemaAttribute = (type, validations, options) => {
           return false;
         }
       })
-      .nullable();
+      .nullable()
+      .test('required', errorsTrads.required, (value) => {
+        if (validations.required && !value.length) return false;
+
+        return true;
+      });
   }
 
   if (type === 'email') {

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

@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { Typography } from '@strapi/design-system/Typography';
 
-export const Hint = ({ id, error, name, description }) => {
-  const { formatMessage } = useIntl();
-  const hint = description
-    ? formatMessage(
-        { id: description.id, defaultMessage: description.defaultMessage },
-        { ...description.values }
-      )
-    : '';
-
-  if (!hint || error) {
+export const Hint = ({ id, error, name, hint }) => {
+  if (hint.length === 0 || error) {
     return null;
   }
 
@@ -25,16 +16,12 @@ export const Hint = ({ id, error, name, description }) => {
 
 Hint.defaultProps = {
   id: undefined,
-  description: undefined,
   error: undefined,
+  hint: '',
 };
 
 Hint.propTypes = {
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   error: PropTypes.string,
   id: PropTypes.string,
   name: PropTypes.string.isRequired,

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import { TextInput } from '@strapi/design-system/TextInput';
@@ -9,7 +9,6 @@ import Refresh from '@strapi/icons/Refresh';
 import CheckCircle from '@strapi/icons/CheckCircle';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Loader from '@strapi/icons/Loader';
-import { axiosInstance } from '../../../core/utils';
 import { getRequestUrl } from '../../utils';
 import useDebounce from './useDebounce';
 import UID_REGEX from './regex';
@@ -23,7 +22,7 @@ import {
 const InputUID = ({
   attribute,
   contentTypeUID,
-  description,
+  hint,
   disabled,
   error,
   intlLabel,
@@ -46,6 +45,7 @@ const InputUID = ({
   const debouncedTargetFieldValue = useDebounce(modifiedData[attribute.targetField], 300);
   const [isCustomized, setIsCustomized] = useState(false);
   const [regenerateLabel, setRegenerateLabel] = useState(null);
+  const { post } = useFetchClient();
 
   const label = intlLabel.id
     ? formatMessage(
@@ -54,13 +54,6 @@ const InputUID = ({
       )
     : name;
 
-  const hint = description
-    ? formatMessage(
-        { id: description.id, defaultMessage: description.defaultMessage },
-        { ...description.values }
-      )
-    : '';
-
   const formattedPlaceholder = placeholder
     ? formatMessage(
         { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
@@ -74,7 +67,7 @@ const InputUID = ({
     try {
       const {
         data: { data },
-      } = await axiosInstance.post(requestURL, {
+      } = await post(requestURL, {
         contentTypeUID,
         field: name,
         data: modifiedData,
@@ -96,7 +89,7 @@ const InputUID = ({
     }
 
     try {
-      const { data } = await axiosInstance.post(requestURL, {
+      const { data } = await post(requestURL, {
         contentTypeUID,
         field: name,
         value: value ? value.trim() : '',
@@ -251,11 +244,6 @@ InputUID.propTypes = {
     required: PropTypes.bool,
   }).isRequired,
   contentTypeUID: PropTypes.string.isRequired,
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
   disabled: PropTypes.bool,
   error: PropTypes.string,
   intlLabel: PropTypes.shape({
@@ -273,16 +261,17 @@ InputUID.propTypes = {
     values: PropTypes.object,
   }),
   required: PropTypes.bool,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
 };
 
 InputUID.defaultProps = {
-  description: undefined,
   disabled: false,
   error: undefined,
   labelAction: undefined,
   placeholder: undefined,
   value: '',
   required: false,
+  hint: '',
 };
 
 export default InputUID;

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

@@ -9,7 +9,6 @@ import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
-import InputJSON from '../InputJSON';
 import InputUID from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 
@@ -250,7 +249,6 @@ function Inputs({
   }
 
   const customInputs = {
-    json: InputJSON,
     uid: InputUID,
     media: fields.media,
     wysiwyg: Wysiwyg,