Display min/max limits with field description

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

@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { Typography } from '@strapi/design-system/Typography';
 
-export const Hint = ({ id, error, name, description }) => {
-  const { formatMessage } = useIntl();
-  const hint = description
-    ? formatMessage(
-        { id: description.id, defaultMessage: description.defaultMessage },
-        { ...description.values }
-      )
-    : '';
-
-  if (!hint || error) {
+export const Hint = ({ id, error, name, hint }) => {
+  if (hint.length === 0 || error) {
     return null;
   }
 
@@ -25,16 +16,12 @@ export const Hint = ({ id, error, name, description }) => {
 
 Hint.defaultProps = {
   id: undefined,
-  description: undefined,
   error: undefined,
+  hint: '',
 };
 
 Hint.propTypes = {
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   error: PropTypes.string,
   id: PropTypes.string,
   name: PropTypes.string.isRequired,

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

@@ -23,7 +23,7 @@ import {
 const InputUID = ({
   attribute,
   contentTypeUID,
-  description,
+  hint,
   disabled,
   error,
   intlLabel,
@@ -54,13 +54,6 @@ const InputUID = ({
       )
     : name;
 
-  const hint = description
-    ? formatMessage(
-        { id: description.id, defaultMessage: description.defaultMessage },
-        { ...description.values }
-      )
-    : '';
-
   const formattedPlaceholder = placeholder
     ? formatMessage(
         { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
@@ -251,11 +244,6 @@ InputUID.propTypes = {
     required: PropTypes.bool,
   }).isRequired,
   contentTypeUID: PropTypes.string.isRequired,
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
   disabled: PropTypes.bool,
   error: PropTypes.string,
   intlLabel: PropTypes.shape({
@@ -273,16 +261,17 @@ InputUID.propTypes = {
     values: PropTypes.object,
   }),
   required: PropTypes.bool,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
 };
 
 InputUID.defaultProps = {
-  description: undefined,
   disabled: false,
   error: undefined,
   labelAction: undefined,
   placeholder: undefined,
   value: '',
   required: false,
+  hint: '',
 };
 
 export default InputUID;

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

@@ -31,7 +31,7 @@ const TypographyAsterisk = styled(Typography)`
 `;
 
 const Wysiwyg = ({
-  description,
+  hint,
   disabled,
   error,
   intlLabel,
@@ -167,7 +167,7 @@ const Wysiwyg = ({
 
           {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
         </EditorLayout>
-        <Hint description={description} name={name} error={error} />
+        <Hint hint={hint} name={name} error={error} />
       </Stack>
 
       {error && (
@@ -186,21 +186,17 @@ const Wysiwyg = ({
 };
 
 Wysiwyg.defaultProps = {
-  description: null,
   disabled: false,
   error: '',
   labelAction: undefined,
   placeholder: null,
   required: false,
   value: '',
+  hint: '',
 };
 
 Wysiwyg.propTypes = {
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   disabled: PropTypes.bool,
   error: PropTypes.string,
   intlLabel: PropTypes.shape({

packages/core/admin/admin/src/translations/en.json

@@ -699,6 +699,9 @@
   "content-manager.form.Input.sort.field": "Enable sort on this field",
   "content-manager.form.Input.sort.order": "Default sort order",
   "content-manager.form.Input.wysiwyg": "Display as WYSIWYG",
+  "content-manager.form.Input.hint.text": "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}",
+  "content-manager.form.Input.hint.minMaxDivider": " / ",
+  "content-manager.form.Input.hint.character.unit": "{maxValue, plural, one { character} other { characters}}",
   "content-manager.global.displayedFields": "Displayed Fields",
   "content-manager.groups": "Groups",
   "content-manager.groups.numbered": "Groups ({number})",

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);
 

packages/core/helper-plugin/lib/src/components/GenericInput/index.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import parseISO from 'date-fns/parseISO';
 import formatISO from 'date-fns/formatISO';
 import { useIntl } from 'react-intl';
+
 import {
   Checkbox,
   DatePicker,
@@ -24,7 +25,9 @@ import {
 import { Option } from '@strapi/design-system/Select';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
+
 import NotSupported from './NotSupported';
+import useFieldHint from '../../hooks/useFieldHint';
 
 const GenericInput = ({
   autoComplete,
@@ -43,9 +46,16 @@ const GenericInput = ({
   type,
   value: defaultValue,
   isNullable,
+  attribute,
   ...rest
 }) => {
   const { formatMessage } = useIntl();
+
+  const { hint } = useFieldHint({
+    description,
+    fieldSchema: attribute,
+    type: attribute?.type || type,
+  });
   const [showPassword, setShowPassword] = useState(false);
 
   const CustomInput = customInputs ? customInputs[type] : null;
@@ -91,7 +101,9 @@ const GenericInput = ({
     return (
       <CustomInput
         {...rest}
+        attribute={attribute}
         description={description}
+        hint={hint}
         disabled={disabled}
         intlLabel={intlLabel}
         labelAction={labelAction}
@@ -114,13 +126,6 @@ const GenericInput = ({
       )
     : name;
 
-  const hint = description
-    ? formatMessage(
-        { id: description.id, defaultMessage: description.defaultMessage },
-        { ...description.values }
-      )
-    : '';
-
   const formattedPlaceholder = placeholder
     ? formatMessage(
         { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
@@ -210,7 +215,10 @@ const GenericInput = ({
           required={required}
           value={value && new Date(value)}
           selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
-          selectButtonTitle={formatMessage({ id: 'selectButtonTitle', defaultMessage: 'Select' })}
+          selectButtonTitle={formatMessage({
+            id: 'selectButtonTitle',
+            defaultMessage: 'Select',
+          })}
         />
       );
     }
@@ -451,6 +459,7 @@ GenericInput.defaultProps = {
   options: [],
   step: 1,
   value: undefined,
+  attribute: null,
 };
 
 GenericInput.propTypes = {
@@ -461,6 +470,7 @@ GenericInput.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
+  attribute: PropTypes.object,
   disabled: PropTypes.bool,
   error: PropTypes.oneOfType([
     PropTypes.string,

packages/core/helper-plugin/lib/src/hooks/useFieldHint/index.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getFieldUnits, getMinMax } from './utils';
+
+/**
+ * @description
+ * A hook for generating the hint for a field
+ * @type {
+ * ({ description: { id: string, defaultMessage: string },
+ *    type: string,
+ *    fieldSchema: { minLength?: number|string; maxLength?: number|string; max?: number|string; min?: number|string }
+ * })
+ * => { hint: ''|Array }
+ * }
+ */
+const useFieldHint = ({ description, fieldSchema, type }) => {
+  const { formatMessage } = useIntl();
+
+  /**
+   * @returns {String}
+   */
+  const buildDescription = () =>
+    description?.id
+      ? formatMessage(
+          { id: description.id, defaultMessage: description.defaultMessage },
+          { ...description.values }
+        )
+      : '';
+
+  /**
+   * @returns {''|Array}
+   */
+  const buildHint = () => {
+    const { maximum, minimum } = getMinMax(fieldSchema);
+    const units = getFieldUnits({
+      type,
+      minimum,
+      maximum,
+    });
+
+    const minIsNumber = typeof minimum === 'number';
+    const maxIsNumber = typeof maximum === 'number';
+    const hasMinAndMax = maxIsNumber && minIsNumber;
+    const hasMinOrMax = maxIsNumber || minIsNumber;
+
+    if (!description?.id && !hasMinOrMax) {
+      return '';
+    }
+
+    return formatMessage(
+      {
+        id: 'content-manager.form.Input.hint.text',
+        defaultMessage:
+          '{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}',
+      },
+      {
+        min: minimum,
+        max: maximum,
+        description: buildDescription(),
+        unit: units?.message && hasMinOrMax ? formatMessage(units.message, units.values) : null,
+        divider: hasMinAndMax
+          ? formatMessage({
+              id: 'content-manager.form.Input.hint.minMaxDivider',
+              defaultMessage: ' / ',
+            })
+          : null,
+        br: hasMinOrMax ? <br /> : null,
+      }
+    );
+  };
+
+  return { hint: buildHint() };
+};
+
+export default useFieldHint;