@plone/volto 17.0.0-alpha.0 → 17.0.0-alpha.10

package/src/components/theme/NotFound/NotFound.jsx

@@ -1,53 +1,67 @@
-/**
- * Home container.
- * @module components/theme/NotFound/NotFound
- */
-
-import React from 'react';
+import { useEffect } from 'react';
+import { BodyClass, toBackendLang } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { getNavigation } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
 
 /**
  * Not found function.
  * @function NotFound
  * @returns {string} Markup of the not found page.
  */
-const NotFound = () => (
-  <Container className="view-wrapper">
-    <h1>
-      <FormattedMessage
-        id="This page does not seem to exist…"
-        defaultMessage="This page does not seem to exist…"
-      />
-    </h1>
-    <p className="description">
-      <FormattedMessage
-        id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-        defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-      />
-    </p>
-    <p>
-      <FormattedMessage
-        id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        values={{
-          site_admin: (
-            <Link to="/contact-form">
-              <FormattedMessage
-                id="Site Administration"
-                defaultMessage="Site Administration"
-              />
-            </Link>
-          ),
-        }}
-      />
-    </p>
-    <p>
-      <FormattedMessage id="Thank you." defaultMessage="Thank you." />
-    </p>
-  </Container>
-);
+const NotFound = () => {
+  const dispatch = useDispatch();
+  const lang = useSelector((state) => state.intl.locale);
+
+  useEffect(() => {
+    dispatch(
+      getNavigation(
+        config.settings.isMultilingual ? `/${toBackendLang(lang)}` : '/',
+        config.settings.navDepth,
+      ),
+    );
+  }, [dispatch, lang]);
+
+  return (
+    <Container className="view-wrapper">
+      <BodyClass className="page-not-found" />
+      <h1>
+        <FormattedMessage
+          id="This page does not seem to exist…"
+          defaultMessage="This page does not seem to exist…"
+        />
+      </h1>
+      <p className="description">
+        <FormattedMessage
+          id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+          defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          values={{
+            site_admin: (
+              <Link to="/contact-form">
+                <FormattedMessage
+                  id="Site Administration"
+                  defaultMessage="Site Administration"
+                />
+              </Link>
+            ),
+          }}
+        />
+      </p>
+      <p>
+        <FormattedMessage id="Thank you." defaultMessage="Thank you." />
+      </p>
+    </Container>
+  );
+};
 
 export default withServerErrorCode(404)(NotFound);

package/src/components/theme/PasswordReset/PasswordReset.jsx

