From 663e6026fbbf0ce1c1e96d2dd5b46dcda9bb3e06 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Fri, 21 Jul 2017 22:58:20 +0800
Subject: [web] Add default value suggester in option editor.

---
 web/src/js/components/Modal/OptionModal.jsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

(limited to 'web/src')

diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 5741ee8c..2a95f43b 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/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>
                             )
-- 
cgit v1.2.3


From a0d14caa897c64c4e41605a1a514ebef5b1a9faf Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Fri, 21 Jul 2017 23:00:10 +0800
Subject: [web] Update tests.

---
 .../Modal/__snapshots__/ModalSpec.js.snap          | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)

(limited to 'web/src')

diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
index bfd855bd..0b904c07 100644
--- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -136,6 +136,17 @@ exports[`Modal Component should render correctly 2`] = `
                       </option>
                     </select>
                   </div>
+                  <div
+                    className="small"
+                  >
+                    Default: 
+                    <strong>
+                       
+                      a
+                       
+                    </strong>
+                     
+                  </div>
                 </div>
               </div>
               <div
@@ -170,6 +181,17 @@ exports[`Modal Component should render correctly 2`] = `
                       value={1}
                     />
                   </div>
+                  <div
+                    className="small"
+                  >
+                    Default: 
+                    <strong>
+                       
+                      0
+                       
+                    </strong>
+                     
+                  </div>
                 </div>
               </div>
               <div
@@ -207,6 +229,17 @@ exports[`Modal Component should render correctly 2`] = `
                   <div
                     className="small text-danger"
                   />
+                  <div
+                    className="small"
+                  >
+                    Default: 
+                    <strong>
+                       
+                      null
+                       
+                    </strong>
+                     
+                  </div>
                 </div>
               </div>
             </div>
-- 
cgit v1.2.3


From 93cd1562def9e5c760b1b1f6a552440a83bae383 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Sat, 22 Jul 2017 21:16:16 +0800
Subject: [web] OptionModal component coverge ++.

---
 .../__tests__/components/Modal/OptionModalSpec.js  | 54 +++++++++++++++++++
 .../Modal/__snapshots__/OptionModalSpec.js.snap    | 61 ++++++++++++++++++++++
 web/src/js/components/Modal/OptionModal.jsx        |  2 +-
 3 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 web/src/js/__tests__/components/Modal/OptionModalSpec.js
 create mode 100644 web/src/js/__tests__/components/Modal/__snapshots__/OptionModalSpec.js.snap

(limited to 'web/src')

diff --git a/web/src/js/__tests__/components/Modal/OptionModalSpec.js b/web/src/js/__tests__/components/Modal/OptionModalSpec.js
new file mode 100644
index 00000000..dd4e70a2
--- /dev/null
+++ b/web/src/js/__tests__/components/Modal/OptionModalSpec.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { PureOptionDefault } from '../../../components/Modal/OptionModal'
+
+describe('PureOptionDefault Component', () => {
+
+    it('should return null when the value is default', () => {
+        let pureOptionDefault = renderer.create(
+            <PureOptionDefault value="foo" defaultVal="foo"/>
+        ),
+            tree = pureOptionDefault.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle boolean type', () => {
+        let pureOptionDefault = renderer.create(
+            <PureOptionDefault value={true} defaultVal={false}/>
+        ),
+            tree = pureOptionDefault.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle array', () => {
+        let a = [""], b = [], c = ['c'],
+            pureOptionDefault = renderer.create(
+                <PureOptionDefault value={a} defaultVal={b}/>
+            ),
+            tree = pureOptionDefault.toJSON()
+        expect(tree).toMatchSnapshot()
+
+        pureOptionDefault = renderer.create(
+            <PureOptionDefault value={a} defaultVal={c}/>
+        )
+        tree = pureOptionDefault.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle string', () => {
+        let pureOptionDefault = renderer.create(
+            <PureOptionDefault value="foo" defaultVal=""/>
+        ),
+            tree = pureOptionDefault.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle null value', () => {
+        let pureOptionDefault = renderer.create(
+            <PureOptionDefault value="foo" defaultVal={null}/>
+        ),
+            tree = pureOptionDefault.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+})
diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/OptionModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/OptionModalSpec.js.snap
new file mode 100644
index 00000000..68f1c9fc
--- /dev/null
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/OptionModalSpec.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PureOptionDefault Component should handle array 1`] = `null`;
+
+exports[`PureOptionDefault Component should handle array 2`] = `
+<div
+  className="small"
+>
+  Default: 
+  <strong>
+     
+    [ ]
+     
+  </strong>
+   
+</div>
+`;
+
+exports[`PureOptionDefault Component should handle boolean type 1`] = `
+<div
+  className="small"
+>
+  Default: 
+  <strong>
+     
+    false
+     
+  </strong>
+   
+</div>
+`;
+
+exports[`PureOptionDefault Component should handle null value 1`] = `
+<div
+  className="small"
+>
+  Default: 
+  <strong>
+     
+    null
+     
+  </strong>
+   
+</div>
+`;
+
+exports[`PureOptionDefault Component should handle string 1`] = `
+<div
+  className="small"
+>
+  Default: 
+  <strong>
+     
+    ""
+     
+  </strong>
+   
+</div>
+`;
+
+exports[`PureOptionDefault Component should return null when the value is default 1`] = `null`;
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 2a95f43b..35ba3a2e 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -19,7 +19,7 @@ const OptionError = connect((state, {name}) => ({
     error: state.ui.optionsEditor[name] && state.ui.optionsEditor[name].error
 }))(PureOptionError);
 
