@strapi/admin 4.10.4 → 4.10.6

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

@@ -6,7 +6,6 @@
 
 import React, { useEffect, useState, useMemo, lazy, Suspense } from 'react';
 import { Switch, Route } from 'react-router-dom';
-import axios from 'axios';
 import {
   LoadingIndicatorPage,
   auth,
@@ -100,10 +99,7 @@ function App() {
           setTelemetryProperties(properties);
 
           try {
-            /**
-             * TODO: remove this call to `axios`
-             */
-            await axios.post('https://analytics.strapi.io/api/v2/track', {
+            await post('https://analytics.strapi.io/api/v2/track', {
               // This event is anonymous
               event: 'didInitializeAdministration',
               userId: '',

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -5,7 +5,6 @@ import omit from 'lodash/omit';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Formik } from 'formik';
-import axios from 'axios';
 import {
   Form,
   useQuery,
@@ -14,6 +13,7 @@ import {
   getYupInnerErrors,
   Link,
   useAPIErrorHandler,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import {
   Box,
@@ -52,6 +52,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
   const { formatMessage } = useIntl();
   const query = useQuery();
   const { formatAPIError } = useAPIErrorHandler();
+  const { get } = useFetchClient();
 
   const registrationToken = query.get('registrationToken');
 
@@ -61,9 +62,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
         try {
           const {
             data: { data },
-          } = await axios.get(
-            `${strapi.backendURL}/admin/registration-info?registrationToken=${registrationToken}`
-          );
+          } = await get(`/admin/registration-info?registrationToken=${registrationToken}`);
 
           if (data) {
             setUserInfo(data);

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

@@ -4,7 +4,7 @@ import camelCase from 'lodash/camelCase';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
-import { auth, useQuery, useGuidedTour, useTracking } from '@strapi/helper-plugin';
+import { auth, useQuery, useGuidedTour, useTracking, useFetchClient } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import forms from 'ee_else_ce/pages/AuthPage/utils/forms';
 import persistStateToLocaleStorage from '../../components/GuidedTour/utils/persistStateToLocaleStorage';
@@ -46,6 +46,8 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const { post } = useFetchClient();
+
   // Reset the state on navigation change
   useEffect(() => {
     dispatch({
@@ -85,12 +87,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
 
   const forgotPasswordRequest = async (body, requestURL, { setSubmitting, setErrors }) => {
     try {
-      await axios({
-        method: 'POST',
-        url: `${strapi.backendURL}${requestURL}`,
-        data: body,
-        cancelToken: source.token,
-      });
+      await post(requestURL, body, { cancelToken: source.token });
 
       push('/auth/forgot-password-success');
     } catch (err) {
@@ -108,12 +105,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         data: {
           data: { token, user },
         },
-      } = await axios({
-        method: 'POST',
-        url: `${strapi.backendURL}${requestURL}`,
-        data: omit(body, fieldsToOmit),
-        cancelToken: source.token,
-      });
+      } = await post(requestURL, omit(body, fieldsToOmit), { cancelToken: source.token });
 
       if (user.preferedLanguage) {
         changeLocale(user.preferedLanguage);
@@ -151,17 +143,11 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   const registerRequest = async (body, requestURL, { setSubmitting, setErrors }) => {
     try {
       trackUsage('willCreateFirstAdmin');
-
       const {
         data: {
           data: { token, user },
         },
-      } = await axios({
-        method: 'POST',
-        url: `${strapi.backendURL}${requestURL}`,
-        data: omit(body, fieldsToOmit),
-        cancelToken: source.token,
-      });
+      } = await post(requestURL, omit(body, fieldsToOmit), { cancelToken: source.token });
 
       auth.setToken(token, false);
       auth.setUserInfo(user, false);
@@ -212,12 +198,11 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         data: {
           data: { token, user },
         },
-      } = await axios({
-        method: 'POST',
-        url: `${strapi.backendURL}${requestURL}`,
-        data: { ...body, resetPasswordToken: query.get('code') },
-        cancelToken: source.token,
-      });
+      } = await post(
+        requestURL,
+        { ...body, resetPasswordToken: query.get('code') },
+        { cancelToken: source.token }
+      );
 
       auth.setToken(token, false);
       auth.setUserInfo(user, false);

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Popover, Flex, FocusTrap } from '@strapi/design-system';
+import { Popover, Flex } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import FilterSelect from './FilterSelect';
 
@@ -18,60 +18,58 @@ const FiltersPopover = ({
   const { formatMessage } = useIntl();
 
   return (
-    <Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
-      <FocusTrap onEscape={onToggle}>
-        <FiltersFlex direction="column" alignItems="stretch" gap={1}>
+    <Popover source={source} onDismiss={onToggle} padding={3} spacing={4}>
+      <FiltersFlex direction="column" alignItems="stretch" gap={1}>
+        <FilterSelect
+          message={formatMessage({
+            id: 'admin.pages.MarketPlacePage.filters.collections',
+            defaultMessage: 'Collections',
+          })}
+          value={query?.collections || []}
+          onChange={(newCollections) => {
+            const update = { collections: newCollections };
+            handleSelectChange(update);
+          }}
+          onClear={() => handleSelectClear('collections')}
+          possibleFilters={possibleCollections}
+          customizeContent={(values) =>
+            formatMessage(
+              {
+                id: 'admin.pages.MarketPlacePage.filters.collectionsSelected',
+                defaultMessage:
+                  '{count, plural, =0 {No collections} one {# collection} other {# collections}} selected',
+              },
+              { count: values.length }
+            )
+          }
+        />
+        {npmPackageType === 'plugin' && (
           <FilterSelect
             message={formatMessage({
-              id: 'admin.pages.MarketPlacePage.filters.collections',
-              defaultMessage: 'Collections',
+              id: 'admin.pages.MarketPlacePage.filters.categories',
+              defaultMessage: 'Categories',
             })}
-            value={query?.collections || []}
-            onChange={(newCollections) => {
-              const update = { collections: newCollections };
+            value={query?.categories || []}
+            onChange={(newCategories) => {
+              const update = { categories: newCategories };
               handleSelectChange(update);
             }}
-            onClear={() => handleSelectClear('collections')}
-            possibleFilters={possibleCollections}
+            onClear={() => handleSelectClear('categories')}
+            possibleFilters={possibleCategories}
             customizeContent={(values) =>
               formatMessage(
                 {
-                  id: 'admin.pages.MarketPlacePage.filters.collectionsSelected',
+                  id: 'admin.pages.MarketPlacePage.filters.categoriesSelected',
                   defaultMessage:
-                    '{count, plural, =0 {No collections} one {# collection} other {# collections}} selected',
+                    '{count, plural, =0 {No categories} one {# category} other {# categories}} selected',
                 },
                 { count: values.length }
               )
             }
+            name="categories"
           />
-          {npmPackageType === 'plugin' && (
-            <FilterSelect
-              message={formatMessage({
-                id: 'admin.pages.MarketPlacePage.filters.categories',
-                defaultMessage: 'Categories',
-              })}
-              value={query?.categories || []}
-              onChange={(newCategories) => {
-                const update = { categories: newCategories };
-                handleSelectChange(update);
-              }}
-              onClear={() => handleSelectClear('categories')}
-              possibleFilters={possibleCategories}
-              customizeContent={(values) =>
-                formatMessage(
-                  {
-                    id: 'admin.pages.MarketPlacePage.filters.categoriesSelected',
-                    defaultMessage:
-                      '{count, plural, =0 {No categories} one {# category} other {# categories}} selected',
-                  },
-                  { count: values.length }
-                )
-              }
-              name="categories"
-            />
-          )}
-        </FiltersFlex>
-      </FocusTrap>
+        )}
+      </FiltersFlex>
     </Popover>
   );
 };

package/admin/src/pages/MarketplacePage/utils/useMarketplaceData.js

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useNotifyAT } from '@strapi/design-system';
-import useFetchMarketplacePlugins from '../../../hooks/useFetchMarketplacePlugins';
-import useFetchMarketplaceProviders from '../../../hooks/useFetchMarketplaceProviders';
+import useFetchMarketplacePlugins from '../../../hooks/marketplace/useFetchMarketplacePlugins';
+import useFetchMarketplaceProviders from '../../../hooks/marketplace/useFetchMarketplaceProviders';
 
 function useMarketplaceData({ npmPackageType, debouncedSearch, query, tabQuery }) {
   const { notifyStatus } = useNotifyAT();

package/admin/src/pages/SettingsPage/components/Tokens/TokenDescription/index.js

@@ -12,7 +12,7 @@ const TokenDescription = ({ errors, values, onChange, canEditInputs }) => {
         id: 'Settings.tokens.form.description',
         defaultMessage: 'Description',
       })}
-      name="description"
+      id="description"
       error={
         errors.description
           ? formatMessage(

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

@@ -1,8 +1,9 @@
-import axios from 'axios';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const urlToFile = async (url) => {
   try {
-    const res = await axios.get(url, { responseType: 'blob', timeout: 8000 });
+    const { get } = getFetchClient();
+    const res = await get(url, { responseType: 'blob', timeout: 8000 });
     const loadedFile = new File([res.data], res.config.url, {
       type: res.headers['content-type'],
     });

package/admin/src/pages/SettingsPage/pages/Roles/CreatePage/index.js

@@ -219,7 +219,7 @@ const CreatePage = () => {
                               id: 'global.description',
                               defaultMessage: 'Description',
                             })}
-                            name="description"
+                            id="description"
                             error={errors.description && formatMessage({ id: errors.description })}
                             onChange={handleChange}
                           >

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js

@@ -74,7 +74,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                 id: 'global.description',
                 defaultMessage: 'Description',
               })}
-              name="description"
+              id="description"
               error={errors.name && formatMessage({ id: errors.name })}
               onChange={onChange}
               onBlur={onBlur}

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

@@ -5,7 +5,18 @@ import { useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import EventRow from './EventRow';
-import formatValue from './utils/formatValue';
+
+export const formatValue = (value) =>
+  value.reduce((acc, curr) => {
+    const key = curr.split('.')[0];
+
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(curr);
+
+    return acc;
+  }, {});
 
 const StyledTable = styled.table`
   td {