@eeacms/volto-tableau 3.0.8 → 4.1.0

package/CHANGELOG.md

@@ -4,12 +4,31 @@ 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).
 
+### [4.1.0](https://github.com/eea/volto-tableau/compare/4.0.0...4.1.0) - 15 June 2023
+
+#### :rocket: New Features
+
+- feat: improved tableau [Miu Razvan - [`4189653`](https://github.com/eea/volto-tableau/commit/41896533c23857cc4ffc9517b042b1066dfe590b)]
+
+## [4.0.0](https://github.com/eea/volto-tableau/compare/3.0.8...4.0.0) - 13 June 2023
+
+#### :house: Internal changes
+
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`02db357`](https://github.com/eea/volto-tableau/commit/02db357750d3c8d2db29b61af9e09c6880599089)]
+- update [Miu Razvan - [`543312b`](https://github.com/eea/volto-tableau/commit/543312bcf7a7a8c385087f6c38717ba4effa938e)]
+- prettier [Miu Razvan - [`f318c80`](https://github.com/eea/volto-tableau/commit/f318c800e6051b06053490a99c4f4923aa04c72d)]
+- Prepeare 4.0.0 release -> require eea.api.dataconnector@4.7 [Miu Razvan - [`0a26f69`](https://github.com/eea/volto-tableau/commit/0a26f6980d3c35b7d2ac2c404a94abb0e9b89619)]
+- refact: improve tableau + cleanup [Miu Razvan - [`6729fa0`](https://github.com/eea/volto-tableau/commit/6729fa0ebded7419d588bc87dc64bc2b47a9f572)]
+- test: jest should look for addons in node_modules Refs #253277 [valentinab25 - [`0c63253`](https://github.com/eea/volto-tableau/commit/0c632532d6d1bd79fbc553af003f949788ca6303)]
+- test: Fix test config, coverage Refs #253277 [valentinab25 - [`04f79a3`](https://github.com/eea/volto-tableau/commit/04f79a32af3463818768e6ce614245583faf2731)]
 ### [3.0.8](https://github.com/eea/volto-tableau/compare/3.0.7...3.0.8) - 18 May 2023
 
 #### :bug: Bug Fixes
 
 - fix: resolution for countup  #252559 [Andrei Grigore - [`9851b63`](https://github.com/eea/volto-tableau/commit/9851b6335e710022d9402f659b2e3ec333130e2c)]
-- fix: load screenshot of tableau in privacy protection #252559 [Andrei Grigore - [`fdc2f1b`](https://github.com/eea/volto-tableau/commit/fdc2f1b0cf0c212e5e14eefa721585686dff338d)]
 
 #### :hammer_and_wrench: Others
 
@@ -26,7 +45,6 @@ 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
@@ -98,7 +116,6 @@ 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
@@ -112,15 +129,11 @@ 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/Jenkinsfile

@@ -6,6 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,water.europa.eu-freshwater,water.europa.eu-marine,industry.eea.europa.eu"
         DEPENDENCIES = ""
+        VOLTO = ""
     }
 
   stages {
@@ -187,6 +188,7 @@ pipeline {
             def nodeJS = tool 'NodeJS';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
+              sh '''sed -i "s#src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
               sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }

package/jest-addon.config.js

@@ -5,18 +5,18 @@ module.exports = {
     '!src/**/*.d.ts',
   ],
   moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
-    '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
+    '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
     '@plone/volto-slate':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',

package/package.json

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

package/src/{TableauBlock → Blocks/EmbedTableauVisualization}/Edit.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import { SidebarPortal } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import config from '@plone/volto/registry';
-import getSchema from './schema';
 import View from './View';
+import getSchema from './schema';
 
 const Edit = (props) => {
-  const [schema] = React.useState(getSchema(config));
+  const schema = React.useMemo(() => getSchema(props), [props]);
 
   return (
-    <>
+    <React.Fragment>
       <View {...props} mode="edit" />
       <SidebarPortal selected={props.selected}>
-        <InlineForm
+        <BlockDataForm
+          block={props.block}
           schema={schema}
           title={schema.title}
           onChangeField={(id, value) => {
@@ -24,7 +24,7 @@ const Edit = (props) => {
           formData={props.data}
         />
       </SidebarPortal>
-    </>
+    </React.Fragment>
   );
 };
 

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { PrivacyProtection } from '@eeacms/volto-embed';
+import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { getContent } from '@plone/volto/actions';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+const View = (props) => {
+  const data = props.data;
+  const { with_sources = true, with_download = true, with_share = true } = data;
+  const { data_provenance, tableau_visualization } =
+    props.tableau_visualization_data || {};
+  const tableau_vis_url = flattenToAppURL(data.tableau_vis_url || '');
+
+  React.useEffect(() => {
+    if (tableau_vis_url) {
+      props.getContent(tableau_vis_url, null, props.id);
+    }
+    // eslint-disable-next-line
+  }, [tableau_vis_url]);
+
+  return (
+    <div className="embed-container">
+      <PrivacyProtection
+        {...props}
+        data={{ ...data, url: tableau_visualization?.url }}
+      >
+        {!tableau_vis_url && (
+          <div>Please select a tableau visualization from block editor.</div>
+        )}
+        {!!tableau_vis_url && (
+          <>
+            {!tableau_visualization?.url && props.mode === 'edit' && (
+              <div>Url is not set in the visualization</div>
+            )}
+            {!!tableau_visualization?.url && (
+              <Tableau
+                data={{
+                  ...tableau_visualization,
+                  with_sources,
+                  with_download,
+                  with_share,
+                }}
+                sources={data_provenance.data || []}
+              />
+            )}
+          </>
+        )}
+      </PrivacyProtection>
+    </div>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      tableau_visualization_data: state.content.subrequests?.[props.id]?.data,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(React.memo(View));

package/src/Blocks/EmbedTableauVisualization/index.js

@@ -0,0 +1,30 @@
+import EmbedTableauVisualizatonEdit from './Edit';
+import EmbedTableauVisualizatonView from './View';
+
+import sliderSVG from '@plone/volto/icons/slider.svg';
+
+export default (config) => {
+  config.blocks.blocksConfig.embed_tableau_visualization = {
+    id: 'embed_tableau_visualization',
+    title: 'Embed EEA Tableau visualization',
+    icon: sliderSVG,
+    group: 'common',
+    edit: EmbedTableauVisualizatonEdit,
+    view: EmbedTableauVisualizatonView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    breakpoints: {
+      desktop: [Infinity, 992],
+      tablet: [991, 768],
+      phone: [767, 0],
+    },
+  };
+
+  return config;
+};

package/src/Blocks/{EmbedEEATableauBlock → EmbedTableauVisualization}/schema.js

@@ -1,4 +1,4 @@
-const ProtectionSchema = () => ({
+const getProtectionSchema = () => ({
   title: 'Data Protection',
 
   fieldsets: [
@@ -40,33 +40,52 @@ const ProtectionSchema = () => ({
   required: [],
 });
 
-const Schema = (props) => {
+export default () => {
   return {
-    title: 'Embed EEA Tableau',
+    title: 'Embed EEA Tableau visualization',
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: ['vis_url', 'show_sources', 'dataprotection'],
+        fields: [
+          'tableau_vis_url',
+          'with_sources',
+          'with_download',
+          'with_share',
+        ],
+      },
+      {
+        id: 'privacy',
+        title: 'Privacy',
+        fields: ['dataprotection'],
       },
     ],
     properties: {
-      vis_url: {
-        widget: 'object_by_path',
-        title: 'Visualization',
+      tableau_vis_url: {
+        title: 'Tableau visualization',
+        widget: 'url',
+      },
+      with_download: {
+        title: 'Show download button',
+        type: 'boolean',
+        defaultValue: true,
       },
-      show_sources: {
-        title: 'Toggle sources',
+      with_share: {
+        title: 'Show share button',
         type: 'boolean',
+        defaultValue: true,
+      },
+      with_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+        defaultValue: true,
       },
       dataprotection: {
         widget: 'object',
-        schema: ProtectionSchema(),
+        schema: getProtectionSchema(),
       },
     },
 
-    required: ['vis_url'],
+    required: ['tableau_vis_url'],
   };
 };
-
-export default Schema;

package/src/Blocks/TableauBlock/Edit.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/InlineForm';
+import config from '@plone/volto/registry';
+import getSchema from './schema';
+import View from './View';
+
+const Edit = (props) => {
+  const viz = React.useRef();
+  const [vizState, setVizState] = React.useState({
+    loaded: false,
+    loading: false,
+    error: null,
+  });
+
+  const schema = React.useMemo(() => getSchema(config, viz.current, vizState), [
+    vizState,
+  ]);
+
+  return (
+    <>
+      <View {...props} mode="edit" setVizState={setVizState} ref={viz} />
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          block={props.block}
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

package/src/Blocks/TableauBlock/View.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
+import qs from 'querystring';
+import config from '@plone/volto/registry';
+import '@eeacms/volto-tableau/less/tableau.less';
+
+const View = React.forwardRef((props, ref) => {
+  const viz = React.useRef();
+  const [vizState, setVizState] = React.useState({
+    loaded: false,
+    loading: false,
+    error: null,
+  });
+  const [extraFilters, setExtraFilters] = React.useState({});
+  const { block, data = {}, query = {}, onChangeBlock, mode } = props;
+  const {
+    urlParameters = [],
+    staticParameters = [],
+    title = null,
+    description = null,
+    with_sources = true,
+    with_download = true,
+    with_share = true,
+    sources,
+  } = data;
+
+  const extraOptions = React.useMemo(() => {
+    const options = {};
+    staticParameters.forEach((parameter) => {
+      if (parameter.field) {
+        options[parameter.field] = parameter.value;
+      }
+    });
+    return options;
+  }, [staticParameters]);
+
+  React.useEffect(() => {
+    const newFilters = { ...extraFilters };
+    urlParameters.forEach((element) => {
+      if (element.field && typeof query[element.urlParam] !== 'undefined') {
+        newFilters[element.field] = query[element.urlParam];
+      } else if (newFilters[element.field]) {
+        delete newFilters[element.field];
+      }
+    });
+    setExtraFilters(newFilters);
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(query), JSON.stringify(urlParameters)]);
+
+  React.useImperativeHandle(ref, () => {
+    return viz.current;
+  });
+
+  React.useEffect(() => {
+    if (props.setVizState) {
+      props.setVizState(vizState);
+    }
+    /* eslint-disable-next-line */
+  }, [vizState]);
+
+  return (
+    <div className="tableau-block">
+      {vizState.loaded && title ? (
+        <h3 className="tableau-title">{title}</h3>
+      ) : (
+        ''
+      )}
+      {vizState.loaded && description ? (
+        <p className="tableau-description">{description}</p>
+      ) : (
+        ''
+      )}
+      <Tableau
+        ref={viz}
+        mode={mode}
+        block={block}
+        data={{ ...data, with_sources, with_download, with_share }}
+        sources={sources}
+        extraFilters={extraFilters}
+        extraOptions={extraOptions}
+        breakpoints={config.blocks.blocksConfig.tableau_block.breakpoints}
+        setVizState={setVizState}
+        onChangeBlock={onChangeBlock}
+      />
+    </div>
+  );
+});
+
+export default connect(
+  (state) => ({
+    query: {
+      ...(qs.parse(state.router.location?.search?.replace('?', '')) || {}),
+      ...(state.discodata_query?.search || {}),
+    },
+    screen: state.screen,
+  }),
+  null,
+  null,
+  { forwardRef: true },
+)(View);

package/src/Blocks/TableauBlock/index.js

@@ -0,0 +1,30 @@
+import TableauEdit from './Edit';
+import TableauView from './View';
+
+import sliderSVG from '@plone/volto/icons/slider.svg';
+
+export default (config) => {
+  config.blocks.blocksConfig.tableau_block = {
+    id: 'tableau_block',
+    title: 'Tableau',
+    icon: sliderSVG,
+    group: 'common',
+    edit: TableauEdit,
+    view: TableauView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    breakpoints: {
+      desktop: [Infinity, 992],
+      tablet: [991, 768],
+      phone: [767, 0],
+    },
+  };
+
+  return config;
+};