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

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

@@ -48,29 +48,29 @@ const Providers = ({
   themes,
 }) => {
   return (
-    <ThemeToggleProvider themes={themes}>
-      <Theme>
-        <QueryClientProvider client={queryClient}>
-          <Provider store={store}>
-            <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-              <ConfigurationsProvider
-                authLogo={authLogo}
-                menuLogo={menuLogo}
-                showReleaseNotification={showReleaseNotification}
-                showTutorials={showTutorials}
-              >
-                <StrapiAppProvider
-                  getPlugin={getPlugin}
-                  menu={menu}
-                  plugins={plugins}
-                  runHookParallel={runHookParallel}
-                  runHookWaterfall={runHookWaterfall}
-                  runHookSeries={runHookSeries}
-                  settings={settings}
+    <LanguageProvider messages={messages} localeNames={localeNames}>
+      <ThemeToggleProvider themes={themes}>
+        <Theme>
+          <QueryClientProvider client={queryClient}>
+            <Provider store={store}>
+              <AdminContext.Provider value={{ getAdminInjectedComponents }}>
+                <ConfigurationsProvider
+                  authLogo={authLogo}
+                  menuLogo={menuLogo}
+                  showReleaseNotification={showReleaseNotification}
+                  showTutorials={showTutorials}
                 >
-                  <LibraryProvider components={components} fields={fields}>
-                    <CustomFieldsProvider customFields={customFields}>
-                      <LanguageProvider messages={messages} localeNames={localeNames}>
+                  <StrapiAppProvider
+                    getPlugin={getPlugin}
+                    menu={menu}
+                    plugins={plugins}
+                    runHookParallel={runHookParallel}
+                    runHookWaterfall={runHookWaterfall}
+                    runHookSeries={runHookSeries}
+                    settings={settings}
+                  >
+                    <LibraryProvider components={components} fields={fields}>
+                      <CustomFieldsProvider customFields={customFields}>
                         <AutoReloadOverlayBlockerProvider>
                           <OverlayBlockerProvider>
                             <GuidedTour>
@@ -78,16 +78,16 @@ const Providers = ({
                             </GuidedTour>
                           </OverlayBlockerProvider>
                         </AutoReloadOverlayBlockerProvider>
-                      </LanguageProvider>
-                    </CustomFieldsProvider>
-                  </LibraryProvider>
-                </StrapiAppProvider>
-              </ConfigurationsProvider>
-            </AdminContext.Provider>
-          </Provider>
-        </QueryClientProvider>
-      </Theme>
-    </ThemeToggleProvider>
+                      </CustomFieldsProvider>
+                    </LibraryProvider>
+                  </StrapiAppProvider>
+                </ConfigurationsProvider>
+              </AdminContext.Provider>
+            </Provider>
+          </QueryClientProvider>
+        </Theme>
+      </ThemeToggleProvider>
+    </LanguageProvider>
   );
 };
 

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

@@ -1,17 +1,19 @@
 import React from 'react';
-import { ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';
 
 const Theme = ({ children }) => {
   const { currentTheme, themes } = useThemeToggle();
+  const { locale } = useIntl();
 
   return (
-    <ThemeProvider theme={themes[currentTheme] || themes.light}>
+    <DesignSystemProvider locale={locale} theme={themes[currentTheme] || themes.light}>
       {children}
       <GlobalStyle />
-    </ThemeProvider>
+    </DesignSystemProvider>
   );
 };
 

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';
@@ -12,14 +12,7 @@ import Wysiwyg from '../Wysiwyg';
 import InputUID from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 
-import {
-  connect,
-  generateOptions,
-  getInputType,
-  getStep,
-  select,
-  VALIDATIONS_TO_OMIT,
-} from './utils';
+import { connect, generateOptions, getInputType, select, VALIDATIONS_TO_OMIT } from './utils';
 
 function Inputs({
   allowedFields,
@@ -93,9 +86,7 @@ function Inputs({
     return value;
   }, [type, value]);
 
-  const step = useMemo(() => {
-    return getStep(type);
-  }, [type]);
+  const step = getStep(type);
 
   const isUserAllowedToEditField = useMemo(() => {
     const joinedName = fieldName.join('.');
@@ -184,6 +175,9 @@ function Inputs({
 
     let minutes;
 
+    /**
+     * Wtf is this?
+     */
     if (inputType === 'datetime') {
       minutes = parseInt(inputValue.substr(14, 2), 10);
     } else if (inputType === 'time') {
@@ -316,6 +310,19 @@ Inputs.propTypes = {
   customFieldInputs: PropTypes.object,
 };
 
+const getStep = (type) => {
+  switch (type) {
+    case 'float':
+    case 'decimal':
+      return 0.01;
+    case 'time':
+    case 'datetime':
+      return 15;
+    default:
+      return 1;
+  }
+};
+
 const Memoized = memo(Inputs, isEqual);
 
 export default connect(Memoized, select);

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

@@ -1,6 +1,5 @@
 export { default as connect } from './connect';
 export { default as generateOptions } from './generateOptions';
 export { default as getInputType } from './getInputType';
-export { default as getStep } from './getStep';
 export { default as select } from './select';
 export { default as VALIDATIONS_TO_OMIT } from './VALIDATIONS_TO_OMIT';

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: [],
+});