@strapi/admin 4.1.6-alpha.1 → 4.1.6

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -203,8 +203,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const displayErrors = useCallback(
     err => {
       const errorPayload = err.response.data;
-      console.error(errorPayload);
-
       let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
 
       // TODO handle errors correctly when back-end ready
@@ -272,10 +270,14 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         dispatch(setStatus('resolved'));
 
         replace(`/content-manager/collectionType/${slug}/${data.id}${rawQuery}`);
+
+        return Promise.resolve(data);
       } catch (err) {
-        trackUsageRef.current('didNotCreateEntry', { error: err, trackerProperty });
         displayErrors(err);
+        trackUsageRef.current('didNotCreateEntry', { error: err, trackerProperty });
         dispatch(setStatus('resolved'));
+
+        return Promise.reject(err);
       }
     },
     [
@@ -308,9 +310,13 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         type: 'success',
         message: { id: getTrad('success.record.publish') },
       });
+
+      return Promise.resolve(data);
     } catch (err) {
       displayErrors(err);
       dispatch(setStatus('resolved'));
+
+      return Promise.reject(err);
     }
   }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification]);
 
@@ -334,11 +340,15 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         dispatch(submitSucceeded(cleanReceivedData(data)));
 
         dispatch(setStatus('resolved'));
+
+        return Promise.resolve(data);
       } catch (err) {
         trackUsageRef.current('didNotEditEntry', { error: err, trackerProperty });
         displayErrors(err);
 
         dispatch(setStatus('resolved'));
+
+        return Promise.reject(err);
       }
     },
     [cleanReceivedData, displayErrors, slug, id, dispatch, toggleNotification]
@@ -362,9 +372,13 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       dispatch(submitSucceeded(cleanReceivedData(data)));
       dispatch(setStatus('resolved'));
+
+      return Promise.resolve(data);
     } catch (err) {
       dispatch(setStatus('resolved'));
       displayErrors(err);
+
+      return Promise.reject(err);
     }
   }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification]);
 

package/admin/src/content-manager/components/DynamicTable/CellContent/utils/hasContent.js

@@ -1,11 +1,13 @@
 import isEmpty from 'lodash/isEmpty';
+import isNumber from 'lodash/isNumber';
 
 import isSingleRelation from './isSingleRelation';
+import isFieldTypeNumber from '../../../../utils/isFieldTypeNumber';
 
 export default function hasContent(type, content, metadatas, fieldSchema) {
   if (type === 'component') {
     const {
-      mainField: { name: mainFieldName },
+      mainField: { name: mainFieldName, type: mainFieldType },
     } = metadatas;
 
     // Repeatable fields show the ID as fallback, in case the mainField
@@ -14,7 +16,28 @@ export default function hasContent(type, content, metadatas, fieldSchema) {
       return content.length > 0;
     }
 
-    return !isEmpty(content[mainFieldName]);
+    const value = content?.[mainFieldName];
+
+    // relations, media ... show the id as fallback
+    if (mainFieldName === 'id' && ![undefined, null].includes(value)) {
+      return true;
+    }
+
+    /* The ID field reports itself as type `integer`, which makes it
+       impossible to distinguish it from other number fields.
+
+       Biginteger fields need to be treated as strings, as `isNumber`
+       doesn't deal with them.
+    */
+    if (
+      isFieldTypeNumber(mainFieldType) &&
+      mainFieldType !== 'biginteger' &&
+      mainFieldName !== 'id'
+    ) {
+      return isNumber(value);
+    }
+
+    return !isEmpty(value);
   }
 
   if (type === 'relation') {
@@ -25,5 +48,13 @@ export default function hasContent(type, content, metadatas, fieldSchema) {
     return content.count > 0;
   }
 
+  /* 
+      Biginteger fields need to be treated as strings, as `isNumber`
+      doesn't deal with them.
+  */
+  if (isFieldTypeNumber(type) && type !== 'biginteger') {
+    return isNumber(content);
+  }
+
   return !isEmpty(content);
 }

package/admin/src/content-manager/components/EditViewDataManagerProvider/index.js

@@ -1,5 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useRef, useReducer } from 'react';
-import { cloneDeep, get, isEmpty, isEqual, set } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import isEqual from 'lodash/isEqual';
+import set from 'lodash/set';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Prompt, Redirect } from 'react-router-dom';
@@ -10,10 +14,13 @@ import {
   useNotification,
   useOverlayBlocker,
   useTracking,
+  getYupInnerErrors,
 } from '@strapi/helper-plugin';
