Prevent saving content type when dynamic zone does not have components. (#12123)

* Add min validation for dynamiczone

Signed-off-by: soupette <cyril@strapi.io>

* Add toast when schema is not valid

Signed-off-by: soupette <cyril@strapi.io>

* Fix PR feedback

Signed-off-by: soupette <cyril@strapi.io>

packages/core/content-type-builder/admin/src/components/DataManagerProvider/index.js

@@ -28,6 +28,7 @@ import retrieveComponentsFromSchema from './utils/retrieveComponentsFromSchema';
 import retrieveNestedComponents from './utils/retrieveNestedComponents';
 import { retrieveComponentsThatHaveComponents } from './utils/retrieveComponentsThatHaveComponents';
 import { getComponentsToPost, formatMainDataType, sortContentType } from './utils/cleanData';
+import validateSchema from './utils/validateSchema';
 
 import {
   ADD_ATTRIBUTE,
@@ -440,6 +441,21 @@ const DataManagerProvider = ({
           initialData.contentType
         );
 
+        const isValidSchema = validateSchema(contentType);
+
+        if (!isValidSchema) {
+          toggleNotification({
+            type: 'warning',
+            message: {
+              id: getTrad('notification.error.dynamiczone-min.validation'),
+              defaultMessage:
+                'At least one component is required in a dynamic zone to be able to save a content type',
+            },
+          });
+
+          return;
+        }
+
         body.contentType = contentType;
 
         trackUsage('willSaveContentType');

packages/core/content-type-builder/admin/src/components/DataManagerProvider/utils/validateSchema.js

@@ -0,0 +1,11 @@
+const validateSchema = schema => {
+  const dynamicZoneAttributes = Object.values(schema.attributes).filter(
+    ({ type }) => type === 'dynamiczone'
+  );
+
+  return dynamicZoneAttributes.every(
+    ({ components }) => Array.isArray(components) && components.length > 0
+  );
+};
+
+export default validateSchema;

packages/core/content-type-builder/admin/src/translations/en.json

@@ -166,6 +166,7 @@
   "modelPage.attribute.relation-polymorphic": "Relation (polymorphic)",
   "modelPage.attribute.relationWith": "Relation with",
   "none": "None",
+  "notification.error.dynamiczone-min.validation": "At least one component is required in a dynamic zone to be able to save a content type",
   "notification.info.autoreaload-disable": "The autoReload feature is required to use this plugin. Start your server with `strapi develop`",
   "notification.info.creating.notSaved": "Please save your work before creating a new collection type or component",
   "plugin.description.long": "Modelize the data structure of your API. Create new fields and relations in just a minute. The files are automatically created and updated in your project.",

packages/core/content-type-builder/server/controllers/validation/__tests__/types.test.js

@@ -43,6 +43,42 @@ describe('Type validators', () => {
     });
   });
 
+  describe('Dynamiczone type validator', () => {
+    test('Components cannot be empty', () => {
+      const attributes = {
+        dz: {
+          type: 'dynamiczone',
+          components: [],
+        },
+      };
+
+      const validator = getTypeValidator(attributes.dz, {
+        types: ['dynamiczone'],
+        modelType: 'collectionType',
+        attributes,
+      });
+
+      expect(validator.isValidSync(attributes.dz)).toBeFalsy();
+    });
+
+    test('Components must have at least one item', () => {
+      const attributes = {
+        dz: {
+          type: 'dynamiczone',
+          components: ['compoA', 'compoB'],
+        },
+      };
+
+      const validator = getTypeValidator(attributes.dz, {
+        types: ['dynamiczone'],
+        modelType: 'collectionType',
+        attributes,
+      });
+
+      expect(validator.isValidSync(attributes.dz)).toBeTruthy();
+    });
+  });
+
   describe('UID type validator', () => {
     test('Target field can be null', () => {
       const attributes = {

packages/core/content-type-builder/server/controllers/validation/types.js

@@ -258,7 +258,8 @@ const getTypeShape = (attribute, { modelType, attributes } = {}) => {
         components: yup
           .array()
           .of(yup.string().required())
-          .test('isArray', '${path} must be an array', value => Array.isArray(value)),
+          .test('isArray', '${path} must be an array', value => Array.isArray(value))
+          .min(1),
         min: yup.number(),
         max: yup.number(),
       };