@eeacms/volto-tableau 3.0.8 → 4.0.0

package/src/Blocks/EmbedEEATableauBlock/Edit.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-import { SidebarPortal } from '@plone/volto/components';
-import { getContent } from '@plone/volto/actions';
-import View from './View';
-import Schema from './schema';
-
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-const Edit = (props) => {
-  const { block, onChangeBlock, id } = props;
-  const data = React.useMemo(() => props.data || {}, [props.data]);
-  const schema = React.useMemo(() => Schema(props), [props]);
-
-  React.useEffect(() => {
-    if (!Object.hasOwn(data, 'show_sources')) {
-      onChangeBlock(block, {
-        ...data,
-        show_sources: true,
-      });
-    }
-  }, [block, data, onChangeBlock]);
-
-  return (
-    <React.Fragment>
-      <View {...props} data={data} id={id} mode="edit" />
-      <SidebarPortal selected={props.selected}>
-        <BlockDataForm
-          block={block}
-          title={schema.title}
-          schema={schema}
-          onChangeField={(id, value) => {
-            props.onChangeBlock(block, {
-              ...data,
-              [id]: value,
-            });
-          }}
-          formData={data}
-        />
-      </SidebarPortal>
-    </React.Fragment>
-  );
-};
-
-export default compose(
-  connect(
-    (state, props) => ({
-      block_data: state.content.data,
-      data_provenance: state.content.subrequests?.[props.id]?.data_provenance,
-    }),
-    {
-      getContent,
-    },
-  ),
-)(React.memo(Edit));

package/src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import ConnectedTableau from '../../ConnectedTableau/ConnectedTableau';
-import { Sources } from '../../Sources';
-import { PrivacyProtection } from '@eeacms/volto-embed';
-
-import { getContent } from '@plone/volto/actions';
-
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-const View = (props) => {
-  const { data_provenance, tableau_visualization } = props || {};
-  const data = React.useMemo(() => props.data || {}, [props.data]);
-  const { vis_url = '' } = data;
-  const show_sources = data?.show_sources ?? false;
-
-  React.useEffect(() => {
-    if (vis_url) {
-      props.getContent(vis_url, null, props.id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vis_url]);
-
-  return (
-    <div className="embed-container">
-      <PrivacyProtection
-        {...props}
-        data={{ ...data, url: tableau_visualization?.general?.url }}
-      >
-        {data?.vis_url ? (
-          <>
-            {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>
-                ) : (
-                  ''
-                )}
-              </>
-            ) : !tableau_visualization?.general?.url ? (
-              <div>Url is not set in the visualization</div>
-            ) : null}
-          </>
-        ) : (
-          <div>Please select a visualization from block editor.</div>
-        )}
-      </PrivacyProtection>
-    </div>
-  );
-};
-
-export default compose(
-  connect(
-    (state, props) => ({
-      data_provenance: state.content.subrequests?.[props.id],
-      tableau_visualization:
-        state.content.subrequests?.[props.id]?.data?.tableau_visualization_data,
-    }),
-    {
-      getContent,
-    },
-  ),
-)(React.memo(View));

package/src/ConnectedTableau/ConnectedTableau.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import Tableau from '@eeacms/volto-tableau/Tableau/View';
-
-const ConnectedTableau = (props) => {
-  const [error, setError] = React.useState(null);
-  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}
-        setError={setError}
-        setLoaded={setLoaded}
-        data={{ ...props?.general, ...props?.options, ...props?.extraOptions }}
-        url={props?.general?.url}
-        {...props}
-      />
-    </div>
-  );
-};
-
-export default ConnectedTableau;

package/src/CustomWidgets/UrlParamsWidget.jsx

@@ -1,29 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,152 +0,0 @@
-.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

@@ -1,50 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-import React from 'react';
-import { UniversalLink, Icon } from '@plone/volto/components';
-
-import rightKeySVG from '@plone/volto/icons/right-key.svg';
-import downKeySVG from '@plone/volto/icons/down-key.svg';
-
-import './style.css';
-
-const SourcesWidget = ({ sources }) => {
-  const [expand, setExpand] = React.useState(true);
-  return (
-    <div>
-      <a className="embed-sources-header" onClick={() => setExpand(!expand)}>
-        <h3>
-          <Icon
-            name={expand ? downKeySVG : rightKeySVG}
-            title={expand ? 'Collapse' : 'Expand'}
-            size="17px"
-          />
-          Sources:
-        </h3>
-      </a>
-      {expand && (
-        <ul>
-          {sources &&
-            sources.data &&
-            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>
-  );
-};
-
-export default SourcesWidget;

package/src/Sources/index.js

@@ -1,3 +0,0 @@
-import Sources from './Sources';
-
-export { Sources };

package/src/Sources/style.css

@@ -1,7 +0,0 @@
-.embed-sources-header {
-  cursor: pointer;
-}
-
-.embed-sources-param-description {
-  margin-left: 5px;
-}