@strapi/admin 4.0.2 → 4.0.6

package/admin/src/components/LeftMenu/index.js

@@ -80,12 +80,20 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
     }
   };
 
+  const menuTitle = formatMessage({
+    id: 'app.components.LeftMenu.navbrand.title',
+    defaultMessage: 'Strapi Dashboard',
+  });
+
   return (
     <MainNav condensed={condensed}>
       <NavBrand
-        workplace="Workplace"
-        title="Strapi Dashboard"
-        icon={<img src={menuLogo} alt="Strapi Dashboard" />}
+        workplace={formatMessage({
+          id: 'app.components.LeftMenu.navbrand.workplace',
+          defaultMessage: 'Workplace',
+        })}
+        title={menuTitle}
+        icon={<img src={menuLogo} alt={menuTitle} />}
       />
 
       <Divider />
@@ -149,7 +157,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         >
           <FocusTrap onEscape={handleToggleUserLinks}>
             <Stack size={0}>
-              <LinkUser onClick={handleToggleUserLinks} to="/me">
+              <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
                 <Typography>
                   {formatMessage({
                     id: 'app.components.LeftMenu.profile',
@@ -157,7 +165,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   })}
                 </Typography>
               </LinkUser>
-              <LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
+              <LinkUser tabIndex={0} onClick={handleLogout} logout="logout" to="/auth/login">
                 <Typography textColor="danger600">
                   {formatMessage({
                     id: 'app.components.LeftMenu.logout',

package/admin/src/components/UpgradePlanModal/index.js

@@ -70,9 +70,14 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
 
   return (
     <Portal>
-      <UpgradeWrapper>
+      <UpgradeWrapper onClick={onClose}>
         <FocusTrap onEscape={onClose}>
-          <UpgradeContainer aria-labelledby="upgrade-plan" background="neutral0" hasRadius>
+          <UpgradeContainer
+            onClick={e => e.stopPropagation()}
+            aria-labelledby="upgrade-plan"
+            background="neutral0"
+            hasRadius
+          >
             <img src={AirBalloon} alt="air-balloon" />
             <CloseButtonContainer>
               <IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
+import { getNumberOfDecimals } from './utils/getNumberOfDecimals';
 
 const CellValue = ({ type, value }) => {
   const { formatDate, formatTime, formatNumber } = useIntl();
@@ -27,8 +28,17 @@ const CellValue = ({ type, value }) => {
     });
   }
 
-  if (['float', 'integer', 'biginteger', 'decimal'].includes(type)) {
-    formattedValue = formatNumber(value);
+  if (['float', 'decimal'].includes(type)) {
+    const numberOfDecimals = getNumberOfDecimals(value);
+
+    formattedValue = formatNumber(value, {
+      minimumFractionDigits: numberOfDecimals,
+      maximumFractionDigits: numberOfDecimals,
+    });
+  }
+
+  if (['integer', 'biginteger'].includes(type)) {
+    formattedValue = formatNumber(value, { maximumFractionDigits: 0 });
   }
 
   return toString(formattedValue);

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

@@ -0,0 +1,8 @@
+export const getNumberOfDecimals = value => {
+  if (value % 1 !== 0) {
+    // value has decimals
+    return value.toString().split('.')[1].length;
+  }
+
+  return 0;
+};

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

@@ -17,7 +17,7 @@ const StyledBox = styled(Box)`
   border-radius: ${pxToRem(26)};
 `;
 
-const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) => {
+const DzLabel = ({ label, labelAction, name, numberOfComponents, required, intlDescription }) => {
   const { formatMessage } = useIntl();
   const intlLabel = formatMessage({ id: label || name, defaultMessage: label || name });
 
@@ -33,12 +33,24 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) =>
           shadow="filterShadow"
           color="neutral500"
         >
-          <Flex>
-            <Typography fontSize={0} lineHeight={0} textColor="neutral600" fontWeight="bold">
-              {intlLabel}&nbsp;({numberOfComponents})
-            </Typography>
-            {required && <Typography textColor="danger600">*</Typography>}
-            {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
+          <Flex direction="column" justifyContent="center">
+            <Flex maxWidth={pxToRem(356)}>
+              <Typography variant="pi" textColor="neutral600" fontWeight="bold" ellipsis>
+                {intlLabel}&nbsp;
+              </Typography>
+              <Typography variant="pi" textColor="neutral600" fontWeight="bold">
+                ({numberOfComponents})
+              </Typography>
+              {required && <Typography textColor="danger600">*</Typography>}
+              {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
+            </Flex>
+            {intlDescription && (
+              <Box paddingTop={1} maxWidth={pxToRem(356)}>
+                <Typography variant="pi" textColor="neutral600" ellipsis>
+                  {formatMessage(intlDescription)}
+                </Typography>
+              </Box>
+            )}
           </Flex>
         </StyledBox>
       </Box>
@@ -47,12 +59,17 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) =>
 };
 
 DzLabel.defaultProps = {
+  intlDescription: undefined,
   label: '',
   labelAction: undefined,
   required: false,
 };
 
 DzLabel.propTypes = {
+  intlDescription: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+  }),
   label: PropTypes.string,
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,

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

@@ -39,6 +39,9 @@ const DynamicZone = ({
   const [isOpen, setIsOpen] = useState(false);
   const [shouldOpenAddedComponent, setShouldOpenAddedComponent] = useState(false);
   const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
+  const intlDescription = metadatas.description
+    ? { id: metadatas.description, defaultMessage: metadatas.description }
+    : null;
 
   const [componentCollapses, setComponentsCollapses] = useState(
     createCollapses(dynamicDisplayedComponentsLength)
@@ -159,11 +162,7 @@ const DynamicZone = ({
   if (!isFieldAllowed && isCreatingEntry) {
     return (
       <NotAllowedInput
-        description={
-          metadatas.description
-            ? { id: metadatas.description, defaultMessage: metadatas.description }
-            : null
-        }
+        description={intlDescription}
         intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
         labelAction={labelAction}
         name={name}
@@ -174,11 +173,7 @@ const DynamicZone = ({
   if (!isFieldAllowed && !isFieldReadable && !isCreatingEntry) {
     return (
       <NotAllowedInput
-        description={
-          metadatas.description
-            ? { id: metadatas.description, defaultMessage: metadatas.description }
-            : null
-        }
+        description={intlDescription}
         intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
         labelAction={labelAction}
         name={name}
@@ -191,6 +186,7 @@ const DynamicZone = ({
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
           <DzLabel
+            intlDescription={intlDescription}
             label={metadatas.label}
             labelAction={labelAction}
             name={name}

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

@@ -32,6 +32,7 @@ const InputUID = ({
   onChange,
   value,
   placeholder,
+  required,
 }) => {
   const { modifiedData, initialData, layout } = useCMEditViewDataManager();
   const [isLoading, setIsLoading] = useState(false);
@@ -244,6 +245,7 @@ const InputUID = ({
       onChange={handleChange}
       placeholder={formattedPlaceholder}
       value={value || ''}
+      required={required}
     />
   );
 };
@@ -275,6 +277,7 @@ InputUID.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
+  required: PropTypes.bool,
 };
 
 InputUID.defaultProps = {
@@ -284,6 +287,7 @@ InputUID.defaultProps = {
   labelAction: undefined,
   placeholder: undefined,
   value: '',
+  required: false,
 };
 
 export default InputUID;

package/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js

@@ -23,6 +23,10 @@ const Wrapper = styled.div`
     margin-block-end: 10px;
   }
 
+  p {
+    margin-bottom: 10px;
+  }
+
   h1 {
     font-size: ${36 / 16}rem;
     font-weight: 600;
@@ -47,6 +51,10 @@ const Wrapper = styled.div`
     font-weight: 800;
   }
 
+  em {
+    font-style: italic;
+  }
+
   blockquote {
     margin-top: 41px;
     margin-bottom: 34px;

package/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js

@@ -20,7 +20,7 @@ loadCss();
 const md = new Markdown({
   html: true, // Enable HTML tags in source
   xhtmlOut: false,
-  breaks: false,
+  breaks: true,
   langPrefix: 'language-',
   linkify: true,
   typographer: true,

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js

@@ -20,10 +20,6 @@ export const CustomIconButton = styled(IconButton)`
   }
 `;
 
-export const DragHandleWrapper = styled(CustomIconButton)`
-  cursor: move;
-`;
-
 export const CustomIconButtonSibling = styled(IconButton)`
   background-color: transparent;
 

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

@@ -3,12 +3,14 @@ import React, { memo, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
+import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
+import { Tooltip } from '@strapi/design-system/Tooltip';
 import Trash from '@strapi/icons/Trash';
 import Drag from '@strapi/icons/Drag';
 import ItemTypes from '../../../utils/ItemTypes';
@@ -17,9 +19,23 @@ import Inputs from '../../Inputs';
 import FieldComponent from '../../FieldComponent';
 import Preview from './Preview';
 import DraggingSibling from './DraggingSibling';
-import { CustomIconButton, DragHandleWrapper } from './IconButtonCustoms';
+import { CustomIconButton } from './IconButtonCustoms';
 import { connect, select } from './utils';
 
+const DragButton = styled.span`
+  display: flex;
+  align-items: center;
+  height: ${({ theme }) => theme.spaces[7]};
+
+  padding: 0 ${({ theme }) => theme.spaces[3]};
+  cursor: all-scroll;
+
+  svg {
+    width: ${12 / 16}rem;
+    height: ${12 / 16}rem;
+  }
+`;
+
 /* eslint-disable react/no-array-index-key */
 
 // Issues:
@@ -40,7 +56,7 @@ const DraggedItem = ({
   // Retrieved from the select function
   moveComponentField,
   removeRepeatableField,
-  setIsDraggingSiblig,
+  setIsDraggingSibling,
   triggerFormValidation,
   // checkFormErrors,
   displayedValue,
@@ -125,7 +141,7 @@ const DraggedItem = ({
     end: () => {
       // Update the errors
       triggerFormValidation();
-      setIsDraggingSiblig(false);
+      setIsDraggingSibling(false);
     },
     collect: monitor => ({
       isDragging: monitor.isDragging(),
@@ -138,9 +154,9 @@ const DraggedItem = ({
 
   useEffect(() => {
     if (isDragging) {
-      setIsDraggingSiblig(true);
+      setIsDraggingSibling(true);
     }
-  }, [isDragging, setIsDraggingSiblig]);
+  }, [isDragging, setIsDraggingSibling]);
 
   // Effect in order to force a rerender after reordering the components
   // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged
@@ -195,16 +211,22 @@ const DraggedItem = ({
                     })}
                     icon={<Trash />}
                   />
-                  <DragHandleWrapper
-                    expanded={isOpen}
-                    icon={<Drag />}
-                    label={formatMessage({
+                  {/* react-dnd is broken in firefox with our IconButton, maybe a ref issue */}
+                  <Tooltip
+                    description={formatMessage({
                       id: getTrad('components.DragHandle-label'),
                       defaultMessage: 'Drag',
                     })}
-                    noBorder
-                    ref={refs.dragRef}
-                  />
+                  >
+                    <DragButton
+                      role="button"
+                      tabIndex={-1}
+                      ref={refs.dragRef}
+                      onClick={e => e.stopPropagation()}
+                    >
+                      <Drag />
+                    </DragButton>
+                  </Tooltip>
                 </Stack>
               )
             }
@@ -268,7 +290,7 @@ const DraggedItem = ({
 DraggedItem.defaultProps = {
   isDraggingSibling: false,
   isOpen: false,
-  setIsDraggingSiblig: () => {},
+  setIsDraggingSibling: () => {},
   toggleCollapses: () => {},
 };
 
@@ -284,7 +306,7 @@ DraggedItem.propTypes = {
   toggleCollapses: PropTypes.func,
   moveComponentField: PropTypes.func.isRequired,
   removeRepeatableField: PropTypes.func.isRequired,
-  setIsDraggingSiblig: PropTypes.func,
+  setIsDraggingSibling: PropTypes.func,
   triggerFormValidation: PropTypes.func.isRequired,
   // checkFormErrors: PropTypes.func.isRequired,
   displayedValue: PropTypes.string.isRequired,

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

@@ -47,7 +47,7 @@ const RepeatableComponent = ({
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const [collapseToOpen, setCollapseToOpen] = useState('');
-  const [isDraggingSibling, setIsDraggingSiblig] = useState(false);
+  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
   const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
   const { getComponentLayout } = useContentTypeLayout();
   const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
@@ -173,7 +173,7 @@ const RepeatableComponent = ({
               }}
               parentName={name}
               schema={componentLayoutData}
-              setIsDraggingSiblig={setIsDraggingSiblig}
+              setIsDraggingSibling={setIsDraggingSibling}
               toggleCollapses={toggleCollapses}
             />
           );

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

@@ -12,6 +12,7 @@ const Editor = ({
   editorRef,
   error,
   isPreviewMode,
+  isExpandMode,
   name,
   onChange,
   placeholder,
@@ -25,9 +26,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,
@@ -65,7 +65,7 @@ const Editor = ({
 
   return (
     <EditorAndPreviewWrapper>
-      <EditorStylesContainer disabled={disabled || isPreviewMode}>
+      <EditorStylesContainer isExpandMode={isExpandMode} disabled={disabled || isPreviewMode}>
         <textarea ref={textareaRef} />
       </EditorStylesContainer>
       {isPreviewMode && <PreviewWysiwyg data={value} />}
@@ -77,6 +77,7 @@ Editor.defaultProps = {
   disabled: false,
   error: undefined,
   isPreviewMode: false,
+  isExpandMode: false,
   placeholder: '',
   value: '',
 };
@@ -86,6 +87,7 @@ Editor.propTypes = {
   editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
   error: PropTypes.string,
   isPreviewMode: PropTypes.bool,
+  isExpandMode: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,

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

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 /* stylelint-disable */
 export const EditorStylesContainer = styled.div`
   cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
+  height: 100%;
   /* BASICS */
   .CodeMirror-placeholder {
     color: ${({ theme }) => theme.colors.neutral600} !important;
@@ -12,7 +13,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     /* Set height, width, borders, and global font properties here */
     font-size: ${14 / 16}rem;
-    height: 290px;
+    height: ${({ isExpandMode }) => (isExpandMode ? '100%' : '290px')};
     color: ${({ theme }) => theme.colors.neutral800};
     direction: ltr;
     font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,

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;