+ {!tableau_visualization_data.general.url || tableauError ? (
+
+ ) : (
+ ''
+ )}
{
const value = React.useMemo(() => props.value, [props.value]);
const [intValue, setIntValue] = React.useState(value);
+ const [tableauError, setTableauError] = React.useState('');
const dataForm = { tableau_data: intValue };
+
const handleApplyChanges = () => {
onChange(id, intValue);
setOpen(false);
@@ -31,6 +34,22 @@ const VisualizationWidget = (props) => {
setIntValue(val);
};
+ const TableauNotDisplayed = () => {
+ return (
+
+
+ {!intValue.general.url ? (
+
URL required
+ ) : tableauError ? (
+
{tableauError}
+ ) : (
+ ''
+ )}
+
+
+ );
+ };
+
let schema = Schema(config);
React.useEffect(() => {
@@ -88,8 +107,14 @@ const VisualizationWidget = (props) => {
/>
-
+ {!intValue.general.url || tableauError ? (
+
+ ) : (
+ ''
+ )}
+
{
)}
+ {!intValue.general.url || tableauError ? : ''}
+
diff --git a/src/less/tableau.less b/src/less/tableau.less
index 75dde48..0126611 100644
--- a/src/less/tableau.less
+++ b/src/less/tableau.less
@@ -49,4 +49,20 @@
}
}
+.not_displayed_tableau {
+ background-color: #ebebeb;
+ height: 100%;
+ width: 100%;
+ min-width: 633px;
+ min-height: 200px;
+}
+
+.tableau-block {
+ .tableau-info {
+ p.tableau-error {
+ padding: 10px;
+ }
+ }
+}
+
.loadAddonOverrides();