@eeacms/volto-tableau 3.0.8 → 4.1.0

package/src/less/tableau.less

@@ -6,41 +6,42 @@
 
 .loadAddonVariables();
 
-.tableau-block {
-  .tableau-info {
-    h3.tableau-version {
-      display: flex;
-      height: 75px;
-      align-items: center;
-      justify-content: center;
-      background-color: #f4f4f1;
-      color: @tableauTitleColor;
-    }
+@keyframes spin {
+  0% {
+    background-position: 0 0;
+  }
 
-    p.tableau-error {
-      color: @tableauErrorColor;
-      font-weight: bold;
-    }
+  100% {
+    background-position: 50px 50px;
   }
+}
 
-  h3.tableau-title {
-    margin: @tableauTitleMargin;
-    color: @tableauTitleColor;
+.tableau-wrapper {
+  padding: @tableauWrapperPadding;
+  margin: @tableauWrapperMargin;
+  background-color: @tableauWrapperBackground;
+
+  .tableau-debug {
+    margin: 0 auto 1rem auto;
+
+    .tableau-version .version {
+      color: @secondaryColor;
+    }
   }
 
-  p.tableau-description {
-    margin: @tableauDescriptionMargin;
-    color: @tableauDescriptionColor;
+  .tableau-info {
+    margin: 0 auto;
   }
 
   .tableau {
-    width: 100%;
+    margin-bottom: 1rem;
 
-    &:not(.tableau-scale) {
-      iframe {
-        width: @tableauIframeWidth;
-        min-width: @tableauMinWidth;
-      }
+    &:not(.tableau-autoscale) {
+      overflow: auto;
+    }
+
+    &.tableau-autoscale {
+      overflow: hidden;
     }
 
     iframe {
@@ -51,77 +52,178 @@
       transform-origin: top left;
     }
   }
-}
-
-.not_displayed_tableau {
-  width: 100%;
-  min-width: 633px;
-  height: 100%;
-  min-height: 200px;
-  background-color: #ebebeb;
-}
-
-.tableau-block {
-  .tableau-info {
-    p.tableau-error {
-      padding: 10px;
-    }
-  }
 
   .tableau-loader {
     display: flex;
     overflow: hidden;
     width: 100%;
-    height: 100%;
+    height: auto;
     align-items: center;
     justify-content: center;
-    margin: auto;
-    animation: anim 1s linear infinite;
+    margin: 0 auto 1rem auto;
+    animation: spin 1s linear infinite;
     background-image: linear-gradient(
       -45deg,
-      #5ac5f1 25%,
-      #96bbde 25%,
-      #96bbde 50%,
-      #5ac5f1 50%,
-      #5ac5f1 75%,
-      #96bbde 75%
+      @primaryColor 25%,
+      @secondaryColor 25%,
+      @secondaryColor 50%,
+      @primaryColor 50%,
+      @primaryColor 75%,
+      @secondaryColor 75%
     );
     background-size: 100px 100px;
     border-radius: 5px;
+
+    span {
+      margin: 6px auto;
+      color: white;
+      font-weight: bold;
+      text-align: center;
+    }
+  }
+
+  .tableau-error {
+    color: @errorTextColor;
+  }
+
+  .reload-tableau {
+    position: absolute;
+    right: 1rem;
+  }
+
+  .json-snippet {
+    .key {
+      color: @secondaryColor;
+    }
+  }
+
+  .important-note {
+    color: @secondaryColor;
+
+    .clear-filter-button {
+      padding: 0;
+      border: none;
+      margin: 0;
+      background-color: transparent;
+      color: inherit;
+      cursor: pointer;
+      text-decoration: underline;
+
+      &:hover {
+        color: @primaryColor;
+      }
+    }
   }
 }
 
-.tableau-loader span {
-  margin: 6px auto;
-  color: white;
+// ========= Sources ==========
+
+.tableau-wrapper .tableau-info {
+  display: flex;
+  align-items: center;
+
+  > * {
+    padding: 0 0.5rem;
+    border-collapse: collapse;
+  }
+
+  > *:first-child {
+    padding-left: 0;
+  }
+
+  > *:last-child {
+    padding-right: 0;
+  }
+
+  > *:not(:last-child) {
+    border-right: 2px solid @textColor;
+  }
+}
+
+.embed-sources-header {
+  cursor: pointer;
+}
+
+.tableau-download-button,
+.tableau-share-button,
+.tableau-sources-button {
+  display: inline-flex;
+  align-items: center;
+  padding-bottom: 3px;
+  border: none;
+  background-color: transparent;
+  color: @textColor;
+  cursor: pointer;
   font-weight: bold;
-  text-align: center;
+
+  .icon {
+    margin-left: 0.5rem;
+  }
+
+  &:hover {
+    color: @secondaryColor;
+  }
+
+  &.expanded {
+    padding-bottom: 0;
+    border-bottom: 3px solid @secondaryColor;
+    color: @secondaryColor;
+  }
 }
 
-@keyframes anim {
-  0% {
-    background-position: 0 0;
+#tableau-sources-popup,
+#tableau-download-popup {
+  .ui.popup {
+    min-width: 600px;
+    background-color: #f9f9f9;
+    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;
+    }
   }
 
-  100% {
-    background-position: 50px 50px;
+  .sources-list {
+    margin: 0;
+    list-style: decimal inside;
+    padding-inline-start: 0;
+  }
+
+  @media screen and (max-width: @largestMobileScreen) {
+    .ui.popup {
+      min-width: 300px;
+    }
   }
 }
 
-.availableFieldsContainer {
-  padding: 0 5px 5px 0;
-  border-bottom: 1px solid #d9d9d9;
+#tableau-download-popup {
+  .ui.popup {
+    min-width: 460px;
+    text-align: center;
+  }
 }
 
-.availableFieldsTitle {
-  color: darkgray;
-  font-size: 13px;
-  font-weight: bold;
+@media print {
+  .tableau-download-container,
+  .tableau-sources-container,
+  .tableau-share-container,
+  #tableau-sources-popup {
+    display: none;
+  }
 }
 
-.availableFields {
-  padding: 0 5px;
-  font-size: 12px;
+#tableau-editor-modal {
+  width: 90vw !important;
+  height: calc(80vh - 10em) !important;
 }
 
 .loadAddonVariables();

package/src/less/tableau.variables

@@ -1,14 +1,8 @@
-@tableauTitleColor: #4296b2;
-@tableauTitleMargin: 0 0 1rem 0;
+@tableauWrapperBackground : #f5f5f5;
+@tableauWrapperPadding    : 1rem;
+@tableauWrapperMargin     : 0 0 1rem 0;
 
-@tableauDescriptionColor: #000;
-@tableauDescriptionMargin: 0 0 1rem 0;
-
-@tableauErrorColor: #E9776D;
-
-@tableauIframeWidth: 100% !important;
-@tableauMinWidth: auto;
-@tableauIframePadding: 0;
-@tableauIframeMargin: 0 0 1rem 0;
-@tableauIframeBorder: none;
-@tableauIframeBorderRadius: 0;
+@tableauIframePadding       : 0;
+@tableauIframeMargin        : 0 auto 1rem auto;
+@tableauIframeBorder        : none;
+@tableauIframeBorderRadius  : 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;