@strapi/admin 4.0.5 → 4.1.0

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;
@@ -80,7 +80,7 @@ class InputJSON extends React.Component {
     try {
       if (value === null) return this.codeMirror.setValue('');
 
-      const nextValue = typeof value !== 'string' ? stringify(value, null, 2) : value;
+      const nextValue = stringify(value, null, 2);
 
       return this.codeMirror.setValue(nextValue);
     } catch (err) {
@@ -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/RepeatableComponent/DraggedItem/index.js

@@ -121,6 +121,10 @@ const DraggedItem = ({
       if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
         return;
       }
+      // If They are not in the same level, should not move
+      if (dragPath.split('.').length !== hoverPath.split('.').length) {
+        return;
+      }
       // Time to actually perform the action in the data
       moveComponentField(pathToComponentArray, dragIndex, hoverIndex);
 

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

@@ -6,6 +6,7 @@ import {
   formatComponentData,
   useQueryParams,
   useNotification,
+  useGuidedTour,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -29,6 +30,7 @@ import buildQueryString from '../../pages/ListView/utils/buildQueryString';
 const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const { trackUsage } = useTracking();
   const { push } = useHistory();
+  const { setCurrentStep } = useGuidedTour();
   const trackUsageRef = useRef(trackUsage);
   const [isCreatingEntry, setIsCreatingEntry] = useState(true);
   const [{ query, rawQuery }] = useQueryParams();
@@ -203,6 +205,8 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
           message: { id: getTrad('success.record.save') },
         });
 
+        setCurrentStep('contentManager.success');
+
         dispatch(submitSucceeded(cleanReceivedData(data)));
         setIsCreatingEntry(false);
 
@@ -215,7 +219,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         dispatch(setStatus('resolved'));
       }
     },
