@eeacms/volto-tableau 3.0.2 → 3.0.4

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.4](https://github.com/eea/volto-tableau/compare/3.0.3...3.0.4) - 18 January 2023
+
+#### :hammer_and_wrench: Others
+
+- Fix lint issues [dana-cfc4 - [`9bbf908`](https://github.com/eea/volto-tableau/commit/9bbf908195a9e90c606ebc87042ae3c7a44e7973)]
+- Add available fields, remove default version, manage no version selected [dana-cfc4 - [`66e510e`](https://github.com/eea/volto-tableau/commit/66e510e5f2e47e049e157ab046d0499f14b8f700)]
+### [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "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>
   );
 };
 
@@ -51,4 +69,4 @@ export default compose(
       getContent,
     },
   ),
-)(Edit);
+)(React.memo(Edit));

package/src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -1,6 +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';
 
@@ -8,7 +12,8 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 
 const View = (props) => {
-  const { data, data_provenance, tableau_visualization } = 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;
 
@@ -20,25 +25,59 @@ const View = (props) => {
   }, [vis_url]);
 
   return (
-    <>
-      {data?.vis_url ? (
-        <>
-          <ConnectedTableau {...props.tableau_visualization} id={props.id} />
-          {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>
-      )}
-    </>
+    <StyleWrapperView
+      {...props}
+      data={data}
+      styleData={{
+        ...data.styles,
+        customClass: cx(data.styles?.customClass || '', 'embed-container'),
+      }}
+    >
+      <PrivacyProtection data={data} {...props}>
+        {data?.vis_url ? (
+          <>
+            {tableau_visualization?.general?.url &&
+            tableau_visualization?.general?.version ? (
+              <>
+                <div className="tableau-block">
+                  {props.mode === 'edit' ? (
+                    <div className="tableau-info">
+                      <h3 className="tableau-version">
+                        == Tableau {tableau_visualization?.general?.version}{' '}
+                        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>
+                ) : (
+                  ''
+                )}
+              </>
+            ) : !tableau_visualization?.general?.url ? (
+              <div>Url is not set in the visualization</div>
+            ) : (
+              <div>Version is not set in the visualization</div>
+            )}
+          </>
+        ) : (
+          <div>Please select a visualization from block editor.</div>
+        )}
+      </PrivacyProtection>
+    </StyleWrapperView>
   );
 };
 
@@ -53,4 +92,4 @@ export default compose(
       getContent,
     },
   ),
-)(View);
+)(React.memo(View));

package/src/ConnectedTableau/ConnectedTableau.jsx

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

