@strapi/admin 4.9.0-alpha.0 → 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8

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

@@ -1,13 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Trash from '@strapi/icons/Trash';
+import { Dialog, DialogBody, DialogFooter, Flex, Typography, Button } from '@strapi/design-system';
+import { ExclamationMarkCircle, Trash } from '@strapi/icons';
 import InjectionZoneList from '../../InjectionZoneList';
 import { getTrad } from '../../../utils';
 
@@ -26,7 +21,7 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
       isOpen={isOpen}
     >
       <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           <Flex justifyContent="center">
             <Typography id="confirm-description">
               {formatMessage({
@@ -38,7 +33,7 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
           </Flex>
-        </Stack>
+        </Flex>
       </DialogBody>
       <DialogFooter
         startAction={

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

@@ -3,15 +3,9 @@ import PropTypes from 'prop-types';
 import { Link, useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Tbody, Td, Tr } from '@strapi/design-system/Table';
-import { Flex } from '@strapi/design-system/Flex';
-
-import Trash from '@strapi/icons/Trash';
-import Duplicate from '@strapi/icons/Duplicate';
-import Pencil from '@strapi/icons/Pencil';
+import { BaseCheckbox, Box, IconButton, Tbody, Td, Tr, Flex } from '@strapi/design-system';
+
+import { Trash, Duplicate, Pencil } from '@strapi/icons';
 
 import { useTracking, stopPropagation, onRowClick } from '@strapi/helper-plugin';
 

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

@@ -5,8 +5,7 @@ import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
-import { Status } from '@strapi/design-system/Status';
-import { Typography } from '@strapi/design-system/Typography';
+import { Status, Typography } from '@strapi/design-system';
 
 import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';

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

@@ -8,11 +8,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import PlusCircle from '@strapi/icons/PlusCircle';
-import { BaseButton } from '@strapi/design-system/BaseButton';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { PlusCircle } from '@strapi/icons';
+import { BaseButton, Box, Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 

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

@@ -8,9 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Typography, Flex } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 
 import { ComponentIcon } from '../../ComponentIcon';
@@ -34,7 +32,7 @@ const ComponentBox = styled(Box)`
       color: ${({ theme }) => theme.colors.primary600};
     }
 
-    /* > Stack > ComponentIcon */
+    /* > Flex > ComponentIcon */
     > div > div:first-child {
       background: ${({ theme }) => theme.colors.primary200};
       color: ${({ theme }) => theme.colors.primary600};
@@ -45,13 +43,13 @@ const ComponentBox = styled(Box)`
 export default function ComponentCard({ children, onClick }) {
   return (
     <ComponentBox as="button" type="button" onClick={onClick} hasRadius>
-      <Stack spacing={1} alignItems="center" justifyContent="center">
+      <Flex direction="column" gap={1} alignItems="center" justifyContent="center">
         <ComponentIcon />
 
         <Typography variant="pi" fontWeight="bold" textColor="neutral600">
           {children}
         </Typography>
-      </Stack>
+      </Flex>
     </ComponentBox>
   );
 }

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { Box } from '@strapi/design-system/Box';
+import { Accordion, AccordionToggle, AccordionContent, Box } from '@strapi/design-system';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 

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

@@ -2,10 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import groupBy from 'lodash/groupBy';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { KeyboardNavigable, Box, Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 import { useContentTypeLayout } from '../../../hooks';

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

@@ -12,7 +12,6 @@ import {
   IconButton,
   Box,
   Flex,
-  Stack,
 } from '@strapi/design-system';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { Trash, Drag } from '@strapi/icons';
@@ -22,7 +21,7 @@ import { composeRefs, getTrad, ItemTypes } from '../../../utils';
 
 import FieldComponent from '../../FieldComponent';
 
-const ActionsStack = styled(Stack)`
+const ActionsFlex = styled(Flex)`
   /* 
     we need to remove the background from the button but we can't 
     wrap the element in styled because it breaks the forwardedAs which
@@ -42,8 +41,6 @@ const IconButtonCustom = styled(IconButton)`
   }
 `;
 
-// TODO: Delete once https://github.com/strapi/design-system/pull/858
-// is merged and released.
 const StyledBox = styled(Box)`
   > div:first-child {
     box-shadow: ${({ theme }) => theme.shadows.tableShadow};
@@ -151,7 +148,7 @@ const DynamicZoneComponent = ({
   const composedBoxRefs = composeRefs(boxRef, dropRef);
 
   const accordionActions = !isFieldAllowed ? null : (
-    <ActionsStack horizontal spacing={0} expanded={isOpen}>
+    <ActionsFlex gap={0} expanded={isOpen}>
       <IconButtonCustom
         noBorder
         label={formatMessage(
@@ -181,7 +178,7 @@ const DynamicZoneComponent = ({
       >
         <Drag />
       </IconButton>
-    </ActionsStack>
+    </ActionsFlex>
   );
 
   return (

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

@@ -9,9 +9,7 @@ import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Flex, Typography } from '@strapi/design-system';
 
 const StyledBox = styled(Box)`
   border-radius: ${pxToRem(26)};

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

@@ -2,7 +2,7 @@ import React, { memo, useMemo, useState } from 'react';
 import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import { Box, Stack, VisuallyHidden } from '@strapi/design-system';
+import { Box, Flex, VisuallyHidden } from '@strapi/design-system';
 import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
@@ -174,7 +174,7 @@ const DynamicZone = ({
   const ariaDescriptionId = `${name}-item-instructions`;
 
   return (
-    <Stack spacing={6}>
+    <Flex direction="column" alignItems="stretch" gap={6}>
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
           <DynamicZoneLabel
@@ -228,7 +228,7 @@ const DynamicZone = ({
         components={fieldSchema.components ?? []}
         onClickAddComponent={handleAddComponent}
       />
-    </Stack>
+    </Flex>
   );
 };
 

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

@@ -26,7 +26,7 @@ import { getTrad } from '../../utils';
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
 
 import reducer, { initialState } from './reducer';
-import { cleanData, createYupSchema, recursivelyFindPathsBasedOnCondition } from './utils';
+import { cleanData, createYupSchema } from './utils';
 import { clearSetModifiedDataOnly } from '../../sharedReducers/crudReducer/actions';
 import { usePrev } from '../../hooks';
 
@@ -166,39 +166,11 @@ const EditViewDataManagerProvider = ({
       currentContentTypeLayout?.attributes &&
       !isEqual(previousInitialValues, initialValues)
     ) {
-      /**
-       * This will return an array of paths:
-       * ['many_to_one', 'one_to_many', 'one_to_one']
-       * it can also return a path to a relation:
-       * ['relation_component.categories']
-       */
-      const relationalFieldPaths = recursivelyFindPathsBasedOnCondition(
-        components,
-        (value) => value.type === 'relation'
-      )(currentContentTypeLayout.attributes);
-
-      const componentPaths = recursivelyFindPathsBasedOnCondition(
-        components,
-        (value) => value.type === 'component' && !value.repeatable
-      )(currentContentTypeLayout.attributes);
-
-      const repeatableComponentPaths = recursivelyFindPathsBasedOnCondition(
-        components,
-        (value) => value.type === 'component' && value.repeatable
-      )(currentContentTypeLayout.attributes);
-
-      const dynamicZonePaths = recursivelyFindPathsBasedOnCondition(
-        components,
-        (value) => value.type === 'dynamiczone'
-      )(currentContentTypeLayout.attributes);
-
       dispatch({
         type: 'INIT_FORM',
         initialValues,
-        relationalFieldPaths,
-        componentPaths,
-        repeatableComponentPaths,
-        dynamicZonePaths,
+        components,
+        attributes: currentContentTypeLayout.attributes,
         setModifiedDataOnly,
       });
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -5,16 +5,9 @@ import set from 'lodash/set';
 import take from 'lodash/take';
 import cloneDeep from 'lodash/cloneDeep';
 import uniqBy from 'lodash/uniqBy';
-import merge from 'lodash/merge';
-import castArray from 'lodash/castArray';
-import isNil from 'lodash/isNil';
 import { generateNKeysBetween } from 'fractional-indexing';
 
-import {
-  findLeafByPathAndReplace,
-  moveFields,
-  recursivelyFindPathsBasedOnCondition,
-} from './utils';
+import { findAllAndReplace, moveFields } from './utils';
 import { getMaxTempKey } from '../../utils';
 
 const initialState = {
@@ -38,35 +31,20 @@ const reducer = (state, action) =>
       case 'ADD_NON_REPEATABLE_COMPONENT_TO_FIELD': {
         const { componentLayoutData, allComponents } = action;
 
-        const relationPaths = recursivelyFindPathsBasedOnCondition(
-          allComponents,
-          (value) => value.type === 'relation'
-        )(componentLayoutData.attributes);
-
         const defaultDataStructure = {
           ...state.componentsDataStructure[componentLayoutData.uid],
         };
 
-        const repeatableFields = recursivelyFindPathsBasedOnCondition(
+        const findAllRelationsAndReplaceWithEmptyArray = findAllAndReplace(
           allComponents,
-          (value) => value.type === 'component' && value.repeatable
-        )(componentLayoutData.attributes);
-
-        const componentDataStructure = relationPaths.reduce((acc, current) => {
-          const [componentName] = current.split('.');
-
-          /**
-           * Why do we do this? Because if a repeatable component
-           * has another repeatable component inside of it we
-           * don't need to attach the array at this point because that will be
-           * done again deeper in the nest.
-           */
-          if (!repeatableFields.includes(componentName)) {
-            set(acc, current, []);
-          }
+          (value) => value.type === 'relation',
+          []
+        );
 
-          return acc;
-        }, defaultDataStructure);
+        const componentDataStructure = findAllRelationsAndReplaceWithEmptyArray(
+          defaultDataStructure,
+          componentLayoutData.attributes
+        );
 
         set(draftState, ['modifiedData', ...action.keys], componentDataStructure);
 
@@ -98,49 +76,16 @@ const reducer = (state, action) =>
                 __temp_key__: getMaxTempKey(currentValue) + 1,
               };
 
-        const relationPaths = recursivelyFindPathsBasedOnCondition(
-          allComponents,
-          (value) => value.type === 'relation'
-        )(componentLayoutData.attributes);
-
-        const repeatableFields = recursivelyFindPathsBasedOnCondition(
-          allComponents,
-          (value) => value.type === 'component' && value.repeatable
-        )(componentLayoutData.attributes);
-
-        const nonRepeatableComponentPaths = recursivelyFindPathsBasedOnCondition(
+        const findAllRelationsAndReplaceWithEmptyArray = findAllAndReplace(
           allComponents,
-          (value) => value.type === 'component' && !value.repeatable
-        )(componentLayoutData.attributes);
-
-        const componentDataStructure = relationPaths.reduce((acc, current) => {
-          const [componentName] = current.split('.');
-
-          /**
-           * Why do we do this? Because if a repeatable component
-           * has another repeatable component inside of it we
-           * don't need to attach the array at this point because that will be
-           * done again deeper in the nest.
-           *
-           * We also need to handle cases with single components nested within
-           * repeatables by checking that the relation path does not match a
-           * non-repeatable component path. This accounts for component
-           * structures such as:
-           * - outer_single_compo
-           *    - level_one_repeatable
-           *        - level_two_single_component
-           *            - level_three_repeatable
-           */
-
-          if (
-            !repeatableFields.includes(componentName) &&
-            !nonRepeatableComponentPaths.includes(componentName)
-          ) {
-            set(acc, current, []);
-          }
+          (value) => value.type === 'relation',
+          []
+        );
 
-          return acc;
-        }, defaultDataStructure);
+        const componentDataStructure = findAllRelationsAndReplaceWithEmptyArray(
+          defaultDataStructure,
+          componentLayoutData.attributes
+        );
 
         const newValue = Array.isArray(currentValue)
           ? [...currentValue, componentDataStructure]
@@ -156,11 +101,13 @@ const reducer = (state, action) =>
         const initialDataRelations = get(state, initialDataPath);
         const modifiedDataRelations = get(state, modifiedDataPath);
 
-        const valuesToLoad = value.filter((relation) => {
-          return !initialDataRelations.some((initialDataRelation) => {
-            return initialDataRelation.id === relation.id;
-          });
-        });
+        const valuesToLoad = !initialDataRelations
+          ? value
+          : value.filter((relation) => {
+              return !initialDataRelations.some((initialDataRelation) => {
+                return initialDataRelation.id === relation.id;
+              });
+            });
 
         const keys = generateNKeysBetween(
           null,
@@ -261,14 +208,7 @@ const reducer = (state, action) =>
        * but also every time you press publish.
        */
       case 'INIT_FORM': {
-        const {
-          initialValues,
-          relationalFieldPaths = [],
-          componentPaths = [],
-          repeatableComponentPaths = [],
-          dynamicZonePaths = [],
-          setModifiedDataOnly,
-        } = action;
+        const { initialValues, components = {}, attributes = {}, setModifiedDataOnly } = action;
 
         /**
          * You can't mutate an actions value.
@@ -278,63 +218,54 @@ const reducer = (state, action) =>
          */
         const data = cloneDeep(initialValues);
 
-        /**
-         * relationalFieldPaths won't be an array which is what we're expecting
-         * Therefore we reset these bits of state to the correct data type
-         * which is an array. Hence why we replace those fields.
-         *
-         */
+        const findAllRelationsAndReplaceWithEmptyArray = findAllAndReplace(
+          components,
+          (value) => value.type === 'relation',
+          (_, { path }) => {
+            if (state.modifiedData?.id === data.id && get(state.modifiedData, path)) {
+              return get(state.modifiedData, path);
+            }
 
-        const mergeDataWithPreparedRelations = relationalFieldPaths
-          .map((path) => path.split('.'))
-          .reduce((acc, currentPaths) => {
-            const [componentName] = currentPaths;
+            return [];
+          }
+        );
 
-            const existingComponents = castArray(acc[componentName] || []);
-            existingComponents.reduce((result, currentEntry) => {
-              if (!isNil(get(currentEntry, [`__temp_key__`]))) {
-                return result;
-              }
+        const mergedDataWithPreparedRelations = findAllRelationsAndReplaceWithEmptyArray(
+          data,
+          attributes
+        );
 
-              set(currentEntry, [`__temp_key__`], getMaxTempKey(result) + 1);
-
-              return result;
-            }, existingComponents);
-
-            if (state.modifiedData && get(state.modifiedData, componentName)) {
-              /**
-               * this will be null on initial load, however subsequent calls
-               * will have data in them correlating to the names of the relational fields.
-               *
-               * We also merge the fetched data so that things like `id` for components can be copied over
-               * which would be `undefined` in the `browserState`.
-               */
-              const currentState = cloneDeep(get(state.modifiedData, componentName));
-              set(acc, componentName, merge(currentState, get(initialValues, componentName)));
-            } else if (
-              repeatableComponentPaths.includes(componentName) ||
-              dynamicZonePaths.includes(componentName) ||
-              componentPaths.includes(componentName)
-            ) {
-              /**
-               * if the componentName is a repeatable field or dynamic zone we collect the list of paths e.g.
-               * ["repeatable_single_component_relation","categories"] and then reduce this
-               * recursively
-               */
-              const findleaf = findLeafByPathAndReplace(currentPaths.slice(-1)[0], []);
-              currentPaths.reduce(findleaf, acc);
-            } else {
-              set(acc, currentPaths, []);
-            }
+        const findComponentsAndReplaceWithTempKey = findAllAndReplace(
+          components,
+          (value) =>
+            value.type === 'dynamiczone' || (value.type === 'component' && !value.repeatable),
+          (data) => {
+            /**
+             * If the data is an array, we have the dynamic zone if it's not, its a regular component.
+             */
+            return Array.isArray(data)
+              ? data.map((datum, index) => ({
+                  ...datum,
+                  __temp_key__: index,
+                }))
+              : {
+                  ...data,
+                  __temp_key__: 0,
+                };
+          }
+        );
 
-            return acc;
-          }, data);
+        const mergedDataWithTmpKeys = findComponentsAndReplaceWithTempKey(
+          mergedDataWithPreparedRelations,
+          attributes,
+          { ignoreFalseyValues: true }
+        );
 
         if (!setModifiedDataOnly) {
-          draftState.initialData = mergeDataWithPreparedRelations;
+          draftState.initialData = mergedDataWithTmpKeys;
         }
 
-        draftState.modifiedData = mergeDataWithPreparedRelations;
+        draftState.modifiedData = mergedDataWithTmpKeys;
 
         draftState.formErrors = {};
 

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

@@ -0,0 +1,85 @@
+/**
+ * @typedef Attribute
+ * @type { { type: string; repeatable: boolean }}
+ *
+ * @typedef Attributes
+ * @type {{ [key: string]: Attribute }}
+ *
+ * @typedef ReplacementFn
+ * @type {<TData extends object, TKey extends string>(data: TData[TKey], { path: string[]; parent: TData }) => any}
+ */
+
+/**
+ * This function will recursively find everything and replace it with a value
+ * based on the boolean return of the predicate function e.g. `type === 'relation'`.
+ *
+ * If you provide a function it will call that function with data value you're replacing with
+ * a second argument with the path to the value and it's parent.
+ *
+ * It's original use was for the preperation of action items for the INIT_FORM action. It requires
+ * knowledge of the `components` in the entity, however `components` doesn't change nor does the predicate
+ * function so we don't need to pass it everytime hence why it's curried.
+ *
+ * @type {<TData extends object = object>(data: { [key: string]: { attributes: Attributes } }, predicate?: (value: Attribute, { path: string[]; parent: TData }) => boolean, replacement?: ReplacementFn<TData, keyof TKey> | any) => (data: TData, attributes: Attributes) => TData}
+ */
+const findAllAndReplaceSetup = (components, predicate = () => false, replacement = undefined) => {
+  /**
+   * @type {<TData extends object = object>(data: TData, attributes: Attributes, options?: { ignoreFalseyValues?: boolean}) => TData}
+   */
+  const findAllAndReplace = (data, attributes, { ignoreFalseyValues = false, path = [] } = {}) => {
+    return Object.entries(attributes).reduce(
+      (acc, [key, value]) => {
+        if (
+          ignoreFalseyValues &&
+          (acc === null || acc === undefined || acc[key] === undefined || acc[key] === null)
+        ) {
+          return acc;
+        }
+
+        if (predicate(value, { path: [...path, key], parent: acc })) {
+          acc[key] =
+            typeof replacement === 'function'
+              ? replacement(acc[key], { path: [...path, key], parent: acc })
+              : replacement;
+        }
+
+        if (value.type === 'component') {
+          const componentAttributes = components[value.component].attributes;
+
+          if (!value.repeatable) {
+            acc[key] = findAllAndReplace(acc[key], componentAttributes, {
+              ignoreFalseyValues,
+              path: [...path, key],
+            });
+          } else if (value.repeatable && Array.isArray(acc[key])) {
+            acc[key] = acc[key].map((datum, index) => {
+              const data = findAllAndReplace(datum, componentAttributes, {
+                ignoreFalseyValues,
+                path: [...path, key, index],
+              });
+
+              return data;
+            });
+          }
+        } else if (value.type === 'dynamiczone' && Array.isArray(acc[key])) {
+          acc[key] = acc[key].map((datum, index) => {
+            const componentAttributes = components[datum.__component].attributes;
+            const data = findAllAndReplace(datum, componentAttributes, {
+              ignoreFalseyValues,
+              path: [...path, key, index],
+            });
+
+            return data;
+          });
+        }
+
+        return acc;
+      },
+      { ...data }
+    );
+  };
+
+  return findAllAndReplace;
+};
+
+export { findAllAndReplaceSetup as findAllAndReplace };

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

@@ -1,5 +1,4 @@
 export { default as moveFields } from './moveFields';
 export { default as cleanData } from './cleanData';
 export { default as createYupSchema } from './schema';
-export { recursivelyFindPathsBasedOnCondition } from './recursivelyFindPathsBasedOnCondition';
-export { findLeafByPathAndReplace } from './findLeafByPathAndReplace';
+export { findAllAndReplace } from './findAllAndReplace';

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

@@ -216,6 +216,10 @@ const createYupSchemaAttribute = (type, validations, options) => {
     schema = yup
       .mixed(errorsTrads.json)
       .test('isJSON', errorsTrads.json, (value) => {
+        if (!value || !value.length) {
+          return true;
+        }
+
         try {
           JSON.parse(value);
 
@@ -226,7 +230,9 @@ const createYupSchemaAttribute = (type, validations, options) => {
       })
       .nullable()
       .test('required', errorsTrads.required, (value) => {
-        if (validations.required && !value.length) return false;
+        if (validations.required && (!value || !value.length)) {
+          return false;
+        }
 
         return true;
       });

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

@@ -2,9 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Flex, Typography } from '@strapi/design-system';
 
 const LabelAction = styled(Box)`
   svg path {