[web] Add Download/Load button to OptionEditor.

2 files changed, 28 insertions, 1 deletions

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 })
+}