@plone/volto 18.10.1 → 18.11.0

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

@@ -13,41 +13,46 @@ const MODE_HIDDEN = 'hidden'; //hidden mode. If mode is hidden, field is not ren
 /**
  * Get default widget
  * @method getViewDefault
+ * @param {object} widgets Widgets config
  * @returns {string} Widget component.
  */
-const getWidgetDefault = () => config.widgets.default;
+const getWidgetDefault = (widgets) => widgets.default;
 
 /**
  * Get widget by field's `id` attribute
  * @method getWidgetById
+ * @param {object} widgets Widgets config
  * @param {string} id Id
  * @returns {string} Widget component.
  */
-const getWidgetByFieldId = (id) => config.widgets.id[id] || null;
+const getWidgetByFieldId = (widgets, id) => widgets.id[id] || null;
 
 /**
  * Get widget by factory attribute
  * @method getWidgetByFactory
+ * @param {object} widgets Widgets config
  * @param {string} id Id
  * @returns {string} Widget component.
  */
-const getWidgetByFactory = (factory) =>
-  config.widgets.factory?.[factory] || null;
+const getWidgetByFactory = (widgets, factory) =>
+  widgets.factory?.[factory] || null;
 
 /**
  * Get widget by field's `widget` attribute
  * @method getWidgetByName
+ * @param {object} widgets Widgets config
  * @param {string} widget Widget
  * @returns {string} Widget component.
  */
-const getWidgetByName = (widget) =>
+const getWidgetByName = (widgets, widget) =>
   typeof widget === 'string'
-    ? config.widgets.widget[widget] || getWidgetDefault()
+    ? widgets.widget[widget] || getWidgetDefault(widgets)
     : null;
 
 /**
  * Get widget by tagged values
  * @param {object} widgetOptions
+ * @param {object} widgets Widgets config
  * @returns {string} Widget component.
  *
 
@@ -59,13 +64,14 @@ directives.widget(
     })
 
  */
-const getWidgetFromTaggedValues = (widgetOptions) =>
+const getWidgetFromTaggedValues = (widgets, widgetOptions) =>
   typeof widgetOptions?.frontendOptions?.widget === 'string'
-    ? config.widgets.widget[widgetOptions.frontendOptions.widget]
+    ? widgets.widget[widgetOptions.frontendOptions.widget]
     : null;
 
 /**
  * Get widget props from tagged values
+ * @param {object} widgets Widgets config
  * @param {object} widgetOptions
  * @returns {string} Widget component.
  *
@@ -78,7 +84,7 @@ directives.widget(
     })
 
  */
-const getWidgetPropsFromTaggedValues = (widgetOptions) =>
+const getWidgetPropsFromTaggedValues = (widgets, widgetOptions) =>
   typeof widgetOptions?.frontendOptions?.widgetProps === 'object'
     ? widgetOptions.frontendOptions.widgetProps
     : null;
@@ -86,25 +92,25 @@ const getWidgetPropsFromTaggedValues = (widgetOptions) =>
 /**
  * Get widget by field's `vocabulary` attribute
  * @method getWidgetByVocabulary
+ * @param {object} widgets Widgets config
  * @param {string} vocabulary Widget
  * @returns {string} Widget component.
  */
-const getWidgetByVocabulary = (vocabulary) =>
+const getWidgetByVocabulary = (widgets, vocabulary) =>
   vocabulary && vocabulary['@id']
