@plone/volto 17.6.1 → 17.8.0

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const TeaserDefaultTemplate = (props) => {
-  const { className, data, isEditMode } = props;
+  const { className, data, isEditMode, style } = props;
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
@@ -27,7 +27,7 @@ const TeaserDefaultTemplate = (props) => {
   const { openExternalLinkInNewTab } = config.settings;
 
   return (
-    <div className={cx('block teaser', className)}>
+    <div className={cx('block teaser', className)} style={style}>
       <>
         {!href && isEditMode && (
           <Message>

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

@@ -27,6 +27,8 @@ class Edit extends Component {
             onChangeBlock={this.props.onChangeBlock}
             formData={this.props.data}
             block={this.props.block}
+            navRoot={this.props.navRoot}
+            contentType={this.props.contentType}
           />
         </SidebarPortal>
       </>

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/Controlpanels/Users/UserGroupMembershipControlPanel.jsx

@@ -3,7 +3,7 @@
  * TODO Enrich with features of user control panel. Then replace user control panel.
  */
 import React, { useEffect } from 'react';
-import { find, toNumber } from 'lodash';
+import { find } from 'lodash';
 import { Portal } from 'react-portal';
 import { useHistory } from 'react-router';
 import { Link, useLocation } from 'react-router-dom';
@@ -38,7 +38,7 @@ const UserGroupMembershipPanel = () => {
     (state) => state.controlpanels.systeminformation,
   );
   const can_use_group_membership_panel = systeminformation
-    ? toNumber(systeminformation?.plone_restapi_version.slice(0, 4)) >= 8.24
+    ? parseFloat(systeminformation?.plone_restapi_version.slice(0, 4)) >= 8.24
     : false;
   const actions = useSelector((state) => state.actions?.actions ?? {});
   const ploneSetupAction = find(actions.user, {

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

@@ -286,6 +286,7 @@ class Edit extends Component {
       <Form
         isEditForm
         ref={this.form}
+        navRoot={this.props.content?.['@components']?.navroot?.navroot || {}}
         schema={this.props.schema}
         type={this.props.content?.['@type']}
         formData={this.props.content}

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

@@ -148,7 +148,10 @@ class Form extends Component {
         ...formData,
       };
     }
-    // defaults for block editor; should be moved to schema on server side
+
+    // We initialize the formData snapshot in here, before the initial data checks
+    const initialFormData = cloneDeep(formData);
+
     // Adding fallback in case the fields are empty, so we are sure that the edit form
     // shows at least the default blocks
     if (
@@ -200,7 +203,7 @@ class Form extends Component {
 
     this.state = {
       formData,
-      initialFormData: cloneDeep(formData),
+      initialFormData,
       errors: {},
       selected: selectedBlock,
       multiSelected: [],
@@ -541,7 +544,13 @@ class Form extends Component {
    */
   render() {
     const { settings } = config;
-    const { schema: originalSchema, onCancel, onSubmit } = this.props;
+    const {
+      schema: originalSchema,
+      onCancel,
+      onSubmit,
+      navRoot,
+      type,
+    } = this.props;
     const { formData } = this.state;
     const schema = this.removeBlocksLayoutFields(originalSchema);
     const Container =
@@ -590,6 +599,8 @@ class Form extends Component {
             onChangeField={this.onChangeField}
             onSelectBlock={this.onSelectBlock}
             properties={formData}
+            navRoot={navRoot}
+            type={type}
             pathname={this.props.pathname}
             selectedBlock={this.state.selected}
             multiSelected={this.state.multiSelected}

package/src/components/manage/Sidebar/SidebarPopup.jsx

@@ -9,7 +9,7 @@ const DEFAULT_TIMEOUT = 500;
 const SidebarPopup = (props) => {
   const { children, open, onClose, overlay } = props;
 
-  const asideElement = React.createRef();
+  const asideElement = React.useRef();
 
   const handleClickOutside = (e) => {
     if (asideElement && doesNodeContainClick(asideElement.current, e)) return;

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

@@ -81,7 +81,13 @@ const EndField = ({ value, count, until, onChange, intl }) => {
                   id="until"
                   title={intl.formatMessage(messages.recurrenceEndsUntil)}
                   dateOnly={true}
-                  value={until || ''}
+                  value={
+                    until
+                      ? typeof until === 'string'
+                        ? until
+                        : until?.toISOString()
+                      : ''
+                  }
                   resettable={false}
                   onChange={(id, value) => {
                     onChange(id, value === '' ? undefined : value);

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

@@ -36,7 +36,6 @@ import {
   FREQUENCES,
   WEEKLY_DAYS,
   MONDAYFRIDAY_DAYS,
-  toISOString,
   rrulei18n,
 } from './Utils';
 
@@ -218,26 +217,41 @@ class RecurrenceWidget extends Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.value) {
-      if (prevProps.formData?.start !== this.props.formData?.start) {
-        let start = this.getUTCDate(this.props.formData?.start)
-          .startOf('day')
-          .toDate();
-
-        this.setState((prevState) => {
-          let rruleSet = prevState.rruleSet;
-
-          rruleSet = this.updateRruleSet(
-            rruleSet,
-            prevState.formValues,
-            'dtstart',
-            start,
-          );
-
-          return {
-            ...prevState,
-            rruleSet,
-          };
-        });
+      const changedStart =
+        prevProps.formData?.start !== this.props.formData?.start;
+      const changedEnd = prevProps.formData?.end !== this.props.formData?.end;
+
+      if (changedStart || changedEnd) {
+        let start = this.getUTCDate(this.props.formData?.start).toDate();
+        // let end = this.getUTCDate(this.props.formData?.end).toDate();
+
+        let changeFormValues = {};
+        if (changedEnd) {
+          changeFormValues.until = this.getUTCDate(
+            this.props.formData?.end,
+          ).toDate();
+        }
+        this.setState(
+          (prevState) => {
+            let rruleSet = prevState.rruleSet;
+
+            rruleSet = this.updateRruleSet(
+              rruleSet,
+              { ...prevState.formValues, ...changeFormValues },
+              'dtstart',
+              start,
+            );
+
+            return {
+              ...prevState,
+              rruleSet,
+            };
+          },
+          () => {
+            //then, after set state, set recurrence rrule value
+            this.saveRrule();
+          },
+        );
       }
     }
   }
@@ -249,7 +263,7 @@ class RecurrenceWidget extends Component {
   setRecurrenceStartEnd = () => {
     const start = this.props.formData?.start;
 
-    let _start = this.getUTCDate(start).startOf('day').toDate();
+    const _start = new Date(start); //The date is already in utc from plone, so this is not necessary: this.getUTCDate(start).startOf('day').toDate();
 
     this.setState((prevState) => {
       let rruleSet = prevState.rruleSet;
@@ -338,7 +352,7 @@ class RecurrenceWidget extends Component {
           case 'until':
             if (value != null) {
               formValues['recurrenceEnds'] = option;
-              formValues[option] = toISOString(value);
+              formValues[option] = value;
             }
             break;
           case 'byweekday':
@@ -421,7 +435,24 @@ class RecurrenceWidget extends Component {
           }
           break;
         case 'until':
-          value = value ? this.moment(new Date(value)).utc().toDate() : null;
+          let mDate = null;
+          if (value) {
+            mDate = this.moment(new Date(value));
+            if (typeof value === 'string') {
+              mDate = this.moment(new Date(value));
+            } else {
+              //object-->Date()
+              mDate = this.moment(value);
+            }
+
+            if (this.props.formData.end) {
+              //set time from formData.end
+              const mEnd = this.moment(new Date(this.props.formData.end));
+              mDate.set('hour', mEnd.get('hour'));
+              mDate.set('minute', mEnd.get('minute'));
+            }
+          }
+          value = value ? mDate.toDate() : null;
           break;
         default:
           break;
@@ -446,7 +477,7 @@ class RecurrenceWidget extends Component {
         ? value
         : rruleSet.dtstart()
         ? rruleSet.dtstart()
-        : this.moment().utc().toDate();
+        : new Date();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 
@@ -470,12 +501,12 @@ class RecurrenceWidget extends Component {
   getDefaultUntil = (freq) => {
     const moment = this.moment;
     var end = this.props.formData?.end
-      ? toISOString(this.getUTCDate(this.props.formData.end).toDate())
+      ? moment(new Date(this.props.formData.end))
       : null;
-    var tomorrow = toISOString(moment().add(1, 'days').utc().toDate());
-    var nextWeek = toISOString(moment().add(7, 'days').utc().toDate());
-    var nextMonth = toISOString(moment().add(1, 'months').utc().toDate());
-    var nextYear = toISOString(moment().add(1, 'years').utc().toDate());
+    var tomorrow = moment().add(1, 'days');
+    var nextWeek = moment().add(7, 'days');
+    var nextMonth = moment().add(1, 'months');
+    var nextYear = moment().add(1, 'years');
 
     var until = end;
     switch (freq) {
@@ -500,6 +531,19 @@ class RecurrenceWidget extends Component {
       default:
         break;
     }
+    if (this.props.formData.end) {
+      //set default end time
+      until.set('hour', end.get('hour'));
+      until.set('minute', end.get('minute'));
+    }
+
+    until = new Date(
+      until.get('year'),
+      until.get('month'),
+      until.get('date'),
+      until.get('hour'),
+      until.get('minute'),
+    );
 
     return until;
   };
@@ -715,9 +759,13 @@ class RecurrenceWidget extends Component {
     }
   };
 
-  save = () => {
+  saveRrule = () => {
     var value = this.state.rruleSet.toString();
     this.props.onChange(this.props.id, value);
+  };
+
+  save = () => {
+    this.saveRrule();
     this.close();
   };
 

package/src/components/theme/Image/Image.jsx

@@ -45,8 +45,10 @@ export default function Image({
     if (!image) return null;
 
     const isSvg = image['content-type'] === 'image/svg+xml';
+    // In case `base_path` is present (`preview_image_link`) use it as base path
+    const basePath = image.base_path || item['@id'];
 
-    attrs.src = `${flattenToAppURL(item['@id'])}/${image.download}`;
+    attrs.src = `${flattenToAppURL(basePath)}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
     attrs.className = cx(className, { responsive });
@@ -61,7 +63,7 @@ export default function Image({
       attrs.srcSet = sortedScales
         .map(
           (scale) =>
-            `${flattenToAppURL(item['@id'])}/${scale.download} ${scale.width}w`,
+            `${flattenToAppURL(basePath)}/${scale.download} ${scale.width}w`,
         )
         .join(', ');
     }

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

@@ -113,6 +113,38 @@ test('renders an image component from a catalog brain', () => {
   expect(json).toMatchSnapshot();
 });
 
+test('renders an image component from a catalog brain using `preview_image_link`', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        '@id': 'http://localhost:3000/blog/blog-post',
+        image_field: 'preview_image_link',
+        image_scales: {
+          preview_image_link: [
+            {
+              base_path: '/image.png',
+              download: '@@images/image.png',
+              width: 400,
+              height: 400,
+              scales: {
+                preview: {
+                  download: '@@images/image-400.png',
+                  width: 400,
+                  height: 400,
+                },
+              },
+            },
+          ],
+        },
+      }}
+      imageField="preview_image_link"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
 test('renders an image component from a string src', () => {
   const component = renderer.create(
     <Image

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

@@ -77,8 +77,9 @@ const Login = (props) => {
     qs.parse(props.location?.search ?? location.search).return_url ||
     location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
     '/';
+
   useEffect(() => {
-    if (token && !props.isLogout) {
+    if (token && !(props.isLogout || location?.state?.isLogout)) {
       history.push(returnUrl || '/');
       if (toast.isActive('loggedOut')) {
         toast.dismiss('loggedOut');
@@ -108,7 +109,16 @@ const Login = (props) => {
         dispatch(resetLoginRequest());
       }
     };
-  }, [dispatch, token, error, intl, history, returnUrl, props.isLogout]);
+  }, [
+    dispatch,
+    token,
+    error,
+    intl,
+    history,
+    returnUrl,
+    props.isLogout,
+    location?.state?.isLogout,
+  ]);
 
   const onLogin = (event) => {
     dispatch(