[web] Add default value suggester in option editor.

web/src/js/components/Modal/OptionModal.jsx

@@ -2,6 +2,7 @@ import React, { Component } from "react"
 import { connect } from "react-redux"
 import * as modalAction from "../../ducks/ui/modal"
 import Option from "./Option"
+import _ from "lodash"
 
 function PureOptionHelp({help}){
     return <div className="help-block small">{help}</div>;
@@ -18,6 +19,31 @@ const OptionError = connect((state, {name}) => ({
     error: state.ui.optionsEditor[name] && state.ui.optionsEditor[name].error
 }))(PureOptionError);
 
+function PureOptionDefault({value, defaultVal}){
+    if( value === defaultVal ) {
+        return null
+    } else {
+        if (typeof(defaultVal) === 'boolean') {
+            defaultVal = defaultVal ? 'true' : 'false'
+        } else if (Array.isArray(defaultVal)){
+            if (_.isEmpty(_.compact(value)) && // filter the empty string in array
+                _.isEmpty(defaultVal)){
+                return null
+            }
+            defaultVal = '[ ]'
+        } else if (defaultVal === ''){
+            defaultVal = '\"\"'
+        } else if (defaultVal === null){
+            defaultVal = 'null'
+        }
+        return <div className="small">Default: <strong> {defaultVal} </strong> </div>
+    }
+}
+const OptionDefault = connect((state, {name}) => ({
+    value: state.options[name].value,
+    defaultVal: state.options[name].default
+}))(PureOptionDefault)
+
 class PureOptionModal extends Component {
 
     constructor(props, context) {
@@ -53,6 +79,7 @@ class PureOptionModal extends Component {
                                     <div className="col-xs-6">
                                         <Option name={name}/>
                                         <OptionError name={name}/>
+                                        <OptionDefault name={name}/>
                                     </div>
                                 </div>
                             )