@plone/volto 19.0.0-alpha.26 → 19.0.0-alpha.28

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/Blocks/Title/Edit.jsx

@@ -17,6 +17,10 @@ const messages = defineMessages({
     id: 'Type the title…',
     defaultMessage: 'Type the title…',
   },
+  editable_title: {
+    id: 'Content title',
+    defaultMessage: 'Content title',
+  },
 });
 
 function usePrevious(value) {
@@ -159,6 +163,7 @@ export const TitleBlockEdit = (props) => {
         renderElement={renderElement}
         onFocus={handleFocus}
         aria-multiline="false"
+        aria-label={intl.formatMessage(messages.editable_title)}
       ></Editable>
     </Slate>
   );

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

@@ -27,6 +27,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
+import Error from '@plone/volto/components/theme/Error/Error';
 import circleBottomSVG from '@plone/volto/icons/circle-bottom.svg';
 import circleTopSVG from '@plone/volto/icons/circle-top.svg';
 import backSVG from '@plone/volto/icons/back.svg';
@@ -148,6 +149,7 @@ const AddonsControlpanel = (props) => {
     shallowEqual,
   );
   const loadingAddons = useSelector((state) => state.addons.loading);
+  const addonsError = useSelector((state) => state.addons.error);
 
   useEffect(() => {
     dispatch(listAddons());
@@ -245,6 +247,11 @@ const AddonsControlpanel = (props) => {
     setactiveIndex(newIndex);
   };
 
+  // Error handling for unauthorized access
+  if (addonsError) {
+    return <Error error={addonsError} />;
+  }
+
   return (
     <Container id="page-addons" className="controlpanel-addons">
       <Helmet title={intl.formatMessage(messages.addOns)} />

package/src/components/manage/Controlpanels/BlockType.tsx

@@ -0,0 +1,166 @@
+import { getBlockTypes } from '@plone/volto/actions/blockTypes/blockTypes';
+import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { getParentUrl, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { useClient } from '@plone/volto/hooks';
+import config from '@plone/volto/registry';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useParams } from 'react-router-dom';
+import Error from '@plone/volto/components/theme/Error/Error';
+import { Table } from '@plone/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+import backSVG from '@plone/volto/icons/back.svg';
+import type { Location } from 'history';
+import type { BlockTypeItem } from '@plone/types';
+
+const messages = defineMessages({
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  controlpanelTitle: {
+    id: 'controlpanel_block_type',
+    defaultMessage: 'Block: {title}',
+  },
+  item: {
+    id: 'Item',
+    defaultMessage: 'Item',
+  },
+  path: {
+    id: 'Path',
+    defaultMessage: 'Path',
+  },
+  occurrences: {
+    id: 'Occurrences',
+    defaultMessage: 'Occurrences',
+  },
+  loading: {
+    id: 'loading',
+    defaultMessage: 'Loading',
+  },
+});
+
+type RouteProps = {
+  history: History;
+  location: Location;
+};
+
+type BlockTypesState = {
+  error: {
+    status?: number;
+  } | null;
+  items: BlockTypeItem[];
+  loaded: boolean;
+  loading: boolean;
+};
+
+type SelectorState = {
+  blockTypes: BlockTypesState;
+};
+
+const BlockTypeControlpanel = (props: RouteProps) => {
+  const { location } = props;
+  const params = useParams<{ id: string }>();
+  const id = params.id;
+  const intl = useIntl();
+  const blockTypes = useSelector((state: SelectorState) => state.blockTypes);
+  const isClient = useClient();
+  const dispatch = useDispatch();
+  const pathname = location.pathname;
+  const block =
+    config.blocks.blocksConfig[id as keyof typeof config.blocks.blocksConfig];
+
+  useEffect(() => {
+    dispatch(getBlockTypes(id));
+  }, [dispatch, id]);
+
+  if (blockTypes.loading) {
+    return <div>{intl.formatMessage(messages.loading)}&hellip;</div>;
+  }
+
+  if (blockTypes?.error?.status) {
+    return <Error error={blockTypes.error} />;
+  }
+
+  const translatedTitle = block?.title
+    ? intl.formatMessage({ id: block.title, defaultMessage: block.title })
+    : id;
+
+  return (
+    blockTypes.loaded && (
+      <div
+        id="page-block_type"
+        className="ui container controlpanel-block-type"
+      >
+        <h1>
+          {intl.formatMessage(messages.controlpanelTitle, {
+            title: translatedTitle,
+          })}
+        </h1>
+        {blockTypes.items?.length > 0 ? (
+          <Table
+            className="react-aria-Table cmsui-table"
+            columns={[
+              {
+                id: 'title',
+                name: intl.formatMessage(messages.item),
+                isRowHeader: true,
+              },
+              {
+                id: 'path',
+                name: intl.formatMessage(messages.path),
+                isRowHeader: true,
+              },
+              {
+                id: 'occurrences',
+                name: intl.formatMessage(messages.occurrences),
+                isRowHeader: true,
+              },
+            ]}
+            rows={blockTypes.items.map((item) => ({
+              id: item['@id'],
+              textValue: item.title,
+              title: (
+                <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
+              ),
+              path: flattenToAppURL(item['@id']) || '/',
+              occurrences: item.count,
+            }))}
+          />
+        ) : (
+          <FormattedMessage
+            id="no-blocks-found"
+            defaultMessage="No items found for type: {type}."
+            values={{
+              type: translatedTitle,
+            }}
+          />
+        )}
+        {isClient &&
+          createPortal(
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={
+                <Link to={getParentUrl(pathname)} className="item">
+                  <Icon
+                    name={backSVG}
+                    className="contents circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.back)}
+                  />
+                </Link>
+              }
+            />,
+            document.getElementById('toolbar') as HTMLElement,
+          )}
+      </div>
+    )
+  );
+};
+
+export default BlockTypeControlpanel;