@eeacms/volto-tableau 3.0.7 → 4.0.0

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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.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)]
+
+#### :hammer_and_wrench: Others
+
+- * versions [andreiggr - [`d265f22`](https://github.com/eea/volto-tableau/commit/d265f22e998b81929bbaaedd80a42c880beeafac)]
 ### [3.0.7](https://github.com/eea/volto-tableau/compare/3.0.6...3.0.7) - 6 April 2023
 
 #### :nail_care: Enhancements
@@ -16,7 +39,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
@@ -88,7 +110,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
@@ -102,15 +123,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.7",
+  "version": "4.0.0",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,11 +18,13 @@
   },
   "addons": [
     "@eeacms/volto-resize-helper",
-    "@eeacms/volto-embed"
+    "@eeacms/volto-embed",
+    "@eeacms/volto-object-widget"
   ],
   "dependencies": {
-    "@eeacms/volto-embed": "5.0.0",
-    "@eeacms/volto-resize-helper": "^0.2.4"
+    "@eeacms/volto-embed": "*",
+    "@eeacms/volto-object-widget": "*",
+    "@eeacms/volto-resize-helper": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",
@@ -30,6 +32,9 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "md5": "^2.3.0"
   },
+  "resolutions": {
+    "react-countup/countup.js": "2.5.0"
+  },
   "scripts": {
     "release": "release-it",
     "release-major-beta": "release-it major --preRelease=beta",

package/src/Blocks/EmbedTableauVisualization/Edit.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { SidebarPortal } from '@plone/volto/components';
+import View from './View';
+import getSchema from './schema';
+
+const Edit = (props) => {
+  const schema = React.useMemo(() => getSchema(props), [props]);
+
+  return (
+    <React.Fragment>
+      <View {...props} mode="edit" />
+      <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>
+    </React.Fragment>
+  );
+};
+
+export default Edit;

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -0,0 +1,63 @@
+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 { 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 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={true}
+                with_download={true}
+                with_share={true}
+                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, 982],
+      tablet: [981, 768],
+      mobile: [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,49 @@ 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',
       },
-      show_sources: {
-        title: 'Toggle sources',
+      with_share: {
+        title: 'Show share button',
+        type: 'boolean',
+      },
+      with_sources: {
+        title: 'Show sources',
         type: 'boolean',
       },
       dataprotection: {
         widget: 'object',
-        schema: ProtectionSchema(),
+        schema: getProtectionSchema(),
       },
     },
 
-    required: ['vis_url'],
+    required: ['tableau_vis_url'],
   };
 };
-
-export default Schema;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SidebarPortal } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import BlockDataForm from '@plone/volto/components/manage/Form/InlineForm';
 import config from '@plone/volto/registry';
 import getSchema from './schema';
 import View from './View';
