Plugins disable functionalities (#1807)

* add expression to disable plugins

* add unit tests

web/client/components/plugins/PluginsContainer.jsx

@@ -76,7 +76,7 @@ const PluginsContainer = React.createClass({
     },
     renderPlugins(plugins) {
         return plugins
-            .filter((Plugin) => !PluginsUtils.handleExpression(this.props.pluginsState, this.props.plugins && this.props.plugins.requires, Plugin.hide))
+            .filter((Plugin) => !PluginsUtils.handleExpression(this.getState, this.props.plugins && this.props.plugins.requires, Plugin.hide))
             .map(this.getPluginDescriptor)
             .filter((Plugin) => Plugin && !Plugin.impl.loadPlugin)
             .filter(this.filterPlugins)

web/client/containers/Embedded.jsx

@@ -17,7 +17,7 @@ const ConfigUtils = require('../utils/ConfigUtils');
 const PluginsContainer = connect((state) => ({
     mode: (urlQuery.mode || (state.browser && state.browser.mobile ? 'mobile' : 'desktop')),
     pluginsState: state && state.controls || {},
-    monitoredState: PluginsUtils.filterState(state, ConfigUtils.getConfigProp('monitorState') || [])
+    monitoredState: PluginsUtils.getMonitoredState(state, ConfigUtils.getConfigProp('monitorState'))
 }))(require('../components/plugins/PluginsContainer'));
 
 const Embedded = React.createClass({

web/client/containers/MapViewer.jsx

@@ -19,7 +19,7 @@ const PluginsContainer = connect((state) => ({
     pluginsConfig: state.plugins || ConfigUtils.getConfigProp('plugins') || null,
     mode: (urlQuery.mode || state.mode || (state.browser && state.browser.mobile ? 'mobile' : 'desktop')),
     pluginsState: state && state.controls || {},
-    monitoredState: PluginsUtils.filterState(state, ConfigUtils.getConfigProp('monitorState') || [])
+    monitoredState: PluginsUtils.getMonitoredState(state, ConfigUtils.getConfigProp('monitorState'))
 }))(require('../components/plugins/PluginsContainer'));
 
 const MapViewer = React.createClass({

web/client/containers/Page.jsx

@@ -16,7 +16,7 @@ const ConfigUtils = require('../utils/ConfigUtils');
 
 const PluginsContainer = connect((state) => ({
     mode: urlQuery.mode || ((urlQuery.mobile || (state.browser && state.browser.mobile)) ? 'mobile' : 'desktop'),
-    monitoredState: PluginsUtils.filterState(state, ConfigUtils.getConfigProp('monitorState') || [])
+    monitoredState: PluginsUtils.getMonitoredState(state, ConfigUtils.getConfigProp('monitorState'))
 }))(require('../components/plugins/PluginsContainer'));
 
 const Page = React.createClass({

web/client/plugins/Locate.jsx

@@ -39,6 +39,7 @@ require('./locate/locate.css');
 
 module.exports = {
     LocatePlugin: assign(LocatePlugin, {
+        disablePluginIf: "{state('mapType') === 'cesium'}",
         Toolbar: {
             name: 'locate',
             position: 2,

web/client/plugins/Measure.jsx

@@ -50,6 +50,7 @@ const Measure = connect(
 
 module.exports = {
     MeasurePlugin: assign(Measure, {
+        disablePluginIf: "{state('mapType') === 'cesium'}",
         BurgerMenu: {
             name: 'measurement',
             position: 9,

web/client/plugins/Print.jsx

@@ -356,6 +356,7 @@ const PrintPlugin = connect(selector, {
 
 module.exports = {
     PrintPlugin: assign(PrintPlugin, {
+        disablePluginIf: "{state('mapType') === 'cesium'}",
         Toolbar: {
             name: 'print',
             position: 7,

web/client/plugins/ScaleBox.jsx

@@ -18,7 +18,7 @@ const Message = require('./locale/Message');
 const ScaleBox = require("../components/mapcontrols/scale/ScaleBox");
 
 const mapUtils = require('../utils/MapUtils');
-
+const assign = require('object-assign');
 
 const selector = createSelector([mapSelector], (map) => ({
     currentZoomLvl: map && map.zoom,
@@ -30,6 +30,16 @@ const selector = createSelector([mapSelector], (map) => ({
 
 require('./scalebox/scalebox.css');
 
+const ScaleBoxTool = React.createClass({
+    render() {
+        return (<HelpWrapper id="mapstore-scalebox-container"
+            key="scalebox-help"
+            helpText={<Message msgId="helptexts.scaleBox"/>}>
+                <ScaleBox key="scaleBox" {...this.props}/>
+        </HelpWrapper>);
+    }
+});
+
 /**
   * ScaleBox Plugin. Provides a selector for the scale of the map.
   * @class  ScaleBox
@@ -42,20 +52,12 @@ require('./scalebox/scalebox.css');
   * @prop {Boolean} cfg.useRawInput set true if you want to use an normal html input object
   *
   */
-const ScaleBoxPlugin = React.createClass({
-    render() {
-        return (<HelpWrapper id="mapstore-scalebox-container"
-            key="scalebox-help"
-            helpText={<Message msgId="helptexts.scaleBox"/>}>
-                <ScaleBox key="scaleBox" {...this.props}/>
-        </HelpWrapper>);
-    }
-});
-
-
+const ScaleBoxPlugin = connect(selector, {
+    onChange: changeZoomLevel
+})(ScaleBoxTool);
 module.exports = {
-    ScaleBoxPlugin: connect(selector, {
-        onChange: changeZoomLevel
-    })(ScaleBoxPlugin),
+    ScaleBoxPlugin: assign(ScaleBoxPlugin, {
+        disablePluginIf: "{state('mapType') === 'cesium'}"
+    }),
     reducers: {}
 };

web/client/plugins/ShapeFile.jsx

@@ -50,6 +50,7 @@ module.exports = {
             resolve(ShapeFilePlugin);
         });
     }, enabler: (state) => state.shapefile && state.shapefile.enabled || state.toolbar && state.toolbar.active === 'shapefile'}, {
+        disablePluginIf: "{state('mapType') === 'cesium'}",
         Toolbar: {
             name: 'shapefile',
             position: 9,

web/client/plugins/ZoomIn.jsx

@@ -10,6 +10,7 @@ const React = require('react');
 const {connect} = require('react-redux');
 const {createSelector} = require('reselect');
 const {mapSelector} = require('../selectors/map');
+
 // TODO: make step and glyphicon configurable
 const selector = createSelector([mapSelector], (map) => ({currentZoom: map && map.zoom, id: "zoomin-btn", step: 1, glyphicon: "plus"}));
 
@@ -38,6 +39,7 @@ const assign = require('object-assign');
 
 module.exports = {
     ZoomInPlugin: assign(ZoomInButton, {
+        disablePluginIf: "{state('mapType') === 'cesium'}",
         Toolbar: {
             name: "ZoomIn",
             position: 3,

web/client/plugins/ZoomOut.jsx

@@ -36,6 +36,7 @@ const assign = require('object-assign');
 
 module.exports = {
     ZoomOutPlugin: assign(ZoomOutButton, {
+        disablePluginIf: "{state('mapType') === 'cesium'}",
         Toolbar: {
             name: "ZoomOut",
             position: 4,

web/client/utils/PluginsUtils.js

@@ -11,7 +11,7 @@ const {omit, isObject, head, isArray, isString} = require('lodash');
 const {combineReducers} = require('redux');
 const {connect} = require('react-redux');
 const url = require('url');
-
+const defaultMonitoredState = [{name: "mapType", path: 'maptype.mapType'}, {name: "user", path: 'security.user'}];
 const {combineEpics} = require('redux-observable');
 
 const {memoize, get} = require('lodash');
@@ -66,6 +66,13 @@ const handleExpression = (state, context, expression) => {
     return expression;
 };
 
+const filterDisabledPlugins = (item, state = {}, plugins = {}) => {
+    const disablePluginIf = item && item.plugin && item.plugin.disablePluginIf || item.cfg.disablePluginIf;
+    if (disablePluginIf && !(item && item.cfg && item.cfg.skipAutoDisable)) {
+        return !handleExpression(state, plugins.requires, disablePluginIf);
+    }
+    return true;
+};
 const showIn = (state, requires, cfg, name, id, isDefault) => {
     return ((id && cfg.showIn && handleExpression(state, requires, cfg.showIn).indexOf(id) !== -1) ||
             (cfg.showIn && handleExpression(state, requires, cfg.showIn).indexOf(name) !== -1) ||
@@ -130,7 +137,7 @@ const getPluginItems = (state, plugins, pluginsConfig, name, id, isDefault, load
                         plugin: pluginImpl,
                         items: getPluginItems(state, plugins, pluginsConfig, pluginName, null, true, loadedPlugins)
                     });
-            });
+            }).filter( (item) => filterDisabledPlugins(item, state, plugins) );
 };
 
 const getReducers = (plugins) => Object.keys(plugins).map((name) => plugins[name].reducers)
@@ -182,6 +189,8 @@ const PluginsUtils = {
     },
     getReducers,
     filterState,
+    filterDisabledPlugins,
+    getMonitoredState: (state, monitorState = []) => filterState(state, defaultMonitoredState.concat(monitorState)),
     getPlugins: (plugins) => Object.keys(plugins).map((name) => plugins[name])
                                 .reduce((previous, current) => assign({}, previous, omit(current, 'reducers')), {}),
     /**

web/client/utils/__tests__/PluginUtils-test.js

@@ -140,6 +140,25 @@ describe('PluginsUtils', () => {
         const domElement = ReactDOM.findDOMNode(app);
         expect(domElement.innerText).toBe("plugintest");
     });
+    it('handleExpression', () => {
+        expect(PluginsUtils.handleExpression({state1: "test1"}, {context1: "test2"}, "{state.state1 + ' ' + context.context1}")).toBe("test1 test2");
+    });
+    it('filterState', () => {
+        expect(PluginsUtils.filterState({state1: "test1"}, [{name: "A", path: "state1"}]).A).toBe("test1");
+    });
+    it('filterDisabledPlugins', () => {
+        expect(PluginsUtils.filterDisabledPlugins(
+            {plugin: {
+                disablePluginIf: "{true}"
+            }},
+            {},
+            {}
+        )).toBe(false);
+    });
+    it('getMonitoredState', () => {
+        expect(PluginsUtils.getMonitoredState({maptype: {mapType: "leaflet"}}).mapType).toBe("leaflet");
+    });
+
     it('handleExpression', () => {
         expect(PluginsUtils.handleExpression({state1: "test1"}, {context1: "test2"}, "{state.state1 + ' ' + context.context1}")).toBe("test1 test2");
     });