@eeacms/volto-tableau 3.0.4 → 3.0.6

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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).
 
+### [3.0.6](https://github.com/eea/volto-tableau/compare/3.0.5...3.0.6) - 30 January 2023
+
+### [3.0.5](https://github.com/eea/volto-tableau/compare/3.0.4...3.0.5) - 26 January 2023
+
+#### :hammer_and_wrench: Others
+
+- Add download options [dana-cfc4 - [`47031b2`](https://github.com/eea/volto-tableau/commit/47031b277cbde58a626076eef9d4fdb42c9400e2)]
+- Remove version chooser [dana-cfc4 - [`34ceaf9`](https://github.com/eea/volto-tableau/commit/34ceaf9a89ea0fcc5b001cc86fd3af709629693a)]
+- Remove height setting, solve no source link bug [dana-cfc4 - [`03216e3`](https://github.com/eea/volto-tableau/commit/03216e3d159ef9cf1b71702a3a409ab41f3cd427)]
+- links to deps [Andrei Grigore - [`4cec1b2`](https://github.com/eea/volto-tableau/commit/4cec1b283a2cad800dbc9081caee2a03847060cd)]
+- Update README.md [dana-cfc4 - [`83e4e7a`](https://github.com/eea/volto-tableau/commit/83e4e7a94892caa42cb5bcc4cb02b923dca87379)]
+- Add privacy protection fields [dana-cfc4 - [`78cb29f`](https://github.com/eea/volto-tableau/commit/78cb29f29859aed7deaf18cb678bd8e689643883)]
 ### [3.0.4](https://github.com/eea/volto-tableau/compare/3.0.3...3.0.4) - 18 January 2023
 
 #### :hammer_and_wrench: Others

package/README.md

@@ -16,6 +16,10 @@
 
 [Volto](https://github.com/plone/volto) add-on
 
+## Tableau
+
+Registers a VisualizationView component for a content type named 'tableau_visualization'.
+
 ## Features
 
 Demo GIF
@@ -155,6 +159,23 @@ Generic command, does not automatically add the `beta` to version, but you can s
 
 > Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
 
+## Enable Sources
+
+https://github.com/eea/eea.coremetadata EEA Core Metadata addon is needed. 
+
+Sources (Data provenance) should be set on the visualization. To enable this, "EEA Core Metadata" should be checked as behavior on the visualization content-type.
+
+      controlpanel/dexterity-types/tableau_visualization
+
+After this, sources can be added from the visualization edit interface. "EEA core metadata" tab => "Add source"
+
+
+## Add a Tableau Visualization
+
+1. Add the corresponding content-type. Project should also contain https://github.com/eea/eea.api.dataconnector which hosts the content-type. 
+2. Fill in the mandatory fields
+3. "Tableau Widget" section => "Open Tableau Editor"
+4. Provide the necessary settings to create the visualization
 
 ## How to contribute
 

package/package.json

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

package/src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -36,26 +36,14 @@ const View = (props) => {
       <PrivacyProtection data={data} {...props}>
         {data?.vis_url ? (
           <>
-            {tableau_visualization?.general?.url &&
-            tableau_visualization?.general?.version ? (
+            {tableau_visualization?.general?.url ? (
               <>
-                <div className="tableau-block">
-                  {props.mode === 'edit' ? (
-                    <div className="tableau-info">
-                      <h3 className="tableau-version">
-                        == Tableau {tableau_visualization?.general?.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 &&
@@ -69,9 +57,7 @@ const View = (props) => {
               </>
             ) : !tableau_visualization?.general?.url ? (
               <div>Url is not set in the visualization</div>
-            ) : (
-              <div>Version is not set in the visualization</div>
-            )}
+            ) : null}
           </>
         ) : (
           <div>Please select a visualization from block editor.</div>

package/src/Blocks/EmbedEEATableauBlock/schema.js

@@ -1,3 +1,45 @@
+const ProtectionSchema = () => ({
+  title: 'Data Protection',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'privacy_statement',
+        'privacy_cookie_key',
+        'enabled',
+        'background_image',
+      ],
+    },
+  ],
+
+  properties: {
+    privacy_statement: {
+      title: 'Privacy statement',
+      description: 'Defined in template. Change only if necessary',
+      widget: 'slate_richtext',
+      className: 'slate-Widget',
+    },
+    privacy_cookie_key: {
+      title: 'Privacy cookie key',
+      description: 'Use default for Tableau, otherwise change',
+      defaultValue: 'tableau',
+    },
+    enabled: {
+      title: 'Data protection disclaimer enabled',
+      description: 'Enable/disable the privacy protection',
+      type: 'boolean',
+    },
+    background_image: {
+      title: 'Tableau preview image',
+      widget: 'file',
+    },
+  },
+
+  required: [],
+});
+
 const Schema = (props) => {
   return {
     title: 'Embed EEA Tableau',
@@ -5,7 +47,7 @@ const Schema = (props) => {
       {
         id: 'default',
         title: 'Default',
-        fields: ['vis_url', 'height', 'show_sources'],
+        fields: ['vis_url', 'show_sources', 'dataprotection'],
       },
     ],
     properties: {
@@ -13,15 +55,14 @@ const Schema = (props) => {
         widget: 'object_by_path',
         title: 'Visualization',
       },
-      height: {
-        title: 'Height',
-        type: 'number',
-        default: 450,
-      },
       show_sources: {
         title: 'Toggle sources',
         type: 'boolean',
       },
+      dataprotection: {
+        widget: 'object',
+        schema: ProtectionSchema(),
+      },
     },
 
     required: ['vis_url'],

package/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}
@@ -13,7 +20,6 @@ const ConnectedTableau = (props) => {
         setLoaded={setLoaded}
         data={{ ...props?.general, ...props?.options, ...props?.extraOptions }}
         url={props?.general?.url}
-        version={props?.general?.version}
         {...props}
       />
     </div>

package/src/DownloadExtras/TableauDownload.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Popup, Button, Modal, Dropdown } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import downloadSVG from '@plone/volto/icons/download.svg';
+
+const TableauDownload = (props) => {
+  const viz = props.viz || {};
+
+  const [open, setOpen] = React.useState(false);
+  const [
+    isSheetSelectorCsvVisible,
+    setIsSheetSelectorCsvVisible,
+  ] = React.useState(false);
+  const [
+    isSheetSelectorExcelVisible,
+    setIsSheetSelectorExcelVisible,
+  ] = React.useState(false);
+  const [availableSheets, setAvailableSheets] = React.useState([]);
+
+  const initializeDropdown = () => {
+    const sheets = viz
+      ?.getWorkbook()
+      ?.getActiveSheet()
+      ?.getWorksheets()
+      .map((sheet, index) => ({
+        key: index,
+        text: sheet.getName(),
+        value: sheet.getName(),
+      }));
+    setAvailableSheets(sheets);
+  };
+
+  const exportImage = () => {
+    setIsSheetSelectorCsvVisible(false);
+    setIsSheetSelectorExcelVisible(false);
+    viz.showExportImageDialog();
+  };
+
+  const exportToCSV = () => {
+    setIsSheetSelectorExcelVisible(false);
+    initializeDropdown();
+    setIsSheetSelectorCsvVisible(true);
+  };
+
+  const exportToExcel = () => {
+    setIsSheetSelectorCsvVisible(false);
+    initializeDropdown();
+    setIsSheetSelectorExcelVisible(true);
+  };
+
+  const handleSheetSelectionCsvChange = (e, data) => {
+    viz.showExportCrossTabDialog(data.value);
+  };
+
+  const handleSheetSelectionExcelChange = (e, data) => {
+    viz.exportCrossTabToExcel(data.value);
+  };
+
+  const hideDropdowns = () => {
+    setIsSheetSelectorCsvVisible(false);
+    setIsSheetSelectorExcelVisible(false);
+  };
+
+  return (
+    <>
+      <Popup
+        basic
+        className="tableau-download-dialog"
+        position="top center"
+        on="click"
+        trigger={
+          <div className="toolbar-button-wrapper">
+            <Button
+              className="toolbar-button"
+              title="Download"
+              onClick={hideDropdowns}
+            >
+              <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>
+          {isSheetSelectorCsvVisible ? (
+            <Dropdown
+              placeholder="Sheet"
+              selection
+              options={availableSheets}
+              onChange={handleSheetSelectionCsvChange}
+            />
+          ) : null}
+          <Button onClick={exportToExcel}>Excel</Button>
+          {isSheetSelectorExcelVisible ? (
+            <Dropdown
+              placeholder="Sheet"
+              selection
+              options={availableSheets}
+              onChange={handleSheetSelectionExcelChange}
+            />
+          ) : null}
+        </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;

package/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;

package/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;

package/src/DownloadExtras/style.less

@@ -0,0 +1,152 @@
+.dashboard-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  background-color: #f5f5f5;
+
+  .tableau-block {
+    position: relative;
+    display: flex;
+    flex: 1 1;
+    flex-direction: column;
+    padding: 1em 0.5em;
+  }
+
+  .toolbar-button {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    padding: 2px !important;
+    background-color: #ff421b !important;
+    border-radius: 3px !important;
+    color: white !important;
+
+    &:hover {
+      opacity: 0.6;
+    }
+
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin: 0 !important;
+      fill: #fff !important;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+.tableau-download-dialog {
+  max-width: 282px !important;
+
+  .header {
+    padding: 0.5em 0 !important;
+  }
+
+  button {
+    display: block;
+    width: 100%;
+    margin: 5px 0 !important;
+  }
+}
+
+.tableau-share-dialog {
+  min-width: 400px !important;
+
+  .ui.secondary.pointing.menu .item {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 25px;
+  }
+
+  .nav-dot-title {
+    margin-top: 5px;
+    font-size: 14px;
+  }
+
+  .ui.secondary.pointing.menu .active.item {
+    border-color: #09b;
+
+    .nav-dot-title {
+      font-weight: 500;
+    }
+
+    .nav-dot {
+      opacity: 1;
+    }
+  }
+
+  .nav-dot {
+    display: flex;
+    width: 37px;
+    height: 37px;
+    align-items: center;
+    justify-content: center;
+    margin: 8px auto;
+    background-color: #09b;
+    border-radius: 50%;
+    opacity: 0.6;
+
+    svg {
+      fill: #fff !important;
+    }
+  }
+
+  .ui.secondary.pointing.menu .active.item:hover {
+    border-color: #09b;
+  }
+
+  .ui.tab {
+    .ui.input {
+      display: block;
+      margin-bottom: 1em;
+
+      input {
+        width: 100%;
+      }
+    }
+
+    textarea {
+      display: block;
+      width: 100%;
+      height: 100px;
+      padding: 6px 12px;
+      border: 1px solid grey;
+      margin-bottom: 1.5em;
+      color: #696969;
+      font-family: 'Lucida Console', Monaco, monospace;
+      font-size: 13px;
+    }
+  }
+}
+
+.copy-button {
+  margin-top: 1rem !important;
+}
+
+.copy-button.green-button {
+  background-color: #269b65 !important;
+}
+
+.toolbar-button-wrapper {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+
+  .btn-text {
+    font-family: Roboto, Helvetica Neue, Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .ui.button.toolbar-button {
+    margin: 0 7px !important;
+  }
+}
+
+.tableau-icons {
+  display: flex;
+  flex-direction: row;
+}

package/src/Sources/Sources.jsx

@@ -28,17 +28,19 @@ const SourcesWidget = ({ sources }) => {
         <ul>
           {sources &&
             sources.data &&
-            sources.data.map((param, i) => (
-              <li key={i} className="embed-source-param">
-                <UniversalLink
-                  className="embed-sources-param-title"
-                  href={param.link}
-                >
-                  {param.title}
-                </UniversalLink>
-                , {param.organisation}
-              </li>
-            ))}
+            sources.data.map((param, i) =>
+              param.link ? (
+                <li key={i} className="embed-source-param">
+                  <UniversalLink
+                    className="embed-sources-param-title"
+                    href={param.link}
+                  >
+                    {param.title}
+                  </UniversalLink>
+                  , {param.organisation}
+                </li>
+              ) : null,
+            )}
         </ul>
       )}
     </div>

package/src/Tableau/View.jsx

@@ -6,6 +6,9 @@ import { Toast } from '@plone/volto/components';
 import { setTableauApi } from '@eeacms/volto-tableau/actions';
 import cx from 'classnames';
 import { loadTableauScript } from '../helpers';
+import TableauDownload from '../DownloadExtras/TableauDownload';
+import TableauShare from '../DownloadExtras/TableauShare';
+import '../DownloadExtras/style.less';
 
 const Tableau = (props) => {
   const ref = React.useRef(null);
@@ -23,7 +26,7 @@ const Tableau = (props) => {
     screen = {},
     setError = () => {},
     setLoaded = () => {},
-    version = '',
+    version = '2.8.0',
   } = props;
   const {
     autoScale = false,
@@ -212,23 +215,29 @@ const Tableau = (props) => {
               ''
             ) : (
               <div className="tableau-loader">
-                <span>
-                  {mode === 'edit'
-                    ? 'Loading...'
-                    : `Loading Tableau v${version}`}
-                </span>
+                <span>Loading...</span>
               </div>
             )}
           </>
         ) : (
           <div>No data present in that visualization.</div>
         )}
-        <div
-          className={cx('tableau', version, {
-            'tableau-scale': autoScale,
-          })}
-          ref={ref}
-        />
+        <div className="dashboard-wrapper">
+          <div className="tableau-block">
+            {viz ? (
+              <div className="tableau-icons">
+                <TableauDownload {...props} viz={viz} />
+                <TableauShare {...props} viz={viz} data={{ url: url }} />
+              </div>
+            ) : null}
+            <div
+              className={cx('tableau', version, {
+                'tableau-scale': autoScale,
+              })}
+              ref={ref}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );

package/src/TableauBlock/View.jsx

@@ -34,15 +34,12 @@ const View = (props) => {
     description = null,
     autoScale = false,
   } = data;
-  const version = props.data.version || config.settings.tableauVersion;
   const device = getDevice(config, screen.page?.width || Infinity);
   const breakpointUrl = breakpointUrls.filter(
     (breakpoint) => breakpoint.device === device,
   )[0]?.url;
   const url = breakpointUrl || data.url;
 
-  const displayCondition = url && version;
-
   React.useEffect(() => {
     setMounted(true);
     /* eslint-disable-next-line */
@@ -69,15 +66,10 @@ const View = (props) => {
   return mounted ? (
     <div className="tableau-block">
       <div className="tableau-info">
-        {displayCondition && props.mode === 'edit' ? (
-          <h3 className="tableau-version">== Tableau {version} loaded ==</h3>
+        {loaded && url && props.mode === 'edit' ? (
+          <h3 className="tableau-version">== Tableau ==</h3>
         ) : null}
         {!url ? <p className="tableau-error">URL required</p> : ''}
-        {url && !version ? (
-          <p className="tableau-error">Version required</p>
-        ) : (
-          ''
-        )}
         {error ? <p className="tableau-error">{error}</p> : ''}
       </div>
 
@@ -87,7 +79,7 @@ const View = (props) => {
       ) : (
         ''
       )}
-      {displayCondition ? (
+      {url ? (
         <Tableau
           {...props}
           canUpdateUrl={!breakpointUrl}
@@ -97,7 +89,6 @@ const View = (props) => {
           loaded={loaded}
           setError={setError}
           setLoaded={setLoaded}
-          version={version}
           url={url}
         />
       ) : null}

package/src/TableauBlock/schema.js

@@ -46,7 +46,7 @@ export default (config) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['version', 'url', 'title', 'description'],
+      fields: ['url', 'title', 'description'],
     },
     {
       id: 'options',
@@ -66,24 +66,6 @@ export default (config) => ({
     },
   ],
   properties: {
-    version: {
-      title: 'Version',
-      type: 'array',
-      choices: [
-        ...[
-          '2.8.0',
-          '2.7.0',
-          '2.6.0',
-          '2.5.0',
-          '2.4.0',
-          '2.3.0',
-          '2.2.2',
-          '2.1.2',
-          '2.0.3',
-        ].map((version) => [version, `tableau-${version}`]),
-      ],
-      default: config.settings.tableauVersion,
-    },
     url: {
       title: 'Url',
       widget: 'textarea',
@@ -138,5 +120,5 @@ export default (config) => ({
       description: 'Set different vizualization for specific breakpoint',
     },
   },
-  required: ['version', 'url'],
+  required: ['url'],
 });

package/src/Views/VisualizationView.jsx

@@ -12,8 +12,6 @@ const VisualizationView = (props) => {
         <div className="tableau-info">
           {!tableau_visualization_data.general?.url ? (
             <p className="tableau-error">URL required</p>
-          ) : !tableau_visualization_data.general?.version ? (
-            <p className="tableau-error">Version required</p>
           ) : tableauError ? (
             <p className="tableau-error">{tableauError}</p>
           ) : (
@@ -25,9 +23,7 @@ const VisualizationView = (props) => {
   };
   return (
     <div>
-      {!tableau_visualization_data?.general?.url ||
-      !tableau_visualization_data?.general?.version ||
-      tableauError ? (
+      {!tableau_visualization_data?.general?.url || tableauError ? (
         <TableauNotDisplayed />
       ) : (
         <TableauView

package/src/Widgets/VisualizationWidget.jsx

@@ -40,8 +40,6 @@ const VisualizationWidget = (props) => {
         <div className="tableau-info">
           {intValue && intValue.general && !intValue.general.url ? (
             <p className="tableau-error">URL required</p>
-          ) : intValue && intValue.general && !intValue.general.version ? (
-            <p className="tableau-error">Version required</p>
           ) : tableauError ? (
             <p className="tableau-error">{tableauError}</p>
           ) : (
@@ -55,15 +53,6 @@ const VisualizationWidget = (props) => {
   let schema = Schema(config);
 
   React.useEffect(() => {
-    if (!intValue?.general || !intValue?.general?.version) {
-      setIntValue({
-        ...intValue,
-        general: {
-          url: intValue?.general?.url,
-          version: '',
-        },
-      });
-    }
     if (!intValue?.options) {
       setIntValue({
         ...intValue,
@@ -118,9 +107,7 @@ const VisualizationWidget = (props) => {
                 />
               </Grid.Column>
               <Grid.Column mobile={12} tablet={12} computer={7}>
-                {(intValue &&
-                  intValue.general &&
-                  (!intValue.general.url || !intValue.general.version)) ||
+                {(intValue && intValue.general && !intValue.general.url) ||
                 tableauError ? (
                   <TableauNotDisplayed />
                 ) : (
@@ -152,9 +139,7 @@ const VisualizationWidget = (props) => {
           </Modal.Actions>
         </Modal>
       )}
-      {(intValue &&
-        intValue.general &&
-        (!intValue.general.url || !intValue.general.version)) ||
+      {(intValue && intValue.general && !intValue.general.url) ||
       tableauError ? (
         <TableauNotDisplayed />
       ) : (

package/src/Widgets/schema.js

@@ -1,41 +1,21 @@
-const generalSchema = (config) => {
-  return {
-    title: 'General',
+const generalSchema = {
+  title: 'General',
 
-    fieldsets: [
-      {
-        id: 'general',
-        title: 'General',
-        fields: ['version', 'url'],
-      },
-    ],
+  fieldsets: [
+    {
+      id: 'general',
+      title: 'General',
+      fields: ['url'],
+    },
+  ],
 
-    properties: {
-      version: {
-        title: 'Version',
-        type: 'array',
-        choices: [
-          ...[
-            '2.8.0',
-            '2.7.0',
-            '2.6.0',
-            '2.5.0',
-            '2.4.0',
-            '2.3.0',
-            '2.2.2',
-            '2.1.2',
-            '2.0.3',
-          ].map((version) => [version, `tableau-${version}`]),
-        ],
-        default: config.settings.tableauVersion,
-      },
-      url: {
-        title: 'Url',
-        type: 'textarea',
-      },
+  properties: {
+    url: {
+      title: 'Url',
+      type: 'textarea',
     },
-    required: ['url', 'version'],
-  };
+  },
+  required: ['url'],
 };
 
 const optionsSchema = {
@@ -186,7 +166,7 @@ export default (config) => {
         schemas: [
           {
             id: 'general',
-            schema: generalSchema(config),
+            schema: generalSchema,
           },
           {
             id: 'options',

package/src/downloadHelpers/downloadHelpers.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+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];
+};
+
+export default useCopyToClipboard;