Added template configuration for plugins in the plugins example

web/client/examples/plugins/app.jsx

@@ -77,6 +77,7 @@ const startApp = () => {
         return Object.keys(plugins).map((plugin) => {
             const pluginName = plugin.substring(0, plugin.length - 6);
             return (<PluginConfigurator key={pluginName} pluginName={pluginName} pluginsCfg={pluginsCfg.standard}
+                pluginImpl={plugins[plugin][plugin]}
                 onToggle={togglePlugin.bind(null, pluginName, callback)}
                 onApplyCfg={configurePlugin.bind(null, plugin, callback)}
                 pluginConfig={userCfg[pluginName + 'Plugin'] && JSON.stringify(userCfg[pluginName + 'Plugin'], null, 2) || "{}"}

web/client/examples/plugins/components/PluginConfigurator.jsx

@@ -13,14 +13,16 @@ require('codemirror/lib/codemirror.css');
 
 require('codemirror/mode/javascript/javascript');
 
+const assign = require('object-assign');
 
 const PluginConfigurator = React.createClass({
     propTypes: {
         pluginName: React.PropTypes.string,
         pluginsCfg: React.PropTypes.array,
         onToggle: React.PropTypes.func,
         onApplyCfg: React.PropTypes.func,
-        pluginConfig: React.PropTypes.string
+        pluginConfig: React.PropTypes.string,
+        pluginImpl: React.PropTypes.object
     },
     getInitialState() {
         return {
@@ -40,14 +42,33 @@ const PluginConfigurator = React.createClass({
             });
         }
     },
+    getPropValue(type) {
+        if (type === React.PropTypes.string || type === React.PropTypes.string.isRequired) {
+            return '';
+        }
+        if (type === React.PropTypes.number || type === React.PropTypes.number.isRequired) {
+            return 0;
+        }
+        if (type === React.PropTypes.bool || type === React.PropTypes.bool.isRequired) {
+            return false;
+        }
+        if (type === React.PropTypes.object || type === React.PropTypes.object.isRequired) {
+            return {};
+        }
+        if (type === React.PropTypes.array || type === React.PropTypes.array.isRequired) {
+            return [];
+        }
+        return null;
+    },
     renderCfg() {
         return this.state.configVisible ? [
             <label key="config-label">Enter a JSON object to configure plugin properties</label>,
             <Codemirror key="code-mirror" value={this.state.code} onChange={this.updateCode} options={{
                     mode: {name: "javascript", json: true},
                     lineNumbers: true
                 }}/>,
-            <Button key="apply-cfg" onClick={this.applyCfg}>Apply</Button>
+            <Button key="apply-cfg" onClick={this.applyCfg}>Apply</Button>,
+            <Button key="help-cfg" onClick={this.showProps}><Glyphicon glyph="question-sign"/></Button>
         ] : null;
     },
     render() {
@@ -58,11 +79,26 @@ const PluginConfigurator = React.createClass({
                 checked={this.props.pluginsCfg.indexOf(this.props.pluginName) !== -1}
                 label={this.props.pluginName}
                 onChange={this.props.onToggle}/>
-
             {this.renderCfg()}
         </li>);
     },
-    updateCode: function(newCode) {
+    showProps() {
+        if (this.props.pluginImpl) {
+            const plugin = this.props.pluginImpl;
+            const pluginProps = plugin.WrappedComponent && plugin.WrappedComponent.propTypes || plugin.propTypes;
+
+            const propsValues = (plugin.WrappedComponent && plugin.WrappedComponent.getDefaultProps && plugin.WrappedComponent.getDefaultProps()) ||
+                (plugin.getDefaultProps && plugin.getDefaultProps()) || {};
+
+            const props = Object.keys(pluginProps || {}).reduce((previous, current) => {
+                return assign(previous, {[current]: this.getPropValue(pluginProps[current])}, propsValues);
+            }, {});
+            this.setState({
+                code: JSON.stringify(props, null, 4)
+            });
+        }
+    },
+    updateCode(newCode) {
         this.setState({
             code: newCode
         });