@eeacms/volto-tableau 6.0.0 → 6.0.1

package/src/Tableau/Tableau.jsx

@@ -14,17 +14,21 @@ import isUndefined from 'lodash/isUndefined';
 import cx from 'classnames';
 import { Button } from 'semantic-ui-react';
 import { Toast, Icon } from '@plone/volto/components';
+import {
+  FigureNote,
+  Sources,
+  MoreInfo,
+  Share,
+} from '@eeacms/volto-embed/Toolbar';
 import { useTableau } from '@eeacms/volto-tableau/hooks';
-import JsonCodeSnippet from '@eeacms/volto-tableau/Utils/JsonCodeSnippet/JsonCodeSnippet';
-import FigureNote from '@eeacms/volto-tableau/Utils/FigureNote/FigureNote';
-import Sources from '@eeacms/volto-tableau/Utils/Sources/Sources';
-import MoreInfoLink from '@eeacms/volto-tableau/Utils/MoreInfoLink/MoreInfoLink';
-import Download from '@eeacms/volto-tableau/Utils/Download/Download';
-import Share from '@eeacms/volto-tableau/Utils/Share/Share';
+import { JsonCodeSnippet, Download } from '@eeacms/volto-tableau/Utils';
+
 import { getSheetnames, getActiveSheetname, getDevice } from './helpers';
 
 import resetSVG from '@plone/volto/icons/reset.svg';
 
