@plone/volto 19.1.5 → 19.2.0

package/src/actions/querystringsearch/querystringsearch.test.js

@@ -74,6 +74,113 @@ describe('querystringsearch action', () => {
     expect(action.request.data.sort_order).toEqual('descending');
   });
 
+  describe('offset', () => {
+    const data = {
+      query: [
+        {
+          i: 'portal_type',
+          o: 'plone.app.querystring.operation.selection.any',
+          v: ['Document'],
+        },
+      ],
+    };
+
+    it('skips the leading items on the first page', () => {
+      const action = getQueryStringResults(
+        '',
+        { ...data, b_size: 10, offset: 3 },
+        'sub',
+        1,
+      );
+
+      expect(action.request.data).toMatchObject({ b_start: 3 });
+    });
+
+    it('stays applied while paginating', () => {
+      const action = getQueryStringResults(
+        '',
+        { ...data, b_size: 10, offset: 3 },
+        'sub',
+        2,
+      );
+
+      expect(action.request.data).toMatchObject({ b_start: 13 });
+    });
+
+    it('tolerates an offset stored as a string by the widget', () => {
+      const action = getQueryStringResults(
+        '',
+        { ...data, b_size: 10, offset: '3' },
+        'sub',
+        2,
+      );
+
+      expect(action.request.data).toMatchObject({ b_start: 13 });
+    });
+
+    it('applies the offset even when no page is requested', () => {
+      const action = getQueryStringResults('', { ...data, offset: 4 }, 'sub');
+
+      expect(action.request.data.b_start).toEqual(4);
+    });
+
+    it('raises the limit by the offset so the listing still gets its items', () => {
+      const action = getQueryStringResults(
+        '',
+        { ...data, b_size: 10, offset: 3, limit: 10 },
+        'sub',
+        1,
+      );
+
+      expect(action.request.data.limit).toEqual(13);
+    });
+
+    // plone.app.querystring's querybuilder only applies limit when truthy, so
+    // a zero limit must reach the backend untouched rather than being raised
+    // to the offset, which would cap the batch at the skipped items.
+    it('keeps a zero limit meaning no limit', () => {
+      const action = getQueryStringResults(
+        '',
+        { ...data, b_size: 10, offset: 3, limit: 0 },
+        'sub',
+        1,
+      );
+
+      expect(action.request.data.limit).toEqual(0);
+    });
+
+    it('leaves the request untouched when nothing is skipped', () => {
+      const withoutOffset = getQueryStringResults(
+        '',
+        { ...data, b_size: 10, limit: 5 },
+        'sub',
+        2,
+      );
+      const withZeroOffset = getQueryStringResults(
+        '',
+        { ...data, b_size: 10, limit: 5, offset: 0 },
+        'sub',
+        2,
+      );
+
+      expect(withoutOffset.request.data).toMatchObject({
+        b_start: 10,
+        limit: 5,
+      });
+      expect(withZeroOffset.request.data).toEqual({
+        ...withoutOffset.request.data,
+        offset: 0,
+      });
+    });
+
+    it('sends no b_start when there is neither a page nor an offset', () => {
+      const action = getQueryStringResults('', data);
+
+      expect(action.request.data.b_start).toBeUndefined();
+      expect(JSON.stringify(action.request.data)).not.toContain('b_start');
+    });
+  });
+
   describe('depth handling', () => {
     it('appends depth to path value when depth is set and path has no embedded depth', () => {
       const data = {

package/src/actions/querystringsearch/querystringsearch.ts

@@ -0,0 +1,135 @@
+/**
+ * Querystring search actions.
+ * @module actions/querystringsearch/querystringsearch
+ */
+
+import { GET_QUERYSTRING_RESULTS } from '@plone/volto/constants/ActionTypes';
+import config from '@plone/volto/registry';
+import {
+  computeBStart,
+  computeLimit,
+  type IntegerLike,
+} from '@plone/volto/helpers/Pagination/Pagination';
+
+/**
+ * A single `plone.app.querystring` criterion: index, operation, value.
+ */
+export interface QuerystringCriterion {
+  i: string;
+  o: string;
+  v?: unknown;
+}
+
+/**
+ * The querystring settings stored on a block. Numeric fields are typed as
+ * `IntegerLike` because they are edited through JSON schema `number` widgets
+ * and may reach us as strings.
+ */
+export interface QuerystringData {
+  query?: QuerystringCriterion[];
+  sort_on?: string;
+  sort_order?: string | boolean | null;
+  b_size?: IntegerLike;
+  offset?: IntegerLike;
+  limit?: IntegerLike;
+  depth?: IntegerLike;
+  [key: string]: unknown;
+}
+
+/**
+ * The payload sent to the `@querystring-search` endpoint. `b_start` is only
+ * present once a page or an offset places the batch past the beginning.
+ */
+export interface QuerystringSearchQuery extends QuerystringData {
+  b_start?: number;
+}
+
+export interface GetQueryStringResultsAction {
+  type: typeof GET_QUERYSTRING_RESULTS;
+  subrequest?: string;
+  request: {
+    op: 'get' | 'post';
+    path: string;
+    data: QuerystringSearchQuery | null;
+  };
+}
+
+/**
+ * Get querystring results.
+ * @function getQueryStringResults
+ * @param {string} path Path to search under.
+ * @param {QuerystringData} data Querystring settings from the block.
+ * @param {string} subrequest Subrequest id used to store the results.
+ * @param {IntegerLike} page 1-based page number. Defaults to the first page.
+ * @returns {GetQueryStringResultsAction} Get querystringsearch results action.
+ */
+export function getQueryStringResults(
+  path: string,
+  data: QuerystringData,
+  subrequest?: string,
+  page?: IntegerLike,
+): GetQueryStringResultsAction {
+  const { settings } = config;
+
+  // fixes https://github.com/plone/volto/issues/1059
+  const requestData: QuerystringData = JSON.parse(JSON.stringify(data));
+
+  if (data?.depth != null) {
+    delete requestData.depth;
+    requestData.query?.forEach((q) => {
+      if (q.i === 'path') {
+        // fixes https://github.com/plone/volto/issues/8349
+        // Skip if depth is already embedded in the path value (e.g. set via object browser)
+        const value = String(q.v);
+        const hasEmbeddedDepth = /::\d+$/.test(value);
+        if (!hasEmbeddedDepth) q.v = `${value}::${data.depth}`;
+      }
+    });
+  }
+
+  // fixes https://github.com/plone/volto/issues/2397
+  if (requestData?.sort_order !== null) {
+    if (typeof requestData.sort_order === 'boolean') {
+      requestData.sort_order = requestData.sort_order
+        ? 'descending'
+        : 'ascending';
+    }
+  }
+
+  const b_start = computeBStart(
+    page,
+    requestData.offset,
+    requestData.b_size,
+    settings.defaultPageSize,
+  );
+  // A listing that skips the first `offset` items still wants `limit` of them
+  // afterwards, so the backend has to return the skipped ones on top.
+  const limit = computeLimit(requestData.offset, requestData.limit);
+
+  const query: QuerystringSearchQuery = {
+    ...requestData,
+    ...(!requestData.b_size && {
+      b_size: settings.defaultPageSize,
+    }),
+    // Keep the payload as it was before offsets existed: a caller that passes
+    // neither a page nor an offset gets no b_start at all, and a limit that
+    // needs no raising is forwarded untouched.
+    ...((page || b_start > 0) && { b_start }),
+    ...(limit !== null && { limit }),
+    query: requestData?.query,
+  };
+
+  return {
+    type: GET_QUERYSTRING_RESULTS,
+    subrequest,
+    request: {
+      op: settings.querystringSearchGet ? 'get' : 'post',
+      path: `${path}/@querystring-search${
+        settings.querystringSearchGet
+          ? `?query=${encodeURIComponent(JSON.stringify(query))}`
+          : ''
+      }`,
+      data: settings.querystringSearchGet ? null : query,
+    },
+  };
+}

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -38,6 +38,11 @@ export default function getListingBlockAsyncData(props) {
         path,
         {
           ...data.querystring,
+          // Shape the request exactly as withQuerystringResults does on the
+          // client, so the first paint and the re-render agree. The offset is
+          // turned into b_start by the action itself: computing it here would
+          // apply it twice.
+          offset: data.querystring.offset || 0,
           ...(resolvedExtensions?.variation?.fullobjects
             ? { fullobjects: 1 }
             : { metadata_fields: '_all' }),

package/src/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -7,6 +7,10 @@ import { getContent } from '@plone/volto/actions/content/content';
 import { getQueryStringResults } from '@plone/volto/actions/querystringsearch/querystringsearch';
 import { usePagination } from '@plone/volto/helpers/Utils/usePagination';
 import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import {
+  computeTotalPages,
+  computeVisibleTotal,
+} from '@plone/volto/helpers/Pagination/Pagination';
 
 import config from '@plone/volto/registry';
 
@@ -37,6 +41,7 @@ export default function withQuerystringResults(WrappedComponent) {
       variation?.fullobjects ? { fullobjects: 1 } : { metadata_fields: '_all' },
       {
         b_size: b_size,
+        offset: querystring?.offset || 0,
       },
       ...copyFields.map((name) =>
         Object.keys(querystring).includes(name)
@@ -62,14 +67,22 @@ export default function withQuerystringResults(WrappedComponent) {
       ? querystringResults?.[subrequestID]?.items || []
       : folderItems;
 
+    // The backend counts the items the offset skips in its total, but the
+    // listing never shows them. Everything the user sees — the page count and
+    // the result counter — is about the items past the offset.
+    const subrequestTotal = querystringResults?.[subrequestID]?.total;
+    const visibleTotal = computeVisibleTotal(
+      subrequestTotal,
+      adaptedQuery.offset,
+    );
+
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
-    const showAsQueryListing =
-      hasQuery && querystringResults?.[subrequestID]?.total > b_size;
+    const showAsQueryListing = hasQuery && visibleTotal > b_size;
 
     const totalPages = showAsFolderListing
-      ? Math.ceil(content.items_total / b_size)
+      ? computeTotalPages(content.items_total, b_size)
       : showAsQueryListing
-        ? Math.ceil(querystringResults[subrequestID].total / b_size)
+        ? computeTotalPages(visibleTotal, b_size)
         : 0;
 
     const prevBatch = showAsFolderListing
@@ -135,7 +148,7 @@ export default function withQuerystringResults(WrappedComponent) {
       <WrappedComponent
         {...props}
         onPaginationChange={(e, { activePage }) => setCurrentPage(activePage)}
-        total={querystringResults?.[subrequestID]?.total}
+        total={subrequestTotal === undefined ? undefined : visibleTotal}
         batch_size={b_size}
         currentPage={currentPage}
         totalPages={totalPages}

package/src/components/manage/Controlpanels/BlockTypes.test.ts

@@ -0,0 +1,132 @@
+import { createIntl, createIntlCache } from 'react-intl';
+import type { BlocksConfigData } from '@plone/types';
+import { sortConfigBlocks } from './BlockTypes';
+
+const intl = createIntl(
+  { locale: 'en', messages: { Teaser: 'Destaque' } },
+  createIntlCache(),
+);
+
+// `BlockConfigBase` types id and title as required, so a malformed entry
+// cannot be expressed through it. That mismatch between the type and the
+// configuration is the bug these tests cover, so the fixtures go around it.
+const asBlocksConfig = (config: Record<string, unknown>) =>
+  config as unknown as BlocksConfigData;
+
+describe('sortConfigBlocks', () => {
+  it('lists a registered block', () => {
+    const blocks = sortConfigBlocks(
+      asBlocksConfig({ image: { id: 'image', title: 'Image' } }),
+      intl,
+    );
+
+    expect(blocks).toEqual([{ id: 'image', title: 'Image' }]);
+  });
+
+  it('translates the title', () => {
+    const blocks = sortConfigBlocks(
+      asBlocksConfig({ teaser: { id: 'teaser', title: 'Teaser' } }),
+      intl,
+    );
+
+    expect(blocks[0].title).toEqual('Destaque');
+  });
+
+  it('sorts by the translated title, not by the config order', () => {
+    const blocks = sortConfigBlocks(
+      asBlocksConfig({
+        zebra: { id: 'zebra', title: 'Zebra' },
+        apple: { id: 'apple', title: 'Apple' },
+        // 'Teaser' translates to 'Destaque', so it sorts before 'Zebra'.
+        teaser: { id: 'teaser', title: 'Teaser' },
+      }),
+      intl,
+    );
+
+    expect(blocks.map((block) => block.title)).toEqual([
+      'Apple',
+      'Destaque',
+      'Zebra',
+    ]);
+  });
+
+  it('keeps the rest of the block config', () => {
+    const blocks = sortConfigBlocks(
+      asBlocksConfig({
+        image: {
+          id: 'image',
+          title: 'Image',
+          icon: 'image.svg',
+          group: 'media',
+        },
+      }),
+      intl,
+    );
+
+    expect(blocks[0]).toMatchObject({ icon: 'image.svg', group: 'media' });
+  });
+
+  describe('entries that are not blocks', () => {
+    // An add-on that configures a block which was never registered leaves an
+    // entry behind carrying only what it set. Listing it would link to a block
+    // that does not exist, and a row with no id crashes the table.
+    it('drops an entry with neither an id nor a title', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({
+          image: { id: 'image', title: 'Image' },
+          accordion: { addPermission: [] },
+        }),
+        intl,
+      );
+
+      expect(blocks).toEqual([{ id: 'image', title: 'Image' }]);
+    });
+
+    it('drops an entry with an id but no title', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({ accordion: { id: 'accordion' } }),
+        intl,
+      );
+
+      expect(blocks).toEqual([]);
+    });
+
+    it('drops an entry with a title but no id', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({ accordion: { title: 'Accordion' } }),
+        intl,
+      );
+
+      expect(blocks).toEqual([]);
+    });
+
+    it('does not fall back to the config key for a missing id', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({ accordion: { title: 'Accordion' } }),
+        intl,
+      );
+
+      expect(blocks.map((block) => block.id)).not.toContain('accordion');
+    });
+
+    it('gives every listed block an id, so the table can key its rows', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({
+          image: { id: 'image', title: 'Image' },
+          accordion: { addPermission: [] },
+          teaser: { id: 'teaser' },
+        }),
+        intl,
+      );
+
+      expect(blocks.length).toBeGreaterThan(0);
+      for (const block of blocks) {
+        expect(block.id).toBeTruthy();
+      }
+    });
+  });
+
+  it('returns nothing when no block is configured', () => {
+    expect(sortConfigBlocks(asBlocksConfig({}), intl)).toEqual([]);
+  });
+});

package/src/components/manage/Controlpanels/BlockTypes.tsx

@@ -5,6 +5,7 @@ import { useClient } from '@plone/volto/hooks';
 import config from '@plone/volto/registry';
 import { createPortal } from 'react-dom';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { useEffect } from 'react';
 import { getBlockTypes } from '@plone/volto/actions/blockTypes/blockTypes';
@@ -15,6 +16,7 @@ import UniversalLink from '@plone/volto/components/manage/UniversalLink/Universa
 
 import backSVG from '@plone/volto/icons/back.svg';
 import type { Location } from 'history';
+import type { BlocksConfigData } from '@plone/types';
 
 const messages = defineMessages({
   back: {
@@ -53,6 +55,35 @@ type SelectorState = {
   blockTypes: BlockTypesState;
 };
 
+/**
+ * List the configured blocks, by title.
+ *
+ * An add-on can configure a block that was never registered — enhancing one
+ * that ships with another add-on, say — which leaves an entry behind that is
+ * not a block at all, with no id or no title. `BlockConfigBase` says both are
+ * always there, but the config disagrees, so drop those entries rather than
+ * list a block that does not exist.
+ * @function sortConfigBlocks
+ * @param {BlocksConfigData} blocksConfig The blocks configuration.
+ * @param {IntlShape} intl Used to translate each block title.
+ * @returns {Array} The configured blocks, sorted by translated title.
+ */
+export function sortConfigBlocks(
+  blocksConfig: BlocksConfigData,
+  intl: IntlShape,
+) {
+  return Object.entries(blocksConfig)
+    .filter(([, blockConfig]) => blockConfig.id && blockConfig.title)
+    .map(([, blockConfig]) => ({
+      ...blockConfig,
+      title: intl.formatMessage({
+        id: blockConfig.title,
+        defaultMessage: blockConfig.title,
+      }),
+    }))
+    .sort((a, b) => (a.title === b.title ? 0 : a.title > b.title ? 1 : -1));
+}
+
 const BlockTypesControlpanel = (props: RouteProps) => {
   const { location } = props;
   const intl = useIntl();
@@ -62,17 +93,7 @@ const BlockTypesControlpanel = (props: RouteProps) => {
   const pathname = location.pathname;
   const isClient = useClient();
 
-  const blocks = Object.entries(blocksConfig)
-    .map(([key, blockConfig]) => ({
-      ...blockConfig,
-      title: blockConfig.title
-        ? intl.formatMessage({
-            id: blockConfig.title,
-            defaultMessage: blockConfig.title,
-          })
-        : blockConfig.id ?? key,
-    }))
-    .sort((a, b) => (a.title === b.title ? 0 : a.title > b.title ? 1 : -1));
+  const blocks = sortConfigBlocks(blocksConfig, intl);
 
   useEffect(() => {
     dispatch(getBlockTypes());

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

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { Input, Segment, Breadcrumb } from 'semantic-ui-react';
 
+import debounce from 'lodash/debounce';
 import join from 'lodash/join';
 
 // These absolute imports (without using the corresponding centralized index.js) are required
@@ -159,6 +160,22 @@ class ObjectBrowserBody extends Component {
       view: this.props.mode === 'image' ? 'icons' : 'list',
     };
     this.searchInputRef = React.createRef();
+    // Debounce the live-search dispatch so rapid keystrokes do not produce a
+    // burst of overlapping requests whose responses may resolve out of order
+    // (an older, less-filtered response arriving after the latest one would
+    // visually "reset" the list to look unfiltered).
+    this.debouncedSearch = debounce(this.doSearch, 300);
+  }
+
+  /**
+   * Component will unmount
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    if (this.debouncedSearch) {
+      this.debouncedSearch.cancel();
+    }
   }
 
   /**
@@ -248,8 +265,7 @@ class ObjectBrowserBody extends Component {
       view: prevState.view === 'icons' ? 'list' : 'icons',
     }));
 
-  onSearch = (e) => {
-    const text = flattenToAppURL(e.target.value);
+  doSearch = (text) => {
     if (text.startsWith('/')) {
       this.setState({ currentFolder: text });
       this.props.searchContent(
@@ -286,6 +302,11 @@ class ObjectBrowserBody extends Component {
     }
   };
 
+  onSearch = (e) => {
+    const text = flattenToAppURL(e.target.value);
+    this.debouncedSearch(text);
+  };
+
   onSelectItem = (item) => {
     const url = item['@id'];
     const { block, data, mode, dataName, onChangeBlock } = this.props;

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import find from 'lodash/find';
+import { Dimmer, Loader } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 
 import Toast from '@plone/volto/components/manage/Toast/Toast';
@@ -103,6 +104,10 @@ const messages = defineMessages({
     id: 'workingCopyGenericError',
     defaultMessage: 'An error occurred while performing this operation.',
   },
+  Loading: {
+    id: 'Loading',
+    defaultMessage: 'Loading',
+  },
 });
 
 const More = (props) => {
@@ -123,6 +128,8 @@ const More = (props) => {
   const workingCopyApply = workingCopy?.apply.loading;
   const workingCopyCreate = workingCopy?.create.loading;
   const workingCopyRemove = workingCopy?.remove.loading;
+  const isWorkingCopyLoading =
+    workingCopyApply || workingCopyCreate || workingCopyRemove;
 
   const prevWorkingCopyApplyLoading = usePrevious(workingCopyApply);
   const prevWorkingCopyCreateLoading = usePrevious(workingCopyCreate);
@@ -216,6 +223,9 @@ const More = (props) => {
           : null,
       }}
     >
+      <Dimmer active={isWorkingCopyLoading} inverted>
+        <Loader>{intl.formatMessage(messages.Loading)}</Loader>
+      </Dimmer>
       <header>
         <h2>{content.title}</h2>
         <button
@@ -335,6 +345,7 @@ const More = (props) => {
           <li>
             <button
               aria-label={intl.formatMessage(messages.CreateWorkingCopy)}
+              disabled={workingCopyCreate}
               onClick={() => {
                 dispatch(createWorkingCopy(path)).then((response) => {
                   history.push(flattenToAppURL(response['@id']));
@@ -354,6 +365,7 @@ const More = (props) => {
           <li>
             <button
               aria-label={intl.formatMessage(messages.applyWorkingCopy)}
+              disabled={workingCopyApply}
               onClick={() => {
                 dispatch(applyWorkingCopy(path)).then((response) => {
                   history.push(flattenToAppURL(content.working_copy_of['@id']));
@@ -395,6 +407,7 @@ const More = (props) => {
           <li>
             <button
               aria-label={intl.formatMessage(messages.removeWorkingCopy)}
+              disabled={workingCopyRemove}
               onClick={() => {
                 dispatch(removeWorkingCopy(path)).then((response) => {
                   history.push(flattenToAppURL(content.working_copy_of['@id']));

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

@@ -35,12 +35,14 @@ const messages = defineMessages({
     defaultMessage: 'Drop files here ...',
   },
   editFile: {
-    id: 'Drop a file here or click to replace the existing file',
-    defaultMessage: 'Drop a file here or click to replace the existing file',
+    id: 'Drop file here to replace the existing file',
+    defaultMessage:
+      'File upload area. Press Enter or click to replace the existing file.',
   },
   fileDrag: {
-    id: 'Drop a file here or click to upload',
-    defaultMessage: 'Drop a file here or click to upload',
+    id: 'Drop file here to upload a new file',
+    defaultMessage:
+      'File upload area. Press Enter or click to open the file browser.',
   },
   replaceFile: {
     id: 'Replace existing file',
@@ -60,8 +62,14 @@ const messages = defineMessages({
     defaultMessage: 'File is not of the accepted type {accept}',
   },
   dragAndDropActionA11y: {
-    id: 'File upload area. Press Enter to open the file browser',
-    defaultMessage: 'File upload area. Press Enter to open the file browser',
+    id: 'Press Enter to browse files from your computer.',
+    defaultMessage:
+      'File upload area. Press Enter or click to open the file browser.',
+  },
+  dragAndDropReplaceA11y: {
+    id: 'File upload area. Press Enter or click to replace the existing file',
+    defaultMessage:
+      'File upload area. Press Enter or click to replace the existing file.',
   },
   requiredField: {
     id: 'This field is required.',
@@ -180,9 +188,11 @@ const FileWidget = (props) => {
   };
 
   const statusTextA11y = [
-    intl.formatMessage(messages.dragAndDropActionA11y), // Interaction instructions
-    props.required && intl.formatMessage(messages.requiredField), // Required field status
-    value?.filename, // Current file name if a file is uploaded
+    value
+      ? intl.formatMessage(messages.dragAndDropReplaceA11y)
+      : intl.formatMessage(messages.dragAndDropActionA11y),
+    props.required && intl.formatMessage(messages.requiredField),
+    value?.filename,
   ]
     .filter(Boolean)
     .join('. ');