@@ -31,7 +31,7 @@ const messages = defineMessages({
   },
   usernameTitle: {
     id: 'My username is',
-    defaultMessage: 'My username is',
+    defaultMessage: 'My user name is',
   },
   emailTitle: {
     id: 'My email is',
@@ -50,8 +50,8 @@ const messages = defineMessages({
     defaultMessage: 'New password',
   },
   passwordDescription: {
-    id: 'Enter your new password. Minimum 5 characters.',
-    defaultMessage: 'Enter your new password. Minimum 5 characters.',
+    id: 'Enter your new password. Minimum 8 characters.',
+    defaultMessage: 'Enter your new password. Minimum 8 characters.',
   },
   passwordRepeatTitle: {
     id: 'Confirm password',
@@ -227,6 +227,9 @@ class PasswordReset extends Component {
       );
     }
     if (this.props.token) {
+      const errmsg = this.props.error
+        ? this.props.error.response.body.error
+        : null;
       return (
         <div id="page-password-reset">
           <Helmet
@@ -238,7 +241,7 @@ class PasswordReset extends Component {
               description={this.props.intl.formatMessage(messages.description)}
               onSubmit={this.onSubmit}
               onCancel={this.onCancel}
-              error={this.state.error || this.props.error}
+              error={this.state.error || errmsg}
               schema={{
                 fieldsets: [
                   {

package/src/components/theme/PasswordReset/RequestPasswordReset.jsx

@@ -32,7 +32,7 @@ const messages = defineMessages({
   },
   usernameTitle: {
     id: 'label_my_username_is',
-    defaultMessage: 'My username is',
+    defaultMessage: 'My user name is',
   },
   emailTitle: {
     id: 'label_my_email_is',

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, toBackendLang } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
@@ -40,7 +40,7 @@ class Sitemap extends Component {
   componentDidMount() {
     const { settings } = config;
     if (settings.isMultilingual) {
-      this.props.getNavigation(`${this.props.lang}`, 4);
+      this.props.getNavigation(`${toBackendLang(this.props.lang)}`, 4);
     } else {
       this.props.getNavigation('', 4);
     }
@@ -108,7 +108,9 @@ export default compose(
         const { settings } = config;
         const lang = getState().intl.locale;
         if (settings.isMultilingual) {
-          return __SERVER__ && dispatch(getNavigation(`${lang}`, 4));
+          return (
+            __SERVER__ && dispatch(getNavigation(`${toBackendLang(lang)}`, 4))
+          );
         } else {
           return __SERVER__ && dispatch(getNavigation('', 4));
         }

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

@@ -87,7 +87,7 @@ const DefaultView = (props) => {
                 return f !== 'title' ? (
                   <Grid celled="internally" key={key}>
                     <Grid.Row>
-                      <Label>{field.title}:</Label>
+                      <Label title={field.id}>{field.title}:</Label>
                     </Grid.Row>
                     <Grid.Row>
                       <Segment basic>

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { List } from 'semantic-ui-react';
 import cx from 'classnames';
 
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -28,7 +29,7 @@ const When_ = ({ start, end, whole_day, open_end, moment: momentlib }) => {
   const lang = useSelector((state) => state.intl.locale);
 
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const datesInfo = datesForDisplay(start, end, moment);
   if (!datesInfo) {

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

@@ -43,7 +43,7 @@ const EventView = (props) => {
   const { content } = props;
 
   return (
-    <div id="page-document" className="ui container viewwrapper event-view">
+    <div id="page-document" className="ui container view-wrapper event-view">
       <Grid>
         <Grid.Column width={7} className="mobile hidden">
           {hasBlocksData(content) ? (

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

@@ -21,7 +21,7 @@ import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
  */
 const NewsItemView = ({ content }) =>
   hasBlocksData(content) ? (
-    <div id="page-document" className="ui container viewwrapper event-view">
+    <div id="page-document" className="ui container view-wrapper newsitem-view">
       <RenderBlocks content={content} />
     </div>
   ) : (

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

@@ -44,7 +44,13 @@ const RenderBlocks = (props) => {
         });
 
         return Block ? (
-          <StyleWrapper key={block} {...props} id={block} data={blockData}>
+          <StyleWrapper
+            key={block}
+            {...props}
+            id={block}
+            block={block}
+            data={blockData}
+          >
             <Block
               id={block}
               metadata={metadata}

package/src/components/theme/Widgets/DateWidget.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
 
 const DateWidget = ({ value, children, className, format = 'll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   return value ? (
     <span className={cx(className, 'date', 'widget')}>
       {children

package/src/components/theme/Widgets/DatetimeWidget.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
 
 const DatetimeWidget = ({ value, children, className, format = 'lll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   return value ? (
     <span className={cx(className, 'datetime', 'widget')}>
       {children

package/src/components/theme/Widgets/RelationsWidget.jsx

@@ -5,17 +5,19 @@ import RelationWidget from './RelationWidget';
 const RelationsWidget = ({ value, children, className }) =>
   value ? (
     <ul className={cx(className, 'relations', 'widget')}>
-      {value.map((item, key) => (
-        <li key={key}>
-          <RelationWidget
-            value={item}
-            className={className}
-            key={item.token || item.title || item}
-          >
-            {children}
-          </RelationWidget>
-        </li>
-      ))}
+      {value.map((item, key) => {
+        return item ? (
+          <li key={key}>
+            <RelationWidget
+              value={item || `relation target not found '${key}'`}
+              className={className}
+              key={item.token || item.title || item}
+            >
+              {children}
+            </RelationWidget>
+          </li>
+        ) : null;
+      })}
     </ul>
   ) : (
     ''

package/src/config/ControlPanels.js

@@ -18,6 +18,7 @@ import settingsSVG from '@plone/volto/icons/settings.svg';
 import rulesSVG from '@plone/volto/icons/content-existing.svg';
 import undoControlPanelSVG from '@plone/volto/icons/undo-control-panel.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
+import relationsSVG from '@plone/volto/icons/ahead.svg';
 
 export const controlPanelsIcons = {
   default: settingsSVG,
@@ -40,6 +41,7 @@ export const controlPanelsIcons = {
   rules: rulesSVG,
   undo: undoControlPanelSVG,
   aliases: linkSVG,
+  relations: relationsSVG,
 };
 
 export const filterControlPanels = (controlpanels) => {

package/src/config/Widgets.jsx

@@ -98,6 +98,7 @@ export const widgetMapping = {
     select_querystring_field: SelectMetadataWidget,
     autocomplete: SelectAutoComplete,
     color_picker: ColorPickerWidget,
+    select: SelectWidget,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,

package/src/config/index.js

@@ -89,6 +89,7 @@ let config = {
     // https://6.docs.plone.org/volto/deploying/seamless-mode.html
     devProxyToApiPath:
       process.env.RAZZLE_DEV_PROXY_API_PATH ||
+      process.env.RAZZLE_INTERNAL_API_PATH ||
       process.env.RAZZLE_API_PATH ||
       'http://localhost:8080/Plone', // Set it to '' for disabling the proxy
     // proxyRewriteTarget Set it for set a custom target for the proxy or overide the internal VHM rewrite
@@ -179,6 +180,8 @@ let config = {
     styleClassNameConverters,
     hashLinkSmoothScroll: false,
     styleClassNameExtenders,
+    querystringSearchGet: false,
+    blockSettingsTabFieldsetsInitialStateOpen: true,
   },
   experimental: {
     addBlockButton: {

package/src/config/server.js

@@ -2,6 +2,7 @@ import imagesMiddleware from '@plone/volto/express-middleware/images';
 import filesMiddleware from '@plone/volto/express-middleware/files';
 import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt';
 import sitemapMiddleware from '@plone/volto/express-middleware/sitemap';
+import staticsMiddleware from '@plone/volto/express-middleware/static';
 import devProxyMiddleware from '@plone/volto/express-middleware/devproxy';
 
 const settings = {
@@ -11,10 +12,28 @@ const settings = {
     imagesMiddleware(),
     robotstxtMiddleware(),
     sitemapMiddleware(),
+    staticsMiddleware(),
   ],
   criticalCssPath: 'public/critical.css',
   readCriticalCss: null, // so it will be defaultReadCriticalCss
   extractScripts: { errorPages: false },
+  staticFiles: [
+    {
+      id: 'root_static',
+      match: /^\/static\/.*/,
+      headers: {
+        // stable resources never change. 31536000 seconds == 365 days
+        'Cache-Control': 'public, max-age=31536000',
+      },
+    },
+    {
+      id: 'all',
+      match: /.*/,
+      headers: {
+        'Cache-Control': 'public, max-age=60',
+      },
+    },
+  ],
 };
 
 export default settings;

package/src/constants/ActionTypes.js

@@ -36,6 +36,10 @@ export const GET_NAVIGATION = 'GET_NAVIGATION';
 export const GET_PRINCIPALS = 'GET_PRINCIPALS';
 export const GET_QUERYSTRING = 'GET_QUERYSTRING';
 export const GET_QUERYSTRING_RESULTS = 'GET_QUERYSTRING_RESULTS';
+export const CREATE_RELATIONS = 'CREATE_RELATIONS';
+export const DELETE_RELATIONS = 'DELETE_RELATIONS';
+export const LIST_RELATIONS = 'LIST_RELATIONS';
+export const REBUILD_RELATIONS = 'REBUILD_RELATIONS';
 export const GET_SCHEMA = 'GET_SCHEMA';
 export const POST_SCHEMA = 'POST_SCHEMA';
 export const PUT_SCHEMA = 'PUT_SCHEMA';

package/src/constants/Languages.js

@@ -4,14 +4,18 @@
  */
 
 module.exports = {
-  en: 'English',
+  ca: 'Català',
   de: 'Deutsch',
+  en: 'English',
+  es: 'Español',
+  eu: 'Euskara',
+  fi: 'Suomi',
+  fr: 'Français',
+  it: 'Italiano',
   nl: 'Nederlands',
   ro: 'Română',
   ja: '日本語',
   pt: 'Português',
   pt_BR: 'Português (Brasil)',
-  es: 'Spanish',
-  it: 'Italian',
-  eu: 'Euskara',
+  zh_CN: '中文',
 };

package/src/express-middleware/devproxy.js

@@ -75,12 +75,14 @@ export default function () {
       const { apiPathURL, instancePath } = getEnv();
       const target =
         config.settings.proxyRewriteTarget ||
-        `/VirtualHostBase/http/${apiPathURL.hostname}:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
+        `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
+          apiPathURL.hostname
+        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
 
       return `${target}${path.replace('/++api++', '')}`;
     },
     logLevel: process.env.DEBUG_HPM ? 'debug' : 'silent',
-    ...(config.settings?.proxyRewriteTarget?.startsWith('https') && {
+    ...(process.env.RAZZLE_DEV_PROXY_INSECURE && {
       changeOrigin: true,
       secure: false,
     }),

package/src/express-middleware/sitemap.js

@@ -1,12 +1,34 @@
 import express from 'express';
-import { generateSitemap } from '@plone/volto/helpers/Sitemap/Sitemap';
+import {
+  generateSitemap,
+  generateSitemapIndex,
+  SITEMAP_BATCH_SIZE,
+} from '@plone/volto/helpers/Sitemap/Sitemap';
 
 export const sitemap = function (req, res, next) {
-  generateSitemap(req).then((sitemap) => {
+  let start = 0;
+  let size = undefined;
+  const { batch: batchStr } = req.params;
+  if (batchStr !== undefined) {
+    const batch = parseInt(batchStr);
+    if (isNaN(batch) || batch === 0 || '' + batch !== batchStr) {
+      res.status(404);
+      // Some data, such as the internal API address, may be sensitive to be published
+      res.send(
+        `Invalid sitemap name, use sitemap.xml.gz, or batched sitemapN.xml.gz where N is a positive integer.`,
+      );
+      return;
+    }
+    start = SITEMAP_BATCH_SIZE * (batch - 1);
+    size = SITEMAP_BATCH_SIZE;
+  }
+  generateSitemap(req, start, size).then((sitemap) => {
     if (Buffer.isBuffer(sitemap)) {
       res.set('Content-Type', 'application/x-gzip');
-      res.set('Content-Encoding', 'gzip');
-      res.set('Content-Disposition', 'attachment; filename="sitemap.xml.gz"');
+      res.set(
+        'Content-Disposition',
+        `attachment; filename="sitemap${batchStr || ''}.xml.gz"`,
+      );
       res.send(sitemap);
     } else {
       // {"errno":-111, "code":"ECONNREFUSED", "host": ...}
@@ -17,10 +39,20 @@ export const sitemap = function (req, res, next) {
   });
 };
 
+export const sitemapIndex = function (req, res, next) {
+  generateSitemapIndex(req).then((sitemapIndex) => {
+    res.set('Content-Type', 'application/xml');
+    res.set('Content-Disposition', 'attachment; filename="sitemap-index.xml"');
+    res.send(sitemapIndex);
+  });
+};
+
 export default function () {
   const middleware = express.Router();
 
   middleware.all('**/sitemap.xml.gz', sitemap);
+  middleware.all('**/sitemap:batch.xml.gz', sitemap);
+  middleware.all('**/sitemap-index.xml', sitemapIndex);
   middleware.id = 'sitemap.xml.gz';
   return middleware;
 }

package/src/express-middleware/static.js

@@ -0,0 +1,32 @@
+import express from 'express';
+import path from 'path';
+import config from '@plone/volto/registry';
+
+const staticMiddleware = express.static(
+  process.env.BUILD_DIR
+    ? path.join(process.env.BUILD_DIR, 'public')
+    : process.env.RAZZLE_PUBLIC_DIR,
+  {
+    setHeaders: function (res, path) {
+      const pathLib = require('path');
+      const base = pathLib.resolve(process.env.RAZZLE_PUBLIC_DIR);
+      const relpath = path.substr(base.length);
+      config.settings.serverConfig.staticFiles.some((elem) => {
+        if (relpath.match(elem.match)) {
+          for (const name in elem.headers) {
+            res.setHeader(name, elem.headers[name] || 'undefined');
+          }
+          return true;
+        }
+        return false;
+      });
+    },
+  },
+);
+
+export default function () {
+  const middleware = express.Router();
+  middleware.all('*', staticMiddleware);
+  middleware.id = 'staticResourcesProcessor';
+  return middleware;
+}

package/src/helpers/Api/Api.js

@@ -89,7 +89,7 @@ class Api {
               checkUrl &&
               request.url &&
               request.xhr &&
-              stripQuerystring(request.url) !==
+              encodeURI(stripQuerystring(request.url)) !==
                 stripQuerystring(request.xhr.responseURL)
             ) {
               if (request.xhr.responseURL?.length === 0) {

package/src/helpers/FormValidation/FormValidation.js

@@ -65,7 +65,16 @@ const widgetValidation = {
   },
   url: {
     isValidURL: (urlValue, urlObj, intlFunc) => {
-      const urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([_.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gm;
+      var urlRegex = new RegExp(
+        '^(https?:\\/\\/)?' + // validate protocol
+        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
+        '((\\d{1,3}\\.){3}\\d{1,3}))|' + // validate OR ip (v4) address
+        '(localhost)' + // validate OR localhost address
+        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
+        '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
+          '(\\#[-a-z\\d_]*)?$', // validate fragment locator
+        'i',
+      );
       const isValid = urlRegex.test(urlValue);
       return !isValid ? intlFunc(messages.isValidURL) : null;
     },
@@ -194,7 +203,7 @@ const validateRequiredFields = (
     const type = schema.properties[requiredField]?.type;
     const widget = schema.properties[requiredField]?.widget;
 
-    let isEmpty = !formData[requiredField];
+    let isEmpty = !formData[requiredField] && formData[requiredField] !== 0;
     if (!isEmpty) {
       if (type === 'array') {
         isEmpty = formData[requiredField]