Display min/max limits with field description

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

@@ -14,6 +14,7 @@ import InputUID from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 
 import {
+  buildDescription,
   connect,
   generateOptions,
   getInputType,
@@ -166,6 +167,8 @@ function Inputs({
   );
 
   const { label, description, placeholder, visible } = metadatas;
+  const { minLength, maxLength } = fieldSchema;
+  const builtDescription = buildDescription(description, minLength, maxLength);
 
   /**
    * It decides whether using the default `step` accoding to its `inputType` or the one
@@ -218,10 +221,11 @@ function Inputs({
         {...fieldSchema}
         componentUid={componentUid}
         description={
-          metadatas.description
+          builtDescription.id
             ? formatMessage({
-                id: metadatas.description,
-                defaultMessage: metadatas.description,
+                id: builtDescription.id,
+                defaultMessage: builtDescription.defaultMessage,
+                values: builtDescription.values,
               })
             : undefined
         }
@@ -265,7 +269,15 @@ function Inputs({
       intlLabel={{ id: label, defaultMessage: label }}
       // in case the default value of the boolean is null, attribute.default doesn't exist
       isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
-      description={description ? { id: description, defaultMessage: description } : null}
+      description={
+        builtDescription.id
+          ? {
+              id: builtDescription.id,
+              defaultMessage: builtDescription.defaultMessage,
+              values: builtDescription.values,
+            }
+          : null
+      }
       disabled={shouldDisableField}
       error={error}
       labelAction={labelAction}

packages/core/admin/admin/src/content-manager/components/Inputs/utils/fieldDescription.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+/**
+ * Constructs a suitable description, taking into account a fields minimum and
+ * maximum length
+ *
+ * @param {String} description - the fields description
+ * @param {Number} minLength - the minimum length of the field
+ * @param {Number} maxLength -  the maximum length of the field
+ * @returns
+ */
+const buildDescription = (description, minLength, maxLength) => {
+  const minMaxDescription = [];
+
+  if (minLength) {
+    minMaxDescription.push(`min. ${minLength}`);
+  }
+  if (minLength && maxLength) {
+    minMaxDescription.push(`/`);
+  }
+  if (maxLength) {
+    minMaxDescription.push(`max. ${maxLength}`);
+  }
+  if (minMaxDescription.length > 0) {
+    minMaxDescription.push(`characters{br}`);
+  }
+
+  return {
+    id: description,
+    defaultMessage: `${minMaxDescription.join(' ')}${description}`,
+    values: {
+      br: <br />,
+    },
+  };
+};
+
+export default buildDescription;

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

@@ -1,3 +1,4 @@
+export { default as buildDescription } from './fieldDescription';
 export { default as connect } from './connect';
 export { default as generateOptions } from './generateOptions';
 export { default as getInputType } from './getInputType';

packages/core/admin/admin/src/content-manager/components/Inputs/utils/tests/index.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { buildDescription } from '../index';
+
+describe('CONTENT MANAGER | Inputs | Utils', () => {
+  describe('fieldDescription', () => {
+    const description =
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+    const values = { br: <br /> };
+
+    it('correctly generates field description', () => {
+      const minLength = 2;
+      const maxLength = 100;
+
+      const result = buildDescription(description, minLength, maxLength);
+      expect(result).toEqual({
+        defaultMessage: `min. ${minLength} / max. ${maxLength} characters{br}${description}`,
+        id: description,
+        values,
+      });
+    });
+
+    describe('correctly ignores omissions', () => {
+      it('minLength', () => {
+        const minLength = 0;
+        const maxLength = 100;
+
+        const result = buildDescription(description, minLength, maxLength);
+        expect(result).toEqual({
+          defaultMessage: `max. ${maxLength} characters{br}${description}`,
+          id: description,
+          values,
+        });
+      });
+
+      it('maxLength', () => {
+        const minLength = 5;
+        const maxLength = 0;
+
+        const result = buildDescription(description, minLength, maxLength);
+        expect(result).toEqual({
+          defaultMessage: `min. ${minLength} characters{br}${description}`,
+          id: description,
+          values,
+        });
+      });
+    });
+  });
+});

packages/core/content-manager/server/services/utils/configuration/metadatas.js

@@ -36,8 +36,9 @@ function createDefaultMetadata(schema, name) {
     editable: true,
   };
 
-  if (isRelation(schema.attributes[name])) {
-    const { targetModel } = schema.attributes[name];
+  const fieldAttributes = schema.attributes[name];
+  if (isRelation(fieldAttributes)) {
+    const { targetModel } = fieldAttributes;
 
     const targetSchema = getTargetSchema(targetModel);