@eeacms/volto-embed 10.0.2 → 10.1.0

package/CHANGELOG.md

@@ -4,12 +4,39 @@ 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
+
+- fix: package.json [alin - [`6c29d0d`](https://github.com/eea/volto-embed/commit/6c29d0d3875a95d24b9197db05c187f7c37083a0)]
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`371e6fc`](https://github.com/eea/volto-embed/commit/371e6fc4a344a995f8be1e2b8fd80325777515c5)]
+- update [Miu Razvan - [`c0536f0`](https://github.com/eea/volto-embed/commit/c0536f00732e3761a71bf5103ee064b5b3c1cc22)]
+- update [Miu Razvan - [`e6c8526`](https://github.com/eea/volto-embed/commit/e6c852685654986be6c8695b4f8888e78adcc0a9)]
+- 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)]
 ### [10.0.2](https://github.com/eea/volto-embed/compare/10.0.1...10.0.2) - 7 June 2024
 
 #### :bug: Bug Fixes
 
 - fix: re-add parseInt with a check for NaN [nileshgulia1 - [`f7dd30c`](https://github.com/eea/volto-embed/commit/f7dd30c47aa2cc31726e49b8eb4cb40aae624941)]
-- fix: remove parseInt [nileshgulia1 - [`0b981b4`](https://github.com/eea/volto-embed/commit/0b981b4035b247ce8bd086ab90fc5dd4a23865c8)]
 
 ### [10.0.1](https://github.com/eea/volto-embed/compare/10.0.0...10.0.1) - 4 June 2024
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -23,10 +23,10 @@
     "@eeacms/volto-datablocks": "*"
   },
   "devDependencies": {
-    "cypress": "13.1.0",
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "cypress": "13.1.0",
     "cypress-fail-fast": "^5.0.1",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",

package/src/Blocks/Maps/schema.js

@@ -35,7 +35,7 @@ export const MapsSchema = (props) => {
       {
         id: 'default',
         title: 'Default',
-        fields: ['url', 'title', 'align', 'height'],
+        fields: ['url', 'title', 'align', 'height', 'useScreenHeight'],
       },
     ],
 
@@ -63,6 +63,11 @@ export const MapsSchema = (props) => {
         ),
         description: props.intl.formatMessage(messages.CSSMapHeightDescription),
       },
+      useScreenHeight: {
+        title: 'Use screen height',
+        type: 'boolean',
+        default: false,
+      },
     },
     required: [],
   };

package/src/EmbedMap/EmbedMap.jsx

@@ -22,12 +22,16 @@ const messages = defineMessages({
   },
 });
 
-function getHeight(height) {
+function getHeight(data, screen) {
+  const { height, useScreenHeight } = data;
   const asNumber = isNumber(Number(height)) && !isNaN(Number(height));
   if (asNumber) {
     return `${height}px`;
   }
-  return height;
+  return (
+    height ||
+    (useScreenHeight && screen?.page?.height ? screen.page.height - 50 : 400)
+  );
 }
 
 function EmbedMap({ data, intl, id, screen }) {
@@ -78,7 +82,7 @@ function EmbedMap({ data, intl, id, screen }) {
         <PrivacyProtection
           data={data}
           id={id}
-          height={getHeight(data.height)}
+          height={getHeight(data, screen)}
           useVisibilitySensor={data.useVisibilitySensor ?? true}
         >
           <iframe
@@ -87,7 +91,7 @@ function EmbedMap({ data, intl, id, screen }) {
             className="google-map"
             frameBorder="0"
             allowFullScreen
-            style={data.height ? { height: getHeight(data.height) } : {}}
+            style={{ height: getHeight(data, screen) }}
           />
         </PrivacyProtection>
       </div>

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ă
+  });
+});