@eeacms/volto-tableau 2.0.0 → 3.0.1

package/.project.eslintrc.js

@@ -0,0 +1,47 @@
+const fs = require('fs');
+const path = require('path');
+
+const projectRootPath = fs.existsSync('./project')
+  ? fs.realpathSync('./project')
+  : fs.realpathSync('./../../../');
+const packageJson = require(path.join(projectRootPath, 'package.json'));
+const jsConfig = require(path.join(projectRootPath, 'jsconfig.json'))
+  .compilerOptions;
+
+const pathsConfig = jsConfig.paths;
+
+let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+
+Object.keys(pathsConfig).forEach((pkg) => {
+  if (pkg === '@plone/volto') {
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
+  }
+});
+const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
+const reg = new AddonConfigurationRegistry(projectRootPath);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(reg.packages).map((o) => [
+  o,
+  reg.packages[o].modulePath,
+]);
+
+module.exports = {
+  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', '@plone/volto/src'],
+          ...addonAliases,
+          ['@package', `${__dirname}/src`],
+          ['~', `${__dirname}/src`],
+        ],
+        extensions: ['.js', '.jsx', '.json'],
+      },
+      'babel-plugin-root-import': {
+        rootPathSuffix: 'src',
+      },
+    },
+  },
+};

package/CHANGELOG.md

@@ -4,7 +4,34 @@ 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).
 
