@eeacms/volto-tableau 5.0.0 → 5.0.2

package/src/Utils/FigureNote/FigureNote.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import cx from 'classnames';
+import { Popup } from 'semantic-ui-react';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
+import { isArray } from 'lodash';
+
+export const serializeText = (note) => {
+  if (!serializeNodesToText(note))
+    return <p>There are no notes set for this visualization</p>;
+  return isArray(note) ? serializeNodes(note) : note;
+};
+
+const FigureNote = ({ note = [] }) => {
+  const [expanded, setExpanded] = React.useState(false);
+
+  return (
+    <div className="tableau-note-container">
+      <Popup
+        position="bottom left"
+        popper={{ id: 'tableau-note-popup' }}
+        trigger={
+          <button className={cx('tableau-note-button', { expanded })}>
+            Note
+          </button>
+        }
+        on="click"
+        onClose={() => {
+          setExpanded(false);
+        }}
+        onOpen={() => {
+          setExpanded(true);
+        }}
+      >
+        <Popup.Content>{serializeText(note)}</Popup.Content>
+      </Popup>
+    </div>
+  );
+};
+
+export default FigureNote;

package/src/Utils/FigureNote/FigureNote.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import FigureNote from './FigureNote';
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+const slateEditor = require('@plone/volto-slate/editor/render');
+slateEditor.serializeNodes = jest.fn();
+
+jest.mock('@plone/volto-slate/editor/render', () => ({
+  serializeNodesToText: ({ note = [] }) => note,
+}));
+
+describe('FigureNote', () => {
+  const note = [];
+
+  it('should render the component', () => {
+    const { container } = render(<FigureNote note={note} />);
+    expect(
+      container.querySelector('.tableau-note-container'),
+    ).toBeInTheDocument();
+  });
+});

package/src/Utils/MoreInfoLink/MoreInfoLink.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import cx from 'classnames';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+const MoreInfoLink = ({ contentTypeLink }) => {
+  return (
+    <Link href={contentTypeLink}>
+      <button className={cx('tableau-more-info-button')}>
+        More info <i class="ri-external-link-line"></i>
+      </button>
+    </Link>
+  );
+};
+
+export default MoreInfoLink;

package/src/Utils/MoreInfoLink/MoreInfoLink.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import MoreInfoLink from './MoreInfoLink';
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('@plone/volto/components', () => ({
+  UniversalLink: ({ children }) => <div>{children}</div>,
+}));
+
+describe('MoreInfoLink', () => {
+  const contentTypeLink = '/tableau-content-type';
+
+  it('should render the component', () => {
+    const { container } = render(
+      <MoreInfoLink contentTypeLink={contentTypeLink} />,
+    );
+    expect(
+      container.querySelector('.tableau-more-info-button'),
+    ).toBeInTheDocument();
+  });
+});

package/src/Utils/Share/Share.jsx

@@ -1,20 +1,68 @@
 import React from 'react';
-import { Icon } from '@plone/volto/components';
-import shareSVG from '@plone/volto/icons/share.svg';
+import { Popup, Input, Button } from 'semantic-ui-react';
+import { useCopyToClipboard } from '../../helpers.js';
+import cx from 'classnames';
 
