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

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';
@@ -158,7 +158,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/index.js

@@ -1,5 +1,5 @@
 export { default as useConfigurations } from './useConfigurations';
-export { default as useModels } from './useModels';
+export { useContentTypes } from './useContentTypes';
 export { default as useFetchPermissionsLayout } from './useFetchPermissionsLayout';
 export { default as useFetchRole } from './useFetchRole';
 export { default as useMenu } from './useMenu';

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

@@ -0,0 +1,5 @@
+export const useAdminUsers = jest.fn().mockReturnValue({
+  users: [],
+  isLoading: false,
+  isError: false,
+});

package/admin/src/hooks/useAdminUsers/index.js

@@ -0,0 +1 @@
+export * from './useAdminUsers';

package/admin/src/hooks/useAdminUsers/useAdminUsers.js

@@ -0,0 +1,38 @@
+import { useQuery } from 'react-query';
+import { useFetchClient } from '@strapi/helper-plugin';
+import { stringify } from 'qs';
+
+export function useAdminUsers(params = {}, queryOptions = {}) {
+  const { id = '', ...queryParams } = params;
+  const queryString = stringify(queryParams, { encode: false });
+
+  const { get } = useFetchClient();
+
+  const { data, isError, isLoading, refetch } = useQuery(
+    ['users', id, queryParams],
+    async () => {
+      const {
+        data: { data },
+      } = await get(`/admin/users/${id}${queryString ? `?${queryString}` : ''}`);
+
+      return data;
+    },
+    queryOptions
+  );
+
+  let users = [];
+
+  if (id && data) {
+    users = [data];
+  } else if (Array.isArray(data?.results)) {
+    users = data.results;
+  }
+
+  return {
+    users,
+    pagination: data?.pagination ?? null,
+    isLoading,
+    isError,
+    refetch,
+  };
+}

package/admin/src/hooks/useContentTypes/__mocks__/index.js

@@ -0,0 +1,6 @@
+export const useContentTypes = jest.fn().mockReturnValue({
+  isLoading: false,
+  components: [],
+  collectionTypes: [],
+  singleTypes: [],
+});

package/admin/src/hooks/useContentTypes/index.js

@@ -0,0 +1 @@
+export * from './useContentTypes';

package/admin/src/hooks/useContentTypes/useContentTypes.js

@@ -0,0 +1,47 @@
+import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { useQueries } from 'react-query';
+
+export function useContentTypes() {
+  console.log('----> read');
+
+  const { get } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+  const toggleNotification = useNotification();
+  const queries = useQueries(
+    ['components', 'content-types'].map((type) => {
+      return {
+        queryKey: ['content-manager', type],
+        async queryFn() {
+          const {
+            data: { data },
+          } = await get(`/content-manager/${type}`);
+
+          return data;
+        },
+        onError(error) {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(error),
+          });
+        },
+      };
+    })
+  );
+
+  const [components, contentTypes] = queries;
+  const isLoading = components.isLoading || contentTypes.isLoading;
+
+  const collectionTypes = (contentTypes?.data ?? []).filter(
+    (contentType) => contentType.kind === 'collectionType' && contentType.isDisplayed
+  );
+  const singleTypes = (contentTypes?.data ?? []).filter(
+    (contentType) => contentType.kind !== 'collectionType' && contentType.isDisplayed
+  );
+
+  return {
+    isLoading,
+    components: components?.data ?? [],
+    collectionTypes,
+    singleTypes,
+  };
+}

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