@plone/volto 16.21.0 → 16.21.2

package/.changelog.draft

@@ -1,17 +1,7 @@
-## 16.21.0 (2023-06-16)
-
-### Feature
-
-- Display PAS validation errors. [tschorr] [#4801](https://github.com/plone/volto/issues/4801)
-- Allow to deselect color in ColorPickerWidget. @ksuess [#4838](https://github.com/plone/volto/issues/4838)
-- Added a CSS identifier to the Slate style menu options. @razvanMiu [#4846](https://github.com/plone/volto/issues/4846)
-- Use a Container from the registry in the Form component and fallback to the Semantic UI one. @sneridagh [#4849](https://github.com/plone/volto/issues/4849)
-- Add and enforce a new config setting, `maxFileUploadSize`. @davisagli [#4868](https://github.com/plone/volto/issues/4868)
-- Configurable Container component from registry for some key route views. @sneridagh [#4871](https://github.com/plone/volto/issues/4871)
+## 16.21.2 (2023-06-24)
 
 ### Bugfix
 
-- Do not break validation on required number field with value 0 @cekk [#4841](https://github.com/plone/volto/issues/4841)
-- Fix regression in horizontal scroll in contents view, add it back @sneridagh [#4872](https://github.com/plone/volto/issues/4872)
-- Fix and improve the `addStyling` helper @sneridagh [#4880](https://github.com/plone/volto/issues/4880)
+- Update to version 6.0.5 of Plone backend. @davisagli [#4897](https://github.com/plone/volto/issues/4897)
+- Fix "digital envelope routines::unsupported" error when running Volto 16 in Node 17+. @davisagli [#4901](https://github.com/plone/volto/issues/4901)
 

package/CHANGELOG.md

@@ -8,6 +8,21 @@
 
 <!-- towncrier release notes start -->
 
+## 16.21.2 (2023-06-24)
+
+### Bugfix
+
+- Update to version 6.0.5 of Plone backend. @davisagli [#4897](https://github.com/plone/volto/issues/4897)
+- Fix "digital envelope routines::unsupported" error when running Volto 16 in Node 17+. @davisagli [#4901](https://github.com/plone/volto/issues/4901)
+
+
+## 16.21.1 (2023-06-23)
+
+### Bugfix
+
+- Added current page parameter to route in listing and search block pagination - Fix: #3868 @bipoza [#4159](https://github.com/plone/volto/issues/4159)
+
+
 ## 16.21.0 (2023-06-16)
 
 ### Feature

package/README.md

@@ -53,20 +53,16 @@ First get all the requirements installed on your system.
 
 ### Prerequisites
 
-- [Node.js LTS (16.x)](https://nodejs.org/)
+- [Node.js LTS (16.x or 18.x)](https://nodejs.org/)
 - [Python](https://python.org/) - See below for specific versions.
 - [Docker](https://www.docker.com/get-started) (if using the Plone docker images)
 
-*UPDATE 2022-10-25*: Since 2022-10-25, NodeJS 18 is in LTS state (https://github.com/nodejs/release#release-schedule). However, due to changes in internal SSL libraries, some Volto dependencies have been deprecated and need to be updated in order to continue working in NodeJS 18, mainly Webpack 4 (see: https://github.com/webpack/webpack/issues/14532#issuecomment-947525539 for further information). You can still use it, but NodeJS should be run under a special flag: `NODE_OPTIONS=--openssl-legacy-provider`. See also Volto's PR: https://github.com/plone/volto/pull/3699 for more information.
-
 The versions of Python that are supported in Volto depend on the version of Plone that you use.
 
 | Plone | Python | Volto |
 |---|---|---|
 | 5.2 | 2.7, 3.6-3.8 | 15.0 |
-| 6.0 (beta) | 3.8-3.10 | 16.0 (alpha) |
-
-At the time of this writing, Volto 16 is still in alpha status, and Plone 6 is in beta status.
+| 6.0 | 3.8-3.11 | 16.0 |
 
 ### Create a Volto project using the generator
 
@@ -90,7 +86,7 @@ cd myvoltoproject
 You can bootstrap a ready Docker Plone container with all the dependencies and ready for Volto use. We recommend to use the Plone docker builds based in `pip` [plone/plone-backend](https://github.com/plone/plone-backend) image:
 
 ```shell
-docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.0b3
+docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.5
 ```
 
 or as an alternative if you have experience with Plone and you have all the
@@ -229,10 +225,11 @@ JavaScript-centered trainings.
 
 ## Node Support
 
+- Node 18: Supported since Volto 16
 - Node 16: Supported since Volto 14
-- Node 14: Supported since Volto 8.8.0
-- Node 12: Deprecated from Volto 16 onwards. It was supported since Volto 4
-- Node 10: Deprecated from Volto 13 onwards. It was supported since Volto 1 (and its predecessor "plone-react")
+- Node 14: Supported from Volto 8.8.0 - 16
+- Node 12: No longer supported. It was supported from Volto 4 - 15
+- Node 10: No longer supported. It was supported from Volto 1 - 12
 
 ## Browser support
 
@@ -267,7 +264,7 @@ yarn
 Either using a Docker command:
 
 ```shell
-docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.0b3
+docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.5
 ```
 
 or using the convenience makefile command:

package/cypress/support/commands.js

@@ -849,3 +849,23 @@ Cypress.Commands.add('getTableSlate', (header = false) => {
   );
   return slate;
 });
+
+Cypress.Commands.add('configureListingWith', (contentType) => {
+  cy.get('.sidebar-container .tabs-wrapper .menu .item')
+    .contains('Block')
+    .click();
+  cy.get('.querystring-widget .fields').contains('Add criteria').click();
+  cy.get(
+    '.querystring-widget .fields:first-of-type .field:first-of-type .react-select__menu .react-select__option',
+  )
+    .contains('Type')
+    .click();
+
+  //insert Page
+  cy.get('.querystring-widget .fields:first-of-type > .field').click();
+  cy.get(
+    '.querystring-widget .fields:first-of-type > .field .react-select__menu .react-select__option',
+  )
+    .contains(contentType)
+    .click();
+});

package/docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.3'
 services:
 
   backend:
-    image: plone/plone-backend:6.0.0b2
+    image: plone/plone-backend:6.0.5
     # Plone 5.2 series can be used too
     # image: plone/plone-backend:5.2.9
     ports:

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.21.0",
+  "version": "16.21.2",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "16.21.0",
+  "version": "16.21.2",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/razzle.config.js

@@ -22,6 +22,13 @@ const { poToJson } = require('@plone/scripts/i18n.cjs');
 
 const packageJson = require(path.join(projectRootPath, 'package.json'));
 
+// This is a workaround to support webpack 4 on Node 17+,
+// because the MD4 hash algorithm is no longer supported by Node.
+const crypto = require('crypto');
+const crypto_orig_createHash = crypto.createHash;
+crypto.createHash = (algorithm) =>
+  crypto_orig_createHash(algorithm === 'md4' ? 'sha256' : algorithm);
+
 const registry = new AddonConfigurationRegistry(projectRootPath);
 
 const defaultModify = ({

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

@@ -36,6 +36,26 @@ test('renders a ListingBody component', () => {
     content: {
       data: {
         is_folderish: true,
+        blocks: {
+          '839ee00b-013b-4f4a-9b10-8867938fdac3': {
+            '@type': 'listing',
+            block: '839ee00b-013b-4f4a-9b10-8867938fdac3',
+            headlineTag: 'h2',
+            query: [],
+            querystring: {
+              b_size: '2',
+              query: [
+                {
+                  i: 'path',
+                  o: 'plone.app.querystring.operation.string.absolutePath',
+                  v: '/',
+                },
+              ],
+              sort_order: 'ascending',
+            },
+            variation: 'default',
+          },
+        },
       },
     },
     intl: {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import useDeepCompareEffect from 'use-deep-compare-effect';
@@ -14,18 +14,23 @@ function getDisplayName(WrappedComponent) {
 
 export default function withQuerystringResults(WrappedComponent) {
   function WithQuerystringResults(props) {
-    const { data = {}, properties: content, path, variation } = props;
+    const {
+      data = {},
+      id = data.block,
+      properties: content,
+      path,
+      variation,
+    } = props;
     const { settings } = config;
     const querystring = data.querystring || data; // For backwards compat with data saved before Blocks schema. Note, this is also how the Search block passes data to ListingBody
 
-    const { block } = data;
     const { b_size = settings.defaultPageSize } = querystring; // batchsize
 
     // save the path so it won't trigger dispatch on eager router location change
     const [initialPath] = React.useState(getBaseUrl(path));
 
     const copyFields = ['limit', 'query', 'sort_on', 'sort_order', 'depth'];
-
+    const { currentPage, setCurrentPage } = usePagination(id, 1);
     const adaptedQuery = Object.assign(
       variation?.fullobjects ? { fullobjects: 1 } : { metadata_fields: '_all' },
       {
@@ -37,7 +42,9 @@ export default function withQuerystringResults(WrappedComponent) {
           : {},
       ),
     );
-    const { currentPage, setCurrentPage } = usePagination(querystring, 1);
+    const adaptedQueryRef = useRef(adaptedQuery);
+    const currentPageRef = useRef(currentPage);
+
     const querystringResults = useSelector(
       (state) => state.querystringsearch.subrequests,
     );
@@ -45,32 +52,32 @@ export default function withQuerystringResults(WrappedComponent) {
 
     const folderItems = content?.is_folderish ? content.items : [];
     const hasQuery = querystring?.query?.length > 0;
-    const hasLoaded = hasQuery ? !querystringResults?.[block]?.loading : true;
+    const hasLoaded = hasQuery ? querystringResults?.[id]?.loaded : true;
 
     const listingItems =
-      querystring?.query?.length > 0 && querystringResults?.[block]
-        ? querystringResults?.[block]?.items || []
+      querystring?.query?.length > 0 && querystringResults?.[id]
+        ? querystringResults?.[id]?.items || []
         : folderItems;
 
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
     const showAsQueryListing =
-      hasQuery && querystringResults?.[block]?.total > b_size;
+      hasQuery && querystringResults?.[id]?.total > b_size;
 
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[block].total / b_size)
+      ? Math.ceil(querystringResults[id].total / b_size)
       : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[block].batching?.prev
+      ? querystringResults[id].batching?.prev
       : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[block].batching?.next
+      ? querystringResults[id].batching?.next
       : null;
 
     const isImageGallery =
@@ -80,7 +87,7 @@ export default function withQuerystringResults(WrappedComponent) {
     useDeepCompareEffect(() => {
       if (hasQuery) {
         dispatch(
-          getQueryStringResults(initialPath, adaptedQuery, block, currentPage),
+          getQueryStringResults(initialPath, adaptedQuery, id, currentPage),
         );
       } else if (isImageGallery && !hasQuery) {
         // when used as image gallery, it doesn't need a query to list children
@@ -98,14 +105,16 @@ export default function withQuerystringResults(WrappedComponent) {
                 },
               ],
             },
-            block,
+            id,
           ),
         );
       } else {
         dispatch(getContent(initialPath, null, null, currentPage));
       }
+      adaptedQueryRef.current = adaptedQuery;
+      currentPageRef.current = currentPage;
     }, [
-      block,
+      id,
       isImageGallery,
       adaptedQuery,
       hasQuery,
@@ -118,7 +127,7 @@ export default function withQuerystringResults(WrappedComponent) {
       <WrappedComponent
         {...props}
         onPaginationChange={(e, { activePage }) => setCurrentPage(activePage)}
-        total={querystringResults?.[block]?.total}
+        total={querystringResults?.[id]?.total}
         batch_size={b_size}
         currentPage={currentPage}
         totalPages={totalPages}

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -148,12 +148,16 @@ const getSearchFields = (searchData) => {
 };
 
 /**
- * A HOC that will mirror the search block state to a hash location
+ * A hook that will mirror the search block state to a hash location
  */
 const useHashState = () => {
   const location = useLocation();
   const history = useHistory();
 
+  /**
+   * Required to maintain parameter compatibility.
+    With this we will maintain support for receiving hash (#) and search (?) type parameters.
+  */
   const oldState = React.useMemo(() => {
     return {
       ...qs.parse(location.search),
@@ -169,7 +173,7 @@ const useHashState = () => {
 
   const setSearchData = React.useCallback(
     (searchData) => {
-      const newParams = qs.parse(location.hash);
+      const newParams = qs.parse(location.search);
 
       let changed = false;
 
@@ -186,11 +190,11 @@ const useHashState = () => {
 
       if (changed) {
         history.push({
-          hash: qs.stringify(newParams),
+          search: qs.stringify(newParams),
         });
       }
     },
-    [history, oldState, location.hash],
+    [history, oldState, location.search],
   );
 
   return [current, setSearchData];

package/src/components/manage/Diff/DiffField.jsx

@@ -61,12 +61,12 @@ const DiffField = ({
         break;
       case 'datetime':
         parts = diffWords(
-          new Intl.DateTimeFormat(language, readable_date_format).format(
-            new Date(one),
-          ),
-          new Intl.DateTimeFormat(language, readable_date_format).format(
-            new Date(two),
-          ),
+          new Intl.DateTimeFormat(language, readable_date_format)
+            .format(new Date(one))
+            .replace('\u202F', ' '),
+          new Intl.DateTimeFormat(language, readable_date_format)
+            .format(new Date(two))
+            .replace('\u202F', ' '),
         );
         break;
       case 'json':

package/src/components/theme/FormattedDate/FormattedDate.jsx

@@ -23,9 +23,9 @@ const FormattedDate = ({
     <time
       className={className}
       dateTime={date}
-      title={new Intl.DateTimeFormat(language, long_date_format).format(
-        new Date(toDate(date)),
-      )}
+      title={new Intl.DateTimeFormat(language, long_date_format)
+        .format(new Date(toDate(date)))
+        .replace('\u202F', ' ')}
     >
       {children
         ? children(

package/src/helpers/Utils/Date.js

@@ -48,7 +48,9 @@ export function formatDate({
     : short_date_format;
 
   const formatter = new Intl.DateTimeFormat(locale, format);
-  return formatToParts ? formatter.formatToParts(date) : formatter.format(date);
+  return formatToParts
+    ? formatter.formatToParts(date)
+    : formatter.format(date).replace('\u202F', ' ');
 }
 
 export function formatRelativeDate({
@@ -93,5 +95,5 @@ export function formatRelativeDate({
     ? ''
     : formatToParts
     ? formatter.formatToParts(v, tag)
-    : formatter.format(v, tag); // use "now" ?
+    : formatter.format(v, tag).replace('\u202F', ' '); // use "now" ?
 }

package/src/helpers/Utils/Date.test.js

@@ -192,6 +192,8 @@ describe('formatRelativeDate helper', () => {
   it('can use alternate style narrow', () => {
     const now = Date.now();
     const d = new Date(now + 3 * MONTH);
-    expect(formatRelativeDate({ date: d, style: 'narrow' })).toBe('in 3 mo.');
+    expect(['in 3 mo.', 'in 3mo']).toContain(
+      formatRelativeDate({ date: d, style: 'narrow' }),
+    );
   });
 });

package/src/helpers/Utils/usePagination.js

@@ -1,25 +1,83 @@
-import React from 'react';
-import { isEqual } from 'lodash';
-import { usePrevious } from './usePrevious';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useRef, useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import qs from 'query-string';
+import { useSelector } from 'react-redux';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+/**
+ * @function useCreatePageQueryStringKey
+ * @description A hook that creates a key with an id if there are multiple blocks with pagination.
+ * @returns {string} Example: page || page_012345678
+ */
+const useCreatePageQueryStringKey = (id) => {
+  const blockTypesWithPagination = ['search', 'listing'];
+  const blocks = useSelector((state) => state?.content?.data?.blocks) || [];
+  const blocksLayout =
+    useSelector((state) => state?.content?.data?.blocks_layout?.items) || [];
+  const displayedBlocks = blocksLayout?.map((item) => blocks[item]);
+  const hasMultiplePaginations =
+    displayedBlocks.filter((item) =>
+      blockTypesWithPagination.includes(item['@type']),
+    ).length > 1 || false;
+
+  return hasMultiplePaginations ? slugify(`page-${id}`) : 'page';
+};
+
+const useGetBlockType = (id) => {
+  const blocks = useSelector((state) => state?.content?.data?.blocks) || [];
+  const block = blocks[id];
+  return block ? block?.['@type'] : null;
+};
 
 /**
  * A pagination helper that tracks the query and resets pagination in case the
  * query changes.
  */
-export const usePagination = (query, defaultPage = 1) => {
-  const previousQuery = usePrevious(query);
-  const [currentPage, setCurrentPage] = React.useState(defaultPage);
+export const usePagination = (id = null, defaultPage = 1) => {
+  const location = useLocation();
+  const history = useHistory();
+  const pageQueryStringKey = useCreatePageQueryStringKey(id);
+  const block_type = useGetBlockType(id);
+  const pageQueryParam =
+    qs.parse(location.search)[pageQueryStringKey] || defaultPage;
+  const [currentPage, setCurrentPageState] = React.useState(
+    parseInt(pageQueryParam),
+  );
+  const setCurrentPage = (page) => {
+    setCurrentPageState(page);
+    const newParams = {
+      ...qs.parse(location.search),
+      [pageQueryStringKey]: page,
+    };
+    history.push({ search: qs.stringify(newParams) });
+  };
 
-  useDeepCompareEffect(() => {
-    setCurrentPage(defaultPage);
-  }, [query, previousQuery, defaultPage]);
+  const queryRef = useRef(qs.parse(location.search)?.query);
+  useEffect(() => {
+    if (
+      queryRef.current !== qs.parse(location.search)?.query &&
+      block_type === 'search'
+    ) {
+      setCurrentPageState(defaultPage);
+      const newParams = {
+        ...qs.parse(location.search),
+        [pageQueryStringKey]: defaultPage,
+      };
+      delete newParams[pageQueryStringKey];
+      history.replace({ search: qs.stringify(newParams) });
+      queryRef.current = qs.parse(location.search)?.query;
+    } else {
+      setCurrentPageState(
+        parseInt(
+          qs.parse(location.search)?.[pageQueryStringKey] || defaultPage,
+        ),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.search, block_type]);
 
   return {
-    currentPage:
-      previousQuery && !isEqual(previousQuery, query)
-        ? defaultPage
-        : currentPage,
+    currentPage,
     setCurrentPage,
   };
 };

package/src/helpers/Utils/usePagination.test.js

@@ -0,0 +1,115 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { usePagination } from './usePagination';
+import * as redux from 'react-redux';
+import routeData from 'react-router';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+const searchBlockId = '545b33de-92cf-4747-969d-68851837b317';
+const searchBlockId2 = '454b33de-92cf-4747-969d-68851837b713';
+const searchBlock = {
+  '@type': 'search',
+  query: {
+    b_size: '4',
+    query: [
+      {
+        i: 'path',
+        o: 'plone.app.querystring.operation.string.relativePath',
+        v: '',
+      },
+    ],
+    sort_order: 'ascending',
+  },
+  showSearchInput: true,
+  showTotalResults: true,
+};
+let state = {
+  content: {
+    data: {
+      blocks: {
+        [searchBlockId]: searchBlock,
+      },
+      blocks_layout: {
+        items: [searchBlockId],
+      },
+    },
+  },
+};
+
+let mockUseLocationValue = {
+  pathname: '/testroute',
+  search: '',
+};
+
+const setUp = (searchParam, numberOfSearches) => {
+  mockUseLocationValue.search = searchParam;
+  if (numberOfSearches > 1) {
+    state.content.data.blocks[searchBlockId2] = searchBlock;
+    state.content.data.blocks_layout.items.push(searchBlockId2);
+  }
+  return renderHook(({ id, defaultPage }) => usePagination(id, defaultPage), {
+    initialProps: {
+      id: searchBlockId,
+      defaultPage: 1,
+    },
+  });
+};
+
+describe(`Tests for usePagination, for the block ${searchBlockId}`, () => {
+  const useLocation = jest.spyOn(routeData, 'useLocation');
+  const useHistory = jest.spyOn(routeData, 'useHistory');
+  const useSelector = jest.spyOn(redux, 'useSelector');
+  beforeEach(() => {
+    useLocation.mockReturnValue(mockUseLocationValue);
+    useHistory.mockReturnValue({ replace: jest.fn() });
+    useSelector.mockImplementation((cb) => cb(state));
+  });
+
+  it('1 paginated block with id and defaultPage 1 - shoud be 1', () => {
+    const { result } = setUp();
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  it('1 paginated block without params - shoud be 1', () => {
+    const { result } = setUp();
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  const param1 = '?page=2';
+  it(`1 paginated block with params: ${param1} - shoud be 2`, () => {
+    const { result } = setUp(param1);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  const param2 = `?${slugify(`page-${searchBlockId}`)}=2`;
+  it(`2 paginated blocks with current block in the params: ${param2} - shoud be 2`, () => {
+    const { result } = setUp(param2, 2);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  const param3 = `?${slugify(`page-${searchBlockId2}`)}=2`;
+  it(`2 paginated blocks with the other block in the params: ${param3} - shoud be 1`, () => {
+    const { result } = setUp(param3, 2);
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  const param4 = `?${slugify(`page-${searchBlockId}`)}=2&${slugify(
+    `page-${searchBlockId2}`,
+  )}=1`;
+  it(`2 paginated blocks with both blocks in the params, current 2: ${param4} - shoud be 2`, () => {
+    const { result } = setUp(param4, 2);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  const param5 = `?${slugify(`page-${searchBlockId}`)}=1&${slugify(
+    `page-${searchBlockId2}`,
+  )}=2`;
+  it(`2 paginated blocks with both blocks in the params, current 1: ${param5} - shoud be 1`, () => {
+    const { result } = setUp(param5, 2);
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  it(`2 paginated blocks with wrong page param: ${param1} - shoud be 1`, () => {
+    const { result } = setUp(param1, 2);
+    expect(result.current.currentPage).toBe(1);
+  });
+});