@strapi/admin 4.0.0 → 4.0.4

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/components/Wysiwyg/Editor.js

@@ -25,9 +25,8 @@ const Editor = ({
       lineWrapping: true,
       extraKeys: {
         Enter: 'newlineAndIndentContinueMarkdownList',
-        // Leaving this commented for now
-        // Tab: false,
-        // 'Shift-Tab': false,
+        Tab: false,
+        'Shift-Tab': false,
       },
       readOnly: false,
       smartIndent: false,

package/admin/src/content-manager/components/Wysiwyg/EditorLayout.js

@@ -68,6 +68,7 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
             bottom={0}
             zIndex={4}
             justifyContent="center"
+            onClick={onCollapse}
           >
             <Box
               id="wysiwyg-expand"
@@ -77,6 +78,7 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
               overflow="hidden"
               width="70%"
               height="70%"
+              onClick={e => e.stopPropagation()}
             >
               <Flex height="100%" alignItems="flex-start">
                 <BoxWithBorder flex="1" height="100%">

package/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js

@@ -7,13 +7,13 @@ import { Typography } from '@strapi/design-system/Typography';
 import Expand from '@strapi/icons/Expand';
 import { ExpandButton } from './WysiwygStyles';
 
-const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
+const WysiwygFooter = ({ onToggleExpand }) => {
   const { formatMessage } = useIntl();
 
   return (
     <Box padding={2} background="neutral100" hasRadius>
       <Flex justifyContent="flex-end" alignItems="flex-end">
-        <ExpandButton id="expand" disabled={isPreviewMode} onClick={onToggleExpand}>
+        <ExpandButton id="expand" onClick={onToggleExpand}>
           <Typography>
             {formatMessage({
               id: 'components.WysiwygBottomControls.fullscreen',
@@ -29,12 +29,10 @@ const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
 
 WysiwygFooter.defaultProps = {
   onToggleExpand: () => {},
-  isPreviewMode: false,
 };
 
 WysiwygFooter.propTypes = {
   onToggleExpand: PropTypes.func,
-  isPreviewMode: PropTypes.bool,
 };
 
 export default WysiwygFooter;

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { IconButtonGroup } from '@strapi/design-system/IconButton';
@@ -41,7 +42,9 @@ const WysiwygNav = ({
   });
   const buttonMoreRef = useRef();
 
-  const handleTogglePopover = () => setVisiblePopover(prev => !prev);
+  const handleTogglePopover = () => {
+    setVisiblePopover(prev => !prev);
+  };
 
   if (isPreviewMode) {
     return (
@@ -81,10 +84,10 @@ const WysiwygNav = ({
               />
             </MainButtons>
 
-            <MoreButton disabled ref={buttonMoreRef} id="more" label="More" icon={<More />} />
+            <MoreButton disabled id="more" label="More" icon={<More />} />
           </Flex>
 
-          <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
+          <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
             {formatMessage({
               id: 'components.Wysiwyg.ToggleMode.markdown-mode',
               defaultMessage: 'Markdown mode',
@@ -146,65 +149,67 @@ const WysiwygNav = ({
           />
           {visiblePopover && (
             <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-              <Flex>
-                <IconButtonGroupMargin>
-                  <CustomIconButton
-                    onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
-                    id="Strikethrough"
-                    label="Strikethrough"
-                    name="Strikethrough"
-                    icon={<Strikethrough />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
-                    id="BulletList"
-                    label="BulletList"
-                    name="BulletList"
-                    icon={<BulletList />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
-                    id="NumberList"
-                    label="NumberList"
-                    name="NumberList"
-                    icon={<NumberList />}
-                  />
-                </IconButtonGroupMargin>
-                <IconButtonGroup>
-                  <CustomIconButton
-                    onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
-                    id="Code"
-                    label="Code"
-                    name="Code"
-                    icon={<Code />}
-                  />
-                  <CustomIconButton
-                    onClick={() => {
-                      handleTogglePopover();
-                      onToggleMediaLib();
-                    }}
-                    id="Image"
-                    label="Image"
-                    name="Image"
-                    icon={<Image />}
-                  />
-                  <CustomLinkIconButton
-                    onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
-                    id="Link"
-                    label="Link"
-                    name="Link"
-                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                    icon={<Link />}
-                  />
-                  <CustomIconButton
-                    onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
-                    id="Quote"
-                    label="Quote"
-                    name="Quote"
-                    icon={<Quote />}
-                  />
-                </IconButtonGroup>
-              </Flex>
+              <FocusTrap onEscape={handleTogglePopover}>
+                <Flex>
+                  <IconButtonGroupMargin>
+                    <CustomIconButton
+                      onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
+                      id="Strikethrough"
+                      label="Strikethrough"
+                      name="Strikethrough"
+                      icon={<Strikethrough />}
+                    />
+                    <CustomIconButton
+                      onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
+                      id="BulletList"
+                      label="BulletList"
+                      name="BulletList"
+                      icon={<BulletList />}
+                    />
+                    <CustomIconButton
+                      onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
+                      id="NumberList"
+                      label="NumberList"
+                      name="NumberList"
+                      icon={<NumberList />}
+                    />
+                  </IconButtonGroupMargin>
+                  <IconButtonGroup>
+                    <CustomIconButton
+                      onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
+                      id="Code"
+                      label="Code"
+                      name="Code"
+                      icon={<Code />}
+                    />
+                    <CustomIconButton
+                      onClick={() => {
+                        handleTogglePopover();
+                        onToggleMediaLib();
+                      }}
+                      id="Image"
+                      label="Image"
+                      name="Image"
+                      icon={<Image />}
+                    />
+                    <CustomLinkIconButton
+                      onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
+                      id="Link"
+                      label="Link"
+                      name="Link"
+                      // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                      icon={<Link />}
+                    />
+                    <CustomIconButton
+                      onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
+                      id="Quote"
+                      label="Quote"
+                      name="Quote"
+                      icon={<Quote />}
+                    />
+                  </IconButtonGroup>
+                </Flex>
+              </FocusTrap>
             </Popover>
           )}
         </Flex>

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

@@ -26,6 +26,10 @@ const LabelAction = styled(Box)`
   }
 `;
 
+const TypographyAsterisk = styled(Typography)`
+  line-height: 0;
+`;
+
 const Wysiwyg = ({
   description,
   disabled,
@@ -36,6 +40,7 @@ const Wysiwyg = ({
   onChange,
   placeholder,
   value,
+  required,
 }) => {
   const { formatMessage } = useIntl();
   const textareaRef = useRef(null);
@@ -49,7 +54,10 @@ const Wysiwyg = ({
 
   const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
   const handleTogglePreviewMode = () => setIsPreviewMode(prev => !prev);
-  const handleToggleExpand = () => setIsExpandMode(prev => !prev);
+  const handleToggleExpand = () => {
+    setIsPreviewMode(false);
+    setIsExpandMode(prev => !prev);
+  };
 
   const handleActionClick = (value, currentEditorRef, togglePopover) => {
     switch (value) {
@@ -124,6 +132,7 @@ const Wysiwyg = ({
         <Stack horizontal size={1}>
           <Typography variant="pi" fontWeight="bold" textColor="neutral800">
             {label}
+            {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
           </Typography>
           {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
         </Stack>
@@ -154,9 +163,7 @@ const Wysiwyg = ({
             value={value}
           />
 
-          {!isExpandMode && (
-            <WysiwygFooter isPreviewMode={isPreviewMode} onToggleExpand={handleToggleExpand} />
-          )}
+          {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
         </EditorLayout>
         <Hint description={description} name={name} error={error} />
       </Stack>
@@ -182,6 +189,7 @@ Wysiwyg.defaultProps = {
   error: '',
   labelAction: undefined,
   placeholder: null,
+  required: false,
   value: '',
 };
 
@@ -206,6 +214,7 @@ Wysiwyg.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
+  required: PropTypes.bool,
   value: PropTypes.string,
 };
 

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 =>
@@ -112,8 +108,10 @@ const LeftMenu = () => {
               badgeLabel={section.links.length.toString()}
             >
               {section.links.map(link => {
+                const search = link.search ? `?${link.search}` : '';
+
                 return (
-                  <SubNavLink key={link.uid} to={`${link.to}?${link.search}`}>
+                  <SubNavLink key={link.uid} to={`${link.to}${search}`}>
                     {link.title}
                   </SubNavLink>
                 );

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();
 
@@ -41,14 +43,20 @@ const App = () => {
     );
   }
 
+  // Array of models that are displayed in the content manager
+  const supportedModelsToDisplay = models.filter(({ isDisplayed }) => isDisplayed);
+
   // Redirect the user to the 403 page
-  // FIXME when changing the routing
-  if (authorisedModels.length === 0 && models.length > 0 && pathname !== '/content-manager/403') {
+  if (
+    authorisedModels.length === 0 &&
+    supportedModelsToDisplay.length > 0 &&
+    pathname !== '/content-manager/403'
+  ) {
     return <Redirect to="/content-manager/403" />;
   }
 
   // Redirect the user to the create content type page
-  if (models.length === 0 && pathname !== '/content-manager/no-content-types') {
+  if (supportedModelsToDisplay.length === 0 && pathname !== '/content-manager/no-content-types') {
     return <Redirect to="/content-manager/no-content-types" />;
   }
 

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

@@ -341,7 +341,7 @@ const DisplayedFieldButton = ({
           isHidden={isHidden}
         >
           <DragButton
-            as="button"
+            as="span"
             type="button"
             ref={refs.dragRef}
             onClick={e => e.stopPropagation()}

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

@@ -24,7 +24,7 @@ const FieldButtonContent = ({ attribute, onEditField, onDeleteField, children })
 
   return (
     <Box overflow="hidden" width="100%">
-      <Flex paddingLeft={3} alignItems="baseline" justifyContent="space-between">
+      <Flex paddingLeft={3} alignItems="center" justifyContent="space-between">
         <Typography fontWeight="semiBold" textColor="neutral800" ellipsis>
           {children}
         </Typography>

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

@@ -91,7 +91,7 @@ const RelationalFieldButton = ({
       isDragging={isDragging}
     >
       <DragButton
-        as="button"
+        as="span"
         type="button"
         ref={dragButtonRef}
         onClick={e => e.stopPropagation()}

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>