@eeacms/volto-tableau 7.0.2 → 7.0.4

package/CHANGELOG.md

@@ -4,7 +4,22 @@ 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).
 
-### [7.0.2](https://github.com/eea/volto-tableau/compare/7.0.1...7.0.2) - 28 November 2023
+### [7.0.4](https://github.com/eea/volto-tableau/compare/7.0.3...7.0.4) - 5 December 2023
+
+#### :hammer_and_wrench: Others
+
+- fix tests [Miu Razvan - [`3a880ab`](https://github.com/eea/volto-tableau/commit/3a880aba0ff02bb568a1778e07b48b572472e44a)]
+- fix default height [Miu Razvan - [`0eb7ebb`](https://github.com/eea/volto-tableau/commit/0eb7ebb7c5f702ffb3f0ae679b90f27ad7cbb080)]
+### [7.0.3](https://github.com/eea/volto-tableau/compare/7.0.2...7.0.3) - 29 November 2023
+
+#### :hammer_and_wrench: Others
+
+- fix tests [Miu Razvan - [`01eebe9`](https://github.com/eea/volto-tableau/commit/01eebe9580fdf85a8ca64a5a7f3970d93a7dd73f)]
+- update tests [Miu Razvan - [`c0897ea`](https://github.com/eea/volto-tableau/commit/c0897eacff0afe9458faf991276f250bba807269)]
+- fix tests [Miu Razvan - [`096203b`](https://github.com/eea/volto-tableau/commit/096203bb5b70f97e2fed381308afd727767477fb)]
+- update cypress [Miu Razvan - [`d5cb322`](https://github.com/eea/volto-tableau/commit/d5cb3222e0a316d2627cade3d2534942264b24ac)]
+- update [Miu Razvan - [`0df72ba`](https://github.com/eea/volto-tableau/commit/0df72babc50e4d092d3cb2d80e720202dc2e95be)]
+### [7.0.2](https://github.com/eea/volto-tableau/compare/7.0.1...7.0.2) - 29 November 2023
 
 #### :bug: Bug Fixes
 

package/cypress/e2e/block-tableau.cy.js

@@ -30,16 +30,11 @@ describe('Blocks Tests', () => {
     // when I add a maps block
     cy.addNewBlock('tableau');
 
-    cy.get(`.sidebar-container .field-wrapper-url #field-url`).type(
-      'https://tableau-public.discomap.eea.europa.eu/views/GHGProjections/Dashboard1&:jsdebug=n',
-    );
+    cy.get(
+      `.sidebar-container .field-wrapper-tableau_vis_url #field-tableau_vis_url`,
+    ).type('/path/to/dashboard');
     cy.get('#toolbar-save').click();
     cy.wait('@content');
     cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
-
-    // then the page view should contain the maps block
-    cy.get('#page-document iframe')
-      .should('have.attr', 'src')
-      .and('match', /\/\/tableau-public.discomap.eea.europa.eu\//);
   });
 });

package/jest-addon.config.js

@@ -9,15 +9,19 @@ module.exports = {
     '@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',
+    '@package/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
+    '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
-    '@plone/volto-slate':
-      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
+    '@plone/volto-slate/(.*)$':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src/$1',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@plone|@root|@package|@eeacms)/).*/',
+  ],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',
@@ -32,4 +36,7 @@ module.exports = {
       statements: 5,
     },
   },
+  setupFilesAfterEnv: [
+    '<rootDir>/node_modules/@eeacms/volto-tableau/jest.setup.js',
+  ],
 };

package/jest.setup.js

@@ -0,0 +1,49 @@
+import { jest } from '@jest/globals';
+import configureStore from 'redux-mock-store';
+
+const mockStore = configureStore();
+
+global.store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+  connected_data_parameters: {},
+});
+
+const mockSemanticComponents = jest.requireActual('semantic-ui-react');
+const mockComponents = jest.requireActual('@plone/volto/components');
+
+jest.mock('semantic-ui-react', () => ({
+  ...mockSemanticComponents,
+  Popup: ({ content, trigger }) => {
+    return (
+      <div className="popup">
+        <div className="trigger">{trigger}</div>
+        <div className="content">{content}</div>
+      </div>
+    );
+  },
+}));
+
+jest.doMock('@plone/volto/components', () => {
+  return {
+    __esModule: true,
+    ...mockComponents,
+    Toast: ({ children }) => <div className="toast">{children}</div>,
+    SidebarPortal: ({ children }) => <div id="sidebar">{children}</div>,
+    UniversalLink: ({ children, href }) => {
+      return <a href={href}>{children}</a>;
+    },
+  };
+});
+
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({}),
+  }),
+);

package/locales/de/LC_MESSAGES/volto.po

@@ -11,4 +11,12 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: CSS height
+msgid "CSS height"
+msgstr ""
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: Tableau height
+msgid "Tableau height"
+msgstr ""

package/locales/en/LC_MESSAGES/volto.po

@@ -11,4 +11,12 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: CSS height
+msgid "CSS height"
+msgstr ""
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: Tableau height
+msgid "Tableau height"
+msgstr ""

package/locales/it/LC_MESSAGES/volto.po

@@ -11,4 +11,12 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: CSS height
+msgid "CSS height"
+msgstr ""
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: Tableau height
+msgid "Tableau height"
+msgstr ""

package/locales/ro/LC_MESSAGES/volto.po

@@ -11,4 +11,12 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: CSS height
+msgid "CSS height"
+msgstr ""
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: Tableau height
+msgid "Tableau height"
+msgstr ""

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"POT-Creation-Date: 2023-11-29T13:30:10.494Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -13,4 +13,12 @@ msgstr ""
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: CSS height
+msgid "CSS height"
+msgstr ""
 
+#: Blocks/EmbedTableauVisualization/schema
+# defaultMessage: Tableau height
+msgid "Tableau height"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "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,4 +1,6 @@
 import React from 'react';
+import { compose } from 'redux';
+import { injectIntl } from 'react-intl';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import { SidebarPortal } from '@plone/volto/components';
 import getSchema from './schema';
@@ -6,27 +8,28 @@ import getSchema from './schema';
 import View from './View';
 
 const Edit = (props) => {
+  const { block, data, selected, onChangeBlock } = props;
   const schema = React.useMemo(() => getSchema(props), [props]);
 
   return (
     <React.Fragment>
       <View mode="edit" {...props} />
-      <SidebarPortal selected={props.selected}>
+      <SidebarPortal selected={selected}>
         <BlockDataForm
-          block={props.block}
+          block={block}
           schema={schema}
           title={schema.title}
           onChangeField={(id, value) => {
-            props.onChangeBlock(props.block, {
-              ...props.data,
+            onChangeBlock(block, {
+              ...data,
               [id]: value,
             });
           }}
-          formData={props.data}
+          formData={data}
         />
       </SidebarPortal>
     </React.Fragment>
   );
 };
 
-export default Edit;
+export default compose(injectIntl)(Edit);

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

@@ -1,6 +1,5 @@
 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';
 
@@ -9,45 +8,6 @@ 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',
@@ -63,7 +23,7 @@ describe('Edit', () => {
 
   it('should render the component', () => {
     const component = renderer.create(
-      <Provider store={store}>
+      <Provider store={global.store}>
         <Edit
           id="my-tableau"
           data={data}
@@ -78,6 +38,7 @@ describe('Edit', () => {
           onFocusNextBlock={() => {}}
           handleKeyDown={() => {}}
           content={{}}
+          useVisibilitySensor={false}
         />
       </Provider>,
     );

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -24,7 +24,7 @@ function getTableauVisualization(props) {
 }
 
 const View = (props) => {
-  const { isBlock, id, mode, data, getContent } = props;
+  const { isBlock, id, mode, data, getContent, useVisibilitySensor } = props;
   const {
     with_notes = true,
     with_sources = true,
@@ -32,7 +32,7 @@ const View = (props) => {
     with_download = true,
     with_share = true,
     with_enlarge = true,
-    tableau_height = 700,
+    tableau_height,
   } = data;
 
   const tableau_vis_url = flattenToAppURL(data.tableau_vis_url || '');
@@ -60,17 +60,19 @@ const View = (props) => {
       <PrivacyProtection
         {...props}
         data={{ ...data, url: tableau_visualization?.url }}
+        useVisibilitySensor={useVisibilitySensor}
       >
         <Tableau
           data={{
             ...tableau_visualization,
+            tableau_height:
+              tableau_height || tableau_visualization.tableau_height,
             with_notes,
             with_sources,
             with_more_info,
             with_download,
             with_share,
             with_enlarge,
-            tableau_height,
             tableau_vis_url,
           }}
         />

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

@@ -1,45 +1,8 @@
 import React from 'react';
 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([]);
-
-window.URL.createObjectURL = jest.fn(() => 'test');
-
-jest.mock('@plone/volto/components', () => ({
-  Icon: ({ children }) => <img alt="incon">{children}</img>,
-  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',
@@ -55,8 +18,8 @@ describe('View', () => {
 
   it('should render the component', () => {
     const component = renderer.create(
-      <Provider store={store}>
-        <View data={data} />
+      <Provider store={global.store}>
+        <View data={data} useVisibilitySensor={false} />
       </Provider>,
     );
     const json = component.toJSON();

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

@@ -1,20 +1,256 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Edit should render the component 1`] = `
-<div
-  className="embed-tableau"
->
+Array [
   <div
-    className="tableau-wrapper"
+    className="embed-tableau"
   >
     <div
-      className="tableau tableau-2.8.0"
+      className="privacy-protection-wrapper"
       style={
         Object {
-          "height": "700px",
+          "height": "auto",
+          "minHeight": "200px",
+          "overflow": "hidden",
+          "position": "relative",
         }
       }
-    />
-  </div>
-</div>
+    >
+      <div
+        className="tableau-wrapper"
+      >
+        <div
+          className="tableau tableau-2.8.0"
+          style={
+            Object {
+              "height": "700px",
+            }
+          }
+        />
+      </div>
+    </div>
+  </div>,
+  <div
+    id="sidebar"
+  >
+    <div
+      className="ui form"
+    >
+      <header
+        className="header pulled"
+      >
+        <h2>
+          Embed Dashboard (Tableau)
+        </h2>
+      </header>
+      <div
+        id="blockform-fieldset-default"
+      >
+        <div
+          className="ui segment form attached"
+        >
+          <div
+            className="mocked-url-widget"
+            id="mocked-field-tableau_vis_url"
+          >
+            Tableau visualization
+             - 
+            No description
+          </div>
+          <div
+            className="mocked-default-widget"
+            id="mocked-field-tableau_height"
+          >
+            <a
+              href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
+              rel="noreferrer"
+              target="_blank"
+            >
+              CSS height
+            </a>
+             - 
+            Tableau height
+          </div>
+        </div>
+      </div>
+      <div
+        className="accordion ui fluid styled form"
+      >
+        <div
+          id="blockform-fieldset-toolbar"
+        >
+          <div
+            className="active title"
+            onClick={[Function]}
+          >
+            Toolbar
+            <svg
+              className="icon"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": undefined,
+                }
+              }
+              onClick={null}
+              style={
+                Object {
+                  "fill": "currentColor",
+                  "height": "20px",
+                  "width": "auto",
+                }
+              }
+              viewBox=""
+              xmlns=""
+            />
+          </div>
+          <div
+            className="content active"
+          >
+            <div
+              aria-hidden={false}
+              className="rah-static rah-static--height-auto"
+              style={
+                Object {
+                  "height": "auto",
+                  "overflow": "visible",
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "WebkitTransition": "opacity 500ms ease 0ms",
+                    "transition": "opacity 500ms ease 0ms",
+                  }
+                }
+              >
+                <div
+                  className="ui segment attached"
+                >
+                  <div
+                    className="mocked-boolean-widget"
+                    id="mocked-field-with_notes"
+                  >
+                    Show note
+                     - 
+                    No description
+                  </div>
+                  <div
+                    className="mocked-boolean-widget"
+                    id="mocked-field-with_sources"
+                  >
+                    Show sources
+                     - 
+                    Will show sources set in this page Data provenance
+                  </div>
+                  <div
+                    className="mocked-boolean-widget"
+                    id="mocked-field-with_more_info"
+                  >
+                    Show more info
+                     - 
+                    No description
+                  </div>
+                  <div
+                    className="mocked-boolean-widget"
+                    id="mocked-field-with_download"
+                  >
+                    Show download button
+                     - 
+                    No description
+                  </div>
+                  <div
+                    className="mocked-boolean-widget"
+                    id="mocked-field-with_share"
+                  >
+                    Show share button
+                     - 
+                    No description
+                  </div>
+                  <div
+                    className="mocked-boolean-widget"
+                    id="mocked-field-with_enlarge"
+                  >
+                    Show enlarge button
+                     - 
+                    No description
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="accordion ui fluid styled form"
+      >
+        <div
+          id="blockform-fieldset-privacy"
+        >
+          <div
+            className="title"
+            onClick={[Function]}
+          >
+            Privacy
+            <svg
+              className="icon"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": undefined,
+                }
+              }
+              onClick={null}
+              style={
+                Object {
+                  "fill": "currentColor",
+                  "height": "20px",
+                  "width": "auto",
+                }
+              }
+              viewBox=""
+              xmlns=""
+            />
+          </div>
+          <div
+            className="content"
+          >
+            <div
+              aria-hidden={true}
+              className="rah-static rah-static--height-zero"
+              style={
+                Object {
+                  "height": 0,
+                  "overflow": "hidden",
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "WebkitTransition": "opacity 500ms ease 0ms",
+                    "opacity": 0,
+                    "transition": "opacity 500ms ease 0ms",
+                  }
+                }
+              >
+                <div
+                  className="ui segment attached"
+                >
+                  <div
+                    className="mocked-default-widget"
+                    id="mocked-field-dataprotection"
+                  >
+                    No title
+                     - 
+                    No description
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
 `;

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

@@ -5,16 +5,28 @@ exports[`View should render the component 1`] = `
   className="embed-tableau"
 >
   <div
-    className="tableau-wrapper"
+    className="privacy-protection-wrapper"
+    style={
+      Object {
+        "height": "auto",
+        "minHeight": "200px",
+        "overflow": "hidden",
+        "position": "relative",
+      }
+    }
   >
     <div
-      className="tableau tableau-2.8.0"
-      style={
-        Object {
-          "height": "700px",
+      className="tableau-wrapper"
+    >
+      <div
+        className="tableau tableau-2.8.0"
+        style={
+          Object {
+            "height": "700px",
+          }
         }
-      }
-    />
+      />
+    </div>
   </div>
 </div>
 `;

package/src/Blocks/EmbedTableauVisualization/index.js

@@ -8,7 +8,7 @@ export default (config) => {
     id: 'embed_tableau_visualization',
     title: 'Embed Dashboard (Tableau)',
     icon: sliderSVG,
-    group: 'common',
+    group: 'data_visualizations',
     edit: EmbedTableauVisualizatonEdit,
     view: EmbedTableauVisualizatonView,
     restricted: false,

package/src/Blocks/EmbedTableauVisualization/schema.js

@@ -1,3 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  CSSHeight: {
+    id: 'CSS height',
+    defaultMessage: 'CSS height',
+  },
+  CSSTableauHeightDescription: {
+    id: 'Tableau height',
+    defaultMessage: 'Tableau height',
+  },
+});
+
 const getProtectionSchema = () => ({
   title: 'Data Protection',
 
@@ -40,9 +53,9 @@ const getProtectionSchema = () => ({
   required: [],
 });
 
-export default () => {
+export default (props) => {
   return {
-    title: 'Embed EEA Tableau visualization',
+    title: 'Embed Dashboard (Tableau)',
     fieldsets: [
       {
         id: 'default',
@@ -104,9 +117,18 @@ export default () => {
         defaultValue: true,
       },
       tableau_height: {
-        title: 'Height',
-        type: 'text',
-        defaultValue: '700',
+        title: (
+          <a
+            rel="noreferrer"
+            target="_blank"
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
+          >
+            {props.intl.formatMessage(messages.CSSHeight)}
+          </a>
+        ),
+        description: props.intl.formatMessage(
+          messages.CSSTableauHeightDescription,
+        ),
       },
       dataprotection: {
         widget: 'object',

package/src/Blocks/TableauBlock/index.js

@@ -8,10 +8,10 @@ export default (config) => {
     id: 'tableau_block',
     title: 'Tableau',
     icon: sliderSVG,
-    group: 'common',
+    group: 'data_visualizations',
     edit: TableauEdit,
     view: TableauView,
-    restricted: false,
+    restricted: true,
     mostUsed: false,
     sidebarTab: 1,
     blocks: {},

package/src/Blocks/index.js

@@ -1,7 +1,16 @@
+import { uniqBy } from 'lodash';
 import installEmbedTableauVisualization from './EmbedTableauVisualization';
 import installTableauBlock from './TableauBlock';
 
 export default (config) => {
+  config.blocks.groupBlocksOrder = uniqBy(
+    [
+      ...config.blocks.groupBlocksOrder,
+      { id: 'data_visualizations', title: 'Data Visualizations' },
+    ],
+    'id',
+  );
+
   return [installEmbedTableauVisualization, installTableauBlock].reduce(
     (acc, apply) => apply(acc),
     config,

package/src/Tableau/Tableau.jsx

@@ -9,8 +9,7 @@ import React, {
 } from 'react';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import isEqual from 'lodash/isEqual';
-import isUndefined from 'lodash/isUndefined';
+import { isEqual, isUndefined, isNaN, isNumber } from 'lodash';
 import cx from 'classnames';
 import { Button } from 'semantic-ui-react';
 import { Toast, Icon } from '@plone/volto/components';
@@ -30,6 +29,14 @@ import resetSVG from '@plone/volto/icons/reset.svg';
 
 import '@eeacms/volto-embed/Toolbar/styles.less';
 
+function getHeight(height) {
+  const asNumber = isNumber(Number(height)) && !isNaN(Number(height));
+  if (asNumber) {
+    return `${height}px`;
+  }
+  return height || '700px';
+}
+
 const TableauDebug = ({ mode, data, vizState, url, version, clearData }) => {
   const { loaded, error } = vizState;
   const { filters = {}, parameters = {} } = data;
@@ -108,7 +115,7 @@ const Tableau = forwardRef((props, ref) => {
     with_download = true,
     with_share = true,
     with_enlarge = true,
-    tableau_height = 700,
+    tableau_height,
   } = data;
   const device = useMemo(
     () => getDevice(breakpoints, screen.page?.width || Infinity),
@@ -431,7 +438,7 @@ const Tableau = forwardRef((props, ref) => {
         clearData={clearData}
       />
       <div
-        style={{ height: tableau_height + 'px' }}
+        style={{ height: getHeight(tableau_height) }}
         className={cx('tableau', `tableau-${version}`, {
           'tableau-autoscale': autoScale,
         })}
@@ -445,6 +452,8 @@ const Tableau = forwardRef((props, ref) => {
             {with_more_info && <MoreInfo href={data['@id']} />}
           </div>
           <div className="right-col">
+            {with_download && loaded && <Download viz={viz.current} />}
+            {with_share && loaded && <Share href={data['@id']} />}
             {with_enlarge && loaded && (
               <Enlarge>
                 <Tableau
@@ -461,8 +470,6 @@ const Tableau = forwardRef((props, ref) => {
                 />
               </Enlarge>
             )}
-            {with_download && loaded && <Download viz={viz.current} />}
-            {with_share && loaded && <Share href={data['@id']} />}
           </div>
         </div>
       )}

package/src/Tableau/Tableau.test.jsx

@@ -2,26 +2,12 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
 import Tableau from './Tableau';
 
-const mockStore = configureStore([]);
-const store = mockStore({});
-
-window.URL.createObjectURL = jest.fn(() => 'test');
-
-jest.mock('@plone/volto/components', () => ({
-  Icon: ({ children }) => <img alt="incon">{children}</img>,
-}));
-
-jest.mock('@plone/volto/components', () => ({
-  Toast: ({ children }) => <p>{children}</p>,
-}));
-
 describe('Tableau', () => {
   it('should render the component', () => {
     const { container } = render(
-      <Provider store={store}>
+      <Provider store={global.store}>
         <Tableau />
       </Provider>,
     );

package/src/Utils/Download.test.jsx

@@ -1,40 +1,13 @@
 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}>
+      <Provider store={global.store}>
         <Download />
       </Provider>,
     );

package/src/Views/VisualizationView.jsx

@@ -9,6 +9,17 @@ import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 const VisualizationView = (props) => {
   const { content = {} } = props;
   const { tableau_visualization = {} } = content;
+  const { staticParameters = [] } = tableau_visualization;
+
+  const extraOptions = React.useMemo(() => {
+    const options = {};
+    staticParameters.forEach((parameter) => {
+      if (parameter.field && parameter.value) {
+        options[parameter.field] = parameter.value;
+      }
+    });
+    return options;
+  }, [staticParameters]);
 
   return (
     <Container id="page-document">
@@ -22,10 +33,11 @@ const VisualizationView = (props) => {
             with_notes: false,
             with_sources: false,
             with_more_info: false,
-            with_share: false,
-            with_enlarge: false,
+            with_share: true,
+            with_enlarge: true,
             with_download: true,
           }}
+          extraOptions={extraOptions}
           breakpoints={
             config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
           }

package/src/Widgets/VisualizationViewWidget.test.jsx

@@ -2,23 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
 import VisualizationViewWidget from './VisualizationViewWidget';
 
-const mockStore = configureStore([]);
-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 = {
@@ -34,7 +19,7 @@ describe('VisualizationViewWidget', () => {
     };
 
     const { container } = render(
-      <Provider store={store}>
+      <Provider store={global.store}>
         <VisualizationViewWidget data={data} value={value} />
       </Provider>,
     );

package/src/Widgets/VisualizationWidget.test.jsx

@@ -1,20 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
 import VisualizationWidget from './VisualizationWidget';
 
-const mockStore = configureStore([]);
-const store = mockStore({});
-
-jest.mock('@plone/volto/components', () => ({
-  FormFieldWrapper: jest.fn(({ children }) => <>{children}</>),
-  InlineForm: jest.fn(() => <div>Mocked InlineForm</div>),
-  Icon: ({ children }) => <img alt="incon">{children}</img>,
-  Toast: ({ children }) => <p>{children}</p>,
-}));
-
 describe('VisualizationWidget', () => {
   it('should render the component', () => {
     const data = {
@@ -36,7 +25,7 @@ describe('VisualizationWidget', () => {
     };
 
     const { container } = render(
-      <Provider store={store}>
+      <Provider store={global.store}>
         <VisualizationWidget {...data} />
       </Provider>,
     );