@strapi/admin 4.2.0-alpha.O → 4.2.0-beta.2

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Tooltip } from '@strapi/design-system/Tooltip';
+import { Typography } from '@strapi/design-system/Typography';
+
+import CellValue from '../CellValue';
+
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 250px;
+`;
+
+const SingleComponentCell = ({ value, metadatas }) => {
+  const { mainField } = metadatas;
+  const content = value[mainField.name];
+
+  return (
+    <Tooltip label={content}>
+      <TypographyMaxWidth textColor="neutral800" ellipsis>
+        <CellValue type={mainField.type} value={content} />
+      </TypographyMaxWidth>
+    </Tooltip>
+  );
+};
+
+SingleComponentCell.propTypes = {
+  metadatas: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  }).isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export default SingleComponentCell;

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

@@ -4,44 +4,64 @@ import styled from 'styled-components';
 import { Typography } from '@strapi/design-system/Typography';
 import Media from './Media';
 import MultipleMedias from './MultipleMedias';
-import Relation from './Relation';
+import RelationMultiple from './RelationMultiple';
+import RelationSingle from './RelationSingle';
+import RepeatableComponent from './RepeatableComponent';
+import SingleComponent from './SingleComponent';
 import CellValue from './CellValue';
+import hasContent from './utils/hasContent';
+import isSingleRelation from './utils/isSingleRelation';
 
 const TypographyMaxWidth = styled(Typography)`
   max-width: 300px;
 `;
 
 const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId }) => {
-  if (content === null || content === undefined) {
+  const { type } = fieldSchema;
+
+  if (!hasContent(type, content, metadatas, fieldSchema)) {
     return <Typography textColor="neutral800">-</Typography>;
   }
 
-  if (fieldSchema.type === 'media' && !fieldSchema.multiple) {
-    return <Media {...content} />;
-  }
+  switch (type) {
+    case 'media':
+      if (!fieldSchema.multiple) {
+        return <Media {...content} />;
+      }
 
-  if (fieldSchema.type === 'media' && fieldSchema.multiple) {
-    return <MultipleMedias value={content} />;
-  }
+      return <MultipleMedias value={content} />;
 
-  if (fieldSchema.type === 'relation') {
-    return (
-      <Relation
-        fieldSchema={fieldSchema}
-        queryInfos={queryInfos}
-        metadatas={metadatas}
-        value={content}
-        name={name}
-        rowId={rowId}
-      />
-    );
-  }
+    case 'relation': {
+      if (isSingleRelation(fieldSchema.relation)) {
+        return <RelationSingle metadatas={metadatas} value={content} />;
+      }
 
-  return (
-    <TypographyMaxWidth ellipsis textColor="neutral800">
-      <CellValue type={fieldSchema.type} value={content} />
-    </TypographyMaxWidth>
-  );
+      return (
+        <RelationMultiple
+          fieldSchema={fieldSchema}
+          queryInfos={queryInfos}
+          metadatas={metadatas}
+          value={content}
+          name={name}
+          rowId={rowId}
+        />
+      );
+    }
+
+    case 'component':
+      if (fieldSchema.repeatable === true) {
+        return <RepeatableComponent value={content} metadatas={metadatas} />;
+      }
+
+      return <SingleComponent value={content} metadatas={metadatas} />;
+
+    default:
+      return (
+        <TypographyMaxWidth ellipsis textColor="neutral800">
+          <CellValue type={type} value={content} />
+        </TypographyMaxWidth>
+      );
+  }
 };
 
 CellContent.defaultProps = {
@@ -51,8 +71,13 @@ CellContent.defaultProps = {
 
 CellContent.propTypes = {
   content: PropTypes.any,
-  fieldSchema: PropTypes.shape({ multiple: PropTypes.bool, type: PropTypes.string.isRequired })
-    .isRequired,
+  fieldSchema: PropTypes.shape({
+    component: PropTypes.string,
+    multiple: PropTypes.bool,
+    type: PropTypes.string.isRequired,
+    repeatable: PropTypes.bool,
+    relation: PropTypes.string,
+  }).isRequired,
   metadatas: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Box } from '@strapi/design-system/Box';
 import styled from 'styled-components';
+import { useIntl } from 'react-intl';
 import ComponentCard from './ComponentCard';
 
 const Grid = styled.div`
@@ -12,6 +13,8 @@ const Grid = styled.div`
 `;
 
 const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggle }) => {
+  const { formatMessage } = useIntl();
+
   const handleToggle = () => {
     onToggle(category);
   };
@@ -20,7 +23,7 @@ const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggl
     <Accordion expanded={isOpen} onToggle={handleToggle} size="S">
       <AccordionToggle
         variant={isOdd ? 'primary' : 'secondary'}
-        title={category}
+        title={formatMessage({ id: category, defaultMessage: category })}
         togglePosition="left"
       />
       <AccordionContent>

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)}
       />
     );
   }
@@ -224,9 +222,11 @@ function Inputs({
       attribute={fieldSchema}
       autoComplete="new-password"
       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}
       disabled={shouldDisableField}
-      error={errorId}
+      error={error}
       labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
       customInputs={{
@@ -279,7 +279,4 @@ Inputs.propTypes = {
 
 const Memoized = memo(Inputs, isEqual);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);

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