+import '@eeacms/volto-embed/Toolbar/styles.less';
+
 const TableauDebug = ({ mode, data, vizState, url, version, clearData }) => {
   const { loaded, error } = vizState;
   const { filters = {}, parameters = {} } = data;
@@ -96,12 +100,12 @@ const Tableau = forwardRef((props, ref) => {
     toolbarPosition = 'Top',
     breakpointUrls = [],
     tableau_vis_url,
-    with_note,
-    with_sources,
-    with_more_info,
-    with_download,
-    with_share,
-    tableau_height = '700',
+    with_note = true,
+    with_sources = true,
+    with_more_info = true,
+    with_download = true,
+    with_share = true,
+    tableau_height,
   } = data;
   const device = useMemo(
     () => getDevice(breakpoints, screen.page?.width || Infinity),
@@ -412,25 +416,27 @@ const Tableau = forwardRef((props, ref) => {
         clearData={clearData}
       />
       <div
-        style={{ height: tableau_height + 'px' }}
+        style={{ height: tableau_height ? tableau_height + 'px' : '100%' }}
         className={cx('tableau', `tableau-${version}`, {
           'tableau-autoscale': autoScale,
         })}
         ref={vizEl}
       />
-      <div className="visualization-info-container">
-        <div className="visualization-info">
-          {with_note && loaded && <FigureNote note={figure_note || []} />}
-          {with_sources && loaded && <Sources sources={sources} />}
-          {with_more_info && loaded && (
-            <MoreInfoLink contentTypeLink={tableau_vis_url} />
-          )}
+      {loaded && (
+        <div className="visualization-toolbar">
+          <div className="left-col">
+            {with_note && <FigureNote note={figure_note || []} />}
+            {with_sources && <Sources sources={sources} />}
+            {with_more_info && <MoreInfo href={tableau_vis_url || data.url} />}
+          </div>
+          <div className="right-col">
+            {with_download && loaded && <Download viz={viz.current} />}
+            {with_share && loaded && (
+              <Share href={tableau_vis_url || data.url} />
+            )}
+          </div>
         </div>
-        <div className="visualization-info">
-          {with_download && loaded && <Download viz={viz.current} />}
-          {with_share && loaded && <Share contentTypeLink={tableau_vis_url} />}
-        </div>
-      </div>
+      )}
     </div>
   );
 });

package/src/Utils/{Download/Download.jsx → Download.jsx}

@@ -3,37 +3,37 @@ import { Popup } from 'semantic-ui-react';
 import cx from 'classnames';
 
 const Download = ({ viz }) => {
-  const [expanded, setExpanded] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
   const popupRef = React.useRef();
 
   return (
     <Popup
-      popper={{ id: 'tableau-download-popup' }}
-      trigger={
-        <div className="tableau-download-container">
-          <button className={cx('tableau-download-button', { expanded })}>
-            Download <i class="ri-download-fill"></i>
-          </button>
-        </div>
-      }
+      popper={{ id: 'vis-toolbar-popup', className: 'download-popup' }}
       position="bottom left"
       on="click"
+      open={open}
       onClose={() => {
-        setExpanded(false);
+        setOpen(false);
       }}
       onOpen={() => {
-        setExpanded(true);
+        setOpen(true);
       }}
       ref={popupRef}
-    >
-      <ul className="no-bullets">
-        <li>
-          Data formats
-          <div className="visualization-wrapper">
-            <div className="visualization-info">
-              <div>
+      trigger={
+        <div className="tableau-download-container">
+          <button className={cx('trigger-button', { open })}>
+            <i className="ri-download-fill" />
+            Download
+          </button>
+        </div>
+      }
+      content={
+        <>
+          <div className="item">
+            <span className="label">Data formats</span>
+            <div className="types">
+              <div className="type">
                 <button
-                  className="tableau-download-button tableau-format-download"
                   onClick={() => {
                     viz.showExportCrossTabDialog();
                     popupRef.current.triggerRef.current.click();
@@ -42,9 +42,8 @@ const Download = ({ viz }) => {
                   <span>CSV</span>
                 </button>
               </div>
-              <div>
+              <div className="type">
                 <button
-                  className="tableau-download-button tableau-format-download"
                   onClick={() => {
                     viz.exportCrossTabToExcel();
                     popupRef.current.triggerRef.current.click();
@@ -55,14 +54,11 @@ const Download = ({ viz }) => {
               </div>
             </div>
           </div>
-        </li>
-        <li>
-          Image formats
-          <div className="visualization-wrapper">
-            <div className="visualization-info">
-              <div>
+          <div className="item">
+            <span className="label">Image formats</span>
+            <div className="types">
+              <div className="type">
                 <button
-                  className="tableau-download-button tableau-format-download"
                   onClick={() => {
                     viz.showExportImageDialog();
                     popupRef.current.triggerRef.current.click();
@@ -73,14 +69,11 @@ const Download = ({ viz }) => {
               </div>
             </div>
           </div>
-        </li>
-        <li>
-          Other formats
-          <div className="visualization-wrapper">
-            <div className="visualization-info">
-              <div>
+          <div className="item">
+            <span className="label">Other formats</span>
+            <div className="types">
+              <div className="type">
                 <button
-                  className="tableau-download-button tableau-format-download"
                   onClick={() => {
                     viz.showExportPDFDialog();
                     popupRef.current.triggerRef.current.click();
@@ -91,9 +84,9 @@ const Download = ({ viz }) => {
               </div>
             </div>
           </div>
-        </li>
-      </ul>
-    </Popup>
+        </>
+      }
+    />
   );
 };
 

package/src/Utils/index.js

@@ -0,0 +1,2 @@
+export { default as Download } from './Download';
+export { default as JsonCodeSnippet } from './JsonCodeSnippet';

package/src/Views/VisualizationView.jsx

@@ -17,6 +17,10 @@ const VisualizationView = (props) => {
         <Tableau
           data={{
             ...tableau_visualization,
+            with_note: false,
+            with_sources: false,
+            with_more_info: false,
+            with_share: false,
             with_download: true,
           }}
           breakpoints={

package/src/Widgets/VisualizationViewWidget.jsx

@@ -3,14 +3,19 @@ import config from '@plone/volto/registry';
 
 export default function VisualizationViewWidget(props) {
   const { value = {} } = props;
+
   return (
     <Tableau
       data={{
         ...value,
+        with_note: false,
+        with_sources: false,
+        with_more_info: true,
+        with_share: true,
         with_download: true,
       }}
       breakpoints={
-        config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
+        config.blocks.blocksConfig?.embed_tableau_visualization?.breakpoints
       }
     />
   );

package/src/Widgets/VisualizationViewWidget.test.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import VisualizationViewWidget from './VisualizationViewWidget';
+
+const mockStore = configureStore([]);
+const store = mockStore({});
+
+jest.mock('@plone/volto/components', () => ({
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+  Toast: ({ children }) => <p>{children}</p>,
+}));
+
+describe('VisualizationViewWidget', () => {
+  it('should render the component', () => {
+    const data = {
+      url: 'http://localhost:3000/tableau-ct',
+      with_download: true,
+      with_more_info: true,
+      with_note: true,
+      with_share: true,
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <VisualizationViewWidget data={data} />
+      </Provider>,
+    );
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+  });
+});

package/src/Widgets/VisualizationWidget.jsx

@@ -72,11 +72,18 @@ const VisualizationWidget = (props) => {
             >
               <Tableau
                 ref={viz}
-                data={value}
+                data={{
+                  ...(value || {}),
+                  with_note: false,
+                  with_sources: false,
+                  with_more_info: false,
+                  with_share: false,
+                  with_download: false,
+                }}
                 mode="edit"
                 breakpoints={
-                  config.blocks.blocksConfig.embed_tableau_visualization
-                    .breakpoints
+                  config.blocks.blocksConfig?.embed_tableau_visualization
+                    ?.breakpoints
                 }
                 extraOptions={extraOptions}
                 setVizState={setVizState}
@@ -116,9 +123,14 @@ const VisualizationWidget = (props) => {
         data={{
           ...props.value,
           autoScale: true,
+          with_note: false,
+          with_sources: false,
+          with_more_info: false,
+          with_share: false,
+          with_download: false,
         }}
         breakpoints={
-          config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
+          config.blocks.blocksConfig?.embed_tableau_visualization?.breakpoints
         }
         extraOptions={extraOptions}
       />

package/src/Widgets/VisualizationWidget.test.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import VisualizationWidget from './VisualizationWidget';
+
+const mockStore = configureStore([]);
+const store = mockStore({});
+
+jest.mock('@plone/volto/components', () => ({
+  FormFieldWrapper: jest.fn(({ children }) => <>{children}</>),
+  InlineForm: jest.fn(() => <div>Mocked InlineForm</div>),
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+  Toast: ({ children }) => <p>{children}</p>,
+}));
+
+describe('VisualizationWidget', () => {
+  it('should render the component', () => {
+    const data = {
+      value: {
+        url: 'http://localhost:3000/tableau-ct',
+        with_download: true,
+        with_more_info: true,
+        with_note: true,
+        with_share: true,
+        hideTabs: false,
+        staticParameters: [
+          {
+            '@id': '1f050748-c020-4a48-8109-e99a25bf558d',
+            field: 'Tableau field',
+            value: 'Tableau value',
+          },
+        ],
+      },
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <VisualizationWidget {...data} />
+      </Provider>,
+    );
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+  });
+});

package/src/Widgets/schema.js

@@ -38,7 +38,8 @@ const staticParameters = {
 };
 
 const breakpointUrlSchema = (config) => {
-  const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
+  const breakpoints =
+    config.blocks.blocksConfig?.tableau_block?.breakpoints || {};
 
   return {
     title: 'URL',

package/src/helpers.js

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import Download from './Download';
-
-window.URL.createObjectURL = jest.fn(() => 'test');
-
-jest.mock('@plone/volto/components', () => ({
-  Icon: ({ children }) => <img alt="incon">{children}</img>,
-}));
-
-describe('Download', () => {
-  const viz = {};
-
-  it('should render the component', () => {
-    const { container } = render(<Download viz={viz} />);
-    expect(
-      container.querySelector('.tableau-download-container'),
-    ).toBeInTheDocument();
-  });
-});

package/src/Utils/FigureNote/FigureNote.jsx

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

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

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

@@ -1,24 +0,0 @@
-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,69 +0,0 @@
-import React from 'react';
-import { Popup, Input, Button } from 'semantic-ui-react';
-import { useCopyToClipboard } from '../../helpers.js';
-import cx from 'classnames';
-
-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)}
-      >
-        {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>
-  );
-};
-
-export default Share;