@eeacms/volto-tableau 1.2.5 → 1.3.0

package/CHANGELOG.md

@@ -4,12 +4,18 @@ 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).
 
+### [1.3.0](https://github.com/eea/volto-tableau/compare/1.2.5...1.3.0) - 28 September 2022
+
+#### :hammer_and_wrench: Others
+
+- refactor script set tableau [andreiggr - [`d78328e`](https://github.com/eea/volto-tableau/commit/d78328e74d67d685390ca0671a44a1bfe9b21e97)]
+- Bump version [Miu Razvan - [`837f8a7`](https://github.com/eea/volto-tableau/commit/837f8a70257660253b70b818977693101d6576e9)]
+- clear lint [andreiggr - [`69d83b8`](https://github.com/eea/volto-tableau/commit/69d83b806aa48a6a696e01b6e026de07e6a34dfe)]
 ### [1.2.5](https://github.com/eea/volto-tableau/compare/1.2.4...1.2.5) - 2 September 2022
 
 #### :hammer_and_wrench: Others
 
 - Use volto 16 alpha 14 [Miu Razvan - [`93641be`](https://github.com/eea/volto-tableau/commit/93641be4c2393f49008aff789400cf7c947949fd)]
-- Fix filter update [Miu Razvan - [`d613762`](https://github.com/eea/volto-tableau/commit/d613762734bbba2460ad8e8860d95197fc86786b)]
 - 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)]
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`d237e1c`](https://github.com/eea/volto-tableau/commit/d237e1c72817d7e68a3eb698563674d1514db24f)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -20,8 +20,7 @@
     "@eeacms/volto-resize-helper"
   ],
   "dependencies": {
-    "@eeacms/volto-resize-helper": "^0.2.4",
-    "tableau-api-js": "github:eea/tableau-api-js#1.1.1"
+    "@eeacms/volto-resize-helper": "^0.2.4"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/Tableau/View.jsx

@@ -3,9 +3,9 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
-import { getLatestTableauVersion } from 'tableau-api-js';
 import { setTableauApi } from '@eeacms/volto-tableau/actions';
 import cx from 'classnames';
+import { isMyScriptLoaded, loadTableauScript } from '../helpers';
 
 const Tableau = (props) => {
   const ref = React.useRef(null);
@@ -23,7 +23,7 @@ const Tableau = (props) => {
     screen = {},
     setError = () => {},
     setLoaded = () => {},
-    version = getLatestTableauVersion(),
+    version = '2.8.0',
   } = props;
   const {
     autoScale = false,
@@ -34,7 +34,9 @@ const Tableau = (props) => {
   } = data;
   const defaultUrl = data.url;
   const url = props.url || defaultUrl;
-  const tableau = props.tableau[version];
+
+  //load tableau from script tag
+  const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
 
   const onFilterChange = (filter) => {
     const newFilters = { ...filters.current };
@@ -159,6 +161,9 @@ const Tableau = (props) => {
     if (__CLIENT__ && !props.tableau[version]) {
       props.setTableauApi(version, props.mode);
     }
+    if (__CLIENT__) {
+      loadTableauScript(() => {}, version);
+    }
     /* eslint-disable-next-line */
   }, [version]);
 
@@ -197,22 +202,6 @@ const Tableau = (props) => {
     /* eslint-disable-next-line */
   }, [loaded, screen?.page?.width]);
 
-  // React.useEffect(() => {
-  //   if (mounted.current && loaded && viz) {
-  //     const workbook = viz.getWorkbook();
-  //     if (extraOptions.device === 'desktop') {
-  //       workbook.activateSheetAsync(0);
-  //     } else if (extraOptions.device === 'tablet') {
-  //       workbook.activateSheetAsync(1);
-  //     } else {
-  //       workbook.activateSheetAsync(2);
-  //     }
-  //     console.log('HERE', workbook.getPublishedSheetsInfo());
-  //     addExtraFilters(extraOptions);
-  //   }
-  //   /* eslint-disable-next-line */
-  // }, [JSON.stringify(extraOptions)]);
-
   return (
     <div id="tableau-wrap">
       <div id="tableau-outer">

package/src/TableauBlock/Edit.jsx

@@ -11,7 +11,6 @@ const Edit = (props) => {
   return (
     <>
       <View {...props} mode="edit" />
-
       <SidebarPortal selected={props.selected}>
         <InlineForm
           schema={schema}

package/src/TableauBlock/View.jsx

@@ -4,7 +4,6 @@ import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import Tableau from '@eeacms/volto-tableau/Tableau/View';
 import config from '@plone/volto/registry';
-import { getLatestTableauVersion } from 'tableau-api-js';
 import qs from 'querystring';
 import '@eeacms/volto-tableau/less/tableau.less';
 
@@ -36,9 +35,7 @@ const View = (props) => {
     autoScale = false,
   } = data;
   const version =
-    props.data.version ||
-    config.settings.tableauVersion ||
-    getLatestTableauVersion();
+    props.data.version || config.settings.tableauVersion || '2.8.0';
   const device = getDevice(config, screen.page?.width || Infinity);
   const breakpointUrl = breakpointUrls.filter(
     (breakpoint) => breakpoint.device === device,

package/src/TableauBlock/schema.js

@@ -1,5 +1,3 @@
-import { tableauVersions, getLatestTableauVersion } from 'tableau-api-js';
-
 const urlParametersSchema = {
   title: 'Parameter',
   fieldsets: [
@@ -72,9 +70,19 @@ export default (config) => ({
       title: 'Version',
       type: 'array',
       choices: [
-        ...tableauVersions.map((version) => [version, `tableau-${version}`]),
+        ...[
+          '2.8.0',
+          '2.7.0',
+          '2.6.0',
+          '2.5.0',
+          '2.4.0',
+          '2.3.0',
+          '2.2.2',
+          '2.1.2',
+          '2.0.3',
+        ].map((version) => [version, `tableau-${version}`]),
       ],
-      default: config.settings.tableauVersion || getLatestTableauVersion(),
+      default: config.settings.tableauVersion || '2.8.0',
     },
     url: {
       title: 'Url',

package/src/helpers.js

@@ -0,0 +1,33 @@
+const loadTableauScript = (callback, version) => {
+  const existingScript = document.getElementById(`tableauJS`);
+  //replace script loaded on each version change
+  if (existingScript) {
+    existingScript.setAttribute(
+      'src',
+      `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`,
+    );
+  }
+  if (!existingScript) {
+    const script = document.createElement('script');
+    script.src = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
+    script.id = `tableauJS`;
+    document.body.appendChild(script);
+    script.onload = () => {
+      if (callback) callback();
+    };
+  }
+  //callback, if needed
+  if (existingScript && callback) callback();
+};
+
+const isMyScriptLoaded = (id) => {
+  //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;
+  }
+  return false;
+};
+
+export { loadTableauScript, isMyScriptLoaded };

package/src/index.js

@@ -12,6 +12,11 @@ const applyConfig = (config) => {
     tableau: tableauStore,
   };
 
+  config.settings.allowed_cors_destinations = [
+    ...(config.settings.allowed_cors_destinations || []),
+    'public.tableau.com',
+  ];
+
   config.settings.storeExtenders = [
     ...(config.settings.storeExtenders || []),
     tableauMiddleware,

package/src/middleware.js

@@ -1,38 +1,36 @@
-import React from 'react';
-import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
 import { SET_TABLEAU_API } from '@eeacms/volto-tableau/constants';
-import loadTableauApi from 'tableau-api-js';
 
+//need to see if we need redux anymore for this
 export default (middlewares) => [
   (store) => (next) => (action) => {
     const state = store.getState();
-    const { version = '', mode = 'view' } = action || {};
+    const { version = '' } = action || {};
 
     if (
       action.type === `${SET_TABLEAU_API}_PENDING` &&
       !state.tableau.loading[version]
     ) {
-      loadTableauApi(version)
-        .then((response) => {
-          if (mode === 'edit') {
-            toast.success(<Toast success title={response.message} />);
-          }
-          store.dispatch({
-            type: `${SET_TABLEAU_API}_SUCCESS`,
-            version,
-            api: response.tableau,
-          });
-        })
-        .catch((error) => {
-          if (mode === 'edit') {
-            toast.error(<Toast error title={error.message} />);
-          }
-          store.dispatch({
-            type: `${SET_TABLEAU_API}_FAILED`,
-            version,
-          });
-        });
+      // loadTableauScript(() => {}, version);
+      // fetchTableau(version)
+      //   .then((response) => {
+      //     if (mode === 'edit') {
+      //       toast.success(<Toast success title={response.message} />);
+      //     }
+      //     store.dispatch({
+      //       type: `${SET_TABLEAU_API}_SUCCESS`,
+      //       version,
+      //       api: response,
+      //     });
+      //   })
+      //   .catch((error) => {
+      //     if (mode === 'edit') {
+      //       toast.error(<Toast error title={error.message} />);
+      //     }
+      //     store.dispatch({
+      //       type: `${SET_TABLEAU_API}_FAILED`,
+      //       version,
+      //     });
+      //   });
     }
 
     return next(action);

package/src/store.js

@@ -34,7 +34,6 @@ export default function tableau(state = initialState, action = {}) {
       loading[action.version] = false;
       loaded[action.version] = true;
       errors[action.version] = false;
-
       return {
         ...state,
         [action.version]: action.api,