Add download options

src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -16,7 +16,6 @@ const View = (props) => {
   const data = React.useMemo(() => props.data || {}, [props.data]);
   const { vis_url = '' } = data;
   const show_sources = data?.show_sources ?? false;
-  const version = '2.8.0';
 
   React.useEffect(() => {
     if (vis_url) {
@@ -39,22 +38,12 @@ const View = (props) => {
           <>
             {tableau_visualization?.general?.url ? (
               <>
-                <div className="tableau-block">
-                  {props.mode === 'edit' ? (
-                    <div className="tableau-info">
-                      <h3 className="tableau-version">
-                        == Tableau {version} loaded ==
-                      </h3>
-                    </div>
-                  ) : (
-                    ''
-                  )}
-                  <ConnectedTableau
-                    {...props.tableau_visualization}
-                    id={props.id}
-                    {...props}
-                  />
-                </div>
+                <ConnectedTableau
+                  {...props.tableau_visualization}
+                  id={props.id}
+                  {...props}
+                />
+
                 {show_sources &&
                 data_provenance &&
                 data_provenance?.data?.data_provenance &&

src/ConnectedTableau/ConnectedTableau.jsx

@@ -6,6 +6,13 @@ const ConnectedTableau = (props) => {
   const [loaded, setLoaded] = React.useState(null);
   return (
     <div className="tableau-block">
+      {loaded && props.mode === 'edit' ? (
+        <div className="tableau-info">
+          <h3 className="tableau-version">== Tableau ==</h3>
+        </div>
+      ) : (
+        ''
+      )}
       <Tableau
         error={error}
         loaded={loaded}

src/DownloadExtras/TableauDownload.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Popup, Button, Modal } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import downloadSVG from '@plone/volto/icons/download.svg';
+
+const TableauDownload = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const viz = props.viz || {};
+
+  const exportImage = () => {
+    viz.showExportImageDialog();
+  };
+
+  const exportToCSV = () => {
+    viz.showExportCrossTabDialog();
+  };
+
+  const exportToExcel = () => {
+    viz.exportCrossTabToExcel();
+  };
+
+  return (
+    <>
+      <Popup
+        basic
+        className="tableau-download-dialog"
+        position="top center"
+        on="click"
+        trigger={
+          <div className="toolbar-button-wrapper">
+            <Button className="toolbar-button" title="Download">
+              <Icon name={downloadSVG} size="26px" />
+            </Button>
+            <span className="btn-text">Save</span>
+          </div>
+        }
+      >
+        <Popup.Header>Download</Popup.Header>
+        <Popup.Content>
+          <p>Select your file format.</p>
+          <Button onClick={exportImage}>Image</Button>
+          <Button onClick={exportToCSV}>CSV</Button>
+          <Button onClick={exportToExcel}>Excel</Button>
+        </Popup.Content>
+      </Popup>
+
+      <Modal onClose={() => setOpen(false)} open={open}>
+        <Modal.Content>
+          Permissions are required to download the workbook.
+        </Modal.Content>
+
+        <Modal.Actions>
+          <Button primary onClick={() => setOpen(false)}>
+            OK
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+export default TableauDownload;

src/DownloadExtras/TableauFullscreen.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Modal, Button } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import { useHistory, useLocation } from 'react-router-dom';
+import fullscreenSVG from '@plone/volto/icons/fullscreen.svg';
+
+import config from '@plone/volto/registry';
+
+const TableauFullscreen = (props) => {
+  const tableau_url = props.data.url;
+  const modalHash = props?.item.getId + '_preview';
+  const [open, setOpen] = React.useState(false);
+  const history = useHistory();
+  const location = useLocation();
+  const {
+    blocks: { blocksConfig },
+  } = config;
+  const TableauBlockView = blocksConfig.tableau_block.view;
+
+  React.useEffect(() => {
+    if (location.hash.includes(modalHash)) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }, [location, modalHash]);
+
+  const closeModal = () => {
+    history.push({
+      hash: '',
+    });
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <div className="toolbar-button-wrapper">
+        <Button
+          className="toolbar-button"
+          title="Full Screen"
+          onClick={() => {
+            setOpen(true);
+            if (props.item) {
+              history.push({
+                hash: props.item.getId + '_preview',
+              });
+            }
+          }}
+        >
+          <Icon name={fullscreenSVG} size="23px" />
+        </Button>
+        <span className="btn-text">Enlarge</span>
+      </div>
+
+      <Modal
+        className="tableau-fullscreen"
+        onClose={closeModal}
+        onOpen={() => setOpen(true)}
+        open={open}
+      >
+        <Modal.Content>
+          <TableauBlockView
+            {...props}
+            data={{ url: tableau_url, hideToolbar: true }}
+          ></TableauBlockView>
+        </Modal.Content>
+
+        <Modal.Actions>
+          <Button primary onClick={closeModal}>
+            Close
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+export default TableauFullscreen;

src/DownloadExtras/TableauShare.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Popup, Tab, Button, Menu, Input } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import useCopyToClipboard from '../downloadHelpers/downloadHelpers';
+
+import shareSVG from '@plone/volto/icons/share.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+
+import cx from 'classnames';
+
+const TableauShare = (props) => {
+  const tableau_url = props.data.url;
+
+  const CopyUrlButton = ({ 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', {
+          'green-button': copyUrlStatus === 'copied',
+        })}
+      >
+        {buttonText}
+      </Button>
+    );
+  };
+
+  const panes = [
+    {
+      menuItem: (
+        <Menu.Item key="location">
+          <span className="nav-dot">
+            <Icon name={linkSVG} size="24px" />
+          </span>
+          <span className="nav-dot-title">URL</span>
+        </Menu.Item>
+      ),
+      render: () => (
+        <Tab.Pane>
+          <Input defaultValue={tableau_url} />
+          <CopyUrlButton url={tableau_url} buttonText="Copy sharing URL" />
+        </Tab.Pane>
+      ),
+    },
+  ];
+
+  return (
+    <Popup
+      basic
+      className="tableau-share-dialog"
+      position="top center"
+      on="click"
+      trigger={
+        <div className="toolbar-button-wrapper">
+          <Button className="toolbar-button" title="Share">
+            <Icon name={shareSVG} size="26px" />
+          </Button>
+          <span className="btn-text">Share</span>
+        </div>
+      }
+    >
+      <Popup.Header>Share Visualization</Popup.Header>
+      <Popup.Content>
+        <Tab
+          menu={{ secondary: true, pointing: true, fluid: true }}
+          panes={panes}
+        />
+      </Popup.Content>
+    </Popup>
+  );
+};
+
+export default TableauShare;