@eeacms/volto-tableau 8.1.0 → 8.1.2

package/CHANGELOG.md

@@ -4,7 +4,21 @@ 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.1.0](https://github.com/eea/volto-tableau/compare/8.0.7...8.1.0) - 11 September 2024
+### [8.1.2](https://github.com/eea/volto-tableau/compare/8.1.1...8.1.2) - 14 November 2024
+
+#### :hammer_and_wrench: Others
+
+- add test [Miu Razvan - [`862b32c`](https://github.com/eea/volto-tableau/commit/862b32c6d2760cc2169eef9f900491e6afb9a00a)]
+- add VisualizationView test [Miu Razvan - [`b4bea0a`](https://github.com/eea/volto-tableau/commit/b4bea0a6fc9814927b0b471ceebf4a9d4bfc50f2)]
+- Disable tableau editor actions while loading the tableau [Miu Razvan - [`9f33c3c`](https://github.com/eea/volto-tableau/commit/9f33c3c2c3bcb0a3e36ba21e40cbb86f2dfc6150)]
+- Extract parameters from tableau url, ref #279989 [Miu Razvan - [`f3c00d1`](https://github.com/eea/volto-tableau/commit/f3c00d124bd9417f44d9e9a6b054687de0859bbd)]
+### [8.1.1](https://github.com/eea/volto-tableau/compare/8.1.0...8.1.1) - 11 October 2024
+
+#### :bug: Bug Fixes
+
+- fix: Increase wait time EEA Screenshooter when saving preview image - refs #277935 [dobri1408 - [`f9e5d01`](https://github.com/eea/volto-tableau/commit/f9e5d01033fd011c1b411b2cb3e271dfc140f19b)]
+
+### [8.1.0](https://github.com/eea/volto-tableau/compare/8.0.7...8.1.0) - 13 September 2024
 
 #### :hammer_and_wrench: Others
 
@@ -51,6 +65,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :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
@@ -182,12 +197,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
 
@@ -214,6 +231,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
 
@@ -223,6 +241,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
 
@@ -280,6 +301,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
@@ -291,17 +313,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
 
@@ -333,6 +359,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
@@ -404,6 +431,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
@@ -417,11 +445,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/cypress/e2e/block-tableau.cy.js

@@ -27,13 +27,18 @@ describe('Blocks Tests', () => {
   afterEach(slateAfterEach);
 
   it('Add Tableau block', () => {
+    cy.intercept('GET', `/**/*?expand*`, {
+      statusCode: 200,
+    }).as('content');
     // when I add a maps block
     cy.addNewBlock('tableau');
 
     cy.get(
       `.sidebar-container .field-wrapper-tableau_vis_url #field-tableau_vis_url`,
     ).type('/path/to/dashboard', { force: true });
+    cy.wait('@content');
     cy.get('#toolbar-save').click({ force: true });
+    cy.intercept('GET', `/**/*?expand*`).as('content');
     cy.wait('@content');
     cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
   });

package/jest.setup.js

@@ -23,6 +23,17 @@ global.store = mockStore({
 const mockReactRouter = jest.requireActual('react-router');
 const mockSemanticComponents = jest.requireActual('semantic-ui-react');
 const mockComponents = jest.requireActual('@plone/volto/components');
+const config = jest.requireActual('@plone/volto/registry').default;
+
+config.blocks.blocksConfig = {
+  embed_tableau_visualization: {
+    breakpoints: {
+      desktop: [Infinity, 992],
+      tablet: [991, 768],
+      phone: [767, 0],
+    },
+  },
+};
 
 jest.mock('react-router', () => {
   return {

package/package.json

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

package/src/Blocks/EmbedTableauVisualization/schema.js

@@ -69,7 +69,7 @@ const staticParameters = {
   required: [],
 };
 
-const schema = (props) => {
+const getSchema = (props) => {
   return {
     title: 'Embed Dashboard (Tableau)',
     fieldsets: [
@@ -182,4 +182,4 @@ const schema = (props) => {
   };
 };
 
-export default schema;
+export default getSchema;

package/src/Tableau/Tableau.jsx

@@ -25,6 +25,7 @@ import {
   toInteger,
   toNumber,
 } from 'lodash';
+import qs from 'qs';
 import cx from 'classnames';
 import { Button } from 'semantic-ui-react';
 import { Toast, Icon } from '@plone/volto/components';
@@ -44,6 +45,12 @@ import resetSVG from '@plone/volto/icons/reset.svg';
 
 import '@eeacms/volto-embed/Toolbar/styles.less';
 
+function decodeString(str) {
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = str;
+  return tempDiv.textContent || tempDiv.innerText || '';
+}
+
 function getHeight(height) {
   const asNumber = isNumber(Number(height)) && !isNaN(Number(height));
   if (asNumber) {
@@ -52,6 +59,22 @@ function getHeight(height) {
   return height;
 }
 
+function getTableauValue(value, dataType) {
+  if (dataType === 'string' && !isString(value)) {
+    return toString(value);
+  }
+  if (dataType === 'integer' && !isInteger(value)) {
+    return toInteger(value);
+  }
+  if (dataType === 'float' && !isNumber(value)) {
+    return toNumber(value);
+  }
+  if (dataType === 'boolean' && !isBoolean(value)) {
+    return !!value;
+  }
+  return value;
+}
+
 const TableauDebug = ({ mode, data, vizState, url, version, clearData }) => {
   const { loaded, error } = vizState;
   const { filters = {}, parameters = {} } = data;
@@ -136,6 +159,7 @@ const Tableau = forwardRef((props, ref) => {
     with_enlarge = true,
     tableau_height,
   } = data;
+
   const device = useMemo(
     () => getDevice(breakpoints, screen.page?.width || Infinity),
     [breakpoints, screen],
@@ -214,46 +238,45 @@ const Tableau = forwardRef((props, ref) => {
     }
   };
 
-  const onVizStateUpdate = useCallback((loaded, loading, error) => {
-    vizState.current = { ...vizState.current, loaded, loading, error };
-    setLoaded(loaded);
-    setLoading(loading);
-    setError(error);
-    if (setVizState) {
-      setVizState({ loaded, loading, error });
-    }
-    /* eslint-disable-next-line */
-  }, []);
+  const onVizStateUpdate = useCallback(
+    (loaded, loading, error) => {
+      vizState.current = { ...vizState.current, loaded, loading, error };
+      setLoaded(loaded);
+      setLoading(loading);
+      setError(error);
+      if (setVizState) {
+        setVizState({ loaded, loading, error });
+      }
+    },
+    [setVizState],
+  );
 
-  const activateDefaultSheet = useCallback(() => {
-    if (!vizState.current.loaded || !viz.current) return;
+  const activateDefaultSheet = useCallback(async () => {
+    if (!vizState.current.loaded || !viz.current) return Promise.resolve();
     const workbook = viz.current.getWorkbook();
     const sheetnames = getSheetnames(viz.current);
     const activeSheetName = getActiveSheetname(viz.current);
     if (sheetnames.includes(sheetname) && sheetname !== activeSheetName) {
-      workbook.activateSheetAsync(sheetname).then(() => {
-        onVizStateUpdate(true, false, null);
-      });
-    } else {
-      onVizStateUpdate(true, false, null);
+      return workbook.activateSheetAsync(sheetname);
     }
-  }, [onVizStateUpdate, sheetname]);
+    return Promise.resolve();
+  }, [sheetname]);
 
-  const clearData = () => {
+  const clearData = useCallback(() => {
     onChangeBlock(block, {
       ...data,
       filters: {},
       parameters: {},
     });
-  };
+  }, [onChangeBlock, block, data]);
 
-  const disposeViz = () => {
+  const disposeViz = useCallback(() => {
     if (viz.current) {
       viz.current.dispose();
       viz.current = null;
     }
     onVizStateUpdate(false, false, null);
-  };
+  }, [onVizStateUpdate]);
 
   const initViz = () => {
     try {
@@ -265,12 +288,12 @@ const Tableau = forwardRef((props, ref) => {
         device: !!breakpointUrl ? device : 'desktop',
         ...extraOptions,
         ...data.filters,
+        ...data.parameters,
         ...extraFilters,
         ...extraParameters,
-        onFirstInteractive: () => {
+        onFirstInteractive: async () => {
           onVizStateUpdate(true, true, null);
-          setInitiateViz(false);
-          activateDefaultSheet();
+          await activateDefaultSheet();
           if (viz.current && mode === 'edit' && !breakpointUrl) {
             const sheetnames = getSheetnames(viz.current);
             const activeSheetname = getActiveSheetname(viz.current);
@@ -282,6 +305,24 @@ const Tableau = forwardRef((props, ref) => {
             if (!sheetname || !sheetnames.includes(sheetname)) {
               newData.sheetname = activeSheetname;
             }
+            if (newData.url !== url) {
+              // Get parameters from url
+              const workbook = viz.current.getWorkbook();
+              const tableauParameters = await workbook.getParametersAsync();
+              const searchParams = qs.parse(decodeString(new URL(url).search));
+              tableauParameters.forEach((param) => {
+                const name = param.getName();
+                const dataType = param.getDataType();
+                if (!searchParams[name]) return;
+                if (!newData.parameters) {
+                  newData.parameters = {};
+                }
+                newData.parameters[name] = getTableauValue(
+                  searchParams[name],
+                  dataType,
+                );
+              });
+            }
             if (newData.url !== url || newData.sheetname !== sheetname) {
               onChangeBlock(block, {
                 ...data,
@@ -312,6 +353,8 @@ const Tableau = forwardRef((props, ref) => {
               },
             );
           }
+          onVizStateUpdate(true, false, null);
+          setInitiateViz(false);
         },
       });
     } catch (e) {
@@ -346,9 +389,9 @@ const Tableau = forwardRef((props, ref) => {
     } else {
       disposeViz();
     }
-    /* eslint-disable-next-line */
-  }, [tableau, url, hideTabs, hideToolbar, toolbarPosition]);
+  }, [tableau, url, disposeViz, hideTabs, hideToolbar, toolbarPosition]);
 
+  // Initialize viz
   useEffect(() => {
     if (initiateViz && !loaded && !loading) {
       initViz();
@@ -396,6 +439,7 @@ const Tableau = forwardRef((props, ref) => {
   //   /* eslint-disable-next-line */
   // }, [loaded, JSON.stringify(extraFilters)]);
 
+  // Add extra parameters
   useEffect(() => {
     async function addExtraParameters() {
       if (vizState.current.loaded && viz.current) {
@@ -419,21 +463,9 @@ const Tableau = forwardRef((props, ref) => {
             value = value
               .filter((v) => includes(values, v))
               .map((v) => {
-                if (dataType === 'string' && !isString(v)) {
-                  return toString(v);
-                }
-                if (dataType === 'integer' && !isInteger(v)) {
-                  return toInteger(v);
-                }
-                if (dataType === 'float' && !isNumber(v)) {
-                  return toNumber(v);
-                }
-                if (dataType === 'boolean' && !isBoolean(v)) {
-                  return !!v;
-                }
-                return v;
+                return getTableauValue(v, dataType);
               });
-            if (value.length) {
+            if (value?.length) {
               workbook.changeParameterValueAsync(fieldName, value);
             }
           }
@@ -450,6 +482,7 @@ const Tableau = forwardRef((props, ref) => {
     /* eslint-disable-next-line */
   }, [loaded, JSON.stringify(extraParameters)]);
 
+  // Update viz scale on window resize
   useEffect(() => {
     if (vizState.current.loaded && viz.current && autoScale) {
       updateScale();
@@ -457,14 +490,18 @@ const Tableau = forwardRef((props, ref) => {
     /* eslint-disable-next-line */
   }, [loaded, screen?.page?.width]);
 
+  // Activate default sheet
   useEffect(() => {
     if (vizState.current.loaded && viz.current) {
       onVizStateUpdate(true, true, null);
-      activateDefaultSheet();
+      activateDefaultSheet().then(() => {
+        onVizStateUpdate(true, false, null);
+      });
     }
     /* eslint-disable-next-line */
   }, [sheetname]);
 
+  // Set mobile mode
   useEffect(() => {
     if (!loading && tableauEl.current) {
       const visWidth = tableauEl.current.offsetWidth;
@@ -477,6 +514,7 @@ const Tableau = forwardRef((props, ref) => {
     }
   }, [screen, mobile, loading]);
 
+  // Keep viz reference
   useImperativeHandle(
     ref,
     () => {

package/src/Tableau/helpers.js

@@ -151,8 +151,10 @@ export const getActiveSheetname = (viz) => {
 export const canChangeVizData = (viz, vizState) => {
   // If viz is null it means that the viz is loading
   // If viz is undefined it means that there is no viz nor it is loading
-  if (vizState?.loading) return false;
-  return !!viz || isUndefined(viz);
+  if (vizState?.loading || !viz || isUndefined(viz)) {
+    return false;
+  }
+  return true;
 };
 
 export const getDevice = (breakpoints, width) => {

package/src/Views/VisualizationView.test.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+
+import VisualizationView from './VisualizationView';
+
+jest.doMock('@plone/volto/registry', {
+  blocks: {
+    blocksConfig: {
+      embed_tableau_visualization: {
+        breakpoints: {
+          desktop: [Infinity, 992],
+          tablet: [991, 768],
+          phone: [767, 0],
+        },
+      },
+    },
+  },
+});
+
+describe('VisualizationViewWidget', () => {
+  it('should render the component', () => {
+    const { container } = render(
+      <Provider store={{ ...global.store }}>
+        <VisualizationView
+          content={{
+            tableau_visualization: {
+              url: 'http://localhost:3000/tableau-ct',
+            },
+          }}
+        />
+      </Provider>,
+    );
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+  });
+});

package/src/Widgets/VisualizationWidget.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
 import { compose } from 'redux';
 import { isEqual } from 'lodash';
 import { Modal, Button, Grid } from 'semantic-ui-react';
@@ -34,6 +35,7 @@ const VisualizationWidget = (props) => {
   const ogValue = props.value || {};
   const inAddForm = props.location.pathname.split('/').pop() === 'add';
   const viz = React.useRef();
+  const [tableauData, setTableauData] = React.useState({});
   const [schema, setSchema] = React.useState(null);
   const [vizState, setVizState] = React.useState({
     loaded: false,
@@ -75,6 +77,33 @@ const VisualizationWidget = (props) => {
     setOpen(false);
   };
 
+  React.useEffect(() => {
+    if (!vizState.loaded || !viz.current || !!tableauData[value.url]) return;
+
+    async function _setTableauData() {
+      const workbook = await viz.current.getWorkbook();
+      const sheetNames = workbook.getPublishedSheetsInfo().map((sheet) => {
+        return sheet.getName();
+      });
+      const parameters = await workbook.getParametersAsync();
+      const filters = await workbook.getActiveSheet().getFiltersAsync();
+      setTableauData((tableauData) => ({
+        ...tableauData,
+        [value.url]: {
+          sheetNames,
+          parameters,
+          filters,
+        },
+      }));
+    }
+
+    _setTableauData();
+  }, [vizState, tableauData, value.url]);
+
+  /**
+   * Synchronizes the local `value` state with the `props.value` prop when the component is not open and the values differ.
+   * This ensures that the component's internal state reflects the latest value from the parent component.
+   */
   React.useEffect(() => {
     if (!open && !isEqual(props.value || {}, value)) {
       setValue(props.value || {});
@@ -125,12 +154,17 @@ const VisualizationWidget = (props) => {
    * Get schema
    */
   React.useEffect(() => {
-    getSchema({ config, viz: viz.current, vizState, data: value }).then(
-      (schema) => {
-        setSchema(schema);
-      },
+    setSchema(
+      getSchema({
+        config,
+        viz: viz.current,
+        vizState,
+        data: value,
+        tableauData: tableauData[value.url],
+        intl: props.intl,
+      }),
     );
-  }, [vizState, value]);
+  }, [vizState, value, tableauData, props.intl]);
 
   React.useEffect(() => {
     if (value && value.url && value.preview_url_loaded !== value.url) {
@@ -139,7 +173,7 @@ const VisualizationWidget = (props) => {
           '',
         )}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${encodeURIComponent(
           value.url,
-        )}&w=1920&h=1000&waitfor=4000`,
+        )}&w=1920&h=1000&waitfor=8000`,
       )
         .then((e) => e.blob())
         .then((myBlob) => {
@@ -216,8 +250,14 @@ const VisualizationWidget = (props) => {
           <Grid>
             <Grid.Row>
               <div className="map-edit-actions-container">
-                <Button onClick={handleClose}>Close</Button>
-                <Button color="green" onClick={handleApplyChanges}>
+                <Button disabled={vizState.loading} onClick={handleClose}>
+                  Close
+                </Button>
+                <Button
+                  disabled={vizState.loading}
+                  color="green"
+                  onClick={handleApplyChanges}
+                >
                   Apply changes
                 </Button>
               </div>
@@ -260,5 +300,6 @@ const VisualizationWidget = (props) => {
 
 export default compose(
   withRouter,
+  injectIntl,
   connect((state) => ({ content: state?.content?.data })),
 )(VisualizationWidget);

package/src/Widgets/schema.js

@@ -1,12 +1,20 @@
-import { find, includes } from 'lodash';
-import {
-  getSheetnamesChoices,
-  canChangeVizData,
-} from '@eeacms/volto-tableau/Tableau/helpers';
+import { defineMessages } from 'react-intl';
+import { find, includes, uniq } from 'lodash';
+import { canChangeVizData } from '@eeacms/volto-tableau/Tableau/helpers';
 
-async function getUrlParametersSchema({ viz, vizState, data }) {
-  const tableauParameters =
-    vizState.loaded && viz ? await viz.getWorkbook().getParametersAsync() : [];
+const messages = defineMessages({
+  CSSHeight: {
+    id: 'CSS height',
+    defaultMessage: 'CSS height',
+  },
+  CSSTableauHeightDescription: {
+    id: 'Tableau height',
+    defaultMessage: 'Tableau height',
+  },
+});
+
+function getUrlParametersSchema({ data, tableauData }) {
+  const tableauParameters = tableauData?.parameters || [];
 
   const currentFields = (data.urlParameters || [])
     .map((p) => p.field)
@@ -39,11 +47,8 @@ async function getUrlParametersSchema({ viz, vizState, data }) {
   };
 }
 
-async function getStaticParametersSchema({ viz, vizState, data }) {
-  const tableauParameters =
-    vizState.loaded && viz
-      ? (await viz.getWorkbook?.().getParametersAsync?.()) || []
-      : [];
+function getStaticParametersSchema({ data, tableauData }) {
+  const tableauParameters = tableauData?.parameters || [];
 
   const currentFields = (data.staticParameters || [])
     .map((p) => p.field)
@@ -74,11 +79,8 @@ async function getStaticParametersSchema({ viz, vizState, data }) {
   };
 }
 
-async function getDynamicFiltersSchema({ viz, vizState, data }) {
-  const tableauFilters =
-    vizState.loaded && viz
-      ? (await viz.getWorkbook?.().getActiveSheet?.().getFiltersAsync?.()) || []
-      : [];
+function getDynamicFiltersSchema({ data, tableauData }) {
+  const tableauFilters = tableauData?.filters || [];
 
   const currentFields = (data.staticFilters || [])
     .map((p) => p.field)
@@ -111,11 +113,8 @@ async function getDynamicFiltersSchema({ viz, vizState, data }) {
   };
 }
 
-async function getStaticFiltersSchema({ viz, vizState, data }) {
-  const tableauFilters =
-    vizState.loaded && viz
-      ? (await viz.getWorkbook?.().getActiveSheet?.().getFiltersAsync?.()) || []
-      : [];
+function getStaticFiltersSchema({ data, tableauData }) {
+  const tableauFilters = tableauData?.filters || [];
 
   const currentFields = (data.staticFilters || [])
     .map((p) => p.field)
@@ -130,11 +129,13 @@ async function getStaticFiltersSchema({ viz, vizState, data }) {
         widget: 'creatable_select',
         isMulti: false,
         creatable: true,
-        choices: tableauFilters
-          .filter((p) => {
-            return !includes(currentFields, p.getFieldName());
-          })
-          .map((p) => [p.getFieldName(), p.getFieldName()]),
+        choices: uniq(
+          tableauFilters
+            .filter((f) => {
+              return !includes(currentFields, f.getFieldName());
+            })
+            .map((f) => f.getFieldName()),
+        ).map((f) => [f, f]),
       },
       value: {
         title: 'Value',
@@ -170,7 +171,7 @@ const breakpointUrlSchema = (config) => {
   };
 };
 
-const schema = async ({ config, viz, vizState, data }) => {
+const schema = ({ config, viz, vizState, data, tableauData, intl }) => {
   const isDisabled = !canChangeVizData(viz, vizState);
 
   return {
@@ -189,6 +190,7 @@ const schema = async ({ config, viz, vizState, data }) => {
           'hideTabs',
           'hideToolbar',
           'autoScale',
+          'tableau_height',
           'toolbarPosition',
           'breakpointUrls',
         ],
@@ -211,7 +213,7 @@ const schema = async ({ config, viz, vizState, data }) => {
       },
       sheetname: {
         title: 'Sheetname',
-        choices: getSheetnamesChoices(viz),
+        choices: tableauData?.sheetNames?.map((sheet) => [sheet, sheet]) || [],
         isDisabled,
       },
       hideTabs: {
@@ -230,6 +232,18 @@ const schema = async ({ config, viz, vizState, data }) => {
         description: 'Scale down tableau according to width',
         isDisabled,
       },
+      tableau_height: {
+        title: (
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
+          >
+            {intl.formatMessage(messages.CSSHeight)}
+          </a>
+        ),
+        description: intl.formatMessage(messages.CSSTableauHeightDescription),
+      },
       toolbarPosition: {
         title: 'Toolbar position',
         choices: [
@@ -242,7 +256,7 @@ const schema = async ({ config, viz, vizState, data }) => {
       urlParameters: {
         title: 'Dynamic parameters',
         widget: 'object_list',
-        schema: await getUrlParametersSchema({ viz, vizState, data }),
+        schema: getUrlParametersSchema({ data, tableauData }),
         description: (
           <div style={{ color: 'rgb(15, 130, 204)', fontWeight: '400' }}>
             <p>Set a list of dynamic parameters that can be used as:</p>
@@ -288,7 +302,7 @@ const schema = async ({ config, viz, vizState, data }) => {
       staticParameters: {
         title: 'Static parameters',
         widget: 'object_list',
-        schema: await getStaticParametersSchema({ viz, vizState, data }),
+        schema: getStaticParametersSchema({ data, tableauData }),
         schemaExtender: (schema, data) => {
           const tableauParameter = find(
             schema.tableauParameters,
@@ -335,7 +349,7 @@ const schema = async ({ config, viz, vizState, data }) => {
       dynamicFilters: {
         title: 'Dynamic filters',
         widget: 'object_list',
-        schema: await getDynamicFiltersSchema({ viz, vizState, data }),
+        schema: getDynamicFiltersSchema({ data, tableauData }),
         description: (
           <div style={{ color: 'rgb(15, 130, 204)', fontWeight: '400' }}>
             <p>Set a list of dynamic filters that can be used as:</p>
@@ -381,7 +395,7 @@ const schema = async ({ config, viz, vizState, data }) => {
       staticFilters: {
         title: 'Static filters',
         widget: 'object_list',
-        schema: await getStaticFiltersSchema({ viz, vizState, data }),
+        schema: getStaticFiltersSchema({ data, tableauData }),
         schemaExtender: (schema, data) => {
           const tableauFilters = find(
             schema.tableauFilters,