@plone/volto 18.0.0-alpha.40 → 18.0.0-alpha.42

package/src/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -49,10 +49,26 @@ const applyDefaults = (data, root) => {
       v: root || '/',
     },
   ];
+
+  const searchBySearchableText = data.query.filter(
+    (item) => item['i'] === 'SearchableText',
+  ).length;
+
+  const sort_on = data?.sort_on
+    ? { sort_on: data.sort_on }
+    : searchBySearchableText === 0
+      ? { sort_on: 'effective' }
+      : {};
+  const sort_order = data?.sort_order
+    ? { sort_order: data.sort_order }
+    : searchBySearchableText === 0
+      ? { sort_order: 'descending' }
+      : {};
+
   return {
     ...data,
-    sort_on: data?.sort_on || 'effective',
-    sort_order: data?.sort_order || 'descending',
+    ...sort_on,
+    ...sort_order,
     query: data?.query?.length ? data.query : defaultQuery,
   };
 };

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -321,7 +321,7 @@ const withSearch = (options) => (WrappedComponent) => {
     const previousUrlQuery = usePrevious(urlQuery);
 
     // During first render the previousUrlQuery is undefined and urlQuery
-    // is empty so it ressetting the facet when you are navigating but during reload we have urlQuery and we need
+    // is empty so it resetting the facet when you are navigating but during reload we have urlQuery and we need
     // to set the facet at first render.
     const preventOverrideOfFacetState =
       previousUrlQuery === undefined && urlQuery.length === 0;

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

@@ -31,8 +31,15 @@ const messages = defineMessages({
 });
 
 const TeaserData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
-    props;
+  const {
+    block,
+    blocksConfig,
+    blocksErrors,
+    data,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const dispatch = useDispatch();
   const intl = useIntl();
 
@@ -161,6 +168,7 @@ const TeaserData = (props) => {
       actionButton={data.overwrite && ActionButton}
       navRoot={navRoot}
       contentType={contentType}
+      errors={blocksErrors}
     />
   );
 };

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

@@ -29,6 +29,7 @@ class Edit extends Component {
             block={this.props.block}
             navRoot={this.props.navRoot}
             contentType={this.props.contentType}
+            errors={this.props.blocksErrors}
           />
         </SidebarPortal>
       </>

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

@@ -116,7 +116,7 @@ class Edit extends Component {
   /**
    * Keydown handler on Variant Menu Form
    * This is required since the ENTER key is already mapped to a onKeyDown
-   * event and needs to be overriden with a child onKeyDown.
+   * event and needs to be overridden with a child onKeyDown.
    * @method onKeyDownVariantMenuForm
    * @param {Object} e Event object
    * @returns {undefined}

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

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

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

@@ -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: {

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

@@ -213,6 +213,7 @@ class ContentTypeSchema extends Component {
           title: 'Form schema',
           type: 'schema',
           id: 'schema',
+          widget: 'schema',
         },
       },
       required: [],

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

@@ -389,7 +389,7 @@ class UndoControlpanel extends Component {
   }
 
   /**
-   * Handle next and prev buttons visiblity when transactions are sorted
+   * Handle next and prev buttons visibility when transactions are sorted
    * @method handleSortedNextPrevButtons
    * @returns {undefined}
    */
@@ -412,7 +412,7 @@ class UndoControlpanel extends Component {
   }
 
   /**
-   * Handle next and prev buttons visiblity when transactions are not sorted
+   * Handle next and prev buttons visibility when transactions are not sorted
    * @method handleNotSortedNextPrevButtons
    * @returns {undefined}
    */
@@ -435,7 +435,7 @@ class UndoControlpanel extends Component {
   }
 
   /**
-   * Handle next, prev buttons and table visiblity
+   * Handle next, prev buttons and table visibility
    * @method handleTableVisiblity
    * @returns {undefined}
    */

package/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { cloneDeep, uniqBy } from 'lodash';
+import React, { useEffect, useState, useMemo } from 'react';
+import { cloneDeep, uniqBy, debounce } from 'lodash';
 import { useIntl } from 'react-intl';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import jwtDecode from 'jwt-decode';
@@ -114,25 +114,41 @@ const ListingTemplate = ({
     matrix_options = [];
   }
 
+  const debouncedListUsers = useMemo(
+    () =>
+      debounce((query_user, groups_filter, userLimit) => {
+        dispatch(
+          listUsers({
+            search: query_user,
+            groups_filter: groups_filter.map((el) => el.value),
+            limit: userLimit,
+          }),
+        );
+      }, 300),
+    [dispatch],
+  );
+
   useEffect(() => {
     // Get users.
     if (show_users) {
-      dispatch(
-        listUsers({
-          search: query_user,
-          groups_filter: groups_filter.map((el) => el.value),
-          limit: userLimit,
-        }),
-      );
+      debouncedListUsers(query_user, groups_filter, userLimit);
     }
-  }, [dispatch, query_user, groups_filter, show_users, userLimit]);
+  }, [debouncedListUsers, query_user, groups_filter, show_users, userLimit]);
+
+  const debouncedListGroups = useMemo(
+    () =>
+      debounce((query_group) => {
+        dispatch(listGroups(query_group));
+      }, 300),
+    [dispatch],
+  );
 
   useEffect(() => {
     // Get matrix groups.
     if (show_matrix_options) {
-      dispatch(listGroups(query_group));
+      debouncedListGroups(query_group);
     }
-  }, [dispatch, query_group, show_matrix_options, groups_filter]);
+  }, [debouncedListGroups, query_group, show_matrix_options]);
 
   const onSelectOptionHandler = (selectedvalue, checked, singleClick) => {
     singleClick = singleClick ?? false;

package/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { Checkbox, Form, Input } from 'semantic-ui-react';
 
-import { isEqual } from 'lodash';
+import { isEqual, debounce } from 'lodash';
 
 import { messages } from '@plone/volto/helpers';
 import { listGroups } from '@plone/volto/actions'; // getRegistry
@@ -38,12 +38,20 @@ const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
     });
   }
 
