Merge pull request #12975 from strapi/fix/nested-components-errors

RepeatableComponent: Fix error messages when component is nested

packages/core/admin/admin/src/content-manager/components/FieldComponent/index.js

@@ -106,7 +106,6 @@ const FieldComponent = ({
             componentValue={componentValue}
             componentValueLength={componentValueLength}
             componentUid={componentUid}
-            isNested={isNested}
             isReadOnly={isReadOnly}
             max={max}
             min={min}

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/index.js

@@ -5,7 +5,6 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import take from 'lodash/take';
 import { useNotification } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
@@ -17,6 +16,7 @@ import ItemTypes from '../../utils/ItemTypes';
 import ComponentInitializer from '../ComponentInitializer';
 import connect from './utils/connect';
 import select from './utils/select';
+import getComponentErrorKeys from './utils/getComponentErrorKeys';
 import DraggedItem from './DraggedItem';
 import AccordionGroupCustom from './AccordionGroupCustom';
 
@@ -38,7 +38,6 @@ const RepeatableComponent = ({
   componentUid,
   componentValue,
   componentValueLength,
-  isNested,
   isReadOnly,
   max,
   min,
@@ -59,16 +58,7 @@ const RepeatableComponent = ({
     return getMaxTempKey(componentValue || []) + 1;
   }, [componentValue]);
 
-  const componentErrorKeys = Object.keys(formErrors)
+  const componentErrorKeys = getComponentErrorKeys(name, formErrors);
-    .filter(errorKey => {
-      return take(errorKey.split('.'), isNested ? 3 : 1).join('.') === name;
-    })
-    .map(errorKey => {
-      return errorKey
-        .split('.')
-        .slice(0, name.split('.').length + 1)
-        .join('.');
-    });
 
   const toggleCollapses = () => {
     setCollapseToOpen('');
@@ -187,7 +177,6 @@ RepeatableComponent.defaultProps = {
   componentValue: null,
   componentValueLength: 0,
   formErrors: {},
-  isNested: false,
   max: Infinity,
   min: 0,
 };
@@ -198,7 +187,6 @@ RepeatableComponent.propTypes = {
   componentValue: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   componentValueLength: PropTypes.number,
   formErrors: PropTypes.object,
-  isNested: PropTypes.bool,
   isReadOnly: PropTypes.bool.isRequired,
   max: PropTypes.number,
   min: PropTypes.number,

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/utils/getComponentErrorKeys.js

@@ -0,0 +1,10 @@
+export default function getComponentErrorKeys(name, formErrors) {
+  return Object.keys(formErrors)
+    .filter(errorKey => errorKey.startsWith(name))
+    .map(errorKey =>
+      errorKey
+        .split('.')
+        .slice(0, name.split('.').length + 1)
+        .join('.')
+    );
+}

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/utils/tests/getComponentErrorKeys.test.js

@@ -0,0 +1,27 @@
+import getComponentErrorKeys from '../getComponentErrorKeys';
+
+describe('getComponentErrorKeys', () => {
+  test('retrieves error keys for non nested components', () => {
+    const FIXTURE = {
+      'component.0.name': 'unique-error',
+      'component.1.field': 'validation-error',
+    };
+
+    expect(getComponentErrorKeys('component', FIXTURE)).toStrictEqual([
+      'component.0',
+      'component.1',
+    ]);
+  });
+
+  test('retrieves error keys for nested components', () => {
+    const FIXTURE = {
+      'parent.child.0.name': 'unique-error',
+      'parent.child.1.field': 'validation-error',
+    };
+
+    expect(getComponentErrorKeys('parent.child', FIXTURE)).toStrictEqual([
+      'parent.child.0',
+      'parent.child.1',
+    ]);
+  });
+});