@plone/volto 18.0.0-alpha.10 → 18.0.0-alpha.12

package/CHANGELOG.md

@@ -17,6 +17,43 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.12 (2024-02-21)
+
+### Feature
+
+- Add accordion to metadata form. @robgietema [#5760](https://github.com/plone/volto/issues/5760)
+
+## 18.0.0-alpha.11 (2024-02-18)
+
+### Breaking
+
+- Remove the isDisabled from all fields in the left side form of the babel view, make them read only instead @sneridagh [#5762](https://github.com/plone/volto/issues/5762)
+
+### Feature
+
+- Added the `ignore` property to allow exceptions to rules that are applied to all routes. @dobri1408 [#5621](https://github.com/plone/volto/issues/5621)
+- Add global form state. @robgietema [#5721](https://github.com/plone/volto/issues/5721)
+
+### Bugfix
+
+- Fixed listing SSR rendering by sending `subrequestId` instead of `id` only within `getAsyncData`, similar to calling `getQueryStringResults` directly. @ichim-david [#5688](https://github.com/plone/volto/issues/5688)
+- Enhanced Makefile paths to address whitespace compatibility issues. @Vivek-04022001 [#5715](https://github.com/plone/volto/issues/5715)
+- Fix console logging in acceptance server Makefile commands. @davisagli [#5748](https://github.com/plone/volto/issues/5748)
+- Add extra wait calls to listing block tests to avoid sporadic failures. @ichim-david [#5753](https://github.com/plone/volto/issues/5753)
+- Add @plone/components as external library.
+  Make the Terser plugin accept ESNext features.
+  Fix inline `svg` elements in LESS files. @sneridagh [#5766](https://github.com/plone/volto/issues/5766)
+
+### Documentation
+
+- Overhaul environment variables documentation. @stevepiercy [#4581](https://github.com/plone/volto/issues/4581)
+- Reorganize `README.md`, merging content into authoritative locations. Add `awesome_bot` to check links in all READMEs. @stevepiercy [#5437](https://github.com/plone/volto/issues/5437)
+- Replace outdated diff with a link to current file. @stevepiercy [#5703](https://github.com/plone/volto/issues/5703)
+- Document when the 'links and references' view was added. @davisagli [#5756](https://github.com/plone/volto/issues/5756)
+- Update links to Redux and React developer extensions for Chrome. @stevepiercy [#5757](https://github.com/plone/volto/issues/5757)
+- Chromewebstore recently changed its URL and has "too many redirects", so it needs to be excluded from linkcheck. @stevepiercy [#5761](https://github.com/plone/volto/issues/5761)
+- Add Git as a pre-requisite. @stevepiercy [#5769](https://github.com/plone/volto/issues/5769)
+
 ## 18.0.0-alpha.10 (2024-02-02)
 
 ### Feature

package/cypress/support/commands.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { getIfExists } from '../helpers';
 import { ploneAuth } from './constants';
 
@@ -39,6 +40,30 @@ Cypress.Commands.add('isInViewport', (element) => {
   });
 });
 
+// --- isInHTML ----------------------------------------------------------
+Cypress.Commands.add('isInHTML', ({ parent = 'body', content }) => {
+  cy.url().then((currentUrl) => {
+    // sometimes the cy command is called when the url is still at content/edit
+    // we want to query the html markup of the content, not the edit form
+    const url =
+      currentUrl.indexOf('/edit') !== -1
+        ? currentUrl.split('/edit')[0]
+        : currentUrl;
+    cy.request({
+      method: 'GET',
+      url: url,
+    }).then((response) => {
+      const html = Cypress.$(response.body);
+      if (content.startsWith('.') || content.startsWith('#')) {
+        return expect(html.find(parent)).to.have.descendants(content);
+      } else {
+        // check if parent contains the content text string in its HTML output
+        return expect(html.find(parent)).to.contain(content);
+      }
+    });
+  });
+});
+
 // --- AUTOLOGIN -------------------------------------------------------------
 Cypress.Commands.add('autologin', (usr, pass) => {
   let api_url, user, password;
@@ -695,7 +720,7 @@ Cypress.Commands.add('clearSlate', (selector) => {
   return cy
     .get(selector)
     .focus()
-    .click()
+    .click({ force: true }) // fix sporadic failure this element is currently animating
     .wait(1000)
     .type('{selectAll}')
     .wait(1000)
@@ -819,7 +844,6 @@ function getTextNode(el, match) {
     return walk.nextNode();
   }
 
-  const nodes = [];
   let node;
   while ((node = walk.nextNode())) {
     if (node.wholeText.includes(match)) {
@@ -848,7 +872,7 @@ function createHtmlPasteEvent(htmlContent) {
 
 Cypress.Commands.add('addNewBlock', (blockName, createNewSlate = false) => {
   let block;
-  block = cy.getSlate(createNewSlate).type(`/${blockName}{enter}`);
+  block = cy.getSlate(createNewSlate).click().type(`/${blockName}{enter}`);
   return block;
 });
 
@@ -902,9 +926,33 @@ Cypress.Commands.add('configureListingWith', (contentType) => {
     '.querystring-widget .fields:first-of-type > .field .react-select__menu .react-select__option',
   )
     .contains(contentType)
+
     .click();
 });
 
+Cypress.Commands.add(
+  'addLocationQuerystring',
+  (option = 'Relative path', value) => {
+    cy.get('.block-editor-listing').click();
+    cy.get('.querystring-widget .fields').contains('Add criteria').click();
+    cy.get('.querystring-widget .react-select__menu .react-select__option')
+      .contains('Location')
+      .click();
+
+    cy.get('.querystring-widget .fields').contains('Absolute path').click();
+    cy.get(
+      '.querystring-widget .fields .react-select__menu .react-select__option',
+    )
+      .contains(option)
+      .click();
+    if (value) {
+      cy.get('.querystring-widget .fields .input')
+        .click()
+        .type(`${value}{enter}`);
+    }
+  },
+);
+
 Cypress.Commands.add('queryCounter', (path, steps, number = 1) => {
   cy.intercept(path, cy.spy().as('counterName'));
   steps.forEach((element) => {

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.0.0-alpha.10",
+  "version": "18.0.0-alpha.12",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -312,7 +312,7 @@
     "webpack-node-externals": "3.0.0",
     "xmlrpc": "1.3.2",
     "yarnhook": "0.5.1",
-    "@plone/registry": "1.2.2",
+    "@plone/registry": "1.3.1",
     "@plone/scripts": "3.3.2",
     "@plone/volto-slate": "18.0.0-alpha.6"
   },
@@ -362,8 +362,8 @@
     "use-trace-update": "1.3.2",
     "wait-on": "6.0.0",
     "why": "0.6.2",
-    "@plone/volto-coresandbox": "1.0.0",
-    "@plone/types": "1.0.0-alpha.3"
+    "@plone/types": "1.0.0-alpha.3",
+    "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {
     "node": "20.9.0"

package/razzle.config.js

@@ -166,6 +166,19 @@ const defaultModify = ({
       }),
     );
 
+    // Make the TerserPlugin accept ESNext features, since we are in 2024
+    // If this is not true, libraries already compiled for using only ESNext features
+    // won't work (eg. using a chaining operator)
+    config.optimization = Object.assign({}, config.optimization, {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            parse: { ecma: 'ESNext' },
+          },
+        }),
+      ],
+    });
+
     // Razzle sets some of its basic env vars in the default config injecting them (for
     // the client use, mainly) in a `DefinePlugin` instance. However, this also ends in
     // the server build, removing the ability of the server node process to read from
@@ -328,6 +341,7 @@ const defaultModify = ({
               // Add support for addons to include externals (ie. node_modules npm published packages)
               ...addonsAsExternals,
               /^@plone\/volto/,
+              /^@plone\/components/,
             ].filter(Boolean),
           }),
         ]

package/src/actions/form/form.js

@@ -0,0 +1,19 @@
+/**
+ * Form actions.
+ * @module actions/form/form
+ */
+
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Set form data function.
+ * @function setFormData
+ * @param {Object} data New form data.
+ * @returns {Object} Set sidebar action.
+ */
+export function setFormData(data) {
+  return {
+    type: SET_FORM_DATA,
+    data,
+  };
+}

package/src/actions/form/form.test.js

@@ -0,0 +1,14 @@
+import { setFormData } from './form';
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
+
+describe('Form action', () => {
+  describe('setFormData', () => {
+    it('should create an action to set the form data', () => {
+      const data = { foo: 'bar' };
+      const action = setFormData(data);
+
+      expect(action.type).toEqual(SET_FORM_DATA);
+      expect(action.data).toEqual(data);
+    });
+  });
+});

package/src/actions/index.js

@@ -150,7 +150,13 @@ export {
 } from '@plone/volto/actions/workflow/workflow';
 export { getQuerystring } from '@plone/volto/actions/querystring/querystring';
 export { getQueryStringResults } from '@plone/volto/actions/querystringsearch/querystringsearch';
-export { setSidebarTab } from '@plone/volto/actions/sidebar/sidebar';
+export {
+  setMetadataFieldsets,
+  setMetadataFocus,
+  resetMetadataFocus,
+  setSidebarTab,
+} from '@plone/volto/actions/sidebar/sidebar';
+export { setFormData } from '@plone/volto/actions/form/form';
 export {
   deleteLinkTranslation,
   getTranslationLocator,

package/src/actions/sidebar/sidebar.js

@@ -3,7 +3,51 @@
  * @module actions/sidebar/sidebar
  */
 
-import { SET_SIDEBAR_TAB } from '@plone/volto/constants/ActionTypes';
+import {
+  SET_METADATA_FIELDSETS,
+  SET_METADATA_FOCUS,
+  RESET_METADATA_FOCUS,
+  SET_SIDEBAR_TAB,
+} from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Set metadata fieldsets function.
+ * @function setMetadataFieldsets
+ * @param {Array} fieldsets New fieldsets.
+ * @returns {Object} Set metadata fieldsets action.
+ */
+export function setMetadataFieldsets(fieldsets) {
+  return {
+    type: SET_METADATA_FIELDSETS,
+    fieldsets,
+  };
+}
+
+/**
+ * Set metadata focus function.
+ * @function setMetadataFocus
+ * @param {String} fieldset Fieldset of the field.
+ * @param {String} field Field to set focus too.
+ * @returns {Object} Set metadata focus action.
+ */
+export function setMetadataFocus(fieldset, field) {
+  return {
+    type: SET_METADATA_FOCUS,
+    fieldset,
+    field,
+  };
+}
+
+/**
+ * Resets metadata focus function.
+ * @function resetMetadataFocus
+ * @returns {Object} Set metadata focus action.
+ */
+export function resetMetadataFocus() {
+  return {
+    type: RESET_METADATA_FOCUS,
+  };
+}
 
 /**
  * Set sidebar tab function.

package/src/actions/sidebar/sidebar.test.js

@@ -1,7 +1,47 @@
-import { setSidebarTab } from './sidebar';
-import { SET_SIDEBAR_TAB } from '@plone/volto/constants/ActionTypes';
+import {
+  setMetadataFieldsets,
+  setMetadataFocus,
+  resetMetadataFocus,
+  setSidebarTab,
+} from './sidebar';
+import {
+  SET_METADATA_FIELDSETS,
+  SET_METADATA_FOCUS,
+  RESET_METADATA_FOCUS,
+  SET_SIDEBAR_TAB,
+} from '@plone/volto/constants/ActionTypes';
 
 describe('Sidebar action', () => {
+  describe('setMetadataFieldsets', () => {
+    it('should create an action to set the metadata fieldsets', () => {
+      const fieldsets = ['default'];
+      const action = setMetadataFieldsets(fieldsets);
+
+      expect(action.type).toEqual(SET_METADATA_FIELDSETS);
+      expect(action.fieldsets).toEqual(fieldsets);
+    });
+  });
+
+  describe('setMetadataFocus', () => {
+    it('should create an action to set the metadata focus', () => {
+      const fieldset = ['default'];
+      const field = ['title'];
+      const action = setMetadataFocus(fieldset, field);
+
+      expect(action.type).toEqual(SET_METADATA_FOCUS);
+      expect(action.fieldset).toEqual(fieldset);
+      expect(action.field).toEqual(field);
+    });
+  });
+
+  describe('resetMetadataFocus', () => {
+    it('should create an action to reset the metadata focus', () => {
+      const action = resetMetadataFocus();
+
+      expect(action.type).toEqual(RESET_METADATA_FOCUS);
+    });
+  });
+
   describe('setSidebarTab', () => {
     it('should create an action to set the sidebar', () => {
       const index = 1;

package/src/components/manage/Add/Add.jsx

@@ -364,6 +364,7 @@ class Add extends Component {
             onSelectForm={() => {
               this.setState({ formSelected: 'addForm' });
             }}
+            global
           />
           {this.state.isClient && (
             <Portal node={document.getElementById('toolbar')}>

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -1,15 +1,29 @@
 import { getQueryStringResults } from '@plone/volto/actions';
 import { resolveBlockExtensions } from '@plone/volto/helpers';
+import qs from 'query-string';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+const getCurrentPage = (location, id) => {
+  const pageQueryParam = qs.parse(location.search);
+  switch (Object.keys(pageQueryParam).length) {
+    case 0:
+      return 1;
+    case 1:
+      // when there is only one query param, it could be the simple page number or the sluggified block id
+      return pageQueryParam['page'] || pageQueryParam[slugify(`page-${id}`)];
+    default:
+      return pageQueryParam[slugify(`page-${id}`)];
+  }
+};
+
+export default function getListingBlockAsyncData(props) {
+  const { data, path, location, id, dispatch, blocksConfig, content } = props;
 
-export default function getListingBlockAsyncData({
-  dispatch,
-  id,
-  data,
-  path,
-  blocksConfig,
-}) {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
+  const subrequestID = content?.UID ? `${content?.UID}-${id}` : id;
+  const currentPage = getCurrentPage(location, id);
+
   return [
     dispatch(
       getQueryStringResults(
@@ -20,7 +34,8 @@ export default function getListingBlockAsyncData({
             ? { fullobjects: 1 }
             : { metadata_fields: '_all' }),
         },
-        id,
+        subrequestID,
+        currentPage,
       ),
     ),
   ];

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

@@ -307,6 +307,7 @@ class Edit extends Component {
         onSelectForm={() => {
           this.setState({ formSelected: 'editForm' });
         }}
+        global
       />
     );