@strapi/admin 4.1.2 → 4.1.4-alpha.1

package/admin/src/assets/images/icon_made-by-strapi.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="4" fill="#4945FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8075 7.625H9.03058V11.1792H12.2533C12.4977 11.1792 12.6958 11.3773 12.6958 11.6216V14.8444H16.25V8.06746C16.25 7.82309 16.0519 7.625 15.8075 7.625Z" fill="white"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M9.0308 7.625V11.1792H6.01073C5.81364 11.1792 5.71494 10.9409 5.8543 10.8015L9.0308 7.625ZM13.0735 18.0209C12.9342 18.1603 12.6959 18.0616 12.6959 17.8645V14.8444H16.25L13.0735 18.0209ZM12.4746 11.1792H9.03058V14.4019C9.03058 14.6463 9.22868 14.8444 9.47304 14.8444H12.6958V11.4004C12.6958 11.2782 12.5968 11.1792 12.4746 11.1792Z" fill="#DAD9FF"/>
+</svg>

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

@@ -1,6 +1,12 @@
 import React, { useMemo, useState, useEffect, useRef } from 'react';
 //  TODO: DS add loader
-import { auth, LoadingIndicatorPage, AppInfosContext, useGuidedTour } from '@strapi/helper-plugin';
+import {
+  auth,
+  LoadingIndicatorPage,
+  AppInfosContext,
+  useGuidedTour,
+  useNotification,
+} from '@strapi/helper-plugin';
 import { useQueries } from 'react-query';
 import get from 'lodash/get';
 import packageJSON from '../../../../package.json';
