@eeacms/volto-tableau 3.0.1 → 3.0.3

package/CHANGELOG.md

@@ -4,12 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [3.0.3](https://github.com/eea/volto-tableau/compare/3.0.2...3.0.3) - 17 January 2023
+
+#### :hammer_and_wrench: Others
+
+- Add volto-embed and volto-block-style addons [dana-cfc4 - [`e557a05`](https://github.com/eea/volto-tableau/commit/e557a0561a46fa7de139d733e72dc17affa8f5e1)]
+- Fix default tableau version, add privacy protection, add style wrapper, add title for tableau edit [dana-cfc4 - [`9859224`](https://github.com/eea/volto-tableau/commit/98592247bd58895bd253411cfce981e639093e85)]
+### [3.0.2](https://github.com/eea/volto-tableau/compare/3.0.1...3.0.2) - 13 January 2023
+
+#### :hammer_and_wrench: Others
+
+- Add version choice to widget [dana-cfc4 - [`0689e40`](https://github.com/eea/volto-tableau/commit/0689e403e4ef427f0996dedd718f6d095d8df33f)]
+- Take sources from eea core metadata [dana-cfc4 - [`a46848d`](https://github.com/eea/volto-tableau/commit/a46848d84bd12e39badad503429c768c15ef1631)]
+- Add data provenance [dana-cfc4 - [`2a96c25`](https://github.com/eea/volto-tableau/commit/2a96c254ae7c3b56423204fa3696c0c5093c1f88)]
 ### [3.0.1](https://github.com/eea/volto-tableau/compare/3.0.0...3.0.1) - 13 January 2023
 
 #### :hammer_and_wrench: Others
 
 - helper comments [andreiggr - [`b13abfd`](https://github.com/eea/volto-tableau/commit/b13abfd3fe5813f872b98de66de63c98f4721c62)]
-- wait for client before document get [andreiggr - [`e12a3db`](https://github.com/eea/volto-tableau/commit/e12a3dbd302a33e446cc01da914d90b8cf54a024)]
 ## [3.0.0](https://github.com/eea/volto-tableau/compare/2.0.0...3.0.0) - 13 January 2023
 
 #### :hammer_and_wrench: Others
@@ -45,6 +57,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update commands.js [Nilesh - [`7c48437`](https://github.com/eea/volto-tableau/commit/7c4843780efb9b85a4728de73c00d831c1d8fdcf)]
 - Update e2e.js [Nilesh - [`f67b45c`](https://github.com/eea/volto-tableau/commit/f67b45c170f58f8d0301192994226f173e4cb00a)]
 - latest volto compatibility refs #154757 [nileshgulia1 - [`881ba48`](https://github.com/eea/volto-tableau/commit/881ba482dc9b82e7fdac16549d41e80a6d26b3de)]
+- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`58e25df`](https://github.com/eea/volto-tableau/commit/58e25df2291add09670143bee54cde103ee835b9)]
 ### [1.3.0](https://github.com/eea/volto-tableau/compare/1.2.5...1.3.0) - 28 September 2022
 
 #### :hammer_and_wrench: Others
@@ -58,11 +71,15 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Use volto 16 alpha 14 [Miu Razvan - [`93641be`](https://github.com/eea/volto-tableau/commit/93641be4c2393f49008aff789400cf7c947949fd)]
 - Revert volto-tableau group to common [Andrei Grigore - [`9d24c6d`](https://github.com/eea/volto-tableau/commit/9d24c6d2767fed6a840cddaee55dbd5cecb544b5)]
 - Tableaugroup typo fix [Andrei Grigore - [`b0b5378`](https://github.com/eea/volto-tableau/commit/b0b5378a437043120a96c9e5e8802584145daa22)]
+- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`3234347`](https://github.com/eea/volto-tableau/commit/3234347e524cc0ed4918242f503fe9e7dba266b2)]
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`d237e1c`](https://github.com/eea/volto-tableau/commit/d237e1c72817d7e68a3eb698563674d1514db24f)]
 ### [1.2.4](https://github.com/eea/volto-tableau/compare/1.2.3...1.2.4) - 25 October 2021
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`2b19679`](https://github.com/eea/volto-tableau/commit/2b19679e2c7bcdc83082d1c73a595eea8b86d14f)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`384ccae`](https://github.com/eea/volto-tableau/commit/384ccaebed8c414a5c90eb96c6ce0a2b091f249c)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`589258e`](https://github.com/eea/volto-tableau/commit/589258e9b3cbba9cee37c57bb85ca5b707bc65d7)]
 ### [1.2.3](https://github.com/eea/volto-tableau/compare/1.2.2...1.2.3) - 14 June 2021
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,10 +17,14 @@
     "url": "git@github.com:eea/volto-tableau.git"
   },
   "addons": [
-    "@eeacms/volto-resize-helper"
+    "@eeacms/volto-resize-helper",
+    "@eeacms/volto-embed",
+    "@eeacms/volto-block-style"
   ],
   "dependencies": {
-    "@eeacms/volto-resize-helper": "^0.2.4"
+    "@eeacms/volto-resize-helper": "^0.2.4",
+    "@eeacms/volto-embed": "5.0.0",
+    "@eeacms/volto-block-style": "4.1.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/Blocks/EmbedEEATableauBlock/Edit.jsx

@@ -4,11 +4,16 @@ import { SidebarPortal } from '@plone/volto/components';
 import { getContent } from '@plone/volto/actions';
 import View from './View';
 import Schema from './schema';
+
+import { BlockStyleWrapperEdit } from '@eeacms/volto-block-style/BlockStyleWrapper';
+import cx from 'classnames';
+
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 
 const Edit = (props) => {
-  const { data, block, onChangeBlock, id } = props;
+  const { block, onChangeBlock, id } = props;
+  const data = React.useMemo(() => props.data || {}, [props.data]);
   const schema = React.useMemo(() => Schema(props), [props]);
 
   React.useEffect(() => {
@@ -21,8 +26,21 @@ const Edit = (props) => {
   }, [block, data, onChangeBlock]);
 
   return (
-    <>
-      <View data={data} id={id} />
+    <BlockStyleWrapperEdit
+      {...props}
+      role="presentation"
+      data={{
+        ...(props.data || {}),
+        styles: {
+          ...(props.data?.styles || {}),
+          customClass: cx(
+            props.data?.styles?.customClass || '',
+            'custom-embed-class',
+          ),
+        },
+      }}
+    >
+      <View {...props} data={data} id={id} mode="edit" />
       <SidebarPortal selected={props.selected}>
         <BlockDataForm
           block={block}
@@ -37,7 +55,7 @@ const Edit = (props) => {
           formData={data}
         />
       </SidebarPortal>
-    </>
+    </BlockStyleWrapperEdit>
   );
 };
 
@@ -45,11 +63,10 @@ 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,
     },
   ),
-)(Edit);
+)(React.memo(Edit));

package/src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -1,5 +1,10 @@
 import React from 'react';
 import ConnectedTableau from '../../ConnectedTableau/ConnectedTableau';
+import { Sources } from '../../Sources';
+import { PrivacyProtection } from '@eeacms/volto-embed';
+
+import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
+import cx from 'classnames';
 
 import { getContent } from '@plone/volto/actions';
 
@@ -7,7 +12,8 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 
 const View = (props) => {
-  const { data } = props || {};
+  const { data_provenance, tableau_visualization } = props || {};
+  const data = React.useMemo(() => props.data || {}, [props.data]);
   const { vis_url = '' } = data;
   const show_sources = data?.show_sources ?? false;
 
@@ -19,32 +25,59 @@ const View = (props) => {
   }, [vis_url]);
 
   return (
-    <>
-      {data?.vis_url ? (
-        <>
-          <ConnectedTableau {...props.tableau_visualization} id={props.id} />
-          {show_sources &&
-          data.tableauSources &&
-          props.tableau_visualization ? (
-            ''
-          ) : show_sources ? (
-            <div>Data provenance is not set in the visualization</div>
-          ) : (
-            ''
-          )}
-        </>
-      ) : (
-        <div>Please select a visualization from block editor.</div>
-      )}
-    </>
+    <StyleWrapperView
+      {...props}
+      data={data}
+      styleData={{
+        ...data.styles,
+        customClass: cx(data.styles?.customClass || '', 'embed-container'),
+      }}
+    >
+      <PrivacyProtection data={data} {...props}>
+        {data?.vis_url ? (
+          <>
+            <div className="tableau-block">
+              {props.mode === 'edit' ? (
+                <div className="tableau-info">
+                  <h3 className="tableau-version">
+                    == Tableau{' '}
+                    {tableau_visualization?.general?.version || '2.8.0'} loaded
+                    ==
+                  </h3>
+                </div>
+              ) : (
+                ''
+              )}
+              <ConnectedTableau
+                {...props.tableau_visualization}
+                id={props.id}
+                {...props}
+              />
+            </div>
+
+            {show_sources &&
+            data_provenance &&
+            data_provenance?.data?.data_provenance &&
+            tableau_visualization ? (
+              <Sources sources={data_provenance.data.data_provenance} />
+            ) : show_sources ? (
+              <div>Data provenance is not set in the visualization</div>
+            ) : (
+              ''
+            )}
+          </>
+        ) : (
+          <div>Please select a visualization from block editor.</div>
+        )}
+      </PrivacyProtection>
+    </StyleWrapperView>
   );
 };
 
 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,
     }),
@@ -52,4 +85,4 @@ export default compose(
       getContent,
     },
   ),
-)(View);
+)(React.memo(View));

package/src/ConnectedTableau/ConnectedTableau.jsx

@@ -13,6 +13,8 @@ const ConnectedTableau = (props) => {
         setLoaded={setLoaded}
         data={{ ...props?.general, ...props?.options, ...props?.extraOptions }}
         url={props?.general?.url}
+        version={props?.general?.version}
+        {...props}
       />
     </div>
   );

package/src/Sources/Sources.jsx

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

package/src/Sources/index.js

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

package/src/Sources/style.css

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

package/src/Tableau/View.jsx

@@ -212,7 +212,11 @@ const Tableau = (props) => {
               ''
             ) : (
               <div className="tableau-loader">
-                <span>Loading Tableau v{version}</span>
+                <span>
+                  {mode === 'edit'
+                    ? 'Loading...'
+                    : `Loading Tableau v${version}`}
+                </span>
               </div>
             )}
           </>

package/src/TableauBlock/View.jsx

@@ -69,7 +69,7 @@ const View = (props) => {
     <div className="tableau-block">
       {props.mode === 'edit' ? (
         <div className="tableau-info">
-          <h3 className="tableau-version">== Tableau {version} ==</h3>
+          <h3 className="tableau-version">== Tableau {version} loaded ==</h3>
           {!props.data.url ? <p className="tableau-error">URL required</p> : ''}
           {error ? <p className="tableau-error">{error}</p> : ''}
         </div>

package/src/Widgets/VisualizationWidget.jsx

@@ -53,6 +53,14 @@ const VisualizationWidget = (props) => {
   let schema = Schema(config);
 
   React.useEffect(() => {
+    if (!intValue?.general || !intValue?.general?.version) {
+      setIntValue({
+        ...intValue,
+        general: {
+          version: '2.8.0',
+        },
+      });
+    }
     if (!intValue?.options) {
       setIntValue({
         ...intValue,
@@ -111,18 +119,17 @@ const VisualizationWidget = (props) => {
                 tableauError ? (
                   <TableauNotDisplayed />
                 ) : (
-                  ''
+                  <div className="tableau-container">
+                    <TableauView
+                      setTableauError={setTableauError}
+                      data={{
+                        ...intValue?.general,
+                        ...intValue?.options,
+                        ...intValue?.extraOptions,
+                      }}
+                    />
+                  </div>
                 )}
-                <div className="tableau-container">
-                  <TableauView
-                    setTableauError={setTableauError}
-                    data={{
-                      ...intValue?.general,
-                      ...intValue?.options,
-                      ...intValue?.extraOptions,
-                    }}
-                  />
-                </div>
               </Grid.Column>
             </Grid>
           </Modal.Content>
@@ -144,15 +151,17 @@ const VisualizationWidget = (props) => {
       tableauError ? (
         <TableauNotDisplayed />
       ) : (
-        ''
+        <TableauView
+          setTableauError={setTableauError}
+          data={{
+            ...value?.general,
+            ...value?.options,
+            ...value?.extraOptions,
+          }}
+        />
       )}
-
-      <TableauView
-        setTableauError={setTableauError}
-        data={{ ...value?.general, ...value?.options, ...value?.extraOptions }}
-      />
     </FormFieldWrapper>
   );
 };
 
-export default VisualizationWidget;
+export default React.memo(VisualizationWidget);

package/src/Widgets/schema.js

@@ -1,21 +1,41 @@
-const generalSchema = {
-  title: 'General',
+const generalSchema = (config) => {
+  return {
+    title: 'General',
 
-  fieldsets: [
-    {
-      id: 'general',
-      title: 'General',
-      fields: ['url'],
-    },
-  ],
+    fieldsets: [
+      {
+        id: 'general',
+        title: 'General',
+        fields: ['version', 'url'],
+      },
+    ],
 
-  properties: {
-    url: {
-      title: 'Url',
-      type: 'textarea',
+    properties: {
+      version: {
+        title: 'Version',
+        type: 'array',
+        choices: [
+          ...[
+            '2.8.0',
+            '2.7.0',
+            '2.6.0',
+            '2.5.0',
+            '2.4.0',
+            '2.3.0',
+            '2.2.2',
+            '2.1.2',
+            '2.0.3',
+          ].map((version) => [version, `tableau-${version}`]),
+        ],
+        default: config.settings.tableauVersion || '2.8.0',
+      },
+      url: {
+        title: 'Url',
+        type: 'textarea',
+      },
     },
-  },
-  required: ['url'],
+    required: ['url', 'version'],
+  };
 };
 
 const optionsSchema = {
@@ -158,7 +178,7 @@ export default (config) => {
         schemas: [
           {
             id: 'general',
-            schema: generalSchema,
+            schema: generalSchema(config),
           },
           {
             id: 'options',

package/src/less/tableau.less

@@ -9,7 +9,11 @@
 .tableau-block {
   .tableau-info {
     h3.tableau-version {
-      margin-right: 0.5rem;
+      display: flex;
+      height: 75px;
+      align-items: center;
+      justify-content: center;
+      background-color: #f4f4f1;
       color: @tableauTitleColor;
     }