@eeacms/volto-tableau 6.0.6 → 7.0.1

package/CHANGELOG.md

@@ -4,11 +4,38 @@ 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).
 
-### [6.0.6](https://github.com/eea/volto-tableau/compare/6.0.5...6.0.6) - 17 November 2023
+### [7.0.1](https://github.com/eea/volto-tableau/compare/7.0.0...7.0.1) - 24 November 2023
 
-#### :rocket: New Features
+#### :hammer_and_wrench: Others
+
+- fix [Miu Razvan - [`4036e40`](https://github.com/eea/volto-tableau/commit/4036e4018bc0faf86aba7a330b52f0a975343be0)]
+- update [Miu Razvan - [`e274b41`](https://github.com/eea/volto-tableau/commit/e274b416f65b446f0e2453e9f0ed6f4cdd27a3f6)]
+- fix [Miu Razvan - [`da14168`](https://github.com/eea/volto-tableau/commit/da14168f40d161264488810e7b08facb265a2c00)]
+- fix [Miu Razvan - [`faba267`](https://github.com/eea/volto-tableau/commit/faba267e7fde6a5b906fdcff010ed9d46ecea741)]
+- fix [Miu Razvan - [`a772a85`](https://github.com/eea/volto-tableau/commit/a772a85e19b80a7202f23ad45e3aff6fa3ae9c3c)]
+## [7.0.0](https://github.com/eea/volto-tableau/compare/6.0.6...7.0.0) - 23 November 2023
+
+#### :bug: Bug Fixes
+
+- fix: unittests [Miu Razvan - [`ce983d2`](https://github.com/eea/volto-tableau/commit/ce983d26d18fc2ed6d24f3fa64999e85c3b90051)]
 
-- feat: clean up [Miu Razvan - [`73ff5c0`](https://github.com/eea/volto-tableau/commit/73ff5c0f61c947067006cecf3bd3ad003249d78c)]
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`a7a6f1f`](https://github.com/eea/volto-tableau/commit/a7a6f1f8f0f2ed727a13d386fd30396f80418130)]
+- bump version [Miu Razvan - [`192c7ae`](https://github.com/eea/volto-tableau/commit/192c7ae64e6c659a1f676a3506aa87563cb715e7)]
+- tests [Miu Razvan - [`94aeb23`](https://github.com/eea/volto-tableau/commit/94aeb2332fa98088b0da456df692368163d01221)]
+- update [Miu Razvan - [`daaeeb5`](https://github.com/eea/volto-tableau/commit/daaeeb51876276909d506c9f1851b83089ff9124)]
+- update [Miu Razvan - [`48e976f`](https://github.com/eea/volto-tableau/commit/48e976f0e9ff6d11dd18a61f6d17bd6c0de11e5a)]
+- update [Miu Razvan - [`fcc702a`](https://github.com/eea/volto-tableau/commit/fcc702a38cc3942d84282443d5de543f0e361389)]
+- update [Miu Razvan - [`ef9abd3`](https://github.com/eea/volto-tableau/commit/ef9abd3617bde7148fe2ac6d33079f3d5f82a302)]
+- update snapshot [Dobricean Ioan Dorian - [`baaeccf`](https://github.com/eea/volto-tableau/commit/baaeccf8c589c7a6bac6a5522a0a23b90b9fda1d)]
+- unify view and edit [Dobricean Ioan Dorian - [`1159da9`](https://github.com/eea/volto-tableau/commit/1159da96057dc78a1ac46371c57f55e7786aab34)]
+- fix tests [Dobricean Ioan Dorian - [`33bff4b`](https://github.com/eea/volto-tableau/commit/33bff4b8e9060548610990c6817b49cb06be79ae)]
+- test [Dobricean Ioan Dorian - [`48505ca`](https://github.com/eea/volto-tableau/commit/48505caef84d12091035fdd79cf64067e7f819e2)]
+- split the view and edit [Dobricean Ioan Dorian - [`7227bb1`](https://github.com/eea/volto-tableau/commit/7227bb1fb70e5d895f15872ed6533e089be99836)]
+- update embed tableau so it can work with serialized data [Dobricean Ioan Dorian - [`59d958c`](https://github.com/eea/volto-tableau/commit/59d958c7a1a5055ea62e04abcbf34ee93f52e23a)]
+- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`c452d70`](https://github.com/eea/volto-tableau/commit/c452d704819fb485e3cd3b39c2501361d20e8559)]
+### [6.0.6](https://github.com/eea/volto-tableau/compare/6.0.5...6.0.6) - 17 November 2023
 
 #### :hammer_and_wrench: Others
 

package/Jenkinsfile

@@ -1,4 +1,7 @@
 pipeline {
+  tools {
+    jdk 'Java17'
+  }
   agent {
     node { label 'docker-host' }
   }
@@ -245,33 +248,33 @@ pipeline {
       }
     }
 
-    stage('SonarQube compare to master') {
-      when {
-        anyOf {
-          allOf {
-            not { environment name: 'CHANGE_ID', value: '' }
-            environment name: 'CHANGE_TARGET', value: 'develop'
-          }
-          allOf {
-            environment name: 'CHANGE_ID', value: ''
-            branch 'develop'
-            not { changelog '.*^Automated release [0-9\\.]+$' }
-          }
-        }
-      }
-      steps {
-        script {
-          sh '''echo "Error" > checkresult.txt'''
-          catchError(buildResult: 'FAILURE', stageResult: 'FAILURE') {
-            sh '''set -o pipefail; docker run -i --rm --pull always --name="$IMAGE_NAME-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemaster.sh | grep -v "Found script" | tee checkresult.txt'''
-          }
+    // stage('SonarQube compare to master') {
+    //   when {
+    //     anyOf {
+    //       allOf {
+    //         not { environment name: 'CHANGE_ID', value: '' }
+    //         environment name: 'CHANGE_TARGET', value: 'develop'
+    //       }
+    //       allOf {
+    //         environment name: 'CHANGE_ID', value: ''
+    //         branch 'develop'
+    //         not { changelog '.*^Automated release [0-9\\.]+$' }
+    //       }
+    //     }
+    //   }
+    //   steps {
+    //     script {
+    //       sh '''echo "Error" > checkresult.txt'''
+    //       catchError(buildResult: 'FAILURE', stageResult: 'FAILURE') {
+    //         sh '''set -o pipefail; docker run -i --rm --pull always --name="$IMAGE_NAME-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemaster.sh | grep -v "Found script" | tee checkresult.txt'''
+    //       }
 
-          publishChecks name: 'SonarQube', title: 'Sonarqube Code Quality Check', summary: 'Quality check on the SonarQube metrics from branch develop, comparing it with the ones from master branch. No bugs are allowed',
-                        text: readFile(file: 'checkresult.txt'), conclusion: "${currentBuild.currentResult}",
-                        detailsURL: "${env.BUILD_URL}display/redirect"
-        }
-      }
-    }
+    //       publishChecks name: 'SonarQube', title: 'Sonarqube Code Quality Check', summary: 'Quality check on the SonarQube metrics from branch develop, comparing it with the ones from master branch. No bugs are allowed',
+    //                     text: readFile(file: 'checkresult.txt'), conclusion: "${currentBuild.currentResult}",
+    //                     detailsURL: "${env.BUILD_URL}display/redirect"
+    //     }
+    //   }
+    // }
 
     stage('Pull Request') {
       when {

package/README.md

@@ -24,6 +24,10 @@ Registers a VisualizationView component for a content type named 'tableau_visual
 
 ## Getting started
 
+### Upgrade
+
+#### 7.x.x -> requires >= eea.api.dataconnector@7.0
+
 ### Try volto-tableau with Docker
 
       git clone https://github.com/eea/volto-tableau.git
@@ -43,25 +47,25 @@ Go to http://localhost:3000
 
 1. Start Volto frontend
 
-* If you already have a volto project, just update `package.json`:
+- If you already have a volto project, just update `package.json`:
 
-   ```JSON
-   "addons": [
-       "@eeacms/volto-tableau"
-   ],
+  ```JSON
+  "addons": [
+      "@eeacms/volto-tableau"
+  ],
 
-   "dependencies": {
-       "@eeacms/volto-tableau": "*"
-   }
-   ```
+  "dependencies": {
+      "@eeacms/volto-tableau": "*"
+  }
+  ```
 
-* If not, create one:
+- If not, create one:
 
-   ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-tableau
-   cd my-volto-project
-   ```
+  ```
+  npm install -g yo @plone/generator-volto
+  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-tableau
+  cd my-volto-project
+  ```
 
 1. Install new add-ons and restart Volto:
 

package/package.json

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

package/src/Blocks/EmbedTableauVisualization/Edit.jsx

@@ -1,15 +1,16 @@
 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';
 
+import View from './View';
+
 const Edit = (props) => {
   const schema = React.useMemo(() => getSchema(props), [props]);
 
   return (
     <React.Fragment>
-      <View {...props} mode="edit" />
+      <View mode="edit" {...props} />
       <SidebarPortal selected={props.selected}>
         <BlockDataForm
           block={props.block}

package/src/Blocks/EmbedTableauVisualization/Edit.test.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import Edit from './Edit';
+import installEmbedTableau from '.';
+
+installEmbedTableau(config);
+
+const mockStore = configureStore([]);
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('@plone/volto/components', () => ({
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+  Toast: ({ children }) => <p>{children}</p>,
+  SidebarPortal: jest.requireActual(
+    '@plone/volto/components/manage/Sidebar/SidebarPortal',
+  ).default,
+}));
+
+jest.mock('@eeacms/volto-matomo/utils', () => ({
+  trackLink: jest.fn(),
+}));
+
+jest.mock(
+  '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection',
+  () => ({ children }) => {
+    return children;
+  },
+);
+
+jest.mock('@eeacms/volto-embed/helpers', () => ({
+  pickMetadata: (data) => data,
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+  connected_data_parameters: {},
+});
+
+describe('Edit', () => {
+  const data = {
+    '@type': 'embed_tableau_visualization',
+    dataprotection: {
+      enabled: false,
+    },
+    tableau_vis_url: 'http://localhost:3000/tableau-ct',
+    with_download: true,
+    with_more_info: true,
+    with_notes: true,
+    with_share: true,
+  };
+
+  it('should render the component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <Edit
+          id="my-tableau"
+          data={data}
+          pathname="/news"
+          selected={false}
+          block="1234"
+          index={1}
+          onChangeBlock={() => {}}
+          onSelectBlock={() => {}}
+          onDeleteBlock={() => {}}
+          onFocusPreviousBlock={() => {}}
+          onFocusNextBlock={() => {}}
+          handleKeyDown={() => {}}
+          content={{}}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -1,14 +1,30 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import React, { useEffect } from 'react';
 import { Message } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
 import { getContent } from '@plone/volto/actions';
-import { PrivacyProtection } from '@eeacms/volto-embed';
+import PrivacyProtection from '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 
+function getTableauVisualization(props) {
+  const { isBlock } = props;
+  const content = (isBlock ? props.tableauContent : props.content) || {};
+  const tableau_visualization =
+    (isBlock
+      ? props.tableauContent?.tableau_visualization
+      : props.content?.tableau_visualization) ||
+    props.data.tableau_visualization ||
+    {};
+  return {
+    ...pickMetadata(content),
+    ...tableau_visualization,
+  };
+}
+
 const View = (props) => {
-  const data = props.data;
+  const { isBlock, id, mode, data, getContent } = props;
   const {
     with_notes = true,
     with_sources = true,
@@ -18,32 +34,25 @@ const View = (props) => {
     with_enlarge = true,
     tableau_height = 700,
   } = data;
-  const { figure_note = [], 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);
+  const tableau_visualization = getTableauVisualization(props);
+
+  useEffect(() => {
+    const tableauVisId = flattenToAppURL(tableau_visualization['@id'] || '');
+    if (
+      isBlock &&
+      mode === 'edit' &&
+      tableau_vis_url &&
+      tableau_vis_url !== tableauVisId
+    ) {
+      getContent(tableau_vis_url, null, id);
     }
-    // eslint-disable-next-line
-  }, [tableau_vis_url]);
+  }, [id, isBlock, getContent, mode, tableau_vis_url, tableau_visualization]);
 
   if (props.mode === 'edit' && !tableau_vis_url) {
-    return (
-      <Message>
-        Please select a tableau visualization from block editor.
-      </Message>
-    );
-  }
-
-  if (props.mode === 'edit' && !tableau_visualization?.url) {
-    return <Message>Url is not set in the visualization</Message>;
-  }
-
-  if (!tableau_visualization?.url) {
-    return null;
+    return <Message>Please select a tableau from block editor.</Message>;
   }
 
   return (
@@ -64,8 +73,6 @@ const View = (props) => {
             tableau_height,
             tableau_vis_url,
           }}
-          figure_note={figure_note}
-          sources={data_provenance.data || []}
         />
       </PrivacyProtection>
     </div>
@@ -75,7 +82,8 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      tableau_visualization_data: state.content.subrequests?.[props.id]?.data,
+      tableauContent: state.content.subrequests?.[props.id]?.data,
+      isBlock: !!props.data?.['@type'],
     }),
     {
       getContent,

package/src/Blocks/EmbedTableauVisualization/View.test.jsx

@@ -1,31 +1,51 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
 import View from './View';
 
 const mockStore = configureStore([]);
-const store = mockStore({ content: { subrequests: [] } });
 
 window.URL.createObjectURL = jest.fn(() => 'test');
 
-jest.mock('@eeacms/volto-embed', () => ({
-  PrivacyProtection: ({ children }) => <div>{children}</div>,
-}));
-
 jest.mock('@plone/volto/components', () => ({
   Icon: ({ children }) => <img alt="incon">{children}</img>,
+  Toast: ({ children }) => <p>{children}</p>,
 }));
 
-jest.mock('@plone/volto/components', () => ({
-  Toast: ({ children }) => <p>{children}</p>,
+jest.mock('@eeacms/volto-matomo/utils', () => ({
+  trackLink: jest.fn(),
 }));
 
+jest.mock(
+  '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection',
+  () => ({ children }) => {
+    return children;
+  },
+);
+
+jest.mock('@eeacms/volto-embed/helpers', () => ({
+  pickMetadata: (data) => data,
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+  connected_data_parameters: {},
+});
+
 describe('View', () => {
   const data = {
     '@type': 'embed_tableau_visualization',
-    dataprotection: {},
+    dataprotection: {
+      enabled: false,
+    },
     tableau_vis_url: 'http://localhost:3000/tableau-ct',
     with_download: true,
     with_more_info: true,
@@ -34,12 +54,12 @@ describe('View', () => {
   };
 
   it('should render the component', () => {
-    const { asFragment } = render(
+    const component = renderer.create(
       <Provider store={store}>
         <View data={data} />
       </Provider>,
     );
-    expect(asFragment()).toMatchSnapshot();
-    //expect(container.querySelector('.embed-tableau')).toBeInTheDocument();
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
   });
 });

package/src/Blocks/EmbedTableauVisualization/__snapshots__/Edit.test.jsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Edit should render the component 1`] = `
+<div
+  className="embed-tableau"
+>
+  <div
+    className="tableau-wrapper"
+  >
+    <div
+      className="tableau tableau-2.8.0"
+      style={
+        Object {
+          "height": "700px",
+        }
+      }
+    />
+  </div>
+</div>
+`;

package/src/Blocks/EmbedTableauVisualization/__snapshots__/View.test.jsx.snap

@@ -1,3 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`View should render the component 1`] = `<DocumentFragment />`;
+exports[`View should render the component 1`] = `
+<div
+  className="embed-tableau"
+>
+  <div
+    className="tableau-wrapper"
+  >
+    <div
+      className="tableau tableau-2.8.0"
+      style={
+        Object {
+          "height": "700px",
+        }
+      }
+    />
+  </div>
+</div>
+`;

package/src/Blocks/EmbedTableauVisualization/index.js

@@ -6,7 +6,7 @@ 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',
+    title: 'Embed Dashboard (Tableau)',
     icon: sliderSVG,
     group: 'common',
     edit: EmbedTableauVisualizatonEdit,

package/src/Tableau/Tableau.jsx

@@ -89,20 +89,19 @@ const Tableau = forwardRef((props, ref) => {
     extraOptions = {},
     mode = 'view',
     screen = {},
-    figure_note = [],
-    sources,
     version = '2.8.0',
     setVizState,
     onChangeBlock,
   } = props;
   const {
+    data_provenance = {},
+    figure_note = [],
     autoScale = false,
     hideTabs = false,
     hideToolbar = false,
     sheetname = '',
     toolbarPosition = 'Top',
     breakpointUrls = [],
-    tableau_vis_url,
     with_notes = true,
     with_sources = true,
     with_more_info = true,
@@ -317,14 +316,14 @@ const Tableau = forwardRef((props, ref) => {
   };
 
   const updateScale = () => {
-    const tableauEl = vizEl.current.querySelector('iframe');
+    const iframe = vizEl.current.querySelector('iframe');
     const { sheetSize = {} } = viz.current.getVizSize() || {};
     const vizWidth = sheetSize?.minSize?.width || 1;
     const scale = Math.min(vizEl.current.clientWidth / vizWidth, 1);
-    tableauEl.style.transform = `scale(${scale})`;
+    iframe.style.transform = `scale(${scale})`;
     window.requestAnimationFrame(() => {
       if (vizEl.current) {
-        vizEl.current.style.height = `${scale * tableauEl.clientHeight}px`;
+        vizEl.current.style.height = `${scale * iframe.clientHeight}px`;
       }
     });
   };
@@ -441,9 +440,9 @@ const Tableau = forwardRef((props, ref) => {
       {loaded && (
         <div className={cx('visualization-toolbar', { mobile })}>
           <div className="left-col">
-            {with_notes && <FigureNote note={figure_note || []} />}
-            {with_sources && <Sources sources={sources} />}
-            {with_more_info && <MoreInfo href={tableau_vis_url || data.url} />}
+            {with_notes && <FigureNote notes={figure_note || []} />}
+            {with_sources && <Sources sources={data_provenance?.data || []} />}
+            {with_more_info && <MoreInfo href={data['@id']} />}
           </div>
           <div className="right-col">
             {with_enlarge && loaded && (
@@ -463,9 +462,7 @@ const Tableau = forwardRef((props, ref) => {
               </Enlarge>
             )}
             {with_download && loaded && <Download viz={viz.current} />}
-            {with_share && loaded && (
-              <Share href={tableau_vis_url || data.url} />
-            )}
+            {with_share && loaded && <Share href={data['@id']} />}
           </div>
         </div>
       )}

package/src/Utils/Download.test.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import Download from './Download';
+
+const mockStore = configureStore([]);
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('semantic-ui-react', () => ({
+  Popup: ({ content, trigger }) => {
+    return (
+      <div className="popup">
+        <div className="trigger">{trigger}</div>
+        <div className="content">{content}</div>
+      </div>
+    );
+  },
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+});
+
+describe('Edit', () => {
+  it('should render the component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <Download />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/Utils/__snapshots__/Download.test.jsx.snap

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Edit should render the component 1`] = `
+<div
+  className="popup"
+>
+  <div
+    className="trigger"
+  >
+    <div
+      className="tableau-download-container"
+    >
+      <button
+        className="trigger-button"
+      >
+        <i
+          className="ri-download-fill"
+        />
+        Download
+      </button>
+    </div>
+  </div>
+  <div
+    className="content"
+  >
+    <div
+      className="item"
+    >
+      <span
+        className="label"
+      >
+        Data formats
+      </span>
+      <div
+        className="types"
+      >
+        <div
+          className="type"
+        >
+          <button
+            onClick={[Function]}
+          >
+            <span>
+              CSV
+            </span>
+          </button>
+        </div>
+        <div
+          className="type"
+        >
+          <button
+            onClick={[Function]}
+          >
+            <span>
+              Excel
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      className="item"
+    >
+      <span
+        className="label"
+      >
+        Image formats
+      </span>
+      <div
+        className="types"
+      >
+        <div
+          className="type"
+        >
+          <button
+            onClick={[Function]}
+          >
+            <span>
+              PNG
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      className="item"
+    >
+      <span
+        className="label"
+      >
+        Other formats
+      </span>
+      <div
+        className="types"
+      >
+        <div
+          className="type"
+        >
+          <button
+            onClick={[Function]}
+          >
+            <span>
+              PDF
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/Views/VisualizationView.jsx

@@ -3,6 +3,7 @@ import { hasBlocksData } from '@plone/volto/helpers';
 import { Container } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 
 const VisualizationView = (props) => {
@@ -17,6 +18,7 @@ const VisualizationView = (props) => {
         <Tableau
           data={{
             ...tableau_visualization,
+            ...pickMetadata(content),
             with_notes: false,
             with_sources: false,
             with_more_info: false,

package/src/Widgets/VisualizationViewWidget.jsx

@@ -1,13 +1,14 @@
-import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
+import { connect } from 'react-redux';
 import config from '@plone/volto/registry';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
+import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 
-export default function VisualizationViewWidget(props) {
-  const { value = {} } = props;
-
+function VisualizationViewWidget(props) {
   return (
     <Tableau
       data={{
-        ...value,
+        ...(props.value || {}),
+        ...pickMetadata(props.content),
         with_notes: false,
         with_sources: false,
         with_more_info: false,
@@ -21,3 +22,7 @@ export default function VisualizationViewWidget(props) {
     />
   );
 }
+
+export default connect((state) => ({ content: state.content.data }))(
+  VisualizationViewWidget,
+);

package/src/Widgets/VisualizationViewWidget.test.jsx

@@ -6,13 +6,19 @@ import configureStore from 'redux-mock-store';
 import VisualizationViewWidget from './VisualizationViewWidget';
 
 const mockStore = configureStore([]);
-const store = mockStore({});
+const store = mockStore({
+  content: { data: {} },
+});
 
 jest.mock('@plone/volto/components', () => ({
   Icon: ({ children }) => <img alt="incon">{children}</img>,
   Toast: ({ children }) => <p>{children}</p>,
 }));
 
+jest.mock('@eeacms/volto-embed/helpers', () => ({
+  pickMetadata: (data) => data,
+}));
+
 describe('VisualizationViewWidget', () => {
   it('should render the component', () => {
     const data = {