Add data provenance

src/Blocks/EmbedEEATableauBlock/Edit.jsx

@@ -45,8 +45,7 @@ export default compose(
   connect(
     (state, props) => ({
       block_data: state.content.data,
-      data_provenance:
-        state.content.subrequests?.[props.id]?.data?.data_provenance,
+      data_provenance: state.content.subrequests?.[props.id]?.data_provenance,
     }),
     {
       getContent,

src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ConnectedTableau from '../../ConnectedTableau/ConnectedTableau';
+import { Sources } from '../../Sources';
 
 import { getContent } from '@plone/volto/actions';
 
@@ -24,9 +25,10 @@ const View = (props) => {
         <>
           <ConnectedTableau {...props.tableau_visualization} id={props.id} />
           {show_sources &&
-          data.tableauSources &&
+          props.data_provenance &&
+          props.data_provenance.data?.tableau_visualization_data.general?.url &&
           props.tableau_visualization ? (
-            ''
+            <Sources sources={props.data_provenance} />
           ) : show_sources ? (
             <div>Data provenance is not set in the visualization</div>
           ) : (
@@ -43,8 +45,7 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      data_provenance:
-        state.content.subrequests?.[props.id]?.data?.data_provenance,
+      data_provenance: state.content.subrequests?.[props.id],
       tableau_visualization:
         state.content.subrequests?.[props.id]?.data?.tableau_visualization_data,
     }),

src/Sources/Sources.jsx

@@ -0,0 +1,41 @@
+/* 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"
+          />
+          Source:
+        </h3>
+      </a>
+      {expand && (
+        <li className="embed-source-param">
+          <UniversalLink
+            className="embed-sources-param-title"
+            href={sources?.data?.tableau_visualization_data?.general?.url}
+          >
+            {sources?.data?.tableau_visualization_data?.general?.url}
+          </UniversalLink>
+        </li>
+      )}
+    </div>
+  );
+};
+
+export default SourcesWidget;

src/Sources/index.js

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

src/Sources/style.css

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