@strapi/admin 4.1.6-alpha.0 → 4.1.7

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { Badge } from '@strapi/design-system/Badge';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { stopPropagation } from '@strapi/helper-plugin';
+
+import CellValue from '../CellValue';
+
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 500px;
+`;
+
+const RepeatableComponentCell = ({ value, metadatas }) => {
+  const { formatMessage } = useIntl();
+  const {
+    mainField: { type: mainFieldType, name: mainFieldName },
+  } = metadatas;
+
+  const Label = (
+    <>
+      <Badge>{value.length}</Badge>{' '}
+      {formatMessage(
+        {
+          id: 'content-manager.containers.ListPage.items',
+          defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+        },
+        { number: value.length }
+      )}
+    </>
+  );
+
+  return (
+    <Box {...stopPropagation}>
+      <SimpleMenu label={Label} size="S">
+        {value.map(item => (
+          <MenuItem key={item.id} aria-disabled>
+            <TypographyMaxWidth ellipsis>
+              <CellValue type={mainFieldType} value={item[mainFieldName] || item.id} />
+            </TypographyMaxWidth>
+          </MenuItem>
+        ))}
+      </SimpleMenu>
+    </Box>
+  );
+};
+
+RepeatableComponentCell.propTypes = {
+  metadatas: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  }).isRequired,
+  value: PropTypes.array.isRequired,
+};
+
+export default RepeatableComponentCell;

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,60 @@
+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);
+  }
+
+  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/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 && (