-    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification]
+    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification, setCurrentStep]
   );
   const onPublish = useCallback(async () => {
     try {

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

@@ -12,6 +12,7 @@ const Editor = ({
   editorRef,
   error,
   isPreviewMode,
+  isExpandMode,
   name,
   onChange,
   placeholder,
@@ -64,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} />}
@@ -76,6 +77,7 @@ Editor.defaultProps = {
   disabled: false,
   error: undefined,
   isPreviewMode: false,
+  isExpandMode: false,
   placeholder: '',
   value: '',
 };
@@ -85,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/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/WysiwygNav.js

@@ -28,7 +28,9 @@ import {
 } from './WysiwygStyles';
 
 const WysiwygNav = ({
+  disabled,
   editorRef,
+  isExpandMode,
   isPreviewMode,
   onActionClick,
   onToggleMediaLib,
@@ -46,7 +48,7 @@ const WysiwygNav = ({
     setVisiblePopover(prev => !prev);
   };
 
-  if (isPreviewMode) {
+  if (disabled || isPreviewMode) {
     return (
       <Box padding={2} background="neutral100">
         <Flex justifyContent="space-between">
@@ -87,12 +89,14 @@ const WysiwygNav = ({
             <MoreButton disabled id="more" label="More" icon={<More />} />
           </Flex>
 
-          <Button onClick={onTogglePreviewMode} variant="tertiary" 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>
     );
@@ -149,7 +153,7 @@ const WysiwygNav = ({
           />
           {visiblePopover && (
             <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-              <FocusTrap onEscape={handleTogglePopover}>
+              <FocusTrap onEscape={handleTogglePopover} restoreFocus={false}>
                 <Flex>
                   <IconButtonGroupMargin>
                     <CustomIconButton
@@ -235,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

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

@@ -144,15 +144,18 @@ const Wysiwyg = ({
           onCollapse={handleToggleExpand}
         >
           <WysiwygNav
+            isExpandMode={isExpandMode}
             editorRef={editorRef}
             isPreviewMode={isPreviewMode}
             onActionClick={handleActionClick}
             onToggleMediaLib={handleToggleMediaLib}
             onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}
+            disabled={disabled}
           />
 
           <Editor
             disabled={disabled}
+            isExpandMode={isExpandMode}
             editorRef={editorRef}
             error={errorMessage}
             isPreviewMode={isPreviewMode}
@@ -185,7 +188,7 @@ const Wysiwyg = ({
 
 Wysiwyg.defaultProps = {
   description: null,
-  disabled: true,
+  disabled: false,
   error: '',
   labelAction: undefined,
   placeholder: null,

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

@@ -1,7 +1,12 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Helmet } from 'react-helmet';
 import { Switch, Route, useRouteMatch, Redirect, useLocation } from 'react-router-dom';
-import { CheckPagePermissions, LoadingIndicatorPage, NotFound } from '@strapi/helper-plugin';
+import {
+  CheckPagePermissions,
+  LoadingIndicatorPage,
+  NotFound,
+  useGuidedTour,
+} from '@strapi/helper-plugin';
 import { Layout, HeaderLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { useIntl } from 'react-intl';
@@ -28,6 +33,14 @@ const App = () => {
   );
   const { pathname } = useLocation();
   const { formatMessage } = useIntl();
+  const { startSection } = useGuidedTour();
+  const startSectionRef = useRef(startSection);
+
+  useEffect(() => {
+    if (startSectionRef.current) {
+      startSectionRef.current('contentManager');
+    }
+  }, []);
 
   if (status === 'loading') {
     return (

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

@@ -41,9 +41,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
         <Stack size={2}>
           {editLayout.map((row, index) => (
-            <React.Fragment key={row.rowId}>
-              <RowsLayout row={row} rowIndex={index} onRemoveField={onRemoveField} />
-            </React.Fragment>
+            <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
           ))}
           <SimpleMenu
             id="label"

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

@@ -26,7 +26,7 @@ const HeaderContainer = styled(Flex)`
   }
 `;
 
-const FormModal = ({ onToggle, onChange, onSubmit, type }) => {
+const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) => {
   const { selectedField } = useLayoutDnd();
   const { formatMessage } = useIntl();
 
@@ -61,7 +61,7 @@ const FormModal = ({ onToggle, onChange, onSubmit, type }) => {
         </ModalHeader>
         <ModalBody>
           <Grid gap={4}>
-            <ModalForm onChange={onChange} />
+            <ModalForm onMetaChange={onMetaChange} onSizeChange={onSizeChange} />
           </Grid>
         </ModalBody>
         <ModalFooter
@@ -84,7 +84,8 @@ const FormModal = ({ onToggle, onChange, onSubmit, type }) => {
 FormModal.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
+  onMetaChange: PropTypes.func.isRequired,
+  onSizeChange: PropTypes.func.isRequired,
   type: PropTypes.string.isRequired,
 };
 

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

@@ -1,6 +1,8 @@
 import React, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { GridItem } from '@strapi/design-system/Grid';
+import { Select, Option } from '@strapi/design-system/Select';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { useLayoutDnd } from '../../../hooks';
@@ -9,7 +11,11 @@ import { makeSelectModelAndComponentSchemas } from '../../App/selectors';
 import getTrad from '../../../utils/getTrad';
 import GenericInput from './GenericInput';
 
-const ModalForm = ({ onChange }) => {
+const FIELD_SIZES = [[4, '33%'], [6, '50%'], [8, '66%'], [12, '100%']];
+
+const NON_RESIZABLE_FIELD_TYPES = ['dynamiczone', 'component', 'json', 'richtext'];
+
+const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd();
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
@@ -44,22 +50,21 @@ const ModalForm = ({ onChange }) => {
     [selectedField, componentsAndModelsPossibleMainFields, modifiedData]
   );
 
-  return formToDisplay.map(meta => {
+  const metaFields = formToDisplay.map(meta => {
     const formType = get(attributes, [selectedField, 'type']);
 
-    if (formType === 'dynamiczone' && !['label', 'description'].includes(meta)) {
-      return null;
-    }
-
-    if ((formType === 'component' || formType === 'media') && meta !== 'label') {
+    if (
+      formType === 'dynamiczone' ||
+      (formType === 'component' && !['label', 'description'].includes(meta))
+    ) {
       return null;
     }
 
-    if ((formType === 'json' || formType === 'boolean') && meta === 'placeholder') {
+    if (formType === 'component' && meta !== 'label') {
       return null;
     }
 
-    if (formType === 'richtext' && meta === 'editable') {
+    if (['media', 'json', 'boolean'].includes(formType) && meta === 'placeholder') {
       return null;
     }
 
@@ -78,13 +83,49 @@ const ModalForm = ({ onChange }) => {
             id: get(getInputProps(meta), 'label.id', 'app.utils.defaultMessage'),
           })}
           name={meta}
-          onChange={onChange}
-          value={get(fieldForm, meta, '')}
+          onChange={onMetaChange}
+          value={get(fieldForm, ['metadata', meta], '')}
           options={getSelectedItemSelectOptions(formType)}
         />
       </GridItem>
     );
   });
+
+  const canResize = !NON_RESIZABLE_FIELD_TYPES.includes(attributes[selectedField].type);
+
+  const sizeField = (
+    <GridItem col={6} key="size">
+      <Select
+        value={fieldForm?.size}
+        name="size"
+        onChange={value => {
+          onSizeChange({ name: selectedField, value });
+        }}
+        label={formatMessage({
+          id: getTrad('containers.SettingPage.editSettings.size.label'),
+          defaultMessage: 'Size',
+        })}
+      >
+        {FIELD_SIZES.map(([value, label]) => (
+          <Option key={value} value={value}>
+            {label}
+          </Option>
+        ))}
+      </Select>
+    </GridItem>
+  );
+
+  return (
+    <>
+      {metaFields}
+      {canResize && sizeField}
+    </>
+  );
+};
+
+ModalForm.propTypes = {
+  onMetaChange: PropTypes.func.isRequired,
+  onSizeChange: PropTypes.func.isRequired,
 };
 
 export default ModalForm;

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

@@ -110,6 +110,14 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
     });
   };
 
+  const handleSizeChange = ({ name, value }) => {
+    dispatch({
+      type: 'ON_CHANGE_SIZE',
+      name,
+      value,
+    });
+  };
+
   const handleMetaSubmit = e => {
     e.preventDefault();
     dispatch({
@@ -365,7 +373,8 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
             onSubmit={handleMetaSubmit}
             onToggle={handleToggleModal}
             type={get(attributes, [metaToEdit, 'type'], '')}
-            onChange={handleMetaChange}
+            onMetaChange={handleMetaChange}
+            onSizeChange={handleSizeChange}
           />
         )}
       </Main>

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

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { arrayMoveItem } from '../../utils';
-import { formatLayout, getInputSize } from './utils/layout';
+import { formatLayout, getDefaultInputSize, getFieldSize, setFieldSize } from './utils/layout';
 
 const initialState = {
   fieldForm: {},
@@ -45,7 +45,7 @@ const reducer = (state = initialState, action) =>
       }
       case 'ON_ADD_FIELD': {
         const newState = cloneDeep(state);
-        const size = getInputSize(
+        const size = getDefaultInputSize(
           get(newState, ['modifiedData', 'attributes', action.name, 'type'], '')
         );
         const listSize = get(newState, layoutPathEdit, []).length;
@@ -76,7 +76,11 @@ const reducer = (state = initialState, action) =>
         break;
       }
       case 'ON_CHANGE_META': {
-        set(draftState, ['metaForm', ...action.keys], action.value);
+        set(draftState, ['metaForm', 'metadata', ...action.keys], action.value);
+        break;
+      }
+      case 'ON_CHANGE_SIZE': {
+        set(draftState, ['metaForm', 'size'], action.value);
         break;
       }
       case 'ON_RESET': {
@@ -168,11 +172,28 @@ const reducer = (state = initialState, action) =>
       }
       case 'SET_FIELD_TO_EDIT': {
         draftState.metaToEdit = action.name;
-        draftState.metaForm = get(state, ['modifiedData', 'metadatas', action.name, 'edit'], {});
+        draftState.metaForm = {
+          metadata: get(state, ['modifiedData', 'metadatas', action.name, 'edit'], {}),
+          size:
+            getFieldSize(action.name, state.modifiedData?.layouts?.edit) ?? getDefaultInputSize(),
+        };
+
         break;
       }
       case 'SUBMIT_META_FORM': {
-        set(draftState, ['modifiedData', 'metadatas', state.metaToEdit, 'edit'], state.metaForm);
+        set(
+          draftState,
+          ['modifiedData', 'metadatas', state.metaToEdit, 'edit'],
+          state.metaForm.metadata
+        );
+
+        const layoutsCopy = cloneDeep(get(state, layoutPathEdit, []));
+        const nextLayoutValue = setFieldSize(state.metaToEdit, state.metaForm.size, layoutsCopy);
+
+        if (nextLayoutValue.length > 0) {
+          set(draftState, layoutPathEdit, formatLayout(nextLayoutValue));
+        }
+
         break;
       }
       case 'SUBMIT_SUCCEEDED': {

package/admin/src/content-manager/pages/EditSettingsView/utils/layout.js

@@ -28,13 +28,7 @@ const formatLayout = arr => {
 
         return acc2;
       }, []);
-      const rowId =
-        acc.length === 0
-          ? 0
-          : Math.max.apply(
-              Math,
-              acc.map(o => o.rowId)
-            ) + 1;
+      const rowId = acc.length === 0 ? 0 : Math.max.apply(Math, acc.map(o => o.rowId)) + 1;
 
       const currentRowSize = getRowSize(currentRow);
 
@@ -75,7 +69,7 @@ const unformatLayout = arr => {
   }, []);
 };
 
-const getInputSize = type => {
+const getDefaultInputSize = type => {
   switch (type) {
     case 'boolean':
     case 'date':
@@ -95,4 +89,41 @@ const getInputSize = type => {
   }
 };
 
-export { createLayout, formatLayout, getInputSize, getRowSize, unformatLayout };
+const getFieldSize = (name, layouts = []) => {
+  return layouts.reduce((acc, { rowContent }) => {
+    const size = rowContent.find(row => row.name === name)?.size ?? null;
+
+    if (size) {
+      acc = size;
+    }
+
+    return acc;
+  }, null);
+};
+
+const setFieldSize = (name, size, layouts = []) => {
+  return layouts.map(row => {
+    row.rowContent = row.rowContent.map(column => {
+      if (column.name === name) {
+        return {
+          ...column,
+          size,
+        };
+      }
+
+      return column;
+    });
+
+    return row;
+  });
+};
+
+export {
+  createLayout,
+  formatLayout,
+  getDefaultInputSize,
+  getFieldSize,
+  setFieldSize,
+  getRowSize,
+  unformatLayout,
+};

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

@@ -309,6 +309,7 @@ const EditView = ({
                       )}
                       <Box as="aside" aria-labelledby="links">
                         <Stack size={2}>
+                          <InjectionZone area="contentManager.editView.right-links" slug={slug} />
                           {slug !== 'strapi::administrator' && (
                             <CheckPermissions permissions={ctbPermissions}>
                               <LinkButton
@@ -343,7 +344,7 @@ const EditView = ({
                               })}
                             </LinkButton>
                           </CheckPermissions>
-                          <InjectionZone area="contentManager.editView.right-links" slug={slug} />
+
                           {allowedActions.canDelete && (
                             <DeleteLink
                               isCreatingEntry={isCreatingEntry}