@plone/volto 18.32.1 → 18.32.3

package/src/components/manage/Blocks/Block/BlocksForm.test.jsx

@@ -161,19 +161,12 @@ test('Removes invalid blocks on saving', () => {
     </Provider>,
   );
 
+  expect(onChangeFormData).toHaveBeenCalledTimes(1);
   expect(onChangeFormData).toHaveBeenCalledWith({
     blocks: {
       a: { '@type': 'custom', text: 'a' },
       b: { '@type': 'custom', text: 'b' },
     },
-    blocks_layout: { items: ['a', 'b', 'MISSING-YOU-1'] },
-  });
-
-  expect(onChangeFormData).toHaveBeenCalledWith({
-    blocks: {
-      a: { '@type': 'custom', text: 'a' },
-      b: { '@type': 'custom', text: 'b' },
-    },
-    blocks_layout: { items: ['a', 'b', 'MISSING-YOU-2'] },
+    blocks_layout: { items: ['a', 'b'] },
   });
 });

package/src/components/manage/Blocks/Block/EditBlockWrapper.jsx

@@ -25,6 +25,14 @@ const messages = defineMessages({
     id: 'delete',
     defaultMessage: 'delete',
   },
+  delete_block: {
+    id: 'delete_block',
+    defaultMessage: 'delete {type} block',
+  },
+  drag_block: {
+    id: 'drag_block',
+    defaultMessage: 'drag {type} block',
+  },
 });
 
 const EditBlockWrapper = (props) => {
@@ -99,6 +107,7 @@ const EditBlockWrapper = (props) => {
           }}
           {...draginfo.dragHandleProps}
           className="drag handle wrapper"
+          aria-label={intl.formatMessage(messages.drag_block, { type })}
         >
           <Icon name={dragSVG} size="18px" />
         </div>
