fix: display figure note

src/Blocks/EmbedTableauVisualization/View.jsx

@@ -15,8 +15,9 @@ const View = (props) => {
     with_more_info = true,
     with_download = true,
   } = data;
-  const { figureNote, tableau_visualization } =
+  const { figure_note = [], tableau_visualization } =
     props.tableau_visualization_data || {};
+
   const tableau_vis_url = flattenToAppURL(data.tableau_vis_url || '');
 
   React.useEffect(() => {
@@ -49,7 +50,7 @@ const View = (props) => {
                   with_download,
                   tableau_vis_url,
                 }}
-                figureNote={figureNote || ''}
+                figure_note={figure_note}
               />
             )}
           </>

src/Tableau/Tableau.jsx

@@ -80,7 +80,7 @@ const Tableau = forwardRef((props, ref) => {
     extraOptions = {},
     mode = 'view',
     screen = {},
-    figureNote,
+    figure_note = [],
     version = '2.8.0',
     setVizState,
     onChangeBlock,
@@ -414,7 +414,7 @@ const Tableau = forwardRef((props, ref) => {
       />
       <div className="visualization-info-container">
         <div className="visualization-info">
-          {with_note && loaded && <FigureNote note={figureNote} />}
+          {with_note && loaded && <FigureNote note={figure_note} />}
           {with_more_info && loaded && (
             <MoreInfoLink contentTypeLink={tableau_vis_url} />
           )}

src/Utils/FigureNote/FigureNote.jsx

@@ -1,19 +1,24 @@
 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';
 
-const FigureNote = ({ note }) => {
+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
-        content={
-          note ? (
-            <p>{note}</p>
-          ) : (
-            <p>Notes are not set for this visualization.</p>
-          )
-        }
         position="bottom left"
         popper={{ id: 'tableau-note-popup' }}
         trigger={
@@ -28,7 +33,9 @@ const FigureNote = ({ note }) => {
         onOpen={() => {
           setExpanded(true);
         }}
-      />
+      >
+        <Popup.Content>{serializeText(note)}</Popup.Content>
+      </Popup>
     </div>
   );
 };

src/Utils/FigureNote/FigureNote.test.jsx

@@ -6,8 +6,15 @@ 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 = 'Example note';
+  const note = [];
 
   it('should render the component', () => {
     const { container } = render(<FigureNote note={note} />);

src/Utils/MoreInfoLink/MoreInfoLink.jsx

@@ -13,7 +13,7 @@ const MoreInfoLink = ({ contentTypeLink }) => {
   return (
     <Link href={contentTypeLink}>
       <button className={cx('tableau-more-info-button')}>
-        More info <span className="tableau-more-info">{'>'}</span>
+        More info {'>'}
       </button>
     </Link>
   );

src/less/tableau.less

@@ -181,7 +181,6 @@
 #tableau-note-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;
 
@@ -193,6 +192,12 @@
       color: @secondaryColor;
     }
   }
+}
+
+#tableau-download-popup {
+  .ui.popup {
+    min-width: 600px;
+  }
 
   @media screen and (max-width: @largestMobileScreen) {
     .ui.popup {
@@ -222,8 +227,4 @@
   height: calc(80vh - 10em) !important;
 }
 
-.tableau-more-info {
-  padding: 1px 0 0 3px;
-}
-
 .loadAddonVariables();