WIP

web/client/actions/widgets.js

@@ -187,6 +187,7 @@ const loadDependencies = (dependencies) => ({
 /**
  * Action triggered to start the connection flow. Typically starts the connection flow
  * @param {array} availableDependencies Array of available dependency keys
+ * @param {object} the map of available dependencies where to choose.
  * @param {object} options a map of connections to apply when the dependencies has been resolved
  * @param {string} target target of the connection. If not present we assume is the current editing widget (not yet supported)
  */

web/client/plugins/widgetbuilder/LegendBuilder.jsx

@@ -5,43 +5,96 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 const React = require('react');
-const {connect} = require('react-redux');
-const { compose, withProps } = require('recompose');
-const {onEditorChange, insertWidget, setPage} = require('../../actions/widgets');
-const {wizardSelector, wizardStateToProps} = require('./commons');
+const { connect } = require('react-redux');
+const {get} = require('lodash');
+const { compose, renameProps, mapPropsStream } = require('recompose');
+const InfoPopover = require('../../components/widgets/widget/InfoPopover');
+const Message = require('../../components/I18N/Message');
 const BorderLayout = require('../../components/layout/BorderLayout');
-const withExitButton = require('./enhancers/withExitButton');
-const BuilderHeader = require('./BuilderHeader');
 
-const Toolbar = compose(
-    connect(wizardSelector, {
-            setPage,
-            insertWidget,
-            onResetChange: onEditorChange
-        },
-        wizardStateToProps,
-    ),
-    withProps(({ onResetChange = () => { } }) => ({
-        exitButton: {
-            glyph: 'arrow-left',
-            tooltipId: "widgets.builder.wizard.backToWidgetTypeSelection",
-            onClick: () => onResetChange('widgetType', undefined)
-        }
-    })),
-    withExitButton(),
-)(require('../../components/widgets/builder/wizard/text/Toolbar'));
+const { insertWidget, onEditorChange, setPage, openFilterEditor, changeEditorSetting } = require('../../actions/widgets');
+const withMapConnect = require('./enhancers/connection/withMapConnect');
+
+const legendBuilderConnect = require('./enhancers/connection/legendBuilderConnect');
+const viewportBuilderConnectMask = require('./enhancers/connection/viewportBuilderConnectMask');
+const withExitButton = require('./enhancers/withExitButton');
+const withConnectButton = require('./enhancers/connection/withConnectButton');
+const {
+    wizardStateToProps,
+    wizardSelector
+} = require('./commons');
 
 const Builder = connect(
     wizardSelector,
     {
-        onChange: onEditorChange
+        setPage,
+        setValid: valid => changeEditorSetting("valid", valid),
+        onEditorChange,
+        insertWidget
     },
     wizardStateToProps
-)(require('../../components/widgets/builder/wizard/TextWizard'));
-module.exports = ({ enabled, onClose = () => {}} = {}) =>
+)(compose(
+    renameProps({
+        editorData: "data",
+        onEditorChange: "onChange"
+    })
+)(require('../../components/widgets/builder/wizard/TableWizard')));
+
+const BuilderHeader = require('./BuilderHeader');
+const Toolbar = compose(
+    connect(wizardSelector, {
+        openFilterEditor,
+        setPage,
+        onChange: onEditorChange,
+        insertWidget
+    },
+        wizardStateToProps
+    ),
+    legendBuilderConnect,
+    withExitButton(),
+    withConnectButton(({ step }) => step === 0)
+)(require('../../components/widgets/builder/wizard/table/Toolbar'));
+
+/*
+ * in case you don't have a layer selected (e.g. dashboard) the table builder
+ * prompts a catalog view to allow layer selection
+ */
+const builderEnhancer = compose(
+    connect(wizardSelector),
+    viewportBuilderConnectMask,
+    legendBuilderConnect,
+    withMapConnect({ center: "center", "zoom": "zoom" }),
+    // auto trigger connect if not in sync
+    mapPropsStream(
+        props$ => props$.merge(
+            props$
+                .distinctUntilKeyChanged('mapSync')
+                .filter( ({mapSync}) => !mapSync)
+                .do(({ toggleConnection = () => {} }) => toggleConnection())
+                .ignoreElements()
+        )
+    )
+);
+
+module.exports = builderEnhancer(({ enabled, onClose = () => { }, editorData = {}, exitButton, toggleConnection, availableDependencies = [], dependencies, ...props } = {}) =>
+
     (<BorderLayout
-        header={<BuilderHeader onClose={onClose}><Toolbar /></BuilderHeader>}
-        >
-        {enabled ? <Builder /> : null}
-    </BorderLayout>);
+        header={
+            <BuilderHeader onClose={onClose}>
+                <Toolbar
+                    editorData={editorData}
+                    exitButton={exitButton}
+                    toggleConnection={toggleConnection}
+                    availableDependencies={availableDependencies}
+                    onClose={onClose} />
+                {get(editorData, "options.propertyName.length") === 0 ? <InfoPopover
+                    trigger={false}
+                    glyph="exclamation-mark"
+                    bsStyle="warning"
+                    text={<Message msgId="widgets.builder.errors.checkAtLeastOneAttribute" />} /> : null}
+            </BuilderHeader>}
+    >
+        {enabled ? <Builder editorData={editorData} dependencies={dependencies} {...props} /> : null}
+    </BorderLayout>));

web/client/plugins/widgetbuilder/WidgetTypeBuilder.jsx

@@ -27,7 +27,8 @@ const Builders = {
     text: require('./TextBuilder'),
     table: require('./TableBuilder'),
     map: require('./MapBuilder'),
-    counter: require('./CounterBuilder')
+    counter: require('./CounterBuilder'),
+    legend: require('./LegendBuilder')
 };
 
 /**

web/client/plugins/widgetbuilder/enhancers/connection/legendBuilderConnect.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2018, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const { withProps, compose } = require('recompose');
+
+const withMapConnect = require('./withMapConnect');
+/**
+ * Enhancer for MapBuilder to allow connection configuration.
+ *
+ */
+module.exports = compose(
+    withProps(({ availableDependencies = [], editorData = {}} = {}) => ({
+        availableDependencies: availableDependencies.filter(d => !(editorData.id && d.indexOf(editorData.id) >= 0))
+    })),
+    withProps(({ editorData = {}, availableDependencies = []}) => ({
+        canConnect: availableDependencies.length > 0,
+        connected: !!editorData.mapSync
+    })),
+    withMapConnect({center: "center", "zoom": "zoom"})
+);