@strapi/admin 4.10.0-beta.0 → 4.10.0

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

@@ -12,18 +12,18 @@ export const initialState = {
 
 const editViewManagerReducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, (drafState) => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case RESET_PROPS: {
-        drafState.currentLayout = null;
+        draftState.currentLayout = null;
         break;
       }
       case SET_LAYOUT: {
-        drafState.currentLayout = action.layout;
+        draftState.currentLayout = action.layout;
         break;
       }
       default:
-        return drafState;
+        return draftState;
     }
   });
 

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

@@ -127,6 +127,7 @@ const ListSettingsView = ({ layout, slug }) => {
     dispatch({
       type: 'SUBMIT_FIELD_FORM',
     });
+    handleCloseModal();
   };
 
   const submitMutation = useMutation((body) => putCMSettingsLV(body, slug), {

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

@@ -1,30 +1,39 @@
 import { useEffect, useReducer } from 'react';
-import { request } from '@strapi/helper-plugin';
+import { useFetchClient } from '@strapi/helper-plugin';
 
 import reducer, { initialState } from './reducer';
 
+/**
+ * TODO: refactor this to use react-query and move it to the `Roles` SettingsPage
+ */
 const useFetchPermissionsLayout = (id) => {
   const [{ data, error, isLoading }, dispatch] = useReducer(reducer, initialState);
+  const { get } = useFetchClient();
 
   useEffect(() => {
     const getData = async () => {
-      dispatch({
-        type: 'GET_DATA',
-      });
-
-      const { data } = await request('/admin/permissions', {
-        method: 'GET',
-        params: { role: id },
-      });
-
-      dispatch({
-        type: 'GET_DATA_SUCCEEDED',
-        data,
-      });
+      try {
+        dispatch({
+          type: 'GET_DATA',
+        });
+
+        const {
+          data: { data },
+        } = await get('/admin/permissions', {
+          params: { role: id },
+        });
+
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+        });
+      } catch (err) {
+        // silence is golden
+      }
     };
 
     getData();
-  }, [id]);
+  }, [id, get]);
 
   return { data, error, isLoading };
 };

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

@@ -1,13 +1,48 @@
 import { useCallback, useReducer, useEffect } from 'react';
