@plone/volto 17.0.0-alpha.19 → 17.0.0-alpha.20

package/CHANGELOG.md

@@ -8,6 +8,17 @@
 
 <!-- towncrier release notes start -->
 
+## 17.0.0-alpha.20 (2023-07-18)
+
+### Feature
+
+- Use all the apiExpanders in use, so we perform a single request for getting all the required data. @sneridagh [#4946](https://github.com/plone/volto/issues/4946)
+
+### Bugfix
+
+- Fix the condition deciding on listing pagination format so it takes into account container blocks as well @sneridagh [#4978](https://github.com/plone/volto/issues/4978)
+
+
 ## 17.0.0-alpha.19 (2023-07-18)
 
 ### Feature

package/cypress/support/commands.js

@@ -688,10 +688,7 @@ Cypress.Commands.add(
 Cypress.Commands.add('toolbarSave', () => {
   // Save
   cy.get('#toolbar-save', { timeout: 10000 }).click();
-  cy.waitForResourceToLoad('@navigation');
-  cy.waitForResourceToLoad('@breadcrumbs');
-  cy.waitForResourceToLoad('@actions');
-  cy.waitForResourceToLoad('@types');
+  cy.waitForResourceToLoad('');
 });
 
 Cypress.Commands.add('clearSlate', (selector) => {

package/cypress/support/volto-slate.js

@@ -1,4 +1,5 @@
 export const slateBeforeEach = (contentType = 'Document') => {
+  cy.intercept('GET', `/**/*?expand*`).as('content');
   cy.autologin();
   cy.createContent({
     contentType: contentType,
@@ -6,12 +7,10 @@ export const slateBeforeEach = (contentType = 'Document') => {
     contentTitle: 'My Page',
   });
   cy.visit('/my-page');
-  cy.waitForResourceToLoad('@navigation');
-  cy.waitForResourceToLoad('@breadcrumbs');
-  cy.waitForResourceToLoad('@actions');
-  cy.waitForResourceToLoad('@types');
-  cy.waitForResourceToLoad('my-page');
+  cy.wait('@content');
+
   cy.navigate('/my-page/edit');
+  cy.wait('@content');
 };
 
 export const getSelectedSlateEditor = () => {

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.0.0-alpha.19",
+  "version": "17.0.0-alpha.20",
   "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": "17.0.0-alpha.19",
+  "version": "17.0.0-alpha.20",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/config/Widgets.jsx

@@ -148,6 +148,7 @@ export const widgetMapping = {
       title: TitleViewWidget,
       url: UrlViewWidget,
       internal_url: InternalUrlWidget,
+      object: () => '', // TODO: Not implemented yet: Object View widget
     },
     vocabulary: {},
     choices: SelectViewWidget,

package/src/config/index.js

@@ -77,6 +77,8 @@ let config = {
     okRoute: '/ok',
     apiPath,
     apiExpanders: [
+      // Added here for documentation purposes, addded at the end because it
+      // depends on a value of this object.
       // Add the following expanders for only issuing a single request.
       // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
       // {
@@ -185,6 +187,7 @@ let config = {
     querystringSearchGet: false,
     blockSettingsTabFieldsetsInitialStateOpen: true,
     excludeLinksAndReferencesMenuItem: false,
+    containerBlockTypes: ['gridBlock'],
   },
   experimental: {
     addBlockButton: {
@@ -215,6 +218,22 @@ let config = {
   components,
 };
 
+// The apiExpanders depends on a config of the object, so it's done here
+config.settings.apiExpanders = [
+  ...config.settings.apiExpanders,
+  {
+    match: '',
+    GET_CONTENT: ['breadcrumbs', 'actions', 'types'],
+  },
+  {
+    match: '',
+    GET_CONTENT: ['navigation'],
+    querystring: (config) => ({
+      'expand.navigation.depth': config.settings.navDepth,
+    }),
+  },
+];
+
 ConfigRegistry.settings = config.settings;
 ConfigRegistry.experimental = config.experimental;
 ConfigRegistry.blocks = config.blocks;

package/src/helpers/Blocks/Blocks.js

@@ -550,3 +550,25 @@ export const getPreviousNextBlock = ({ content, block }) => {
 
   return [previousBlock, nextBlock];
 };
+
+/**
+ * Given a `block` object and a list of block types, return a list of block ids matching the types
+ *
+ * @function findBlocks
+ * @param {Object} types A list with the list of types to be matched
+ * @return {Array} An array of block ids
+ */
+export function findBlocks(blocks, types, result = []) {
+  const containerBlockTypes = config.settings.containerBlockTypes;
+
+  Object.keys(blocks).forEach((blockId) => {
+    const block = blocks[blockId];
+    if (types.includes(block['@type'])) {
+      result.push(blockId);
+    } else if (containerBlockTypes.includes(block['@type']) || block.blocks) {
+      findBlocks(block.blocks, types, result);
+    }
+  });
+
+  return result;
+}

package/src/helpers/Blocks/Blocks.test.js

@@ -20,6 +20,7 @@ import {
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
   blocksFormGenerator,
+  findBlocks,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -1284,7 +1285,7 @@ describe('Blocks', () => {
         blocks_layout: { items: [] },
       });
     });
-    it.only('Returns a filled blocks/blocks_layout pair with type block', () => {
+    it('Returns a filled blocks/blocks_layout pair with type block', () => {
       const result = blocksFormGenerator(2, 'teaser');
       expect(Object.keys(result.blocks).length).toEqual(2);
       expect(result.blocks_layout.items.length).toEqual(2);
@@ -1297,3 +1298,60 @@ describe('Blocks', () => {
     });
   });
 });
+
+describe('findBlocks', () => {
+  it('Get all blocks in the first level (main block container)', () => {
+    const blocks = {
+      '1': { title: 'title', '@type': 'title' },
+      '2': { title: 'an image', '@type': 'image' },
+      '3': { title: 'description', '@type': 'description' },
+      '4': { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3']);
+  });
+
+  it('Get all blocks in the first level (main block container) given a list', () => {
+    const blocks = {
+      '1': { title: 'title', '@type': 'title' },
+      '2': { title: 'an image', '@type': 'image' },
+      '3': { title: 'description', '@type': 'description' },
+      '4': { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4']);
+  });
+
+  it('Get all blocks in the first level (main block container) given a list', () => {
+    const blocks = {
+      '1': { title: 'title', '@type': 'title' },
+      '2': { title: 'an image', '@type': 'image' },
+      '3': { title: 'description', '@type': 'description' },
+      '4': { title: 'a text', '@type': 'slate' },
+      '5': { title: 'a text', '@type': 'slate' },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4', '5']);
+  });
+
+  it('Get all blocks, including containers, given a list', () => {
+    const blocks = {
+      '1': { title: 'title', '@type': 'title' },
+      '2': { title: 'an image', '@type': 'image' },
+      '3': { title: 'description', '@type': 'description' },
+      '4': { title: 'a text', '@type': 'slate' },
+      '5': {
+        title: 'a container',
+        '@type': 'gridBlock',
+        blocks: {
+          '6': { title: 'title', '@type': 'title' },
+          '7': { title: 'an image', '@type': 'image' },
+          '8': { title: 'description', '@type': 'description' },
+          '9': { title: 'a text', '@type': 'slate' },
+        },
+      },
+    };
+    const types = ['description', 'slate'];
+    expect(findBlocks(blocks, types)).toStrictEqual(['3', '4', '8', '9']);
+  });
+});

package/src/helpers/Utils/usePagination.js

@@ -2,7 +2,7 @@ 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';
+import { findBlocks, slugify } from '@plone/volto/helpers';
 
 /**
  * @function useCreatePageQueryStringKey
@@ -12,13 +12,8 @@ import { slugify } from '@plone/volto/helpers/Utils/Utils';
 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;
+    findBlocks(blocks, blockTypesWithPagination).length > 1;
 
   return hasMultiplePaginations ? slugify(`page-${id}`) : 'page';
 };

package/src/helpers/index.js

@@ -58,6 +58,7 @@ export {
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
+  findBlocks,
 } from '@plone/volto/helpers/Blocks/Blocks';
 export { default as BodyClass } from '@plone/volto/helpers/BodyClass/BodyClass';
 export { default as ScrollToTop } from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
@@ -93,6 +94,7 @@ export {
   arrayRange,
   reorderArray,
   isInteractiveElement,
+  slugify,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
 export {

package/src/middleware/api.js

@@ -67,7 +67,15 @@ export function addExpandersToPath(path, type, isAnonymous) {
 
   const querystringFromConfig = apiExpanders
     .filter((expand) => matchPath(url, expand.match) && expand[type])
-    .reduce((acc, expand) => ({ ...acc, ...expand?.['querystring'] }), {});
+    .reduce((acc, expand) => {
+      let querystring = expand?.['querystring'];
+      // The querystring accepts being a function to be able to take other
+      // config parameters
+      if (typeof querystring === 'function') {
+        querystring = querystring(config);
+      }
+      return { ...acc, ...querystring };
+    }, {});
 
   const queryMerge = { ...query, ...querystringFromConfig };
 
@@ -122,7 +130,13 @@ const apiMiddlewareFactory = (api) => ({ dispatch, getState }) => (next) => (
 ) => {
   const { settings } = config;
 
-  const isAnonymous = !getState().userSession.token;
+  const token = getState().userSession.token;
+  let isAnonymous = true;
+  if (token) {
+    const tokenExpiration = jwtDecode(token).exp;
+    const currentTime = new Date().getTime() / 1000;
+    isAnonymous = !token || currentTime > tokenExpiration;
+  }
 
   if (typeof action === 'function') {
     return action(dispatch, getState);

package/src/reducers/actions/actions.js

@@ -57,11 +57,13 @@ export default function actions(state = initialState, action = {}) {
       }
       return state;
     case `${LIST_ACTIONS}_SUCCESS`:
-      hasExpander = hasApiExpander(
-        'actions',
-        getBaseUrl(flattenToAppURL(action.result['@id'])),
-      );
-      if (!hasExpander) {
+      // Even if the expander is set or not, if the LIST_ACTIONS is
+      // called, we want it to store the data if the actions data is
+      // not set in the expander data (['@components']) but in the "normal"
+      // action result (we look for the object property returned by the endpoint)
+      // Unfortunately, this endpoint returns all the actions in a plain object
+      // with no structure :(
+      if (action.result.object) {
         return {
           ...state,
           error: null,

package/src/reducers/actions/actions.test.js

@@ -207,4 +207,74 @@ describe('Actions reducer - (ACTIONS)GET_CONTENT', () => {
       loading: false,
     });
   });
+
+  it('should handle (ACTIONS)LIST_ACTIONS (standalone with apiExpander enabled)', () => {
+    expect(
+      actions(undefined, {
+        type: `${LIST_ACTIONS}_SUCCESS`,
+        result: {
+          object: [],
+          object_buttons: [],
+          site_actions: [],
+          user: [
+            {
+              icon: '',
+              id: 'preferences',
+              title: 'Preferences',
+            },
+            {
+              icon: '',
+              id: 'dashboard',
+              title: 'Dashboard',
+            },
+            {
+              icon: '',
+              id: 'plone_setup',
+              title: 'Site Setup',
+            },
+            {
+              icon: '',
+              id: 'logout',
+              title: 'Log out',
+            },
+          ],
+          document_actions: [],
+          portal_tabs: [],
+        },
+      }),
+    ).toEqual({
+      error: null,
+      actions: {
+        object: [],
+        object_buttons: [],
+        site_actions: [],
+        user: [
+          {
+            icon: '',
+            id: 'preferences',
+            title: 'Preferences',
+          },
+          {
+            icon: '',
+            id: 'dashboard',
+            title: 'Dashboard',
+          },
+          {
+            icon: '',
+            id: 'plone_setup',
+            title: 'Site Setup',
+          },
+          {
+            icon: '',
+            id: 'logout',
+            title: 'Log out',
+          },
+        ],
+        document_actions: [],
+        portal_tabs: [],
+      },
+      loaded: true,
+      loading: false,
+    });
+  });
 });

package/test-setup-config.js

@@ -83,6 +83,7 @@ config.set('settings', {
   styleClassNameConverters,
   styleClassNameExtenders,
   blockSettingsTabFieldsetsInitialStateOpen: true,
+  containerBlockTypes: [],
 });
 config.set('blocks', {
   blocksConfig: {