@strapi/admin 4.2.0-alpha.9 → 4.2.0-beta.1

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,
@@ -290,30 +297,27 @@ const EditViewDataManagerProvider = ({
       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,

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,6 +7,8 @@ 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);
 });
@@ -240,14 +242,14 @@ const createYupSchemaAttribute = (type, validations, options) => {
       .typeError();
   }
 
-  if (['date', 'datetime'].includes(type)) {
-    schema = yup.date();
-  }
-
   if (type === 'biginteger') {
     schema = yup.string().matches(/^-?\d*$/);
   }
 
+  if (['date', 'datetime'].includes(type)) {
+    schema = yup.date();
+  }
+
   Object.keys(validations).forEach(validation => {
     const validationValue = validations[validation];
 
@@ -273,7 +275,7 @@ const createYupSchemaAttribute = (type, validations, options) => {
                     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/FieldComponent/index.js

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

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);
@@ -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/AccordionGroupCustom/index.js

@@ -92,7 +92,7 @@ const AccordionGroupCustom = ({ children, footer, label, labelAction, error }) =
       {error && (
         <Box paddingTop={1}>
           <Typography variant="pi" textColor="danger600">
-            {formatMessage({ id: error.id, defaultMessage: error.id })}
+            {formatMessage({ id: error.id, defaultMessage: error.id }, { ...error.values })}
           </Typography>
         </Box>
       )}
@@ -111,6 +111,8 @@ AccordionGroupCustom.propTypes = {
   children: PropTypes.node.isRequired,
   error: PropTypes.shape({
     id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
   }),
   footer: PropTypes.node,
   label: PropTypes.string,

package/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)
-    .filter(errorKey => {
-      return take(errorKey.split('.'), isNested ? 3 : 1).join('.') === name;
-    })
-    .map(errorKey => {
-      return errorKey
-        .split('.')
-        .slice(0, name.split('.').length + 1)
-        .join('.');
-    });
+  const componentErrorKeys = getComponentErrorKeys(name, formErrors);
 
   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,
@@ -207,9 +195,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/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('.')
+    );
+}

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

@@ -70,7 +70,7 @@ function SelectMany({
         onMenuOpen={onMenuOpen}
         onMenuScrollToBottom={onMenuScrollToBottom}
         placeholder={formatMessage(
-          placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+          placeholder || { id: 'global.select', defaultMessage: 'Select...' }
         )}
         styles={styles}
         value={[]}

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

@@ -46,7 +46,7 @@ function SelectOne({
         onMenuOpen={onMenuOpen}
         onMenuScrollToBottom={onMenuScrollToBottom}
         placeholder={formatMessage(
-          placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+          placeholder || { id: 'global.select', defaultMessage: 'Select...' }
         )}
         styles={styles}
         value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}

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/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -40,7 +40,7 @@ const formatLayouts = (initialData, models) => {
   const formattedCTEditLayout = formatLayoutWithMetas(data.contentType, null, models);
   const ctUid = data.contentType.uid;
   const formattedEditRelationsLayout = formatEditRelationsLayoutWithMetas(data.contentType, models);
-  const formattedListLayout = formatListLayoutWithMetas(data.contentType, models);
+  const formattedListLayout = formatListLayoutWithMetas(data.contentType, data.components);
 
   set(data, ['contentType', 'layouts', 'edit'], formattedCTEditLayout);
   set(data, ['contentType', 'layouts', 'editRelations'], formattedEditRelationsLayout);
@@ -146,7 +146,7 @@ const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
   return formatted;
 };
 
-const formatListLayoutWithMetas = contentTypeConfiguration => {
+const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
   const formatted = contentTypeConfiguration.layouts.list.reduce((acc, current) => {
     const fieldSchema = get(contentTypeConfiguration, ['attributes', current], {});
     const metadatas = get(contentTypeConfiguration, ['metadatas', current, 'list'], {});
@@ -164,6 +164,27 @@ const formatListLayoutWithMetas = contentTypeConfiguration => {
       return acc;
     }
 
+    if (type === 'component') {
+      const component = components[fieldSchema.component];
+      const mainFieldName = component.settings.mainField;
+      const mainFieldAttribute = component.attributes[mainFieldName];
+
+      acc.push({
+        key: `__${current}_key__`,
+        name: current,
+        fieldSchema,
+        metadatas: {
+          ...metadatas,
+          mainField: {
+            ...mainFieldAttribute,
+            name: mainFieldName,
+          },
+        },
+      });
+
+      return acc;
+    }
+
     acc.push({ key: `__${current}_key__`, name: current, fieldSchema, metadatas });
 
     return acc;

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

@@ -44,7 +44,7 @@ const FieldButtonContent = ({ attribute, onEditField, onDeleteField, children })
           <CustomIconButton
             label={formatMessage(
               {
-                id: getTrad('app.component.table.delete'),
+                id: 'global.delete-target',
                 defaultMessage: `Delete {target}`,
               },
               {

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

@@ -72,7 +72,7 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) =>
           }
           endActions={
             <Button type="submit">
-              {formatMessage({ id: 'form.button.finish', defaultMessage: 'Finish' })}
+              {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
             </Button>
           }
         />

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/index.js

@@ -59,8 +59,8 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
         'relation',
         'component',
         'boolean',
-        'date',
         'media',
+        'password',
         'richtext',
         'timestamp',
       ].includes(type) && !!type
@@ -250,7 +250,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                 to="/"
               >
                 {formatMessage({
-                  id: 'app.components.go-back',
+                  id: 'global.back',
                   defaultMessage: 'Back',
                 })}
               </Link>
@@ -261,7 +261,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                 startIcon={<Check />}
                 type="submit"
               >
-                {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+                {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
               </Button>
             }
           />

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

package/admin/src/content-manager/pages/EditView/DeleteLink/index.js

@@ -71,7 +71,4 @@ DeleteLink.propTypes = {
 
 const Memoized = memo(DeleteLink, isEqual);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);

package/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/index.js

@@ -88,8 +88,5 @@ DraftAndPublishBadge.propTypes = {
   isPublished: PropTypes.bool.isRequired,
 };
 
-export default connect(
-  DraftAndPublishBadge,
-  select
-);
+export default connect(DraftAndPublishBadge, select);
 export { DraftAndPublishBadge };

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -172,7 +172,7 @@ const Header = ({
             to="/"
           >
             {formatMessage({
-              id: 'app.components.HeaderLayout.link.go-back',
+              id: 'global.back',
               defaultMessage: 'Back',
             })}
           </Link>