-import { request, useNotification } from '@strapi/helper-plugin';
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 import reducer, { initialState } from './reducer';
 
 const useFetchRole = (id) => {
   const toggleNotification = useNotification();
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const { get } = useFetchClient();
+
   useEffect(() => {
     if (id) {
+      const fetchRole = async (roleId) => {
+        try {
+          const [
+            {
+              data: { data: role },
+            },
+            {
+              data: { data: permissions },
+            },
+          ] = await Promise.all(
+            [`roles/${roleId}`, `roles/${roleId}/permissions`].map((endPoint) =>
+              get(`/admin/${endPoint}`)
+            )
+          );
+
+          dispatch({
+            type: 'GET_DATA_SUCCEEDED',
+            role,
+            permissions,
+          });
+        } catch (err) {
+          console.error(err);
+
+          dispatch({
+            type: 'GET_DATA_ERROR',
+          });
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      };
+
       fetchRole(id);
     } else {
       dispatch({
@@ -16,35 +51,7 @@ const useFetchRole = (id) => {
         permissions: [],
       });
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id]);
-
-  const fetchRole = async (roleId) => {
-    try {
-      const [{ data: role }, { data: permissions }] = await Promise.all(
-        [`roles/${roleId}`, `roles/${roleId}/permissions`].map((endPoint) =>
-          request(`/admin/${endPoint}`, { method: 'GET' })
-        )
-      );
-
-      dispatch({
-        type: 'GET_DATA_SUCCEEDED',
-        role,
-        permissions,
-      });
-    } catch (err) {
-      console.error(err);
-
-      dispatch({
-        type: 'GET_DATA_ERROR',
-      });
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error' },
-      });
-    }
-  };
+  }, [get, id, toggleNotification]);
 
   const handleSubmitSucceeded = useCallback((data) => {
     dispatch({

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

@@ -1,26 +1,32 @@
-import { useReducer, useEffect } from 'react';
-import { request, useNotification } from '@strapi/helper-plugin';
+import { useReducer, useEffect, useCallback } from 'react';
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 import reducer, { initialState } from './reducer';
 
+/**
+ * TODO: refactor this to not use the `useReducer` hook,
+ * it's not really necessary. Also use `useQuery`?
+ */
 const useModels = () => {
   const toggleNotification = useNotification();
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  useEffect(() => {
-    fetchModels();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { get } = useFetchClient();
 
-  const fetchModels = async () => {
+  const fetchModels = useCallback(async () => {
     dispatch({
       type: 'GET_MODELS',
     });
 
     try {
-      const [{ data: components }, { data: contentTypes }] = await Promise.all(
-        ['components', 'content-types'].map((endPoint) =>
-          request(`/content-manager/${endPoint}`, { method: 'GET' })
-        )
+      const [
+        {
+          data: { data: components },
+        },
+        {
+          data: { data: contentTypes },
+        },
+      ] = await Promise.all(
+        ['components', 'content-types'].map((endPoint) => get(`/content-manager/${endPoint}`))
       );
 
       dispatch({
@@ -37,7 +43,11 @@ const useModels = () => {
         message: { id: 'notification.error' },
       });
     }
-  };
+  }, [toggleNotification, get]);
+
+  useEffect(() => {
+    fetchModels();
+  }, [fetchModels]);
 
   return {
     ...state,

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

@@ -1,10 +1,15 @@
 import { useEffect, useReducer } from 'react';
-import { request, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import omit from 'lodash/omit';
 import { checkFormValidity, formatAPIErrors } from '../../utils';
 import { initialState, reducer } from './reducer';
 import init from './init';
 
+/**
+ * TODO: refactor this, it's confusing and hard to read.
+ * It's also only used in `Settings/pages/SingleSignOn` so it can
+ * probably be deleted and everything written there...
+ */
 const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
   const [
     { formErrors, initialData, isLoading, modifiedData, showHeaderButtonLoader, showHeaderLoader },
@@ -13,10 +18,14 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
 
+  const { get, put } = useFetchClient();
+
   useEffect(() => {
     const getData = async () => {
       try {
-        const { data } = await request(endPoint, { method: 'GET' });
+        const {
+          data: { data },
+        } = await get(endPoint);
 
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
@@ -85,10 +94,9 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
           cleanedData.roles = cleanedData.roles.map((role) => role.id);
         }
 
-        const { data } = await request(endPoint, {
-          method: 'PUT',
-          body: cleanedData,
-        });
+        const {
+          data: { data },
+        } = await put(endPoint, cleanedData);
 
         cbSuccess(data);
 

package/admin/src/pages/App/index.js

@@ -6,17 +6,16 @@
 
 import React, { useEffect, useState, useMemo, lazy, Suspense } from 'react';
 import { Switch, Route } from 'react-router-dom';
+import axios from 'axios';
 import {
   LoadingIndicatorPage,
   auth,
-  request,
   useNotification,
   TrackingProvider,
   prefixFileUrlWithBackendUrl,
   useAppInfos,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import axios from 'axios';
 import { SkipToContent } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
@@ -41,7 +40,7 @@ function App() {
     hasAdmin: false,
   });
   const appInfo = useAppInfos();
-  const { get } = useFetchClient();
+  const { get, post } = useFetchClient();
 
   const authRoutes = useMemo(() => {
     return makeUniqueRoutes(
@@ -57,11 +56,10 @@ function App() {
     const renewToken = async () => {
       try {
         const {
-          data: { token },
-        } = await request('/admin/renew-token', {
-          method: 'POST',
-          body: { token: currentToken },
-        });
+          data: {
+            data: { token },
+          },
+        } = await post('/admin/renew-token', { token: currentToken });
         auth.updateToken(token);
       } catch (err) {
         // Refresh app
@@ -73,7 +71,7 @@ function App() {
     if (currentToken) {
       renewToken();
     }
-  }, []);
+  }, [post]);
 
   useEffect(() => {
     const getData = async () => {
@@ -82,7 +80,7 @@ function App() {
           data: {
             data: { hasAdmin, uuid, menuLogo, authLogo },
           },
-        } = await axios.get(`${strapi.backendURL}/admin/init`);
+        } = await get(`/admin/init`);
 
         updateProjectSettings({
           menuLogo: prefixFileUrlWithBackendUrl(menuLogo),
@@ -102,20 +100,17 @@ function App() {
           setTelemetryProperties(properties);
 
           try {
-            await fetch('https://analytics.strapi.io/api/v2/track', {
-              method: 'POST',
-              body: JSON.stringify({
-                // This event is anonymous
-                event: 'didInitializeAdministration',
-                userId: '',
-                deviceId,
-                eventPropeties: {},
-                userProperties: { environment: appInfo.currentEnvironment },
-                groupProperties: { ...properties, projectId: uuid },
-              }),
-              headers: {
-                'Content-Type': 'application/json',
-              },
+            /**
+             * TODO: remove this call to `axios`
+             */
+            await axios.post('https://analytics.strapi.io/api/v2/track', {
+              // This event is anonymous
+              event: 'didInitializeAdministration',
+              userId: '',
+              deviceId,
+              eventPropeties: {},
+              userProperties: { environment: appInfo.currentEnvironment },
+              groupProperties: { ...properties, projectId: uuid },
             });
           } catch (e) {
             // Silent.

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}