@plone/volto 18.0.0-alpha.46 → 18.0.0-alpha.48

package/src/components/manage/Controlpanels/Aliases.test.jsx

@@ -57,6 +57,13 @@ describe('Aliases', () => {
         locale: 'en',
         messages: {},
       },
+      site: {
+        data: {
+          features: {
+            filter_aliases_by_date: true,
+          },
+        },
+      },
     });
     const { container } = render(
       <Provider store={store}>

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

@@ -346,11 +346,15 @@ class Edit extends Component {
               <>
                 <Helmet
                   title={
-                    this.props?.schema?.title
+                    this.props?.content?.title
                       ? this.props.intl.formatMessage(messages.edit, {
-                          title: this.props.schema.title,
+                          title: this.props?.content?.title,
                         })
-                      : null
+                      : this.props?.schema?.title
+                        ? this.props.intl.formatMessage(messages.edit, {
+                            title: this.props.schema.title,
+                          })
+                        : null
                   }
                 >
                   {this.props.content?.language && (

package/src/components/manage/Form/ModalForm.jsx

@@ -70,6 +70,7 @@ class ModalForm extends Component {
       required: PropTypes.arrayOf(PropTypes.string),
     }).isRequired,
     title: PropTypes.string.isRequired,
+    description: PropTypes.objectOf(PropTypes.any),
     formData: PropTypes.objectOf(PropTypes.any),
     submitError: PropTypes.string,
     onSubmit: PropTypes.func.isRequired,
@@ -211,7 +212,7 @@ class ModalForm extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { schema, onCancel } = this.props;
+    const { schema, onCancel, description } = this.props;
     const currentFieldset = schema.fieldsets[this.state.currentTab];
 
     const fields = map(currentFieldset.fields, (field) => ({
@@ -245,6 +246,7 @@ class ModalForm extends Component {
             onSubmit={this.onSubmit}
             error={state_errors || Boolean(this.props.submitError)}
           >
+            {description}
             <Message error>
               {state_errors ? (
                 <FormattedMessage

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

@@ -9,11 +9,7 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import { getUser } from '@plone/volto/actions';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
-import {
-  expandToBackendURL,
-  getBaseUrl,
-  userHasRoles,
-} from '@plone/volto/helpers';
+import { expandToBackendURL, getBaseUrl } from '@plone/volto/helpers';
 import logoutSVG from '@plone/volto/icons/log-out.svg';
 import rightArrowSVG from '@plone/volto/icons/right-key.svg';
 import backSVG from '@plone/volto/icons/back.svg';
@@ -50,7 +46,11 @@ const PersonalTools = (props) => {
   const token = useSelector((state) => state.userSession.token, shallowEqual);
   const user = useSelector((state) => state.users.user);
   const userId = token ? jwtDecode(token).sub : '';
-
+  const siteSetupAction = useSelector((state) =>
+    state.actions?.actions?.user?.find(
+      (action) => action?.id === 'plone_setup',
+    ),
+  );
   useEffect(() => {
     dispatch(getUser(userId));
   }, [dispatch, userId]);
@@ -127,7 +127,7 @@ const PersonalTools = (props) => {
             </button>
           </li>
 
-          {userHasRoles(user, ['Site Administrator', 'Manager']) && (
+          {siteSetupAction && (
             <li>
               <Link to="/controlpanel">
                 <FormattedMessage id="Site Setup" defaultMessage="Site Setup" />

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

@@ -29,6 +29,16 @@ describe('Toolbar Personal Tools component', () => {
           is_folderish: true,
         },
       },
+      actions: {
+        actions: {
+          user: [
+            {
+              id: 'plone_setup',
+              title: 'Site Setup',
+            },
+          ],
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},
@@ -70,6 +80,16 @@ describe('Toolbar Personal Tools component', () => {
           is_folderish: true,
         },
       },
+      actions: {
+        actions: {
+          user: [
+            {
+              id: 'plone_setup',
+              title: 'Site Setup',
+            },
+          ],
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},
@@ -112,6 +132,57 @@ describe('Toolbar Personal Tools component', () => {
           is_folderish: true,
         },
       },
+      actions: {
+        actions: {
+          user: [
+            {
+              id: 'plone_setup',
+              title: 'Site Setup',
+            },
+          ],
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <PluggablesProvider>
+          <MemoryRouter>
+            <PersonalTools
+              loadComponent={() => {}}
+              theToolbar={{
+                current: { getBoundingClientRect: () => ({ width: '320' }) },
+              }}
+            />
+          </MemoryRouter>
+        </PluggablesProvider>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders an Toolbar Personal Tools component without Site Setup access', () => {
+    const store = mockStore({
+      users: {
+        user: {
+          fullname: 'regular_user',
+          email: 'user@plone.org',
+          roles: ['Member'],
+        },
+      },
+      userSession: {
+        token: jwt.sign({ sub: 'regular_user' }, 'secret'),
+      },
+      content: {
+        data: {
+          '@type': 'Folder',
+          is_folderish: true,
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},

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

@@ -7,7 +7,7 @@ import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import { Input } from 'semantic-ui-react';
-import { compact, concat, keys, map, union, uniq } from 'lodash';
+import { compact, concat, map, union, uniq } from 'lodash';
 
 import { defineMessages, useIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
@@ -46,8 +46,7 @@ const IdWidget = (props) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const ref = useRef();
-
-  const indexes = useSelector((state) => keys(state.querystring.indexes));
+  const indexes = useSelector((state) => state.querystring.indexes);
 
   const [errors, setError] = useState([]);
   const [reservedIds] = useState(
@@ -62,11 +61,11 @@ const IdWidget = (props) => {
       ),
     ),
   );
-  const fieldValidation = (values) => {
+  const fieldValidation = (value) => {
     const error = [];
 
     // Check reserved id's
-    if (reservedIds.indexOf(values) !== -1) {
+    if (reservedIds.indexOf(value) !== -1) {
       error.push(intl.formatMessage(messages.reservedId));
     }
 
@@ -74,14 +73,14 @@ const IdWidget = (props) => {
     if (
       // eslint-disable-next-line no-control-regex
       !/^(?!.*\\)(?!\+\+)(?!@@)(?!.*request)(?!.*contributors)(?!aq_)(?!.*__)(?!_)(?!((^|\/)\.\.?($|\/)|^"\s*"$))(?!.*[A-Z])(?:(?![\r\n<>/?&#\x00-\x1F\x7F])['\x00-\x7F\u0080-\uFFFF. _])*$/.test(
-        values,
+        value,
       )
     ) {
       error.push(intl.formatMessage(messages.invalidCharacters));
     }
 
     // Check indexes
-    if (indexes.indexOf(values) !== -1) {
+    if (value in indexes) {
       error.push(intl.formatMessage(messages.reservedId));
     }
 

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

@@ -51,6 +51,7 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRedirector/MultilingualRedirector';
 import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
 import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
+import RouteAnnouncer from '@plone/volto/components/theme/RouteAnnouncer/RouteAnnouncer';
 
 /**
  * @export
@@ -191,6 +192,7 @@ export class App extends Component {
             </main>
           </Segment>
         </MultilingualRedirector>
+        <RouteAnnouncer />
         <Footer />
         <LockingToastsFactory
           content={this.props.content}

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

@@ -1,9 +1,9 @@
+import config from '@plone/volto/registry';
 import React from 'react';
-import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
 
 import { __test__ as App } from './App';
 
@@ -64,5 +64,6 @@ describe('App', () => {
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
+    component.unmount();
   });
 });

package/src/components/theme/Login/Login.jsx

@@ -80,9 +80,8 @@ const Login = (props) => {
   const loading = useSelector((state) => state.userSession.login.loading);
   const returnUrl =
     qs.parse(props.location?.search ?? location.search).return_url ||
-    location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
+    location.pathname.replace(/\/[^/]*\/?$/, '') ||
     '/';
-
   const previousToken = usePrevious(token);
 
   useEffect(() => {

package/src/components/theme/RouteAnnouncer/RouteAnnouncer.jsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+
+function RouteAnnouncer() {
+  const [pageTitle, setPageTitle] = useState('');
+
+  useEffect(() => {
+    function updatePage(title) {
+      setPageTitle(title);
+      document.activeElement.blur();
+    }
+    function handlePop(event) {
+      const pageTitle = event.target.document.title;
+      updatePage(pageTitle);
+    }
+
+    const observer = new MutationObserver((mutationList) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+          for (const node of mutation.addedNodes) {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+              updatePage(node.textContent);
+            }
+          }
+        }
+      }
+    });
+    observer.observe(document.querySelector('title'), {
+      characterData: true,
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+    window.addEventListener('popstate', handlePop);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('popstate', handlePop);
+    };
+  }, []);
+
+  return (
+    <p
+      id="route-announcer"
+      role="alert"
+      // Off-screen element with 'best' browser support
+      style={{
+        border: 0,
+        clip: 'rect(1px 1px 1px 1px)', // IE-style CSS for compatibility
+        height: '1px',
+        margin: '-1px',
+        overflow: 'hidden',
+        padding: 0,
+        position: 'absolute',
+        width: '1px',
+        whiteSpace: 'nowrap',
+        wordWrap: 'normal',
+      }}
+    >
+      {pageTitle}
+    </p>
+  );
+}
+
+export default RouteAnnouncer;

package/src/constants/ActionTypes.js

@@ -138,6 +138,7 @@ export const MOVE_CONTENT_RULE = 'MOVE_CONTENT_RULE';
 export const GET_ALIASES = 'GET_ALIASES';
 export const ADD_ALIASES = 'ADD_ALIASES';
 export const REMOVE_ALIASES = 'REMOVE_ALIASES';
+export const UPLOAD_ALIASES = 'UPLOAD_ALIASES';
 export const GET_USERSCHEMA = 'GET_USERSCHEMA';
 export const GET_UPGRADE = 'GET_UPGRADE';
 export const POST_UPGRADE = 'POST_UPGRADE';

package/src/express-middleware/static.js

@@ -1,10 +1,10 @@
 import express from 'express';
 import path from 'path';
-import AddonConfigurationRegistry from '@plone/registry/src/addon-registry';
+import { AddonRegistry } from '@plone/registry/addon-registry';
 import config from '@plone/volto/registry';
 
 const projectRootPath = path.resolve('.');
-const registry = new AddonConfigurationRegistry(projectRootPath);
+const { registry } = AddonRegistry.init(projectRootPath);
 
 const staticDirectory = () => {
   if (process.env.BUILD_DIR) {

package/src/helpers/Api/Api.js

@@ -50,7 +50,14 @@ class Api {
     methods.forEach((method) => {
       this[method] = (
         path,
-        { params, data, type, headers = {}, checkUrl = false } = {},
+        {
+          params,
+          data,
+          type,
+          headers = {},
+          checkUrl = false,
+          attach = [],
+        } = {},
       ) => {
         let request;
         let promise = new Promise((resolve, reject) => {
@@ -88,6 +95,10 @@ class Api {
             request.send(data);
           }
 
+          attach.forEach((attachment) => {
+            request.attach.apply(request, attachment);
+          });
+
           request.end((err, response) => {
             if (
               checkUrl &&

package/src/helpers/Blocks/Blocks.js

@@ -629,11 +629,11 @@ export const styleDataToStyleObject = (key, value, prefix = '') => {
  * Generate styles object from data
  *
  * @function buildStyleObjectFromData
- * @param {Object} obj A style wrapper object data
+ * @param {Object} data A block data object
  * @param {string} prefix The prefix (could be dragged from a recursive call, initially empty)
  * @return {Object} The style object ready to be passed as prop
  */
-export const buildStyleObjectFromData = (obj = {}, prefix = '') => {
+export const buildStyleObjectFromData = (data = {}, prefix = '') => {
   // style wrapper object has the form:
   // const styles = {
   //   color: 'red',
@@ -641,39 +641,79 @@ export const buildStyleObjectFromData = (obj = {}, prefix = '') => {
   // }
   // Returns: {'--background-color: '#AABBCC'}
 
-  return Object.fromEntries(
-    Object.entries(obj)
-      .filter(([k, v]) => k.startsWith('--') || isObject(v))
-      .reduce(
-        (acc, [k, v]) => [
-          ...acc,
-          // Kept for easy debugging
-          // ...(() => {
-          //   if (isObject(v)) {
-          //     return Object.entries(
-          //       buildStyleObjectFromData(
-          //         v,
-          //         `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`,
-          //       ),
-          //     );
-          //   }
-          //   return [styleDataToStyleObject(k, v, prefix)];
-          // })(),
-          ...(isObject(v)
-            ? Object.entries(
-                buildStyleObjectFromData(
-                  v,
-                  `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`, // We don't add a prefix if the key ends with the marker suffix
-                ),
-              )
-            : [styleDataToStyleObject(k, v, prefix)]),
-        ],
-        [],
-      )
-      .filter((v) => !!v),
-  );
+  function recursiveBuildStyleObjectFromData(obj, prefix) {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .filter(([k, v]) => k.startsWith('--') || isObject(v))
+        .reduce(
+          (acc, [k, v]) => [
+            ...acc,
+            // Kept for easy debugging
+            // ...(() => {
+            //   if (isObject(v)) {
+            //     return Object.entries(
+            //       buildStyleObjectFromData(
+            //         v,
+            //         `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`,
+            //       ),
+            //     );
+            //   }
+            //   return [styleDataToStyleObject(k, v, prefix)];
+            // })(),
+            ...(isObject(v)
+              ? Object.entries(
+                  recursiveBuildStyleObjectFromData(
+                    v,
+                    `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`, // We don't add a prefix if the key ends with the marker suffix
+                  ),
+                )
+              : [styleDataToStyleObject(k, v, prefix)]),
+          ],
+          [],
+        )
+        .filter((v) => !!v),
+    );
+  }
+
+  // If the block has a `@type`, it's a full data block object
+  // Then apply the style enhancers
+  if (data['@type']) {
+    const styleObj = data.styles || {};
+    const stylesFromCSSproperties = recursiveBuildStyleObjectFromData(
+      styleObj,
+      prefix,
+    );
+
+    let stylesFromObjectStyleEnhancers = {};
+    const enhancers = config.getUtilities({
+      type: 'styleWrapperStyleObjectEnhancer',
+    });
+
+    enhancers.forEach(({ method }) => {
+      stylesFromObjectStyleEnhancers = {
+        ...stylesFromObjectStyleEnhancers,
+        ...method(data),
+      };
+    });
+
+    return { ...stylesFromCSSproperties, ...stylesFromObjectStyleEnhancers };
+  } else {
+    return recursiveBuildStyleObjectFromData(data, prefix);
+  }
 };
 
+/**
+ * Find a matching style by name given a style definition
+ *
+ * @function findStyleByName
+ * @param {Object} styleDefinitions An object with the style definitions
+ * @param {string} name The name of the style to find
+ * @return {Object} The style object of the matching name
+ */
+export function findStyleByName(styleDefinitions, name) {
+  return styleDefinitions.find((color) => color.name === name)?.style;
+}
+
 /**
  * Return previous/next blocks given the content object and the current block id
  *