@plone/volto 17.1.0 → 17.2.0

package/CHANGELOG.md

@@ -8,6 +8,25 @@
 
 <!-- towncrier release notes start -->
 
+## 17.2.0 (2023-10-16)
+
+### Feature
+
+- add cypress test for search block via url - @ionlizarazu [#5298](https://github.com/plone/volto/issues/5298)
+
+### Bugfix
+
+- Fix adding multiple path criteria in search and listing blocks. @davisagli [#5317](https://github.com/plone/volto/issues/5317)
+
+
+## 17.1.1 (2023-10-13)
+
+### Bugfix
+
+- Normalize the shape of the image component item prop if it contains the serialized object after creation to match the one in the catalog. @sneridagh [#5266](https://github.com/plone/volto/issues/5266)
+- Added guard in `flattenScales` in edge case image is undefined @sneridagh [#5318](https://github.com/plone/volto/issues/5318)
+
+
 ## 17.1.0 (2023-10-11)
 
 ### Feature

package/news/5298 bugfix

@@ -0,0 +1 @@
+fix the search block for search via url - @ionlizarazu

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.1.0",
+  "version": "17.2.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "17.1.0",
+  "version": "17.2.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx

@@ -19,14 +19,15 @@ test('renders a Lead Image block Sidebar component', () => {
       <LeadImageSidebar
         data={{}}
         properties={{
+          '@id': 'http://localhost:3000/image.png',
           image: {
-            download: 'http://localhost:3000/image.png',
+            download: 'http://localhost:3000/image.png/@@images/image-1200.png',
             width: 400,
             height: 400,
             scales: {
               preview: {
                 download:
-                  'http://localhost:3000/image.png/@@images/image/image-400.png',
+                  'http://localhost:3000/image.png/@@images/image-400.png',
                 width: 400,
                 height: 400,
               },

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

@@ -28,7 +28,14 @@ const PAQO = 'plone.app.querystring.operation';
  * @function getInitialState
  *
  */
-function getInitialState(data, facets, urlSearchText, id) {
+function getInitialState(
+  data,
+  facets,
+  urlSearchText,
+  id,
+  sortOnParam,
+  sortOrderParam,
+) {
   const { types: facetWidgetTypes } =
     config.blocks.blocksConfig.search.extensions.facetWidgets;
   const facetSettings = data?.facets || [];
@@ -62,8 +69,8 @@ function getInitialState(data, facets, urlSearchText, id) {
           ]
         : []),
     ],
-    sort_on: data.query?.sort_on,
-    sort_order: data.query?.sort_order,
+    sort_on: sortOnParam || data.query?.sort_on,
+    sort_order: sortOrderParam || data.query?.sort_order,
     b_size: data.query?.b_size,
     limit: data.query?.limit,
     block: id,
@@ -257,7 +264,28 @@ const withSearch = (options) => (WrappedComponent) => {
     const multiFacets = data.facets
       ?.filter((facet) => facet?.multiple)
       .map((facet) => facet?.field?.value);
-    const [facets, setFacets] = React.useState({});
+    const [facets, setFacets] = React.useState(
+      Object.assign(
+        {},
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+
+        // support for simple filters like ?Subject=something
+        // TODO: since the move to hash params this is no longer working.
+        // We'd have to treat the location.search and manage it just like the
+        // hash, to support it. We can read it, but we'd have to reset it as
+        // well, so at that point what's the difference to the hash?
+        ...configuredFacets.map((f) =>
+          locationSearchData[f]
+            ? {
+                [f]:
+                  multiFacets.indexOf(f) > -1
+                    ? [locationSearchData[f]]
+                    : locationSearchData[f],
+              }
+            : {},
+        ),
+      ),
+    );
     const previousUrlQuery = usePrevious(urlQuery);
 
     React.useEffect(() => {
@@ -296,11 +324,16 @@ const withSearch = (options) => (WrappedComponent) => {
     const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
     const [sortOrder, setSortOrder] = React.useState(data?.query?.sort_order);
 
-    const [searchData, setSearchData] = React.useState({});
+    const [searchData, setSearchData] = React.useState(
+      getInitialState(data, facets, urlSearchText, id),
+    );
 
+    const deepFacets = JSON.stringify(facets);
     React.useEffect(() => {
-      setSearchData(getInitialState(data, facets, urlSearchText, id));
-    }, [facets, data, urlSearchText, id]);
+      setSearchData(
+        getInitialState(data, facets, urlSearchText, id, sortOn, sortOrder),
+      );
+    }, [deepFacets, facets, data, urlSearchText, id, sortOn, sortOrder]);
 
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;
@@ -316,7 +349,7 @@ const withSearch = (options) => (WrappedComponent) => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(
           () => {
-            const searchData = normalizeState({
+            const newSearchData = normalizeState({
               id,
               query: data.query || {},
               facets: toSearchFacets || facets,
@@ -328,8 +361,8 @@ const withSearch = (options) => (WrappedComponent) => {
             if (toSearchFacets) setFacets(toSearchFacets);
             if (toSortOn) setSortOn(toSortOn);
             if (toSortOrder) setSortOrder(toSortOrder);
-            setSearchData(searchData);
-            setLocationSearchData(getSearchFields(searchData));
+            setSearchData(newSearchData);
+            setLocationSearchData(getSearchFields(newSearchData));
           },
           toSearchFacets ? inputDelay / 3 : inputDelay,
         );
@@ -349,13 +382,14 @@ const withSearch = (options) => (WrappedComponent) => {
     );
 
     const removeSearchQuery = () => {
-      searchData.query = searchData.query.reduce(
+      let newSearchData = { ...searchData };
+      newSearchData.query = searchData.query.reduce(
         // Remove SearchableText from query
         (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
         [],
       );
-      setSearchData(searchData);
-      setLocationSearchData(getSearchFields(searchData));
+      setSearchData(newSearchData);
+      setLocationSearchData(getSearchFields(newSearchData));
     };
 
     const querystringResults = useSelector(

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

@@ -314,7 +314,8 @@ export class QuerystringWidgetComponent extends Component {
                                   label: field[1].title,
                                   value: field[0],
                                   isDisabled: (value || []).some(
-                                    (v) => v['i'] === field[0],
+                                    (v) =>
+                                      v['i'] !== 'path' && v['i'] === field[0],
                                   ),
                                 }),
                               ),
@@ -444,8 +445,11 @@ export class QuerystringWidgetComponent extends Component {
                           (field) => ({
                             label: field[1].title,
                             value: field[0],
+                            // disable selecting indexes that are already used,
+                            // except for path, which has explicit support
+                            // in the backend for multipath queries
                             isDisabled: (value || []).some(
-                              (v) => v['i'] === field[0],
+                              (v) => v['i'] !== 'path' && v['i'] === field[0],
                             ),
                           }),
                         ),

package/src/components/theme/Image/Image.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL, flattenScales } from '@plone/volto/helpers';
 
 /**
  * Image component
@@ -36,16 +36,17 @@ export default function Image({
     const imageFieldWithDefault = imageField || item.image_field || 'image';
 
     const image = isFromRealObject
-      ? item[imageFieldWithDefault]
-      : item.image_scales[imageFieldWithDefault]?.[0];
+      ? flattenScales(item['@id'], item[imageFieldWithDefault])
+      : flattenScales(
+          item['@id'],
+          item.image_scales[imageFieldWithDefault]?.[0],
+        );
 
     if (!image) return null;
 
     const isSvg = image['content-type'] === 'image/svg+xml';
 
-    const baseUrl = isFromRealObject ? '' : flattenToAppURL(item['@id'] + '/');
-
-    attrs.src = `${baseUrl}${flattenToAppURL(image.download)}`;
+    attrs.src = `${flattenToAppURL(item['@id'])}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
     attrs.className = cx(className, { responsive });
@@ -60,7 +61,7 @@ export default function Image({
       attrs.srcSet = sortedScales
         .map(
           (scale) =>
-            `${baseUrl}${flattenToAppURL(scale.download)} ${scale.width}w`,
+            `${flattenToAppURL(item['@id'])}/${scale.download} ${scale.width}w`,
         )
         .join(', ');
     }

package/src/components/theme/Image/Image.test.jsx

@@ -6,14 +6,14 @@ test('renders an image component with fetchpriority high', () => {
   const component = renderer.create(
     <Image
       item={{
+        '@id': 'http://localhost:3000/image',
         image: {
-          download: 'http://localhost:3000/image/@@images/image/image.png',
+          download: 'http://localhost:3000/image/@@images/image.png',
           width: 400,
           height: 400,
           scales: {
             preview: {
-              download:
-                'http://localhost:3000/image/@@images/image/image-400.png',
+              download: 'http://localhost:3000/image/@@images/image-400.png',
               width: 400,
               height: 400,
             },
@@ -32,14 +32,14 @@ test('renders an image component with lazy loading', () => {
   const component = renderer.create(
     <Image
       item={{
+        '@id': 'http://localhost:3000/image',
         image: {
-          download: 'http://localhost:3000/image/@@images/image/image.png',
+          download: 'http://localhost:3000/image/@@images/image.png',
           width: 400,
           height: 400,
           scales: {
             preview: {
-              download:
-                'http://localhost:3000/image/@@images/image/image-400.png',
+              download: 'http://localhost:3000/image/@@images/image-400.png',
               width: 400,
               height: 400,
             },
@@ -59,14 +59,14 @@ test('renders an image component with responsive class', () => {
   const component = renderer.create(
     <Image
       item={{
+        '@id': 'http://localhost:3000/image',
         image: {
-          download: 'http://localhost:3000/image/@@images/image/image.png',
+          download: 'http://localhost:3000/image/@@images/image-1200.png',
           width: 400,
           height: 400,
           scales: {
             preview: {
-              download:
-                'http://localhost:3000/image/@@images/image/image-400.png',
+              download: 'http://localhost:3000/image/@@images/image-400.png',
               width: 400,
               height: 400,
             },
@@ -91,12 +91,12 @@ test('renders an image component from a catalog brain', () => {
         image_scales: {
           image: [
             {
-              download: '@@images/image/image.png',
+              download: '@@images/image.png',
               width: 400,
               height: 400,
               scales: {
                 preview: {
-                  download: '@@images/image/image-400.png',
+                  download: '@@images/image-400.png',
                   width: 400,
                   height: 400,
                 },

package/src/helpers/Url/Url.js

@@ -355,3 +355,32 @@ export const URLUtils = {
   isUrl,
   checkAndNormalizeUrl,
 };
+
+/**
+ * Given an image info object, it does flatten all the scales information to
+ * match the ones stored in the catalog
+ * 'http://localhost:3000/{path}/@@images/{scalefile}' -> '@images/{scalefile}'
+ * @function flattenScales
+ * @param {string} path path of the content object
+ * @param {object} image image information object
+ * @returns {object} New object with the flattened scale URLs
+ */
+export function flattenScales(path, image) {
+  function removeObjectIdFromURL(path, scale) {
+    return scale.replace(`${path}/`, '');
+  }
+  if (!image) return;
+
+  const imageInfo = {
+    ...image,
+    download: flattenToAppURL(removeObjectIdFromURL(path, image.download)),
+  };
+
+  Object.keys(imageInfo.scales).forEach((key) => {
+    imageInfo.scales[key].download = flattenToAppURL(
+      removeObjectIdFromURL(path, image.scales[key].download),
+    );
+  });
+
+  return imageInfo;
+}

package/src/helpers/Url/Url.test.js

@@ -18,6 +18,7 @@ import {
   checkAndNormalizeUrl,
   normaliseMail,
   normalizeTelephone,
+  flattenScales,
 } from './Url';
 
 beforeEach(() => {
@@ -350,4 +351,107 @@ describe('Url', () => {
       );
     });
   });
+  describe('flattenScales', () => {
+    it('flattenScales image is not set', () => {
+      const id = '/halfdome2022-2.jpg';
+      const image = undefined;
+      expect(flattenScales(id, image)).toBe(undefined);
+    });
+
+    it('flattenScales test from the catalog', () => {
+      const id = '/halfdome2022-2.jpg';
+      const image = {
+        'content-type': 'image/jpeg',
+        download: '@@images/image-1182-cf763ae23c52340d8a17a7afdb26c8cb.jpeg',
+        filename: 'halfdome2022.jpg',
+        height: 665,
+        scales: {
+          great: {
+            download:
+              '@@images/image-1200-539ab119ebadc7d011798980a4a5e8d4.jpeg',
+            height: 665,
+            width: 1182,
+          },
+          huge: {
+            download:
+              '@@images/image-1600-188968febc677890c1b99d5339f9bef1.jpeg',
+            height: 665,
+            width: 1182,
+          },
+        },
+        size: 319364,
+        width: 1182,
+      };
+      expect(flattenScales(id, image)).toStrictEqual({
+        'content-type': 'image/jpeg',
+        download: '@@images/image-1182-cf763ae23c52340d8a17a7afdb26c8cb.jpeg',
+        filename: 'halfdome2022.jpg',
+        height: 665,
+        scales: {
+          great: {
+            download:
+              '@@images/image-1200-539ab119ebadc7d011798980a4a5e8d4.jpeg',
+            height: 665,
+            width: 1182,
+          },
+          huge: {
+            download:
+              '@@images/image-1600-188968febc677890c1b99d5339f9bef1.jpeg',
+            height: 665,
+            width: 1182,
+          },
+        },
+        size: 319364,
+        width: 1182,
+      });
+    });
+    it('flattenScales test from serialization', () => {
+      const id = 'http://localhost:3000/halfdome2022-2.jpg';
+      const image = {
+        'content-type': 'image/jpeg',
+        download:
+          'http://localhost:3000/halfdome2022-2.jpg/@@images/image-1182-cf763ae23c52340d8a17a7afdb26c8cb.jpeg',
+        filename: 'halfdome2022.jpg',
+        height: 665,
+        scales: {
+          great: {
+            download:
+              'http://localhost:3000/halfdome2022-2.jpg/@@images/image-1200-539ab119ebadc7d011798980a4a5e8d4.jpeg',
+            height: 665,
+            width: 1182,
+          },
+          huge: {
+            download:
+              'http://localhost:3000/halfdome2022-2.jpg/@@images/image-1600-188968febc677890c1b99d5339f9bef1.jpeg',
+            height: 665,
+            width: 1182,
+          },
+        },
+        size: 319364,
+        width: 1182,
+      };
+      expect(flattenScales(id, image)).toStrictEqual({
+        'content-type': 'image/jpeg',
+        download: '@@images/image-1182-cf763ae23c52340d8a17a7afdb26c8cb.jpeg',
+        filename: 'halfdome2022.jpg',
+        height: 665,
+        scales: {
+          great: {
+            download:
+              '@@images/image-1200-539ab119ebadc7d011798980a4a5e8d4.jpeg',
+            height: 665,
+            width: 1182,
+          },
+          huge: {
+            download:
+              '@@images/image-1600-188968febc677890c1b99d5339f9bef1.jpeg',
+            height: 665,
+            width: 1182,
+          },
+        },
+        size: 319364,
+        width: 1182,
+      });
+    });
+  });
 });

package/src/helpers/index.js

@@ -29,6 +29,7 @@ export {
   normalizeUrl,
   removeProtocol,
   URLUtils,
+  flattenScales,
 } from '@plone/volto/helpers/Url/Url';
 export { generateRobots } from '@plone/volto/helpers/Robots/Robots';
 export {