Merge branch 'add_flow_to_options'

4 files changed, 71 insertions, 16 deletions

diff --git a/web/src/js/components/Header.js b/web/src/js/components/Header.js
index 7134f7d9..8aaa6411 100644
--- a/web/src/js/components/Header.js
+++ b/web/src/js/components/Header.js
@@ -1,42 +1,46 @@
 import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
 import classnames from 'classnames'
 import { toggleEventLogVisibility } from '../ducks/eventLog'
 import MainMenu from './Header/MainMenu'
 import ViewMenu from './Header/ViewMenu'
 import OptionMenu from './Header/OptionMenu'
 import FileMenu from './Header/FileMenu'
+import FlowMenu from './Header/FlowMenu'
+import {setActiveMenu} from '../ducks/ui.js'
 
-export default class Header extends Component {
-
+class Header extends Component {
     static entries = [MainMenu, ViewMenu, OptionMenu]
 
     static propTypes = {
         settings: PropTypes.object.isRequired,
     }
 
-    constructor(props, context) {
-        super(props, context)
-        this.state = { active: Header.entries[0] }
-    }
-
     handleClick(active, e) {
         e.preventDefault()
-        this.props.updateLocation(active.route)
-        this.setState({ active })
+        this.props.setActiveMenu(active.title)
+       // this.props.updateLocation(active.route)
+       // this.setState({ active })
     }
 
     render() {
-        const { active: Active } = this.state
-        const { settings, updateLocation, query } = this.props
+        const { settings, updateLocation, query, selectedFlow, activeMenu} = this.props
+
+        let entries = [...Header.entries]
+        if(selectedFlow)
+            entries.push(FlowMenu)
+
+        const Active = _.find(entries, (e) => e.title == activeMenu)
 
         return (
             <header>
                 <nav className="nav-tabs nav-tabs-lg">
                     <FileMenu/>
-                    {Header.entries.map(Entry => (
+                    {entries.map(Entry => (
                         <a key={Entry.title}
                            href="#"
-                           className={classnames({ active: Entry === Active })}
+                           className={classnames({ active: Entry === Active})}
                            onClick={e => this.handleClick(Entry, e)}>
                             {Entry.title}
                         </a>
@@ -44,13 +48,21 @@ export default class Header extends Component {
                 </nav>
                 <div className="menu">
                     <Active
-                        ref="active"
                         settings={settings}
                         updateLocation={updateLocation}
                         query={query}
-                    />
+                        />
                 </div>
             </header>
         )
     }
 }
+export default connect(
+    (state) => ({
+        selectedFlow: state.flows.selected[0],
+        activeMenu: state.ui.activeMenu
+    }),
+    dispatch => bindActionCreators({
+        setActiveMenu,
+    }, dispatch)
+)(Header)
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
new file mode 100644
index 00000000..4a43f40f
--- /dev/null
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -0,0 +1,32 @@
+import React, { PropTypes } from 'react'
+import { Button } from '../common.js'
+import {FlowActions} from "../../actions.js";
+import {MessageUtils} from "../../flow/utils.js";
+import { connect } from 'react-redux'
+
+FlowMenu.title = "Flow"
+
+FlowMenu.propTypes = {
+    flow: PropTypes.object.isRequired,
+}
+
+function FlowMenu({ flow }) {
+
+    return (
+        <div>
+            <div className="menu-row">
+               <Button disabled title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={FlowActions.replay.bind(null, flow)} />
+               <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={FlowActions.duplicate.bind(null, flow)} />
+               <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={FlowActions.delete.bind(null, flow)}/>
+               <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
+            </div>
+            <div className="clearfix"/>
+        </div>
+    )
+}
+
+export default connect(
+    state => ({
+        flow: state.flows.all.byId[state.flows.selected[0]]
+    })
+)(FlowMenu)
diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx
index dbea76e5..eb15af8a 100644
--- a/web/src/js/components/MainView.jsx
+++ b/web/src/js/components/MainView.jsx
@@ -1,7 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-
 import { FlowActions } from '../actions.js'
 import { Query } from '../actions.js'
 import { Key } from '../utils.js'
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 3496f1de..1497e15d 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -121,6 +121,18 @@ ToggleButton.propTypes = {
     text: React.PropTypes.string.isRequired
 };
 
+export const Button = ({onClick, text, icon}) =>
+    <div className={"btn btn-default"} onClick={onClick}>
+        <i className={"fa fa-fw " + icon}/>
+        &nbsp;
+        {text}
+    </div>;
+
+Button.propTypes = {
+    onClick: React.PropTypes.func.isRequired,
+    text: React.PropTypes.string.isRequired
+};
+
 export class ToggleInputButton extends React.Component {
     constructor(props) {
         super(props);