@strapi/admin 4.2.0-beta.0 → 4.2.0-beta.3

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

@@ -0,0 +1,64 @@
+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, type: mainFieldType },
+    } = metadatas;
+
+    // Repeatable fields show the ID as fallback, in case the mainField
+    // doesn't have any content
+    if (fieldSchema?.repeatable) {
+      return content.length > 0;
+    }
+
+    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') {
+    if (isSingleRelation(fieldSchema.relation)) {
+      return !isEmpty(content);
+    }
+
+    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);
+  }
+
+  if (type === 'boolean') {
+    return content !== null;
+  }
+
+  return !isEmpty(content);
+}

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

@@ -0,0 +1,3 @@
+export default function isSingleRelation(type) {
+  return ['oneToOne', 'manyToOne', 'oneToOneMorph'].includes(type);
+}

package/admin/src/content-manager/components/DynamicTable/TableRows/index.js

@@ -148,7 +148,7 @@ const TableRows = ({
                           onClickDelete(data.id);
                         }}
                         label={formatMessage(
-                          { id: 'app.component.table.delete', defaultMessage: 'Delete {target}' },
+                          { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
                           { target: itemLineText }
                         )}
                         noBorder

package/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/Category/ComponentCard/index.js

@@ -74,7 +74,7 @@ function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
 }
 
 ComponentCard.defaultProps = {
-  icon: 'smile',
+  icon: 'dice-d6',
   onClick: () => {},
 };
 

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

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { pxToRem, RemoveRoundedButton } from '@strapi/helper-plugin';
+import { pxToRem, RemoveRoundedButton, Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 import has from 'lodash/has';
@@ -9,7 +9,6 @@ import isEmpty from 'lodash/isEmpty';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
-import { Link } from '@strapi/design-system/Link';
 import { getTrad } from '../../utils';
 
 const StyledBullet = styled.div`

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

@@ -1,21 +1,22 @@
 import React, { useCallback, useState, useEffect, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
-import {
-  // FormattedMessage,
-  useIntl,
-} from 'react-intl';
+import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
-import { Link } from '@strapi/design-system/Link';
-import { Stack } from '@strapi/design-system/Stack';
 import { useTheme } from 'styled-components';
 import findIndex from 'lodash/findIndex';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
 import set from 'lodash/set';
-import { NotAllowedInput, useCMEditViewDataManager, useQueryParams } from '@strapi/helper-plugin';
+import {
+  NotAllowedInput,
+  useCMEditViewDataManager,
+  useQueryParams,
+  Link,
+} from '@strapi/helper-plugin';
 import { stringify } from 'qs';
 import axios from 'axios';
+import { Stack } from '@strapi/design-system/Stack';
 import { axiosInstance } from '../../../core/utils';
 import { getTrad } from '../../utils';
 import Label from './Label';

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -43,7 +43,7 @@ const getSelectStyles = theme => {
       };
     },
     indicatorContainer: base => ({ ...base, padding: 0, paddingRight: theme.spaces[3] }),
-    input: base => ({ ...base, margin: 0, padding: 0 }),
+    input: base => ({ ...base, margin: 0, padding: 0, color: theme.colors.neutral800 }),
     menu: base => {
       return {
         ...base,

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

@@ -143,10 +143,8 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
   const displayErrors = useCallback(
     err => {
-      const errorPayload = err.response.payload;
-      console.error(errorPayload);
-
-      let errorMessage = get(errorPayload, ['message'], 'Bad Request');
+      const errorPayload = err.response.data;
+      let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
 
       // TODO handle errors correctly when back-end ready
       if (Array.isArray(errorMessage)) {
@@ -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/Editor.js

@@ -32,6 +32,8 @@ const Editor = ({
       readOnly: false,
       smartIndent: false,
       placeholder,
+      spellcheck: true,
+      inputStyle: 'contenteditable',
     });
 
     CodeMirror.commands.newlineAndIndentContinueMarkdownList = newlineAndIndentContinueMarkdownList;

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