Add available fields, remove default version, manage no version selected

src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -36,34 +36,41 @@ const View = (props) => {
       <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>
+            {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>
-              ) : (
-                ''
-              )}
-              <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>
+                {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>
             )}
           </>
         ) : (

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;

src/Tableau/View.jsx

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

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">
+      <div className="tableau-info">
+        {displayCondition && props.mode === 'edit' ? (
           <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>
-      ) : (
-        ''
-      )}
+        ) : 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>
   ) : (
     ''

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',

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>
   );
 };

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>
           ) : (
@@ -57,7 +59,8 @@ const VisualizationWidget = (props) => {
       setIntValue({
         ...intValue,
         general: {
-          version: '2.8.0',
+          url: intValue?.general?.url,
+          version: '',
         },
       });
     }
@@ -73,7 +76,7 @@ const VisualizationWidget = (props) => {
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [intValue]);
+  }, []);
 
   return (
     <FormFieldWrapper {...props}>
@@ -115,7 +118,9 @@ 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 />
                 ) : (
@@ -147,7 +152,9 @@ const VisualizationWidget = (props) => {
           </Modal.Actions>
         </Modal>
       )}
-      {(intValue && intValue.general && !intValue.general.url) ||
+      {(intValue &&
+        intValue.general &&
+        (!intValue.general.url || !intValue.general.version)) ||
       tableauError ? (
         <TableauNotDisplayed />
       ) : (

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',

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;
 };

src/less/tableau.less

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