@eeacms/volto-tableau 3.0.3 → 3.0.5

package/CHANGELOG.md

@@ -4,6 +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).
 
+### [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
+
+- Fix lint issues [dana-cfc4 - [`9bbf908`](https://github.com/eea/volto-tableau/commit/9bbf908195a9e90c606ebc87042ae3c7a44e7973)]
+- Add available fields, remove default version, manage no version selected [dana-cfc4 - [`66e510e`](https://github.com/eea/volto-tableau/commit/66e510e5f2e47e049e157ab046d0499f14b8f700)]
 ### [3.0.3](https://github.com/eea/volto-tableau/compare/3.0.2...3.0.3) - 17 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.3",
+  "version": "3.0.5",
   "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,35 +36,28 @@ const View = (props) => {
       <PrivacyProtection data={data} {...props}>
         {data?.vis_url ? (
           <>
-            <div className="tableau-block">
-              {props.mode === 'edit' ? (
-                <div className="tableau-info">
-                  <h3 className="tableau-version">
-                    == Tableau{' '}
-                    {tableau_visualization?.general?.version || '2.8.0'} loaded
-                    ==
-                  </h3>
-                </div>
-              ) : (
-                ''
-              )}
-              <ConnectedTableau
-                {...props.tableau_visualization}
-                id={props.id}
-                {...props}
-              />
-            </div>
+            {tableau_visualization?.general?.url ? (
+              <>
+                <ConnectedTableau
+                  {...props.tableau_visualization}
+                  id={props.id}
+                  {...props}
+                />
 
-            {show_sources &&
-            data_provenance &&
-            data_provenance?.data?.data_provenance &&
-            tableau_visualization ? (
-              <Sources sources={data_provenance.data.data_provenance} />
-            ) : show_sources ? (
-              <div>Data provenance is not set in the visualization</div>
-            ) : (
-              ''
-            )}
+                {show_sources &&
+                data_provenance &&
+                data_provenance?.data?.data_provenance &&
+                tableau_visualization ? (
+                  <Sources sources={data_provenance.data.data_provenance} />
+                ) : show_sources ? (
+                  <div>Data provenance is not set in the visualization</div>
+                ) : (
+                  ''
+                )}
+              </>
+            ) : !tableau_visualization?.general?.url ? (
+              <div>Url 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/CustomWidgets/UrlParamsWidget.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import '@eeacms/volto-tableau/less/tableau.less';
+
+const UrlParamsWidget = () => {
+  const fields = [
+    'embed',
+    'isGuestRedirectFromVizportal',
+    'showShareOptions',
+    'jsdebug',
+    'sheetname',
+    'display_count',
+    'showVizHome',
+    'origin',
+    'device',
+  ];
+
+  return (
+    <div className="availableFieldsContainer">
+      <p className="availableFieldsTitle">Available Fields:</p>
+      {fields.map((field) => (
+        <p className="availableFields">
+          <strong>{field}</strong>
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default UrlParamsWidget;

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

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);
@@ -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,8 +34,6 @@ const View = (props) => {
     description = null,
     autoScale = false,
   } = data;
-  const version =
-    props.data.version || config.settings.tableauVersion || '2.8.0';
   const device = getDevice(config, screen.page?.width || Infinity);
   const breakpointUrl = breakpointUrls.filter(
     (breakpoint) => breakpoint.device === device,
@@ -67,33 +65,33 @@ const View = (props) => {
 
   return mounted ? (
     <div className="tableau-block">
-      {props.mode === 'edit' ? (
-        <div className="tableau-info">
-          <h3 className="tableau-version">== Tableau {version} loaded ==</h3>
-          {!props.data.url ? <p className="tableau-error">URL required</p> : ''}
-          {error ? <p className="tableau-error">{error}</p> : ''}
-        </div>
-      ) : (
-        ''
-      )}
+      <div className="tableau-info">
+        {loaded && url && props.mode === 'edit' ? (
+          <h3 className="tableau-version">== Tableau ==</h3>
+        ) : null}
+        {!url ? <p className="tableau-error">URL required</p> : ''}
+        {error ? <p className="tableau-error">{error}</p> : ''}
+      </div>
+
       {loaded && title ? <h3 className="tableau-title">{title}</h3> : ''}
       {loaded && description ? (
         <p className="tableau-description">{description}</p>
       ) : (
         ''
       )}
-      <Tableau
-        {...props}
-        canUpdateUrl={!breakpointUrl}
-        extraFilters={extraFilters}
-        extraOptions={{ device: autoScale ? 'desktop' : device }}
-        error={error}
-        loaded={loaded}
-        setError={setError}
-        setLoaded={setLoaded}
-        version={version}
-        url={url}
-      />
+      {url ? (
+        <Tableau
+          {...props}
+          canUpdateUrl={!breakpointUrl}
+          extraFilters={extraFilters}
+          extraOptions={{ device: autoScale ? 'desktop' : device }}
+          error={error}
+          loaded={loaded}
+          setError={setError}
+          setLoaded={setLoaded}
+          url={url}
+        />
+      ) : null}
     </div>
   ) : (
     ''

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 || '2.8.0',
-    },
     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

@@ -23,19 +23,18 @@ const VisualizationView = (props) => {
   };
   return (
     <div>
-      {!tableau_visualization_data.general?.url || tableauError ? (
+      {!tableau_visualization_data?.general?.url || tableauError ? (
         <TableauNotDisplayed />
       ) : (
-        ''
+        <TableauView
+          setTableauError={setTableauError}
+          data={{
+            ...tableau_visualization_data.general,
+            ...tableau_visualization_data.options,
+            ...tableau_visualization_data.extraOptions,
+          }}
+        />
       )}
-      <TableauView
-        setTableauError={setTableauError}
-        data={{
-          ...tableau_visualization_data.general,
-          ...tableau_visualization_data.options,
-          ...tableau_visualization_data.extraOptions,
-        }}
-      />
     </div>
   );
 };

package/src/Widgets/VisualizationWidget.jsx

@@ -53,14 +53,6 @@ const VisualizationWidget = (props) => {
   let schema = Schema(config);
 
   React.useEffect(() => {
-    if (!intValue?.general || !intValue?.general?.version) {
-      setIntValue({
-        ...intValue,
-        general: {
-          version: '2.8.0',
-        },
-      });
-    }
     if (!intValue?.options) {
       setIntValue({
         ...intValue,
@@ -73,7 +65,7 @@ const VisualizationWidget = (props) => {
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [intValue]);
+  }, []);
 
   return (
     <FormFieldWrapper {...props}>

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 || '2.8.0',
-      },
-      url: {
-        title: 'Url',
-        type: 'textarea',
-      },
+  properties: {
+    url: {
+      title: 'Url',
+      type: 'textarea',
     },
-    required: ['url', 'version'],
-  };
+  },
+  required: ['url'],
 };
 
 const optionsSchema = {
@@ -92,7 +72,11 @@ const optionsSchema = {
 const urlParametersSchema = {
   title: 'Parameter',
   fieldsets: [
-    { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['field', 'urlParam'],
+    },
   ],
   properties: {
     field: {
@@ -139,7 +123,7 @@ const extraOptionsSchema = (config) => {
       {
         id: 'default',
         title: 'Extra Options Data',
-        fields: ['urlParameters', 'breakpointUrls'],
+        fields: ['urlParameters', 'availableFields', 'breakpointUrls'],
       },
     ],
 
@@ -150,6 +134,10 @@ const extraOptionsSchema = (config) => {
         schema: urlParametersSchema,
         description: 'Set a list of url parameters to filter the tableau',
       },
+      availableFields: {
+        title: 'Available Fields:',
+        widget: 'url_params_widget',
+      },
       breakpointUrls: {
         title: 'Breakpoint urls',
         widget: 'object_list',
@@ -178,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;

package/src/index.js

@@ -5,6 +5,7 @@ import EmbedTableauView from './Blocks/EmbedEEATableauBlock/View';
 import EmbedTableauEdit from './Blocks/EmbedEEATableauBlock/Edit';
 import { VisualizationView } from './Views';
 import { VisualizationWidget } from './Widgets';
+import UrlParamsWidget from './CustomWidgets/UrlParamsWidget';
 
 import tableauStore from './store';
 
@@ -72,6 +73,7 @@ const applyConfig = (config) => {
 
   config.views.contentTypesViews.tableau_visualization = VisualizationView;
   config.widgets.id.tableau_visualization_data = VisualizationWidget;
+  config.widgets.widget.url_params_widget = UrlParamsWidget;
 
   return config;
 };

package/src/less/tableau.less

@@ -108,4 +108,20 @@
   }
 }
 
-.loadAddonOverrides();
+.availableFieldsContainer {
+  padding: 0 5px 5px 0;
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.availableFieldsTitle {
+  color: darkgray;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.availableFields {
+  padding: 0 5px;
+  font-size: 12px;
+}
+
+.loadAddonVariables();