@@ -111,7 +120,7 @@ const EditBlockWrapper = (props) => {
               basic
               onClick={() => onDeleteBlock(block, true)}
               className="delete-button"
-              aria-label={intl.formatMessage(messages.delete)}
+              aria-label={intl.formatMessage(messages.delete_block, { type })}
             >
               <Icon name={trashSVG} size="18px" />
             </Button>

package/src/components/manage/Blocks/Block/Order/Item.jsx

@@ -25,6 +25,7 @@ export const Item = forwardRef(
       onRemove,
       onSelectBlock,
       parentId,
+      parentType,
       style,
       value,
       wrapperRef,
@@ -39,6 +40,10 @@ export const Item = forwardRef(
     const gridSelected = useSelector((state) => state.form.ui.gridSelected);
     const dispatch = useDispatch();
 
+    const icon =
+      config.blocks.blocksConfig[data?.['@type']]?.icon ||
+      config.blocks.blocksConfig.title?.icon;
+
     return (
       <li
         className={classNames(
@@ -102,15 +107,16 @@ export const Item = forwardRef(
               errored: errors && Object.keys(errors).length > 0,
             })}
           >
-            {config.blocks.blocksConfig[data?.['@type']]?.icon && (
+            {icon && (
               <Icon
-                name={config.blocks.blocksConfig[data?.['@type']]?.icon}
+                name={icon}
                 size="20px"
                 style={{ verticalAlign: 'middle' }}
               />
             )}{' '}
             {data?.plaintext ||
-              config.blocks.blocksConfig[data?.['@type']]?.title}
+              config.blocks.blocksConfig[data?.['@type']]?.title ||
+              data?.title}
           </span>
           {!clone && onRemove && (
             <button

package/src/components/manage/Blocks/Block/Order/Order.jsx

@@ -1,13 +1,23 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import { createPortal } from 'react-dom';
+import { toast } from 'react-toastify';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
 import find from 'lodash/find';
-import min from 'lodash/min';
+import { messages as defaultMessages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
 
 import { flattenTree, getProjection, removeChildrenOf } from './utilities';
 import SortableItem from './SortableItem';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
+const messages = defineMessages({
+  invalidBlockType: {
+    id: 'You can not move this type of block to the new location',
+    defaultMessage: 'You can not move this type of block to the new location',
+  },
+});
+
 export function Order({
   items = [],
   onMoveBlock,
@@ -24,6 +34,7 @@ export function Order({
   const [overId, setOverId] = useState(null);
   const [offsetLeft, setOffsetLeft] = useState(0);
   const [currentPosition, setCurrentPosition] = useState(null);
+  const intl = useIntl();
 
   const {
     DndContext,
@@ -72,6 +83,7 @@ export function Order({
     () => removeChildrenOf(flattenTree(items), activeId ? [activeId] : []),
     [activeId, items],
   );
+
   const projected =
     activeId && overId
       ? getProjection(
@@ -135,16 +147,14 @@ export function Order({
       onDragCancel={handleDragCancel}
     >
       <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
-        {flattenedItems.map(({ id, parentId, depth, data }) => (
+        {flattenedItems.map(({ id, parentId, parentType, depth, data }) => (
           <SortableItem
             key={id}
             id={id}
             parentId={parentId}
+            parentType={parentType}
             data={data}
-            depth={min([
-              id === activeId && projected ? projected.depth : depth,
-              1,
-            ])}
+            depth={id === activeId && projected ? projected.depth : depth}
             indentationWidth={indentationWidth}
             onRemove={removable ? () => handleRemove(id) : undefined}
             onSelectBlock={onSelectBlock}
@@ -178,6 +188,7 @@ export function Order({
     if (activeItem) {
       setCurrentPosition({
         parentId: activeItem.parentId,
+        parentType: activeItem.parentType,
         overId: activeId,
       });
     }
@@ -195,18 +206,24 @@ export function Order({
 
   function handleDragEnd({ active, over }) {
     if (projected && over) {
-      const { depth, parentId } = projected;
+      const { depth, parentId, parentType } = projected;
       const clonedItems = JSON.parse(JSON.stringify(flattenedItems));
       const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
       const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
       const activeTreeItem = clonedItems[activeIndex];
       const oldParentId = activeTreeItem.parentId;
+      const oldParentType = activeTreeItem.parentType;
 
-      clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
+      clonedItems[activeIndex] = {
+        ...activeTreeItem,
+        depth,
+        parentId,
+        parentType,
+      };
 
       // Translate position depending on parent
       if (parentId === oldParentId) {
-        // Move from and to toplevel or move within the same grid block
+        // Move from and to toplevel or move within the same sub block
 
         let destIndex = clonedItems[overIndex].index;
         if (clonedItems[overIndex].depth > clonedItems[activeIndex].depth) {
@@ -226,66 +243,97 @@ export function Order({
           },
         });
       } else if (parentId && oldParentId) {
-        // Move from one gridblock to another
-
-        onMoveBlock({
-          source: {
-            position: clonedItems[activeIndex].index,
-            parent: oldParentId,
-            id: active.id,
-          },
-          destination: {
-            position:
-              overIndex < activeIndex
-                ? clonedItems[overIndex - 1].parentId
-                  ? clonedItems[overIndex - 1].index + 1
-                  : clonedItems[overIndex].index
-                : overIndex + 1 < clonedItems.length
-                  ? clonedItems[overIndex + 1].index
-                  : clonedItems[overIndex].index + 1,
-            parent: parentId,
-          },
-        });
+        // Move from one subblock to another
+
+        if (parentType === oldParentType) {
+          // Moving within the same type of subblock
+          onMoveBlock({
+            source: {
+              position: clonedItems[activeIndex].index,
+              parent: oldParentId,
+              id: active.id,
+            },
+            destination: {
+              position:
+                overIndex < activeIndex
+                  ? clonedItems[overIndex - 1].parentId
+                    ? clonedItems[overIndex - 1].index + 1
+                    : clonedItems[overIndex].index
+                  : overIndex + 1 < clonedItems.length
+                    ? clonedItems[overIndex + 1].index
+                    : clonedItems[overIndex].index + 1,
+              parent: parentId,
+            },
+          });
+        } else {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(defaultMessages.error)}
+              content={intl.formatMessage(messages.invalidBlockType)}
+            />,
+          );
+        }
       } else if (oldParentId) {
-        // Moving to the main container from a gridblock
-
-        onMoveBlock({
-          source: {
-            position: clonedItems[activeIndex].index,
-            parent: oldParentId,
-            id: active.id,
-          },
-          destination: {
-            position:
-              overIndex > activeIndex
-                ? overIndex + 1 < clonedItems.length
-                  ? clonedItems[overIndex + 1].index
-                  : clonedItems[overIndex].index + 1
-                : clonedItems[overIndex].index,
-            parent: parentId,
-          },
-        });
+        // Moving to the main container from a subblock
+
+        if (oldParentType === 'gridBlock') {
+          onMoveBlock({
+            source: {
+              position: clonedItems[activeIndex].index,
+              parent: oldParentId,
+              id: active.id,
+            },
+            destination: {
+              position:
+                overIndex > activeIndex
+                  ? overIndex + 1 < clonedItems.length
+                    ? clonedItems[overIndex + 1].index
+                    : clonedItems[overIndex].index + 1
+                  : clonedItems[overIndex].index,
+              parent: parentId,
+            },
+          });
+        } else {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(defaultMessages.error)}
+              content={intl.formatMessage(messages.invalidBlockType)}
+            />,
+          );
+        }
       } else {
-        // Moving from the main container to a gridblock
-
-        onMoveBlock({
-          source: {
-            position: clonedItems[activeIndex].index,
-            parent: oldParentId,
-            id: active.id,
-          },
-          destination: {
-            position:
-              overIndex < activeIndex
-                ? clonedItems[overIndex - 1].parentId
-                  ? clonedItems[overIndex - 1].index + 1
-                  : clonedItems[overIndex].index
-                : overIndex + 1 < clonedItems.length
-                  ? clonedItems[overIndex + 1].index
-                  : clonedItems[overIndex].index + 1,
-            parent: parentId,
-          },
-        });
+        // Moving from the main container to a subblock
+
+        if (parentType === 'gridBlock') {
+          onMoveBlock({
+            source: {
+              position: clonedItems[activeIndex].index,
+              parent: oldParentId,
+              id: active.id,
+            },
+            destination: {
+              position:
+                overIndex < activeIndex
+                  ? clonedItems[overIndex - 1].parentId
+                    ? clonedItems[overIndex - 1].index + 1
+                    : clonedItems[overIndex].index
+                  : overIndex + 1 < clonedItems.length
+                    ? clonedItems[overIndex + 1].index
+                    : clonedItems[overIndex].index + 1,
+              parent: parentId,
+            },
+          });
+        } else {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(defaultMessages.error)}
+              content={intl.formatMessage(messages.invalidBlockType)}
+            />,
+          );
+        }
       }
     }
 
@@ -321,6 +369,7 @@ export function Order({
         } else {
           setCurrentPosition({
             parentId: projected.parentId,
+            parentType: projected.parentType,
             overId,
           });
         }

package/src/components/manage/Blocks/Block/Order/utilities.js

@@ -34,27 +34,44 @@ export function getProjection(
     depth = minDepth;
   }
 
-  return { depth, maxDepth, minDepth, parentId: getParentId() };
+  return { depth, maxDepth, minDepth, ...getParent() };
 
-  function getParentId() {
+  function getParent() {
     if (depth === 0 || !previousItem) {
-      return null;
+      return {
+        parentId: null,
+        parentType: null,
+      };
     }
 
     if (depth <= previousItem.depth) {
-      return previousItem.parentId;
+      return {
+        parentId: previousItem.parentId,
+        parentType: previousItem.parentType,
+      };
     }
 
     if (depth > previousItem.depth) {
-      return previousItem.id;
+      return {
+        parentId: previousItem.id,
+        parentType: previousItem.data?.['@type'] || null,
+      };
     }
 
     const newParent = newItems
       .slice(0, overItemIndex)
       .reverse()
-      .find((item) => item.depth === depth)?.parentId;
-
-    return newParent ?? null;
+      .find((item) => item.depth === depth);
+
+    return newParent
+      ? {
+          parentId: newParent.parentId,
+          parentType: newParent.parentType,
+        }
+      : {
+          parentId: null,
+          parentType: null,
+        };
   }
 }
 
@@ -79,12 +96,12 @@ function getMinDepth({ nextItem }) {
   return 0;
 }
 
-function flatten(items = [], parentId = null, depth = 0) {
+function flatten(items = [], parentId = null, parentType = null, depth = 0) {
   return items.reduce((acc, item, index) => {
     return [
       ...acc,
-      { ...item, parentId, depth, index },
-      ...flatten(item.children, item.id, depth + 1),
+      { ...item, parentId, parentType, depth, index },
+      ...flatten(item.children, item.id, item.data?.['@type'], depth + 1),
     ];
   }, []);
 }

package/src/components/manage/Blocks/Listing/Edit.jsx

@@ -50,6 +50,7 @@ const Edit = React.memo(
   function areEquals(prevProps, nextProps) {
     return !(
       nextProps.selected !== prevProps.selected ||
+      nextProps.index !== prevProps.index ||
       !isEqual(prevProps.data, nextProps.data)
     );
   },

package/src/components/manage/Controlpanels/ContentTypeSchema.jsx

@@ -169,7 +169,7 @@ class ContentTypeSchema extends Component {
           error
           title={this.props.intl.formatMessage(messages.error)}
           content={JSON.stringify(
-            nextProps.schemaRequest.put.error.response.body ||
+            nextProps.schemaRequest.put.error.response.body?.message ||
               nextProps.schemaRequest.put.error.response.text,
           )}
         />,

package/src/components/manage/Sharing/Sharing.jsx

@@ -485,11 +485,19 @@ class SharingComponent extends Component {
                   />
                 </p>
               </Segment>
-              <Segment className="actions" attached clearing>
+              <Segment className="right aligned actions" attached clearing>
+                <Button
+                  basic
+                  secondary
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  title={this.props.intl.formatMessage(messages.cancel)}
+                  onClick={this.onCancel}
+                >
+                  <Icon className="circled" name={clearSVG} size="30px" />
+                </Button>
                 <Button
                   basic
                   primary
-                  floated="right"
                   type="submit"
                   aria-label={this.props.intl.formatMessage(messages.save)}
                   title={this.props.intl.formatMessage(messages.save)}
@@ -498,16 +506,6 @@ class SharingComponent extends Component {
                 >
                   <Icon className="circled" name={aheadSVG} size="30px" />
                 </Button>
-                <Button
-                  basic
-                  secondary
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  title={this.props.intl.formatMessage(messages.cancel)}
-                  floated="right"
-                  onClick={this.onCancel}
-                >
-                  <Icon className="circled" name={clearSVG} size="30px" />
-                </Button>
               </Segment>
             </Form>
           </Plug>

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -144,10 +144,14 @@ class ObjectBrowserBody extends Component {
       showSearchInput: false,
       // In image mode, the searchable types default to the image types which
       // can be overridden with the property if specified.
+      // If selectableTypes are passed, the searchableTypes are the selectableTypes
       searchableTypes:
         this.props.mode === 'image'
           ? this.props.searchableTypes || config.settings.imageObjects
-          : this.props.searchableTypes,
+          : [
+              ...(this.props.searchableTypes ?? []),
+              ...(this.props.selectableTypes ?? []),
+            ],
       view: this.props.mode === 'image' ? 'icons' : 'list',
     };
     this.searchInputRef = React.createRef();

package/src/components/manage/UniversalLink/UniversalLink.test.jsx

@@ -89,6 +89,22 @@ describe('UniversalLink', () => {
     );
   });
 
+  it('check UniversalLink append http when user has not entered the protocol', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink href="www.github.com" title="Volto GitHub repository">
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Volto GitHub repository').getAttribute('href')).toBe(
+      'http://www.github.com',
+    );
+  });
+
   it('check UniversalLink set target attribute for ext links', () => {
     const { getByTitle } = render(
       <Provider store={store}>

package/src/components/manage/UniversalLink/UniversalLink.tsx

@@ -122,6 +122,7 @@ const UniversalLink = React.memo(
         onClick,
         onKeyDown,
         item,
+        href,
         ...rest
       } = props;
       __test.renderCounter();

package/src/components/theme/App/App.jsx

@@ -174,7 +174,9 @@ export class App extends Component {
             <main ref={this.mainRef}>
               <OutdatedBrowser />
               {this.props.connectionRefused ? (
-                <ConnectionRefusedView />
+                <ConnectionRefusedView
+                  staticContext={this.props.staticContext}
+                />
               ) : this.state.hasError ? (
                 <Error
                   message={this.state.error.message}

package/src/components/theme/ConnectionRefused/ConnectionRefused.jsx

@@ -1,5 +1,5 @@
 /**
- * Home container.
+ * Connection refused error page.
  * @module components/theme/ConnectionRefused/ConnectionRefused
  */
 
@@ -7,6 +7,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Container } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
+import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
 
 const ConnectionRefused = () => (
   <Container
@@ -71,4 +72,4 @@ const ConnectionRefused = () => (
   </Container>
 );
 
-export default ConnectionRefused;
+export default withServerErrorCode(503)(ConnectionRefused);