@plone/volto 15.11.2 → 15.12.2

package/src/components/manage/Toolbar/More.jsx

@@ -45,6 +45,10 @@ const messages = defineMessages({
     id: 'Manage Translations',
     defaultMessage: 'Manage Translations',
   },
+  manageContent: {
+    id: 'Manage content…',
+    defaultMessage: 'Manage content…',
+  },
   CreateWorkingCopy: {
     id: 'Create working copy',
     defaultMessage: 'Create working copy',
@@ -75,6 +79,22 @@ const messages = defineMessages({
     id: 'The working copy was discarded',
     defaultMessage: 'The working copy was discarded',
   },
+  Unauthorized: {
+    id: 'Unauthorized',
+    defaultMessage: 'Unauthorized',
+  },
+  workingCopyErrorUnauthorized: {
+    id: 'workingCopyErrorUnauthorized',
+    defaultMessage: 'You are not authorized to perform this operation.',
+  },
+  Error: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
+  workingCopyGenericError: {
+    id: 'workingCopyGenericError',
+    defaultMessage: 'An error occurred while performing this operation.',
+  },
 });
 
 /**
@@ -122,6 +142,59 @@ class More extends Component {
     document.removeEventListener('mousedown', this.handleClickOutside, false);
   };
 
+  componentDidUpdate(prevProps, prevState) {
+    let erroredAction = '';
+    if (
+      prevProps.workingCopy.apply.loading &&
+      this.props.workingCopy.apply.error
+    ) {
+      erroredAction = 'apply';
+    } else if (
+      prevProps.workingCopy.create.loading &&
+      this.props.workingCopy.create.error
+    ) {
+      erroredAction = 'create';
+    } else if (
+      prevProps.workingCopy.remove.loading &&
+      this.props.workingCopy.remove.error
+    ) {
+      erroredAction = 'remove';
+    }
+
+    if (erroredAction) {
+      const errorStatus = this.props.workingCopy[erroredAction].error.status;
+      if (errorStatus === 401 || errorStatus === 403) {
+        toast.error(
+          <Toast
+            error
+            title={this.props.intl.formatMessage(messages.Unauthorized)}
+            content={this.props.intl.formatMessage(
+              messages.workingCopyErrorUnauthorized,
+            )}
+          />,
+          {
+            toastId: 'workingCopyErrorUnauthorized',
+            autoClose: 10000,
+          },
+        );
+      } else {
+        toast.error(
+          <Toast
+            error
+            title={this.props.intl.formatMessage(messages.Error)}
+            content={this.props.intl.formatMessage(
+              messages.workingCopyGenericError,
+            )}
+          />,
+          {
+            toastId: 'workingCopyGenericError',
+            autoClose: 10000,
+          },
+        );
+      }
+    }
+  }
+
   /**
    * Render method.
    * @method render
@@ -221,7 +294,9 @@ class More extends Component {
               {pluggables.length > 0 && (
                 <>
                   <header>
-                    <h2>Manage content...</h2>
+                    <h2>
+                      {this.props.intl.formatMessage(messages.manageContent)}
+                    </h2>
                   </header>
                   <div className="pastanaga-menu-list">
                     <ul>
@@ -416,6 +491,7 @@ export default compose(
       pathname: props.pathname,
       content: state.content.data,
       lang: state.intl.locale,
+      workingCopy: state.workingCopy,
     }),
     { applyWorkingCopy, createWorkingCopy, removeWorkingCopy },
   ),

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -56,6 +56,13 @@ const UniversalLink = ({
       ) {
         url = `${url}/@@download/file`;
       }
+
+      if (
+        !token &&
+        config.settings.viewableInBrowserObjects.includes(item['@type'])
+      ) {
+        url = `${url}/@@display-file/file`;
+      }
     }
   }
 

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

@@ -222,7 +222,7 @@ class ArrayWidget extends Component {
       this.props.getVocabulary({
         vocabNameOrURL: this.props.vocabBaseUrl,
         size: -1,
-        subrequest: this.props.intl.locale,
+        subrequest: this.props.lang,
       });
     }
   }
@@ -371,21 +371,23 @@ export default compose(
         getVocabFromItems(props);
 
       const vocabState =
-        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[props.intl.locale];
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
 
       // If the schema already has the choices in it, then do not try to get the vocab,
       // even if there is one
       if (props.items?.choices) {
         return {
           choices: props.items.choices,
+          lang: state.intl.locale,
         };
       } else if (vocabState) {
         return {
           choices: vocabState.items,
           vocabBaseUrl,
+          lang: state.intl.locale,
         };
       }
-      return { vocabBaseUrl };
+      return { vocabBaseUrl, lang: state.intl.locale };
     },
     { getVocabulary },
   ),

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

@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
@@ -100,7 +101,7 @@ export class DatetimeWidgetComponent extends Component {
       // if passed value matches the construction time, we guess it's a default
       isDefault:
         parseDateTime(
-          this.props.intl.locale,
+          this.props.lang,
           this.props.value,
           undefined,
           this.moment,
@@ -110,7 +111,7 @@ export class DatetimeWidgetComponent extends Component {
 
   getInternalValue() {
     return parseDateTime(
-      this.props.intl.locale,
+      this.props.lang,
       this.props.value,
       undefined,
       this.moment,
@@ -178,7 +179,14 @@ export class DatetimeWidgetComponent extends Component {
   onFocusChange = ({ focused }) => this.setState({ focused });
 
   render() {
-    const { id, resettable, intl, reactDates, widgetOptions } = this.props;
+    const {
+      id,
+      resettable,
+      intl,
+      reactDates,
+      widgetOptions,
+      lang,
+    } = this.props;
     const noPastDates =
       this.props.noPastDates || widgetOptions?.pattern_options?.noPastDates;
     const moment = this.props.moment.default;
@@ -203,7 +211,7 @@ export class DatetimeWidgetComponent extends Component {
               {...(noPastDates ? {} : { isOutsideRange: () => false })}
               onFocusChange={this.onFocusChange}
               noBorder
-              displayFormat={moment.localeData(intl.locale).longDateFormat('L')}
+              displayFormat={moment.localeData(lang).longDateFormat('L')}
               navPrev={<PrevIcon />}
               navNext={<NextIcon />}
               id={`${id}-date`}
@@ -223,9 +231,9 @@ export class DatetimeWidgetComponent extends Component {
                 onChange={this.onTimeChange}
                 allowEmpty={false}
                 showSecond={false}
-                use12Hours={intl.locale === 'en'}
+                use12Hours={lang === 'en'}
                 id={`${id}-time`}
-                format={moment.localeData(intl.locale).longDateFormat('LT')}
+                format={moment.localeData(lang).longDateFormat('LT')}
                 placeholder={intl.formatMessage(messages.time)}
                 focusOnOpen
                 placement="bottomRight"
@@ -283,5 +291,8 @@ DatetimeWidgetComponent.defaultProps = {
 
 export default compose(
   injectLazyLibs(['reactDates', 'moment']),
+  connect((state) => ({
+    lang: state.intl.locale,
+  })),
   injectIntl,
 )(DatetimeWidgetComponent);

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

@@ -295,10 +295,16 @@ export class QuerystringWidgetComponent extends Component {
                             ),
                             (group) => ({
                               label: group[0],
-                              options: map(group[1], (field) => ({
-                                label: field[1].title,
-                                value: field[0],
-                              })),
+                              options: map(
+                                filter(group[1], (item) => item[1].enabled),
+                                (field) => ({
+                                  label: field[1].title,
+                                  value: field[0],
+                                  isDisabled: (value || []).some(
+                                    (v) => v['i'] === field[0],
+                                  ),
+                                }),
+                              ),
                             }),
                           )}
                           styles={customSelectStyles}
@@ -425,6 +431,9 @@ export class QuerystringWidgetComponent extends Component {
                           (field) => ({
                             label: field[1].title,
                             value: field[0],
+                            isDisabled: (value || []).some(
+                              (v) => v['i'] === field[0],
+                            ),
                           }),
                         ),
                       }),

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

@@ -7,8 +7,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Button } from 'semantic-ui-react';
 import { Days } from './Utils';
-import { useIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { useSelector } from 'react-redux';
 
 /**
  * ByDayField component class.
@@ -16,9 +16,9 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
  * @returns {string} Markup of the component.
  */
 const ByDayField = ({ label, value, onChange, moment: momentlib }) => {
-  const intl = useIntl();
+  const lang = useSelector((state) => state.intl.locale);
   const moment = momentlib.default;
-  moment.locale(intl.locale);
+  moment.locale(lang);
 
   const toggleWeekDay = (dayName) => {
     var day = Days[dayName];

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

@@ -6,10 +6,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import { useIntl } from 'react-intl';
 import { Form } from 'semantic-ui-react';
 import SelectInput from './SelectInput';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { useSelector } from 'react-redux';
 
 /**
  * MonthOfTheYearField component class.
@@ -24,8 +24,8 @@ const MonthOfTheYearField = ({
   moment: momentlib,
 }) => {
   const moment = momentlib.default;
-  const intl = useIntl();
-  moment.locale(intl.locale);
+  const lang = useSelector((state) => state.intl.locale);
+  moment.locale(lang);
   const monthList = [
     ...map(moment.months(), (m, i) => ({
       value: i + 1,

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

@@ -13,6 +13,7 @@ import addSVG from '@plone/volto/icons/circle-plus.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
+import { useSelector } from 'react-redux';
 import { toISOString } from './Utils';
 
 const messages = defineMessages({
@@ -66,7 +67,8 @@ const Occurences_ = ({
   moment: momentlib,
 }) => {
   const moment = momentlib.default;
-  moment.locale(intl.locale);
+  const lang = useSelector((state) => state.intl.locale);
+  moment.locale(lang);
   let all = [];
   const isExcluded = (date) => {
     var dateISO = toISOString(date);

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

@@ -7,6 +7,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { RRule, RRuleSet, rrulestr } from 'rrule';
+import { connect } from 'react-redux';
 
 import cx from 'classnames';
 import { isEqual, map, find, concat, remove } from 'lodash';
@@ -181,7 +182,7 @@ class RecurrenceWidget extends Component {
     super(props);
 
     this.moment = this.props.moment.default;
-    this.moment.locale(this.props.intl.locale);
+    this.moment.locale(this.props.lang);
 
     let rruleSet = this.props.value
       ? rrulestr(props.value, {
@@ -199,7 +200,7 @@ class RecurrenceWidget extends Component {
       open: false,
       rruleSet: rruleSet,
       formValues: this.getFormValues(rruleSet),
-      RRULE_LANGUAGE: rrulei18n(this.props.intl, this.moment),
+      RRULE_LANGUAGE: rrulei18n(this.props.intl, this.moment, this.props.lang),
     };
   }
 
@@ -964,5 +965,8 @@ class RecurrenceWidget extends Component {
 
 export default compose(
   injectLazyLibs(['moment']),
+  connect((state) => ({
+    lang: state.intl.locale,
+  })),
   injectIntl,
 )(RecurrenceWidget);

package/src/components/manage/Widgets/RecurrenceWidget/Utils.js

@@ -42,8 +42,8 @@ export const toISOString = (date) => {
   return date.toISOString().split('T')[0];
 };
 
-export const rrulei18n = (intl, moment) => {
-  moment.locale(intl.locale);
+export const rrulei18n = (intl, moment, lang) => {
+  moment.locale(lang);
 
   const messages = defineMessages({
     every: { id: 'rrule_every', defaultMessage: 'every' },

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

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import { map } from 'lodash';
-import { useIntl } from 'react-intl';
 import { Days } from './Utils';
 import SelectInput from './SelectInput';
 import { Form } from 'semantic-ui-react';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { useSelector } from 'react-redux';
 
 /**
  * WeekdayOfTheMonthField component class.
@@ -19,10 +19,10 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const WeekdayOfTheMonthField = (props) => {
   const { disabled = false, moment: momentlib } = props;
-  const intl = useIntl();
+  const lang = useSelector((state) => state.intl.locale);
 
   const moment = momentlib.default;
-  moment.locale(intl.locale);
+  moment.locale(lang);
 
   const weekdayOfTheMonthList = [
     ...map(Object.keys(Days), (d) => ({

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

@@ -120,7 +120,7 @@ class SelectAutoComplete extends Component {
   }
 
   componentDidMount() {
-    const { id, intl, value, choices } = this.props;
+    const { id, lang, value, choices } = this.props;
     if (value && value?.length > 0) {
       const tokensQuery = convertValueToVocabQuery(
         normalizeValue(choices, value, this.props.intl),
@@ -128,7 +128,7 @@ class SelectAutoComplete extends Component {
 
       this.props.getVocabularyTokenTitle({
         vocabNameOrURL: this.props.vocabBaseUrl,
-        subrequest: `widget-${id}-${intl.locale}`,
+        subrequest: `widget-${id}-${lang}`,
         ...tokensQuery,
       });
     }
@@ -189,7 +189,7 @@ class SelectAutoComplete extends Component {
       vocabNameOrURL: this.props.vocabBaseUrl,
       query,
       size: -1,
-      subrequest: this.props.intl.locale,
+      subrequest: this.props.lang,
     });
 
     return normalizeChoices(resp.items || [], this.props.intl);
@@ -263,19 +263,20 @@ export default compose(
 
       const vocabState =
         state.vocabularies?.[vocabBaseUrl]?.subrequests?.[
-          `widget-${props.id}-${props.intl.locale}`
+          `widget-${props.id}-${state.intl.locale}`
         ]?.items;
 
       // If the schema already has the choices in it, then do not try to get
       // the vocab, even if there is one
       return props.items?.choices
-        ? { choices: props.items.choices }
+        ? { choices: props.items.choices, lang: state.intl.locale }
         : vocabState
         ? {
             choices: vocabState,
             vocabBaseUrl,
+            lang: state.intl.locale,
           }
-        : { vocabBaseUrl };
+        : { vocabBaseUrl, lang: state.intl.locale };
     },
     { getVocabulary, getVocabularyTokenTitle },
   ),

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

@@ -147,6 +147,8 @@ export const customSelectStyles = {
     padding: '12px 12px',
     color: state.isSelected
       ? '#007bc1'
+      : state.isDisabled
+      ? '#b5b5b5'
       : state.isFocused
       ? '#4a4a4a'
       : 'inherit',

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

@@ -160,7 +160,7 @@ class SelectWidget extends Component {
       this.props.getVocabulary({
         vocabNameOrURL: this.props.vocabBaseUrl,
         size: -1,
-        subrequest: this.props.intl.locale,
+        subrequest: this.props.lang,
       });
     }
   }
@@ -263,27 +263,30 @@ export default compose(
         : '';
 
       const vocabState =
-        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[props.intl.locale];
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
 
       // If the schema already has the choices in it, then do not try to get the vocab,
       // even if there is one
       if (props.choices) {
         return {
           choices: props.choices,
+          lang: state.intl.locale,
         };
       } else if (vocabState) {
         return {
           vocabBaseUrl,
           choices: vocabState?.items ?? [],
+          lang: state.intl.locale,
         };
         // There is a moment that vocabState is not there yet, so we need to pass the
         // vocabBaseUrl to the component.
       } else if (vocabBaseUrl) {
         return {
           vocabBaseUrl,
+          lang: state.intl.locale,
         };
       }
-      return {};
+      return { lang: state.intl.locale };
     },
     { getVocabulary, getVocabularyTokenTitle },
   ),

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

@@ -61,6 +61,8 @@ class TokenWidget extends Component {
     error: PropTypes.arrayOf(PropTypes.string),
     getVocabulary: PropTypes.func.isRequired,
     choices: PropTypes.arrayOf(PropTypes.object),
+    vocabLoading: PropTypes.bool,
+    vocabLoaded: PropTypes.bool,
     items: PropTypes.shape({
       vocabulary: PropTypes.object,
     }),
@@ -112,7 +114,21 @@ class TokenWidget extends Component {
       this.props.getVocabulary({
         vocabNameOrURL: this.props.vocabBaseUrl,
         size: -1,
-        subrequest: this.props.intl.locale,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    if (
+      !this.props.choices?.length &&
+      this.props.vocabLoading === undefined &&
+      !this.props.vocabLoaded
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
       });
     }
   }
@@ -188,7 +204,7 @@ export default compose(
         getVocabFromItems(props);
 
       const vocabState =
-        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[props.intl.locale];
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
 
       if (vocabState) {
         return {
@@ -198,10 +214,13 @@ export default compose(
                 value: item.value,
               }))
             : [],
+          vocabLoading: vocabState.loading,
+          vocabLoaded: vocabState.loaded,
           vocabBaseUrl,
+          lang: state.intl.locale,
         };
       }
-      return { vocabBaseUrl };
+      return { vocabBaseUrl, lang: state.intl.locale };
     },
     { getVocabulary },
   ),

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'semantic-ui-react';
-import { useIntl } from 'react-intl';
 import cx from 'classnames';
 import { RRule, rrulestr } from 'rrule';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { useSelector } from 'react-redux';
 
 export const datesForDisplay = (start, end, moment) => {
   const mStart = moment(start);
@@ -25,10 +25,10 @@ export const datesForDisplay = (start, end, moment) => {
 };
 
 const When_ = ({ start, end, whole_day, open_end, moment: momentlib }) => {
-  const intl = useIntl();
+  const lang = useSelector((state) => state.intl.locale);
 
   const moment = momentlib.default;
-  moment.locale(intl.locale);
+  moment.locale(lang);
 
   const datesInfo = datesForDisplay(start, end, moment);
   if (!datesInfo) {

package/src/config/index.js

@@ -96,6 +96,7 @@ let config = {
     imageObjects: ['Image'],
     reservedIds: ['login', 'layout', 'plone', 'zip', 'properties'],
     downloadableObjects: ['File'], //list of content-types for which the direct download of the file will be carried out if the user is not authenticated
+    viewableInBrowserObjects: [], //ex: ['File']. List of content-types for which the file will be displayed in browser if the user is not authenticated
     listingPreviewImageField: 'image', // deprecated from Volto 14 onwards
     notSupportedBrowsers: ['ie'],
     defaultPageSize: 25,

package/test-setup-config.js

@@ -66,7 +66,8 @@ config.set('settings', {
   },
   controlPanelsIcons,
   apiExpanders: [],
-  downloadableObjects: ['Link'],
+  downloadableObjects: ['File'],
+  viewableInBrowserObjects: [],
 });
 config.set('blocks', {
   blocksConfig: {