package/src/CustomWidgets/UrlParamsWidget.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import '@eeacms/volto-tableau/less/tableau.less';
+
+const UrlParamsWidget = () => {
+  const fields = [
+    'embed',
+    'isGuestRedirectFromVizportal',
+    'showShareOptions',
+    'jsdebug',
+    'sheetname',
+    'display_count',
+    'showVizHome',
+    'origin',
+    'device',
+  ];
+
+  return (
+    <div className="availableFieldsContainer">
+      <p className="availableFieldsTitle">Available Fields:</p>
+      {fields.map((field) => (
+        <p className="availableFields">
+          <strong>{field}</strong>
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default UrlParamsWidget;

package/src/Tableau/View.jsx

@@ -23,7 +23,7 @@ const Tableau = (props) => {
     screen = {},
     setError = () => {},
     setLoaded = () => {},
-    version = '2.8.0',
+    version = '',
   } = props;
   const {
     autoScale = false,
@@ -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

@@ -34,14 +34,15 @@ const View = (props) => {
     description = null,
     autoScale = false,
   } = data;
-  const version =
-    props.data.version || config.settings.tableauVersion || '2.8.0';
+  const version = props.data.version || config.settings.tableauVersion;
   const device = getDevice(config, screen.page?.width || Infinity);
   const breakpointUrl = breakpointUrls.filter(
     (breakpoint) => breakpoint.device === device,
   )[0]?.url;
   const url = breakpointUrl || data.url;
 
+  const displayCondition = url && version;
+
   React.useEffect(() => {
     setMounted(true);
     /* eslint-disable-next-line */
@@ -67,33 +68,39 @@ const View = (props) => {
 
   return mounted ? (
     <div className="tableau-block">
-      {props.mode === 'edit' ? (
-        <div className="tableau-info">
-          <h3 className="tableau-version">== Tableau {version} ==</h3>
-          {!props.data.url ? <p className="tableau-error">URL required</p> : ''}
-          {error ? <p className="tableau-error">{error}</p> : ''}
-        </div>
-      ) : (
-        ''
-      )}
+      <div className="tableau-info">
+        {displayCondition && props.mode === 'edit' ? (
+          <h3 className="tableau-version">== Tableau {version} loaded ==</h3>
+        ) : null}
+        {!url ? <p className="tableau-error">URL required</p> : ''}
+        {url && !version ? (
+          <p className="tableau-error">Version required</p>
+        ) : (
+          ''
+        )}
+        {error ? <p className="tableau-error">{error}</p> : ''}
+      </div>
+
       {loaded && title ? <h3 className="tableau-title">{title}</h3> : ''}
       {loaded && description ? (
         <p className="tableau-description">{description}</p>
       ) : (
         ''
       )}
-      <Tableau
-        {...props}
-        canUpdateUrl={!breakpointUrl}
-        extraFilters={extraFilters}
-        extraOptions={{ device: autoScale ? 'desktop' : device }}
-        error={error}
-        loaded={loaded}
-        setError={setError}
-        setLoaded={setLoaded}
-        version={version}
-        url={url}
-      />
+      {displayCondition ? (
+        <Tableau
+          {...props}
+          canUpdateUrl={!breakpointUrl}
+          extraFilters={extraFilters}
+          extraOptions={{ device: autoScale ? 'desktop' : device }}
+          error={error}
+          loaded={loaded}
+          setError={setError}
+          setLoaded={setLoaded}
+          version={version}
+          url={url}
+        />
+      ) : null}
     </div>
   ) : (
     ''

package/src/TableauBlock/schema.js

@@ -82,7 +82,7 @@ export default (config) => ({
           '2.0.3',
         ].map((version) => [version, `tableau-${version}`]),
       ],
-      default: config.settings.tableauVersion || '2.8.0',
+      default: config.settings.tableauVersion,
     },
     url: {
       title: 'Url',

package/src/Views/VisualizationView.jsx

@@ -12,6 +12,8 @@ const VisualizationView = (props) => {
         <div className="tableau-info">
           {!tableau_visualization_data.general?.url ? (
             <p className="tableau-error">URL required</p>
+          ) : !tableau_visualization_data.general?.version ? (
+            <p className="tableau-error">Version required</p>
           ) : tableauError ? (
             <p className="tableau-error">{tableauError}</p>
           ) : (
@@ -23,19 +25,20 @@ const VisualizationView = (props) => {
   };
   return (
     <div>
-      {!tableau_visualization_data.general?.url || tableauError ? (
+      {!tableau_visualization_data?.general?.url ||
+      !tableau_visualization_data?.general?.version ||
+      tableauError ? (
         <TableauNotDisplayed />
       ) : (
-        ''
+        <TableauView
+          setTableauError={setTableauError}
+          data={{
+            ...tableau_visualization_data.general,
+            ...tableau_visualization_data.options,
+            ...tableau_visualization_data.extraOptions,
+          }}
+        />
       )}
-      <TableauView
-        setTableauError={setTableauError}
-        data={{
-          ...tableau_visualization_data.general,
-          ...tableau_visualization_data.options,
-          ...tableau_visualization_data.extraOptions,
-        }}
-      />
     </div>
   );
 };

package/src/Widgets/VisualizationWidget.jsx

@@ -40,6 +40,8 @@ const VisualizationWidget = (props) => {
         <div className="tableau-info">
           {intValue && intValue.general && !intValue.general.url ? (
             <p className="tableau-error">URL required</p>
+          ) : intValue && intValue.general && !intValue.general.version ? (
+            <p className="tableau-error">Version required</p>
           ) : tableauError ? (
             <p className="tableau-error">{tableauError}</p>
           ) : (
@@ -53,6 +55,15 @@ const VisualizationWidget = (props) => {
   let schema = Schema(config);
 
   React.useEffect(() => {
+    if (!intValue?.general || !intValue?.general?.version) {
+      setIntValue({
+        ...intValue,
+        general: {
+          url: intValue?.general?.url,
+          version: '',
+        },
+      });
+    }
     if (!intValue?.options) {
       setIntValue({
         ...intValue,
@@ -65,7 +76,7 @@ const VisualizationWidget = (props) => {
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [intValue]);
+  }, []);
 
   return (
     <FormFieldWrapper {...props}>
@@ -107,22 +118,23 @@ const VisualizationWidget = (props) => {
                 />
               </Grid.Column>
               <Grid.Column mobile={12} tablet={12} computer={7}>
-                {(intValue && intValue.general && !intValue.general.url) ||
+                {(intValue &&
+                  intValue.general &&
+                  (!intValue.general.url || !intValue.general.version)) ||
                 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>
@@ -140,19 +152,23 @@ const VisualizationWidget = (props) => {
           </Modal.Actions>
         </Modal>
       )}
-      {(intValue && intValue.general && !intValue.general.url) ||
+      {(intValue &&
+        intValue.general &&
+        (!intValue.general.url || !intValue.general.version)) ||
       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

@@ -27,7 +27,7 @@ const generalSchema = (config) => {
             '2.0.3',
           ].map((version) => [version, `tableau-${version}`]),
         ],
-        default: config.settings.tableauVersion || '2.8.0',
+        default: config.settings.tableauVersion,
       },
       url: {
         title: 'Url',
@@ -92,7 +92,11 @@ const optionsSchema = {
 const urlParametersSchema = {
   title: 'Parameter',
   fieldsets: [
-    { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['field', 'urlParam'],
+    },
   ],
   properties: {
     field: {
@@ -139,7 +143,7 @@ const extraOptionsSchema = (config) => {
       {
         id: 'default',
         title: 'Extra Options Data',
-        fields: ['urlParameters', 'breakpointUrls'],
+        fields: ['urlParameters', 'availableFields', 'breakpointUrls'],
       },
     ],
 
@@ -150,6 +154,10 @@ const extraOptionsSchema = (config) => {
         schema: urlParametersSchema,
         description: 'Set a list of url parameters to filter the tableau',
       },
+      availableFields: {
+        title: 'Available Fields:',
+        widget: 'url_params_widget',
+      },
       breakpointUrls: {
         title: 'Breakpoint urls',
         widget: 'object_list',

package/src/index.js

@@ -5,6 +5,7 @@ import EmbedTableauView from './Blocks/EmbedEEATableauBlock/View';
 import EmbedTableauEdit from './Blocks/EmbedEEATableauBlock/Edit';
 import { VisualizationView } from './Views';
 import { VisualizationWidget } from './Widgets';
+import UrlParamsWidget from './CustomWidgets/UrlParamsWidget';
 
 import tableauStore from './store';
 
@@ -72,6 +73,7 @@ const applyConfig = (config) => {
 
   config.views.contentTypesViews.tableau_visualization = VisualizationView;
   config.widgets.id.tableau_visualization_data = VisualizationWidget;
+  config.widgets.widget.url_params_widget = UrlParamsWidget;
 
   return config;
 };

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;
     }
 
@@ -104,4 +108,20 @@
   }
 }
 
-.loadAddonOverrides();
+.availableFieldsContainer {
+  padding: 0 5px 5px 0;
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.availableFieldsTitle {
+  color: darkgray;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.availableFields {
+  padding: 0 5px;
+  font-size: 12px;
+}
+
+.loadAddonVariables();