@eeacms/volto-embed 10.0.3 → 10.1.0

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [10.1.0](https://github.com/eea/volto-embed/compare/10.0.3...10.1.0) - 11 September 2024
+
+#### :hammer_and_wrench: Others
+
+- Update version [dobri1408 - [`21e7852`](https://github.com/eea/volto-embed/commit/21e7852cfa27bedd7e3670402bf89d7f3b6fdc06)]
+- cleanup preview image loaded [dobri1408 - [`b3e60ff`](https://github.com/eea/volto-embed/commit/b3e60ffedd7e7f7790afbc76e99df4e001e57550)]
+- double check preview [dobri1408 - [`35c6210`](https://github.com/eea/volto-embed/commit/35c621031b4cd25777ac19a2789eac08ffd48176)]
+- tests [dobri1408 - [`70c3620`](https://github.com/eea/volto-embed/commit/70c3620057ffd203105b80ff1c9121a39947c212)]
+- tests [dobri1408 - [`8aa1bfe`](https://github.com/eea/volto-embed/commit/8aa1bfe536968b42cd76abc91b685b28ce485e28)]
+- tests [dobri1408 - [`879f6a7`](https://github.com/eea/volto-embed/commit/879f6a70d329228d974f347cea983621194433a3)]
+- Create preview_image.test.js [dobri1408 - [`fbb7cdb`](https://github.com/eea/volto-embed/commit/fbb7cdb69c1d43a928024d2c83a0dee87faae7af)]
+- Update MapsWidget.jsx [dobri1408 - [`cd46123`](https://github.com/eea/volto-embed/commit/cd46123d39c71d034a2aa9919ad04e7364a08e8d)]
+- Update MapsWidget.jsx [dobri1408 - [`e36c6a9`](https://github.com/eea/volto-embed/commit/e36c6a9c0269622cabf2069d6b8cd082cfbe879b)]
+- preview image middlware [dobri1408 - [`5a0f8e9`](https://github.com/eea/volto-embed/commit/5a0f8e9231d8f5f760dcbd82bbab4a84778d1202)]
 ### [10.0.3](https://github.com/eea/volto-embed/compare/10.0.2...10.0.3) - 24 July 2024
 
 #### :bug: Bug Fixes
@@ -18,7 +32,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - add useScreenHeight prop [Miu Razvan - [`a261a59`](https://github.com/eea/volto-embed/commit/a261a593892f44845579b2c0aa764e22bbf48e73)]
 - fix tests [Miu Razvan - [`0798660`](https://github.com/eea/volto-embed/commit/0798660ce054a7a60e4c3888cb63ba9c131a42f8)]
 - Set interactiv map height to window innerheight, ref #272831 [Miu Razvan - [`5ac9eb5`](https://github.com/eea/volto-embed/commit/5ac9eb5e66cdc626b33d0bdad5b80994af2d7d79)]
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`d99c3dc`](https://github.com/eea/volto-embed/commit/d99c3dc2151f6576b127e3c751fabaae3ad676b8)]
 ### [10.0.2](https://github.com/eea/volto-embed/compare/10.0.1...10.0.2) - 7 June 2024
 
 #### :bug: Bug Fixes
@@ -104,7 +117,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - test: increase coverage [kreafox - [`2d8e43c`](https://github.com/eea/volto-embed/commit/2d8e43cf3988564306b6aa7b885b0ff398043ce0)]
 - test: increase coverage [kreafox - [`1fa9052`](https://github.com/eea/volto-embed/commit/1fa9052a3c015361e3a7eae043c418b696262fbe)]
-- test: [JENKINS] fail with logs on coverage [valentinab25 - [`eaabce8`](https://github.com/eea/volto-embed/commit/eaabce87f1ed4b88a25bfc59a75285e858413d6a)]
 - test: increase cypress timeout [kreafox - [`9bb40a5`](https://github.com/eea/volto-embed/commit/9bb40a5df2b29a55edec24a57fcd6e65f270f13c)]
 - test: updates [kreafox - [`5b54d02`](https://github.com/eea/volto-embed/commit/5b54d02c6b6392e25f07ef1e286bdbced999592e)]
 - test: update snapshot [kreafox - [`338f23e`](https://github.com/eea/volto-embed/commit/338f23ee5c6c75ccb6ee2d8d474298553fe3bd53)]
@@ -161,13 +173,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - update [Miu Razvan - [`926beb8`](https://github.com/eea/volto-embed/commit/926beb87d2c44907aebe57369312eea7bf22d656)]
 - update [Miu Razvan - [`da351ae`](https://github.com/eea/volto-embed/commit/da351ae9ffaaef756f7a665618a03fd04cb9b01d)]
 - use volto-datablocks@develop dependency [Miu Razvan - [`b379d84`](https://github.com/eea/volto-embed/commit/b379d8478657dd39dad066181b349cee7ac2531d)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`ddf685a`](https://github.com/eea/volto-embed/commit/ddf685a9481d780a1df2e4f991f93676478c3e05)]
 ## [8.0.0](https://github.com/eea/volto-embed/compare/7.0.2...8.0.0) - 17 November 2023
 
 #### :hammer_and_wrench: Others
 
 - tests: add cypress tests [nileshgulia1 - [`e4b2803`](https://github.com/eea/volto-embed/commit/e4b28033114170639787d77976dc13b7f697f704)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`83d91d5`](https://github.com/eea/volto-embed/commit/83d91d5716a9ce8ebbbff01a7838711298684be4)]
 - fix error [Claudia Ifrim - [`553f3af`](https://github.com/eea/volto-embed/commit/553f3af004af034c721dcd6b01de55c258a88c49)]
 - bump version [Miu Razvan - [`363694a`](https://github.com/eea/volto-embed/commit/363694ae50cdec941fb53b396b75e9a4554d44fb)]
 ### [7.0.2](https://github.com/eea/volto-embed/compare/7.0.1...7.0.2) - 10 November 2023
@@ -177,7 +187,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - add missing less variable [Miu Razvan - [`47683a7`](https://github.com/eea/volto-embed/commit/47683a7816581d117bb88f16e3087864aaa52f5e)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`ba168e4`](https://github.com/eea/volto-embed/commit/ba168e49554a51a6015a98a77dc0ceab76320218)]
 ## [7.0.0](https://github.com/eea/volto-embed/compare/6.0.1...7.0.0) - 6 November 2023
 
 #### :rocket: New Features
@@ -187,15 +196,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :house: Internal changes
 
 - style: Automated code fix [eea-jenkins - [`c34d6f4`](https://github.com/eea/volto-embed/commit/c34d6f47fd33f728d40254a12c05fe385b27f2e9)]
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`673f3ff`](https://github.com/eea/volto-embed/commit/673f3ff355baa8d3646e4558ff2be00f36b5a45a)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`31169f7`](https://github.com/eea/volto-embed/commit/31169f73887837463daee76d63b6516046ad49aa)]
 
 #### :hammer_and_wrench: Others
 
 - update tests [Miu Razvan - [`c906b79`](https://github.com/eea/volto-embed/commit/c906b79149e853f718d924871ce2e633e5e427c8)]
 - update tests [Miu Razvan - [`11625b6`](https://github.com/eea/volto-embed/commit/11625b65846388a846d1bdf7ebb2e1f8bd103c91)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`5e7a155`](https://github.com/eea/volto-embed/commit/5e7a15505334c9b81f07172116b49eaefc692ebf)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`eeb6dcb`](https://github.com/eea/volto-embed/commit/eeb6dcb4b0f8af07496450e6e7783932ebe88bf7)]
 - Release 7.0.0 [Alin Voinea - [`cbc5c79`](https://github.com/eea/volto-embed/commit/cbc5c79f1b66daf0d599d9de5a1bc7d137bafed8)]
 - add act in unit tests [Miu Razvan - [`ecf5b2f`](https://github.com/eea/volto-embed/commit/ecf5b2fe553d99ad6a11570d3d34852d557fbe85)]
 - update [Miu Razvan - [`049cc14`](https://github.com/eea/volto-embed/commit/049cc140bb6ffea4eb3f1555e693e9973ef63d0e)]
@@ -218,7 +224,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`dc2de20`](https://github.com/eea/volto-embed/commit/dc2de2084b53043f240ee1efa2588b5037326ed7)]
 - test: Fix package.json scripts to use makefile [Alin Voinea - [`b4ffca2`](https://github.com/eea/volto-embed/commit/b4ffca24bb8cc4ba2007cc1040cc7b55dc7cc779)]
-- test: Fix eslint and yarn i18n [Alin Voinea - [`1563d0a`](https://github.com/eea/volto-embed/commit/1563d0ab1f54e775a16705bfd3d267303eb2a526)]
 - i18n: Add en [Alin Voinea - [`b4e0694`](https://github.com/eea/volto-embed/commit/b4e0694ee40ecc195536fd1826adfab8876c5061)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`8f228ca`](https://github.com/eea/volto-embed/commit/8f228ca0644cee0f777a01114895583f387a395c)]
 - test: increase test coverage - refs #254313 [ana-oprea - [`30354d8`](https://github.com/eea/volto-embed/commit/30354d8a10a78e4fc322e37f4be20ff85cd00bbc)]
@@ -247,9 +252,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Add react-countup to resolutions [kreafox - [`36eb637`](https://github.com/eea/volto-embed/commit/36eb637c0cb9413b0b0e0ce53e621b2289929d65)]
 - Move generic classes to privacy-protection [kreafox - [`715d559`](https://github.com/eea/volto-embed/commit/715d559e370bf7a3489b64d357b0a6cd7b1a3af2)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`5715b4d`](https://github.com/eea/volto-embed/commit/5715b4d3fcc14a34e031c383275c685d88f4db44)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`ef24ac0`](https://github.com/eea/volto-embed/commit/ef24ac05b17f4f4dbf05ceafbee677012a7f28f5)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`81f957b`](https://github.com/eea/volto-embed/commit/81f957b51aef7be59214530b774de8547bee3f5f)]
 ### [5.0.2](https://github.com/eea/volto-embed/compare/5.0.1...5.0.2) - 20 March 2023
 
 #### :hammer_and_wrench: Others
@@ -264,7 +266,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - update .project.eslintrc.js [Miu Razvan - [`628fd40`](https://github.com/eea/volto-embed/commit/628fd402b00d075ce319b9be92ff5f0e4d0ca2c4)]
 - rename schema.jsx [Miu Razvan - [`62794e3`](https://github.com/eea/volto-embed/commit/62794e398eab5117132e5622cab735f6cf4f79fd)]
 - improving code quality as per sonarqube reported issues [tedw87 - [`c7842f7`](https://github.com/eea/volto-embed/commit/c7842f7795f344e9d30538ddf2da04e97e319ebe)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`fe3a2de`](https://github.com/eea/volto-embed/commit/fe3a2de6180796c3d6b569733d2b9365a669c23e)]
 ## [5.0.0](https://github.com/eea/volto-embed/compare/4.0.4...5.0.0) - 31 October 2022
 
 #### :hammer_and_wrench: Others
@@ -284,8 +285,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - use specific alpha for addon test [andreiggr - [`e6df633`](https://github.com/eea/volto-embed/commit/e6df633aa4d2b0ee7eeb6b5aafa21528f14cd1df)]
 - add optional height to privacy container [andreiggr - [`e2ac711`](https://github.com/eea/volto-embed/commit/e2ac711db4e461b474cade42109346a73bb8ecbd)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`9f3f358`](https://github.com/eea/volto-embed/commit/9f3f35882fb367d72c7916abe7cbf366dbd8d5b6)]
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`7677140`](https://github.com/eea/volto-embed/commit/767714006abf7cbe336c5ab00d76c7232d5bc798)]
 ### [4.0.2](https://github.com/eea/volto-embed/compare/4.0.1...4.0.2) - 15 July 2022
 
 #### :hammer_and_wrench: Others
@@ -325,7 +324,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Update package.json [Nilesh - [`0ec673a`](https://github.com/eea/volto-embed/commit/0ec673a8178731b8c1e010101caee2a3c9fafaca)]
 - Update package.json [Nilesh - [`b8b94ec`](https://github.com/eea/volto-embed/commit/b8b94ec64672229f464b9108b4ac01a848827c00)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`cfe04d8`](https://github.com/eea/volto-embed/commit/cfe04d885255bb8e472a3b268b98e3d7b9022437)]
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`bf197dd`](https://github.com/eea/volto-embed/commit/bf197dd6516f9c18994add19b1141e061a96e2b6)]
 - no hardcoded text [Daniela Mormocea - [`4001bb4`](https://github.com/eea/volto-embed/commit/4001bb414df05c1516f95e4dcec4a328406dc63f)]
 - fix [Daniela Mormocea - [`a41ca9a`](https://github.com/eea/volto-embed/commit/a41ca9a2795a59f2633fb97938244e335dca8c43)]
@@ -399,8 +397,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - revert use of custom bg image [nileshgulia1 - [`63a74b7`](https://github.com/eea/volto-embed/commit/63a74b7e671d85b602b0190c7a18e6d6ad71341b)]
 - PrivacyProtection update & accept bg image [Andrei Grigore - [`f3f05d1`](https://github.com/eea/volto-embed/commit/f3f05d1d21fc88b90de3f68a995242b6c359e03a)]
 - fix loading of cookies [nileshgulia1 - [`46348d8`](https://github.com/eea/volto-embed/commit/46348d8321b4633a3d5fdcbfb2c4f01912d7ed2a)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`a1e1f50`](https://github.com/eea/volto-embed/commit/a1e1f50db8a1ebc11261c3a24c39687c00ca7eea)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`1e1471e`](https://github.com/eea/volto-embed/commit/1e1471ebab5ba6e5bf0c231ddd0de94d8fe6c846)]
 ### [2.0.1](https://github.com/eea/volto-embed/compare/2.0.0...2.0.1) - 28 May 2021
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "10.0.3",
+  "version": "10.1.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/PrivacyProtection/helpers.test.js

@@ -0,0 +1,34 @@
+import { createImageUrl } from './helpers';
+
+describe('createImageUrl', () => {
+  it('should create a valid image URL from the base64 encoded data', () => {
+    // Mock data for the test
+    const mockResult = {
+      data: 'aGVsbG8gd29ybGQ=', // "hello world" in base64
+      'content-type': 'image/png',
+    };
+
+    // Mock the atob function
+    jest.spyOn(window, 'atob').mockImplementation(() => 'hello world');
+
+    // Mock the URL.createObjectURL function
+    const mockUrl = 'blob:http://localhost:3000/some-url';
+    global.URL.createObjectURL = jest.fn().mockReturnValue(mockUrl);
+
+    // Call the function
+    const imageUrl = createImageUrl(mockResult);
+
+    // Assertions
+    expect(window.atob).toHaveBeenCalledWith(mockResult.data);
+    expect(URL.createObjectURL).toHaveBeenCalledWith(expect.any(Blob));
+    expect(imageUrl).toBe(mockUrl);
+
+    // Verify the Blob creation
+    const blobArgs = URL.createObjectURL.mock.calls[0][0];
+    expect(blobArgs.type).toBe(mockResult['content-type']);
+    expect(blobArgs.size).toBe(11); // "hello world" is 11 bytes
+
+    // Clean up mocks
+    jest.restoreAllMocks();
+  });
+});

package/src/Toolbar/Sources.test.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import Sources from './Sources';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockSources = [
+  {
+    chart_source: 'Source 1',
+    chart_source_link: 'http://example.com/source1',
+    organisation: 'Organisation 1',
+    title: 'Title 1',
+    link: 'http://example.com/link1',
+  },
+  {
+    chart_source: 'Source 2',
+    chart_source_link: 'http://example.com/source2',
+    organisation: 'Organisation 2',
+    title: 'Title 2',
+    link: 'http://example.com/link2',
+  },
+];
+
+describe('Sources', () => {
+  it('renders the Sources button', () => {
+    render(<Sources sources={mockSources} />);
+    expect(screen.getByText('Sources')).toBeInTheDocument();
+  });
+
+  it('opens and closes the popup on click', () => {
+    render(<Sources sources={mockSources} />);
+
+    const triggerButton = screen.getByText('Sources');
+
+    expect(screen.queryByText('Source 1')).toBeInTheDocument();
+
+    fireEvent.click(triggerButton);
+    expect(screen.getByText('Source 1')).toBeInTheDocument();
+    expect(screen.getByText('Source 2')).toBeInTheDocument();
+
+    fireEvent.click(triggerButton);
+  });
+
+  it('renders sources correctly', () => {
+    render(<Sources sources={mockSources} />);
+
+    const triggerButton = screen.getByText('Sources');
+    fireEvent.click(triggerButton);
+
+    expect(screen.getByText('Source 1')).toBeInTheDocument();
+    expect(screen.getByText('Source 2')).toBeInTheDocument();
+
+    expect(screen.getByText('Source 1').closest('a')).toHaveAttribute(
+      'href',
+      'http://example.com/source1',
+    );
+    expect(screen.getByText('Source 2').closest('a')).toHaveAttribute(
+      'href',
+      'http://example.com/source2',
+    );
+  });
+
+  it('renders a message when there are no sources', () => {
+    render(<Sources sources={[]} />);
+
+    const triggerButton = screen.getByText('Sources');
+    fireEvent.click(triggerButton);
+
+    expect(
+      screen.getByText('Data provenance is not set for this visualization.'),
+    ).toBeInTheDocument();
+  });
+});

package/src/Widgets/MapWidget.test.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import MapsViewWidget from './MapsViewWidget';
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
+import '@testing-library/jest-dom/extend-expect'; // Importă jest-dom
+
+jest.mock('@eeacms/volto-embed/EmbedMap/EmbedMap', () =>
+  jest.fn(() => <div>Mocked EmbedMap</div>),
+);
+jest.mock('@eeacms/volto-embed/helpers', () => ({
+  pickMetadata: jest.fn(),
+}));
+
+const mockStore = configureStore([]);
+
+describe('MapsViewWidget', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      content: {
+        data: {
+          metadata: {
+            title: 'Test Title',
+            description: 'Test Description',
+          },
+        },
+      },
+    });
+  });
+
+  it('should render EmbedMap with the correct data props', () => {
+    const mockValue = {
+      map_url: 'http://example.com/map',
+    };
+    const mockId = 'map-widget-1';
+
+    pickMetadata.mockReturnValue({
+      title: 'Test Title',
+      description: 'Test Description',
+    });
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <MapsViewWidget id={mockId} value={mockValue} />
+      </Provider>,
+    );
+
+    expect(EmbedMap).toHaveBeenCalledWith(
+      {
+        data: {
+          map_url: 'http://example.com/map',
+          title: 'Test Title',
+          description: 'Test Description',
+          with_share: true,
+        },
+        id: mockId,
+      },
+      {},
+    );
+
+    expect(getByText('Mocked EmbedMap')).toBeInTheDocument(); // Verifică dacă elementul este în document
+  });
+
+  it('should handle empty value prop correctly', () => {
+    const mockId = 'map-widget-2';
+
+    pickMetadata.mockReturnValue({
+      title: 'Test Title',
+      description: 'Test Description',
+    });
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <MapsViewWidget id={mockId} value={null} />
+      </Provider>,
+    );
+
+    expect(EmbedMap).toHaveBeenCalledWith(
+      {
+        data: {
+          title: 'Test Title',
+          description: 'Test Description',
+          with_share: true,
+        },
+        id: mockId,
+      },
+      {},
+    );
+
+    expect(getByText('Mocked EmbedMap')).toBeInTheDocument(); // Verifică dacă elementul este în document
+  });
+});

package/src/Widgets/MapsWidget.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import { Button, Modal, Grid, Label, Input, Message } from 'semantic-ui-react';
@@ -7,6 +7,7 @@ import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
 import { MapsSchema } from '@eeacms/volto-embed/Blocks/Maps/schema';
+import { getBaseUrl } from '@plone/volto/helpers';
 
 import clearSVG from '@plone/volto/icons/clear.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -19,6 +20,17 @@ const messages = defineMessages({
   },
 });
 
+function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
 function MapEditorModal({ id, onClose, onChange, ...rest }) {
   const intl = useIntl();
   const [value, setValue] = useState(rest.value || {});
@@ -189,14 +201,37 @@ function MapEditorModal({ id, onClose, onChange, ...rest }) {
 }
 
 export default function MapsWidget(props) {
-  const { id, title, description, error, value } = props;
+  const { id, title, description, error, value, onChange } = props;
   const [mapEditor, setMapEditor] = useState(false);
 
-  function onChange(value) {
-    props.onChange(props.id, value);
+  function onChangeMap(value) {
+    onChange(id, value);
     setMapEditor(false);
   }
 
+  useEffect(() => {
+    if (value && value.url && value.preview_url_loaded !== value.url) {
+      fetch(
+        `${getBaseUrl(
+          '',
+        )}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${encodeURIComponent(
+          value.url,
+        )}&w=1920&h=1000&waitfor=4000`,
+      )
+        .then((e) => e.blob())
+        .then((myBlob) => {
+          blobToBase64(myBlob).then((base64String) => {
+            onChange(id, {
+              ...value,
+              preview: base64String,
+              preview_url_loaded: value.url,
+            });
+          });
+        })
+        .catch(() => {});
+    }
+  }, [value, onChange, id]);
+
   return (
     <FormFieldWrapper {...props} columns={1}>
       <div className="wrapper">
@@ -218,7 +253,7 @@ export default function MapsWidget(props) {
         <MapEditorModal
           id={id}
           value={value || {}}
-          onChange={onChange}
+          onChange={onChangeMap}
           onClose={() => setMapEditor(false)}
         />
       )}

package/src/index.js

@@ -2,6 +2,7 @@ import installBlocks from './Blocks';
 import MapView from './Views/MapView';
 import MapsViewWidget from './Widgets/MapsViewWidget';
 import MapsWidget from './Widgets/MapsWidget';
+import { preview_image } from './middlewares/preview_image';
 export {
   PrivacyProtection,
   addPrivacyProtectionToSchema,
@@ -16,5 +17,9 @@ export default function applyConfig(config) {
     ...config.settings.allowed_cors_destinations,
     'screenshot.eea.europa.eu',
   ];
+  config.settings.storeExtenders = [
+    ...(config.settings.storeExtenders || []),
+    preview_image,
+  ];
   return [installBlocks].reduce((acc, apply) => apply(acc), config);
 }

package/src/middlewares/preview_image.js

@@ -0,0 +1,93 @@
+import {
+  CREATE_CONTENT,
+  UPDATE_CONTENT,
+} from '@plone/volto/constants/ActionTypes';
+
+const cleanAction = (action) => {
+  if (action?.request?.data?.maps) {
+    const mapVisualizationData = {
+      ...action.request.data.maps,
+    };
+    if (mapVisualizationData.preview && mapVisualizationData.preview_url_loaded)
+      delete mapVisualizationData.preview;
+    delete mapVisualizationData.preview_url_loaded;
+
+    return {
+      ...action,
+      request: {
+        ...action.request,
+        data: {
+          ...action.request.data,
+
+          maps: mapVisualizationData,
+        },
+      },
+    };
+  } else return action;
+};
+
+export const preview_image = (middlewares) => [
+  (store) => (next) => async (action) => {
+    if (![CREATE_CONTENT, UPDATE_CONTENT].includes(action.type)) {
+      return next(action);
+    }
+    const state = store.getState();
+    const contentData = state.content.data;
+    const lastPreviewImage = Object.keys(action?.request?.data).includes(
+      'preview_image',
+    )
+      ? action?.request?.data.preview_image
+      : contentData?.preview_image;
+    const type = action?.request?.data?.['@type'] || contentData['@type'];
+
+    if (
+      !contentData ||
+      type !== 'map_interactive' ||
+      contentData.preview_image_saved ||
+      !action?.request?.data?.maps?.preview
+    ) {
+      return next(cleanAction(action));
+    }
+
+    if (
+      lastPreviewImage &&
+      lastPreviewImage.filename !==
+        'preview_image_generated_map_interactive.png'
+    ) {
+      return next(cleanAction(action));
+    }
+
+    try {
+      const previewImage = {
+        preview_image: {
+          data: action.request.data.maps.preview.split(',')[1],
+          encoding: 'base64',
+          'content-type': 'image/png',
+          filename: 'preview_image_generated_map_interactive.png',
+        },
+        preview_image_saved: true,
+      };
+
+      const mapVisualizationData = {
+        ...action.request.data.maps,
+      };
+      delete mapVisualizationData.preview;
+      delete mapVisualizationData.preview_url_loaded;
+
+      return next({
+        ...action,
+        request: {
+          ...action.request,
+          data: {
+            ...action.request.data,
+            ...previewImage,
+            maps: mapVisualizationData,
+          },
+        },
+      });
+    } catch (error) {
+      return next(action);
+    }
+  },
+  ...middlewares,
+];

package/src/middlewares/preview_image.test.js

@@ -0,0 +1,49 @@
+import { preview_image } from './preview_image';
+describe('preview_image middleware', () => {
+  let store;
+  let next;
+  let action;
+  let middlewares;
+
+  beforeEach(() => {
+    store = {
+      getState: jest.fn(() => ({
+        content: {
+          data: {
+            '@type': 'map_interactive',
+            preview_image: 'existing_image.png',
+            preview_image_saved: false,
+          },
+        },
+      })),
+    };
+    next = jest.fn();
+    middlewares = [];
+  });
+
+  it('existing image', () => {
+    action = { type: 'UPDATE_CONTENT', request: { data: {} } };
+    const middleware = preview_image(middlewares)[0]; // Accesăm prima funcție din array
+    middleware(store)(next)(action); // Executăm funcția de middleware
+    expect(next).toHaveBeenCalledWith(action); // Verificăm că funcția next a fost apelată cu acțiunea originală
+  });
+  it('redo the image', () => {
+    store = {
+      getState: jest.fn(() => ({
+        content: {
+          data: {
+            '@type': 'map_interactive',
+            preview_image: 'preview_image_generated_map_interactive.png',
+            preview_image_saved: false,
+          },
+        },
+      })),
+    };
+    next = jest.fn();
+    middlewares = [];
+    action = { type: 'UPDATE_CONTENT', request: { data: {} } };
+    const middleware = preview_image(middlewares)[0]; // Accesăm prima funcție din array
+    middleware(store)(next)(action); // Executăm funcția de middleware
+    expect(next).toHaveBeenCalledWith(action); // Verificăm că funcția next a fost apelată cu acțiunea originală
+  });
+});