@strapi/admin 4.10.0-beta.0 → 4.10.0-beta.1

package/admin/src/content-manager/sharedReducers/crudReducer/actions.js

@@ -2,6 +2,7 @@ import {
   GET_DATA,
   GET_DATA_SUCCEEDED,
   INIT_FORM,
+  UPDATE_PARTIAL_DATA,
   RESET_PROPS,
   SET_DATA_STRUCTURES,
   SET_STATUS,
@@ -47,3 +48,8 @@ export const submitSucceeded = (data) => ({
 export const clearSetModifiedDataOnly = () => ({
   type: CLEAR_SET_MODIFIED_DATA_ONLY,
 });
+
+export const updatePartialData = (data) => ({
+  type: UPDATE_PARTIAL_DATA,
+  data,
+});

package/admin/src/content-manager/sharedReducers/crudReducer/constants.js

@@ -7,3 +7,4 @@ export const SET_STATUS = 'ContentManager/CrudReducer/SET_STATUS';
 export const SUBMIT_SUCCEEDED = 'ContentManager/CrudReducer/SUBMIT_SUCCEEDED';
 export const CLEAR_SET_MODIFIED_DATA_ONLY =
   'ContentManager/CrudReducer/CLEAR_SET_MODIFIED_DATA_ONLY';
+export const UPDATE_PARTIAL_DATA = 'ContentManager/CrudReducer/PARTIAL_DATA_UPDATE';

package/admin/src/content-manager/sharedReducers/crudReducer/reducer.js

@@ -12,6 +12,7 @@ import {
   GET_DATA,
   GET_DATA_SUCCEEDED,
   INIT_FORM,
+  UPDATE_PARTIAL_DATA,
   RESET_PROPS,
   SET_DATA_STRUCTURES,
   SET_STATUS,
@@ -53,6 +54,10 @@ const crudReducer = (state = crudInitialState, action) =>
         draftState.data = state.contentTypeDataStructure;
         break;
       }
+      case UPDATE_PARTIAL_DATA: {
+        draftState.data = { ...state.data, ...action.data };
+        break;
+      }
       case RESET_PROPS: {
         return crudInitialState;
       }

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

@@ -0,0 +1,7 @@
+export default function () {
+  return {
+    logos: {
+      auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+    },
+  };
+}

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

@@ -1,19 +1,18 @@
 import axios from 'axios';
+import qs from 'qs';
 
 const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
 
 const fetchMarketplacePlugins = async (params = {}) => {
-  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`, {
+  const { data } = await axios.get(`${MARKETPLACE_API_URL}/plugins`, {
     params,
+    paramsSerializer: {
+      encode: qs.parse,
+      serialize: qs.stringify,
+    },
   });
 
-  // Only keep v4 plugins
-  const filteredResponse = {
-    ...response,
-    data: response.data.filter((plugin) => plugin.attributes.strapiCompatibility === 'v4'),
-  };
-
-  return filteredResponse;
+  return data;
 };
 
 export { fetchMarketplacePlugins };

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

@@ -1,10 +1,15 @@
 import axios from 'axios';
+import qs from 'qs';
 
 const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
 
 const fetchMarketplaceProviders = async (params = {}) => {
   const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`, {
     params,
+    paramsSerializer: {
+      encode: qs.parse,
+      serialize: qs.stringify,
+    },
   });
 
   return data;

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

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import get from 'lodash/get';
-import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { useFetchClient, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
 
-const useRegenerate = (url, id, onRegenerate) => {
+const useRegenerate = (url, id, onRegenerate, onError) => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
   const { post } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
 
   const regenerateData = async () => {
     try {
@@ -18,10 +18,15 @@ const useRegenerate = (url, id, onRegenerate) => {
       onRegenerate(accessKey);
     } catch (error) {
       setIsLoadingConfirmation(false);
-      toggleNotification({
-        type: 'warning',
-        message: get(error, 'response.data.message', 'notification.error'),
-      });
+
+      if (onError) {
+        onError(error);
+      } else {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      }
     }
   };
 

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -14,6 +13,7 @@ import {
   useTracking,
   getYupInnerErrors,
   Link,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 import {
   Box,
@@ -27,17 +27,10 @@ import {
   Typography,
 } from '@strapi/design-system';
 import { EyeStriked, Eye } from '@strapi/icons';
-import UnauthenticatedLayout, {
-  Column,
-  LayoutContent,
-} from '../../../../layouts/UnauthenticatedLayout';
+import UnauthenticatedLayout, { LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import Logo from '../../../../components/UnauthenticatedLogo';
 import FieldActionWrapper from '../FieldActionWrapper';
 
-const CenteredBox = styled(Box)`
-  text-align: center;
-`;
-
 const A = styled.a`
   color: ${({ theme }) => theme.colors.primary600};
 `;
@@ -58,6 +51,8 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const query = useQuery();
+  const { formatAPIError } = useAPIErrorHandler();
+
   const registrationToken = query.get('registrationToken');
 
   useEffect(() => {
@@ -73,17 +68,17 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
           if (data) {
             setUserInfo(data);
           }
-        } catch (err) {
-          const errorMessage = get(err, ['response', 'data', 'message'], 'An error occurred');
+        } catch (error) {
+          const message = formatAPIError(error);
 
           toggleNotification({
             type: 'warning',
-            message: errorMessage,
+            message,
           });
 
           // Redirect to the oops page in case of an invalid token
           // @alexandrebodin @JAB I am not sure it is the wanted behavior
-          push(`/auth/oops?info=${encodeURIComponent(errorMessage)}`);
+          push(`/auth/oops?info=${encodeURIComponent(message)}`);
         }
       };
 
@@ -92,6 +87,20 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [registrationToken]);
 
+  function normalizeData(data) {
+    return Object.entries(data).reduce((acc, [key, value]) => {
+      let normalizedvalue = value;
+
+      if (!['password', 'confirmPassword'].includes(key) && typeof value === 'string') {
+        normalizedvalue = normalizedvalue.trim();
+      }
+
+      acc[key] = normalizedvalue;
+
+      return acc;
+    }, {});
+  }
+
   return (
     <UnauthenticatedLayout>
       <LayoutContent>
@@ -107,8 +116,10 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
             news: false,
           }}
           onSubmit={async (data, formik) => {
+            const normalizedData = normalizeData(data);
+
             try {
-              await schema.validate(data, { abortEarly: false });
+              await schema.validate(normalizedData, { abortEarly: false });
 
               if (submitCount > 0 && authType === 'register-admin') {
                 trackUsage('didSubmitWithErrorsFirstAdmin', { count: submitCount.toString() });
@@ -117,11 +128,11 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
               if (registrationToken) {
                 // We need to pass the registration token in the url param to the api in order to submit another admin user
                 onSubmit(
-                  { userInfo: omit(data, ['registrationToken']), registrationToken },
+                  { userInfo: omit(normalizedData, ['registrationToken']), registrationToken },
                   formik
                 );
               } else {
-                onSubmit(data, formik);
+                onSubmit(normalizedData, formik);
               }
             } catch (err) {
               const errors = getYupInnerErrors(err);
@@ -138,27 +149,26 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
             return (
               <Form noValidate>
                 <Main>
-                  <Column>
+                  <Flex direction="column" alignItems="stretch" gap={3}>
                     <Logo />
-                    <Box paddingTop={6} paddingBottom={1}>
-                      <Typography as="h1" variant="alpha">
-                        {formatMessage({
-                          id: 'Auth.form.welcome.title',
-                          defaultMessage: 'Welcome to Strapi!',
-                        })}
-                      </Typography>
-                    </Box>
-                    <CenteredBox paddingBottom={7}>
-                      <Typography variant="epsilon" textColor="neutral600">
-                        {formatMessage({
-                          id: 'Auth.form.register.subtitle',
-                          defaultMessage:
-                            'Credentials are only used to authenticate in Strapi. All saved data will be stored in your database.',
-                        })}
-                      </Typography>
-                    </CenteredBox>
-                  </Column>
-                  <Flex direction="column" alignItems="stretch" gap={6}>
+
+                    <Typography as="h1" variant="alpha" textAlign="center">
+                      {formatMessage({
+                        id: 'Auth.form.welcome.title',
+                        defaultMessage: 'Welcome to Strapi!',
+                      })}
+                    </Typography>
+
+                    <Typography variant="epsilon" textColor="neutral600" textAlign="center">
+                      {formatMessage({
+                        id: 'Auth.form.register.subtitle',
+                        defaultMessage:
+                          'Credentials are only used to authenticate in Strapi. All saved data will be stored in your database.',
+                      })}
+                    </Typography>
+                  </Flex>
+
+                  <Flex direction="column" alignItems="stretch" gap={6} marginTop={7}>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput
@@ -204,7 +214,6 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       value={values.password}
                       error={errors.password ? formatMessage(errors.password) : undefined}
                       endAction={
-                        // eslint-disable-next-line react/jsx-wrap-multilines
                         <FieldActionWrapper
                           onClick={(e) => {
                             e.preventDefault();
@@ -245,7 +254,6 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         errors.confirmPassword ? formatMessage(errors.confirmPassword) : undefined
                       }
                       endAction={
-                        // eslint-disable-next-line react/jsx-wrap-multilines
                         <FieldActionWrapper
                           onClick={(e) => {
                             e.preventDefault();

package/admin/src/pages/HomePage/SocialLinks.js

@@ -187,7 +187,7 @@ const SocialLinks = () => {
       <GridGap>
         {socialLinksExtended.map(({ icon, link, name }) => {
           return (
-            <GridItem col={6} s={12} key={name}>
+            <GridItem col={6} s={12} key={name.id}>
               <LinkCustom size="L" startIcon={icon} variant="tertiary" href={link} isExternal>
                 {formatMessage(name)}
               </LinkCustom>

package/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, Box, Flex, Icon } from '@strapi/design-system';
-import { EmptyStateDocument } from '@strapi/icons';
+import { EmptyDocuments } from '@strapi/icons';
 import { EmptyNpmPackageGrid } from './EmptyNpmPackageGrid';
 
 const EmptyNpmPackageSearch = ({ content }) => {
   return (
-    <Box position="relative">
+    <Box position="relative" data-testid="marketplace-results">
       <EmptyNpmPackageGrid />
       <Box position="absolute" top={11} width="100%">
         <Flex alignItems="center" justifyContent="center" direction="column">
-          <Icon as={EmptyStateDocument} color="" width="160px" height="88px" />
+          <Icon as={EmptyDocuments} color="" width="160px" height="88px" />
           <Box paddingTop={6}>
             <Typography variant="delta" as="p" textColor="neutral600">
               {content}

package/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js

@@ -1,29 +1,58 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@strapi/design-system';
+import { Grid, GridItem, Flex, Loader } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { AnErrorOccurred } from '@strapi/helper-plugin';
 import NpmPackageCard from '../NpmPackageCard';
+import EmptyNpmPackageSearch from '../EmptyNpmPackageSearch';
 
 const NpmPackagesGrid = ({
+  status,
   npmPackages,
   installedPackageNames,
   useYarn,
   isInDevelopmentMode,
   npmPackageType,
   strapiAppVersion,
+  debouncedSearch,
 }) => {
-  // Check if an individual package is in the dependencies
-  const isAlreadyInstalled = useCallback(
-    (npmPackageName) => installedPackageNames.includes(npmPackageName),
-    [installedPackageNames]
+  const { formatMessage } = useIntl();
+
+  if (status === 'error') {
+    return (
+      <Flex paddingTop={8}>
+        <AnErrorOccurred />
+      </Flex>
+    );
+  }
+
+  if (status === 'loading') {
+    return (
+      <Flex justifyContent="center" paddingTop={8}>
+        <Loader>Loading content...</Loader>
+      </Flex>
+    );
+  }
+
+  const emptySearchMessage = formatMessage(
+    {
+      id: 'admin.pages.MarketPlacePage.search.empty',
+      defaultMessage: 'No result for "{target}"',
+    },
+    { target: debouncedSearch }
   );
 
+  if (npmPackages.length === 0) {
+    return <EmptyNpmPackageSearch content={emptySearchMessage} />;
+  }
+
   return (
-    <Grid gap={4}>
+    <Grid gap={4} data-testid="marketplace-results">
       {npmPackages.map((npmPackage) => (
         <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={npmPackage.id}>
           <NpmPackageCard
             npmPackage={npmPackage}
-            isInstalled={isAlreadyInstalled(npmPackage.attributes.npmPackageName)}
+            isInstalled={installedPackageNames.includes(npmPackage.attributes.npmPackageName)}
             useYarn={useYarn}
             isInDevelopmentMode={isInDevelopmentMode}
             npmPackageType={npmPackageType}
@@ -36,17 +65,21 @@ const NpmPackagesGrid = ({
 };
 
 NpmPackagesGrid.defaultProps = {
+  npmPackages: [],
   installedPackageNames: [],
   strapiAppVersion: null,
+  debouncedSearch: '',
 };
 
 NpmPackagesGrid.propTypes = {
-  npmPackages: PropTypes.array.isRequired,
+  status: PropTypes.string.isRequired,
+  npmPackages: PropTypes.array,
   installedPackageNames: PropTypes.arrayOf(PropTypes.string),
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool.isRequired,
   npmPackageType: PropTypes.string.isRequired,
   strapiAppVersion: PropTypes.string,
+  debouncedSearch: PropTypes.string,
 };
 
 export default NpmPackagesGrid;

package/admin/src/pages/MarketplacePage/components/NpmPackagesPagination/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Flex } from '@strapi/design-system';
+import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
+
+const NpmPackagesPagination = ({ pagination }) => {
+  return (
+    <Box paddingTop={4}>
+      <Flex alignItems="flex-end" justifyContent="space-between">
+        <PageSizeURLQuery options={['12', '24', '50', '100']} defaultValue="24" />
+        <PaginationURLQuery pagination={pagination} />
+      </Flex>
+    </Box>
+  );
+};
+
+NpmPackagesPagination.propTypes = {
+  pagination: PropTypes.shape({
+    page: PropTypes.number.isRequired,
+    pageCount: PropTypes.number.isRequired,
+    pageSize: PropTypes.number.isRequired,
+    total: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default NpmPackagesPagination;

package/admin/src/pages/MarketplacePage/components/OfflineLayout/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Box, Flex, Typography, Layout, Main } from '@strapi/design-system';
+import PageHeader from '../PageHeader';
+import offlineCloud from '../../../../assets/images/icon_offline-cloud.svg';
+
+const OfflineLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Layout>
+      <Main>
+        <PageHeader isOnline={false} />
+        <Flex
+          width="100%"
+          direction="column"
+          alignItems="center"
+          justifyContent="center"
+          paddingTop={pxToRem(120)}
+        >
+          <Box paddingBottom={2}>
+            <Typography textColor="neutral700" variant="alpha">
+              {formatMessage({
+                id: 'admin.pages.MarketPlacePage.offline.title',
+                defaultMessage: 'You are offline',
+              })}
+            </Typography>
+          </Box>
+          <Box paddingBottom={6}>
+            <Typography textColor="neutral700" variant="epsilon">
+              {formatMessage({
+                id: 'admin.pages.MarketPlacePage.offline.subtitle',
+                defaultMessage: 'You need to be connected to the Internet to access Strapi Market.',
+              })}
+            </Typography>
+          </Box>
+          <img src={offlineCloud} alt="offline" style={{ width: '88px', height: '88px' }} />
+        </Flex>
+      </Main>
+    </Layout>
+  );
+};
+
+export default OfflineLayout;