-    ? config.widgets.vocabulary[
-        vocabulary['@id'].replace(/^.*\/@vocabularies\//, '')
-      ]
+    ? widgets.vocabulary[vocabulary['@id'].replace(/^.*\/@vocabularies\//, '')]
     : null;
 
 /**
  * Get widget by field's hints `vocabulary` attribute in widgetOptions
  * @method getWidgetByVocabularyFromHint
+ * @param {object} widgets Widgets config
  * @param {string} props Widget props
  * @returns {string} Widget component.
  */
-const getWidgetByVocabularyFromHint = (props) =>
+const getWidgetByVocabularyFromHint = (widgets, props) =>
   props.widgetOptions && props.widgetOptions.vocabulary
-    ? config.widgets.vocabulary[
+    ? widgets.vocabulary[
         props.widgetOptions.vocabulary['@id'].replace(
           /^.*\/@vocabularies\//,
           '',
@@ -115,19 +121,20 @@ const getWidgetByVocabularyFromHint = (props) =>
 /**
  * Get widget by field's `choices` attribute
  * @method getWidgetByChoices
+ * @param {object} widgets Widgets config
  * @param {string} choices Widget
  * @returns {string} Widget component.
  */
-const getWidgetByChoices = (props) => {
+const getWidgetByChoices = (widgets, props) => {
   if (props.choices) {
-    return config.widgets.choices;
+    return widgets.choices;
   }
 
   if (props.vocabulary) {
     // If vocabulary exists, then it means it's a choice field in disguise with
     // no widget specified that probably contains a string then we force it
     // to be a select widget instead
-    return config.widgets.choices;
+    return widgets.choices;
   }
 
   return null;
@@ -136,10 +143,11 @@ const getWidgetByChoices = (props) => {
 /**
  * Get widget by field's `type` attribute
  * @method getWidgetByType
+ * @param {object} widgets Widgets config
  * @param {string} type Type
  * @returns {string} Widget component.
  */
-const getWidgetByType = (type) => config.widgets.type[type] || null;
+const getWidgetByType = (widgets, type) => widgets.type[type] || null;
 
 /**
  * Field component class.
@@ -148,16 +156,17 @@ const getWidgetByType = (type) => config.widgets.type[type] || null;
  * @returns {string} Markup of the component.
  */
 const UnconnectedField = (props, { intl }) => {
+  const widgets = props.widgets || config.widgets;
   const Widget =
-    getWidgetByFieldId(props.id) ||
-    getWidgetFromTaggedValues(props.widgetOptions) ||
-    getWidgetByName(props.widget) ||
-    getWidgetByChoices(props) ||
-    getWidgetByVocabulary(props.vocabulary) ||
-    getWidgetByVocabularyFromHint(props) ||
-    getWidgetByFactory(props.factory) ||
-    getWidgetByType(props.type) ||
-    getWidgetDefault();
+    getWidgetByFieldId(widgets, props.id) ||
+    getWidgetFromTaggedValues(widgets, props.widgetOptions) ||
+    getWidgetByName(widgets, props.widget) ||
+    getWidgetByChoices(widgets, props) ||
+    getWidgetByVocabulary(widgets, props.vocabulary) ||
+    getWidgetByVocabularyFromHint(widgets, props) ||
+    getWidgetByFactory(widgets, props.factory) ||
+    getWidgetByType(widgets, props.type) ||
+    getWidgetDefault(widgets);
 
   if (props.mode === MODE_HIDDEN) {
     return null;
@@ -166,7 +175,7 @@ const UnconnectedField = (props, { intl }) => {
   // Adding the widget props from tagged values (if any)
   const widgetProps = {
     ...props,
-    ...getWidgetPropsFromTaggedValues(props.widgetOptions),
+    ...getWidgetPropsFromTaggedValues(widgets, props.widgetOptions),
   };
 
   if (props.onOrder) {

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

@@ -15,6 +15,7 @@ import {
   getBlocksLayoutFieldname,
   hasBlocksData,
 } from '@plone/volto/helpers/Blocks/Blocks';
+import { applySchemaEnhancer } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -81,6 +82,8 @@ class Form extends Component {
       definitions: PropTypes.objectOf(PropTypes.any),
       required: PropTypes.arrayOf(PropTypes.string),
     }),
+    widgets: PropTypes.objectOf(PropTypes.any),
+    component: PropTypes.any,
     formData: PropTypes.objectOf(PropTypes.any),
     globalData: PropTypes.objectOf(PropTypes.any),
     metadataFieldsets: PropTypes.arrayOf(PropTypes.string),
@@ -89,6 +92,9 @@ class Form extends Component {
     onSubmit: PropTypes.func,
     onCancel: PropTypes.func,
     submitLabel: PropTypes.string,
+    cancelLabel: PropTypes.string,
+    textButtons: PropTypes.bool,
+    buttonComponent: PropTypes.any,
     resetAfterSubmit: PropTypes.bool,
     resetOnCancel: PropTypes.bool,
     isEditForm: PropTypes.bool,
@@ -119,9 +125,14 @@ class Form extends Component {
    */
   static defaultProps = {
     formData: null,
+    widgets: null,
+    component: null,
     onSubmit: null,
     onCancel: null,
     submitLabel: null,
+    cancelLabel: null,
+    textButtons: false,
+    buttonComponent: null,
     resetAfterSubmit: false,
     resetOnCancel: false,
     isEditForm: false,
@@ -272,22 +283,19 @@ class Form extends Component {
         selected: null,
       });
     }
-    if (requestError) {
+
+    if (requestError && prevProps.requestError !== requestError) {
       errors =
         FormValidation.giveServerErrorsToCorrespondingFields(requestError);
-      if (
-        !isEqual(prevProps.requestError, requestError) ||
-        !isEqual(this.state.errors, errors)
-      ) {
-        activeIndex = FormValidation.showFirstTabWithErrors({
-          errors,
-          schema: this.props.schema,
-        });
-        this.setState({
-          errors,
-          activeIndex,
-        });
-      }
+      activeIndex = FormValidation.showFirstTabWithErrors({
+        errors,
+        schema: this.props.schema,
+      });
+
+      this.setState({
+        errors,
+        activeIndex,
+      });
     }
 
     if (this.props.onChangeFormData) {
@@ -551,6 +559,18 @@ class Form extends Component {
             formData: blocks[block],
           });
         }
+
+        if (config.blocks.blocksConfig[blocks[block]['@type']].blockSchema) {
+          blockSchema = applySchemaEnhancer({
+            schema: blockSchema,
+            formData: blocks[block],
+            intl: this.props.intl,
+            blocksConfig: config.blocks.blocksConfig,
+            navRoot: this.props.navRoot,
+            contentType: this.props.content['@type'],
+          });
+        }
+
         const blockErrors = FormValidation.validateFieldsPerFieldset({
           schema: blockSchema,
           formData: blocks[block],
@@ -564,11 +584,13 @@ class Form extends Component {
         }
       });
     }
+
     if (keys(errors).length > 0 || keys(blocksErrors).length > 0) {
       const activeIndex = FormValidation.showFirstTabWithErrors({
         errors,
         schema: this.props.schema,
       });
+
       this.setState({
         errors: {
           ...errors,
@@ -579,23 +601,14 @@ class Form extends Component {
 
       if (keys(errors).length > 0) {
         // Changes the focus to the metadata tab in the sidebar if error
-        toast.error(
-          <Toast
-            error
-            title={this.props.intl.formatMessage(messages.error)}
-            content={
-              <ul>
-                {Object.keys(errors).map((err, index) => (
-                  <li key={index}>
-                    <strong>
-                      {this.props.schema.properties[err].title || err}:
-                    </strong>{' '}
-                    {errors[err]}
-                  </li>
-                ))}
-              </ul>
-            }
-          />,
+        Object.keys(errors).forEach((err) =>
+          toast.error(
+            <Toast
+              error
+              title={this.props.schema.properties[err].title || err}
+              content={errors[err].join(', ')}
+            />,
+          ),
         );
         this.props.setSidebarTab(0);
       } else if (keys(blocksErrors).length > 0) {
@@ -605,12 +618,14 @@ class Form extends Component {
         const errorMessage = Object.entries(
           Object.entries(blocksErrors)[0][1],
         )[0][1];
+        const errorFieldTitle = errorMessage.title || errorField;
+
         toast.error(
           <Toast
             error
             title={this.props.intl.formatMessage(
               messages.blocksFieldsErrorTitle,
-              { errorField },
+              { errorField: errorFieldTitle },
             )}
             content={errorMessage}
           />,
@@ -717,11 +732,16 @@ class Form extends Component {
       navRoot,
       type,
       metadataFieldsets,
+      component,
+      buttonComponent,
     } = this.props;
     const formData = this.state.formData;
     const schema = this.removeBlocksLayoutFields(originalSchema);
     const Container =
       config.getComponent({ name: 'Container' }).component || SemanticContainer;
+    const FormComponent = component || UiForm;
+    const ButtonComponent = buttonComponent || Button;
+
     return this.props.visual ? (
       // Removing this from SSR is important, since react-beautiful-dnd supports SSR,
       // but draftJS don't like it much and the hydration gets messed up
@@ -885,7 +905,7 @@ class Form extends Component {
       )
     ) : (
       <Container>
-        <UiForm
+        <FormComponent
           method="post"
           onSubmit={this.onSubmit}
           error={keys(this.state.errors).length > 0}
@@ -927,6 +947,7 @@ class Form extends Component {
                         ),
                         ...map(item.fields, (field, index) => (
                           <Field
+                            widgets={this.props.widgets}
                             {...schema.properties[field]}
                             id={field}
                             formData={formData}
@@ -982,6 +1003,7 @@ class Form extends Component {
                   )}
                   {map(schema.fieldsets[0].fields, (field) => (
                     <Field
+                      widgets={this.props.widgets}
                       {...schema.properties[field]}
                       id={field}
                       value={formData?.[field]}
@@ -997,47 +1019,97 @@ class Form extends Component {
               )}
               {!this.props.hideActions && (
                 <Segment className="actions" clearing>
-                  {onSubmit && (
-                    <Button
-                      basic
-                      primary
-                      floated="right"
-                      type="submit"
-                      aria-label={
-                        this.props.submitLabel
+                  {onSubmit &&
+                    (this.props.textButtons ? (
+                      <ButtonComponent
+                        primary
+                        floated="right"
+                        type="submit"
+                        aria-label={
+                          this.props.submitLabel
+                            ? this.props.submitLabel
+                            : this.props.intl.formatMessage(messages.save)
+                        }
+                        title={
+                          this.props.submitLabel
+                            ? this.props.submitLabel
+                            : this.props.intl.formatMessage(messages.save)
+                        }
+                        loading={this.props.loading}
+                      >
+                        {this.props.submitLabel
                           ? this.props.submitLabel
-                          : this.props.intl.formatMessage(messages.save)
-                      }
-                      title={
-                        this.props.submitLabel
-                          ? this.props.submitLabel
-                          : this.props.intl.formatMessage(messages.save)
-                      }
-                      loading={this.props.loading}
-                    >
-                      <Icon className="circled" name={aheadSVG} size="30px" />
-                    </Button>
-                  )}
-                  {onCancel && (
-                    <Button
-                      type="button"
-                      basic
-                      secondary
-                      aria-label={this.props.intl.formatMessage(
-                        messages.cancel,
-                      )}
-                      title={this.props.intl.formatMessage(messages.cancel)}
-                      floated="right"
-                      onClick={this.onCancel}
-                    >
-                      <Icon className="circled" name={clearSVG} size="30px" />
-                    </Button>
-                  )}
+                          : this.props.intl.formatMessage(messages.save)}
+                      </ButtonComponent>
+                    ) : (
+                      <ButtonComponent
+                        basic
+                        primary
+                        floated="right"
+                        type="submit"
+                        aria-label={
+                          this.props.submitLabel
+                            ? this.props.submitLabel
+                            : this.props.intl.formatMessage(messages.save)
+                        }
+                        title={
+                          this.props.submitLabel
+                            ? this.props.submitLabel
+                            : this.props.intl.formatMessage(messages.save)
+                        }
+                        loading={this.props.loading}
+                      >
+                        <Icon className="circled" name={aheadSVG} size="30px" />
+                      </ButtonComponent>
+                    ))}
+                  {onCancel &&
+                    (this.props.textButtons ? (
+                      <ButtonComponent
+                        secondary
+                        type="button"
+                        aria-label={
+                          this.props.cancelLabel
+                            ? this.props.cancelLabel
+                            : this.props.intl.formatMessage(messages.cancel)
+                        }
+                        title={
+                          this.props.cancelLabel
+                            ? this.props.cancelLabel
+                            : this.props.intl.formatMessage(messages.cancel)
+                        }
+                        floated="right"
+                        onClick={this.onCancel}
+                      >
+                        {this.props.cancelLabel
+                          ? this.props.cancelLabel
+                          : this.props.intl.formatMessage(messages.cancel)}
+                      </ButtonComponent>
+                    ) : (
+                      <ButtonComponent
+                        basic
+                        secondary
+                        type="button"
+                        aria-label={
+                          this.props.cancelLabel
+                            ? this.props.cancelLabel
+                            : this.props.intl.formatMessage(messages.cancel)
+                        }
+                        title={
+                          this.props.cancelLabel
+                            ? this.props.cancelLabel
+                            : this.props.intl.formatMessage(messages.cancel)
+                        }
+                        floated="right"
+                        onClick={this.onCancel}
+                      >
+                        <Icon className="circled" name={clearSVG} size="30px" />
+                      </ButtonComponent>
+                    ))}
                 </Segment>
               )}
             </Segment.Group>
           </fieldset>
-        </UiForm>
+        </FormComponent>
       </Container>
     );
   }

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

@@ -5,6 +5,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
 import keys from 'lodash/keys';
 import map from 'lodash/map';
 import {
@@ -76,6 +77,7 @@ class ModalForm extends Component {
     submitError: PropTypes.string,
     onSubmit: PropTypes.func.isRequired,
     onCancel: PropTypes.func,
+    onChangeFormData: PropTypes.func,
     open: PropTypes.bool,
     submitLabel: PropTypes.string,
     loading: PropTypes.bool,
@@ -207,6 +209,33 @@ class ModalForm extends Component {
     });
   }
 
+  /**
+   * Component did update lifecycle handler
+   * @param {Object} prevProps
+   * @param {Object} prevState
+   */
+  async componentDidUpdate(prevProps, prevState) {
+    if (this.props.onChangeFormData) {
+      if (!isEqual(prevState?.formData, this.state.formData)) {
+        this.props.onChangeFormData(this.state.formData);
+      }
+    }
+    if (!isEqual(prevProps.formData, this.props.formData)) {
+      let newFormData = {};
+      map(keys(this.props.formData), (field) => {
+        if (!isEqual(prevProps.formData[field], this.props.formData[field])) {
+          newFormData[field] = this.props.formData[field];
+        }
+      });
+      this.setState({
+        formData: {
+          ...this.state.formData,
+          ...newFormData,
+        },
+      });
+    }
+  }
+
   /**
    * Render method.
    * @method render

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

@@ -34,7 +34,7 @@ const ObjectBrowserNav = ({
   const intl = useIntl();
   const isSelected = (item) => {
     let ret = false;
-    if (selected) {
+    if (selected && Array.isArray(selected)) {
       selected
         .filter((item) => item != null)
         .forEach((_item) => {

package/src/components/manage/Sidebar/ObjectBrowserNav.test.jsx

@@ -99,23 +99,44 @@ const currentSearchResults = {
   ],
 };
 
-test('renders a view image component', () => {
+describe('ObjectBrowserNav', () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
-  const component = renderer.create(
-    <Provider store={store}>
-      <ObjectBrowserNav
-        currentSearchResults={currentSearchResults}
-        isSelectable={() => {
-          return true;
-        }}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  const baseProps = {
+    currentSearchResults,
+    isSelectable: () => true,
+    handleClickOnItem: jest.fn(),
+    handleDoubleClickOnItem: jest.fn(),
+    mode: 'link',
+    view: 'list',
+    navigateTo: jest.fn(),
+  };
+
+  it('renders a view image component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <ObjectBrowserNav {...baseProps} />
+      </Provider>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it('handles selected as empty object without errors', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <ObjectBrowserNav
+          {...baseProps}
+          selected={{}} // Empty object being tested
+        />
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });