@strapi/admin 4.0.3 → 4.0.7

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

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/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/InputJSON/FieldWrapper.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Field } from '@strapi/design-system/Field';
+
+const FieldWrapper = ({ name, hint, error, children }) => {
+  const { formatMessage } = useIntl();
+  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
+
+  return (
+    <Field name={name} hint={hint && formatMessage(hint)} error={errorMessage} id={name}>
+      {children}
+    </Field>
+  );
+};
+
+FieldWrapper.defaultProps = {
+  hint: undefined,
+  error: '',
+};
+
+FieldWrapper.propTypes = {
+  name: PropTypes.string.isRequired,
+  hint: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  error: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+export default FieldWrapper;

package/admin/src/content-manager/components/InputJSON/Label.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
+import { FieldLabel } from '@strapi/design-system/Field';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 
@@ -12,7 +12,7 @@ const LabelAction = styled(Box)`
   }
 `;
 
-const Label = ({ id, intlLabel, labelAction, name }) => {
+const Label = ({ intlLabel, labelAction, name, required }) => {
   const { formatMessage } = useIntl();
   const label = intlLabel?.id
     ? formatMessage(
@@ -23,15 +23,7 @@ const Label = ({ id, intlLabel, labelAction, name }) => {
 
   return (
     <Flex>
-      <Typography
-        textColor="neutral800"
-        htmlFor={id || name}
-        variant="pi"
-        fontWeight="bold"
-        as="label"
-      >
-        {label}
-      </Typography>
+      <FieldLabel required={required}>{label}</FieldLabel>
       {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
     </Flex>
   );
@@ -41,6 +33,7 @@ Label.defaultProps = {
   id: undefined,
   intlLabel: undefined,
   labelAction: undefined,
+  required: false,
 };
 
 Label.propTypes = {
@@ -52,6 +45,7 @@ Label.propTypes = {
   }),
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
 };
 
 export default Label;

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

@@ -9,11 +9,11 @@ import PropTypes from 'prop-types';
 import cm from 'codemirror';
 import trimStart from 'lodash/trimStart';
 import { Stack } from '@strapi/design-system/Stack';
+import { FieldHint, FieldError } from '@strapi/design-system/Field';
 import jsonlint from './jsonlint';
 import { EditorWrapper, StyledBox } from './components';
-import Hint from '../Hint';
 import Label from './Label';
-import FieldError from './FieldError';
+import FieldWrapper from './FieldWrapper';
 
 const WAIT = 600;
 const stringify = JSON.stringify;
@@ -159,30 +159,28 @@ class InputJSON extends React.Component {
     }
 
     return (
-      <Stack size={1}>
-        <Label
-          intlLabel={this.props.intlLabel}
-          labelAction={this.props.labelAction}
-          name={this.props.name}
-        />
-        <StyledBox error={this.props.error}>
-          <EditorWrapper disabled={this.props.disabled}>
-            <textarea
-              ref={this.editor}
-              autoComplete="off"
-              id={this.props.id || this.props.name}
-              defaultValue=""
-            />
-          </EditorWrapper>
-        </StyledBox>
-        <Hint
-          description={this.props.description}
-          name={this.props.name}
-          id={this.props.id}
-          error={this.props.error}
-        />
-        <FieldError id={this.props.id} name={this.props.name} error={this.props.error} />
-      </Stack>
+      <FieldWrapper name={this.props.name} hint={this.props.description} error={this.props.error}>
+        <Stack size={1}>
+          <Label
+            intlLabel={this.props.intlLabel}
+            labelAction={this.props.labelAction}
+            name={this.props.name}
+            required={this.props.required}
+          />
+          <StyledBox error={this.props.error}>
+            <EditorWrapper disabled={this.props.disabled}>
+              <textarea
+                ref={this.editor}
+                autoComplete="off"
+                id={this.props.id || this.props.name}
+                defaultValue=""
+              />
+            </EditorWrapper>
+          </StyledBox>
+          <FieldHint />
+          <FieldError />
+        </Stack>
+      </FieldWrapper>
     );
   }
 }
@@ -196,6 +194,7 @@ InputJSON.defaultProps = {
   labelAction: undefined,
   onChange: () => {},
   value: null,
+  required: false,
 };
 
 InputJSON.propTypes = {
@@ -216,6 +215,7 @@ InputJSON.propTypes = {
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   value: PropTypes.any,
+  required: PropTypes.bool,
 };
 
 export default InputJSON;

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;

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/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;

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';
@@ -27,7 +28,9 @@ import {
 } from './WysiwygStyles';
 
 const WysiwygNav = ({
+  disabled,
   editorRef,
+  isExpandMode,
   isPreviewMode,
   onActionClick,
   onToggleMediaLib,
@@ -41,9 +44,11 @@ const WysiwygNav = ({
   });
   const buttonMoreRef = useRef();
 
-  const handleTogglePopover = () => setVisiblePopover(prev => !prev);
+  const handleTogglePopover = () => {
+    setVisiblePopover(prev => !prev);
+  };
 
-  if (isPreviewMode) {
+  if (disabled || isPreviewMode) {
     return (
       <Box padding={2} background="neutral100">
         <Flex justifyContent="space-between">
@@ -81,15 +86,17 @@ 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">
-            {formatMessage({
-              id: 'components.Wysiwyg.ToggleMode.markdown-mode',
-              defaultMessage: 'Markdown mode',
-            })}
-          </Button>
+          {!isExpandMode && (
+            <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
+              {formatMessage({
+                id: 'components.Wysiwyg.ToggleMode.markdown-mode',
+                defaultMessage: 'Markdown mode',
+              })}
+            </Button>
+          )}
         </Flex>
       </Box>
     );
@@ -146,65 +153,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} restoreFocus={false}>
+                <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>
@@ -230,7 +239,9 @@ WysiwygNav.defaultProps = {
 };
 
 WysiwygNav.propTypes = {
+  disabled: PropTypes.bool.isRequired,
   editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+  isExpandMode: PropTypes.bool.isRequired,
   isPreviewMode: PropTypes.bool,
   onActionClick: PropTypes.func,
   onToggleMediaLib: PropTypes.func,

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

@@ -45,6 +45,7 @@ export const IconButtonGroupMargin = styled(IconButtonGroup)`
 
 export const EditorAndPreviewWrapper = styled.div`
   position: relative;
+  height: calc(100% - 48px);
 `;
 
 // FOOTER