@plone/volto 14.6.0 → 14.8.1

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Change Log
 
+## 14.8.1 (2022-02-04)
+
+### Bugfix
+
+- Fix wrong CSS in language independent class selector @sneridagh
+
+### Internal
+
+- Cleanup redundant buildout install run.
+
+## 14.8.0 (2022-02-03)
+
+### Feature
+
+- Enable `components` property in Volto's config registry. Does not expose any direct feature but this will open the door to be able to override registered components using the config registry and avoid using shadowing explicitly. @sneridagh
+- Add `resolve` and `register` helper methods for the Volto config. They retrieve and register new components in the registry. @tiberiuichim @sneridagh
+- Add `Component` component, given a `name` of a component registered in the registry, it renders it, passing down the props. @tiberiuichim
+- Syncronize the content language with the UI language in multilingual sites. So when you are accessing a content in a given language the rest of the interface literals follow along (it updates the language cookie). So the UI remains consistent. @sneridagh
+
+### Bugfix
+
+- Fix the a11y violation of UrlWidget @iRohitSingh
+
+### Internal
+
+- Update volta pins in package.json @fredvd
+
+## 14.7.1 (2022-02-02)
+
+### Internal
+
+- Add CSS body class in Babel view. Improve marker for language independent fields in Babel view too. @sneridagh
+
+### Docs
+
+Update documentation for internal proxy & other smaller reorganisation for quicker onboarding of
+new users/evaluators. @fredvd
+
+## 14.7.0 (2022-01-28)
+
+### Feature
+
+- Add `<FormattedDate>` and `<FormattedRelativeDate>` components. Check their Storybook stories for details. This is part of ongoing work to minimize the use of 'deprecated' momentjs. @sneridagh @tiberiuichim
+
+### Internal
+
+- Upgrade jest to latest release, 27 major. @tiberiuichim
+- Lazyload momentjs. `parseDateTime` helper now requires passing the momentjs library @tiberiuichim
+
 ## 14.6.0 (2022-01-27)
 
 ### Feature

package/cypress.json

@@ -3,5 +3,6 @@
   "viewportWidth": 1280,
   "ignoreTestFiles": ["*~"],
   "integrationFolder": "cypress/tests/core",
-  "chromeWebSecurity": false
+  "chromeWebSecurity": false,
+  "projectId": "5iy5e2"
 }

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.6.0",
+  "version": "14.8.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -35,7 +35,7 @@
     "build": "razzle build",
     "build-spa": "razzle build --type=spa",
     "test": "razzle test --env=jest-environment-jsdom-sixteen --maxWorkers=50%",
-    "test:ci": "CI=true razzle test --env=jest-environment-jsdom-sixteen",
+    "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test --env=jest-environment-jsdom-sixteen",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "start:prod": "NODE_ENV=production node build/server.js",
@@ -414,7 +414,9 @@
     "@storybook/react": "^6.3.0",
     "babel-loader": "^8.1.0",
     "crypto-random-string": "3.2.0",
+    "full-icu": "1.4.0",
     "identity-obj-proxy": "3.0.0",
+    "jest": "27.4.5",
     "jest-environment-jsdom-sixteen": "1.0.3",
     "react-is": "^16.13.1",
     "tmp": "0.2.1",
@@ -432,7 +434,7 @@
     "ua-parser-js": "0.7.28"
   },
   "volta": {
-    "node": "14.17.0",
-    "yarn": "1.19.1"
+    "node": "16.13.2",
+    "yarn": "1.22.17"
   }
 }

package/pyvenv.cfg

@@ -0,0 +1,3 @@
+home = /opt/homebrew/Cellar/python@3.8/3.8.12_1/bin
+include-system-site-packages = false
+version = 3.8.12

package/src/components/index.js

@@ -198,5 +198,7 @@ export ToCSettingsSchema from '@plone/volto/components/manage/Blocks/ToC/Schema'
 
 export MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 export ContentMetadataTags from '@plone/volto/components/theme/ContentMetadataTags/ContentMetadataTags';
