@eeacms/volto-tableau 8.1.1 → 8.1.2

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.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

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.1",
+  "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,19 +463,7 @@ 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) {
               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

@@ -35,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,
@@ -76,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 || {});
@@ -126,16 +154,17 @@ const VisualizationWidget = (props) => {
    * Get schema
    */
   React.useEffect(() => {
-    getSchema({
-      config,
-      viz: viz.current,
-      vizState,
-      data: value,
-      intl: props.intl,
-    }).then((schema) => {
-      setSchema(schema);
-    });
-  }, [vizState, value, props.intl]);
+    setSchema(
+      getSchema({
+        config,
+        viz: viz.current,
+        vizState,
+        data: value,
+        tableauData: tableauData[value.url],
+        intl: props.intl,
+      }),
+    );
+  }, [vizState, value, tableauData, props.intl]);
 
   React.useEffect(() => {
     if (value && value.url && value.preview_url_loaded !== value.url) {
@@ -221,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>

package/src/Widgets/schema.js

@@ -1,9 +1,6 @@
 import { defineMessages } from 'react-intl';
-import { find, includes } from 'lodash';
-import {
-  getSheetnamesChoices,
-  canChangeVizData,
-} from '@eeacms/volto-tableau/Tableau/helpers';
+import { find, includes, uniq } from 'lodash';
+import { canChangeVizData } from '@eeacms/volto-tableau/Tableau/helpers';
 
 const messages = defineMessages({
   CSSHeight: {
@@ -16,9 +13,8 @@ const messages = defineMessages({
   },
 });
 
-async function getUrlParametersSchema({ viz, vizState, data }) {
-  const tableauParameters =
-    vizState.loaded && viz ? await viz.getWorkbook().getParametersAsync() : [];
+function getUrlParametersSchema({ data, tableauData }) {
+  const tableauParameters = tableauData?.parameters || [];
 
   const currentFields = (data.urlParameters || [])
     .map((p) => p.field)
@@ -51,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)
@@ -86,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)
@@ -123,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)
@@ -142,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',
@@ -182,7 +171,7 @@ const breakpointUrlSchema = (config) => {
   };
 };
 
-const schema = async ({ config, viz, vizState, data, intl }) => {
+const schema = ({ config, viz, vizState, data, tableauData, intl }) => {
   const isDisabled = !canChangeVizData(viz, vizState);
 
   return {
@@ -224,7 +213,7 @@ const schema = async ({ config, viz, vizState, data, intl }) => {
       },
       sheetname: {
         title: 'Sheetname',
-        choices: getSheetnamesChoices(viz),
+        choices: tableauData?.sheetNames?.map((sheet) => [sheet, sheet]) || [],
         isDisabled,
       },
       hideTabs: {
@@ -267,7 +256,7 @@ const schema = async ({ config, viz, vizState, data, intl }) => {
       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>
@@ -313,7 +302,7 @@ const schema = async ({ config, viz, vizState, data, intl }) => {
       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,
@@ -360,7 +349,7 @@ const schema = async ({ config, viz, vizState, data, intl }) => {
       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>
@@ -406,7 +395,7 @@ const schema = async ({ config, viz, vizState, data, intl }) => {
       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,