@strapi/admin 4.11.0-alpha.0 → 4.11.0-beta.0

package/admin/src/pages/Admin/Onboarding/index.js

@@ -7,7 +7,6 @@ import {
   Button,
   Divider,
   Flex,
-  FocusTrap,
   Icon,
   Portal,
   PopoverPrimitives,
@@ -119,103 +118,102 @@ const Onboarding = () => {
         <Portal>
           <PopoverPrimitives.Content
             padding={0}
+            onDimiss={handlePopoverVisibility}
             source={triggerRef}
             placement="top-end"
             spacing={12}
           >
-            <FocusTrap onEscape={handlePopoverVisibility}>
-              <Flex
-                justifyContent="space-between"
-                paddingBottom={5}
-                paddingRight={6}
+            <Flex
+              justifyContent="space-between"
+              paddingBottom={5}
+              paddingRight={6}
+              paddingLeft={6}
+              paddingTop={6}
+            >
+              <TypographyLineHeight fontWeight="bold">
+                {formatMessage({
+                  id: 'app.components.Onboarding.title',
+                  defaultMessage: 'Get started videos',
+                })}
+              </TypographyLineHeight>
+              <TextLink
+                as="a"
+                href={WATCH_MORE.href}
+                target="_blank"
+                rel="noreferrer noopener"
+                variant="pi"
+                textColor="primary600"
+              >
+                {formatMessage(WATCH_MORE.label)}
+              </TextLink>
+            </Flex>
+            <Divider />
+            {VIDEO_LINKS.map(({ href, duration, label }, index) => (
+              <VideoLinkWrapper
+                as="a"
+                href={href}
+                target="_blank"
+                rel="noreferrer noopener"
+                key={href}
+                hasRadius
+                paddingTop={4}
+                paddingBottom={4}
                 paddingLeft={6}
-                paddingTop={6}
+                paddingRight={11}
               >
-                <TypographyLineHeight fontWeight="bold">
-                  {formatMessage({
-                    id: 'app.components.Onboarding.title',
-                    defaultMessage: 'Get started videos',
-                  })}
-                </TypographyLineHeight>
-                <TextLink
-                  as="a"
-                  href={WATCH_MORE.href}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  variant="pi"
-                  textColor="primary600"
-                >
-                  {formatMessage(WATCH_MORE.label)}
-                </TextLink>
-              </Flex>
-              <Divider />
-              {VIDEO_LINKS.map(({ href, duration, label }, index) => (
-                <VideoLinkWrapper
-                  as="a"
-                  href={href}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  key={href}
-                  hasRadius
-                  paddingTop={4}
-                  paddingBottom={4}
-                  paddingLeft={6}
-                  paddingRight={11}
-                >
-                  <Box paddingRight={5}>
-                    <Typography textColor="neutral200" variant="alpha">
-                      {index + 1}
-                    </Typography>
-                  </Box>
-                  <Box position="relative">
-                    <Preview src={onboardingPreview} alt="" />
-                    <IconWrapper
-                      position="absolute"
-                      top="50%"
-                      left="50%"
-                      background="primary600"
-                      borderRadius="50%"
-                      justifyContent="center"
-                      width={6}
-                      height={6}
-                    >
-                      <Icon as={Play} color="buttonNeutral0" width={3} height={3} />
-                    </IconWrapper>
-                  </Box>
-                  <Flex direction="column" alignItems="start" paddingLeft={4}>
-                    <Typography fontWeight="bold">{formatMessage(label)}</Typography>
-                    <VisuallyHidden>:</VisuallyHidden>
-                    <Typography textColor="neutral600" variant="pi">
-                      {duration}
-                    </Typography>
-                  </Flex>
-                </VideoLinkWrapper>
+                <Box paddingRight={5}>
+                  <Typography textColor="neutral200" variant="alpha">
+                    {index + 1}
+                  </Typography>
+                </Box>
+                <Box position="relative">
+                  <Preview src={onboardingPreview} alt="" />
+                  <IconWrapper
+                    position="absolute"
+                    top="50%"
+                    left="50%"
+                    background="primary600"
+                    borderRadius="50%"
+                    justifyContent="center"
+                    width={6}
+                    height={6}
+                  >
+                    <Icon as={Play} color="buttonNeutral0" width={3} height={3} />
+                  </IconWrapper>
+                </Box>
+                <Flex direction="column" alignItems="start" paddingLeft={4}>
+                  <Typography fontWeight="bold">{formatMessage(label)}</Typography>
+                  <VisuallyHidden>:</VisuallyHidden>
+                  <Typography textColor="neutral600" variant="pi">
+                    {duration}
+                  </Typography>
+                </Flex>
+              </VideoLinkWrapper>
+            ))}
+            <Flex
+              direction="column"
+              alignItems="stretch"
+              gap={2}
+              paddingLeft={5}
+              paddingTop={2}
+              paddingBottom={5}
+            >
+              {docLinks.map(({ label, href, icon }) => (
+                <Flex gap={3} key={href}>
+                  <Icon as={icon} color="primary600" />
+                  <TextLink
+                    as="a"
+                    href={href}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    variant="sigma"
+                    textColor="primary700"
+                  >
+                    {formatMessage(label)}
+                  </TextLink>
+                </Flex>
               ))}
-              <Flex
-                direction="column"
-                alignItems="stretch"
-                gap={2}
-                paddingLeft={5}
-                paddingTop={2}
-                paddingBottom={5}
-              >
-                {docLinks.map(({ label, href, icon }) => (
-                  <Flex gap={3} key={href}>
-                    <Icon as={icon} color="primary600" />
-                    <TextLink
-                      as="a"
-                      href={href}
-                      target="_blank"
-                      rel="noreferrer noopener"
-                      variant="sigma"
-                      textColor="primary700"
-                    >
-                      {formatMessage(label)}
-                    </TextLink>
-                  </Flex>
-                ))}
-              </Flex>
-            </FocusTrap>
+            </Flex>
           </PopoverPrimitives.Content>
         </Portal>
       )}

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

@@ -11,8 +11,9 @@ import { useHistory } from 'react-router-dom';
 import { LoadingIndicatorPage, useGuidedTour } from '@strapi/helper-plugin';
 import { Layout, Main, Box, Grid, GridItem } from '@strapi/design-system';
 import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
+
 import cornerOrnamentPath from './assets/corner-ornament.svg';
-import { useModels } from '../../hooks';
+import { useContentTypes } from '../../hooks/useContentTypes';
 import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';
 import GuidedTourHomepage from '../../components/GuidedTour/Homepage';
 import SocialLinks from './SocialLinks';
@@ -31,7 +32,7 @@ const LogoContainer = styled(Box)`
 
 const HomePage = () => {
   // Temporary until we develop the menu API
-  const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
+  const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useContentTypes();
   const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
   useLicenseLimitNotification();
 

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/InstallPluginButton.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { useNotification, useTracking } from '@strapi/helper-plugin';
+import { useNotification, useTracking, useClipboard } from '@strapi/helper-plugin';
 import { Box, Icon, Typography } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import CardButton from './CardButton';
@@ -17,14 +17,18 @@ const InstallPluginButton = ({
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
+  const { copy } = useClipboard();
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText(commandToCopy);
-    trackUsage('willInstallPlugin');
-    toggleNotification({
-      type: 'success',
-      message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
-    });
+  const handleCopy = async () => {
+    const didCopy = await copy(commandToCopy);
+
+    if (didCopy) {
+      trackUsage('willInstallPlugin');
+      toggleNotification({
+        type: 'success',
+        message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
+      });
+    }
   };
 
   // Already installed

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

@@ -1,44 +1,46 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { useIntl } from 'react-intl';
-import { ContentBox, useNotification, useTracking } from '@strapi/helper-plugin';
+import { ContentBox, useNotification, useTracking, useClipboard } from '@strapi/helper-plugin';
 import { IconButton } from '@strapi/design-system';
 import { Duplicate, Key } from '@strapi/icons';
 import PropTypes from 'prop-types';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 const TokenBox = ({ token, tokenType }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
-  const trackUsageRef = useRef(trackUsage);
+
+  const { copy } = useClipboard();
+
+  const handleClick = (token) => async () => {
+    const didCopy = await copy(token);
+
+    if (didCopy) {
+      trackUsage.current('didCopyTokenKey', {
+        tokenType,
+      });
+      toggleNotification({
+        type: 'success',
+        message: { id: 'Settings.tokens.notification.copied' },
+      });
+    }
+  };
 
   return (
     <ContentBox
       endAction={
         token && (
           <span style={{ alignSelf: 'start' }}>
-            <CopyToClipboard
-              onCopy={() => {
-                trackUsageRef.current('didCopyTokenKey', {
-                  tokenType,
-                });
-                toggleNotification({
-                  type: 'success',
-                  message: { id: 'Settings.tokens.notification.copied' },
-                });
-              }}
-              text={token}
-            >
-              <IconButton
-                label={formatMessage({
-                  id: 'app.component.CopyToClipboard.label',
-                  defaultMessage: 'Copy to clipboard',
-                })}
-                noBorder
-                icon={<Duplicate />}
-                style={{ padding: 0, height: '1rem' }}
-              />
-            </CopyToClipboard>
+            <IconButton
+              label={formatMessage({
+                id: 'app.component.CopyToClipboard.label',
+                defaultMessage: 'Copy to clipboard',
+              })}
+              onClick={handleClick(token)}
+              noBorder
+              icon={<Duplicate />}
+              style={{ padding: 0, height: '1rem' }}
+            />
           </span>
         )
       }

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}