-### [2.0.0](https://github.com/eea/volto-tableau/compare/1.3.0...2.0.0) - 31 October 2022
+### [3.0.1](https://github.com/eea/volto-tableau/compare/3.0.0...3.0.1) - 13 January 2023
+
+#### :hammer_and_wrench: Others
+
+- helper comments [andreiggr - [`b13abfd`](https://github.com/eea/volto-tableau/commit/b13abfd3fe5813f872b98de66de63c98f4721c62)]
+- wait for client before document get [andreiggr - [`e12a3db`](https://github.com/eea/volto-tableau/commit/e12a3dbd302a33e446cc01da914d90b8cf54a024)]
+## [3.0.0](https://github.com/eea/volto-tableau/compare/2.0.0...3.0.0) - 13 January 2023
+
+#### :hammer_and_wrench: Others
+
+- Remove sources from schema [dana-cfc4 - [`0d2b862`](https://github.com/eea/volto-tableau/commit/0d2b86212b72e06d4ab81804395eda0c2919aeb8)]
+- setup the loader, script loading, data provenance, error catching [andreiggr - [`bc65898`](https://github.com/eea/volto-tableau/commit/bc65898edf878f8d011573f91fb72fb1a956d8e9)]
+- merge with better_tableau_import [andreiggr - [`2d8f314`](https://github.com/eea/volto-tableau/commit/2d8f314a939f1122c0307ccfebf4215bcea2c148)]
+- better loader response [andreiggr - [`d6f3c86`](https://github.com/eea/volto-tableau/commit/d6f3c86cc97475819db71a99108e4da739d66576)]
+- Add ConnectedTableau [dana-cfc4 - [`d83417d`](https://github.com/eea/volto-tableau/commit/d83417d1b9ea454ded0b6f24e581ac2a85c32780)]
+- lint [andreiggr - [`f268b10`](https://github.com/eea/volto-tableau/commit/f268b10710a77cd19d9cc110d60447d495a747ed)]
+- fix crashing sources && better getContent [andreiggr - [`a202967`](https://github.com/eea/volto-tableau/commit/a202967340bcb8e366868193d236d9f49b563bfc)]
+- somewhat better import [andreiggr - [`48219a3`](https://github.com/eea/volto-tableau/commit/48219a368b7165ef9e9df3cf65e643be72f5f8b0)]
+- Fix style lint errors [dana-cfc4 - [`ed1873c`](https://github.com/eea/volto-tableau/commit/ed1873ce27c81e6f2a2459f38bc4cd10d65b559b)]
+- Fix initValue not initialized [dana-cfc4 - [`bbe5802`](https://github.com/eea/volto-tableau/commit/bbe5802c8e2ee794b15570959a00307531b32d96)]
+- Add placeholder in case of errors [dana-cfc4 - [`1af2d0d`](https://github.com/eea/volto-tableau/commit/1af2d0da04635716f4aef320c5f84694a59435e7)]
+- importmap for versions of tableau [Andrei Grigore - [`4e03cb2`](https://github.com/eea/volto-tableau/commit/4e03cb2c3a3bf11d186462067d12c2685b9bf607)]
+- Increase addon version [danac - [`26b58c5`](https://github.com/eea/volto-tableau/commit/26b58c57b6cb4be4eed23fe3343c65250e6d593a)]
+- Add data provenance [danac - [`bd46995`](https://github.com/eea/volto-tableau/commit/bd4699547be72b2d9dad292ee3681b937e741239)]
+- Add eslint config [danac - [`394e5d1`](https://github.com/eea/volto-tableau/commit/394e5d11591610a97cb5b57d882da818b0128b7e)]
+- Fix formatting issues [danac - [`2ef1bae`](https://github.com/eea/volto-tableau/commit/2ef1bae5caf44fb144f8251aed2895df2e03de7d)]
+- Add Embed EEA Tableau block [danac - [`54e45b2`](https://github.com/eea/volto-tableau/commit/54e45b2b0b29d01173315ffe47e74938e43cdf23)]
+## [2.0.0](https://github.com/eea/volto-tableau/compare/1.3.0...2.0.0) - 1 November 2022
 
 #### :bug: Bug Fixes
 

package/cypress/support/commands.js

@@ -71,7 +71,8 @@ Cypress.Commands.add(
           id: contentId,
           title: contentTitle,
           image: {
-            data: 'iVBORw0KGgoAAAANSUhEUgAAANcAAAA4CAMAAABZsZ3QAAAAM1BMVEX29fK42OU+oMvn7u9drtIPisHI4OhstdWZyt4fkcXX5+sAg74umMhNp86p0eJ7vNiKw9v/UV4wAAAAAXRSTlMAQObYZgAABBxJREFUeF7tmuty4yAMhZG4X2zn/Z92J5tsBJwWXG/i3XR6frW2Y/SBLIRAfaQUDNt8E5tLUt9BycfcKfq3R6Mlfyimtx4rzp+K3dtibXkor99zsEqLYZltblTecciogoh+TXfY1Ve4dn07rCDGG9dHSEEOg/GmXl0U1XDxTKxNK5De7BxsyyBr6gGm2/vPxKJ8F6f7BXKfRMp1xIWK9A+5ks25alSb353dWnDJN1k35EL5f8dVGifTf/4tjUuuFq7u4srmXC60yAmldLXIWbg65RKU87lcGxJCFqUPv0IacW0PmSivOZFLE908inPToMmii/roG+MRV/O8FU88i8tFsxV3a06MFUw0Qu7RmAtdV5/HVVaOVMTWNOWSwMljLhzhcB6XIS7OK5V6AvRDNN7t5VJWQs1J40UmalbK56usBG/CuCHSYuc+rkUGeMCViNRARPrzW52N3oQLe6WifNliSuuGaH3czbVNudI9s7ZLUCLHVwWlyES522o1t14uvmbblmVTKqFjaZYJFSTPP4dLL1kU1z7p0lzdbRulmEWLxoQX+z9ce7A8GqEEucllLxePuZwdJl1Lezu0hoswvTPt61DrFcRuujV/2cmlxaGBC7Aw6cpovGANwRiSdOAWJ5AGy4gLL64dl0QhUEAuEUNws+XxV+OKGPdw/hESGYF9XEGaFC7sNLMSXWJjHsnanYi87VK428N2uxpOjOFANcagLM5l+7mSycM8KknZpKLcGi6jmzWGr/vLurZ/0g4u9AZuAoeb5r1ceQhyiTPY1E4wUR6u/F3H2ojSpXMMriBPT9cezTto8Cx+MsglHL4fv1Rxrb1LVw9yvyQpJ3AhFnLZfuRLH2QsOG3FGGD20X/th/u5bFAt16Bt308KjF+MNOXgl/SquIEySX3GhaZvc67KZbDxcCDORz2N8yCWPaY5lyQZO7lQ29fnZbt3Xu6qoge4+DjXl/MocySPOp9rlvdyznahRyHEYd77v3LhugOXDv4J65QXfl803BDAdaWBEDhfVx7nKofjoVCgxnUAqw/UAUDPn788BDvQuG4TDtdtUPvzjSlXAB8DvaDOhhrmhwbywylXAm8CvaouikJTL93gs3y7Yy4VYbIxOHrcMizPqWOjqO9l3Uz52kibQy4xxOgqhJvD+w5rvokOcAlGvNCfeqCv1ste1stzLm0f71Iq3ZfTrPfuE5nhPtF+LvQE2lffQC7pYtQy3tdzdrKvd5TLVVzDetScS3nEKmmwDyt1Cev1kX3YfbvzNK4fzrlw+cB6vm+uiUgf2zdXI62241LawCb7Pi5FXFPF8KpzDoF/Sw2lg+GrHNbno1mhPu+VCF/vfMnw06PnUl6j48dVHD3jHNHPua+fc3o/5yp/zsGi0vYtzi3Pz5mHd4T6BWMIlewacd63AAAAAElFTkSuQmCC',
+            data:
+              'iVBORw0KGgoAAAANSUhEUgAAANcAAAA4CAMAAABZsZ3QAAAAM1BMVEX29fK42OU+oMvn7u9drtIPisHI4OhstdWZyt4fkcXX5+sAg74umMhNp86p0eJ7vNiKw9v/UV4wAAAAAXRSTlMAQObYZgAABBxJREFUeF7tmuty4yAMhZG4X2zn/Z92J5tsBJwWXG/i3XR6frW2Y/SBLIRAfaQUDNt8E5tLUt9BycfcKfq3R6Mlfyimtx4rzp+K3dtibXkor99zsEqLYZltblTecciogoh+TXfY1Ve4dn07rCDGG9dHSEEOg/GmXl0U1XDxTKxNK5De7BxsyyBr6gGm2/vPxKJ8F6f7BXKfRMp1xIWK9A+5ks25alSb353dWnDJN1k35EL5f8dVGifTf/4tjUuuFq7u4srmXC60yAmldLXIWbg65RKU87lcGxJCFqUPv0IacW0PmSivOZFLE908inPToMmii/roG+MRV/O8FU88i8tFsxV3a06MFUw0Qu7RmAtdV5/HVVaOVMTWNOWSwMljLhzhcB6XIS7OK5V6AvRDNN7t5VJWQs1J40UmalbK56usBG/CuCHSYuc+rkUGeMCViNRARPrzW52N3oQLe6WifNliSuuGaH3czbVNudI9s7ZLUCLHVwWlyES522o1t14uvmbblmVTKqFjaZYJFSTPP4dLL1kU1z7p0lzdbRulmEWLxoQX+z9ce7A8GqEEucllLxePuZwdJl1Lezu0hoswvTPt61DrFcRuujV/2cmlxaGBC7Aw6cpovGANwRiSdOAWJ5AGy4gLL64dl0QhUEAuEUNws+XxV+OKGPdw/hESGYF9XEGaFC7sNLMSXWJjHsnanYi87VK428N2uxpOjOFANcagLM5l+7mSycM8KknZpKLcGi6jmzWGr/vLurZ/0g4u9AZuAoeb5r1ceQhyiTPY1E4wUR6u/F3H2ojSpXMMriBPT9cezTto8Cx+MsglHL4fv1Rxrb1LVw9yvyQpJ3AhFnLZfuRLH2QsOG3FGGD20X/th/u5bFAt16Bt308KjF+MNOXgl/SquIEySX3GhaZvc67KZbDxcCDORz2N8yCWPaY5lyQZO7lQ29fnZbt3Xu6qoge4+DjXl/MocySPOp9rlvdyznahRyHEYd77v3LhugOXDv4J65QXfl803BDAdaWBEDhfVx7nKofjoVCgxnUAqw/UAUDPn788BDvQuG4TDtdtUPvzjSlXAB8DvaDOhhrmhwbywylXAm8CvaouikJTL93gs3y7Yy4VYbIxOHrcMizPqWOjqO9l3Uz52kibQy4xxOgqhJvD+w5rvokOcAlGvNCfeqCv1ste1stzLm0f71Iq3ZfTrPfuE5nhPtF+LvQE2lffQC7pYtQy3tdzdrKvd5TLVVzDetScS3nEKmmwDyt1Cev1kX3YfbvzNK4fzrlw+cB6vm+uiUgf2zdXI62241LawCb7Pi5FXFPF8KpzDoF/Sw2lg+GrHNbno1mhPu+VCF/vfMnw06PnUl6j48dVHD3jHNHPua+fc3o/5yp/zsGi0vYtzi3Pz5mHd4T6BWMIlewacd63AAAAAElFTkSuQmCC',
             encoding: 'base64',
             filename: 'image.png',
             'content-type': 'image/png',
@@ -124,7 +125,7 @@ Cypress.Commands.add(
         })
         .then(() => console.log(`${contentType} created`));
     }
-  }
+  },
 );
 
 // --- Add DX Content-Type ----------------------------------------------------------
@@ -217,7 +218,7 @@ Cypress.Commands.add('removeSlateJSONField', (type, name) => {
       body: {},
     })
     .then(() =>
-      console.log(`${name} SlateJSONField field removed from ${type}`)
+      console.log(`${name} SlateJSONField field removed from ${type}`),
     );
 });
 
@@ -251,7 +252,7 @@ Cypress.Commands.add('typeInSlate', { prevSubject: true }, (subject, text) => {
           new InputEvent('beforeinput', {
             inputType: 'insertText',
             data: text,
-          })
+          }),
         );
         return subject;
       })
@@ -267,7 +268,7 @@ Cypress.Commands.add('lineBreakInSlate', { prevSubject: true }, (subject) => {
       .wrap(subject)
       .then((subject) => {
         subject[0].dispatchEvent(
-          new InputEvent('beforeinput', { inputType: 'insertLineBreak' })
+          new InputEvent('beforeinput', { inputType: 'insertLineBreak' }),
         );
         return subject;
       })
@@ -315,7 +316,7 @@ Cypress.Commands.add(
         include_children: include_children,
       },
     });
-  }
+  },
 );
 
 // --- waitForResourceToLoad ----------------------------------------------------------
@@ -375,7 +376,7 @@ Cypress.Commands.add(
         setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
       }
     });
-  }
+  },
 );
 
 Cypress.Commands.add('getSlate', ({ createNewSlate = true } = {}) => {
@@ -390,7 +391,7 @@ Cypress.Commands.add('getSlate', ({ createNewSlate = true } = {}) => {
         cy.get('.block.inner').last().type('{moveToEnd}{enter}');
       }
       slate = cy.get(SLATE_SELECTOR, { timeout: 10000 }).last();
-    }
+    },
   );
   return slate;
 });
@@ -470,7 +471,7 @@ Cypress.Commands.add(
     });
     // Depending on what you're testing, you may need to chain a `.click()` here to ensure
     // further commands are picked up by whatever you're testing (this was required for Slate, for example).
-  }
+  },
 );
 
 Cypress.Commands.add(
@@ -478,7 +479,7 @@ Cypress.Commands.add(
   { prevSubject: true },
   (subject, query) => {
     cy.wrap(subject).setCursor(query, true);
-  }
+  },
 );
 
 Cypress.Commands.add(
@@ -486,7 +487,7 @@ Cypress.Commands.add(
   { prevSubject: true },
   (subject, query) => {
     cy.wrap(subject).setCursor(query);
-  }
+  },
 );
 
 // Helper functions
@@ -532,5 +533,5 @@ Cypress.Commands.add(
         failAction();
       }
     });
-  }
+  },
 );

package/package.json

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

package/src/Blocks/EmbedEEATableauBlock/Edit.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { SidebarPortal } from '@plone/volto/components';
+import { getContent } from '@plone/volto/actions';
+import View from './View';
+import Schema from './schema';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+const Edit = (props) => {
+  const { data, block, onChangeBlock, id } = props;
+  const schema = React.useMemo(() => Schema(props), [props]);
+
+  React.useEffect(() => {
+    if (!Object.hasOwn(data, 'show_sources')) {
+      onChangeBlock(block, {
+        ...data,
+        show_sources: true,
+      });
+    }
+  }, [block, data, onChangeBlock]);
+
+  return (
+    <>
+      <View data={data} id={id} />
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      block_data: state.content.data,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(Edit);

package/src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import ConnectedTableau from '../../ConnectedTableau/ConnectedTableau';
+
+import { getContent } from '@plone/volto/actions';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+const View = (props) => {
+  const { data } = props || {};
+  const { vis_url = '' } = data;
+  const show_sources = data?.show_sources ?? false;
+
+  React.useEffect(() => {
+    if (vis_url) {
+      props.getContent(vis_url, null, props.id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vis_url]);
+
+  return (
+    <>
+      {data?.vis_url ? (
+        <>
+          <ConnectedTableau {...props.tableau_visualization} id={props.id} />
+          {show_sources &&
+          data.tableauSources &&
+          props.tableau_visualization ? (
+            ''
+          ) : show_sources ? (
+            <div>Data provenance is not set in the visualization</div>
+          ) : (
+            ''
+          )}
+        </>
+      ) : (
+        <div>Please select a visualization from block editor.</div>
+      )}
+    </>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+      tableau_visualization:
+        state.content.subrequests?.[props.id]?.data?.tableau_visualization_data,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(View);

package/src/Blocks/EmbedEEATableauBlock/schema.js

@@ -0,0 +1,31 @@
+const Schema = (props) => {
+  return {
+    title: 'Embed EEA Tableau',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['vis_url', 'height', 'show_sources'],
+      },
+    ],
+    properties: {
+      vis_url: {
+        widget: 'object_by_path',
+        title: 'Visualization',
+      },
+      height: {
+        title: 'Height',
+        type: 'number',
+        default: 450,
+      },
+      show_sources: {
+        title: 'Toggle sources',
+        type: 'boolean',
+      },
+    },
+
+    required: ['vis_url'],
+  };
+};
+
+export default Schema;

package/src/ConnectedTableau/ConnectedTableau.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Tableau from '@eeacms/volto-tableau/Tableau/View';
+
+const ConnectedTableau = (props) => {
+  const [error, setError] = React.useState(null);
+  const [loaded, setLoaded] = React.useState(null);
+  return (
+    <div className="tableau-block">
+      <Tableau
+        error={error}
+        loaded={loaded}
+        setError={setError}
+        setLoaded={setLoaded}
+        data={{ ...props?.general, ...props?.options, ...props?.extraOptions }}
+        url={props?.general?.url}
+      />
+    </div>
+  );
+};
+
+export default ConnectedTableau;

package/src/Tableau/View.jsx

@@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
 import { setTableauApi } from '@eeacms/volto-tableau/actions';
 import cx from 'classnames';
-import { isMyScriptLoaded, loadTableauScript } from '../helpers';
+import { loadTableauScript } from '../helpers';
 
 const Tableau = (props) => {
   const ref = React.useRef(null);
@@ -36,7 +36,7 @@ const Tableau = (props) => {
   const url = props.url || defaultUrl;
 
   //load tableau from script tag
-  const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
+  const tableau = loadTableauScript(() => {}, version);
 
   const onFilterChange = (filter) => {
     const newFilters = { ...filters.current };
@@ -186,6 +186,7 @@ const Tableau = (props) => {
     tableau,
     toolbarPosition,
     url,
+    version,
   ]);
 
   React.useEffect(() => {
@@ -205,6 +206,19 @@ const Tableau = (props) => {
   return (
     <div id="tableau-wrap">
       <div id="tableau-outer">
+        {data && Object.keys(data).length > 0 ? (
+          <>
+            {loaded ? (
+              ''
+            ) : (
+              <div className="tableau-loader">
+                <span>Loading Tableau v{version}</span>
+              </div>
+            )}
+          </>
+        ) : (
+          <div>No data present in that visualization.</div>
+        )}
         <div
           className={cx('tableau', version, {
             'tableau-scale': autoScale,

package/src/TableauBlock/View.jsx

@@ -47,6 +47,11 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, []);
 
+  React.useEffect(() => {
+    if (props.setTableauError) props.setTableauError(error);
+    /* eslint-disable-next-line */
+  }, [error]);
+
   React.useEffect(() => {
     const newExtraFilters = { ...extraFilters };
     urlParameters.forEach((element) => {

package/src/Views/VisualizationView.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import TableauView from '../TableauBlock/View';
+
+const VisualizationView = (props) => {
+  const [tableauError, setTableauError] = React.useState('');
+  const { content = {} } = props;
+  const { tableau_visualization_data = {} } = content;
+
+  const TableauNotDisplayed = () => {
+    return (
+      <div className="tableau-block not_displayed_tableau">
+        <div className="tableau-info">
+          {!tableau_visualization_data.general?.url ? (
+            <p className="tableau-error">URL required</p>
+          ) : tableauError ? (
+            <p className="tableau-error">{tableauError}</p>
+          ) : (
+            ''
+          )}
+        </div>
+      </div>
+    );
+  };
+  return (
+    <div>
+      {!tableau_visualization_data.general?.url || tableauError ? (
+        <TableauNotDisplayed />
+      ) : (
+        ''
+      )}
+      <TableauView
+        setTableauError={setTableauError}
+        data={{
+          ...tableau_visualization_data.general,
+          ...tableau_visualization_data.options,
+          ...tableau_visualization_data.extraOptions,
+        }}
+      />
+    </div>
+  );
+};
+
+export default VisualizationView;

package/src/Views/index.js

@@ -0,0 +1,3 @@
+import VisualizationView from './VisualizationView';
+
+export { VisualizationView };

package/src/Widgets/VisualizationWidget.jsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+import '@eeacms/volto-tableau/less/tableau.less';
+import config from '@plone/volto/registry';
+
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+
+import TableauView from '../TableauBlock/View';
+import Schema from './schema';
+
+const VisualizationWidget = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const { onChange = {}, id } = props;
+
+  const block = React.useMemo(() => props.block, [props.block]);
+  const value = React.useMemo(() => props.value, [props.value]);
+
+  const [intValue, setIntValue] = React.useState(value);
+  const [tableauError, setTableauError] = React.useState('');
+
+  const dataForm = { tableau_data: intValue };
+
+  const handleApplyChanges = () => {
+    onChange(id, intValue);
+    setOpen(false);
+  };
+
+  const handleClose = () => {
+    setIntValue(value);
+    setOpen(false);
+  };
+
+  const handleChangeField = (val) => {
+    setIntValue(val);
+  };
+
+  const TableauNotDisplayed = () => {
+    return (
+      <div className="tableau-block not_displayed_tableau">
+        <div className="tableau-info">
+          {intValue && intValue.general && !intValue.general.url ? (
+            <p className="tableau-error">URL required</p>
+          ) : tableauError ? (
+            <p className="tableau-error">{tableauError}</p>
+          ) : (
+            ''
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  let schema = Schema(config);
+
+  React.useEffect(() => {
+    if (!intValue?.options) {
+      setIntValue({
+        ...intValue,
+        options: {
+          autoScale: false,
+          hideTabs: false,
+          hideToolbar: false,
+          toolbarPosition: 'Top',
+        },
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [intValue]);
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="wrapper">
+        <Button
+          floated="right"
+          size="tiny"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(true);
+          }}
+        >
+          Open Tableau Editor
+        </Button>
+      </div>
+
+      {open && (
+        <Modal
+          id="tableau-editor-modal"
+          style={{ width: '95% !important' }}
+          open={true}
+        >
+          <Modal.Content scrolling>
+            <Grid stackable reversed="mobile vertically tablet vertically">
+              <Grid.Column
+                mobile={12}
+                tablet={12}
+                computer={5}
+                className="tableau-editor-column"
+              >
+                <InlineForm
+                  block={block}
+                  schema={schema}
+                  onChangeField={(id, value) => {
+                    handleChangeField(value);
+                  }}
+                  formData={dataForm}
+                />
+              </Grid.Column>
+              <Grid.Column mobile={12} tablet={12} computer={7}>
+                {(intValue && intValue.general && !intValue.general.url) ||
+                tableauError ? (
+                  <TableauNotDisplayed />
+                ) : (
+                  ''
+                )}
+                <div className="tableau-container">
+                  <TableauView
+                    setTableauError={setTableauError}
+                    data={{
+                      ...intValue?.general,
+                      ...intValue?.options,
+                      ...intValue?.extraOptions,
+                    }}
+                  />
+                </div>
+              </Grid.Column>
+            </Grid>
+          </Modal.Content>
+          <Modal.Actions>
+            <Grid>
+              <Grid.Row>
+                <div className="map-edit-actions-container">
+                  <Button onClick={handleClose}>Close</Button>
+                  <Button color="green" onClick={handleApplyChanges}>
+                    Apply changes
+                  </Button>
+                </div>
+              </Grid.Row>
+            </Grid>
+          </Modal.Actions>
+        </Modal>
+      )}
+      {(intValue && intValue.general && !intValue.general.url) ||
+      tableauError ? (
+        <TableauNotDisplayed />
+      ) : (
+        ''
+      )}
+
+      <TableauView
+        setTableauError={setTableauError}
+        data={{ ...value?.general, ...value?.options, ...value?.extraOptions }}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+export default VisualizationWidget;

package/src/Widgets/index.js

@@ -0,0 +1,3 @@
+import VisualizationWidget from './VisualizationWidget';
+
+export { VisualizationWidget };

package/src/Widgets/schema.js

@@ -0,0 +1,176 @@
+const generalSchema = {
+  title: 'General',
+
+  fieldsets: [
+    {
+      id: 'general',
+      title: 'General',
+      fields: ['url'],
+    },
+  ],
+
+  properties: {
+    url: {
+      title: 'Url',
+      type: 'textarea',
+    },
+  },
+  required: ['url'],
+};
+
+const optionsSchema = {
+  title: 'Options',
+
+  fieldsets: [
+    {
+      id: 'options',
+      title: 'Options',
+      fields: [
+        'sheetname',
+        'hideTabs',
+        'hideToolbar',
+        'autoScale',
+        'toolbarPosition',
+      ],
+    },
+  ],
+
+  properties: {
+    sheetname: {
+      title: 'Sheetname',
+      type: 'text',
+    },
+    hideTabs: {
+      title: 'Hide tabs',
+      type: 'boolean',
+      default: false,
+    },
+    hideToolbar: {
+      title: 'Hide toolbar',
+      type: 'boolean',
+      default: false,
+    },
+    autoScale: {
+      title: 'Auto scale',
+      type: 'boolean',
+      default: false,
+      description: 'Scale down tableau according to width',
+    },
+    toolbarPosition: {
+      title: 'Toolbar position',
+      type: 'array',
+      choices: [
+        ['Top', 'Top'],
+        ['Bottom', 'Bottom'],
+      ],
+      default: 'Top',
+    },
+  },
+  required: [],
+};
+
+const urlParametersSchema = {
+  title: 'Parameter',
+  fieldsets: [
+    { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
+  ],
+  properties: {
+    field: {
+      title: 'Tableau fieldname',
+      type: 'text',
+    },
+    urlParam: {
+      title: 'URL param',
+      type: 'text',
+    },
+  },
+  required: [],
+};
+
+const breakpointUrlSchema = (config) => {
+  const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
+
+  return {
+    title: 'URL',
+    fieldsets: [{ id: 'default', title: 'Default', fields: ['device', 'url'] }],
+    properties: {
+      device: {
+        title: 'Device',
+        type: 'array',
+        choices: Object.keys(breakpoints).map((breakpoint) => [
+          breakpoint,
+          breakpoint,
+        ]),
+      },
+      url: {
+        title: 'Url',
+        widget: 'textarea',
+      },
+    },
+    required: [],
+  };
+};
+
+const extraOptionsSchema = (config) => {
+  return {
+    title: 'Extra Options',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Extra Options Data',
+        fields: ['urlParameters', 'breakpointUrls'],
+      },
+    ],
+
+    properties: {
+      urlParameters: {
+        title: 'URL parameters',
+        widget: 'object_list',
+        schema: urlParametersSchema,
+        description: 'Set a list of url parameters to filter the tableau',
+      },
+      breakpointUrls: {
+        title: 'Breakpoint urls',
+        widget: 'object_list',
+        schema: breakpointUrlSchema(config),
+        description: 'Set different vizualization for specific breakpoint',
+      },
+    },
+    required: [],
+  };
+};
+
+export default (config) => {
+  return {
+    title: 'Tableau Editor',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Tableau Editor Sections',
+        fields: ['tableau_data'],
+      },
+    ],
+    properties: {
+      tableau_data: {
+        title: 'Panels',
+        widget: 'object_types_widget',
+        schemas: [
+          {
+            id: 'general',
+            schema: generalSchema,
+          },
+          {
+            id: 'options',
+            schema: optionsSchema,
+          },
+          {
+            id: 'extraOptions',
+            schema: extraOptionsSchema(config),
+          },
+        ],
+      },
+    },
+    required: [],
+  };
+};

package/src/Widgets/style.less

@@ -0,0 +1,8 @@
+.sidebar-container-enter-done {
+  z-index: 1001 !important;
+}
+
+.field-provider-data-action-button {
+  border: 1px solid #c7d5d8;
+  cursor: pointer;
+}

package/src/helpers.js

@@ -1,5 +1,5 @@
 const loadTableauScript = (callback, version) => {
-  const existingScript = document.getElementById(`tableauJS`);
+  const existingScript = __CLIENT__ && document.getElementById(`tableauJS`);
   //replace script loaded on each version change
   if (existingScript) {
     existingScript.setAttribute(
@@ -7,7 +7,7 @@ const loadTableauScript = (callback, version) => {
       `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`,
     );
   }
-  if (!existingScript) {
+  if (!existingScript && __CLIENT__) {
     const script = document.createElement('script');
     script.src = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
     script.id = `tableauJS`;
@@ -18,16 +18,36 @@ const loadTableauScript = (callback, version) => {
   }
   //callback, if needed
   if (existingScript && callback) callback();
+
+  const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
+  return tableau;
 };
 
-const isMyScriptLoaded = (id) => {
+const isMyScriptLoaded = (version) => {
   //check for loaded Tableau script in dom scripts
-  var scripts = document.getElementsByTagName('script');
-  for (var i = scripts.length; i--; ) {
-    // eslint-disable-next-line eqeqeq
-    if (scripts[i].id == `tableauJS`) return true;
+  var scripts = __CLIENT__ && document.getElementsByTagName('script');
+  if (scripts) {
+    for (var i = scripts.length; i--; ) {
+      // eslint-disable-next-line eqeqeq
+      if (
+        scripts[i].src ===
+        `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`
+      )
+        return true;
+    }
   }
   return false;
 };
 
 export { loadTableauScript, isMyScriptLoaded };
+
+//script url for each version. In case you might need to add them in the load balancer
+// https://public.tableau.com/javascripts/api/tableau-2.8.0.min.js
+// https://public.tableau.com/javascripts/api/tableau-2.7.0.min.js
+// https://public.tableau.com/javascripts/api/tableau-2.6.0.min.js
+// https://public.tableau.com/javascripts/api/tableau-2.5.0.min.js
+// https://public.tableau.com/javascripts/api/tableau-2.4.0.min.js
+// https://public.tableau.com/javascripts/api/tableau-2.3.0.min.js
+// https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js
+// https://public.tableau.com/javascripts/api/tableau-2.1.2.min.js
+// https://public.tableau.com/javascripts/api/tableau-2.0.3.min.js

package/src/index.js

@@ -1,6 +1,10 @@
 import sliderSVG from '@plone/volto/icons/slider.svg';
 import TableauEdit from './TableauBlock/Edit';
 import TableauView from './TableauBlock/View';
+import EmbedTableauView from './Blocks/EmbedEEATableauBlock/View';
+import EmbedTableauEdit from './Blocks/EmbedEEATableauBlock/Edit';
+import { VisualizationView } from './Views';
+import { VisualizationWidget } from './Widgets';
 
 import tableauStore from './store';
 
@@ -44,6 +48,31 @@ const applyConfig = (config) => {
     },
   };
 
+  config.blocks.blocksConfig.embed_eea_tableau_block = {
+    id: 'embed_eea_tableau_block',
+    title: 'Embed EEA Tableau',
+    icon: sliderSVG,
+    group: 'common',
+    edit: EmbedTableauEdit,
+    view: EmbedTableauView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    breakpoints: {
+      desktop: [Infinity, 982],
+      tablet: [981, 768],
+      mobile: [767, 0],
+    },
+  };
+
+  config.views.contentTypesViews.tableau_visualization = VisualizationView;
+  config.widgets.id.tableau_visualization_data = VisualizationWidget;
+
   return config;
 };
 

package/src/less/tableau.less

@@ -49,4 +49,59 @@
   }
 }
 
+.not_displayed_tableau {
+  width: 100%;
+  min-width: 633px;
+  height: 100%;
+  min-height: 200px;
+  background-color: #ebebeb;
+}
+
+.tableau-block {
+  .tableau-info {
+    p.tableau-error {
+      padding: 10px;
+    }
+  }
+
+  .tableau-loader {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    animation: anim 1s linear infinite;
+    background-image: linear-gradient(
+      -45deg,
+      #5ac5f1 25%,
+      #96bbde 25%,
+      #96bbde 50%,
+      #5ac5f1 50%,
+      #5ac5f1 75%,
+      #96bbde 75%
+    );
+    background-size: 100px 100px;
+    border-radius: 5px;
+  }
+}
+
+.tableau-loader span {
+  margin: 6px auto;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+}
+
+@keyframes anim {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 50px 50px;
+  }
+}
+
 .loadAddonOverrides();