@plone/volto 17.1.0 → 17.1.1

package/CHANGELOG.md

@@ -8,6 +8,14 @@
 
 <!-- towncrier release notes start -->
 
+## 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/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.1.0",
+  "version": "17.1.1",
   "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.1.1",
   "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/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 {