+export FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
+export FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate';
 
 export App from '@plone/volto/components/theme/App/App';

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

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from '@plone/volto/helpers';
+import { BodyClass, Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { keys, isEmpty } from 'lodash';
@@ -400,41 +400,44 @@ class Add extends Component {
       );
 
       return translationObject ? (
-        <Grid
-          celled="internally"
-          stackable
-          columns={2}
-          id="page-add-translation"
-        >
-          <Grid.Column className="source-object">
-            <TranslationObject
-              translationObject={translationObject}
-              schema={this.props.schema}
-              pathname={this.props.pathname}
-              visual={visual}
-              isFormSelected={
-                this.state.formSelected === 'translationObjectForm'
-              }
-              onSelectForm={() => {
-                this.setState({
-                  formSelected: 'translationObjectForm',
-                });
-              }}
-            />
-          </Grid.Column>
-          <Grid.Column>
-            <div className="new-translation">
-              <Menu pointing secondary attached tabular>
-                <Menu.Item name={translateTo.toUpperCase()} active={true}>
-                  {`${this.props.intl.formatMessage(messages.translateTo, {
-                    lang: translateTo,
-                  })}`}
-                </Menu.Item>
-              </Menu>
-              {pageAdd}
-            </div>
-          </Grid.Column>
-        </Grid>
+        <>
+          <BodyClass className="babel-view" />
+          <Grid
+            celled="internally"
+            stackable
+            columns={2}
+            id="page-add-translation"
+          >
+            <Grid.Column className="source-object">
+              <TranslationObject
+                translationObject={translationObject}
+                schema={this.props.schema}
+                pathname={this.props.pathname}
+                visual={visual}
+                isFormSelected={
+                  this.state.formSelected === 'translationObjectForm'
+                }
+                onSelectForm={() => {
+                  this.setState({
+                    formSelected: 'translationObjectForm',
+                  });
+                }}
+              />
+            </Grid.Column>
+            <Grid.Column>
+              <div className="new-translation">
+                <Menu pointing secondary attached tabular>
+                  <Menu.Item name={translateTo.toUpperCase()} active={true}>
+                    {`${this.props.intl.formatMessage(messages.translateTo, {
+                      lang: translateTo,
+                    })}`}
+                  </Menu.Item>
+                </Menu>
+                {pageAdd}
+              </div>
+            </Grid.Column>
+          </Grid>
+        </>
       ) : (
         pageAdd
       );

package/src/components/manage/Contents/Contents.test.jsx

@@ -24,13 +24,6 @@ jest.mock('./ContentsUploadModal', () =>
   jest.fn(() => <div className="UploadModal" />),
 );
 
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-    fromNow: jest.fn(() => 'a few seconds ago'),
-  })),
-);
-
 describe('Contents', () => {
   it('renders a folder contents view component', () => {
     const store = mockStore({

package/src/components/manage/Contents/ContentsItem.jsx

@@ -8,9 +8,8 @@ import { Button, Dropdown, Table } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import moment from 'moment';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { Icon, Circle } from '@plone/volto/components';
+import { Circle, FormattedDate, Icon } from '@plone/volto/components';
 import { getContentIcon } from '@plone/volto/helpers';
 import moreSVG from '@plone/volto/icons/more.svg';
 import checkboxUncheckedSVG from '@plone/volto/icons/checkbox-unchecked.svg';
@@ -48,6 +47,10 @@ const messages = defineMessages({
     id: 'no workflow state',
     defaultMessage: 'No workflow state',
   },
+  none: {
+    id: 'None',
+    defaultMessage: 'None',
+  },
 });
 
 function getColor(string) {
@@ -187,21 +190,13 @@ export const ContentsItemComponent = ({
               </div>
             )}
             {index.type === 'date' && (
-              <span
-                title={
-                  item[index.id] !== 'None' ? (
-                    moment(item[index.id]).format('LLLL')
-                  ) : (
-                    <FormattedMessage id="None" defaultMessage="None" />
-                  )
-                }
-              >
+              <>
                 {item[index.id] !== 'None' ? (
-                  moment(item[index.id]).format('L')
+                  <FormattedDate date={item[index.id]} />
                 ) : (
-                  <FormattedMessage id="None" defaultMessage="None" />
+                  intl.formatMessage(messages.none)
                 )}
-              </span>
+              </>
             )}
             {index.type === 'array' && (
               <span>{item[index.id]?.join(', ')}</span>

package/src/components/manage/Contents/ContentsUploadModal.jsx

@@ -20,10 +20,10 @@ import {
 } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 import { concat, filter, map } from 'lodash';
-import moment from 'moment';
 import filesize from 'filesize';
 import { readAsDataURL } from 'promise-file-reader';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedRelativeDate } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
 
 const Dropzone = loadable(() => import('react-dropzone'));
@@ -180,8 +180,6 @@ class ContentsUploadModal extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    moment.locale(this.props.intl.locale);
-
     return (
       this.props.open && (
         <Modal open={this.props.open}>
@@ -269,7 +267,7 @@ class ContentsUploadModal extends Component {
                     <Table.Row className="upload-row" key={file.name}>
                       <Table.Cell>{file.name}</Table.Cell>
                       <Table.Cell>
-                        {moment(file.lastModifiedDate).fromNow()}
+                        <FormattedRelativeDate date={file.lastModifiedDate} />
                       </Table.Cell>
                       <Table.Cell>
                         {filesize(file.size, { round: 0 })}

package/src/components/manage/Controlpanels/ModerateComments.jsx

@@ -11,11 +11,15 @@ import { Link } from 'react-router-dom';
 import { getParentUrl, Helmet } from '@plone/volto/helpers';
 import { Portal } from 'react-portal';
 import { Container, Button, Table } from 'semantic-ui-react';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import { deleteComment, searchContent } from '@plone/volto/actions';
-import { CommentEditModal, Icon, Toolbar } from '@plone/volto/components';
+import {
+  CommentEditModal,
+  FormattedRelativeDate,
+  Icon,
+  Toolbar,
+} from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -230,9 +234,7 @@ class ModerateComments extends Component {
                     <Table.Row key={item['@id']}>
                       <Table.Cell>{item.author_name}</Table.Cell>
                       <Table.Cell>
-                        <span title={moment(item.creation_date).format('LLLL')}>
-                          {moment(item.creation_date).fromNow()}
-                        </span>
+                        <FormattedRelativeDate date={item.creation_date} />
                       </Table.Cell>
                       <Table.Cell>{item.text.data}</Table.Cell>
                       <Table.Cell>

package/src/components/manage/Diff/Diff.jsx

@@ -12,7 +12,6 @@ import { filter, isEqual, map } from 'lodash';
 import { Container, Button, Dropdown, Grid, Table } from 'semantic-ui-react';
 import { Link, withRouter } from 'react-router-dom';
 import { Portal } from 'react-portal';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
 
@@ -23,7 +22,12 @@ import {
   getBlocksLayoutFieldname,
   hasBlocksData,
 } from '@plone/volto/helpers';
-import { DiffField, Icon, Toolbar } from '@plone/volto/components';
+import {
+  DiffField,
+  FormattedDate,
+  Icon,
+  Toolbar,
+} from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -189,9 +193,13 @@ class Diff extends Component {
     const versions = map(
       filter(this.props.historyEntries, (entry) => 'version' in entry),
       (entry, index) => ({
-        text: `${index === 0 ? 'Current' : entry.version} (${moment(
-          entry.time,
-        ).format('LLLL')}, ${entry.actor.fullname})`,
+        text: (
+          <>
+            {index === 0 ? 'Current' : entry.version}&nbsp;(
+            <FormattedDate date={entry.time} long className="text" />, &nbsp;
+            {entry.actor.fullname})
+          </>
+        ),
         value: `${entry.version}`,
         key: `${entry.version}`,
       }),

package/src/components/manage/Diff/Diff.test.jsx

@@ -1,5 +1,4 @@
 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';
@@ -12,11 +11,6 @@ const mockStore = configureStore();
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-  })),
-);
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(

package/src/components/manage/Diff/DiffField.jsx

@@ -8,11 +8,11 @@ import React from 'react';
 import { join, map } from 'lodash';
 import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
-import moment from 'moment';
 import ReactDOMServer from 'react-dom/server';
 import { Provider } from 'react-intl-redux';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router';
+import { useSelector } from 'react-redux';
 
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
@@ -44,6 +44,11 @@ const DiffField = ({
   schema,
   diffLib,
 }) => {
+  const language = useSelector((state) => state.intl.locale);
+  const readable_date_format = {
+    dateStyle: 'full',
+    timeStyle: 'short',
+  };
   const diffWords = (oneStr, twoStr) => {
     return diffLib.diffWords(String(oneStr), String(twoStr));
   };
@@ -56,8 +61,12 @@ const DiffField = ({
         break;
       case 'datetime':
         parts = diffWords(
-          moment(one).format('LLLL'),
-          moment(two).format('LLLL'),
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(one),
+          ),
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(two),
+          ),
         );
         break;
       case 'json':

package/src/components/manage/Diff/DiffField.test.jsx

@@ -5,12 +5,6 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 import DiffField from './DiffField';
 
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-  })),
-);
-
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>

package/src/components/manage/History/History.jsx

@@ -12,10 +12,13 @@ import { compose } from 'redux';
 import { Container, Dropdown, Icon, Segment, Table } from 'semantic-ui-react';
 import { concat, map, reverse } from 'lodash';
 import { Portal } from 'react-portal';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Icon as IconNext, Toolbar } from '@plone/volto/components';
+import {
+  FormattedRelativeDate,
+  Icon as IconNext,
+  Toolbar,
+} from '@plone/volto/components';
 import { getHistory, revertHistory } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 
@@ -206,9 +209,7 @@ class History extends Component {
                   </Table.Cell>
                   <Table.Cell>{entry.actor.fullname}</Table.Cell>
                   <Table.Cell>
-                    <span title={moment(entry.time).format('LLLL')}>
-                      {moment(entry.time).fromNow()}
-                    </span>
+                    <FormattedRelativeDate date={entry.time} />
                   </Table.Cell>
                   <Table.Cell>{entry.comments}</Table.Cell>
                   <Table.Cell>

package/src/components/manage/History/History.test.jsx

@@ -3,21 +3,26 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
+import FakeTimers from '@sinonjs/fake-timers';
+
 import History from './History';
 
 const mockStore = configureStore();
-
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-    fromNow: jest.fn(() => 'a few seconds ago'),
-  })),
-);
+
+const FIXED_SYSTEM_TIME = '2017-04-23T15:38:00.000Z';
 
 describe('History', () => {
+  let clock;
+  beforeEach(() => {
+    clock = FakeTimers.install({ now: Date.parse(FIXED_SYSTEM_TIME) });
+  });
+  afterEach(() => {
+    clock.uninstall();
+  });
+
   it('renders a history component', () => {
     const store = mockStore({
       history: {

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

@@ -93,7 +93,7 @@ export class DatetimeWidgetComponent extends Component {
    */
   constructor(props) {
     super(props);
-    const moment = props.moment.default;
+    this.moment = props.moment.default;
 
     this.state = {
       focused: false,
@@ -102,12 +102,19 @@ export class DatetimeWidgetComponent extends Component {
         parseDateTime(
           this.props.intl.locale,
           this.props.value,
-        )?.toISOString() === moment().utc().toISOString(),
+          undefined,
+          this.moment,
+        )?.toISOString() === this.moment().utc().toISOString(),
     };
   }
 
   getInternalValue() {
-    return parseDateTime(this.props.intl.locale, this.props.value);
+    return parseDateTime(
+      this.props.intl.locale,
+      this.props.value,
+      undefined,
+      this.moment,
+    );
   }
 
   getDateOnly() {

package/src/components/manage/Widgets/DatetimeWidget.test.jsx

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
@@ -20,6 +19,7 @@ test('renders a datetime widget component', async () => {
       messages: {},
     },
   });
+  const isoDate = new Date('2019-10-21').toISOString();
   const { container } = render(
     <Provider store={store}>
       <DatetimeWidget
@@ -27,7 +27,7 @@ test('renders a datetime widget component', async () => {
         title="My field"
         fieldSet="default"
         onChange={() => {}}
-        value={moment('2019-10-21').toISOString()}
+        value={isoDate}
       />
     </Provider>,
   );

package/src/components/manage/Widgets/RecurrenceWidget/ByDayField.jsx

@@ -6,17 +6,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Button } from 'semantic-ui-react';
-import moment from 'moment';
 import { Days } from './Utils';
 import { useIntl } from 'react-intl';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 /**
  * ByDayField component class.
  * @function ByDayField
  * @returns {string} Markup of the component.
  */
-const ByDayField = ({ label, value, onChange }) => {
+const ByDayField = ({ label, value, onChange, moment: momentlib }) => {
   const intl = useIntl();
+  const moment = momentlib.default;
   moment.locale(intl.locale);
 
   const toggleWeekDay = (dayName) => {
@@ -84,4 +85,4 @@ ByDayField.defaultProps = {
   onChange: null,
 };
 
-export default ByDayField;
+export default injectLazyLibs(['moment'])(ByDayField);

package/src/components/manage/Widgets/RecurrenceWidget/MonthOfTheYearField.jsx

@@ -6,17 +6,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import moment from 'moment';
 import { useIntl } from 'react-intl';
 import { Form } from 'semantic-ui-react';
 import SelectInput from './SelectInput';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 /**
  * MonthOfTheYearField component class.
  * @function MonthOfTheYearField
  * @returns {string} Markup of the component.
  */
-const MonthOfTheYearField = ({ value, disabled, inline, onChange }) => {
+const MonthOfTheYearField = ({
+  value,
+  disabled,
+  inline,
+  onChange,
+  moment: momentlib,
+}) => {
+  const moment = momentlib.default;
   const intl = useIntl();
   moment.locale(intl.locale);
   const monthList = [
@@ -63,4 +70,4 @@ MonthOfTheYearField.defaultProps = {
   onChange: null,
 };
 
-export default MonthOfTheYearField;
+export default injectLazyLibs(['moment'])(MonthOfTheYearField);