@strapi/admin 4.7.2-exp.175f7ac70ee76d6c825e4429e15fc85ee78d23bb → 4.8.0

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

@@ -36,7 +36,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
         paddingBottom={9}
         type="button"
       >
-        <Flex direction="column" alignItems="flex-start" gap={2}>
+        <Flex direction="column" gap={2}>
           <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
             <IconWrapper>
               <PlusCircle />

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

@@ -29,7 +29,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
       hasRadius={isNested}
       borderColor={isNested ? 'neutral200' : ''}
     >
-      <Flex direction="column" alignItems="stretch" spacing={6}>
+      <Flex direction="column" alignItems="stretch" gap={6}>
         {fields.map((fieldRow, key) => {
           return (
             <Grid gap={4} key={key}>

package/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -107,8 +107,7 @@ const RelationInput = ({
     [totalNumberOfRelations, numberOfRelationsToDisplay]
   );
 
-  const shouldDisplayLoadMoreButton =
-    (!!labelLoadMore && paginatedRelations.hasNextPage) || paginatedRelations.isLoading;
+  const shouldDisplayLoadMoreButton = !!labelLoadMore && paginatedRelations.hasNextPage;
 
   const options = useMemo(
     () =>

package/admin/src/content-manager/components/RelationInputDataManager/RelationInputDataManager.js

@@ -57,41 +57,47 @@ export const RelationInputDataManager = ({
 
   const currentLastPage = Math.ceil(get(initialData, name, []).length / RELATIONS_TO_DISPLAY);
 
-  const cacheKey = `${slug}-${initialDataPath.join('.')}`;
-  const { relations, search, searchFor } = useRelation(cacheKey, {
-    relation: {
-      enabled: !!endpoints.relation,
-      endpoint: endpoints.relation,
-      pageGoal: currentLastPage,
-      pageParams: {
-        ...defaultParams,
-        pageSize: RELATIONS_TO_DISPLAY,
-      },
-      onLoad(value) {
-        relationLoad({
-          target: {
-            initialDataPath: ['initialData', ...initialDataPath],
-            modifiedDataPath: ['modifiedData', ...nameSplit],
-            value,
-          },
-        });
-      },
-      normalizeArguments: {
-        mainFieldName: mainField.name,
-        shouldAddLink: shouldDisplayRelationLink,
-        targetModel,
+  const { relations, search, searchFor } = useRelation(
+    [slug, initialDataPath.join('.'), modifiedData.id, defaultParams],
+    {
+      relation: {
+        enabled: !!endpoints.relation,
+        endpoint: endpoints.relation,
+        pageGoal: currentLastPage,
+        pageParams: {
+          ...defaultParams,
+          pageSize: RELATIONS_TO_DISPLAY,
+        },
+        onLoad(value) {
+          relationLoad({
+            target: {
+              initialDataPath: ['initialData', ...initialDataPath],
+              modifiedDataPath: ['modifiedData', ...nameSplit],
+              value,
+            },
+          });
+        },
+        normalizeArguments: {
+          mainFieldName: mainField.name,
+          shouldAddLink: shouldDisplayRelationLink,
+          targetModel,
+        },
       },
-    },
-    search: {
-      endpoint: endpoints.search,
-      pageParams: {
-        ...defaultParams,
-        // eslint-disable-next-line no-nested-ternary
-        entityId: isCreatingEntry ? undefined : isComponentRelation ? componentId : initialData.id,
-        pageSize: SEARCH_RESULTS_TO_DISPLAY,
+      search: {
+        endpoint: endpoints.search,
+        pageParams: {
+          ...defaultParams,
+          // eslint-disable-next-line no-nested-ternary
+          entityId: isCreatingEntry
+            ? undefined
+            : isComponentRelation
+            ? componentId
+            : initialData.id,
+          pageSize: SEARCH_RESULTS_TO_DISPLAY,
+        },
       },
-    },
-  });
+    }
+  );
 
   const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
   const toOneRelation = [

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -49,7 +49,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
 
   const { onLoad: onLoadRelations, normalizeArguments = {} } = relation;
 
-  const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
+  const relationsRes = useInfiniteQuery(['relation', ...cacheKey], fetchRelations, {
     cacheTime: 0,
     enabled: relation.enabled,
     /**
@@ -138,7 +138,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
   }, [status, onLoadRelationsCallback, data]);
 
   const searchRes = useInfiniteQuery(
-    ['relation', cacheKey, 'search', JSON.stringify(searchParams)],
+    ['relation', ...cacheKey, 'search', JSON.stringify(searchParams)],
     fetchSearch,
     {
       enabled: Object.keys(searchParams).length > 0,

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -167,7 +167,7 @@ const Header = ({
         isOpen={showWarningUnpublish}
       >
         <DialogBody icon={<ExclamationMarkCircle />}>
-          <Flex direction="column" alignItems="stretch" spacing={2}>
+          <Flex direction="column" alignItems="stretch" gap={2}>
             <Flex justifyContent="center" style={{ textAlign: 'center' }}>
               <Typography id="confirm-description">
                 {formatMessage(

package/admin/src/content-manager/utils/createDefaultForm.js

@@ -5,14 +5,6 @@ const createDefaultForm = (attributes, allComponentsSchema) => {
     const attribute = get(attributes, [current], {});
     const { default: defaultValue, component, type, required, min, repeatable } = attribute;
 
-    if (type === 'json') {
-      acc[current] = null;
-    }
-
-    if (type === 'json' && required === true) {
-      acc[current] = {};
-    }
-
     if (defaultValue !== undefined) {
       acc[current] = defaultValue;
     }

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

@@ -158,7 +158,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       </Typography>
                     </CenteredBox>
                   </Column>
-                  <Flex direction="column" alignItems="stretch" spacing={6}>
+                  <Flex direction="column" alignItems="stretch" gap={6}>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput

package/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js

@@ -69,6 +69,7 @@ const FormHead = ({
           })}
         </Link>
       }
+      ellipsis
     />
   );
 };

package/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -63,8 +63,8 @@ const Table = ({
                 condition: canUpdate,
               })}
             >
-              <Td>
-                <Typography textColor="neutral800" fontWeight="bold">
+              <Td maxWidth={pxToRem(250)}>
+                <Typography textColor="neutral800" fontWeight="bold" ellipsis>
                   {token.name}
                 </Typography>
               </Td>

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/schema.js

@@ -2,7 +2,7 @@ import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = yup.object().shape({
-  name: yup.string(translatedErrors.string).required(translatedErrors.required),
+  name: yup.string(translatedErrors.string).max(100).required(translatedErrors.required),
   type: yup
     .string(translatedErrors.string)
     .oneOf(['read-only', 'full-access', 'custom'])