@@ -20,6 +26,7 @@ const strapiVersion = packageJSON.version;
 
 const AuthenticatedApp = () => {
   const { setGuidedTourVisibility } = useGuidedTour();
+  const toggleNotification = useNotification();
   const setGuidedTourVisibilityRef = useRef(setGuidedTourVisibility);
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
@@ -34,7 +41,7 @@ const AuthenticatedApp = () => {
     { queryKey: 'app-infos', queryFn: fetchAppInfo },
     {
       queryKey: 'strapi-release',
-      queryFn: fetchStrapiLatestRelease,
+      queryFn: () => fetchStrapiLatestRelease(toggleNotification),
       enabled: showReleaseNotification,
       initialData: strapiVersion,
     },

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

@@ -1,15 +1,34 @@
 import axios from 'axios';
+import checkLatestStrapiVersion from './checkLatestStrapiVersion';
 import { axiosInstance } from '../../../core/utils';
 import packageJSON from '../../../../../package.json';
 
 const strapiVersion = packageJSON.version;
+const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
 
-const fetchStrapiLatestRelease = async () => {
+const fetchStrapiLatestRelease = async toggleNotification => {
   try {
     const {
       data: { tag_name },
     } = await axios.get('https://api.github.com/repos/strapi/strapi/releases/latest');
 
+    const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tag_name);
+
+    if (shouldUpdateStrapi && showUpdateNotif) {
+      toggleNotification({
+        type: 'info',
+        message: { id: 'notification.version.update.message' },
+        link: {
+          url: `https://github.com/strapi/strapi/releases/tag/${tag_name}`,
+          label: {
+            id: 'notification.version.update.link',
+          },
+        },
+        blockTransition: true,
+        onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
+      });
+    }
+
     return tag_name;
   } catch (err) {
     // Don't throw an error

package/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js

@@ -44,8 +44,8 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
   if (isOpen) {
     return ReactDOM.createPortal(
       <Overlay>
-        <Content size={6}>
-          <Stack size={2}>
+        <Content spacing={6}>
+          <Stack spacing={2}>
             <Flex justifyContent="center">
               <Typography as="h1" variant="alpha">
                 {formatMessage(title)}

package/admin/src/components/GuidedTour/Homepage/index.js

@@ -42,7 +42,7 @@ const GuidedTourHomepage = () => {
       paddingBottom={4}
       background="neutral0"
     >
-      <Stack size={6}>
+      <Stack spacing={6}>
         <Typography variant="beta" as="h2">
           {formatMessage({
             id: 'app.components.GuidedTour.title',

package/admin/src/components/GuidedTour/Modal/components/Content.js

@@ -14,7 +14,7 @@ const Content = ({ id, defaultMessage }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Stack size={4} paddingBottom={6}>
+    <Stack spacing={4} paddingBottom={6}>
       {formatMessage(
         { id, defaultMessage },
         {

package/admin/src/components/GuidedTour/Modal/components/Modal.js

@@ -33,7 +33,7 @@ const Modal = ({ onClose, onSkip, children, hideSkip }) => {
             shadow="popupShadow"
             hasRadius
             padding={4}
-            size={8}
+            spacing={8}
             role="dialog"
             aria-modal
             onClick={e => e.stopPropagation()}

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

@@ -156,7 +156,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
           hasRadius
         >
           <FocusTrap onEscape={handleToggleUserLinks}>
-            <Stack size={0}>
+            <Stack spacing={0}>
               <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
                 <Typography>
                   {formatMessage({

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

@@ -21,7 +21,7 @@ const Notifications = ({ children }) => {
         left="50%"
         marginLeft="-250px"
         position="fixed"
-        size={2}
+        spacing={2}
         top={`${46 / 16}rem`}
         width={`${500 / 16}rem`}
         zIndex={10}

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

@@ -82,14 +82,14 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
             <CloseButtonContainer>
               <IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />
             </CloseButtonContainer>
-            <StackFlexStart size={6}>
+            <StackFlexStart spacing={6}>
               <Typography fontWeight="bold" textColor="primary600">
                 {formatMessage({
                   id: 'app.components.UpgradePlanModal.text-ce',
                   defaultMessage: 'COMMUNITY EDITION',
                 })}
               </Typography>
-              <Stack size={2}>
+              <Stack spacing={2}>
                 <Typography variant="alpha" as="h2" id="upgrade-plan">
                   {formatMessage({
                     id: 'app.components.UpgradePlanModal.limit-reached',

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

@@ -6,7 +6,7 @@ import {
   useTracking,
   useNotification,
   useQueryParams,
-  formatComponentData,
+  formatContentTypeData,
   contentManagementUtilRemoveFieldsFromData,
   useGuidedTour,
 } from '@strapi/helper-plugin';
@@ -88,7 +88,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       allLayoutDataRef.current.components
     );
 
-    return formatComponentData(
+    return formatContentTypeData(
       cleaned,
       allLayoutDataRef.current.contentType,
       allLayoutDataRef.current.components
@@ -103,7 +103,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         allLayoutData.components
       );
 
-      acc[current] = formatComponentData(
+      acc[current] = formatContentTypeData(
         defaultComponentForm,
         allLayoutData.components[current],
         allLayoutData.components
@@ -117,7 +117,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       allLayoutData.components
     );
 
-    const contentTypeDataStructureFormatted = formatComponentData(
+    const contentTypeDataStructureFormatted = formatContentTypeData(
       contentTypeDataStructure,
       allLayoutData.contentType,
       allLayoutData.components

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

@@ -39,7 +39,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
         paddingBottom={9}
         type="button"
       >
-        <Stack size={2}>
+        <Stack spacing={2}>
           <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
             <IconWrapper>
               <PlusCircle />

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js

@@ -25,7 +25,7 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
       isOpen={isOpen}
     >
       <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack size={2}>
+        <Stack spacing={2}>
           <Flex justifyContent="center">
             <Typography id="confirm-description">
               {formatMessage({

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js

@@ -26,7 +26,7 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
       isOpen={isOpen}
     >
       <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack size={2}>
+        <Stack spacing={2}>
           <Flex justifyContent="center">
             <Typography id="confirm-description">
               {formatMessage({

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

@@ -111,11 +111,11 @@ const Component = ({
     <Box>
       <Rectangle />
       <StyledBox hasRadius>
-        <Accordion expanded={isOpen} toggle={() => onToggle(index)} size="S" error={errorMessage}>
+        <Accordion expanded={isOpen} onToggle={() => onToggle(index)} size="S" error={errorMessage}>
           <AccordionToggle
             startIcon={<FontAwesomeIcon icon={icon} />}
             action={
-              <ActionStack horizontal size={0} expanded={isOpen}>
+              <ActionStack horizontal spacing={0} expanded={isOpen}>
                 {showDownIcon && (
                   <IconButtonCustom
                     noBorder

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

@@ -62,7 +62,7 @@ function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
   return (
     <button type="button" onClick={handleClick}>
       <ComponentBox borderRadius="borderRadius">
-        <Stack size={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <Stack spacing={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
           <StyledFontAwesomeIcon icon={icon} />
           <Typography variant="pi" fontWeight="bold" textColor="neutral600">
             {formatMessage(intlLabel)}

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Box } from '@strapi/design-system/Box';
 import styled from 'styled-components';
+import { useIntl } from 'react-intl';
 import ComponentCard from './ComponentCard';
 
 const Grid = styled.div`
@@ -12,15 +13,17 @@ const Grid = styled.div`
 `;
 
 const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggle }) => {
+  const { formatMessage } = useIntl();
+
   const handleToggle = () => {
     onToggle(category);
   };
 
   return (
-    <Accordion expanded={isOpen} toggle={handleToggle} size="S">
+    <Accordion expanded={isOpen} onToggle={handleToggle} size="S">
       <AccordionToggle
         variant={isOdd ? 'primary' : 'secondary'}
-        title={category}
+        title={formatMessage({ id: category, defaultMessage: category })}
         togglePosition="left"
       />
       <AccordionContent>

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

@@ -182,7 +182,7 @@ const DynamicZone = ({
   }
 
   return (
-    <Stack size={6}>
+    <Stack spacing={6}>
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
           <DzLabel
@@ -277,9 +277,6 @@ DynamicZone.propTypes = {
 
 const Memoized = memo(DynamicZone, isEqual);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);
 
 export { DynamicZone };

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -18,12 +18,7 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
 
       switch (attrType) {
         case 'json':
-          try {
-            cleanedData = JSON.parse(value);
-          } catch (err) {
-            cleanedData = value;
-          }
-
+          cleanedData = JSON.parse(value);
           break;
         // TODO
         // case 'date':

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -1,8 +1,5 @@
 import get from 'lodash/get';
 import isBoolean from 'lodash/isBoolean';
-import isNumber from 'lodash/isNumber';
-import isNull from 'lodash/isNull';
-import isObject from 'lodash/isObject';
 import isEmpty from 'lodash/isEmpty';
 import isNaN from 'lodash/isNaN';
 import toNumber from 'lodash/toNumber';
@@ -10,8 +7,6 @@ import toNumber from 'lodash/toNumber';
 import * as yup from 'yup';
 import { translatedErrors as errorsTrads } from '@strapi/helper-plugin';
 
-import isValidJSONString from './isValidJSONString';
-
 yup.addMethod(yup.mixed, 'defined', function() {
   return this.test('defined', errorsTrads.required, value => value !== undefined);
 });
@@ -223,10 +218,6 @@ const createYupSchemaAttribute = (type, validations, options) => {
           return true;
         }
 
-        if (isValidJSONString(value) || isNumber(value) || isNull(value) || isObject(value)) {
-          return true;
-        }
-
         try {
           JSON.parse(value);
 

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

@@ -86,7 +86,7 @@ const FieldComponent = ({
           />
         )}
       </Flex>
-      <Stack size={1}>
+      <Stack spacing={1}>
         {!isRepeatable && !isInitialized && (
           <ComponentInitializer
             isReadOnly={isReadOnly}
@@ -159,7 +159,4 @@ FieldComponent.propTypes = {
 
 const Memoized = memo(FieldComponent, isEqual);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);

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

@@ -16,7 +16,6 @@ import Label from './Label';
 import FieldWrapper from './FieldWrapper';
 
 const WAIT = 600;
-const stringify = JSON.stringify;
 const DEFAULT_THEME = 'blackboard';
 
 const loadCss = async () => {
@@ -80,9 +79,7 @@ class InputJSON extends React.Component {
     try {
       if (value === null) return this.codeMirror.setValue('');
 
-      const nextValue = stringify(value, null, 2);
-
-      return this.codeMirror.setValue(nextValue);
+      return this.codeMirror.setValue(value);
     } catch (err) {
       return this.setState({ error: true });
     }
@@ -160,7 +157,7 @@ class InputJSON extends React.Component {
 
     return (
       <FieldWrapper name={this.props.name} hint={this.props.description} error={this.props.error}>
-        <Stack size={1}>
+        <Stack spacing={1}>
           <Label
             intlLabel={this.props.intlLabel}
             labelAction={this.props.labelAction}

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

@@ -124,8 +124,7 @@ const InputUID = ({
     if (
       debouncedValue &&
       debouncedValue.trim().match(UID_REGEX) &&
-      debouncedValue !== initialValue &&
-      !value
+      debouncedValue !== initialValue
     ) {
       checkAvailability();
     }

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

@@ -28,7 +28,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
       hasRadius={isNested}
       borderColor={isNested ? 'neutral200' : ''}
     >
-      <Stack size={6}>
+      <Stack spacing={6}>
         {fields.map((fieldRow, key) => {
           return (
             <Grid gap={4} key={key}>

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DraggingSibling.js

@@ -37,7 +37,7 @@ const ToggleButton = styled(TextButton)`
 const DraggingSibling = ({ displayedValue }) => {
   return (
     <SiblingWrapper>
-      <Stack horizontal size={3} flex={1}>
+      <Stack horizontal spacing={3} flex={1}>
         <Flex
           justifyContent="center"
           borderRadius="50%"
@@ -57,7 +57,7 @@ const DraggingSibling = ({ displayedValue }) => {
         </ToggleButton>
       </Stack>
 
-      <Stack horizontal size={0}>
+      <Stack horizontal spacing={0}>
         <CustomIconButtonSibling noBorder onClick={() => {}} icon={<Trash />} />
         <CustomIconButtonSibling icon={<Drag />} noBorder />
       </Stack>

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -194,14 +194,14 @@ const DraggedItem = ({
           error={accordionHasError}
           hasErrorMessage={hasErrorMessage}
           expanded={isOpen}
-          toggle={onClickToggle}
+          onToggle={onClickToggle}
           id={componentFieldName}
           size="S"
         >
           <AccordionToggle
             action={
               isReadOnly ? null : (
-                <Stack horizontal size={0}>
+                <Stack horizontal spacing={0}>
                   <CustomIconButton
                     expanded={isOpen}
                     noBorder
@@ -238,7 +238,7 @@ const DraggedItem = ({
             togglePosition="left"
           />
           <AccordionContent>
-            <Stack background="neutral100" padding={6} size={6}>
+            <Stack background="neutral100" padding={6} spacing={6}>
               {fields.map((fieldRow, key) => {
                 return (
                   <Grid gap={4} key={key}>
@@ -318,9 +318,6 @@ DraggedItem.propTypes = {
 
 const Memoized = memo(DraggedItem);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);
 
 export { DraggedItem };

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

@@ -39,7 +39,7 @@ function SelectMany({
   };
 
   return (
-    <Stack size={1}>
+    <Stack spacing={1}>
       <Select
         components={components}
         isDisabled={isDisabled}
@@ -76,7 +76,7 @@ function SelectMany({
         value={[]}
       />
       <Box paddingTop={3} style={{ overflow: 'auto' }}>
-        <Stack as="ul" size={4} style={{ maxHeight: '128px', overflowX: 'hidden' }}>
+        <Stack as="ul" spacing={4} style={{ maxHeight: '128px', overflowX: 'hidden' }}>
           {value?.map((data, index) => {
             return (
               <ListItem

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

@@ -28,7 +28,7 @@ function SelectOne({
   const { formatMessage } = useIntl();
 
   return (
-    <Stack size={1}>
+    <Stack spacing={1}>
       <Select
         components={{
           ...components,

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

@@ -280,7 +280,7 @@ function SelectWrapper({
   const styles = getSelectStyles(theme);
 
   return (
-    <Stack size={1}>
+    <Stack spacing={1}>
       <Label
         intlLabel={intlLabel}
         isSingle={isSingle}
@@ -368,7 +368,4 @@ SelectWrapper.propTypes = {
 
 const Memoized = memo(SelectWrapper);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);

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

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import get from 'lodash/get';
 import {
   useTracking,
-  formatComponentData,
+  formatContentTypeData,
   useQueryParams,
   useNotification,
   useGuidedTour,
@@ -55,7 +55,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       );
 
       // This is needed in order to add a unique id for the repeatable components, in order to make the reorder easier
-      return formatComponentData(cleaned, allLayoutData.contentType, allLayoutData.components);
+      return formatContentTypeData(cleaned, allLayoutData.contentType, allLayoutData.components);
     },
     [allLayoutData]
   );
@@ -73,7 +73,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         allLayoutData.components
       );
 
-      acc[current] = formatComponentData(
+      acc[current] = formatContentTypeData(
         defaultComponentForm,
         allLayoutData.components[current],
         allLayoutData.components
@@ -86,7 +86,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       allLayoutData.contentType.attributes,
       allLayoutData.components
     );
-    const contentTypeDataStructureFormatted = formatComponentData(
+    const contentTypeDataStructureFormatted = formatContentTypeData(
       contentTypeDataStructure,
       allLayoutData.contentType,
       allLayoutData.components

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

@@ -224,7 +224,7 @@ export const EditorStylesContainer = styled.div`
     margin: 0;
     white-space: pre;
     word-wrap: normal;
-    line-height: inherit;
+    line-height: 1.5;
     color: inherit;
     /* z-index: 2; */
     position: relative;

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

@@ -11,7 +11,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import Bold from '@strapi/icons/Bold';
 import Italic from '@strapi/icons/Italic';
 import Underline from '@strapi/icons/Underline';
-import Strikethrough from '@strapi/icons/Strikethrough';
+import StrikeThrough from '@strapi/icons/StrikeThrough';
 import BulletList from '@strapi/icons/BulletList';
 import NumberList from '@strapi/icons/NumberList';
 import Code from '@strapi/icons/Code';
@@ -161,7 +161,7 @@ const WysiwygNav = ({
                       id="Strikethrough"
                       label="Strikethrough"
                       name="Strikethrough"
-                      icon={<Strikethrough />}
+                      icon={<StrikeThrough />}
                     />
                     <CustomIconButton
                       onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}

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

@@ -128,8 +128,8 @@ const Wysiwyg = ({
 
   return (
     <>
-      <Stack size={1}>
-        <Stack horizontal size={1}>
+      <Stack spacing={1}>
+        <Stack horizontal spacing={1}>
           <Typography variant="pi" fontWeight="bold" textColor="neutral800">
             {label}
             {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js

@@ -16,7 +16,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
   const { formatMessage } = useIntl();
 
   return (
-    <Stack size={4}>
+    <Stack spacing={4}>
       <Flex justifyContent="space-between">
         <div>
           <Box>
@@ -39,7 +39,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
         <LinkToCTB />
       </Flex>
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
-        <Stack size={2}>
+        <Stack spacing={2}>
           {editLayout.map((row, index) => (
             <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
           ))}

package/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js

@@ -45,7 +45,7 @@ const DynamicZoneList = ({ components }) => {
   const { componentLayouts } = useLayoutDnd();
 
   return (
-    <Stack size={2} horizontal overflow="scroll hidden" padding={3}>
+    <Stack spacing={2} horizontal overflow="scroll hidden" padding={3}>
       {components.map(componentUid => (
         <CustomLink
           hasRadius

package/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js

@@ -22,7 +22,7 @@ const RelationalFields = ({
   const { setEditFieldToSelect, modifiedData, onMoveRelation } = useLayoutDnd();
 
   return (
-    <Stack size={4}>
+    <Stack spacing={4}>
       <div>
         <Box>
           <Typography fontWeight="bold">
@@ -42,7 +42,7 @@ const RelationalFields = ({
         </Box>
       </div>
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
-        <Stack size={2}>
+        <Stack spacing={2}>
           {relationsLayout.map((relationName, index) => {
             const relationLabel = get(
               modifiedData,

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

@@ -275,7 +275,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
               paddingLeft={7}
               paddingRight={7}
             >
-              <Stack size={4}>
+              <Stack spacing={4}>
                 <Typography variant="delta" as="h2">
                   {formatMessage({
                     id: getTrad('containers.SettingPage.settings'),