-const Share = ({ viz }) => {
-  return (
-    <div className="tableau-share-container">
-      <button
-        className="tableau-share-button"
-        onClick={() => {
-          viz.showShareDialog();
-        }}
+const Share = ({ contentTypeLink = '' }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const popupRef = React.useRef();
+
+  const CopyUrlButton = ({ className, 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', className)}
       >
-        <span>Share</span>
-        <Icon name={shareSVG} size="24px" />
-      </button>
-    </div>
+        {buttonText}
+      </Button>
+    );
+  };
+
+  return (
+    <Popup
+      popper={{ id: 'tableau-share-popup' }}
+      trigger={
+        <div className="tableau-share-container">
+          <button className={cx('tableau-share-button', { expanded })}>
+            <span>Share</span>
+            <i class="ri-share-fill"></i>
+          </button>
+        </div>
+      }
+      position="bottom left"
+      on="click"
+      onClose={() => {
+        setExpanded(false);
+      }}
+      onOpen={() => {
+        setExpanded(true);
+      }}
+      ref={popupRef}
+    >
+      <div>
+        <span className="tableau-share-popup-text">Copy link</span>
+        <div className="tableau-share-popup-container">
+          <Input
+            className="tableau-share-link"
+            defaultValue={contentTypeLink}
+          />
+          <CopyUrlButton
+            className="tableau-copy-button"
+            url={contentTypeLink}
+            buttonText="Copy"
+          />
+        </div>
+      </div>
+    </Popup>
   );
 };
 

package/src/Utils/Sources/Sources.jsx

@@ -14,11 +14,12 @@ const Source = ({ source }) => {
   return (
     <>
       <Link className="embed-sources-param-title" href={source.link}>
-        {source.title},{' '}
-        <span className="embed-sources-param-description">
-          {source.organisation}
-        </span>
+        {source.title}
       </Link>
+      ,
+      <span className="embed-sources-param-description">
+        {source.organisation}
+      </span>
     </>
   );
 };

package/src/Views/VisualizationView.jsx

@@ -7,7 +7,7 @@ import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 
 const VisualizationView = (props) => {
   const { content = {} } = props;
-  const { tableau_visualization = {}, data_provenance = {} } = content;
+  const { tableau_visualization = {} } = content;
 
   return (
     <Container id="page-document">
@@ -17,11 +17,8 @@ const VisualizationView = (props) => {
         <Tableau
           data={{
             ...tableau_visualization,
-            with_sources: true,
             with_download: true,
-            with_share: true,
           }}
-          sources={data_provenance.data || []}
           breakpoints={
             config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
           }

package/src/Widgets/VisualizationViewWidget.jsx

@@ -7,11 +7,8 @@ export default function VisualizationViewWidget(props) {
     <Tableau
       data={{
         ...value,
-        with_sources: true,
         with_download: true,
-        with_share: true,
       }}
-      sources={[]}
       breakpoints={
         config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
       }

package/src/helpers.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const loadTableauScript = (callback, version) => {
   if (!__CLIENT__) return;
   const source = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
@@ -32,3 +34,25 @@ export const loadTableauScript = (callback, version) => {
 // https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js
 // https://public.tableau.com/javascripts/api/tableau-2.1.2.min.js
 // https://public.tableau.com/javascripts/api/tableau-2.0.3.min.js
+
+export 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];
+};

package/src/less/tableau.less

@@ -19,7 +19,6 @@
 .tableau-wrapper {
   padding: @tableauWrapperPadding;
   margin: @tableauWrapperMargin;
-  background-color: @tableauWrapperBackground;
 
   .tableau-debug {
     margin: 0 auto 1rem auto;
@@ -29,10 +28,6 @@
     }
   }
 
-  .tableau-info {
-    margin: 0 auto;
-  }
-
   .tableau {
     margin-bottom: 1rem;
 
@@ -118,25 +113,47 @@
 
 // ========= Sources ==========
 
-.tableau-wrapper .tableau-info {
+.tableau-wrapper .visualization-info-container {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-
-  > * {
-    padding: 0 0.5rem;
-    border-collapse: collapse;
-  }
+  justify-content: space-between;
+  gap: 1.2rem;
 
   > *:first-child {
-    padding-left: 0;
+    margin-left: auto;
+
+    > *:not(:last-child) {
+      border-right: 1px solid @textColor;
+    }
   }
 
   > *:last-child {
-    padding-right: 0;
+    justify-content: flex-end;
   }
 
-  > *:not(:last-child) {
-    border-right: 2px solid @textColor;
+  .visualization-info {
+    display: flex;
+    flex-grow: 0.5;
+    align-items: center;
+
+    > * {
+      padding: 0 0.5rem;
+      border-collapse: collapse;
+    }
+
+    > *:first-child {
+      padding-left: 0;
+    }
+
+    > *:last-child {
+      padding-right: 0;
+      margin-right: 0;
+
+      &.tableau-download-container {
+        margin-left: auto;
+      }
+    }
   }
 }
 
@@ -144,9 +161,52 @@
   cursor: pointer;
 }
 
+#tableau-share-popup {
+  .ui.popup {
+    padding-right: 15px;
+    padding-left: 0;
+  }
+
+  .tableau-share-popup-text {
+    margin-left: 7px;
+  }
+}
+
+.tableau-share-popup-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+
+  .tableau-share-link {
+    input {
+      padding-left: 7px !important;
+      border-left: 0 !important;
+
+      &:focus {
+        outline: 1px solid var(--focus-visible, #0083e0);
+      }
+    }
+  }
+
+  .tableau-copy-button {
+    max-width: 80px;
+    padding: 10px 17px !important;
+    border: 1px solid black !important;
+    margin: 0 !important;
+    background-color: #4472c4 !important;
+    border-radius: 7px !important;
+  }
+
+  @media screen and (max-width: @largestMobileScreen) {
+    flex-direction: column;
+  }
+}
+
+.tableau-note-button,
+.tableau-more-info-button,
 .tableau-download-button,
-.tableau-share-button,
-.tableau-sources-button {
+.tableau-sources-button,
+.tableau-share-button {
   display: inline-flex;
   align-items: center;
   padding-bottom: 3px;
@@ -154,7 +214,6 @@
   background-color: transparent;
   color: @textColor;
   cursor: pointer;
-  font-weight: bold;
 
   .icon {
     margin-left: 0.5rem;
@@ -171,24 +230,25 @@
   }
 }
 
+.tableau-more-info-button,
+.tableau-download-button,
+.tableau-share-button {
+  gap: 0.25rem;
+
+  i {
+    margin-bottom: 1px;
+  }
+}
+
+#tableau-note-popup,
 #tableau-sources-popup,
 #tableau-download-popup {
   .ui.popup {
-    min-width: 600px;
-    background-color: #f9f9f9;
+    background-color: @grey-1;
     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;
+      background-color: @grey-1;
     }
   }
 
@@ -198,24 +258,72 @@
     padding-inline-start: 0;
   }
 
-  @media screen and (max-width: @largestMobileScreen) {
+  .embed-sources-param-description {
+    margin-left: 5px;
+  }
+
+  @media screen and (min-width: @largestMobileScreen) {
     .ui.popup {
-      min-width: 300px;
+      max-width: 600px;
     }
   }
 }
 
 #tableau-download-popup {
-  .ui.popup {
-    min-width: 460px;
-    text-align: center;
+  ul.no-bullets {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+
+  .visualization-wrapper {
+    position: relative;
+
+    .visualization-info {
+      display: flex;
+      align-items: center;
+
+      > * {
+        padding: 0 0.5rem;
+        border-collapse: collapse;
+      }
+
+      > *:first-child {
+        padding-left: 0;
+      }
+
+      > *:last-child {
+        padding-right: 0;
+        margin-right: 0;
+
+        &.tableau-download-container {
+          margin-left: auto;
+        }
+      }
+
+      > *:not(:last-child) {
+        border-right: 2px solid @textColor;
+      }
+    }
+  }
+
+  .tableau-download-button.tableau-format-download {
+    padding: 0;
+    color: #679ad6;
+    font-weight: normal;
+
+    &:hover {
+      color: #164b7f;
+    }
   }
 }
 
 @media print {
   .tableau-download-container,
+  .tableau-note-container,
   .tableau-sources-container,
   .tableau-share-container,
+  #tableau-note-popup,
   #tableau-sources-popup {
     display: none;
   }

package/src/less/tableau.variables

@@ -5,4 +5,6 @@
 @tableauIframePadding       : 0;
 @tableauIframeMargin        : 0 auto 1rem auto;
 @tableauIframeBorder        : none;
-@tableauIframeBorderRadius  : 0;
+@tableauIframeBorderRadius  : 0;
+
+@grey-1                     : #f9f9f9;

package/.i18n.babel.config.js

@@ -1 +0,0 @@
-module.exports = require('@plone/volto/babel');