Merge remote-tracking branch 'origin/master' into flow_editing

1 files changed, 23 insertions, 32 deletions

diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx
index 0ef6e5cd..5ba472a5 100644
--- a/web/src/js/components/FlowView.jsx
+++ b/web/src/js/components/FlowView.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import _ from 'lodash'
 
 import Nav from './FlowView/Nav'
@@ -6,47 +7,29 @@ import { Request, Response, ErrorView as Error } from './FlowView/Messages'
 import Details from './FlowView/Details'
 import Prompt from './Prompt'
 
+import { setPrompt, selectTab } from '../ducks/ui'
+
 export default class FlowView extends Component {
 
     static allTabs = { Request, Response, Error, Details }
 
     constructor(props, context) {
         super(props, context)
-
-        this.state = { prompt: false }
-
-        this.closePrompt = this.closePrompt.bind(this)
-        this.selectTab = this.selectTab.bind(this)
-    }
-
-    getTabs() {
-        return ['request', 'response', 'error'].filter(k => this.props.flow[k]).concat(['details'])
-    }
-
-    nextTab(increment) {
-        const tabs = this.getTabs()
-        // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
-        this.selectTab(tabs[(tabs.indexOf(this.props.tab) + increment + tabs.length) % tabs.length])
+        this.onPromptFinish = this.onPromptFinish.bind(this)
     }
 
-    selectTab(panel) {
-        this.props.updateLocation(`/flows/${this.props.flow.id}/${panel}`)
-    }
-
-    closePrompt(edit) {
-        this.setState({ prompt: false })
+    onPromptFinish(edit) {
+        this.props.setPrompt(false)
         if (edit && this.tabComponent) {
             this.tabComponent.edit(edit)
         }
     }
 
-    promptEdit() {
-        let options
-
+    getPromptOptions() {
         switch (this.props.tab) {
 
             case 'request':
-                options = [
+                return [
                     'method',
                     'url',
                     { text: 'http version', key: 'v' },
@@ -55,7 +38,7 @@ export default class FlowView extends Component {
                 break
 
             case 'response':
-                options = [
+                return [
                     { text: 'http version', key: 'v' },
                     'code',
                     'message',
@@ -69,13 +52,11 @@ export default class FlowView extends Component {
             default:
                 throw 'Unknown tab for edit: ' + this.props.tab
         }
-
-        this.setState({ prompt: { options, done: this.closePrompt } })
     }
 
     render() {
-        const tabs = this.getTabs()
         let { flow, tab: active, updateFlow } = this.props
+        const tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details'])
 
         if (tabs.indexOf(active) < 0) {
             if (active === 'response' && flow.error) {
@@ -95,13 +76,23 @@ export default class FlowView extends Component {
                     flow={flow}
                     tabs={tabs}
                     active={active}
-                    onSelectTab={this.selectTab}
+                    onSelectTab={this.props.selectTab}
                 />
                 <Tab ref={ tab => this.tabComponent = tab } flow={flow} updateFlow={updateFlow} />
-                {this.state.prompt && (
-                    <Prompt {...this.state.prompt}/>
+                {this.props.promptOpen && (
+                    <Prompt options={this.getPromptOptions()} done={this.onPromptFinish} />
                 )}
             </div>
         )
     }
 }
+
+export default connect(
+    state => ({
+        promptOpen: state.ui.promptOpen,
+    }),
+    {
+        setPrompt,
+        selectTab,
+    }
+)(FlowView)