@eeacms/volto-tableau 4.0.0 → 4.1.1

package/CHANGELOG.md

@@ -4,10 +4,20 @@ 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
+### [4.1.1](https://github.com/eea/volto-tableau/compare/4.1.0...4.1.1) - 20 July 2023
+
+#### :hammer_and_wrench: Others
+
+- Add VisualizationViewWidget [Tiberiu Ichim - [`fa881cb`](https://github.com/eea/volto-tableau/commit/fa881cbc3643a46697fb16d1c86ada1d4121a46a)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`cbcbad2`](https://github.com/eea/volto-tableau/commit/cbcbad26f7aa3683122199c8d5cbd142903df93b)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`51abe6d`](https://github.com/eea/volto-tableau/commit/51abe6d4db80825fe2e396e04c7003c6ad79b480)]
+### [4.1.0](https://github.com/eea/volto-tableau/compare/4.0.0...4.1.0) - 15 June 2023
+
+## [4.0.0](https://github.com/eea/volto-tableau/compare/3.0.8...4.0.0) - 13 June 2023
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`e33bb21`](https://github.com/eea/volto-tableau/commit/e33bb21eb429c33e3a15d771487a1c9af8ccb0d5)]
 
 #### :hammer_and_wrench: Others
 
@@ -39,6 +49,7 @@ 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
@@ -110,6 +121,7 @@ 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
@@ -123,11 +135,15 @@ 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

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-tableau"
         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"
+        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,demo-www.eea.europa.eu"
         DEPENDENCIES = ""
         VOLTO = ""
     }

package/package.json

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

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -10,6 +10,7 @@ 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 || '');
@@ -28,7 +29,7 @@ const View = (props) => {
         data={{ ...data, url: tableau_visualization?.url }}
       >
         {!tableau_vis_url && (
-          <div>Please select a visualization from block editor.</div>
+          <div>Please select a tableau visualization from block editor.</div>
         )}
         {!!tableau_vis_url && (
           <>
@@ -37,10 +38,12 @@ const View = (props) => {
             )}
             {!!tableau_visualization?.url && (
               <Tableau
-                data={tableau_visualization}
-                with_sources={true}
-                with_download={true}
-                with_share={true}
+                data={{
+                  ...tableau_visualization,
+                  with_sources,
+                  with_download,
+                  with_share,
+                }}
                 sources={data_provenance.data || []}
               />
             )}

package/src/Blocks/EmbedTableauVisualization/index.js

@@ -20,9 +20,9 @@ export default (config) => {
       view: [],
     },
     breakpoints: {
-      desktop: [Infinity, 982],
-      tablet: [981, 768],
-      mobile: [767, 0],
+      desktop: [Infinity, 992],
+      tablet: [991, 768],
+      phone: [767, 0],
     },
   };
 

package/src/Blocks/EmbedTableauVisualization/schema.js

@@ -68,14 +68,17 @@ export default () => {
       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,
       },
       dataprotection: {
         widget: 'object',

package/src/Blocks/TableauBlock/Edit.jsx

@@ -6,11 +6,20 @@ import getSchema from './schema';
 import View from './View';
 
 const Edit = (props) => {
-  const [schema] = React.useState(getSchema(config));
+  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" />
+      <View {...props} mode="edit" setVizState={setVizState} ref={viz} />
       <SidebarPortal selected={props.selected}>
         <BlockDataForm
           block={props.block}

package/src/Blocks/TableauBlock/View.jsx

@@ -1,64 +1,64 @@
 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/Tableau';
-import config from '@plone/volto/registry';
 import qs from 'querystring';
+import config from '@plone/volto/registry';
 import '@eeacms/volto-tableau/less/tableau.less';
 
-const getDevice = (config, width) => {
-  const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
-  let device = 'default';
-  Object.keys(breakpoints).forEach((breakpoint) => {
-    if (
-      width <= breakpoints[breakpoint][0] &&
-      width >= breakpoints[breakpoint][1]
-    ) {
-      device = breakpoint;
-    }
-  });
-  return device;
-};
-
-const View = (props) => {
+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 { data = {}, query = {}, screen = {} } = props;
+  const { block, data = {}, query = {}, onChangeBlock, mode } = props;
   const {
-    breakpointUrls = [],
     urlParameters = [],
+    staticParameters = [],
     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(
-    (breakpoint) => breakpoint.device === device,
-  )[0]?.url;
-  const url = breakpointUrl || data.url;
+
+  const extraOptions = React.useMemo(() => {
+    const options = {};
+    staticParameters.forEach((parameter) => {
+      if (parameter.field) {
+        options[parameter.field] = parameter.value;
+      }
+    });
+    return options;
+  }, [staticParameters]);
 
   React.useEffect(() => {
-    const newExtraFilters = { ...extraFilters };
+    const newFilters = { ...extraFilters };
     urlParameters.forEach((element) => {
       if (element.field && typeof query[element.urlParam] !== 'undefined') {
-        newExtraFilters[element.field] = query[element.urlParam];
-      } else if (newExtraFilters[element.field]) {
-        delete newExtraFilters[element.field];
+        newFilters[element.field] = query[element.urlParam];
+      } else if (newFilters[element.field]) {
+        delete newFilters[element.field];
       }
     });
-    setExtraFilters(newExtraFilters);
+    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 ? (
@@ -72,27 +72,30 @@ const View = (props) => {
         ''
       )}
       <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}
+        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 compose(
-  connect((state, props) => ({
+export default connect(
+  (state) => ({
     query: {
       ...(qs.parse(state.router.location?.search?.replace('?', '')) || {}),
       ...(state.discodata_query?.search || {}),
     },
     screen: state.screen,
-  })),
-)(withRouter(View));
+  }),
+  null,
+  null,
+  { forwardRef: true },
+)(View);

package/src/Blocks/TableauBlock/index.js

@@ -20,9 +20,9 @@ export default (config) => {
       view: [],
     },
     breakpoints: {
-      desktop: [Infinity, 982],
-      tablet: [981, 768],
-      mobile: [767, 0],
+      desktop: [Infinity, 992],
+      tablet: [991, 768],
+      phone: [767, 0],
     },
   };
 

package/src/Blocks/TableauBlock/schema.js

@@ -1,3 +1,8 @@
+import {
+  getSheetnamesChoices,
+  canChangeVizData,
+} from '@eeacms/volto-tableau/Tableau/helpers';
+
 const urlParametersSchema = {
   title: 'Parameter',
   fieldsets: [
@@ -16,6 +21,22 @@ const urlParametersSchema = {
   required: [],
 };
 
+const staticParameters = {
+  title: 'Parameter',
+  fieldsets: [{ id: 'default', title: 'Default', fields: ['field', 'value'] }],
+  properties: {
+    field: {
+      title: 'Tableau fieldname',
+      type: 'text',
+    },
+    value: {
+      title: 'Value',
+      type: 'text',
+    },
+  },
+  required: [],
+};
+
 const breakpointUrlSchema = (config) => {
   const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
 
@@ -25,7 +46,6 @@ const breakpointUrlSchema = (config) => {
     properties: {
       device: {
         title: 'Device',
-        type: 'array',
         choices: Object.keys(breakpoints).map((breakpoint) => [
           breakpoint,
           breakpoint,
@@ -64,109 +84,141 @@ const sourceSchema = {
   required: [],
 };
 
-export default (config) => ({
-  title: 'Tableau',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['url', 'title', 'description', 'with_download', 'with_share'],
-    },
-    {
-      id: 'sources',
-      title: 'Sources',
-      fields: ['with_sources', 'sources'],
-    },
-    {
-      id: 'options',
-      title: 'Options',
-      fields: [
-        'sheetname',
-        'hideTabs',
-        'hideToolbar',
-        'autoScale',
-        'toolbarPosition',
-      ],
-    },
-    {
-      id: 'extra_options',
-      title: 'Extra options',
-      fields: ['urlParameters', 'breakpointUrls'],
-    },
-  ],
-  properties: {
-    url: {
-      title: 'Url',
-      widget: 'textarea',
-    },
-    title: {
-      title: 'Title',
-      widget: 'textarea',
-    },
-    description: {
-      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',
-    },
-    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',
-      choices: [
-        ['Top', 'Top'],
-        ['Bottom', 'Bottom'],
-      ],
-      default: 'Top',
-    },
-    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',
+export default (config, viz, vizState) => {
+  const isDisabled = !canChangeVizData(viz, vizState);
+
+  return {
+    title: 'Tableau',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'url',
+          'title',
+          'description',
+          'with_sources',
+          'with_download',
+          'with_share',
+        ],
+      },
+      {
+        id: 'options',
+        title: 'Options',
+        fields: [
+          'sheetname',
+          'hideTabs',
+          'hideToolbar',
+          'autoScale',
+          'toolbarPosition',
+        ],
+      },
+      {
+        id: 'extra_options',
+        title: 'Extra options',
+        fields: ['urlParameters', 'staticParameters', 'breakpointUrls'],
+      },
+      {
+        id: 'sources',
+        title: 'Sources',
+        fields: ['sources'],
+      },
+    ],
+    properties: {
+      url: {
+        title: 'Url',
+        widget: 'textarea',
+        isDisabled,
+      },
+      title: {
+        title: 'Title',
+        widget: 'textarea',
+      },
+      description: {
+        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',
+        choices: getSheetnamesChoices(viz),
+        isDisabled,
+      },
+      hideTabs: {
+        title: 'Hide tabs',
+        type: 'boolean',
+        default: false,
+        isDisabled,
+      },
+      hideToolbar: {
+        title: 'Hide toolbar',
+        type: 'boolean',
+        default: false,
+        isDisabled,
+      },
+      autoScale: {
+        title: 'Auto scale',
+        type: 'boolean',
+        default: false,
+        description: 'Scale down tableau according to width',
+        isDisabled,
+      },
+      toolbarPosition: {
+        title: 'Toolbar position',
+        choices: [
+          ['Top', 'Top'],
+          ['Bottom', 'Bottom'],
+        ],
+        default: 'Top',
+        isDisabled,
+      },
+      urlParameters: {
+        title: 'URL parameters',
+        widget: 'object_list',
+        schema: urlParametersSchema,
+        description: 'Set a list of url parameters to filter the tableau',
+        isDisabled,
+      },
+      staticParameters: {
+        title: 'Static parameters',
+        widget: 'object_list',
+        schema: staticParameters,
+        description: (
+          <>
+            Set a list of static parameters.
+            <br />
+            <b>NOTE: You need to trigger a refresh for this to take effect</b>
+          </>
+        ),
+        isDisabled,
+      },
+      breakpointUrls: {
+        title: 'Breakpoint urls',
+        widget: 'object_list',
+        schema: breakpointUrlSchema(config),
+        description: 'Set different vizualization for specific breakpoint',
+        isDisabled,
+      },
     },
-  },
-  required: ['url'],
-});
+    required: ['url'],
+  };
+};