-function PureOptionDefault({value, defaultVal}){
+export function PureOptionDefault({value, defaultVal}){
     if( value === defaultVal ) {
         return null
     } else {
-- 
cgit v1.2.3


From 8c3e988a8c95bae7235d5de4ba8e85e77988c395 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Mon, 24 Jul 2017 20:34:15 +0800
Subject: [web] Add Download/Load button to OptionEditor.

---
 web/src/js/components/Modal/OptionModal.jsx | 17 ++++++++++++++++-
 web/src/js/ducks/options.js                 | 12 ++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

(limited to 'web/src')

diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 35ba3a2e..6595717d 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -1,7 +1,9 @@
 import React, { Component } from "react"
 import { connect } from "react-redux"
 import * as modalAction from "../../ducks/ui/modal"
+import * as optionAction from "../../ducks/options"
 import Option from "./Option"
+import FileChooser from '../../components/common/FileChooser'
 import _ from "lodash"
 
 function PureOptionHelp({help}){
@@ -52,7 +54,7 @@ class PureOptionModal extends Component {
     }
 
     render() {
-        const { hideModal, options } = this.props
+        const { hideModal, options, download, upload } = this.props
         const { title } = this.state
         return (
             <div>
@@ -88,6 +90,17 @@ class PureOptionModal extends Component {
                 </div>
 
                 <div className="modal-footer">
+                    <button type="button" className="btn btn-default" onClick={download}>
+                        <i className="fa fa-download"></i>
+                        Download
+                    </button>
+
+                    <FileChooser
+                        icon="fa-upload"
+                        onOpenFile={file => {upload(file); alert('Option configuration loaded!')}}
+                        text="Load"
+                        className="btn btn-primary"
+                    />
                 </div>
             </div>
         )
@@ -100,5 +113,7 @@ export default connect(
     }),
     {
         hideModal: modalAction.hideModal,
+        download: optionAction.download,
+        upload: optionAction.upload,
     }
 )(PureOptionModal)
diff --git a/web/src/js/ducks/options.js b/web/src/js/ducks/options.js
index 06144a3c..b22030a3 100644
--- a/web/src/js/ducks/options.js
+++ b/web/src/js/ducks/options.js
@@ -5,6 +5,7 @@ import _ from "lodash"
 export const RECEIVE = 'OPTIONS_RECEIVE'
 export const UPDATE = 'OPTIONS_UPDATE'
 export const REQUEST_UPDATE = 'REQUEST_UPDATE'
+export const SAVE = 'OPTION_SAVE'
 
 const defaultState = {}
 
@@ -44,3 +45,14 @@ export function update(option, value) {
         sendUpdate(option, value, dispatch);
     }
 }
+
+export function download() {
+    window.location = '/options/dump'
+    return { type: SAVE }
+}
+
+export function upload(file) {
+    const body = new FormData()
+    body.append('file', file)
+    return dispatch => fetchApi('/options/dump', { method: 'POST', body })
+}
-- 
cgit v1.2.3


From 5c45a90ce961d740e59644f4de0f8ffe97a5706c Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Mon, 24 Jul 2017 20:35:43 +0800
Subject: [web] Update tests.

---
 .../Modal/__snapshots__/ModalSpec.js.snap          | 29 +++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

(limited to 'web/src')

diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
index 0b904c07..92dad72b 100644
--- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -246,7 +246,34 @@ exports[`Modal Component should render correctly 2`] = `
           </div>
           <div
             className="modal-footer"
-          />
+          >
+            <button
+              className="btn btn-default"
+              onClick={[Function]}
+              type="button"
+            >
+              <i
+                className="fa fa-download"
+              />
+              Download
+            </button>
+            <a
+              className="btn btn-primary"
+              href="#"
+              onClick={[Function]}
+              title={undefined}
+            >
+              <i
+                className="fa fa-fw fa-upload"
+              />
+              Load
+              <input
+                className="hidden"
+                onChange={[Function]}
+                type="file"
+              />
+            </a>
+          </div>
         </div>
       </div>
     </div>
-- 
cgit v1.2.3


From c7e41b32abba017210ef5c2dc3961554a9b6b9b3 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Wed, 26 Jul 2017 15:09:11 +0800
Subject: [web] Update options auto dump for frontend.

---
 web/src/js/components/Modal/Option.jsx      |  2 +-
 web/src/js/components/Modal/OptionModal.jsx | 18 +++---------------
 web/src/js/ducks/options.js                 | 12 ++----------
 3 files changed, 6 insertions(+), 26 deletions(-)

(limited to 'web/src')

diff --git a/web/src/js/components/Modal/Option.jsx b/web/src/js/components/Modal/Option.jsx
index 58b863d1..38e2f239 100644
--- a/web/src/js/components/Modal/Option.jsx
+++ b/web/src/js/components/Modal/Option.jsx
@@ -74,7 +74,7 @@ export function ChoicesOption({ value, onChange, choices, ...props }) {
     return (
         <select
             onChange={(e) => onChange(e.target.value)}
-            selected={value}
+            value={value}
             {...props}
         >
             { choices.map(
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 6595717d..bc25214a 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -3,7 +3,6 @@ import { connect } from "react-redux"
 import * as modalAction from "../../ducks/ui/modal"
 import * as optionAction from "../../ducks/options"
 import Option from "./Option"
-import FileChooser from '../../components/common/FileChooser'
 import _ from "lodash"
 
 function PureOptionHelp({help}){
@@ -54,13 +53,14 @@ class PureOptionModal extends Component {
     }
 
     render() {
-        const { hideModal, options, download, upload } = this.props
+        const { hideModal, options, dump } = this.props
         const { title } = this.state
         return (
             <div>
                 <div className="modal-header">
                     <button type="button" className="close" data-dismiss="modal" onClick={() => {
                         hideModal()
+                        dump()
                     }}>
                         <i className="fa fa-fw fa-times"></i>
                     </button>
@@ -90,17 +90,6 @@ class PureOptionModal extends Component {
                 </div>
 
                 <div className="modal-footer">
-                    <button type="button" className="btn btn-default" onClick={download}>
-                        <i className="fa fa-download"></i>
-                        Download
-                    </button>
-
-                    <FileChooser
-                        icon="fa-upload"
-                        onOpenFile={file => {upload(file); alert('Option configuration loaded!')}}
-                        text="Load"
-                        className="btn btn-primary"
-                    />
                 </div>
             </div>
         )
@@ -113,7 +102,6 @@ export default connect(
     }),
     {
         hideModal: modalAction.hideModal,
-        download: optionAction.download,
-        upload: optionAction.upload,
+        dump: optionAction.dump,
     }
 )(PureOptionModal)
diff --git a/web/src/js/ducks/options.js b/web/src/js/ducks/options.js
index b22030a3..d319b171 100644
--- a/web/src/js/ducks/options.js
+++ b/web/src/js/ducks/options.js
@@ -5,7 +5,6 @@ import _ from "lodash"
 export const RECEIVE = 'OPTIONS_RECEIVE'
 export const UPDATE = 'OPTIONS_UPDATE'
 export const REQUEST_UPDATE = 'REQUEST_UPDATE'
-export const SAVE = 'OPTION_SAVE'
 
 const defaultState = {}
 
@@ -46,13 +45,6 @@ export function update(option, value) {
     }
 }
 
-export function download() {
-    window.location = '/options/dump'
-    return { type: SAVE }
-}
-
-export function upload(file) {
-    const body = new FormData()
-    body.append('file', file)
-    return dispatch => fetchApi('/options/dump', { method: 'POST', body })
+export function dump() {
+    return dispatch => fetchApi('/options/dump', { method: 'POST' })
 }
-- 
cgit v1.2.3


From 4282dc1ac4053d774b0fe6993ae15222fcfe3b3d Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Wed, 26 Jul 2017 15:16:23 +0800
Subject: [web] Update tests.

---
 .../Modal/__snapshots__/ModalSpec.js.snap          | 31 ++--------------------
 .../Modal/__snapshots__/OptionSpec.js.snap         |  2 +-
 web/src/js/__tests__/ducks/optionsSpec.js          | 15 +++++++++++
 3 files changed, 18 insertions(+), 30 deletions(-)

(limited to 'web/src')

diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
index 92dad72b..8d9271f1 100644
--- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -117,7 +117,7 @@ exports[`Modal Component should render correctly 2`] = `
                       name="choiceOption"
                       onChange={[Function]}
                       onKeyDown={[Function]}
-                      selected="b"
+                      value="b"
                     >
                       <option
                         value="a"
@@ -246,34 +246,7 @@ exports[`Modal Component should render correctly 2`] = `
           </div>
           <div
             className="modal-footer"
-          >
-            <button
-              className="btn btn-default"
-              onClick={[Function]}
-              type="button"
-            >
-              <i
-                className="fa fa-download"
-              />
-              Download
-            </button>
-            <a
-              className="btn btn-primary"
-              href="#"
-              onClick={[Function]}
-              title={undefined}
-            >
-              <i
-                className="fa fa-fw fa-upload"
-              />
-              Load
-              <input
-                className="hidden"
-                onChange={[Function]}
-                type="file"
-              />
-            </a>
-          </div>
+          />
         </div>
       </div>
     </div>
diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap
index 514e0eb5..257bddce 100644
--- a/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap
@@ -18,7 +18,7 @@ exports[`BooleanOption Component should render correctly 1`] = `
 exports[`ChoiceOption Component should render correctly 1`] = `
 <select
   onChange={[Function]}
-  selected="a"
+  value="a"
 >
   <option
     value="a"
diff --git a/web/src/js/__tests__/ducks/optionsSpec.js b/web/src/js/__tests__/ducks/optionsSpec.js
index 0925fcc1..a0d11f9c 100644
--- a/web/src/js/__tests__/ducks/optionsSpec.js
+++ b/web/src/js/__tests__/ducks/optionsSpec.js
@@ -49,3 +49,18 @@ describe('sendUpdate', () => {
         ])
     })
 })
+
+describe('dump', () => {
+
+    it('should dump options', () => {
+        global.fetch = jest.fn()
+        store.dispatch(OptionsActions.dump())
+        expect(fetch).toBeCalledWith(
+            '/options/dump?_xsrf=undefined',
+            {
+                credentials: "same-origin",
+                method: "POST"
+            }
+        )
+    })
+})
-- 
cgit v1.2.3


From 7e5f424c5013a591e71f570b003e34f8e6788869 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Thu, 27 Jul 2017 11:22:02 +0800
Subject: [web] Minor fix for frontend and tests.

---
 web/src/js/__tests__/ducks/optionsSpec.js   | 6 +++---
 web/src/js/components/Modal/OptionModal.jsx | 9 ++++++---
 web/src/js/ducks/options.js                 | 4 ++--
 3 files changed, 11 insertions(+), 8 deletions(-)

(limited to 'web/src')

diff --git a/web/src/js/__tests__/ducks/optionsSpec.js b/web/src/js/__tests__/ducks/optionsSpec.js
index a0d11f9c..9178c14e 100644
--- a/web/src/js/__tests__/ducks/optionsSpec.js
+++ b/web/src/js/__tests__/ducks/optionsSpec.js
@@ -50,13 +50,13 @@ describe('sendUpdate', () => {
     })
 })
 
-describe('dump', () => {
+describe('save', () => {
 
     it('should dump options', () => {
         global.fetch = jest.fn()
-        store.dispatch(OptionsActions.dump())
+        store.dispatch(OptionsActions.save())
         expect(fetch).toBeCalledWith(
-            '/options/dump?_xsrf=undefined',
+            '/options/save?_xsrf=undefined',
             {
                 credentials: "same-origin",
                 method: "POST"
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index bc25214a..82ef8350 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -52,15 +52,18 @@ class PureOptionModal extends Component {
         this.state = { title: 'Options' }
     }
 
+    componentWillUnmount(){
+        this.props.save()
+    }
+
     render() {
-        const { hideModal, options, dump } = this.props
+        const { hideModal, options } = this.props
         const { title } = this.state
         return (
             <div>
                 <div className="modal-header">
                     <button type="button" className="close" data-dismiss="modal" onClick={() => {
                         hideModal()
-                        dump()
                     }}>
                         <i className="fa fa-fw fa-times"></i>
                     </button>
@@ -102,6 +105,6 @@ export default connect(
     }),
     {
         hideModal: modalAction.hideModal,
-        dump: optionAction.dump,
+        save: optionAction.save,
     }
 )(PureOptionModal)
diff --git a/web/src/js/ducks/options.js b/web/src/js/ducks/options.js
index d319b171..0da0fb8c 100644
--- a/web/src/js/ducks/options.js
+++ b/web/src/js/ducks/options.js
@@ -45,6 +45,6 @@ export function update(option, value) {
     }
 }
 
-export function dump() {
-    return dispatch => fetchApi('/options/dump', { method: 'POST' })
+export function save() {
+    return dispatch => fetchApi('/options/save', { method: 'POST' })
 }
-- 
cgit v1.2.3