add preference tab

browser/main/lib/ConfigManager.js

@@ -80,6 +80,10 @@ export const DEFAULT_CONFIG = {
     token: '',
     username: '',
     password: ''
+  },
+  export: {
+    action: 'DONT_EXPORT', // 'DONT_EXPORT', 'MERGE_HEADER', 'MERGE_VARIABLE'
+    variable: 'metadata'
   }
 }
 

browser/main/modals/PreferencesModal/ExportTab.js

@@ -0,0 +1,161 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ConfigTab.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+import _ from 'lodash'
+import i18n from 'browser/lib/i18n'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+
+class ExportTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      config: props.config
+    }
+  }
+
+  clearMessage () {
+    _.debounce(() => {
+      this.setState({
+        ExportAlert: null
+      })
+    }, 2000)()
+  }
+
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({
+          ExportAlert: {
+            type: 'success',
+            message: i18n.__('Successfully applied!')
+          }
+        }
+      )
+    }
+    this.handleSettingError = (err) => {
+      this.setState({
+          ExportAlert: {
+            type: 'error',
+            message: err.message != null ? err.message : i18n.__('An error occurred!')
+          }
+        }
+      )
+    }
+
+    this.oldExport = this.state.config.export
+
+    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  handleSaveButtonClick (e) {
+    const newConfig = {
+      export: this.state.config.export
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_UI',
+      config: newConfig
+    })
+
+    this.clearMessage()
+    this.props.haveToSave()
+  }
+
+  handleExportChange (e) {
+    const { config } = this.state
+
+    config.export = {
+      action: this.refs.action.value,
+      variable: !_.isNil(this.refs.variable) ? this.refs.variable.value : config.export.variable
+    }
+
+    this.setState({
+      config
+    })
+
+    if (_.isEqual(this.oldExport, config.export)) {
+      this.props.haveToSave()
+    } else {
+      this.props.haveToSave({
+        tab: 'Export',
+        type: 'warning',
+        message: i18n.__('Unsaved Changes!')
+      })
+    }
+  }
+
+  render () {
+    const { config, ExportAlert } = this.state
+    console.log(config.export)
+
+    const ExportAlertElement = ExportAlert != null
+      ? <p className={`alert ${ExportAlert.type}`}>
+        {ExportAlert.message}
+      </p>
+      : null
+
+    return (
+      <div styleName='root'>
+        <div styleName='group'>
+          <div styleName='group-header'>{i18n.__('Export')}</div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Action')}
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.export.action}
+                onChange={(e) => this.handleExportChange(e)}
+                ref='action'
+              >
+                <option value='DONT_EXPORT'>{i18n.__(`Don't export`)}</option>
+                <option value='MERGE_HEADER'>{i18n.__('Merge with the header')}</option>
+                <option value='MERGE_VARIABLE'>{i18n.__('Merge with a variable')}</option>
+              </select>
+            </div>
+          </div>
+
+          { config.export.action === 'MERGE_VARIABLE' &&
+            <div styleName='group-section'>
+              <div styleName='group-section-label'>{i18n.__('Variable Name')}</div>
+              <div styleName='group-section-control'>
+                <input styleName='group-section-control-input'
+                  onChange={(e) => this.handleExportChange(e)}
+                  ref='variable'
+                  value={config.export.variable}
+                  type='text' />
+              </div>
+            </div>
+          }
+
+          <div styleName='group-control'>
+            <button styleName='group-control-rightButton'
+              onClick={(e) => this.handleSaveButtonClick(e)}>{i18n.__('Save')}
+            </button>
+            {ExportAlertElement}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+ExportTab.propTypes = {
+  dispatch: PropTypes.func,
+  haveToSave: PropTypes.func
+}
+
+export default CSSModules(ExportTab, styles)

browser/main/modals/PreferencesModal/index.js

@@ -6,6 +6,7 @@ import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import Crowdfunding from './Crowdfunding'
 import StoragesTab from './StoragesTab'
+import ExportTab from './ExportTab'
 import SnippetTab from './SnippetTab'
 import Blog from './Blog'
 import ModalEscButton from 'browser/components/ModalEscButton'
@@ -23,7 +24,8 @@ class Preferences extends React.Component {
       currentTab: 'STORAGES',
       UIAlert: '',
       HotkeyAlert: '',
-      BlogAlert: ''
+      BlogAlert: '',
+      ExportAlert: ''
     }
   }
 
@@ -87,6 +89,15 @@ class Preferences extends React.Component {
             haveToSave={alert => this.setState({BlogAlert: alert})}
           />
         )
+       case 'EXPORT':
+        return (
+          <ExportTab
+            dispatch={dispatch}
+            config={config}
+            data={data}
+            haveToSave={alert => this.setState({ExportAlert: alert})}
+          />
+        )
       case 'SNIPPET':
         return (
           <SnippetTab
@@ -133,6 +144,7 @@ class Preferences extends React.Component {
       {target: 'INFO', label: i18n.__('About')},
       {target: 'CROWDFUNDING', label: i18n.__('Crowdfunding')},
       {target: 'BLOG', label: i18n.__('Blog'), Blog: this.state.BlogAlert},
+      {target: 'EXPORT', label: i18n.__('Export'), Export: this.state.ExportAlert},
       {target: 'SNIPPET', label: i18n.__('Snippets')}
     ]
 

yarn.lock

@@ -2938,9 +2938,9 @@ electron-winstaller@^2.2.0:
     lodash.template "^4.2.2"
     temp "^0.8.3"
 
-electron@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-3.0.3.tgz#2857ed8d37c1b46e0a75a72684800252255f3243"
+electron@3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-3.0.8.tgz#7905806ebaead4c693531e11cda6568c32efa7bb"
   dependencies:
     "@types/node" "^8.0.24"
     electron-download "^4.1.0"