Add Embed EEA Tableau block

src/Blocks/EmbedEEATableauBlock/Edit.jsx

@@ -0,0 +1,53 @@
+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 { data, block, onChangeBlock } = props;
+  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 (
+    <>
+      <View data={data} 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>
+    </>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      block_data: state.content.data,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(Edit);

src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import TableauView from '../../TableauBlock/View';
+import { Sources } from '../../Sources';
+
+const View = (props) => {
+  const { data } = props || {};
+  const { vis_url = '' } = data;
+  const with_sources = data?.with_sources ?? false;
+
+  React.useEffect(() => {
+    if (vis_url) {
+      props.getContent(vis_url, null);
+    }
+  }, [vis_url]);
+
+  return (
+    <>
+      <TableauView {...props} />
+      {with_sources &&
+        (props.mode !== 'edit' ? <Sources data={data.tableauSources} /> : '')}
+    </>
+  );
+};
+
+export default View;

src/Blocks/EmbedEEATableauBlock/schema.js

@@ -0,0 +1,71 @@
+const sourceSchema = {
+  title: 'Source',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['source', 'source_link'],
+    },
+  ],
+
+  properties: {
+    source: {
+      title: 'Source',
+      widget: 'textarea',
+    },
+    source_link: {
+      title: 'Link',
+      type: 'string',
+    },
+  },
+
+  required: ['source'],
+};
+
+const Schema = (props) => {
+  return {
+    title: 'Embed EEA Tableau',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['vis_url', 'height', 'show_sources'],
+      },
+      {
+        id: 'sources',
+        title: 'Sources',
+        fields: ['tableauSources', 'with_sources'],
+      },
+    ],
+    properties: {
+      vis_url: {
+        widget: 'object_by_path',
+        title: 'Visualization',
+      },
+      height: {
+        title: 'Height',
+        type: 'number',
+        default: 450,
+      },
+      tableauSources: {
+        widget: 'object_list',
+        title: 'Sources',
+        schema: sourceSchema,
+      },
+      show_sources: {
+        title: 'Toggle sources',
+        type: 'boolean',
+      },
+      with_sources: {
+        title: 'Sources visible',
+        type: 'boolean',
+        defaultValue: true,
+      },
+    },
+
+    required: ['vis_url'],
+  };
+};
+
+export default Schema;

src/Sources/Sources.jsx

@@ -0,0 +1,42 @@
+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 = ({ data }) => {
+  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"
+          />
+          Sources:
+        </h3>
+      </a>
+      {expand && (
+        <ul>
+          {data.map((param, i) => (
+            <li key={i} className="embed-source-param">
+              <UniversalLink
+                className="embed-sources-param-title"
+                href={param.source_link}
+              >
+                {param.source}
+              </UniversalLink>
+            </li>
+          ))}
+        </ul>
+      )}
+    </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;
+}

src/index.js

@@ -1,6 +1,8 @@
 import sliderSVG from '@plone/volto/icons/slider.svg';
 import TableauEdit from './TableauBlock/Edit';
 import TableauView from './TableauBlock/View';
+import EmbedTableauView from './Blocks/EmbedEEATableauBlock/View';
+import EmbedTableauEdit from './Blocks/EmbedEEATableauBlock/Edit';
 
 import tableauStore from './store';
 
@@ -44,6 +46,28 @@ const applyConfig = (config) => {
     },
   };
 
+  config.blocks.blocksConfig.embed_eea_tableau_block = {
+    id: 'embed_eea_tableau_block',
+    title: 'Embed EEA Tableau',
+    icon: sliderSVG,
+    group: 'common',
+    edit: EmbedTableauEdit,
+    view: EmbedTableauView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    breakpoints: {
+      desktop: [Infinity, 982],
+      tablet: [981, 768],
+      mobile: [767, 0],
+    },
+  };
+
   return config;
 };