@plone/volto 19.1.4 → 19.1.6

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.1.4",
+  "version": "19.1.6",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -113,7 +113,6 @@
     "is-url": "1.2.4",
     "jotai": "2.11.3",
     "jwt-decode": "2.2.0",
-    "linkify-it": "3.0.2",
     "locale": "0.1.0",
     "lodash": "4.18.1",
     "lodash-move": "1.1.1",
@@ -178,9 +177,9 @@
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^14.0.0",
     "@plone/registry": "3.0.1",
-    "@plone/components": "4.2.0",
-    "@plone/volto-slate": "19.0.2",
-    "@plone/scripts": "4.0.1"
+    "@plone/components": "4.2.1",
+    "@plone/scripts": "4.0.1",
+    "@plone/volto-slate": "19.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -290,8 +289,8 @@
     "webpack-node-externals": "3.0.0",
     "@plone/babel-preset-razzle": "^1.0.1",
     "@plone/razzle": "1.0.0",
-    "@plone/razzle-dev-utils": "1.0.0",
     "@plone/types": "2.0.0",
+    "@plone/razzle-dev-utils": "1.0.0",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "scripts": {

package/src/actions/querystringsearch/querystringsearch.js

@@ -17,7 +17,10 @@ export function getQueryStringResults(path, data, subrequest, page) {
     delete requestData.depth;
     requestData.query.forEach((q) => {
       if (q.i === 'path') {
-        q.v += '::' + data.depth;
+        // 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 hasEmbeddedDepth = /::\d+$/.test(q.v);
+        if (!hasEmbeddedDepth) q.v += '::' + data.depth;
       }
     });
   }

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

@@ -73,4 +73,81 @@ describe('querystringsearch action', () => {
     expect(action.request.path).toEqual('/@querystring-search');
     expect(action.request.data.sort_order).toEqual('descending');
   });
+
+  describe('depth handling', () => {
+    it('appends depth to path value when depth is set and path has no embedded depth', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder',
+          },
+        ],
+        depth: 2,
+      };
+      const action = getQueryStringResults('', data);
+
+      const pathQuery = action.request.data.query.find((q) => q.i === 'path');
+      expect(pathQuery.v).toEqual('/folder::2');
+    });
+
+    it('does not double-append depth when path value already contains an embedded depth', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder::1',
+          },
+        ],
+        depth: 3,
+      };
+      const action = getQueryStringResults('', data);
+
+      const pathQuery = action.request.data.query.find((q) => q.i === 'path');
+      expect(pathQuery.v).toEqual('/folder::1');
+    });
+
+    it('removes depth from the top-level request data', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder',
+          },
+        ],
+        depth: 2,
+      };
+      const action = getQueryStringResults('', data);
+
+      expect(action.request.data.depth).toBeUndefined();
+    });
+
+    it('handles mixed path entries: appends depth only to those without embedded depth', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder-a',
+          },
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder-b::5',
+          },
+        ],
+        depth: 2,
+      };
+      const action = getQueryStringResults('', data);
+
+      const [pathA, pathB] = action.request.data.query.filter(
+        (q) => q.i === 'path',
+      );
+      expect(pathA.v).toEqual('/folder-a::2');
+      expect(pathB.v).toEqual('/folder-b::5');
+    });
+  });
 });

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/ArrayWidget.jsx

@@ -328,7 +328,8 @@ class ArrayWidget extends Component {
             <SelectComponent
               menuShouldScrollIntoView={false}
               id={`field-${this.props.id}`}
-              aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
+              fieldTitle={this.props.title}
+              aria-label={this.props.title || undefined}
               key={this.props.id}
               isDisabled={this.props.disabled || this.props.isDisabled}
               className="react-select-container"
@@ -400,7 +401,7 @@ class ArrayWidget extends Component {
                   )
                 )
               }
-              isClearable
+              isClearable={!this.props.required}
               isMulti
             />
           </SortableContext>

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('. ');

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

@@ -7,10 +7,6 @@ const messages = defineMessages({
     id: 'Criteria',
     defaultMessage: 'Criteria',
   },
-  depth: {
-    id: 'Depth',
-    defaultMessage: 'Depth',
-  },
   SortOn: {
     id: 'Sort on',
     defaultMessage: 'Sort on',
@@ -38,16 +34,7 @@ export const objectSchema = ({ intl, isDisabled, value }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: [
-        'query',
-        ...(value?.query?.filter((q) => q.i === 'path').length > 0
-          ? ['depth']
-          : []),
-        'sort_on',
-        'sort_order_boolean',
-        'limit',
-        'b_size',
-      ],
+      fields: ['query', 'sort_on', 'sort_order_boolean', 'limit', 'b_size'],
     },
   ],
   properties: {
@@ -55,10 +42,6 @@ export const objectSchema = ({ intl, isDisabled, value }) => ({
       title: intl.formatMessage(messages.Criteria),
       widget: 'query',
     },
-    depth: {
-      title: intl.formatMessage(messages.depth),
-      type: 'number',
-    },
     sort_on: {
       title: intl.formatMessage(messages.SortOn),
       widget: 'query_sort_on',

package/src/components/manage/Widgets/QuerystringWidget.test.jsx

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { waitFor } from '@testing-library/react';
 
-import QuerystringWidget from './QuerystringWidget';
+import QuerystringWidget, { objectSchema } from './QuerystringWidget';
 
 const mockStore = configureStore();
 
@@ -25,6 +25,47 @@ test('renders an querystring widget component', async () => {
   expect(component.toJSON()).toMatchSnapshot();
 });
 
+describe('objectSchema', () => {
+  const mockIntl = { formatMessage: ({ defaultMessage }) => defaultMessage };
+
+  it('does not include depth in the default fieldset', () => {
+    const schema = objectSchema({ intl: mockIntl });
+    const fields = schema.fieldsets[0].fields;
+
+    expect(fields).not.toContain('depth');
+    expect(fields).toEqual([
+      'query',
+      'sort_on',
+      'sort_order_boolean',
+      'limit',
+      'b_size',
+    ]);
+  });
+
+  it('does not include depth in the schema properties', () => {
+    const schema = objectSchema({ intl: mockIntl });
+
+    expect(schema.properties).not.toHaveProperty('depth');
+  });
+
+  it('does not include depth even when value contains a path criterion', () => {
+    const value = {
+      query: [
+        {
+          i: 'path',
+          o: 'plone.app.querystring.operation.string.path',
+          v: '/folder',
+        },
+      ],
+    };
+    const schema = objectSchema({ intl: mockIntl, value });
+    const fields = schema.fieldsets[0].fields;
+
+    expect(fields).not.toContain('depth');
+    expect(schema.properties).not.toHaveProperty('depth');
+  });
+});
+
 test('can take a schemaEnhancer', async () => {
   const store = mockStore({
     querystring: { indexes: {} },

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

@@ -33,12 +33,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 file here to upload a new file',
-    defaultMessage: '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',