@eeacms/volto-tableau 5.0.1 → 6.0.0

package/CHANGELOG.md

@@ -4,7 +4,48 @@ 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).
 
-### [5.0.1](https://github.com/eea/volto-tableau/compare/5.0.0...5.0.1) - 10 October 2023
+### [6.0.0](https://github.com/eea/volto-tableau/compare/5.0.2...6.0.0) - 30 October 2023
+
+#### :house: Documentation changes
+
+- docs: add demo gif [ana-oprea - [`a9ccb11`](https://github.com/eea/volto-tableau/commit/a9ccb1194ba6bcac99649b586113fe4f7c26a7eb)]
+
+#### :hammer_and_wrench: Others
+
+- Release 6.0.0 [Laszlo Cseh - [`576ce51`](https://github.com/eea/volto-tableau/commit/576ce5199f9021c33c404d20bbbce43192715c80)]
+### [5.0.2](https://github.com/eea/volto-tableau/compare/5.0.1...5.0.2) - 24 October 2023
+
+#### :rocket: New Features
+
+- feat: share option, design improvements [dana-cfc4 - [`a8d7ba1`](https://github.com/eea/volto-tableau/commit/a8d7ba18753451e2d9aaff3ecb3704a92e47681f)]
+- feat: redesign download options [dana-cfc4 - [`96f2f3a`](https://github.com/eea/volto-tableau/commit/96f2f3adbdccf3629f95a5222ebfd2eaf3bc1b5c)]
+
+#### :bug: Bug Fixes
+
+- fix: format variables [dana-cfc4 - [`d9a6b41`](https://github.com/eea/volto-tableau/commit/d9a6b41ab532772c23d2df45dca8fb60f40df9d8)]
+- fix: define @grey-1 less variable [dana-cfc4 - [`048c3a3`](https://github.com/eea/volto-tableau/commit/048c3a375923e6a34fa00ccdc63c59040850b5b8)]
+- fix: align sources with other viz [dana-cfc4 - [`b0e38bd`](https://github.com/eea/volto-tableau/commit/b0e38bd2d83e1148e4f706cc9448ec9361bfae6c)]
+- fix: same background colour for popups, remove background color for embed tableau [dana-cfc4 - [`bb73a31`](https://github.com/eea/volto-tableau/commit/bb73a310311882cdd82c9a7d22c57374d563557b)]
+- fix: fix case when notes don't exist [dana-cfc4 - [`a204dc3`](https://github.com/eea/volto-tableau/commit/a204dc31f8b69f92885ae0056ea8596c32ae315e)]
+- fix: volto version 16 [dana-cfc4 - [`b079f47`](https://github.com/eea/volto-tableau/commit/b079f47b94cb23d366f972096ecca645e26463bb)]
+- fix: display message when notes don't exist [dana-cfc4 - [`c8943db`](https://github.com/eea/volto-tableau/commit/c8943db5b7c01d4a71ec65d9953cb1755046edc3)]
+- fix: display figure note [dana-cfc4 - [`f8b4e6d`](https://github.com/eea/volto-tableau/commit/f8b4e6dd257aa64956f7e01a70c10a95eb48546d)]
+- fix: lint [dana-cfc4 - [`7ec0cd1`](https://github.com/eea/volto-tableau/commit/7ec0cd134ef66ee58e532b987900c7c43f5aae1c)]
+- fix: fix stylelint [dana-cfc4 - [`1b39f16`](https://github.com/eea/volto-tableau/commit/1b39f160b3b82716b7c568811ecd243bc35dc982)]
+
+#### :house: Internal changes
+
+- chore: husky, lint-staged use fixed versions [valentinab25 - [`f7ea803`](https://github.com/eea/volto-tableau/commit/f7ea803e032e27eab2193c4424d05afbca5fb6bc)]
+- chore: display sources for block [dana-cfc4 - [`d064508`](https://github.com/eea/volto-tableau/commit/d0645087ecf79af73b3e69d9263229b82e339b37)]
+- chore: display figureNote, add more tests [dana-cfc4 - [`7c8deb9`](https://github.com/eea/volto-tableau/commit/7c8deb94f721f2efe9a1373e162831a791cedf88)]
+- chore: add more tests [dana-cfc4 - [`bf463a9`](https://github.com/eea/volto-tableau/commit/bf463a9223748506ed77d4e632d8a7a2b4eb5a13)]
+- chore: add tests [dana-cfc4 - [`28cad5a`](https://github.com/eea/volto-tableau/commit/28cad5afebef69f8bf2c01531d4cae0ee7260b2f)]
+- chore: add notes and more info, remove sources and share -refs#257682 [dana-cfc4 - [`23127dc`](https://github.com/eea/volto-tableau/commit/23127dcb1a9d682920f1fd8e24fd0f494f7aa8d1)]
+
+#### :hammer_and_wrench: Others
+
+- Fix maxVizResizeAttempts error [laszlocseh - [`66fa0e2`](https://github.com/eea/volto-tableau/commit/66fa0e2c9d4860373af107470158b68df4fd793f)]
+### [5.0.1](https://github.com/eea/volto-tableau/compare/5.0.0...5.0.1) - 12 October 2023
 
 #### :house: Internal changes
 

package/README.md

@@ -20,6 +20,8 @@
 
 Registers a VisualizationView component for a content type named 'tableau_visualization'.
 
+![Tableau](https://raw.githubusercontent.com/eea/volto-tableau/master/docs/volto-tableau.gif)
+
 ## Getting started
 
 ### Try volto-tableau with Docker

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "5.0.1",
+  "version": "6.0.0",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -30,8 +30,8 @@
     "@cypress/code-coverage": "^3.9.5",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "husky": "*",
-    "lint-staged": "*",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },
   "lint-staged": {

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -10,9 +10,17 @@ 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 } =
+  const {
+    with_note = true,
+    with_sources = true,
+    with_more_info = true,
+    with_download = true,
+    with_share = 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(() => {
@@ -40,10 +48,15 @@ const View = (props) => {
               <Tableau
                 data={{
                   ...tableau_visualization,
+                  with_note,
                   with_sources,
+                  with_more_info,
                   with_download,
                   with_share,
+                  tableau_height,
+                  tableau_vis_url,
                 }}
+                figure_note={figure_note}
                 sources={data_provenance.data || []}
               />
             )}

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

@@ -0,0 +1,44 @@
+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 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>,
+}));
+
+jest.mock('@plone/volto/components', () => ({
+  Toast: ({ children }) => <p>{children}</p>,
+}));
+
+describe('View', () => {
+  const data = {
+    '@type': 'embed_tableau_visualization',
+    dataprotection: {},
+    tableau_vis_url: 'http://localhost:3000/tableau-ct',
+    with_download: true,
+    with_more_info: true,
+    with_note: true,
+    with_share: true,
+  };
+
+  it('should render the component', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <View data={data} />
+      </Provider>,
+    );
+    expect(container.querySelector('.embed-container')).toBeInTheDocument();
+  });
+});

package/src/Blocks/EmbedTableauVisualization/schema.js

@@ -49,9 +49,12 @@ export default () => {
         title: 'Default',
         fields: [
           'tableau_vis_url',
+          'with_note',
           'with_sources',
+          'with_more_info',
           'with_download',
           'with_share',
+          'tableau_height',
         ],
       },
       {
@@ -65,6 +68,21 @@ export default () => {
         title: 'Tableau visualization',
         widget: 'url',
       },
+      with_note: {
+        title: 'Show note',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_more_info: {
+        title: 'Show more info',
+        type: 'boolean',
+        defaultValue: true,
+      },
       with_download: {
         title: 'Show download button',
         type: 'boolean',
@@ -75,10 +93,10 @@ export default () => {
         type: 'boolean',
         defaultValue: true,
       },
-      with_sources: {
-        title: 'Show sources',
-        type: 'boolean',
-        defaultValue: true,
+      tableau_height: {
+        title: 'Height',
+        type: 'text',
+        defaultValue: '700',
       },
       dataprotection: {
         widget: 'object',

package/src/Tableau/Tableau.jsx

@@ -16,7 +16,9 @@ import { Button } from 'semantic-ui-react';
 import { Toast, Icon } from '@plone/volto/components';
 import { useTableau } from '@eeacms/volto-tableau/hooks';
 import JsonCodeSnippet from '@eeacms/volto-tableau/Utils/JsonCodeSnippet/JsonCodeSnippet';
+import FigureNote from '@eeacms/volto-tableau/Utils/FigureNote/FigureNote';
 import Sources from '@eeacms/volto-tableau/Utils/Sources/Sources';
+import MoreInfoLink from '@eeacms/volto-tableau/Utils/MoreInfoLink/MoreInfoLink';
 import Download from '@eeacms/volto-tableau/Utils/Download/Download';
 import Share from '@eeacms/volto-tableau/Utils/Share/Share';
 import { getSheetnames, getActiveSheetname, getDevice } from './helpers';
@@ -80,8 +82,9 @@ const Tableau = forwardRef((props, ref) => {
     extraOptions = {},
     mode = 'view',
     screen = {},
-    version = '2.8.0',
+    figure_note = [],
     sources,
+    version = '2.8.0',
     setVizState,
     onChangeBlock,
   } = props;
@@ -92,11 +95,14 @@ const Tableau = forwardRef((props, ref) => {
     sheetname = '',
     toolbarPosition = 'Top',
     breakpointUrls = [],
+    tableau_vis_url,
+    with_note,
     with_sources,
+    with_more_info,
     with_download,
     with_share,
+    tableau_height = '700',
   } = data;
-
   const device = useMemo(
     () => getDevice(breakpoints, screen.page?.width || Infinity),
     [breakpoints, screen],
@@ -406,15 +412,24 @@ const Tableau = forwardRef((props, ref) => {
         clearData={clearData}
       />
       <div
+        style={{ height: tableau_height + 'px' }}
         className={cx('tableau', `tableau-${version}`, {
           'tableau-autoscale': autoScale,
         })}
         ref={vizEl}
       />
-      <div className="tableau-info">
-        {with_sources && loaded && <Sources sources={sources} />}
-        {with_download && loaded && <Download viz={viz.current} />}
-        {with_share && loaded && <Share viz={viz.current} />}
+      <div className="visualization-info-container">
+        <div className="visualization-info">
+          {with_note && loaded && <FigureNote note={figure_note || []} />}
+          {with_sources && loaded && <Sources sources={sources} />}
+          {with_more_info && loaded && (
+            <MoreInfoLink contentTypeLink={tableau_vis_url} />
+          )}
+        </div>
+        <div className="visualization-info">
+          {with_download && loaded && <Download viz={viz.current} />}
+          {with_share && loaded && <Share contentTypeLink={tableau_vis_url} />}
+        </div>
       </div>
     </div>
   );

package/src/Tableau/Tableau.test.jsx

@@ -0,0 +1,30 @@
+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}>
+        <Tableau />
+      </Provider>,
+    );
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+  });
+});

package/src/Utils/Download/Download.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { Button, Popup } from 'semantic-ui-react';
+import { Popup } from 'semantic-ui-react';
 import cx from 'classnames';
-import { Icon } from '@plone/volto/components';
-import downloadSVG from '@eeacms/volto-tableau/icons/download.svg';
 
 const Download = ({ viz }) => {
   const [expanded, setExpanded] = React.useState(false);
@@ -14,8 +12,7 @@ const Download = ({ viz }) => {
       trigger={
         <div className="tableau-download-container">
           <button className={cx('tableau-download-button', { expanded })}>
-            <span>Download data</span>
-            <Icon name={downloadSVG} size="24px" />
+            Download <i class="ri-download-fill"></i>
           </button>
         </div>
       }
@@ -29,42 +26,73 @@ const Download = ({ viz }) => {
       }}
       ref={popupRef}
     >
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.showExportImageDialog();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        Image
-      </Button>
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.showExportPDFDialog();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        PDF
-      </Button>
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.showExportCrossTabDialog();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        CSV
-      </Button>
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.exportCrossTabToExcel();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        Excel
-      </Button>
+      <ul className="no-bullets">
+        <li>
+          Data formats
+          <div className="visualization-wrapper">
+            <div className="visualization-info">
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.showExportCrossTabDialog();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>CSV</span>
+                </button>
+              </div>
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.exportCrossTabToExcel();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>Excel</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          Image formats
+          <div className="visualization-wrapper">
+            <div className="visualization-info">
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.showExportImageDialog();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>PNG</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          Other formats
+          <div className="visualization-wrapper">
+            <div className="visualization-info">
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.showExportPDFDialog();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>PDF</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
     </Popup>
   );
 };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import Download from './Download';
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('@plone/volto/components', () => ({
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+}));
+
+describe('Download', () => {
+  const viz = {};
+
+  it('should render the component', () => {
+    const { container } = render(<Download viz={viz} />);
+    expect(
+      container.querySelector('.tableau-download-container'),
+    ).toBeInTheDocument();
+  });
+});

package/src/Utils/FigureNote/FigureNote.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import cx from 'classnames';
+import { Popup } from 'semantic-ui-react';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
+import { isArray } from 'lodash';
+
+export const serializeText = (note) => {
+  if (!serializeNodesToText(note))
+    return <p>There are no notes set for this visualization</p>;
+  return isArray(note) ? serializeNodes(note) : note;
+};
+
+const FigureNote = ({ note = [] }) => {
+  const [expanded, setExpanded] = React.useState(false);
+
+  return (
+    <div className="tableau-note-container">
+      <Popup
+        position="bottom left"
+        popper={{ id: 'tableau-note-popup' }}
+        trigger={
+          <button className={cx('tableau-note-button', { expanded })}>
+            Note
+          </button>
+        }
+        on="click"
+        onClose={() => {
+          setExpanded(false);
+        }}
+        onOpen={() => {
+          setExpanded(true);
+        }}
+      >
+        <Popup.Content>{serializeText(note)}</Popup.Content>
+      </Popup>
+    </div>
+  );
+};
+
+export default FigureNote;

package/src/Utils/FigureNote/FigureNote.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import FigureNote from './FigureNote';
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+const slateEditor = require('@plone/volto-slate/editor/render');
+slateEditor.serializeNodes = jest.fn();
+
+jest.mock('@plone/volto-slate/editor/render', () => ({
+  serializeNodesToText: ({ note = [] }) => note,
+}));
+
+describe('FigureNote', () => {
+  const note = [];
+
+  it('should render the component', () => {
+    const { container } = render(<FigureNote note={note} />);
+    expect(
+      container.querySelector('.tableau-note-container'),
+    ).toBeInTheDocument();
+  });
+});

package/src/Utils/MoreInfoLink/MoreInfoLink.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import cx from 'classnames';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+const MoreInfoLink = ({ contentTypeLink }) => {
+  return (
+    <Link href={contentTypeLink}>
+      <button className={cx('tableau-more-info-button')}>
+        More info <i class="ri-external-link-line"></i>
+      </button>
+    </Link>
+  );
+};
+
+export default MoreInfoLink;

package/src/Utils/MoreInfoLink/MoreInfoLink.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import MoreInfoLink from './MoreInfoLink';
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('@plone/volto/components', () => ({
+  UniversalLink: ({ children }) => <div>{children}</div>,
+}));
+
+describe('MoreInfoLink', () => {
+  const contentTypeLink = '/tableau-content-type';
+
+  it('should render the component', () => {
+    const { container } = render(
+      <MoreInfoLink contentTypeLink={contentTypeLink} />,
+    );
+    expect(
+      container.querySelector('.tableau-more-info-button'),
+    ).toBeInTheDocument();
+  });
+});

package/src/Utils/Share/Share.jsx

@@ -1,20 +1,68 @@
 import React from 'react';
-import { Icon } from '@plone/volto/components';
-import shareSVG from '@plone/volto/icons/share.svg';
+import { Popup, Input, Button } from 'semantic-ui-react';
+import { useCopyToClipboard } from '../../helpers.js';
+import cx from 'classnames';
 
-const Share = ({ viz }) => {
-  return (
-    <div className="tableau-share-container">
-      <button
-        className="tableau-share-button"
-        onClick={() => {
-          viz.showShareDialog();
-        }}
+const Share = ({ contentTypeLink = '' }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const popupRef = React.useRef();
+
+  const CopyUrlButton = ({ className, url, buttonText }) => {
+    const [copyUrlStatus, copyUrl] = useCopyToClipboard(url);
+
+    if (copyUrlStatus === 'copied') {
+      buttonText = 'Copied!';
+    } else if (copyUrlStatus === 'failed') {
+      buttonText = 'Copy failed. Please try again.';
+    }
+
+    return (
+      <Button
+        primary
+        onClick={copyUrl}
+        className={cx('copy-button', className)}
       >
-        <span>Share</span>
-        <Icon name={shareSVG} size="24px" />
-      </button>
-    </div>
+        {buttonText}
+      </Button>
+    );
+  };
+
+  return (
+    <Popup
+      popper={{ id: 'tableau-share-popup' }}
+      trigger={
+        <div className="tableau-share-container">
+          <button className={cx('tableau-share-button', { expanded })}>
+            <span>Share</span>
+            <i class="ri-share-fill"></i>
+          </button>
+        </div>
+      }
+      position="bottom left"
+      on="click"
+      onClose={() => {
+        setExpanded(false);
+      }}
+      onOpen={() => {
+        setExpanded(true);
+      }}
+      ref={popupRef}
+    >
+      <div>
+        <span className="tableau-share-popup-text">Copy link</span>
+        <div className="tableau-share-popup-container">
+          <Input
+            className="tableau-share-link"
+            defaultValue={contentTypeLink}
+          />
+          <CopyUrlButton
+            className="tableau-copy-button"
+            url={contentTypeLink}
+            buttonText="Copy"
+          />
+        </div>
+      </div>
+    </Popup>
   );
 };
 

package/src/Utils/Sources/Sources.jsx

@@ -14,11 +14,12 @@ const Source = ({ source }) => {
   return (
     <>
       <Link className="embed-sources-param-title" href={source.link}>
-        {source.title},{' '}
-        <span className="embed-sources-param-description">
-          {source.organisation}
-        </span>
+        {source.title}
       </Link>
+      ,
+      <span className="embed-sources-param-description">
+        {source.organisation}
+      </span>
     </>
   );
 };

package/src/Views/VisualizationView.jsx

@@ -7,7 +7,7 @@ import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 
 const VisualizationView = (props) => {
   const { content = {} } = props;
-  const { tableau_visualization = {}, data_provenance = {} } = content;
+  const { tableau_visualization = {} } = content;
 
   return (
     <Container id="page-document">
@@ -17,11 +17,8 @@ const VisualizationView = (props) => {
         <Tableau
           data={{
             ...tableau_visualization,
-            with_sources: true,
             with_download: true,
-            with_share: true,
           }}
-          sources={data_provenance.data || []}
           breakpoints={
             config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
           }

package/src/Widgets/VisualizationViewWidget.jsx

@@ -7,11 +7,8 @@ export default function VisualizationViewWidget(props) {
     <Tableau
       data={{
         ...value,
-        with_sources: true,
         with_download: true,
-        with_share: true,
       }}
-      sources={[]}
       breakpoints={
         config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
       }

package/src/helpers.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const loadTableauScript = (callback, version) => {
   if (!__CLIENT__) return;
   const source = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
@@ -32,3 +34,25 @@ export const loadTableauScript = (callback, version) => {
 // https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js
 // https://public.tableau.com/javascripts/api/tableau-2.1.2.min.js
 // https://public.tableau.com/javascripts/api/tableau-2.0.3.min.js
+
+export const useCopyToClipboard = (text) => {
+  const [copyStatus, setCopyStatus] = React.useState('inactive');
+  const copy = React.useCallback(() => {
+    navigator.clipboard.writeText(text).then(
+      () => setCopyStatus('copied'),
+      () => setCopyStatus('failed'),
+    );
+  }, [text]);
+
+  React.useEffect(() => {
+    if (copyStatus === 'inactive') {
+      return;
+    }
+
+    const timeout = setTimeout(() => setCopyStatus('inactive'), 3000);
+
+    return () => clearTimeout(timeout);
+  }, [copyStatus]);
+
+  return [copyStatus, copy];
+};

package/src/less/tableau.less

@@ -19,7 +19,6 @@
 .tableau-wrapper {
   padding: @tableauWrapperPadding;
   margin: @tableauWrapperMargin;
-  background-color: @tableauWrapperBackground;
 
   .tableau-debug {
     margin: 0 auto 1rem auto;
@@ -29,10 +28,6 @@
     }
   }
 
-  .tableau-info {
-    margin: 0 auto;
-  }
-
   .tableau {
     margin-bottom: 1rem;
 
@@ -118,25 +113,47 @@
 
 // ========= Sources ==========
 
-.tableau-wrapper .tableau-info {
+.tableau-wrapper .visualization-info-container {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-
-  > * {
-    padding: 0 0.5rem;
-    border-collapse: collapse;
-  }
+  justify-content: space-between;
+  gap: 1.2rem;
 
   > *:first-child {
-    padding-left: 0;
+    margin-left: auto;
+
+    > *:not(:last-child) {
+      border-right: 1px solid @textColor;
+    }
   }
 
   > *:last-child {
-    padding-right: 0;
+    justify-content: flex-end;
   }
 
-  > *:not(:last-child) {
-    border-right: 2px solid @textColor;
+  .visualization-info {
+    display: flex;
+    flex-grow: 0.5;
+    align-items: center;
+
+    > * {
+      padding: 0 0.5rem;
+      border-collapse: collapse;
+    }
+
+    > *:first-child {
+      padding-left: 0;
+    }
+
+    > *:last-child {
+      padding-right: 0;
+      margin-right: 0;
+
+      &.tableau-download-container {
+        margin-left: auto;
+      }
+    }
   }
 }
 
@@ -144,9 +161,52 @@
   cursor: pointer;
 }
 
+#tableau-share-popup {
+  .ui.popup {
+    padding-right: 15px;
+    padding-left: 0;
+  }
+
+  .tableau-share-popup-text {
+    margin-left: 7px;
+  }
+}
+
+.tableau-share-popup-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+
+  .tableau-share-link {
+    input {
+      padding-left: 7px !important;
+      border-left: 0 !important;
+
+      &:focus {
+        outline: 1px solid var(--focus-visible, #0083e0);
+      }
+    }
+  }
+
+  .tableau-copy-button {
+    max-width: 80px;
+    padding: 10px 17px !important;
+    border: 1px solid black !important;
+    margin: 0 !important;
+    background-color: #4472c4 !important;
+    border-radius: 7px !important;
+  }
+
+  @media screen and (max-width: @largestMobileScreen) {
+    flex-direction: column;
+  }
+}
+
+.tableau-note-button,
+.tableau-more-info-button,
 .tableau-download-button,
-.tableau-share-button,
-.tableau-sources-button {
+.tableau-sources-button,
+.tableau-share-button {
   display: inline-flex;
   align-items: center;
   padding-bottom: 3px;
@@ -154,7 +214,6 @@
   background-color: transparent;
   color: @textColor;
   cursor: pointer;
-  font-weight: bold;
 
   .icon {
     margin-left: 0.5rem;
@@ -171,24 +230,25 @@
   }
 }
 
+.tableau-more-info-button,
+.tableau-download-button,
+.tableau-share-button {
+  gap: 0.25rem;
+
+  i {
+    margin-bottom: 1px;
+  }
+}
+
+#tableau-note-popup,
 #tableau-sources-popup,
 #tableau-download-popup {
   .ui.popup {
-    min-width: 600px;
-    background-color: #f9f9f9;
+    background-color: @grey-1;
     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 
     &::before {
-      background-color: #f9f9f9;
-    }
-
-    .sources-list > li,
-    .sources-list > li > * {
-      color: @textColor;
-    }
-
-    a:hover {
-      color: @secondaryColor;
+      background-color: @grey-1;
     }
   }
 
@@ -198,24 +258,72 @@
     padding-inline-start: 0;
   }
 
-  @media screen and (max-width: @largestMobileScreen) {
+  .embed-sources-param-description {
+    margin-left: 5px;
+  }
+
+  @media screen and (min-width: @largestMobileScreen) {
     .ui.popup {
-      min-width: 300px;
+      max-width: 600px;
     }
   }
 }
 
 #tableau-download-popup {
-  .ui.popup {
-    min-width: 460px;
-    text-align: center;
+  ul.no-bullets {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+
+  .visualization-wrapper {
+    position: relative;
+
+    .visualization-info {
+      display: flex;
+      align-items: center;
+
+      > * {
+        padding: 0 0.5rem;
+        border-collapse: collapse;
+      }
+
+      > *:first-child {
+        padding-left: 0;
+      }
+
+      > *:last-child {
+        padding-right: 0;
+        margin-right: 0;
+
+        &.tableau-download-container {
+          margin-left: auto;
+        }
+      }
+
+      > *:not(:last-child) {
+        border-right: 2px solid @textColor;
+      }
+    }
+  }
+
+  .tableau-download-button.tableau-format-download {
+    padding: 0;
+    color: #679ad6;
+    font-weight: normal;
+
+    &:hover {
+      color: #164b7f;
+    }
   }
 }
 
 @media print {
   .tableau-download-container,
+  .tableau-note-container,
   .tableau-sources-container,
   .tableau-share-container,
+  #tableau-note-popup,
   #tableau-sources-popup {
     display: none;
   }

package/src/less/tableau.variables

@@ -5,4 +5,6 @@
 @tableauIframePadding       : 0;
 @tableauIframeMargin        : 0 auto 1rem auto;
 @tableauIframeBorder        : none;
-@tableauIframeBorderRadius  : 0;
+@tableauIframeBorderRadius  : 0;
+
+@grey-1                     : #f9f9f9;