@strapi/admin 4.10.4 → 4.10.6

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -1,4 +1,3 @@
-import axios from 'axios';
 import { getFetchClient } from '@strapi/helper-plugin';
 import checkLatestStrapiVersion from './checkLatestStrapiVersion';
 import packageJSON from '../../../../../package.json';
@@ -9,10 +8,12 @@ const { get } = getFetchClient();
 
 const fetchStrapiLatestRelease = async (toggleNotification) => {
   try {
-    const {
-      data: { tag_name },
-    } = await axios.get('https://api.github.com/repos/strapi/strapi/releases/latest');
+    const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
 
+    if (!res.ok) {
+      throw new Error('Failed to fetch latest Strapi version.');
+    }
+    const { tag_name } = await res.json();
     const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tag_name);
 
     if (shouldUpdateStrapi && showUpdateNotif) {

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

@@ -15,7 +15,7 @@ import {
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import isEqual from 'react-fast-compare';
+import isEqual from 'lodash/isEqual';
 import {
   createDefaultForm,
   getTrad,
@@ -149,7 +149,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         if (axios.isCancel(err)) {
           return;
         }
-
         const resStatus = get(err, 'response.status', null);
 
         if (resStatus === 404) {

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

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useState } from 'react';
 import get from 'lodash/get';
-import isEqual from 'react-fast-compare';
+import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { Box, Flex, VisuallyHidden } from '@strapi/design-system';
 import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';

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

@@ -2,7 +2,7 @@
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import size from 'lodash/size';
-import isEqual from 'react-fast-compare';
+import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl';
 
 import { NotAllowedInput } from '@strapi/helper-plugin';

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

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
-import isEqual from 'react-fast-compare';
+import isEqual from 'lodash/isEqual';
 import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -2,15 +2,7 @@ import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import {
-  FocusTrap,
-  Button,
-  IconButtonGroup,
-  Option,
-  Select,
-  Popover,
-  Flex,
-} from '@strapi/design-system';
+import { Button, IconButtonGroup, Option, Select, Popover, Flex } from '@strapi/design-system';
 import {
   Bold,
   Italic,
@@ -146,68 +138,72 @@ const WysiwygNav = ({
           icon={<More />}
         />
         {visiblePopover && (
-          <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-            <FocusTrap onEscape={handleTogglePopover} restoreFocus={false}>
-              <Flex>
-                <IconButtonGroupMargin>
-                  <CustomIconButton
-                    onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
-                    id="Strikethrough"
-                    label="Strikethrough"
-                    name="Strikethrough"
-                    icon={<StrikeThrough />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
-                    id="BulletList"
-                    label="BulletList"
-                    name="BulletList"
-                    icon={<BulletList />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
-                    id="NumberList"
-                    label="NumberList"
-                    name="NumberList"
-                    icon={<NumberList />}
-                  />
-                </IconButtonGroupMargin>
-                <IconButtonGroup>
-                  <CustomIconButton
-                    onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
-                    id="Code"
-                    label="Code"
-                    name="Code"
-                    icon={<Code />}
-                  />
-                  <CustomIconButton
-                    onClick={() => {
-                      handleTogglePopover();
-                      onToggleMediaLib();
-                    }}
-                    id="Image"
-                    label="Image"
-                    name="Image"
-                    icon={<Image />}
-                  />
-                  <CustomLinkIconButton
-                    onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
-                    id="Link"
-                    label="Link"
-                    name="Link"
-                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                    icon={<Link />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
-                    id="Quote"
-                    label="Quote"
-                    name="Quote"
-                    icon={<Quote />}
-                  />
-                </IconButtonGroup>
-              </Flex>
-            </FocusTrap>
+          <Popover
+            onDismiss={handleTogglePopover}
+            centered
+            source={buttonMoreRef}
+            spacing={4}
+            id="popover"
+          >
+            <Flex>
+              <IconButtonGroupMargin>
+                <CustomIconButton
+                  onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
+                  id="Strikethrough"
+                  label="Strikethrough"
+                  name="Strikethrough"
+                  icon={<StrikeThrough />}
+                />
+                <CustomIconButton
+                  onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
+                  id="BulletList"
+                  label="BulletList"
+                  name="BulletList"
+                  icon={<BulletList />}
+                />
+                <CustomIconButton
+                  onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
+                  id="NumberList"
+                  label="NumberList"
+                  name="NumberList"
+                  icon={<NumberList />}
+                />
+              </IconButtonGroupMargin>
+              <IconButtonGroup>
+                <CustomIconButton
+                  onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
+                  id="Code"
+                  label="Code"
+                  name="Code"
+                  icon={<Code />}
+                />
+                <CustomIconButton
+                  onClick={() => {
+                    handleTogglePopover();
+                    onToggleMediaLib();
+                  }}
+                  id="Image"
+                  label="Image"
+                  name="Image"
+                  icon={<Image />}
+                />
+                <CustomLinkIconButton
+                  onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
+                  id="Link"
+                  label="Link"
+                  name="Link"
+                  // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                  icon={<Link />}
+                />
+                <CustomIconButton
+                  onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
+                  id="Quote"
+                  label="Quote"
+                  name="Quote"
+                  icon={<Quote />}
+                />
+              </IconButtonGroup>
+            </Flex>
           </Popover>
         )}
       </StyledFlex>

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/index.js

@@ -5,7 +5,6 @@ import { useFetchClient } from '@strapi/helper-plugin';
 import formatLayouts from './utils/formatLayouts';
 import reducer, { initialState } from './reducer';
 import { makeSelectModelAndComponentSchemas } from '../../pages/App/selectors';
-import { getRequestUrl } from '../../utils';
 
 const useFetchContentTypeLayout = (contentTypeUID) => {
   const [{ error, isLoading, layout, layouts }, dispatch] = useReducer(reducer, initialState);
@@ -24,11 +23,11 @@ const useFetchContentTypeLayout = (contentTypeUID) => {
       dispatch({ type: 'GET_DATA' });
 
       try {
-        const endPoint = getRequestUrl(`content-types/${uid}/configuration`);
-
         const {
           data: { data },
-        } = await get(endPoint, { cancelToken: source.token });
+        } = await get(`/content-manager/content-types/${uid}/configuration`, {
+          cancelToken: source.token,
+        });
 
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
@@ -38,7 +37,6 @@ const useFetchContentTypeLayout = (contentTypeUID) => {
         if (axios.isCancel(error)) {
           return;
         }
-
         if (isMounted.current) {
           console.error(error);
         }

package/admin/src/content-manager/pages/App/useContentManagerInitData.js

@@ -10,7 +10,7 @@ import { useNotifyAT } from '@strapi/design-system';
 import axios from 'axios';
 import { useIntl } from 'react-intl';
 import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
-import { getRequestUrl, getTrad } from '../../utils';
+import { getTrad } from '../../utils';
 import { getInitData, resetInitData, setInitData } from './actions';
 import { selectAppDomain } from './selectors';
 import getContentTypeLinks from './utils/getContentTypeLinks';
@@ -36,7 +36,7 @@ const useContentManagerInitData = () => {
         data: {
           data: { components, contentTypes: models, fieldSizes },
         },
-      } = await get(getRequestUrl('init'), { cancelToken: source.token });
+      } = await get('/content-manager/init', { cancelToken: source.token });
       notifyStatus(
         formatMessage({
           id: getTrad('App.schemas.data-loaded'),
@@ -75,7 +75,6 @@ const useContentManagerInitData = () => {
       if (axios.isCancel(err)) {
         return;
       }
-
       console.error(err);
 
       toggleNotification({ type: 'warning', message: { id: 'notification.error' } });

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

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import { CheckPagePermissions, LoadingIndicatorPage, useFetchClient } from '@strapi/helper-plugin';
 import { useSelector, shallowEqual } from 'react-redux';
 import axios from 'axios';
-import { getRequestUrl, mergeMetasWithSchema } from '../../utils';
+import { mergeMetasWithSchema } from '../../utils';
 import { makeSelectModelAndComponentSchemas } from '../App/selectors';
 import permissions from '../../../permissions';
 import crudReducer, { crudInitialState } from '../../sharedReducers/crudReducer/reducer';
@@ -22,23 +22,20 @@ const ComponentSettingsView = () => {
   useEffect(() => {
     const CancelToken = axios.CancelToken;
     const source = CancelToken.source();
-
     const fetchData = async (source) => {
       try {
         dispatch(getData());
 
         const {
           data: { data },
-        } = await get(getRequestUrl(`components/${uid}/configuration`), {
+        } = await get(`/content-manager/components/${uid}/configuration`, {
           cancelToken: source.token,
         });
-
         dispatch(getDataSucceeded(mergeMetasWithSchema(data, schemas, 'component')));
       } catch (err) {
         if (axios.isCancel(err)) {
           return;
         }
-
         console.error(err);
       }
     };

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

@@ -1,6 +1,6 @@
 import React, { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import isEqual from 'react-fast-compare';
+import isEqual from 'lodash/isEqual';
 import { Button } from '@strapi/design-system';
 import { Trash } from '@strapi/icons';
 import { ConfirmDialog, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';

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

@@ -2,7 +2,7 @@ import React, { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import isEqualFastCompare from 'react-fast-compare';
+import isEqualFastCompare from 'lodash/isEqual';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';

package/admin/src/content-manager/pages/EditViewLayoutManager/Permissions.js

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useRBAC, LoadingIndicatorPage } from '@strapi/helper-plugin';
-import isEqual from 'react-fast-compare';
+import isEqual from 'lodash/isEqual';
 import EditView from '../EditView';
 import { generatePermissionsObject } from '../../utils';
 

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

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
-import isEqual from 'react-fast-compare';
+import isEqual from 'lodash/isEqual';
 import { bindActionCreators, compose } from 'redux';
 import { useIntl } from 'react-intl';
 import { useHistory, useLocation, Link as ReactRouterLink } from 'react-router-dom';
@@ -111,7 +111,6 @@ function ListView({
 
       try {
         const opts = source ? { cancelToken: source.token } : null;
-
         const {
           data: { results, pagination: paginationResult },
         } = await fetchClient.get(endPoint, opts);

package/admin/src/hooks/marketplace/constants.js

@@ -0,0 +1 @@
+export const MARKETPLACE_API_URL = 'https://market-api.strapi.io';

package/admin/src/hooks/{useFetchMarketplacePlugins → marketplace/useFetchMarketplacePlugins}/index.js

@@ -1,6 +1,26 @@
 import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
-import { fetchMarketplacePlugins } from './utils/api';
+import qs from 'qs';
+import { MARKETPLACE_API_URL } from '../constants';
+
+const fetchMarketplacePlugins = async (params = {}) => {
+  try {
+    const queryString = qs.stringify(qs.parse(params));
+    const res = await fetch(`${MARKETPLACE_API_URL}/plugins?${queryString}`);
+
+    if (!res.ok) {
+      throw new Error('Failed to fetch marketplace plugins.');
+    }
+
+    const data = await res.json();
+
+    return data;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return null;
+};
 
 const useFetchMarketplacePlugins = (notifyLoad, params) => {
   const toggleNotification = useNotification();

package/admin/src/hooks/{useFetchMarketplaceProviders → marketplace/useFetchMarketplaceProviders}/index.js

@@ -1,6 +1,26 @@
 import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
-import { fetchMarketplaceProviders } from './utils/api';
+import qs from 'qs';
+import { MARKETPLACE_API_URL } from '../constants';
+
+const fetchMarketplaceProviders = async (params = {}) => {
+  try {
+    const queryString = qs.stringify(qs.parse(params));
+    const res = await fetch(`${MARKETPLACE_API_URL}/providers?${queryString}`);
+
+    if (!res.ok) {
+      throw new Error('Failed to fetch marketplace providers.');
+    }
+
+    const data = await res.json();
+
+    return data;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return null;
+};
 
 const useFetchMarketplaceProviders = (notifyLoad, params) => {
   const toggleNotification = useNotification();

package/admin/src/hooks/useReleaseNotification/utils/api.js

@@ -1,13 +1,14 @@
-import axios from 'axios';
 import packageJSON from '../../../../../package.json';
 
 const strapiVersion = packageJSON.version;
-
 const fetchStrapiLatestRelease = async () => {
   try {
-    const {
-      data: { tag_name },
-    } = await axios.get('https://api.github.com/repos/strapi/strapi/releases/latest');
+    const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
+
+    if (!res.ok) {
+      throw new Error('Failed to fetch latest Strapi version.');
+    }
+    const { tag_name } = await res.json();
 
     return tag_name;
   } catch (err) {

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>
       )}