Fix default tableau version, add privacy protection, add style wrappe…

…r, add title for tableau edit
eea · Jan 17, 2023 · 9859224 · 9859224
1 parent 0689e40
commit 9859224
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 47 deletions.
diff --git a/src/Blocks/EmbedEEATableauBlock/Edit.jsx b/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));
diff --git a/src/Blocks/EmbedEEATableauBlock/View.jsx b/src/Blocks/EmbedEEATableauBlock/View.jsx
@@ -1,14 +1,19 @@
 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';
 
 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,52 @@ 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 ? (
+          <>
+            <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>
   );
 };
 
@@ -53,4 +85,4 @@ export default compose(
       getContent,
     },
   ),
-)(View);
+)(React.memo(View));
diff --git a/src/ConnectedTableau/ConnectedTableau.jsx b/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>
   );

diff --git a/src/Tableau/View.jsx b/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>
             )}
           </>

diff --git a/src/TableauBlock/View.jsx b/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>

diff --git a/src/Widgets/VisualizationWidget.jsx b/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);
diff --git a/src/less/tableau.less b/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;
     }