@eeacms/volto-tableau 8.0.6 → 8.0.7

package/CHANGELOG.md

@@ -4,18 +4,48 @@ 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).
 
+### [8.0.7](https://github.com/eea/volto-tableau/compare/8.0.6...8.0.7) - 9 September 2024
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`ef00271`](https://github.com/eea/volto-tableau/commit/ef00271928ae63ba0d22485f9343fc304e090b03)]
+
+#### :hammer_and_wrench: Others
+
+- Update View.test.jsx [dobri1408 - [`984f762`](https://github.com/eea/volto-tableau/commit/984f76249550287ef297526d3962a61fd498a0be)]
+- increase code coverage [dobri1408 - [`4a0b444`](https://github.com/eea/volto-tableau/commit/4a0b4449f244c4deacc4015b0d2373d0baa49e2f)]
+- increase code coverage [dobri1408 - [`0a036f4`](https://github.com/eea/volto-tableau/commit/0a036f4d45401da63e71104cae57f7378a4d3624)]
+- increase code coverage [dobri1408 - [`0438558`](https://github.com/eea/volto-tableau/commit/0438558970650d3a01d74802e622cd9d27ebda81)]
+- double check preview [dobri1408 - [`85e0689`](https://github.com/eea/volto-tableau/commit/85e0689f800064e98937be6f74bfdd9959ccd1da)]
+- double check preview [dobri1408 - [`1671a45`](https://github.com/eea/volto-tableau/commit/1671a45608c765f832b48789721dbe7b06b65ed4)]
+- Update preview_image.js [dobri1408 - [`87925c5`](https://github.com/eea/volto-tableau/commit/87925c5c45d8395c9c5b956ead2a7d988823233a)]
+- double check preview [dobri1408 - [`1579659`](https://github.com/eea/volto-tableau/commit/1579659822d56993dd147a6256013b0e7c12bbb5)]
+- Create preview_image.test.js [dobri1408 - [`c562940`](https://github.com/eea/volto-tableau/commit/c562940a2f0bb7ae34ef98a62d2c95f4fe2506c0)]
+- Update preview_image.js [dobri1408 - [`aa3b15e`](https://github.com/eea/volto-tableau/commit/aa3b15edd95d64c8ca969a8252f7d9371e142a6d)]
+- merge [dobri1408 - [`ba63a8f`](https://github.com/eea/volto-tableau/commit/ba63a8f95349d00e5782ebff31870e96891362ca)]
+- manage redux and action right [dobri1408 - [`85be516`](https://github.com/eea/volto-tableau/commit/85be51613a3789adbebd3a517f6b87f600ed3e92)]
+- Update preview_image.js [dobri1408 - [`bb20a02`](https://github.com/eea/volto-tableau/commit/bb20a0204292ef9f94734b343eea9f2fd3e5a96a)]
+- Update VisualizationWidget.jsx [dobri1408 - [`e5ee11c`](https://github.com/eea/volto-tableau/commit/e5ee11ca4f5ee10a42f28e7087582744628aa144)]
+- Update VisualizationWidget.jsx [dobri1408 - [`f0d3bdf`](https://github.com/eea/volto-tableau/commit/f0d3bdf6edff339a037a64453eea714496c39d92)]
+- fix multiple rerenders [dobri1408 - [`6cc0ef0`](https://github.com/eea/volto-tableau/commit/6cc0ef0b8d1bb7f3a0770666c6e60bb3c28df0d4)]
+- Update VisualizationWidget.jsx [dobri1408 - [`56d94fd`](https://github.com/eea/volto-tableau/commit/56d94fdf9bd26db1512d2ae5ee5f65e743b795b5)]
+- fix eslint [dobri1408 - [`d7d754e`](https://github.com/eea/volto-tableau/commit/d7d754e9d89b60951ac7da27b14db93389832216)]
+- fix eslint [dobri1408 - [`58b50d9`](https://github.com/eea/volto-tableau/commit/58b50d995059eea0cc31a0bb6e8e80b48ace99ea)]
+- middleware to save preview image [dobri1408 - [`4b9d1b3`](https://github.com/eea/volto-tableau/commit/4b9d1b3efc5c1cc04d273ce91ccc0621cb60b324)]
+- Update package.json [dobri1408 - [`12a1c94`](https://github.com/eea/volto-tableau/commit/12a1c9478591ba4729f00a55932858b5ef616ff2)]
+- middleware to save preview image [dobri1408 - [`9fe3dd7`](https://github.com/eea/volto-tableau/commit/9fe3dd795842f40e2f0d91475df04b7b97de922e)]
 ### [8.0.6](https://github.com/eea/volto-tableau/compare/8.0.5...8.0.6) - 25 July 2024
 
 #### :hammer_and_wrench: Others
 
 - Update Jenkinsfile [Alexandru Ghica - [`d5e7d48`](https://github.com/eea/volto-tableau/commit/d5e7d48a52e494ebf139b14ea06d0cac8cce82f3)]
-- more checks [Miu Razvan - [`575a1d5`](https://github.com/eea/volto-tableau/commit/575a1d5db3310f9b2dec343adca7c9b912316414)]
 ### [8.0.5](https://github.com/eea/volto-tableau/compare/8.0.4...8.0.5) - 23 July 2024
 
 ### [8.0.4](https://github.com/eea/volto-tableau/compare/8.0.3...8.0.4) - 22 July 2024
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`22eeee9`](https://github.com/eea/volto-tableau/commit/22eeee93cfa8516261bb037a4bffef654af7a179)]
 - Revert "Add fullwidth property" [Miu Razvan - [`ea36e3c`](https://github.com/eea/volto-tableau/commit/ea36e3c4be0ff20999a5ea7ced69cc77f287ced5)]
 - Add fullwidth property [Miu Razvan - [`8d21ed0`](https://github.com/eea/volto-tableau/commit/8d21ed0b219f94d18998155a77acf2a0c50c9338)]
 ### [8.0.3](https://github.com/eea/volto-tableau/compare/8.0.2...8.0.3) - 14 June 2024
@@ -147,12 +177,14 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test [Dobricean Ioan Dorian - [`48505ca`](https://github.com/eea/volto-tableau/commit/48505caef84d12091035fdd79cf64067e7f819e2)]
 - split the view and edit [Dobricean Ioan Dorian - [`7227bb1`](https://github.com/eea/volto-tableau/commit/7227bb1fb70e5d895f15872ed6533e089be99836)]
 - update embed tableau so it can work with serialized data [Dobricean Ioan Dorian - [`59d958c`](https://github.com/eea/volto-tableau/commit/59d958c7a1a5055ea62e04abcbf34ee93f52e23a)]
+- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`c452d70`](https://github.com/eea/volto-tableau/commit/c452d704819fb485e3cd3b39c2501361d20e8559)]
 ### [6.0.6](https://github.com/eea/volto-tableau/compare/6.0.5...6.0.6) - 17 November 2023
 
 #### :hammer_and_wrench: Others
 
 - tests: add cypress for tableau [nileshgulia1 - [`6eca683`](https://github.com/eea/volto-tableau/commit/6eca6834b85cdab4ed82367fee32fdbbb35b0f5e)]
 - tests: update unit tests [nileshgulia1 - [`96cae09`](https://github.com/eea/volto-tableau/commit/96cae09eab2e737f032c97eb401a3efa88e68ec6)]
+- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`c7e81cb`](https://github.com/eea/volto-tableau/commit/c7e81cb0768f755dd4107a4998253d9bccc33809)]
 - comment test [Miu Razvan - [`a459525`](https://github.com/eea/volto-tableau/commit/a459525fdccf8ee61651d4cb2e04eb253e841c61)]
 ### [6.0.5](https://github.com/eea/volto-tableau/compare/6.0.4...6.0.5) - 15 November 2023
 
@@ -179,6 +211,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Refactor automated testing [valentinab25 - [`903b90a`](https://github.com/eea/volto-tableau/commit/903b90a2df0abc183aa68d99a89bb688de3a0c73)]
 
 #### :hammer_and_wrench: Others
 
@@ -188,6 +221,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - tests: increase coverage [kreafox - [`ecb9262`](https://github.com/eea/volto-tableau/commit/ecb92625a44365faf4c39f0ff3f02ccc4ca21656)]
 - Fix tableau height [kreafox - [`6194c24`](https://github.com/eea/volto-tableau/commit/6194c2405e2bd93aba9865caed76292cd55193d3)]
 - Show share & download button on widget view [kreafox - [`a66e253`](https://github.com/eea/volto-tableau/commit/a66e2537d08dc7129e249c28e1daa27246c88815)]
+- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`9d2189d`](https://github.com/eea/volto-tableau/commit/9d2189d4edb13dd449d75cd6dd9052bbed67304d)]
+- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`f2fa3f9`](https://github.com/eea/volto-tableau/commit/f2fa3f9ccabab918586179ac16ead44e2eba8498)]
+- test: [JENKINS] Improve cypress time [valentinab25 - [`5748183`](https://github.com/eea/volto-tableau/commit/5748183c27dae18a4ebbc067d659cbc24cad8f71)]
 - use toolbar from volto-embed [Miu Razvan - [`1a232a1`](https://github.com/eea/volto-tableau/commit/1a232a15f2bbe05da75307800590d0a0a1c4996b)]
 ## [6.0.0](https://github.com/eea/volto-tableau/compare/5.0.2...6.0.0) - 30 October 2023
 
@@ -245,6 +281,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: change volto version in Jenkinsfile [ana-oprea - [`347aceb`](https://github.com/eea/volto-tableau/commit/347aceb07d152fddeebbf3a7e7a6ac9c55dc21ba)]
 - test: increase cypress timeout [ana-oprea - [`bdf4408`](https://github.com/eea/volto-tableau/commit/bdf44083cd84c96b4914d3f8a3bb17c5187f191c)]
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`caff974`](https://github.com/eea/volto-tableau/commit/caff9742a703b224133a8dd2a969629e70c9fd33)]
+- test: Fix eslint and yarn i18n [Alin Voinea - [`b8be7fb`](https://github.com/eea/volto-tableau/commit/b8be7fb9ab10faed0a1be8ce7e3d4e7c78ebe020)]
 - i18n: Add en [Alin Voinea - [`c5e20dd`](https://github.com/eea/volto-tableau/commit/c5e20ddea25c830ac80665ee9a71e557e8cd117d)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`2116ff9`](https://github.com/eea/volto-tableau/commit/2116ff95c6454e813bdca44e6c3aa81fa0a916b8)]
 ## [5.0.0](https://github.com/eea/volto-tableau/compare/4.1.1...5.0.0) - 25 July 2023
@@ -256,17 +293,21 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 5.0.0 [Alin Voinea - [`97c98e9`](https://github.com/eea/volto-tableau/commit/97c98e98b1295a4ad45756326dc20cd59517515f)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`2acb3a5`](https://github.com/eea/volto-tableau/commit/2acb3a5490f62ce0a95ebbd03c32874ac3a42603)]
 ### [4.1.1](https://github.com/eea/volto-tableau/compare/4.1.0...4.1.1) - 21 July 2023
 
 #### :hammer_and_wrench: Others
 
 - Add VisualizationViewWidget [Tiberiu Ichim - [`fa881cb`](https://github.com/eea/volto-tableau/commit/fa881cbc3643a46697fb16d1c86ada1d4121a46a)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`cbcbad2`](https://github.com/eea/volto-tableau/commit/cbcbad26f7aa3683122199c8d5cbd142903df93b)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`51abe6d`](https://github.com/eea/volto-tableau/commit/51abe6d4db80825fe2e396e04c7003c6ad79b480)]
 ### [4.1.0](https://github.com/eea/volto-tableau/compare/4.0.0...4.1.0) - 15 June 2023
 
 ## [4.0.0](https://github.com/eea/volto-tableau/compare/3.0.8...4.0.0) - 13 June 2023
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`e33bb21`](https://github.com/eea/volto-tableau/commit/e33bb21eb429c33e3a15d771487a1c9af8ccb0d5)]
 
 #### :hammer_and_wrench: Others
 
@@ -298,6 +339,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`f5deccd`](https://github.com/eea/volto-tableau/commit/f5deccd84372752908b300c5cfd78134818e5ce4)]
 ### [3.0.6](https://github.com/eea/volto-tableau/compare/3.0.5...3.0.6) - 30 January 2023
 
 ### [3.0.5](https://github.com/eea/volto-tableau/compare/3.0.4...3.0.5) - 26 January 2023
@@ -369,6 +411,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update commands.js [Nilesh - [`7c48437`](https://github.com/eea/volto-tableau/commit/7c4843780efb9b85a4728de73c00d831c1d8fdcf)]
 - Update e2e.js [Nilesh - [`f67b45c`](https://github.com/eea/volto-tableau/commit/f67b45c170f58f8d0301192994226f173e4cb00a)]
 - latest volto compatibility refs #154757 [nileshgulia1 - [`881ba48`](https://github.com/eea/volto-tableau/commit/881ba482dc9b82e7fdac16549d41e80a6d26b3de)]
+- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`58e25df`](https://github.com/eea/volto-tableau/commit/58e25df2291add09670143bee54cde103ee835b9)]
 ### [1.3.0](https://github.com/eea/volto-tableau/compare/1.2.5...1.3.0) - 28 September 2022
 
 #### :hammer_and_wrench: Others
@@ -382,11 +425,15 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Use volto 16 alpha 14 [Miu Razvan - [`93641be`](https://github.com/eea/volto-tableau/commit/93641be4c2393f49008aff789400cf7c947949fd)]
 - Revert volto-tableau group to common [Andrei Grigore - [`9d24c6d`](https://github.com/eea/volto-tableau/commit/9d24c6d2767fed6a840cddaee55dbd5cecb544b5)]
 - Tableaugroup typo fix [Andrei Grigore - [`b0b5378`](https://github.com/eea/volto-tableau/commit/b0b5378a437043120a96c9e5e8802584145daa22)]
+- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`3234347`](https://github.com/eea/volto-tableau/commit/3234347e524cc0ed4918242f503fe9e7dba266b2)]
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`d237e1c`](https://github.com/eea/volto-tableau/commit/d237e1c72817d7e68a3eb698563674d1514db24f)]
 ### [1.2.4](https://github.com/eea/volto-tableau/compare/1.2.3...1.2.4) - 25 October 2021
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`2b19679`](https://github.com/eea/volto-tableau/commit/2b19679e2c7bcdc83082d1c73a595eea8b86d14f)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`384ccae`](https://github.com/eea/volto-tableau/commit/384ccaebed8c414a5c90eb96c6ce0a2b091f249c)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`589258e`](https://github.com/eea/volto-tableau/commit/589258e9b3cbba9cee37c57bb85ca5b707bc65d7)]
 ### [1.2.3](https://github.com/eea/volto-tableau/compare/1.2.2...1.2.3) - 14 June 2021
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "8.0.6",
+  "version": "8.0.7",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/Blocks/TableauBlock/View.test.jsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import View from './View';
+import '@testing-library/jest-dom/extend-expect';
+import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
+
+jest.mock('@eeacms/volto-tableau/Tableau/Tableau', () =>
+  jest.fn(() => <div>Mocked Tableau</div>),
+);
+
+jest.mock('@plone/volto/registry', () => ({
+  blocks: {
+    blocksConfig: {
+      tableau_block: {
+        breakpoints: {},
+      },
+    },
+  },
+}));
+
+const mockStore = configureStore([]);
+
+describe('View component', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      router: {
+        location: {
+          search: '?param1=value1',
+        },
+      },
+      discodata_query: {
+        search: {},
+      },
+      screen: {},
+    });
+  });
+
+  it('renders correctly with title and description when loaded', () => {
+    const mockProps = {
+      block: '1234',
+      data: {
+        title: 'Test Title',
+        description: 'Test Description',
+        staticParameters: [],
+        urlParameters: [],
+      },
+      mode: 'view',
+      query: {},
+    };
+
+    render(
+      <Provider store={store}>
+        <View {...mockProps} />
+      </Provider>,
+    );
+
+    // Simulăm vizualizarea încărcată
+    const tableauBlock = screen.getByText('Mocked Tableau');
+    expect(tableauBlock).toBeInTheDocument();
+
+    // Verificăm titlul și descrierea
+    expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
+    expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
+
+    // Aici simulăm setVizState pentru a actualiza starea vizualizării ca fiind "loaded"
+    mockProps.setVizState = jest.fn((state) => {
+      state.loaded = true;
+    });
+
+    // Re-render după schimbarea stării
+    render(
+      <Provider store={store}>
+        <View {...mockProps} />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+  });
+
+  it('sets extraFilters correctly based on query parameters', () => {
+    const mockProps = {
+      block: '1234',
+      data: {
+        staticParameters: [],
+        urlParameters: [{ field: 'filter1', urlParam: 'param1' }],
+      },
+      mode: 'view',
+      query: { param1: 'value1' },
+    };
+
+    render(
+      <Provider store={store}>
+        <View {...mockProps} />
+      </Provider>,
+    );
+
+    expect(Tableau).toHaveBeenCalledWith(
+      expect.objectContaining({
+        extraFilters: { filter1: 'value1' },
+      }),
+      {},
+    );
+  });
+
+  it('renders Tableau with correct props', () => {
+    const mockProps = {
+      block: '1234',
+      data: {
+        title: 'Test Title',
+        description: 'Test Description',
+        staticParameters: [{ field: 'static1', value: 'staticValue' }],
+        urlParameters: [],
+      },
+      mode: 'view',
+      query: {},
+    };
+
+    render(
+      <Provider store={store}>
+        <View {...mockProps} />
+      </Provider>,
+    );
+
+    expect(Tableau).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({
+          title: 'Test Title',
+          description: 'Test Description',
+          with_sources: true,
+          with_download: true,
+          with_share: true,
+          with_enlarge: true,
+        }),
+        extraOptions: { static1: 'staticValue' },
+      }),
+      {},
+    );
+  });
+});

package/src/Widgets/VisualizationWidget.jsx

@@ -16,9 +16,21 @@ import {
 } from '@eeacms/volto-tableau/Tableau/helpers';
 
 import '@eeacms/volto-tableau/less/tableau.less';
+import { getBaseUrl } from '@plone/volto/helpers';
+
+function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
 
 const VisualizationWidget = (props) => {
-  const { location, content } = props;
+  const { location, content, onChange, id } = props;
   const ogValue = props.value || {};
   const inAddForm = props.location.pathname.split('/').pop() === 'add';
   const viz = React.useRef();
@@ -120,6 +132,29 @@ const VisualizationWidget = (props) => {
     );
   }, [vizState, value]);
 
+  React.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}>
       <Modal id="tableau-editor-modal" open={open}>

package/src/index.js

@@ -5,6 +5,7 @@ import {
   VisualizationViewWidget,
   CreatableSelectWidget,
 } from './Widgets';
+import { preview_image } from './middlewares/preview_image';
 
 const applyConfig = (config) => {
   config.settings.allowed_cors_destinations = [
@@ -12,7 +13,10 @@ const applyConfig = (config) => {
     'public.tableau.com',
   ];
 
-  config.settings.storeExtenders = [...(config.settings.storeExtenders || [])];
+  config.settings.storeExtenders = [
+    ...(config.settings.storeExtenders || []),
+    preview_image,
+  ];
 
   config.views.contentTypesViews.tableau_visualization = VisualizationView;
   config.widgets.id.tableau_visualization = VisualizationWidget;

package/src/middlewares/preview_image.js

@@ -0,0 +1,108 @@
+import {
+  CREATE_CONTENT,
+  UPDATE_CONTENT,
+} from '@plone/volto/constants/ActionTypes';
+
+export const preview_image = (middlewares) => [
+  (store) => (next) => (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 !== 'tableau_visualization' ||
+      contentData.preview_image_saved ||
+      !action?.request?.data?.tableau_visualization?.preview
+    ) {
+      return next(action);
+    }
+
+    if (
+      lastPreviewImage &&
+      lastPreviewImage !== 'preview_image_generated_tableau_visualization.png'
+    ) {
+      if (action?.request?.data?.tableau_visualization) {
+        const tableauVisualizationData = {
+          ...action.request.data.tableau_visualization,
+        };
+
+        if (
+          tableauVisualizationData.preview &&
+          tableauVisualizationData.preview_url_loaded
+        )
+          delete tableauVisualizationData.preview;
+        delete tableauVisualizationData.preview_url_loaded;
+
+        return next({
+          ...action,
+          request: {
+            ...action.request,
+            data: {
+              ...action.request.data,
+
+              tableau_visualization: tableauVisualizationData,
+            },
+          },
+        });
+      } else return next(action);
+    }
+
+    try {
+      const previewImage = {
+        preview_image: {
+          data: action.request.data.tableau_visualization.preview.split(',')[1],
+          encoding: 'base64',
+          'content-type': 'image/png',
+          filename: 'preview_image_generated_tableau_visualization.png',
+        },
+        preview_image_saved: true,
+      };
+
+      const tableauVisualizationData = {
+        ...action.request.data.tableau_visualization,
+      };
+      delete tableauVisualizationData.preview;
+      delete tableauVisualizationData.preview_url_loaded;
+
+      return next({
+        ...action,
+        request: {
+          ...action.request,
+          data: {
+            ...action.request.data,
+            ...previewImage,
+            tableau_visualization: tableauVisualizationData,
+          },
+        },
+      });
+    } catch (error) {
+      if (action.request.data.tableau_visualization.preview) {
+        const tableauVisualizationData = {
+          ...action.request.data.tableau_visualization,
+        };
+        delete tableauVisualizationData.preview;
+        delete tableauVisualizationData.preview_url_loaded;
+
+        return next({
+          ...action,
+          request: {
+            ...action.request,
+            data: {
+              ...action.request.data,
+              tableau_visualization: tableauVisualizationData,
+            },
+          },
+        });
+      } else return next(action);
+    }
+  },
+  ...middlewares,
+];

package/src/middlewares/preview_image.test.js

@@ -0,0 +1,30 @@
+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': 'tableau_visualization',
+            preview_image: 'existing_image.png',
+            preview_image_saved: false,
+          },
+        },
+      })),
+    };
+    next = jest.fn();
+    middlewares = [];
+  });
+
+  it('should pass through if action type is not CREATE_CONTENT or UPDATE_CONTENT', () => {
+    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ă
+  });
+});