Merge pull request #15139 from strapi/fix/avoid-undefined-paths-in-recursion

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js

@@ -111,7 +111,7 @@ const DynamicZoneComponent = ({
       <StyledBox hasRadius>
         <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
           <AccordionToggle
-            startIcon={<FontAwesomeIcon icon={icon} />}
+            startIcon={icon && <FontAwesomeIcon icon={icon} />}
             action={
               <Stack horizontal spacing={0} expanded={isOpen}>
                 {showDownIcon && (

packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/utils/recursivelyFindPathsBasedOnCondition.js

@@ -55,8 +55,15 @@ const recursivelyFindPathsBasedOnConditionSetup = (components, predicate = () =>
                *
                * NOTE: we don't need to know the path to the `array` because it's about data shape not about the actual data
                */
-            }).map((path) => path.split(`${componentName}.`)[1]);
+            }).map((path) => {
+              return path.split(`${componentName}.`)[1];
+            });
           })
+          /**
+           * We filter because this will give you `dynamiczone.undefined` because the dynamic_zone component
+           * is not required to be returned in this circumstance.
+           */
+          .filter((path) => Boolean(path))
           .map((path) => `${key}.${path}`);
 
         acc = [...acc, attributesInDynamicComponents];

packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/utils/tests/recursivelyFindPathsBasedOnCondition.test.js

@@ -611,4 +611,79 @@ describe('recursivelyFindPathsBasedOnCondition', () => {
       expect(actual).toEqual(['dynamic_relations', 'dynamic_relations.simple']);
     });
   });
+
+  describe('components', () => {
+    test('given that a component exits, it should be returned', () => {
+      const components = {
+        'basic.simple': {
+          attributes: {
+            id: {
+              type: 'integer',
+            },
+            categories: {
+              type: 'relation',
+              relation: 'oneToMany',
+              target: 'api::category.category',
+              targetModel: 'api::category.category',
+              relationType: 'oneToMany',
+            },
+            my_name: {
+              type: 'string',
+            },
+          },
+        },
+      };
+
+      const attributes = {
+        relation: {
+          type: 'component',
+          component: 'basic.simple',
+          repeatable: false,
+        },
+      };
+
+      const actual = recursivelyFindPathsBasedOnCondition(
+        components,
+        (value) => value.type === 'component' && !value.repeatable
+      )(attributes);
+
+      expect(actual).toEqual(['relation']);
+    });
+
+    test('given that a component is in a dynamic zone it should not return the name of the dynamic zone', () => {
+      const components = {
+        'basic.simple': {
+          attributes: {
+            id: {
+              type: 'integer',
+            },
+            categories: {
+              type: 'relation',
+              relation: 'oneToMany',
+              target: 'api::category.category',
+              targetModel: 'api::category.category',
+              relationType: 'oneToMany',
+            },
+            my_name: {
+              type: 'string',
+            },
+          },
+        },
+      };
+
+      const attributes = {
+        dynamic_relations: {
+          type: 'dynamiczone',
+          components: ['basic.simple'],
+        },
+      };
+
+      const actual = recursivelyFindPathsBasedOnCondition(
+        components,
+        (value) => value.type === 'component' && value.repeatable === false
+      )(attributes);
+
+      expect(actual).toEqual([]);
+    });
+  });
 });

packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/RelationInputDataManager.js

@@ -40,7 +40,7 @@ export const RelationInputDataManager = ({
   const { connectRelation, disconnectRelation, loadRelation, modifiedData, slug, initialData } =
     useCMEditViewDataManager();
 
-  const relationsFromModifiedData = get(modifiedData, name) ?? [];
+  const relationsFromModifiedData = get(modifiedData, name, []);
 
   const currentLastPage = Math.ceil(get(initialData, name, []).length / RELATIONS_TO_DISPLAY);