@@ -12,7 +12,8 @@ const Edit = (props) => {
     <>
       <View {...props} mode="edit" />
       <SidebarPortal selected={props.selected}>
-        <InlineForm
+        <BlockDataForm
+          block={props.block}
           schema={schema}
           title={schema.title}
           onChangeField={(id, value) => {

package/src/{TableauBlock → Blocks/TableauBlock}/View.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
-import Tableau from '@eeacms/volto-tableau/Tableau/View';
+import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 import config from '@plone/volto/registry';
 import qs from 'querystring';
 import '@eeacms/volto-tableau/less/tableau.less';
@@ -22,9 +22,11 @@ const getDevice = (config, width) => {
 };
 
 const View = (props) => {
-  const [error, setError] = React.useState(null);
-  const [loaded, setLoaded] = React.useState(null);
-  const [mounted, setMounted] = React.useState(false);
+  const [vizState, setVizState] = React.useState({
+    loaded: false,
+    loading: false,
+    error: null,
+  });
   const [extraFilters, setExtraFilters] = React.useState({});
   const { data = {}, query = {}, screen = {} } = props;
   const {
@@ -33,6 +35,10 @@ const View = (props) => {
     title = null,
     description = null,
     autoScale = false,
+    with_sources = true,
+    with_download = true,
+    with_share = true,
+    sources,
   } = data;
   const device = getDevice(config, screen.page?.width || Infinity);
   const breakpointUrl = breakpointUrls.filter(
@@ -40,16 +46,6 @@ const View = (props) => {
   )[0]?.url;
   const url = breakpointUrl || data.url;
 
-  React.useEffect(() => {
-    setMounted(true);
-    /* 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) => {
@@ -63,38 +59,31 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [JSON.stringify(query), JSON.stringify(urlParameters)]);
 
-  return mounted ? (
+  return (
     <div className="tableau-block">
-      <div className="tableau-info">
-        {loaded && url && props.mode === 'edit' ? (
-          <h3 className="tableau-version">== Tableau ==</h3>
-        ) : null}
-        {!url ? <p className="tableau-error">URL required</p> : ''}
-        {error ? <p className="tableau-error">{error}</p> : ''}
-      </div>
-
-      {loaded && title ? <h3 className="tableau-title">{title}</h3> : ''}
-      {loaded && description ? (
+      {vizState.loaded && title ? (
+        <h3 className="tableau-title">{title}</h3>
+      ) : (
+        ''
+      )}
+      {vizState.loaded && description ? (
         <p className="tableau-description">{description}</p>
       ) : (
         ''
       )}
-      {url ? (
-        <Tableau
-          {...props}
-          canUpdateUrl={!breakpointUrl}
-          extraFilters={extraFilters}
-          extraOptions={{ device: autoScale ? 'desktop' : device }}
-          error={error}
-          loaded={loaded}
-          setError={setError}
-          setLoaded={setLoaded}
-          url={url}
-        />
-      ) : null}
+      <Tableau
+        {...props}
+        canUpdateUrl={!breakpointUrl}
+        extraFilters={extraFilters}
+        extraOptions={{ device: autoScale ? 'desktop' : device }}
+        url={url}
+        with_sources={with_sources}
+        with_download={with_download}
+        with_share={with_share}
+        sources={sources}
+        setVizState={setVizState}
+      />
     </div>
-  ) : (
-    ''
   );
 };
 

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, 982],
+      tablet: [981, 768],
+      mobile: [767, 0],
+    },
+  };
+
+  return config;
+};

package/src/{TableauBlock → Blocks/TableauBlock}/schema.js

@@ -40,13 +40,42 @@ const breakpointUrlSchema = (config) => {
   };
 };
 
+const sourceSchema = {
+  title: 'Source',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'organisation', 'link'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+    },
+    organisation: {
+      title: 'Organization',
+    },
+    link: {
+      title: 'Link',
+      widget: 'url',
+    },
+  },
+  required: [],
+};
+
 export default (config) => ({
   title: 'Tableau',
   fieldsets: [
     {
       id: 'default',
       title: 'Default',
-      fields: ['url', 'title', 'description'],
+      fields: ['url', 'title', 'description', 'with_download', 'with_share'],
+    },
+    {
+      id: 'sources',
+      title: 'Sources',
+      fields: ['with_sources', 'sources'],
     },
     {
       id: 'options',
@@ -78,6 +107,26 @@ export default (config) => ({
       title: 'Description',
       widget: 'textarea',
     },
+    with_download: {
+      title: 'Show download button',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    with_share: {
+      title: 'Show share button',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    with_sources: {
+      title: 'Show sources',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    sources: {
+      title: 'Sources',
+      widget: 'object_list',
+      schema: sourceSchema,
+    },
     sheetname: {
       title: 'Sheetname',
       type: 'text',
@@ -100,7 +149,6 @@ export default (config) => ({
     },
     toolbarPosition: {
       title: 'Toolbar position',
-      type: 'array',
       choices: [
         ['Top', 'Top'],
         ['Bottom', 'Bottom'],

package/src/Blocks/index.js

@@ -0,0 +1,9 @@
+import installEmbedTableauVisualization from './EmbedTableauVisualization';
+import installTableauBlock from './TableauBlock';
+
+export default (config) => {
+  return [installEmbedTableauVisualization, installTableauBlock].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
+};