@strapi/admin 4.0.0 → 4.0.1

package/admin/src/components/Notifications/Notification/index.js

@@ -40,18 +40,18 @@ const Notification = ({ dispatch, notification }) => {
     variant = 'default';
     alertTitle = formatMessage({
       id: 'notification.default.title',
-      defaultMessage: 'Information Alert:',
+      defaultMessage: 'Information:',
     });
   } else if (type === 'warning') {
     alertTitle = formatMessage({
       id: 'notification.warning.title',
-      defaultMessage: 'Warning Alert:',
+      defaultMessage: 'Warning:',
     });
     variant = 'danger';
   } else {
     alertTitle = formatMessage({
       id: 'notification.success.title',
-      defaultMessage: 'Success Alert:',
+      defaultMessage: 'Success:',
     });
     variant = 'success';
   }

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

@@ -200,10 +200,10 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const displayErrors = useCallback(
     err => {
-      const errorPayload = err.response.payload;
+      const errorPayload = err.response.data;
       console.error(errorPayload);
 
-      let errorMessage = get(errorPayload, ['message'], 'Bad Request');
+      let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
 
       // TODO handle errors correctly when back-end ready
       if (Array.isArray(errorMessage)) {

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

@@ -57,13 +57,10 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
       </Box>
       {error?.id && (
         <Typography textColor="danger600" variant="pi">
-          {formatMessage(
-            {
-              id: error.id,
-              defaultMessage: error.defaultMessage,
-            },
-            error.values
-          )}
+          {formatMessage({
+            id: error.id,
+            defaultMessage: error.id,
+          })}
         </Typography>
       )}
     </>
@@ -78,8 +75,6 @@ ComponentInitializer.defaultProps = {
 ComponentInitializer.propTypes = {
   error: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
   }),
   isReadOnly: PropTypes.bool,
   onClick: PropTypes.func.isRequired,

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

@@ -54,7 +54,7 @@ const CustomDragLayer = () => {
     <LayoutDndProvider>
       <div style={layerStyles}>
         <div style={getItemStyles(initialOffset, currentOffset, mouseOffset)} className="col-md-2">
-          {[ItemTypes.EDIT_RELATION, ItemTypes.EDIT_FIELD].includes(itemType) && (
+          {[ItemTypes.EDIT_RELATION, ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(itemType) && (
             <CardPreview labelField={item.labelField} />
           )}
           {itemType === ItemTypes.COMPONENT && (

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

@@ -16,6 +16,7 @@ const DynamicTable = ({
   canCreate,
   canDelete,
   contentTypeName,
+  action,
   isBulkable,
   isLoading,
   onConfirmDelete,
@@ -77,6 +78,7 @@ const DynamicTable = ({
     <Table
       components={{ ConfirmDialogDelete, ConfirmDialogDeleteAll }}
       contentType={contentTypeName}
+      action={action}
       isLoading={isLoading}
       headers={tableHeaders}
       onConfirmDelete={onConfirmDelete}
@@ -98,10 +100,15 @@ const DynamicTable = ({
   );
 };
 
+DynamicTable.defaultProps = {
+  action: undefined,
+};
+
 DynamicTable.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
   contentTypeName: PropTypes.string.isRequired,
+  action: PropTypes.node,
   isBulkable: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   layout: PropTypes.exact({

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

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
 import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
@@ -37,11 +37,33 @@ const DynamicZone = ({
 }) => {
   const toggleNotification = useNotification();
   const [isOpen, setIsOpen] = useState(false);
+  const [shouldOpenAddedComponent, setShouldOpenAddedComponent] = useState(false);
   const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
+
   const [componentCollapses, setComponentsCollapses] = useState(
     createCollapses(dynamicDisplayedComponentsLength)
   );
 
+  useEffect(() => {
+    setComponentsCollapses(createCollapses(dynamicDisplayedComponentsLength));
+  }, [dynamicDisplayedComponentsLength]);
+
+  useEffect(() => {
+    if (shouldOpenAddedComponent) {
+      setComponentsCollapses(prev =>
+        prev.map((collapse, index) => {
+          if (index === prev.length - 1) {
+            return { ...collapse, isOpen: true };
+          }
+
+          return collapse;
+        })
+      );
+
+      setShouldOpenAddedComponent(false);
+    }
+  }, [shouldOpenAddedComponent]);
+
   // We cannot use the default props here
   const { max = Infinity, min = -Infinity } = fieldSchema;
   const dynamicZoneErrors = useMemo(() => {
@@ -68,7 +90,7 @@ const DynamicZone = ({
       setIsOpen(false);
 
       addComponentToDynamicZone(name, componentUid, hasError);
-      setComponentsCollapses(prev => [...prev, { isOpen: true }]);
+      setShouldOpenAddedComponent(true);
     },
     [addComponentToDynamicZone, hasError, name]
   );
@@ -132,8 +154,6 @@ const DynamicZone = ({
 
   const handleRemoveComponent = (name, currentIndex) => {
     removeComponentFromDynamicZone(name, currentIndex);
-
-    setComponentsCollapses(prev => prev.filter((_, index) => index !== currentIndex));
   };
 
   if (!isFieldAllowed && isCreatingEntry) {
@@ -183,7 +203,7 @@ const DynamicZone = ({
               dynamicDisplayedComponentsLength > 0 &&
               index < dynamicDisplayedComponentsLength - 1;
             const showUpIcon = isFieldAllowed && dynamicDisplayedComponentsLength > 0 && index > 0;
-            const isOpen = componentCollapses[index].isOpen;
+            const isOpen = componentCollapses[index]?.isOpen || false;
 
             return (
               <Component

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

@@ -338,7 +338,10 @@ const createYupSchemaAttribute = (type, validations, options) => {
           break;
         }
         case 'regex':
-          schema = schema.matches(new RegExp(validationValue), errorsTrads.regex);
+          schema = schema.matches(new RegExp(validationValue), {
+            message: errorsTrads.regex,
+            excludeEmptyString: !validations.required,
+          });
           break;
         case 'lowercase':
           if (['text', 'textarea', 'email', 'string'].includes(type)) {

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.defaultMessage }, error.values)}
+            {formatMessage({ id: error.id, defaultMessage: error.id })}
           </Typography>
         </Box>
       )}
@@ -111,8 +111,6 @@ 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/SelectWrapper/index.js

@@ -29,9 +29,9 @@ import { connect, select } from './utils';
 import getSelectStyles from './utils/getSelectStyles';
 
 const initialPaginationState = {
-  _contains: '',
-  _limit: 20,
-  _start: 0,
+  contains: '',
+  limit: 20,
+  start: 0,
 };
 
 const buildParams = (query, paramsToKeep) => {
@@ -141,10 +141,10 @@ function SelectWrapper({
 
       setIsLoading(true);
 
-      const params = { _limit: state._limit, ...defaultParams };
+      const params = { limit: state.limit, ...defaultParams, start: state.start };
 
-      if (state._contains) {
-        params[containsKey] = state._contains;
+      if (state.contains) {
+        params[`filters[${containsKey}][$contains]`] = state.contains;
       }
 
       try {
@@ -183,10 +183,9 @@ function SelectWrapper({
       isFieldAllowed,
       isMorph,
       mainField.name,
-      setIsLoading,
-      setOptions,
-      state._contains,
-      state._limit,
+      state.contains,
+      state.limit,
+      state.start,
     ]
   );
 
@@ -204,11 +203,11 @@ function SelectWrapper({
   const handleInputChange = (inputValue, { action }) => {
     if (action === 'input-change') {
       setState(prevState => {
-        if (prevState._contains === inputValue) {
+        if (prevState.contains === inputValue) {
           return prevState;
         }
 
-        return { ...prevState, _contains: inputValue, _start: 0 };
+        return { ...prevState, contains: inputValue, start: 0 };
       });
     }
 
@@ -216,7 +215,10 @@ function SelectWrapper({
   };
 
   const handleMenuScrollToBottom = () => {
-    setState(prevState => ({ ...prevState, _limit: prevState._limit + 20 }));
+    setState(prevState => ({
+      ...prevState,
+      start: prevState.start + 20,
+    }));
   };
 
   const handleMenuClose = () => {
@@ -304,7 +306,6 @@ function SelectWrapper({
         move={moveRelation}
         name={name}
         options={filteredOptions}
-        // options={temp}
         onChange={handleChange}
         onInputChange={handleInputChange}
         onMenuClose={handleMenuClose}
@@ -320,73 +321,6 @@ function SelectWrapper({
       />
     </Stack>
   );
-
-  // return (
-  //   <Padded>
-  //     <BaselineAlignment />
-  //     <Flex justifyContent="space-between">
-  //       <Flex>
-  //         <Text fontWeight="semiBold">
-  //           <span>
-  //             {label}
-  //             {!isSingle && ` (${associationsLength})`}
-  //           </span>
-  //         </Text>
-  //         {labelIconformatted && (
-  //           <div style={{ lineHeight: '13px' }}>
-  //             <LabelIconWrapper title={labelIconformatted.title}>
-  //               {labelIconformatted.icon}
-  //             </LabelIconWrapper>
-  //           </div>
-  //         )}
-  //       </Flex>
-  //       {isSingle && link}
-  //     </Flex>
-  //     {!isEmpty(description) && (
-  //       <Padded top size="xs">
-  //         <BaselineAlignment />
-  //         <Text fontSize="sm" color="grey" lineHeight="12px" ellipsis>
-  //           {description}
-  //         </Text>
-  //       </Padded>
-  //     )}
-  //     <Padded top size="sm">
-  //       <BaselineAlignment />
-
-  // <Component
-  //   addRelation={handleAddRelation}
-  //   components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, Option }}
-  //   displayNavigationLink={shouldDisplayRelationLink}
-  //   id={name}
-  //   isDisabled={isDisabled}
-  //   isLoading={isLoading}
-  //   isClearable
-  //   mainField={mainField}
-  //   move={moveRelation}
-  //   name={name}
-  //   options={filteredOptions}
-  //   onChange={handleChange}
-  //   onInputChange={handleInputChange}
-  //   onMenuClose={handleMenuClose}
-  //   onMenuOpen={handleMenuOpen}
-  //   onMenuScrollToBottom={handleMenuScrollToBottom}
-  //   onRemove={onRemoveRelation}
-  //   placeholder={
-  //     isEmpty(placeholder) ? (
-  //       <FormattedMessage id={getTrad('containers.Edit.addAnItem')} />
-  //     ) : (
-  //       placeholder
-  //     )
-  //   }
-  //   searchToPersist={searchToPersist}
-  //   styles={styles}
-  //   targetModel={targetModel}
-  //   value={value}
-  // />
-  //     </Padded>
-  //     <div style={{ marginBottom: 28 }} />
-  //   </Padded>
-  // );
 }
 
 SelectWrapper.defaultProps = {

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -185,7 +185,7 @@ const generateRelationQueryInfos = (contentTypeConfiguration, fieldName, models)
 
   const queryInfos = {
     endPoint,
-    containsKey: `${mainField}_contains`,
+    containsKey: `${mainField}`,
     defaultParams: {},
     shouldDisplayRelationLink,
   };
@@ -210,7 +210,7 @@ const generateRelationQueryInfosForComponents = (
 
   const queryInfos = {
     endPoint,
-    containsKey: `${mainField}_contains`,
+    containsKey: `${mainField}`,
     defaultParams: {
       _component: contentTypeConfiguration.uid,
     },

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -48,9 +48,7 @@ const LeftMenu = () => {
       id: 'collectionTypes',
       title: {
         id: getTrad('components.LeftMenu.collection-types'),
-        defaultMessage:
-          '{number, plural, =0 {Collection Types} one {Collection Type } other {Collection Types}}',
-        values: { number: intlCollectionTypeLinks.length },
+        defaultMessage: 'Collection Types',
       },
       searchable: true,
       links: sortBy(matchByTitle(intlCollectionTypeLinks, search), object =>
@@ -61,9 +59,7 @@ const LeftMenu = () => {
       id: 'singleTypes',
       title: {
         id: getTrad('components.LeftMenu.single-types'),
-        defaultMessage:
-          '{number, plural, =0 {Single Types} one {Single Type } other {Single Types}}',
-        values: { number: intlSingleTypeLinks.length },
+        defaultMessage: 'Single Types',
       },
       searchable: true,
       links: sortBy(matchByTitle(intlSingleTypeLinks, search), object =>

package/admin/src/content-manager/pages/App/index.js

@@ -23,7 +23,9 @@ const cmPermissions = permissions.contentManager;
 const App = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
   const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } = useModels();
-  const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], 'title');
+  const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], model =>
+    model.title.toLowerCase()
+  );
   const { pathname } = useLocation();
   const { formatMessage } = useIntl();
 

package/admin/src/content-manager/pages/EditSettingsView/index.js

@@ -243,7 +243,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
               >
                 {formatMessage({
                   id: 'app.components.go-back',
-                  defaultMessage: 'Go back',
+                  defaultMessage: 'Back',
                 })}
               </Link>
             }

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

@@ -13,19 +13,25 @@ import { getFullName } from '../../../../utils';
 const Informations = () => {
   const { formatMessage, formatRelativeTime } = useIntl();
   const { initialData, isCreatingEntry } = useCMEditViewDataManager();
-
-  const updatedAt = 'updatedAt';
-  const updatedByFirstname = initialData.updatedBy?.firstname || '';
-  const updatedByLastname = initialData.updatedBy?.lastname || '';
-  const updatedByUsername = initialData.updatedBy?.username;
-  const updatedBy = updatedByUsername || getFullName(updatedByFirstname, updatedByLastname);
   const currentTime = useRef(Date.now());
-  const timestamp = initialData[updatedAt]
-    ? new Date(initialData[updatedAt]).getTime()
-    : Date.now();
-  const elapsed = timestamp - currentTime.current;
 
-  const { unit, value } = getUnits(-elapsed);
+  const getFieldInfo = (atField, byField) => {
+    const userFirstname = initialData[byField]?.firstname || '';
+    const userLastname = initialData[byField]?.lastname || '';
+    const userUsername = initialData[byField]?.username;
+    const user = userUsername || getFullName(userFirstname, userLastname);
+    const timestamp = initialData[atField] ? new Date(initialData[atField]).getTime() : Date.now();
+    const elapsed = timestamp - currentTime.current;
+    const { unit, value } = getUnits(-elapsed);
+
+    return {
+      at: formatRelativeTime(value, unit, { numeric: 'auto' }),
+      by: isCreatingEntry ? '-' : user,
+    };
+  };
+
+  const updated = getFieldInfo('updatedAt', 'updatedBy');
+  const created = getFieldInfo('createdAt', 'createdBy');
 
   return (
     <Box>
@@ -39,6 +45,24 @@ const Informations = () => {
         <Divider />
       </Box>
       <Stack size={4}>
+        <Flex justifyContent="space-between">
+          <Typography fontWeight="bold">
+            {formatMessage({
+              id: getTrad('containers.Edit.information.created'),
+              defaultMessage: 'Created',
+            })}
+          </Typography>
+          <Typography>{created.at}</Typography>
+        </Flex>
+        <Flex justifyContent="space-between">
+          <Typography fontWeight="bold">
+            {formatMessage({
+              id: getTrad('containers.Edit.information.by'),
+              defaultMessage: 'By',
+            })}
+          </Typography>
+          <Typography>{created.by}</Typography>
+        </Flex>
         <Flex justifyContent="space-between">
           <Typography fontWeight="bold">
             {formatMessage({
@@ -46,7 +70,7 @@ const Informations = () => {
               defaultMessage: 'Last update',
             })}
           </Typography>
-          <Typography>{formatRelativeTime(value, unit, { numeric: 'auto' })}</Typography>
+          <Typography>{updated.at}</Typography>
         </Flex>
         <Flex justifyContent="space-between">
           <Typography fontWeight="bold">
@@ -55,7 +79,7 @@ const Informations = () => {
               defaultMessage: 'By',
             })}
           </Typography>
-          <Typography>{isCreatingEntry ? '-' : updatedBy}</Typography>
+          <Typography>{updated.by}</Typography>
         </Flex>
       </Stack>
     </Box>

package/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js

@@ -31,36 +31,40 @@ const DragButton = styled(ActionBox)`
 const FieldContainer = styled(Flex)`
   display: inline-flex;
   max-height: ${32 / 16}rem;
-  background-color: ${({ theme }) => theme.colors.primary100};
-  border-color: ${({ theme }) => theme.colors.primary200};
+  opacity: ${({ transparent }) => (transparent ? 0 : 1)};
+  background-color: ${({ theme, isSibling }) =>
+    isSibling ? theme.colors.neutral100 : theme.colors.primary100};
+  border: 1px solid
+    ${({ theme, isSibling }) => (isSibling ? theme.colors.neutral150 : theme.colors.primary200)};
 
   svg {
     width: ${10 / 16}rem;
     height: ${10 / 16}rem;
 
     path {
-      fill: ${({ theme }) => theme.colors.primary600};
+      fill: ${({ theme, isSibling }) => (isSibling ? undefined : theme.colors.primary600)};
     }
   }
 
   ${Typography} {
-    color: ${({ theme }) => theme.colors.primary600};
+    color: ${({ theme, isSibling }) => (isSibling ? undefined : theme.colors.primary600)};
   }
 
   ${DragButton} {
-    border-right: 1px solid ${({ theme }) => theme.colors.primary200};
+    border-right: 1px solid
+      ${({ theme, isSibling }) => (isSibling ? theme.colors.neutral150 : theme.colors.primary200)};
   }
 `;
 
-const CardPreview = ({ labelField }) => {
+const CardPreview = ({ labelField, transparent, isSibling }) => {
   const cardEllipsisTitle = ellipsisCardTitle(labelField);
 
   return (
     <FieldContainer
-      borderColor="neutral150"
-      background="neutral100"
       hasRadius
       justifyContent="space-between"
+      transparent={transparent}
+      isSibling={isSibling}
     >
       <Stack horizontal size={3}>
         <DragButton alignItems="center">
@@ -80,8 +84,15 @@ const CardPreview = ({ labelField }) => {
   );
 };
 
+CardPreview.defaultProps = {
+  isSibling: false,
+  transparent: false,
+};
+
 CardPreview.propTypes = {
+  isSibling: PropTypes.bool,
   labelField: PropTypes.string.isRequired,
+  transparent: PropTypes.bool,
 };
 
 export default CardPreview;