+  const debouncedListGroups = useMemo(
+    () =>
+      debounce((query_group_filter) => {
+        dispatch(listGroups('', query_group_filter));
+      }, 300),
+    [dispatch],
+  );
+
   useEffect(() => {
     // TODO fetch group for at least query_group_filter.length > 1?
     if (!many_groups || (many_groups && query_group_filter.length > 1)) {
-      dispatch(listGroups('', query_group_filter));
+      debouncedListGroups(query_group_filter);
     }
-  }, [dispatch, many_groups, query_group_filter]);
+  }, [debouncedListGroups, many_groups, query_group_filter]);
 
   const onReset = (event) => {
     // event.preventDefault();

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

@@ -12,6 +12,7 @@ import {
   FormValidation,
   getBlocksFieldname,
   getBlocksLayoutFieldname,
+  hasBlocksData,
   messages,
 } from '@plone/volto/helpers';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -349,7 +350,7 @@ class Form extends Component {
 
   /**
    * If user clicks on input, the form will be not considered pristine
-   * this will avoid onBlur effects without interraction with the form
+   * this will avoid onBlur effects without interaction with the form
    * @param {Object} e event
    */
   onClickInput(e) {
@@ -527,30 +528,92 @@ class Form extends Component {
         })
       : {};
 
-    if (keys(errors).length > 0) {
+    let blocksErrors = {};
+
+    if (hasBlocksData(formData)) {
+      // Validate blocks
+      const blocks = this.state.formData[getBlocksFieldname(formData)];
+      const blocksLayout =
+        this.state.formData[getBlocksLayoutFieldname(formData)];
+      const defaultSchema = {
+        properties: {},
+        fieldsets: [],
+        required: [],
+      };
+      blocksLayout.items.forEach((block) => {
+        let blockSchema =
+          config.blocks.blocksConfig[blocks[block]['@type']].blockSchema ||
+          defaultSchema;
+        if (typeof blockSchema === 'function') {
+          blockSchema = blockSchema({
+            intl: this.props.intl,
+            formData: blocks[block],
+          });
+        }
+        const blockErrors = FormValidation.validateFieldsPerFieldset({
+          schema: blockSchema,
+          formData: blocks[block],
+          formatMessage: this.props.intl.formatMessage,
+        });
+        if (keys(blockErrors).length > 0) {
+          blocksErrors = {
+            ...blocksErrors,
+            [block]: { ...blockErrors },
+          };
+        }
+      });
+    }
+
+    if (keys(errors).length > 0 || keys(blocksErrors).length > 0) {
       const activeIndex = FormValidation.showFirstTabWithErrors({
         errors,
         schema: this.props.schema,
       });
-      this.setState(
-        {
-          errors,
-          activeIndex,
-        },
-        () => {
-          Object.keys(errors).forEach((err) =>
-            toast.error(
-              <Toast
-                error
-                title={this.props.schema.properties[err].title || err}
-                content={errors[err].join(', ')}
-              />,
-            ),
-          );
+
+      this.setState({
+        errors: {
+          ...errors,
+          ...(!isEmpty(blocksErrors) && { blocks: blocksErrors }),
         },
-      );
-      // Changes the focus to the metadata tab in the sidebar if error
-      this.props.setSidebarTab(0);
+        activeIndex,
+      });
+
+      if (keys(errors).length > 0) {
+        // Changes the focus to the metadata tab in the sidebar if error
+        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) {
+        const errorField = Object.entries(
+          Object.entries(blocksErrors)[0][1],
+        )[0][0];
+        const errorMessage = Object.entries(
+          Object.entries(blocksErrors)[0][1],
+        )[0][1];
+        toast.error(
+          <Toast
+            error
+            title={this.props.intl.formatMessage(
+              messages.blocksFieldsErrorTitle,
+              { errorField },
+            )}
+            content={errorMessage}
+          />,
+        );
+        this.props.setSidebarTab(1);
+        this.props.setUIState({
+          selected: Object.keys(blocksErrors)[0],
+          multiSelected: [],
+          hovered: null,
+        });
+      }
     } else {
       // Get only the values that have been modified (Edit forms), send all in case that
       // it's an add form
@@ -730,6 +793,8 @@ class Form extends Component {
                 history={this.props.history}
                 location={this.props.location}
                 token={this.props.token}
+                errors={this.state.errors}
+                blocksErrors={this.state.errors.blocks}
               />
               {this.state.isClient &&
                 this.state.sidebarMetadataIsAvailable &&

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

@@ -142,7 +142,6 @@ const InlineForm = (props) => {
           content={error.message}
         />
       )}
-
       <div id={`blockform-fieldset-${defaultFieldset.id}`}>
         <Segment className="form attached">
           {map(defaultFieldset.fields, (field, index) => (
@@ -153,11 +152,11 @@ const InlineForm = (props) => {
               focus={index === focusIndex}
               value={formData[field]}
               required={schema.required.indexOf(field) !== -1}
-              onChange={(id, value) => {
-                onChangeField(id, value);
+              onChange={(id, value, itemInfo) => {
+                onChangeField(id, value, itemInfo);
               }}
               key={field}
-              error={errors[field]}
+              error={errors?.[block]?.[field] || {}}
               block={block}
             />
           ))}
@@ -166,7 +165,6 @@ const InlineForm = (props) => {
           )}
         </Segment>
       </div>
-
       {other.map((fieldset, index) => (
         <Accordion fluid styled className="form" key={fieldset.id}>
           <div key={fieldset.id} id={`blockform-fieldset-${fieldset.id}`}>
@@ -199,7 +197,7 @@ const InlineForm = (props) => {
                         onChangeField(id, value);
                       }}
                       key={field}
-                      error={errors[field]}
+                      error={errors?.[block]?.[field] || {}}
                       block={block}
                     />
                   ))}

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

@@ -137,7 +137,7 @@ class ModalForm extends Component {
 
   /**
    * If user clicks on input, the form will be not considered pristine
-   * this will avoid onBlur effects without interraction with the form
+   * this will avoid onBlur effects without interaction with the form
    * @param {Object} e event
    */
   onClickInput(e) {

package/src/components/manage/History/History.jsx

@@ -345,7 +345,7 @@ export default compose(
   asyncConnect([
     {
       key: 'actions',
-      // Dispatch async/await to make the operation syncronous, otherwise it returns
+      // Dispatch async/await to make the operation synchronous, otherwise it returns
       // before the promise is resolved
       promise: async ({ location, store: { dispatch } }) =>
         await dispatch(listActions(getBaseUrl(location.pathname))),

package/src/components/manage/Pluggable/Pluggable.test.js

@@ -31,7 +31,7 @@ describe('<Pluggable />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('Works with an empy Plug', () => {
+  it('Works with an empty Plug', () => {
     const { container } = render(
       <PluggablesProvider>
         <Pluggable name="test" />

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

@@ -623,7 +623,7 @@ class Toolbar extends Component {
                 aria-label={this.props.intl.formatMessage(
                   messages.shrinkToolbar,
                 )}
-                className={cx({
+                className={cx('toolbar-handler-button', {
                   [this.props.content?.review_state]:
                     this.props.content?.review_state,
                 })}

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

@@ -129,7 +129,7 @@ const compareOption = (inputValue = '', option, accessors) => {
  * @class ArrayWidget
  * @extends Component
  *
- * A createable select array widget will be rendered if the named vocabulary is
+ * A creatable select array widget will be rendered if the named vocabulary is
  * in the widget definition (hint) like:
  *
  * ```
@@ -280,7 +280,7 @@ class ArrayWidget extends Component {
     const { SortableContainer } = this.props.reactSortableHOC;
     const Select = this.props.reactSelect.default;
     const SortableSelect =
-      // It will be only createable if the named vocabulary is in the widget definition
+      // It will be only creatable if the named vocabulary is in the widget definition
       // (hint) like:
       // list_field_voc_unconstrained = schema.List(
       //     title=u"List field with values from vocabulary but not constrained to them.",

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

@@ -14,6 +14,7 @@ import {
   getBaseUrl,
   isInternalURL,
   validateFileUploadSize,
+  usePrevious,
 } from '@plone/volto/helpers';
 import { createContent } from '@plone/volto/actions';
 import { readAsDataURL } from 'promise-file-reader';
@@ -77,6 +78,7 @@ const UnconnectedImageInput = (props) => {
     placeholderLinkInput = '',
     onSelectItem,
   } = props;
+  const imageValue = value?.[0]?.['@id'] || value;
 
   const intl = useIntl();
   const linkEditor = useLinkEditor();
@@ -91,13 +93,14 @@ const UnconnectedImageInput = (props) => {
 
   const requestId = `image-upload-${id}`;
 
-  const { loading, loaded } = props.request;
+  const loaded = props.request.loaded;
   const { content } = props;
   const imageId = content?.['@id'];
   const image = content?.image;
+  let loading = false;
 
   useEffect(() => {
-    if (uploading && !loading && loaded) {
+    if (uploading && loading && loaded) {
       setUploading(false);
       onChange(id, imageId, {
         image_field: 'image',
@@ -106,6 +109,8 @@ const UnconnectedImageInput = (props) => {
     }
   }, [loading, loaded, uploading, imageId, image, id, onChange]); // Explicitly list all dependencies
 
+  loading = usePrevious(props.request?.loading);
+
   const handleUpload = React.useCallback(
     (eventOrFile) => {
       if (restrictFileUpload === true) return;
@@ -151,7 +156,7 @@ const UnconnectedImageInput = (props) => {
   }, [restrictFileUpload]);
   const onDragLeave = React.useCallback(() => setDragging(false), []);
 
-  return value ? (
+  return imageValue ? (
     <div
       className="image-upload-widget-image"
       onClick={onFocus}
@@ -161,7 +166,11 @@ const UnconnectedImageInput = (props) => {
       {selected && <ImageToolbar {...props} />}
       <img
         className={props.className}
-        src={`${flattenToAppURL(value)}/@@images/image/${imageSize}`}
+        src={
+          isInternalURL(imageValue)
+            ? `${flattenToAppURL(imageValue)}/@@images/image/${imageSize}`
+            : imageValue
+        }
         alt=""
       />
     </div>
@@ -264,7 +273,7 @@ const UnconnectedImageInput = (props) => {
                 </div>
                 {linkEditor.anchorNode && (
                   <linkEditor.LinkEditor
-                    value={value}
+                    value={imageValue}
                     placeholder={
                       placeholderLinkInput ||
                       intl.formatMessage(messages.linkAnImage)
@@ -302,10 +311,25 @@ export const ImageInput = compose(
   ),
 )(withObjectBrowser(UnconnectedImageInput));
 
-const ImageUploadWidget = (props) => (
-  <FormFieldWrapper {...props} className="image-upload-widget">
-    <ImageInput {...props} />
-  </FormFieldWrapper>
-);
+const ImageUploadWidget = (props) => {
+  const { fieldSet, id, title } = props;
+  return (
+    <FormFieldWrapper
+      {...props}
+      columns={1}
+      className="block image-upload-widget"
+    >
+      <div className="wrapper">
+        <label
+          id={`fieldset-${fieldSet}-field-label-${id}`}
+          htmlFor={`field-${id}`}
+        >
+          {title}
+        </label>
+      </div>
+      <ImageInput {...props} />
+    </FormFieldWrapper>
+  );
+};
 
 export default ImageUploadWidget;

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);