@plone/volto 19.0.0-alpha.0 → 19.0.0-alpha.10

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

@@ -3,25 +3,50 @@ import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import BlocksForm from './BlocksForm';
 import { render } from '@testing-library/react';
-
 import config from '@plone/volto/registry';
 
 config.experimental = { addBlockButton: { enabled: false } };
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
 
-let mockSerial = 0;
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
-jest.mock('uuid', () => {
+let mockSerial = 0;
+vi.mock('uuid', () => {
   return {
-    v4: jest.fn().mockImplementation(() => `id-${mockSerial++}`),
+    v4: vi.fn().mockImplementation(() => `id-${mockSerial++}`),
   };
 });
 
+vi.mock('react-beautiful-dnd', () => ({
+  DragDropContext: ({ children }) => <div>{children}</div>,
+  Droppable: ({ children }) =>
+    children({
+      innerRef: () => {},
+      droppableProps: {},
+      placeholder: <div />,
+    }),
+  Draggable: ({ children }) =>
+    children({
+      innerRef: () => {},
+      draggableProps: {},
+      dragHandleProps: {},
+    }),
+}));
+
+vi.mock('./Order/Order', () => ({
+  default: () => <div>Order Component</div>,
+}));
+
 const mockStore = configureStore();
 
 test('Allow override of blocksConfig', () => {
@@ -70,10 +95,13 @@ test('Allow override of blocksConfig', () => {
 
   const { container } = render(
     <Provider store={store}>
-      <BlocksForm {...data} />
-      <div id="sidebar-order"></div>
+      <div>
+        <BlocksForm {...data} />
+        <div id="sidebar-order"></div>
+      </div>
     </Provider>,
   );
+
   expect(container).toMatchSnapshot();
 });
 
@@ -88,7 +116,7 @@ test('Removes invalid blocks on saving', () => {
     },
   });
 
-  const onChangeFormData = jest.fn(() => {});
+  const onChangeFormData = vi.fn(() => {});
 
   const data = {
     pathname: '/test',
@@ -126,18 +154,22 @@ test('Removes invalid blocks on saving', () => {
 
   render(
     <Provider store={store}>
-      <BlocksForm {...data} />
-      <div id="sidebar-order"></div>
+      <div>
+        <BlocksForm {...data} />
+        <div id="sidebar-order"></div>
+      </div>
     </Provider>,
   );
-  expect(onChangeFormData).toBeCalledWith({
+
+  expect(onChangeFormData).toHaveBeenCalledWith({
     blocks: {
       a: { '@type': 'custom', text: 'a' },
       b: { '@type': 'custom', text: 'b' },
     },
     blocks_layout: { items: ['a', 'b', 'MISSING-YOU-1'] },
   });
-  expect(onChangeFormData).toBeCalledWith({
+
+  expect(onChangeFormData).toHaveBeenCalledWith({
     blocks: {
       a: { '@type': 'custom', text: 'a' },
       b: { '@type': 'custom', text: 'b' },

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

@@ -122,7 +122,7 @@ export class Edit extends Component {
    */
   render() {
     const { blocksConfig = config.blocks.blocksConfig } = this.props;
-    const { editable, type } = this.props;
+    const { editable, type, isContainer: parentIsContainer } = this.props;
 
     const disableNewBlocks = this.props.data?.disableNewBlocks;
 
@@ -187,6 +187,7 @@ export class Edit extends Component {
               selected: this.props.selected || this.props.multiSelected,
               multiSelected: this.props.multiSelected,
               hovered: this.props.hovered === this.props.id,
+              error: !!this.props.blocksErrors?.[this.props.id],
             })}
             style={{ outline: 'none' }}
             ref={this.blockNode}
@@ -198,6 +199,7 @@ export class Edit extends Component {
               {...this.props}
               blockNode={this.blockNode}
               data={this.props.data}
+              className={cx({ contained: parentIsContainer })}
             />
             {this.props.manage && (
               <SidebarPortal

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

@@ -21,9 +21,13 @@ import BlockChooserButton from '@plone/volto/components/manage/BlockChooser/Bloc
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
-  delete: {
-    id: 'delete',
-    defaultMessage: 'delete',
+  delete_block: {
+    id: 'delete_block',
+    defaultMessage: 'delete {type} block',
+  },
+  drag_block: {
+    id: 'drag_block',
+    defaultMessage: 'drag {type} block',
   },
 });
 
@@ -99,6 +103,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 +116,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/Settings.test.jsx

@@ -5,7 +5,11 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 

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

@@ -9,7 +9,13 @@ import {
 const StyleWrapper = (props) => {
   let classNames,
     style = [];
-  const { block, children, content, data = {}, isContainer } = props;
+  const {
+    block,
+    children,
+    content,
+    data = {},
+    isContainer: parentIsContainer,
+  } = props;
   classNames = buildStyleClassNamesFromData(data.styles);
 
   classNames = buildStyleClassNamesExtenders({
@@ -24,14 +30,16 @@ const StyleWrapper = (props) => {
     '',
     // If we are rendering blocks inside a container, then pass also the data from the container
     // This is needed in order to calculate properly the styles for the blocks inside the container
-    isContainer && content.blocks ? content : {},
+    parentIsContainer && content.blocks ? content : {},
   );
 
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const childProps = {
         ...props,
-        className: cx([child.props.className, ...classNames]),
+        className: cx([child.props.className, ...classNames], {
+          contained: parentIsContainer,
+        }),
         style: { ...child.props.style, ...style },
       };
       return React.cloneElement(child, childProps);

package/src/components/manage/Blocks/Description/View.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
-test('renders a view description component', () => {
+it('renders a view description component', () => {
   const component = renderer.create(
     <View properties={{ description: 'My Description' }} />,
   );

package/src/components/manage/Blocks/HTML/Edit.test.jsx

@@ -7,11 +7,18 @@ import Edit from './Edit';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 test('renders an edit html block component', async () => {
   const store = mockStore({

package/src/components/manage/Blocks/HTML/View.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
-test('renders a view html component', () => {
+it('renders a view html component', () => {
   const component = renderer.create(<View data={{ html: '<h1></h1>' }} />);
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

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

@@ -20,7 +20,11 @@ function Edit(props) {
 
   const handleChange = React.useCallback(
     async (id, image, { title, image_field, image_scales } = {}) => {
-      const url = image ? image['@id'] || image : '';
+      const url = Array.isArray(image)
+        ? image?.[0]?.['@id']
+        : image
+          ? image['@id'] || image
+          : '';
 
       props.onChangeBlock(props.block, {
         ...props.data,

package/src/components/manage/Blocks/Image/ImageSidebar.test.jsx

@@ -5,11 +5,15 @@ import { Provider } from 'react-intl-redux';
 
 import ImageSidebar from './ImageSidebar';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 
-test('renders an Image Block Sidebar component', () => {
+it('renders an Image Block Sidebar component', () => {
   const store = mockStore({
     content: {
       create: {},

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

@@ -43,13 +43,13 @@ const Edit = (props) => {
       {!hasImage && (
         <Message>
           <center>
-            <img src={imageBlockSVG} alt="" />
+            <Image src={imageBlockSVG} alt="" />
             <div className="message-text">{placeholder}</div>
           </center>
         </Message>
       )}
       {hasImage && hasImageData && (
-        <img
+        <Image
           className={className}
           src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
           width={properties.image.width}

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx

@@ -96,7 +96,7 @@ const LeadImageSidebar = ({
           <Segment className="sidebar-metadata-container" secondary>
             {properties.image.filename}
             {properties.image.data && (
-              <img
+              <Image
                 // TODO understand when this actually happens
                 src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
                 width={properties.image.width}

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx

@@ -5,7 +5,12 @@ import { Provider } from 'react-intl-redux';
 
 import LeadImageSidebar from './LeadImageSidebar';
 
-jest.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/components/manage/Widgets', async () => {
+  return await import(
+    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 
@@ -16,6 +21,7 @@ test('renders a Lead Image block Sidebar component', () => {
       messages: {},
     },
   });
+
   const component = renderer.create(
     <Provider store={store}>
       <LeadImageSidebar
@@ -45,6 +51,7 @@ test('renders a Lead Image block Sidebar component', () => {
       />
     </Provider>,
   );
+
   const json = component.toJSON();
   expect(json).toMatchSnapshot();
 });

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

@@ -1,10 +1,12 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import 'react-image-gallery/styles/css/image-gallery.css';
 import { Button } from 'semantic-ui-react';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import {
+  addSubpathPrefix,
+  flattenToAppURL,
+} from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 import galleryLeftSVG from '@plone/volto/icons/left-key.svg';
@@ -81,10 +83,10 @@ const ImageGalleryTemplate = ({ items }) => {
   );
   const imagesInfo = renderItems.map((item) => {
     return {
-      original: `${flattenToAppURL(item['@id'])}/@@images/${
+      original: `${addSubpathPrefix(flattenToAppURL(item['@id']))}/@@images/${
         item.image_field
       }/large`,
-      thumbnail: `${flattenToAppURL(item['@id'])}/@@images/${
+      thumbnail: `${addSubpathPrefix(flattenToAppURL(item['@id']))}/@@images/${
         item.image_field
       }/thumb`,
     };

package/src/components/manage/Blocks/Listing/View.test.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
-jest.mock('./ListingBody', () => jest.fn(() => <div className="theblock" />));
+vi.mock('./ListingBody', () => ({
+  default: () => <div className="theblock" />,
+}));
 
 test('renders a view image component for the listing block', () => {
   const component = renderer.create(

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

@@ -11,6 +11,7 @@ import MapsSidebar from '@plone/volto/components/manage/Blocks/Maps/MapsSidebar'
 import clearSVG from '@plone/volto/icons/clear.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import mapsBlockSVG from '@plone/volto/components/manage/Blocks/Maps/block-maps.svg';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   MapsBlockInputPlaceholder: {
@@ -121,7 +122,7 @@ const Edit = React.memo((props) => {
       ) : (
         <Message>
           <center>
-            <img src={mapsBlockSVG} alt="" />
+            <Image src={mapsBlockSVG} alt="" />
             <div className="toolbar-inner">
               <Input
                 onKeyDown={onKeyDownVariantMenuForm}

package/src/components/manage/Blocks/Maps/MapsSidebar.test.jsx

@@ -5,7 +5,11 @@ import { Provider } from 'react-intl-redux';
 
 import MapsSidebar from './MapsSidebar';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 

package/src/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -42,7 +42,7 @@ const blockPropsAreChanged = (prevProps, nextProps) => {
   return isEqual(prev, next);
 };
 
-const applyDefaults = (data, root) => {
+const applyDefaults = (data, root, blockQuery) => {
   const defaultQuery = [
     {
       i: 'path',
@@ -51,7 +51,8 @@ const applyDefaults = (data, root) => {
     },
   ];
 
-  const searchBySearchableText = data.query.filter(
+  const dataQuery = data?.query?.length ? data.query : [];
+  const searchBySearchableText = dataQuery.filter(
     (item) => item['i'] === 'SearchableText',
   ).length;
 
@@ -66,11 +67,27 @@ const applyDefaults = (data, root) => {
       ? { sort_order: 'descending' }
       : {};
 
+  // We start with the base query from the block.
+  // We enhance it with the query from the facets (filters).
+  // We fall back to the default query.
+  let query = blockQuery?.length ? blockQuery : [];
+  if (!query.length) {
+    query = dataQuery.length ? dataQuery : defaultQuery;
+  } else if (dataQuery.length) {
+    // We have both a base query and a filter.  Combine them.
+    // Items in the filter win over items in the base query.
+    const filterKeys = new Set(dataQuery.map((obj) => obj.i));
+    query = [
+      ...dataQuery,
+      ...blockQuery.filter((item) => !filterKeys.has(item.i)),
+    ];
+  }
+
   return {
     ...data,
     ...sort_on,
     ...sort_order,
-    query: data?.query?.length ? data.query : defaultQuery,
+    query,
   };
 };
 
@@ -93,7 +110,7 @@ const SearchBlockView = (props) => {
   }, [dataListingBodyVariation, mode]);
 
   const root = useSelector((state) => state.breadcrumbs.root);
-  const listingBodyData = applyDefaults(searchData, root);
+  const listingBodyData = applyDefaults(searchData, root, data.query?.query);
 
   const { variations } = config.blocks.blocksConfig.listing;
   const listingBodyVariation = variations.find(({ id }) => id === selectedView);

package/src/components/manage/Blocks/Search/components/DateRangeFacet.test.jsx

@@ -2,18 +2,24 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { waitFor, render, screen } from '@testing-library/react';
-
 import DateRangeFacet from './DateRangeFacet';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
-describe('DateRangeFaceg', () => {
+describe('DateRangeFacet', () => {
   it('renders a facet component with a date range widget', async () => {
     const store = mockStore({
       userSession: { token: null },

package/src/components/manage/Blocks/Search/components/SelectFacet.test.jsx

@@ -2,16 +2,22 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { waitFor, render, screen } from '@testing-library/react';
-
 import SelectFacet from './SelectFacet';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 describe('SelectFacet', () => {
   it('renders a facet component with select dropdown', async () => {

package/src/components/manage/Blocks/Teaser/Data.jsx

@@ -21,7 +21,7 @@ const messages = defineMessages({
   },
   refreshTeaser: {
     id: 'Refresh source content',
-    defaultMessage: 'Refresh source content',
+    defaultMessage: 'Reset to target',
   },
   invalidTeaser: {
     id: 'Invalid teaser source',
@@ -29,6 +29,16 @@ const messages = defineMessages({
   },
 });
 
+function getImageField(resp) {
+  if (!resp) return null;
+
+  if (resp.preview_image_link) return 'preview_image_link';
+  if (resp.preview_image) return 'preview_image';
+  if (resp.image) return 'image';
+
+  return null;
+}
+
 const TeaserData = (props) => {
   const {
     block,
@@ -58,16 +68,20 @@ const TeaserData = (props) => {
       '@type': resp?.['@type'],
       Description: resp?.description,
       Title: resp.title,
-      hasPreviewImage: resp?.preview_image ? true : false,
+      hasPreviewImage: getImageField(resp) ? true : false,
       head_title: resp.head_title ?? null,
-      image_field: resp?.preview_image
-        ? 'preview_image'
-        : resp?.image
-          ? 'image'
-          : null,
+      image_field: getImageField(resp),
       image_scales: {
         preview_image: [resp?.preview_image],
         image: [resp?.image],
+        preview_image_link: resp?.preview_image_link
+          ? [
+              {
+                ...resp?.preview_image_link?.['image_scales']?.image?.[0],
+                base_path: resp?.preview_image_link?.['@id'],
+              },
+            ]
+          : [],
       },
       title: resp.title,
     };

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -33,7 +33,7 @@ const TeaserDefaultTemplate = (props) => {
         {!href && isEditMode && (
           <Message>
             <div className="teaser-item placeholder">
-              <img src={imageBlockSVG} alt="" />
+              <Image src={imageBlockSVG} alt="" />
               <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
             </div>
           </Message>

package/src/components/manage/Blocks/Teaser/schema.js

@@ -22,9 +22,13 @@ const messages = defineMessages({
     id: 'Description',
     defaultMessage: 'Description',
   },
-  head_title: {
+  kicker: {
     id: 'head_title',
-    defaultMessage: 'Head title',
+    defaultMessage: 'Kicker',
+  },
+  kicker_description: {
+    id: 'The kicker is a line of text shown above the title.',
+    defaultMessage: 'The kicker is a line of text shown above the title.',
   },
   teaser: {
     id: 'Teaser',
@@ -88,7 +92,8 @@ export const TeaserSchema = ({ data, intl }) => {
         title: intl.formatMessage(messages.title),
       },
       head_title: {
-        title: intl.formatMessage(messages.head_title),
+        title: intl.formatMessage(messages.kicker),
+        description: intl.formatMessage(messages.kicker_description),
       },
       description: {
         title: intl.formatMessage(messages.description),

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

@@ -77,8 +77,14 @@ export const TitleBlockEdit = (props) => {
         ReactEditor.focus(editor);
       } else {
         // nothing is selected, move focus to end
-        ReactEditor.focus(editor);
-        Transforms.select(editor, Editor.end(editor, []));
+        // make sure that the editor is focused
+        setTimeout(() => {
+          const focused = ReactEditor.focus(editor);
+          if (!focused) {
+            ReactEditor.focus(editor);
+            Transforms.select(editor, Editor.end(editor, []));
+          }
+        }, 0);
       }
     }
   }, [prevSelected, selected, editor]);