@plone/volto 16.8.1 → 16.9.0

package/.changelog.draft

@@ -1,6 +1,21 @@
-## 16.8.1 (2023-01-18)
+## 16.9.0 (2023-01-27)
+
+### Feature
+
+- Enable scrolling to ids via hashes in internal links @jackahl [#4165](https://github.com/plone/volto/issues/4165)
+- Read listing block schema from configuration registry @pnicolli [#4231](https://github.com/plone/volto/issues/4231)
+- Add displayName when registering a component @sneridagh [#4282](https://github.com/plone/volto/issues/4282)
+- Support for all default expanders (breadcrumbs, navigation, actions, types) in actions/reducers. Conditional loading of actions if the expanders are present. @sneridagh [#4285](https://github.com/plone/volto/issues/4285)
+- Add `addNewBlock` Cypress support command @sneridagh [#4313](https://github.com/plone/volto/issues/4313)
 
 ### Bugfix
 
-- Fix StyleWrapper extenders, the classNames were not being re-fed into the pipe @sneridagh [#4275](https://github.com/plone/volto/issues/4275)
+- Fixed maxLength validation for string type fields @pnicolli [#4189](https://github.com/plone/volto/issues/4189)
+- bugfix : add pathname as required proptype in Blocks/Edit @akshatgarg12 [#4194](https://github.com/plone/volto/issues/4194)
+- (Fix) Select Widgets scrolls the page when the options are not visible @dobri1408 [#4223](https://github.com/plone/volto/issues/4223)
+- Updated volto-slate to check for slateSettings before falling back to config @danalvrz [#4311](https://github.com/plone/volto/issues/4311)
+
+### Internal
+
+- Updated 4 Dependencies @SaiRev0 [#4104](https://github.com/plone/volto/issues/4104)
 

package/CHANGELOG.md

@@ -8,11 +8,34 @@
 
 <!-- towncrier release notes start -->
 
+## 16.9.0 (2023-01-27)
+
+### Feature
+
+- Enable scrolling to ids via hashes in internal links @jackahl [#4165](https://github.com/plone/volto/issues/4165)
+- Read listing block schema from configuration registry @pnicolli [#4231](https://github.com/plone/volto/issues/4231)
+- Add displayName when registering a component @sneridagh [#4282](https://github.com/plone/volto/issues/4282)
+- Support for all default expanders (breadcrumbs, navigation, actions, types) in actions/reducers. Conditional loading of actions if the expanders are present. @sneridagh [#4285](https://github.com/plone/volto/issues/4285)
+- Add `addNewBlock` Cypress support command @sneridagh [#4313](https://github.com/plone/volto/issues/4313)
+
+### Bugfix
+
+- Fixed maxLength validation for string type fields @pnicolli [#4189](https://github.com/plone/volto/issues/4189)
+- bugfix : add pathname as required proptype in Blocks/Edit @akshatgarg12 [#4194](https://github.com/plone/volto/issues/4194)
+- (Fix) Select Widgets scrolls the page when the options are not visible @dobri1408 [#4223](https://github.com/plone/volto/issues/4223)
+- Updated volto-slate to check for slateSettings before falling back to config @danalvrz [#4311](https://github.com/plone/volto/issues/4311)
+
+### Internal
+
+- Updated 4 Dependencies @SaiRev0 [#4104](https://github.com/plone/volto/issues/4104)
+
+
 ## 16.8.1 (2023-01-18)
 
 ### Bugfix
 
 - Fix StyleWrapper extenders, the classNames were not being re-fed into the pipe @sneridagh [#4275](https://github.com/plone/volto/issues/4275)
+- Fix bug where label of search facet wasn't translated when the content object is being translated @robgietema
 
 
 ## 16.8.0 (2023-01-18)

package/cypress/support/commands.js

@@ -806,6 +806,12 @@ function createHtmlPasteEvent(htmlContent) {
   );
 }
 
+Cypress.Commands.add('addNewBlock', (blockName, createNewSlate = false) => {
+  let block;
+  block = cy.getSlate(createNewSlate).type(`/${blockName}{enter}`);
+  return block;
+});
+
 Cypress.Commands.add('navigate', (route = '') => {
   return cy.window().its('appHistory').invoke('push', route);
 });

package/news/4104.internal

@@ -0,0 +1 @@
+Updated 4 Dependencies @SaiRev0

package/news/4165.feature

@@ -0,0 +1 @@
+Enable scrolling to ids via hashes in internal links @jackahl

package/news/4189.bugfix

@@ -0,0 +1 @@
+Fixed maxLength validation for string type fields @pnicolli

package/news/4194.bugfix

@@ -0,0 +1 @@
+bugfix : add pathname as required proptype in Blocks/Edit @akshatgarg12

package/news/4223.bugfix

@@ -0,0 +1 @@
+(Fix) Select Widgets scrolls the page when the options are not visible @dobri1408

package/news/4231.feature

@@ -0,0 +1 @@
+Read listing block schema from configuration registry @pnicolli

package/news/4282.feature

@@ -0,0 +1 @@
+Add displayName when registering a component @sneridagh

package/news/4285.feature

@@ -0,0 +1 @@
+Support for all default expanders (breadcrumbs, navigation, actions, types) in actions/reducers. Conditional loading of actions if the expanders are present. @sneridagh

package/news/4311.bugfix

@@ -0,0 +1 @@
+Updated volto-slate to check for slateSettings before falling back to config @danalvrz

package/news/4313.feature

@@ -0,0 +1 @@
+Add `addNewBlock` Cypress support command @sneridagh

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.8.1",
+  "version": "16.9.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -281,7 +281,7 @@
     "eslint-plugin-prettier": "3.1.3",
     "eslint-plugin-react": "7.20.0",
     "eslint-plugin-react-hooks": "4.0.2",
-    "express": "4.17.1",
+    "express": "4.17.3",
     "filesize": "6",
     "glob": "7.1.6",
     "hamburgers": "1.1.3",
@@ -349,6 +349,7 @@
     "react-router": "5.2.0",
     "react-router-config": "5.1.1",
     "react-router-dom": "5.2.0",
+    "react-router-hash-link": "2.4.3",
     "react-select": "4.3.1",
     "react-select-async-paginate": "0.5.3",
     "react-share": "2.3.1",

package/packages/volto-slate/package.json

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

package/packages/volto-slate/src/blocks/Text/DetachedTextBlockEditor.jsx

@@ -51,6 +51,7 @@ export const DetachedTextBlockEditor = (props) => {
         value={value}
         block={block /* is this needed? */}
         debug={DEBUG}
+        slateSettings={props.slateSettings}
         onFocus={() => {
           if (!selected) {
             onSelectBlock(block);

package/packages/volto-slate/src/editor/SlateEditor.jsx

@@ -262,7 +262,11 @@ class SlateEditor extends Component {
           >
             {selected ? (
               <>
-                <InlineToolbar editor={editor} className={className} />
+                <InlineToolbar
+                  editor={editor}
+                  className={className}
+                  slateSettings={this.props.slateSettings}
+                />
                 {Object.keys(slateSettings.elementToolbarButtons).map(
                   (t, i) => {
                     return (

package/packages/volto-slate/src/editor/ui/InlineToolbar.jsx

@@ -17,7 +17,8 @@ const InlineToolbar = (props) => {
     setShowExpandedToolbar,
   } = props;
 
-  const { slate } = config.settings;
+  const slate = props.slateSettings || config.settings.slate;
+
   const [showMainToolbar, setShowMainToolbar] = React.useState(
     !!(editor.selection && hasRangeSelection(editor)),
   );
@@ -58,6 +59,7 @@ const InlineToolbar = (props) => {
         showExpandedToolbar={showExpandedToolbar}
         setShowExpandedToolbar={setShowExpandedToolbar}
         show={showMainToolbar}
+        slateSettings={slate}
       />
       <SlateContextToolbar
         editor={editor}

package/packages/volto-slate/src/editor/ui/SlateToolbar.jsx

@@ -26,7 +26,9 @@ const SlateToolbar = (props) => {
     enableExpando = false,
     show,
   } = props;
-  const { slate } = config.settings;
+
+  const slate = props.slateSettings || config.settings.slate;
+
   const { toolbarButtons, expandedToolbarButtons, buttons } = slate;
 
   function renderButton(name, index) {

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

@@ -52,6 +52,7 @@ export class Edit extends Component {
     onMoveBlock: PropTypes.func.isRequired,
     onDeleteBlock: PropTypes.func.isRequired,
     editable: PropTypes.bool,
+    pathname: PropTypes.string.isRequired,
   };
 
   /**

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

@@ -2,12 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
-import { schemaListing } from './schema';
+import config from '@plone/volto/registry';
 
 const ListingData = (props) => {
   const { data, block, onChangeBlock } = props;
   const intl = useIntl();
-  const schema = schemaListing({ ...props, intl });
+  const schema = config.blocks.blocksConfig.listing.blockSchema({
+    ...props,
+    intl,
+  });
 
   return (
     <BlockDataForm

package/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx

@@ -195,7 +195,7 @@ class SelectWidget extends Component {
           styles={customSelectStyles}
           theme={selectTheme}
           components={{ DropdownIndicator, Option }}
-          value={value}
+          value={{ value: value?.value, label: indexes[value?.value]?.title }}
           onChange={(data) => {
             let dataValue = [];
             if (Array.isArray(data)) {

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { asyncConnect } from '@plone/volto/helpers';
+import { asyncConnect, hasApiExpander } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Button, Grid, Menu } from 'semantic-ui-react';
 import { Portal } from 'react-portal';
@@ -475,7 +475,10 @@ export default compose(
     {
       key: 'actions',
       promise: async ({ location, store: { dispatch } }) => {
-        await dispatch(listActions(getBaseUrl(location.pathname)));
+        // Do not trigger the actions action if the expander is present
+        if (!hasApiExpander('actions', getBaseUrl(location.pathname))) {
+          return await dispatch(listActions(getBaseUrl(location.pathname)));
+        }
       },
     },
     {

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -29,7 +29,12 @@ import {
   unlockContent,
 } from '@plone/volto/actions';
 import { Icon } from '@plone/volto/components';
-import { BodyClass, getBaseUrl, getCookieOptions } from '@plone/volto/helpers';
+import {
+  BodyClass,
+  getBaseUrl,
+  getCookieOptions,
+  hasApiExpander,
+} from '@plone/volto/helpers';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 
 import penSVG from '@plone/volto/icons/pen.svg';
@@ -197,8 +202,14 @@ class Toolbar extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    this.props.listActions(getBaseUrl(this.props.pathname));
-    this.props.getTypes(getBaseUrl(this.props.pathname));
+    // Do not trigger the actions action if the expander is present
+    if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
+      this.props.listActions(getBaseUrl(this.props.pathname));
+    }
+    // Do not trigger the types action if the expander is present
+    if (!hasApiExpander('types', getBaseUrl(this.props.pathname))) {
+      this.props.getTypes(getBaseUrl(this.props.pathname));
+    }
     this.props.setExpandedToolbar(this.state.expanded);
     document.addEventListener('mousedown', this.handleClickOutside, false);
   }
@@ -211,8 +222,14 @@ class Toolbar extends Component {
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.pathname !== this.props.pathname) {
-      this.props.listActions(getBaseUrl(nextProps.pathname));
-      this.props.getTypes(getBaseUrl(nextProps.pathname));
+      // Do not trigger the actions action if the expander is present
+      if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
+        this.props.listActions(getBaseUrl(nextProps.pathname));
+      }
+      // Do not trigger the types action if the expander is present
+      if (!hasApiExpander('types', getBaseUrl(nextProps.pathname))) {
+        this.props.getTypes(getBaseUrl(nextProps.pathname));
+      }
     }
 
     // Unlock

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { HashLink as Link } from 'react-router-hash-link';
 import { useSelector } from 'react-redux';
 import {
   flattenToAppURL,
@@ -78,13 +78,13 @@ const UniversalLink = ({
   const checkedURL = URLUtils.checkAndNormalizeUrl(url);
 
   url = checkedURL.url;
-
   let tag = (
     <Link
       to={flattenToAppURL(url)}
       target={openLinkInNewTab ?? false ? '_blank' : null}
       title={title}
       className={className}
+      smooth={config.settings.hashLinkSmoothScroll}
       {...props}
     >
       {children}

package/src/components/manage/Widgets/ArrayWidget.jsx

@@ -307,6 +307,7 @@ class ArrayWidget extends Component {
           // react-sortable-hoc props:
           axis="xy"
           onSortEnd={this.onSortEnd}
+          menuShouldScrollIntoView={false}
           distance={4}
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}

package/src/components/manage/Widgets/SelectWidget.jsx

@@ -210,6 +210,7 @@ class SelectWidget extends Component {
           id={`field-${id}`}
           key={choices}
           name={id}
+          menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}
           className="react-select-container"

package/src/components/manage/Widgets/TokenWidget.jsx

@@ -174,6 +174,7 @@ class TokenWidget extends Component {
         <CreatableSelect
           id={`field-${this.props.id}`}
           key={this.props.id}
+          menuShouldScrollIntoView={false}
           isDisabled={this.props.isDisabled}
           className="react-select-container"
           classNamePrefix="react-select"

package/src/components/theme/App/App.jsx

@@ -32,7 +32,13 @@ import {
   AppExtras,
   SkipLinks,
 } from '@plone/volto/components';
-import { BodyClass, getBaseUrl, getView, isCmsUi } from '@plone/volto/helpers';
+import {
+  BodyClass,
+  getBaseUrl,
+  getView,
+  hasApiExpander,
+  isCmsUi,
+} from '@plone/volto/helpers';
 import {
   getBreadcrumbs,
   getContent,
@@ -257,8 +263,15 @@ export default compose(
   asyncConnect([
     {
       key: 'breadcrumbs',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ && dispatch(getBreadcrumbs(getBaseUrl(location.pathname))),
+      promise: ({ location, store: { dispatch } }) => {
+        // Do not trigger the breadcrumbs action if the expander is present
+        if (
+          __SERVER__ &&
+          !hasApiExpander('breadcrumbs', getBaseUrl(location.pathname))
+        ) {
+          return dispatch(getBreadcrumbs(getBaseUrl(location.pathname)));
+        }
+      },
     },
     {
       key: 'content',
@@ -267,19 +280,32 @@ export default compose(
     },
     {
       key: 'navigation',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ &&
-        dispatch(
-          getNavigation(
-            getBaseUrl(location.pathname),
-            config.settings.navDepth,
-          ),
-        ),
+      promise: ({ location, store: { dispatch } }) => {
+        // Do not trigger the navigation action if the expander is present
+        if (
+          __SERVER__ &&
+          !hasApiExpander('navigation', getBaseUrl(location.pathname))
+        ) {
+          return dispatch(
+            getNavigation(
+              getBaseUrl(location.pathname),
+              config.settings.navDepth,
+            ),
+          );
+        }
+      },
     },
     {
       key: 'types',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))),
+      promise: ({ location, store: { dispatch } }) => {
+        // Do not trigger the types action if the expander is present
+        if (
+          __SERVER__ &&
+          !hasApiExpander('types', getBaseUrl(location.pathname))
+        ) {
+          return dispatch(getTypes(getBaseUrl(location.pathname)));
+        }
+      },
     },
     {
       key: 'workflow',

package/src/components/theme/View/View.jsx

@@ -24,6 +24,7 @@ import {
   getBaseUrl,
   flattenToAppURL,
   getLayoutFieldname,
+  hasApiExpander,
 } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
@@ -118,7 +119,10 @@ class View extends Component {
   };
 
   componentDidMount() {
-    this.props.listActions(getBaseUrl(this.props.pathname));
+    // Do not trigger the actions action if the expander is present
+    if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
+      this.props.listActions(getBaseUrl(this.props.pathname));
+    }
     this.props.getContent(
       getBaseUrl(this.props.pathname),
       this.props.versionId,
@@ -134,7 +138,10 @@ class View extends Component {
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.pathname !== this.props.pathname) {
-      this.props.listActions(getBaseUrl(nextProps.pathname));
+      // Do not trigger the actions action if the expander is present
+      if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
+        this.props.listActions(getBaseUrl(nextProps.pathname));
+      }
       this.props.getContent(
         getBaseUrl(nextProps.pathname),
         this.props.versionId,

package/src/config/index.js

@@ -75,11 +75,18 @@ let config = {
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
     apiPath,
-    apiExpanders: [],
+    apiExpanders: [
+      // Add the following expanders for only issuing a single request.
+      // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
+      // {
+      //   match: '',
+      //   GET_CONTENT: ['breadcrumbs', 'navigation', 'actions', 'types'],
+      // },
+    ],
     // Internal proxy to bypass CORS *while developing*. NOT intended for production use.
     // In production is recommended you use a Seamless mode deployment using a web server in
     // front of both the frontend and the backend so you can bypass CORS safely.
-    // https://docs.voltocms.com/deploying/seamless-mode/
+    // https://6.docs.plone.org/volto/deploying/seamless-mode.html
     devProxyToApiPath:
       process.env.RAZZLE_DEV_PROXY_API_PATH ||
       process.env.RAZZLE_API_PATH ||
@@ -169,6 +176,7 @@ let config = {
     workflowMapping,
     errorHandlers: [], // callables for unhandled errors
     styleClassNameConverters,
+    hashLinkSmoothScroll: false,
     styleClassNameExtenders,
   },
   experimental: {

package/src/helpers/FormValidation/FormValidation.js

@@ -4,27 +4,29 @@ import { messages } from '../MessageLabels/MessageLabels';
 /**
  * Will return the intl message if invalid
  * @param {boolean} isValid
- * @param {string} maxCriterion
+ * @param {string} criterion
  * @param {string | number} valueToCompare can compare '47' < 50
  * @param {Function} intlFunc
  */
-const validationMessage = (isValid, maxCriterion, valueToCompare, intlFunc) =>
+const validationMessage = (isValid, criterion, valueToCompare, intlFunc) =>
   !isValid
-    ? intlFunc(messages[maxCriterion], {
+    ? intlFunc(messages[criterion], {
         len: valueToCompare,
       })
     : null;
+
 /**
  * Returns if based on the criterion the value is lower or equal
  * @param {string | number} value can compare '47' < 50
  * @param {string | number} valueToCompare can compare '47' < 50
- * @param {string} minCriterion
+ * @param {string} maxCriterion
  * @param {Function} intlFunc
  */
-const isMaxPropertyValid = (value, valueToCompare, minCriterion, intlFunc) => {
+const isMaxPropertyValid = (value, valueToCompare, maxCriterion, intlFunc) => {
   const isValid = valueToCompare !== undefined ? value <= valueToCompare : true;
-  return validationMessage(isValid, minCriterion, valueToCompare, intlFunc);
+  return validationMessage(isValid, maxCriterion, valueToCompare, intlFunc);
 };
+
 /**
  * Returns if based on the criterion the value is higher or equal
  * @param {string | number} value can compare '47' < 50
@@ -32,9 +34,9 @@ const isMaxPropertyValid = (value, valueToCompare, minCriterion, intlFunc) => {
  * @param {string} minCriterion
  * @param {Function} intlFunc
  */
-const isMinPropertyValid = (value, valueToCompare, maxCriterion, intlFunc) => {
+const isMinPropertyValid = (value, valueToCompare, minCriterion, intlFunc) => {
   const isValid = valueToCompare !== undefined ? value >= valueToCompare : true;
-  return validationMessage(isValid, maxCriterion, valueToCompare, intlFunc);
+  return validationMessage(isValid, minCriterion, valueToCompare, intlFunc);
 };
 
 const widgetValidation = {
@@ -109,7 +111,7 @@ const widgetValidation = {
     maxLength: (value, itemObj, intlFunc) =>
       isMaxPropertyValid(
         value.length,
-        itemObj.maxLengthj,
+        itemObj.maxLength,
         'maxLength',
         intlFunc,
       ),

package/src/helpers/ScrollToTop/ScrollToTop.jsx

@@ -27,7 +27,10 @@ class ScrollToTop extends React.Component {
    * @memberof ScrollToTop
    */
   componentDidUpdate(prevProps) {
-    if (this.props.location?.pathname !== prevProps.location?.pathname) {
+    if (
+      !this.props.location?.pathname.hash &&
+      this.props.location?.pathname !== prevProps.location?.pathname
+    ) {
       window.scrollTo(0, 0);
     }
   }

package/src/helpers/Utils/Utils.js

@@ -208,9 +208,11 @@ export const toLangUnderscoreRegion = (language) => {
 };
 
 /**
- * Lookup if a given expander is set in apiExpanders
- * @param {string} language Language to be normalized
- * @returns {string} Language normalized
+ * Lookup if a given expander is set in apiExpanders for the given path and action type
+ * @param {string} expander The id literal of the expander eg. `navigation`
+ * @param {string} path The path (no URL) to check if the expander has effect
+ * @param {string} type The Redux action type
+ * @returns {boolean} Return if the expander is present for the path and the type given
  */
 export const hasApiExpander = (expander, path = '', type = 'GET_CONTENT') => {
   return flatten(