@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.20

package/src/components/manage/Blocks/Video/Body.jsx

@@ -5,39 +5,68 @@ import { Embed, Message } from 'semantic-ui-react';
 import cx from 'classnames';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 
-const Body = ({ data, isEditMode }) => {
-  let placeholder = data.preview_image
-    ? isInternalURL(data.preview_image)
-      ? `${flattenToAppURL(data.preview_image)}/@@images/image`
-      : data.preview_image
-    : null;
-
+//Extracting videoID, listID and thumbnailURL from the video URL
+const getVideoIDAndPlaceholder = (url) => {
   let videoID = null;
   let listID = null;
+  let thumbnailURL = null;
 
-  if (data.url) {
-    if (data.url.match('youtu')) {
-      if (data.url.match('list')) {
-        const matches = data.url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
+  if (url) {
+    if (url.match('youtu')) {
+      if (url.match('list')) {
+        const matches = url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
         listID = matches[1] || matches[2];
-      } else {
-        videoID = data.url.match(/.be\//)
-          ? data.url.match(/^.*\.be\/(.*)/)[1]
-          : data.url.match(/^.*\?v=(.*)$/)[1];
+
+        let thumbnailID = null;
+        if (url.match(/\?v=(.*)&list/)) {
+          thumbnailID = url.match(/^.*\?v=(.*)&list(.*)/)[1];
+        }
+        if (url.match(/\?v=(.*)\?list/)) {
+          thumbnailID = url.match(/^.*\?v=(.*)\?list(.*)/)[1];
+        }
+        thumbnailURL =
+          'https://img.youtube.com/vi/' + thumbnailID + '/sddefault.jpg';
+      } else if (url.match('live')) {
+        videoID = url.match(/^.*\/live\/(.*)/)[1];
+      } else if (url.match(/\.be\//)) {
+        videoID = url.match(/^.*\.be\/(.*)/)[1];
+      } else if (url.match(/\?v=/)) {
+        videoID = url.match(/^.*\?v=(.*)$/)[1];
       }
 
-      if (!placeholder) {
+      if (videoID) {
+        let thumbnailID = videoID;
+        if (videoID.match(/\?si=/)) {
+          thumbnailID = videoID.match(/(.*)\?si=(.*)/)[1];
+        }
         //load video preview image from youtube
-        placeholder =
-          'https://img.youtube.com/vi/' + videoID + '/sddefault.jpg';
+        thumbnailURL =
+          'https://img.youtube.com/vi/' + thumbnailID + '/sddefault.jpg';
       }
-    } else if (data.url.match('vimeo')) {
-      videoID = data.url.match(/^.*\.com\/(.*)/)[1];
-      if (!placeholder) {
-        placeholder = 'https://vumbnail.com/' + videoID + '.jpg';
+    } else if (url.match('vimeo')) {
+      videoID = url.match(/^.*\.com\/(.*)/)[1];
+      if (videoID) {
+        let thumbnailID = videoID;
+        if (videoID.match(/\?si=/)) {
+          thumbnailID = videoID.match(/(.*)\?si=(.*)/)[1];
+        }
+        thumbnailURL = 'https://vumbnail.com/' + thumbnailID + '.jpg';
       }
     }
   }
+  return { videoID, listID, thumbnailURL };
+};
+
+const Body = ({ data, isEditMode }) => {
+  let placeholder = data.preview_image
+    ? isInternalURL(data.preview_image)
+      ? `${flattenToAppURL(data.preview_image)}/@@images/image`
+      : data.preview_image
+    : null;
+
+  const { videoID, listID, thumbnailURL } = getVideoIDAndPlaceholder(data.url);
+
+  placeholder = !placeholder ? thumbnailURL : placeholder;
 
   const ref = React.createRef();
   const onKeyDown = (e) => {
@@ -130,3 +159,4 @@ Body.propTypes = {
 };
 
 export default Body;
+export { getVideoIDAndPlaceholder };

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

@@ -0,0 +1,167 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import Body from './Body';
+import { getVideoIDAndPlaceholder } from './Body';
+import config from '@plone/volto/registry';
+
+config.blocks.blocksConfig = {
+  video: {
+    id: 'video',
+    title: 'Video',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+const mockStore = configureStore();
+
+test('renders a youtube video component with "list" in its url', () => {
+  const url =
+    'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: null,
+    listID: 'PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+    thumbnailURL: 'https://img.youtube.com/vi/KwRSRRyuk-Q/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a youtube video with "/live/" in its url', () => {
+  const url = 'https://www.youtube.com/live/ISdHvS6Ck3k?si=COeVakmC1lI6jQy3';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: 'ISdHvS6Ck3k?si=COeVakmC1lI6jQy3',
+    listID: null,
+    thumbnailURL: 'https://img.youtube.com/vi/ISdHvS6Ck3k/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a youtube video with ".be/" in its url', () => {
+  const url = 'https://youtu.be/P9j-xYdWT28?si=zZ2putStJbPBLCdt';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: 'P9j-xYdWT28?si=zZ2putStJbPBLCdt',
+    listID: null,
+    thumbnailURL: 'https://img.youtube.com/vi/P9j-xYdWT28/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a youtube video with "?v=" in its url', () => {
+  const url = 'https://www.youtube.com/watch?v=KUd6e105u_I';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: 'KUd6e105u_I',
+    listID: null,
+    thumbnailURL: 'https://img.youtube.com/vi/KUd6e105u_I/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a vimeo video url', () => {
+  const url = 'https://vimeo.com/639449679';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: '639449679',
+    listID: null,
+    thumbnailURL: 'https://vumbnail.com/639449679.jpg',
+  });
+});
+
+test('renders a youtube video body component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders a youtube video body component in edit mode', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+        }}
+        isEditMode={true}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders invalid video body component with invalid URL', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.google.com',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders a error message for invalid video URL in edit mode', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.google.com',
+        }}
+        isEditMode={true}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

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

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const VideoSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = VideoBlockSchema({ ...props, intl });
 
@@ -42,6 +42,8 @@ const VideoSidebar = (props) => {
           onChangeBlock={onChangeBlock}
           formData={data}
           block={block}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       )}
     </>

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,
@@ -1191,7 +1191,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">
@@ -1226,10 +1230,8 @@ class Contents extends Component {
                           this.state.containedItemsToDelete > 0 ? (
                             <>
                               <FormattedMessage
-                                id="Some items are also a folder.
-                              By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
-                                defaultMessage="Some items are also a folder.
-                              By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
+                                id="Some items are also a folder. By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
+                                defaultMessage="Some items are also a folder. By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
                                 values={{
                                   containedItemsToDelete: (
                                     <span>
@@ -1323,10 +1325,8 @@ class Contents extends Component {
                         ) : this.state.containedItemsToDelete > 0 ? (
                           <>
                             <FormattedMessage
-                              id="This item is also a folder.
-                            By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
-                              defaultMessage="This item is also a folder.
-                            By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
+                              id="This item is also a folder. By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
+                              defaultMessage="This item is also a folder. By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
                               values={{
                                 containedItemsToDelete: (
                                   <span>
@@ -1989,9 +1989,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
@@ -2159,8 +2159,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={
@@ -2178,9 +2178,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/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';
 
@@ -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/ContentsUploadModal.jsx

@@ -17,6 +17,7 @@ import {
   Modal,
   Table,
   Segment,
+  Input,
 } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 import { concat, filter, map } from 'lodash';
@@ -149,7 +150,27 @@ class ContentsUploadModal extends Component {
   }
 
   /**
-   * Submit handler
+   * Name change handler
+   * @method onChangeFileName
+   * @returns {undefined}
+   */
+
+  onChangeFileName(e, index) {
+    let copyOfFiles = [...this.state.files];
+    let originalFile = this.state.files[index];
+    let newFile = new File([originalFile], e.target.value, {
+      type: originalFile.type,
+    });
+    newFile.preview = originalFile.preview;
+    newFile.path = e.target.value;
+    copyOfFiles[index] = newFile;
+    this.setState({
+      files: copyOfFiles,
+    });
+  }
+
+  /**
+   * Submit handlers
    * @method onSubmit
    * @returns {undefined}
    */
@@ -186,7 +207,7 @@ class ContentsUploadModal extends Component {
   render() {
     return (
       this.props.open && (
-        <Modal open={this.props.open}>
+        <Modal className="contents-upload-modal" open={this.props.open}>
           <Header>
             <FormattedMessage id="Upload files" defaultMessage="Upload files" />
           </Header>
@@ -268,8 +289,14 @@ class ContentsUploadModal extends Component {
                 </Table.Header>
                 <Table.Body>
                   {map(this.state.files, (file, index) => (
-                    <Table.Row className="upload-row" key={file.name}>
-                      <Table.Cell>{file.name}</Table.Cell>
+                    <Table.Row className="upload-row" key={index}>
+                      <Table.Cell>
+                        <Input
+                          className="file-name"
+                          value={file.name}
+                          onChange={(e) => this.onChangeFileName(e, index)}
+                        />
+                      </Table.Cell>
                       <Table.Cell>
                         {file.lastModifiedDate && (
                           <FormattedRelativeDate date={file.lastModifiedDate} />

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

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Accordion,
   Button,
@@ -550,8 +550,8 @@ class AddonsControlpanel extends Component {
           )}
         </Segment.Group>
 
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -568,9 +568,9 @@ class AddonsControlpanel extends Component {
                   </Link>
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

package/src/components/manage/Controlpanels/AddonsControlpanel.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,9 +7,7 @@ import AddonsControlpanel from './AddonsControlpanel';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('AddonsControlpanel', () => {
   it('renders an addon control component', () => {
@@ -57,12 +55,13 @@ describe('AddonsControlpanel', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <AddonsControlpanel location={{ pathname: '/blog' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -10,7 +10,7 @@ import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { getBaseUrl, getParentUrl, Helmet } from '@plone/volto/helpers';
 import { removeAliases, addAliases, getAliases } from '@plone/volto/actions';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Container,
   Button,
@@ -652,8 +652,8 @@ class Aliases extends Component {
             </Segment.Group>
           </article>
         </Container>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -667,9 +667,9 @@ class Aliases extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-intl-redux';
@@ -10,9 +10,7 @@ import { MemoryRouter } from 'react-router';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Aliases', () => {
   it('renders an aliases control component', () => {
@@ -59,14 +57,15 @@ describe('Aliases', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Aliases location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { getParentUrl } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Button, Header } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
@@ -210,8 +210,8 @@ class ContentType extends Component {
             hideActions
             loading={this.props.cpanelRequest.update.loading}
           />
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
+          {this.state.isClient &&
+            createPortal(
               <Toolbar
                 pathname={this.props.pathname}
                 hideDefaultViewButtons
@@ -248,9 +248,9 @@ class ContentType extends Component {
                     </Button>
                   </>
                 }
-              />
-            </Portal>
-          )}
+              />,
+              document.getElementById('toolbar'),
+            )}
         </div>
       );
     }