@plone/volto 18.0.0-alpha.9 → 18.0.1

package/src/components/manage/Blocks/Video/VideoSidebar.test.jsx

@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 
 import VideoSidebar from './VideoSidebar';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 test('renders an Image Block Sidebar component', () => {

package/src/components/manage/ConditionalLink/ConditionalLink.jsx

@@ -10,7 +10,7 @@ const ConditionalLink = ({ condition, to, item, ...props }) => {
       </UniversalLink>
     );
   } else {
-    return props.children;
+    return <>{props.children}</>;
   }
 };
 

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

@@ -7,7 +7,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Link } from 'react-router-dom';
 import {
   Button,
@@ -53,14 +53,6 @@ import {
 } from '@plone/volto/actions';
 import Indexes, { defaultIndexes } from '@plone/volto/constants/Indexes';
 import {
-  ContentsBreadcrumbs,
-  ContentsIndexHeader,
-  ContentsItem,
-  ContentsRenameModal,
-  ContentsUploadModal,
-  ContentsWorkflowModal,
-  ContentsTagsModal,
-  ContentsPropertiesModal,
   Pagination,
   Popup,
   Toolbar,
@@ -68,6 +60,14 @@ import {
   Icon,
   Unauthorized,
 } from '@plone/volto/components';
+import ContentsBreadcrumbs from '@plone/volto/components/manage/Contents/ContentsBreadcrumbs';
+import ContentsIndexHeader from '@plone/volto/components/manage/Contents/ContentsIndexHeader';
+import ContentsItem from '@plone/volto/components/manage/Contents/ContentsItem';
+import { ContentsRenameModal } from '@plone/volto/components/manage/Contents';
+import ContentsUploadModal from '@plone/volto/components/manage/Contents/ContentsUploadModal';
+import ContentsWorkflowModal from '@plone/volto/components/manage/Contents/ContentsWorkflowModal';
+import ContentsTagsModal from '@plone/volto/components/manage/Contents/ContentsTagsModal';
+import ContentsPropertiesModal from '@plone/volto/components/manage/Contents/ContentsPropertiesModal';
 
 import { Helmet, getBaseUrl } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
@@ -156,7 +156,7 @@ const messages = defineMessages({
     defaultMessage: 'Item(s) has been updated.',
   },
   messageReorder: {
-    id: 'Item succesfully moved.',
+    id: 'Item successfully moved.',
     defaultMessage: 'Item successfully moved.',
   },
   messagePasted: {
@@ -534,11 +534,14 @@ class Contents extends Component {
       this.props.clipboardRequest.loading &&
       nextProps.clipboardRequest.error
     ) {
+      const msgBody =
+        nextProps.clipboardRequest.error?.response?.body?.message ||
+        this.props.intl.formatMessage(messages.error);
       this.props.toastify.toast.error(
         <Toast
           error
           title={this.props.intl.formatMessage(messages.error)}
-          content={this.props.intl.formatMessage(messages.error)}
+          content={msgBody}
         />,
       );
     }
@@ -1191,7 +1194,11 @@ class Contents extends Component {
     return this.props.token && this.props.objectActions?.length > 0 ? (
       <>
         {folderContentsAction ? (
-          <Container id="page-contents" className="folder-contents">
+          <Container
+            id="page-contents"
+            className="folder-contents"
+            aria-live="polite"
+          >
             <Dimmer.Dimmable as="div" blurring dimmed={loading}>
               <Dimmer active={loading} inverted>
                 <Loader indeterminate size="massive">
@@ -1390,6 +1397,7 @@ class Contents extends Component {
                                         {breach.targets
                                           .map((target) => (
                                             <Link
+                                              key={target['@id']}
                                               to={flattenToAppURL(
                                                 target['@id'],
                                               )}
@@ -1460,6 +1468,7 @@ class Contents extends Component {
                                     {breach.targets
                                       .map((target) => (
                                         <Link
+                                          key={target['@id']}
                                           to={flattenToAppURL(target['@id'])}
                                           title="Navigate to this item"
                                         >
@@ -1525,6 +1534,9 @@ class Contents extends Component {
                     onCancel={this.onPropertiesCancel}
                     onOk={this.onPropertiesOk}
                     items={this.state.selected}
+                    values={map(this.state.selected, (id) =>
+                      find(this.state.items, { '@id': id }),
+                    ).filter((item) => item)}
                   />
                   {this.state.showWorkflow && (
                     <ContentsWorkflowModal
@@ -1985,9 +1997,9 @@ class Contents extends Component {
                                         this.state.selected.length === 0
                                           ? checkboxUncheckedSVG
                                           : this.state.selected.length ===
-                                            this.state.items.length
-                                          ? checkboxCheckedSVG
-                                          : checkboxIndeterminateSVG
+                                              this.state.items.length
+                                            ? checkboxCheckedSVG
+                                            : checkboxIndeterminateSVG
                                       }
                                       color={
                                         this.state.selected.length > 0
@@ -2155,8 +2167,8 @@ class Contents extends Component {
                   </section>
                 </article>
               </div>
-              {this.state.isClient && (
-                <Portal node={document.getElementById('toolbar')}>
+              {this.state.isClient &&
+                createPortal(
                   <Toolbar
                     pathname={this.props.pathname}
                     inner={
@@ -2174,9 +2186,9 @@ class Contents extends Component {
                         />
                       </Link>
                     }
-                  />
-                </Portal>
-              )}
+                  />,
+                  document.getElementById('toolbar'),
+                )}
             </Dimmer.Dimmable>
           </Container>
         ) : (

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -14,9 +14,8 @@ beforeAll(
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
 );
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 jest.mock('../../theme/Pagination/Pagination', () =>
   jest.fn(() => <div className="Pagination" />),
 );
@@ -91,14 +90,15 @@ describe('Contents', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Contents location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Contents/ContentsBreadcrumbs.stories.jsx

@@ -0,0 +1,46 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ContentsBreadcrumbsComponent from './ContentsBreadcrumbs';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlContentBreadcrumbsComponent = injectIntl(
+  ContentsBreadcrumbsComponent,
+);
+const breadcrumbs = [
+  { title: 'Blog', url: '/blog' },
+  { title: 'My first blog', url: '/blog/my-first-blog' },
+];
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlContentBreadcrumbsComponent
+        {...args}
+        pathname="/blog"
+        items={breadcrumbs}
+      />
+    </Wrapper>
+  );
+}
+
+export const ContentBreadcrumbs = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/Contents/Content Breadcrumbs',
+  component: ContentBreadcrumbs,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-intl-redux';
 
-import { ContentsIndexHeader } from '@plone/volto/components';
+import ContentsIndexHeader from './ContentsIndexHeader';
 
 const mockStore = configureStore([thunk]);
 

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

@@ -1,12 +1,14 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty, map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
+import { cloneDeepSchema } from '@plone/volto/helpers/Utils/Utils';
 import { updateContent } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   properties: {
@@ -65,12 +67,83 @@ const messages = defineMessages({
 });
 
 const ContentsPropertiesModal = (props) => {
-  const { onCancel, onOk, open, items } = props;
+  const { onCancel, onOk, open, items, values } = props;
   const intl = useIntl();
   const dispatch = useDispatch();
   const request = useSelector((state) => state.content.update);
   const prevrequestloading = usePrevious(request.loading);
 
+  const baseSchema = {
+    fieldsets: [
+      {
+        id: 'default',
+        title: intl.formatMessage(messages.default),
+        fields: [
+          'effective',
+          'expires',
+          'rights',
+          'creators',
+          'exclude_from_nav',
+        ],
+      },
+    ],
+    properties: {
+      effective: {
+        description: intl.formatMessage(messages.effectiveDescription),
+        title: intl.formatMessage(messages.effectiveTitle),
+        type: 'string',
+        widget: 'datetime',
+      },
+      expires: {
+        description: intl.formatMessage(messages.expiresDescription),
+        title: intl.formatMessage(messages.expiresTitle),
+        type: 'string',
+        widget: 'datetime',
+      },
+      rights: {
+        description: intl.formatMessage(messages.rightsDescription),
+        title: intl.formatMessage(messages.rightsTitle),
+        type: 'string',
+        widget: 'textarea',
+      },
+      creators: {
+        description: intl.formatMessage(messages.creatorsDescription),
+        title: intl.formatMessage(messages.creatorsTitle),
+        type: 'array',
+      },
+      exclude_from_nav: {
+        description: intl.formatMessage(messages.excludeFromNavDescription),
+        title: intl.formatMessage(messages.excludeFromNavTitle),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+  const schemaEnhancer = config.settings.contentPropertiesSchemaEnhancer;
+  let schema = schemaEnhancer
+    ? schemaEnhancer({
+        schema: cloneDeepSchema(baseSchema),
+        intl,
+      })
+    : baseSchema;
+
+  const initialData = {};
+  if (values?.length) {
+    for (const name of Object.keys(schema.properties)) {
+      const firstValue = values[0][name];
+      // should not show floor or ceiling dates
+      if (
+        (name === 'effective' && firstValue && firstValue <= '1970') ||
+        (name === 'expires' && firstValue && firstValue >= '2499')
+      ) {
+        continue;
+      }
+      if (values.every((item) => item[name] === firstValue)) {
+        initialData[name] = firstValue;
+      }
+    }
+  }
+
   useEffect(() => {
     if (prevrequestloading && request.loaded) {
       onOk();
@@ -78,13 +151,19 @@ const ContentsPropertiesModal = (props) => {
   }, [onOk, prevrequestloading, request.loaded]);
 
   const onSubmit = (data) => {
-    if (isEmpty(data)) {
+    let changes = {};
+    for (const name of Object.keys(data)) {
+      if (data[name] !== initialData[name]) {
+        changes[name] = data[name];
+      }
+    }
+    if (isEmpty(changes)) {
       onOk();
     } else {
       dispatch(
         updateContent(
           items,
-          map(items, () => data),
+          map(items, () => changes),
         ),
       );
     }
@@ -97,54 +176,8 @@ const ContentsPropertiesModal = (props) => {
         onSubmit={onSubmit}
         onCancel={onCancel}
         title={intl.formatMessage(messages.properties)}
-        schema={{
-          fieldsets: [
-            {
-              id: 'default',
-              title: intl.formatMessage(messages.default),
-              fields: [
-                'effective',
-                'expires',
-                'rights',
-                'creators',
-                'exclude_from_nav',
-              ],
-            },
-          ],
-          properties: {
-            effective: {
-              description: intl.formatMessage(messages.effectiveDescription),
-              title: intl.formatMessage(messages.effectiveTitle),
-              type: 'string',
-              widget: 'datetime',
-            },
-            expires: {
-              description: intl.formatMessage(messages.expiresDescription),
-              title: intl.formatMessage(messages.expiresTitle),
-              type: 'string',
-              widget: 'datetime',
-            },
-            rights: {
-              description: intl.formatMessage(messages.rightsDescription),
-              title: intl.formatMessage(messages.rightsTitle),
-              type: 'string',
-              widget: 'textarea',
-            },
-            creators: {
-              description: intl.formatMessage(messages.creatorsDescription),
-              title: intl.formatMessage(messages.creatorsTitle),
-              type: 'array',
-            },
-            exclude_from_nav: {
-              description: intl.formatMessage(
-                messages.excludeFromNavDescription,
-              ),
-              title: intl.formatMessage(messages.excludeFromNavTitle),
-              type: 'boolean',
-            },
-          },
-          required: [],
-        }}
+        schema={schema}
+        formData={initialData}
       />
     )
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -7,7 +7,7 @@ import ContentsPropertiesModal from './ContentsPropertiesModal';
 
 const mockStore = configureStore();
 
-jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsPropertiesModal', () => {
   it('renders a contents properties modal component', () => {
@@ -23,7 +23,7 @@ describe('ContentsPropertiesModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <ContentsPropertiesModal
           open
@@ -33,7 +33,7 @@ describe('ContentsPropertiesModal', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
 import { updateContent } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   renameItems: {

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

@@ -7,7 +7,7 @@ import ContentsRenameModal from './ContentsRenameModal';
 
 const mockStore = configureStore();
 
-jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsRenameModal', () => {
   it('renders a contents rename modal component', () => {

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

@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
 import { updateContent } from '@plone/volto/actions';
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   default: {

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

@@ -7,7 +7,7 @@ import ContentsTagsModal from './ContentsTagsModal';
 
 const mockStore = configureStore();
 
-jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsTagsModal', () => {
   it('renders a contents tags modal component', () => {