+
 import { getTrad, removeKeyInObject } from '../../utils';
 import reducer, { initialState } from './reducer';
-import { cleanData, createYupSchema, getYupInnerErrors } from './utils';
+import { cleanData, createYupSchema } from './utils';
+import { getAPIInnerError } from './utils/getAPIInnerError';
 
 const EditViewDataManagerProvider = ({
   allLayoutData,
@@ -262,7 +269,7 @@ const EditViewDataManagerProvider = ({
   );
 
   const createFormData = useCallback(
-    data => {
+    (data) => {
       // First we need to remove the added keys needed for the dnd
       const preparedData = removeKeyInObject(cloneDeep(data), '__temp_key__');
       // Then we need to apply our helper
@@ -286,34 +293,31 @@ const EditViewDataManagerProvider = ({
   }, [hasDraftAndPublish, shouldNotRunValidations]);
 
   const handleSubmit = useCallback(
-    async e => {
+    async (e) => {
       e.preventDefault();
       let errors = {};
 
-      // First validate the form
       try {
         await yupSchema.validate(modifiedData, { abortEarly: false });
-
-        const formData = createFormData(modifiedData);
-
-        if (isCreatingEntry) {
-          onPost(formData, trackerProperty);
-        } else {
-          onPut(formData, trackerProperty);
-        }
       } catch (err) {
-        console.log('ValidationError');
-        console.log(err);
-
         errors = getYupInnerErrors(err);
+      }
 
-        toggleNotification({
-          type: 'warning',
-          message: {
-            id: getTrad('containers.EditView.notification.errors'),
-            defaultMessage: 'The form contains some errors',
-          },
-        });
+      try {
+        if (isEmpty(errors)) {
+          const formData = createFormData(modifiedData);
+
+          if (isCreatingEntry) {
+            await onPost(formData, trackerProperty);
+          } else {
+            await onPut(formData, trackerProperty);
+          }
+        }
+      } catch (err) {
+        errors = {
+          ...errors,
+          ...getAPIInnerError(err),
+        };
       }
 
       dispatch({
@@ -321,16 +325,7 @@ const EditViewDataManagerProvider = ({
         errors,
       });
     },
-    [
-      createFormData,
-      isCreatingEntry,
-      modifiedData,
-      onPost,
-      onPut,
-      toggleNotification,
-      trackerProperty,
-      yupSchema,
-    ]
+    [createFormData, isCreatingEntry, modifiedData, onPost, onPut, trackerProperty, yupSchema]
   );
 
   const handlePublish = useCallback(async () => {
@@ -345,17 +340,22 @@ const EditViewDataManagerProvider = ({
     let errors = {};
 
     try {
-      // Validate the form using yup
       await schema.validate(modifiedData, { abortEarly: false });
-
-      onPublish();
     } catch (err) {
-      console.error('ValidationError');
-      console.error(err);
-
       errors = getYupInnerErrors(err);
     }
 
+    try {
+      if (isEmpty(errors)) {
+        await onPublish();
+      }
+    } catch (err) {
+      errors = {
+        ...errors,
+        ...getAPIInnerError(err),
+      };
+    }
+
     dispatch({
       type: 'SET_FORM_ERRORS',
       errors,
@@ -363,8 +363,8 @@ const EditViewDataManagerProvider = ({
   }, [allLayoutData, currentContentTypeLayout, isCreatingEntry, modifiedData, onPublish]);
 
   const shouldCheckDZErrors = useCallback(
-    dzName => {
-      const doesDZHaveError = Object.keys(formErrors).some(key => key.split('.')[0] === dzName);
+    (dzName) => {
+      const doesDZHaveError = Object.keys(formErrors).some((key) => key.split('.')[0] === dzName);
       const shouldCheckErrors = !isEmpty(formErrors) && doesDZHaveError;
 
       return shouldCheckErrors;
@@ -418,7 +418,7 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const onRemoveRelation = useCallback(keys => {
+  const onRemoveRelation = useCallback((keys) => {
     dispatch({
       type: 'REMOVE_RELATION',
       keys,

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/getAPIInnerError.js

@@ -0,0 +1,18 @@
+import { getTrad } from '../../../utils';
+
+export function getAPIInnerError(error) {
+  const errorPayload = error.response.data.error.details.errors;
+  const validationErrors = errorPayload.reduce((acc, err) => {
+    acc[err.path.join('.')] = {
+      id: getTrad(`apiError.${err.message}`),
+      defaultMessage: err.message,
+      values: {
+        field: err.path[err.path.length - 1],
+      },
+    };
+
+    return acc;
+  }, {});
+
+  return validationErrors;
+}

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/handleAPIError.js

@@ -0,0 +1,15 @@
+import { getTrad } from '../../../utils';
+
+export function handleAPIError(error) {
+  const errorPayload = error.response.data.error.details.errors;
+  const validationErrors = errorPayload.reduce((acc, err) => {
+    acc[err.path.join('.')] = {
+      id: getTrad(`apiError.${err.message}`),
+      defaultMessage: err.message,
+    };
+
+    return acc;
+  }, {});
+
+  return validationErrors;
+}

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/index.js

@@ -1,4 +1,3 @@
 export { default as moveFields } from './moveFields';
 export { default as cleanData } from './cleanData';
-export { default as getYupInnerErrors } from './getYupInnerErrors';
 export { default as createYupSchema } from './schema';

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -7,12 +7,14 @@ import toNumber from 'lodash/toNumber';
 import * as yup from 'yup';
 import { translatedErrors as errorsTrads } from '@strapi/helper-plugin';
 
+import isFieldTypeNumber from '../../../utils/isFieldTypeNumber';
+
 yup.addMethod(yup.mixed, 'defined', function() {
-  return this.test('defined', errorsTrads.required, value => value !== undefined);
+  return this.test('defined', errorsTrads.required, (value) => value !== undefined);
 });
 
 yup.addMethod(yup.array, 'notEmptyMin', function(min) {
-  return this.test('notEmptyMin', errorsTrads.min, value => {
+  return this.test('notEmptyMin', errorsTrads.min, (value) => {
     if (isEmpty(value)) {
       return true;
     }
@@ -49,7 +51,7 @@ yup.addMethod(yup.string, 'isSuperior', function(message, min) {
   });
 });
 
-const getAttributes = data => get(data, ['attributes'], {});
+const getAttributes = (data) => get(data, ['attributes'], {});
 
 const createYupSchema = (
   model,
@@ -95,7 +97,7 @@ const createYupSchema = (
         if (attribute.repeatable === true) {
           const { min, max, required } = attribute;
 
-          let componentSchema = yup.lazy(value => {
+          let componentSchema = yup.lazy((value) => {
             let baseSchema = yup.array().of(componentFieldSchema);
 
             if (min) {
@@ -121,7 +123,7 @@ const createYupSchema = (
 
           return acc;
         }
-        const componentSchema = yup.lazy(obj => {
+        const componentSchema = yup.lazy((obj) => {
           if (obj !== undefined) {
             return attribute.required === true && !options.isDraft
               ? componentFieldSchema.defined()
@@ -152,7 +154,7 @@ const createYupSchema = (
         if (min) {
           if (attribute.required) {
             dynamicZoneSchema = dynamicZoneSchema
-              .test('min', errorsTrads.min, value => {
+              .test('min', errorsTrads.min, (value) => {
                 if (options.isCreatingEntry) {
                   return value && value.length >= min;
                 }
@@ -163,7 +165,7 @@ const createYupSchema = (
 
                 return value !== null && value.length >= min;
               })
-              .test('required', errorsTrads.required, value => {
+              .test('required', errorsTrads.required, (value) => {
                 if (options.isCreatingEntry) {
                   return value !== null || value !== undefined;
                 }
@@ -178,7 +180,7 @@ const createYupSchema = (
             dynamicZoneSchema = dynamicZoneSchema.notEmptyMin(min);
           }
         } else if (attribute.required && !options.isDraft) {
-          dynamicZoneSchema = dynamicZoneSchema.test('required', errorsTrads.required, value => {
+          dynamicZoneSchema = dynamicZoneSchema.test('required', errorsTrads.required, (value) => {
             if (options.isCreatingEntry) {
               return value !== null || value !== undefined;
             }
@@ -213,7 +215,7 @@ const createYupSchemaAttribute = (type, validations, options) => {
   if (type === 'json') {
     schema = yup
       .mixed(errorsTrads.json)
-      .test('isJSON', errorsTrads.json, value => {
+      .test('isJSON', errorsTrads.json, (value) => {
         if (value === undefined) {
           return true;
         }
@@ -236,19 +238,19 @@ const createYupSchemaAttribute = (type, validations, options) => {
   if (['number', 'integer', 'float', 'decimal'].includes(type)) {
     schema = yup
       .number()
-      .transform(cv => (isNaN(cv) ? undefined : cv))
+      .transform((cv) => (isNaN(cv) ? undefined : cv))
       .typeError();
   }
 
-  if (['date', 'datetime'].includes(type)) {
-    schema = yup.date();
-  }
-
   if (type === 'biginteger') {
     schema = yup.string().matches(/^-?\d*$/);
   }
 
-  Object.keys(validations).forEach(validation => {
+  if (['date', 'datetime'].includes(type)) {
+    schema = yup.date();
+  }
+
+  Object.keys(validations).forEach((validation) => {
     const validationValue = validations[validation];
 
     if (
@@ -267,13 +269,13 @@ const createYupSchemaAttribute = (type, validations, options) => {
               if (options.isCreatingEntry) {
                 schema = schema.required(errorsTrads.required);
               } else {
-                schema = schema.test('required', errorsTrads.required, value => {
+                schema = schema.test('required', errorsTrads.required, (value) => {
                   // Field is not touched and the user is editing the entry
                   if (value === undefined && !options.isFromComponent) {
                     return true;
                   }
 
-                  if (['number', 'integer', 'biginteger', 'float', 'decimal'].includes(type)) {
+                  if (isFieldTypeNumber(type)) {
                     if (value === 0) {
                       return true;
                     }
@@ -344,12 +346,12 @@ const createYupSchemaAttribute = (type, validations, options) => {
           }
           break;
         case 'positive':
-          if (['number', 'integer', 'bigint', 'float', 'decimal'].includes(type)) {
+          if (isFieldTypeNumber(type)) {
             schema = schema.positive();
           }
           break;
         case 'negative':
-          if (['number', 'integer', 'bigint', 'float', 'decimal'].includes(type)) {
+          if (isFieldTypeNumber(type)) {
             schema = schema.negative();
           }
           break;

package/admin/src/content-manager/components/InputUID/index.js

@@ -82,7 +82,6 @@ const InputUID = ({
       onChange({ target: { name, value: data, type: 'text' } }, shouldSetInitialValue);
       setIsLoading(false);
     } catch (err) {
-      console.error({ err });
       setIsLoading(false);
     }
   };
@@ -107,7 +106,6 @@ const InputUID = ({
 
       setIsLoading(false);
     } catch (err) {
-      console.error({ err });
       setIsLoading(false);
     }
   };
@@ -184,12 +182,10 @@ const InputUID = ({
     onChange(e);
   };
 
-  const formattedError = error ? formatMessage({ id: error, defaultMessage: error }) : undefined;
-
   return (
     <TextInput
       disabled={disabled}
-      error={formattedError}
+      error={error}
       endAction={
         <EndActionWrapper>
           {availability && availability.isAvailable && !regenerateLabel && (

package/admin/src/content-manager/components/Inputs/index.js

@@ -42,10 +42,7 @@ function Inputs({
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
   const type = fieldSchema.type;
-
-  const errorId = useMemo(() => {
-    return get(formErrors, [keys, 'id'], null);
-  }, [formErrors, keys]);
+  const error = get(formErrors, [keys], null);
 
   const fieldName = useMemo(() => {
     return getFieldName(keys);
@@ -160,10 +157,10 @@ function Inputs({
     return disabled;
   }, [disabled, isCreatingEntry, isUserAllowedToEditField, isUserAllowedToReadField]);
 
-  const options = useMemo(() => generateOptions(fieldSchema.enum || [], isRequired), [
-    fieldSchema,
-    isRequired,
-  ]);
+  const options = useMemo(
+    () => generateOptions(fieldSchema.enum || [], isRequired),
+    [fieldSchema, isRequired]
+  );
 
   const { label, description, placeholder, visible } = metadatas;
 
@@ -177,7 +174,7 @@ function Inputs({
         description={description ? { id: description, defaultMessage: description } : null}
         intlLabel={{ id: label, defaultMessage: label }}
         labelAction={labelAction}
-        error={errorId}
+        error={error && formatMessage(error)}
         name={keys}
         required={isRequired}
       />
@@ -215,6 +212,7 @@ function Inputs({
         }
         queryInfos={queryInfos}
         value={value}
+        error={error && formatMessage(error)}
       />
     );
   }
@@ -228,7 +226,7 @@ function Inputs({
       isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
       description={description ? { id: description, defaultMessage: description } : null}
       disabled={shouldDisableField}
-      error={errorId}
+      error={error}
       labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
       customInputs={{

package/admin/src/content-manager/components/RepeatableComponent/index.js

@@ -207,9 +207,6 @@ RepeatableComponent.propTypes = {
 
 const Memoized = memo(RepeatableComponent);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);
 
 export { RepeatableComponent };

package/admin/src/content-manager/components/SingleTypeFormWrapper/index.js

@@ -144,8 +144,6 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const displayErrors = useCallback(
     err => {
       const errorPayload = err.response.payload;
-      console.error(errorPayload);
-
       let errorMessage = get(errorPayload, ['message'], 'Bad Request');
 
       // TODO handle errors correctly when back-end ready
@@ -178,10 +176,12 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       } catch (err) {
         trackUsageRef.current('didNotDeleteEntry', { error: err, ...trackerProperty });
 
+        displayErrors(err);
+
         return Promise.reject(err);
       }
     },
-    [slug, toggleNotification, searchToSend]
+    [slug, displayErrors, toggleNotification, searchToSend]
   );
 
   const onDeleteSucceeded = useCallback(() => {
@@ -211,12 +211,16 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         setIsCreatingEntry(false);
 
         dispatch(setStatus('resolved'));
+
+        return Promise.resolve(data);
       } catch (err) {
         trackUsageRef.current('didNotCreateEntry', { error: err, trackerProperty });
 
         displayErrors(err);
 
         dispatch(setStatus('resolved'));
+
+        return Promise.reject(err);
       }
     },
     [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification, setCurrentStep]
@@ -239,10 +243,14 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       dispatch(submitSucceeded(cleanReceivedData(data)));
 
       dispatch(setStatus('resolved'));
+
+      return Promise.resolve(data);
     } catch (err) {
       displayErrors(err);
 
       dispatch(setStatus('resolved'));
+
+      return Promise.reject(err);
     }
   }, [cleanReceivedData, displayErrors, slug, searchToSend, dispatch, toggleNotification]);
 
@@ -267,12 +275,16 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         dispatch(submitSucceeded(cleanReceivedData(data)));
 
         dispatch(setStatus('resolved'));
+
+        return Promise.resolve(data);
       } catch (err) {
         displayErrors(err);
 
         trackUsageRef.current('didNotEditEntry', { error: err, trackerProperty });
 
         dispatch(setStatus('resolved'));
+
+        return Promise.reject(err);
       }
     },
     [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification]

package/admin/src/content-manager/components/Wysiwyg/index.js

@@ -118,7 +118,6 @@ const Wysiwyg = ({
       )
     : '';
 
-  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
   const label = intlLabel.id
     ? formatMessage(
         { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
@@ -157,7 +156,7 @@ const Wysiwyg = ({
             disabled={disabled}
             isExpandMode={isExpandMode}
             editorRef={editorRef}
-            error={errorMessage}
+            error={error}
             isPreviewMode={isPreviewMode}
             name={name}
             onChange={onChange}
@@ -171,10 +170,10 @@ const Wysiwyg = ({
         <Hint description={description} name={name} error={error} />
       </Stack>
 
-      {errorMessage && (
+      {error && (
         <Box paddingTop={1}>
           <Typography variant="pi" textColor="danger600" data-strapi-field-error>
-            {errorMessage}
+            {error}
           </Typography>
         </Box>
       )}

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -11,7 +11,12 @@ import { makeSelectModelAndComponentSchemas } from '../../App/selectors';
 import getTrad from '../../../utils/getTrad';
 import GenericInput from './GenericInput';
 
-const FIELD_SIZES = [[4, '33%'], [6, '50%'], [8, '66%'], [12, '100%']];
+const FIELD_SIZES = [
+  [4, '33%'],
+  [6, '50%'],
+  [8, '66%'],
+  [12, '100%'],
+];
 
 const NON_RESIZABLE_FIELD_TYPES = ['dynamiczone', 'component', 'json', 'richtext'];
 

package/admin/src/content-manager/pages/EditSettingsView/utils/layout.js

@@ -28,7 +28,13 @@ const formatLayout = arr => {
 
         return acc2;
       }, []);
-      const rowId = acc.length === 0 ? 0 : Math.max.apply(Math, acc.map(o => o.rowId)) + 1;
+      const rowId =
+        acc.length === 0
+          ? 0
+          : Math.max.apply(
+              Math,
+              acc.map(o => o.rowId)
+            ) + 1;
 
       const currentRowSize = getRowSize(currentRow);