From bf75e1457363739f9ea4329da71c03e48a0bb8af Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Tue, 14 Jun 2016 11:20:48 +0200
Subject: added flowMenu

---
 web/src/js/components/Header.js           | 35 +++++++++++++++++++------------
 web/src/js/components/Header/FlowMenu.jsx | 32 ++++++++++++++++++++++++++++
 web/src/js/components/MainView.jsx        |  5 +++++
 web/src/js/components/common.js           | 12 +++++++++++
 4 files changed, 71 insertions(+), 13 deletions(-)
 create mode 100644 web/src/js/components/Header/FlowMenu.jsx

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/Header.js b/web/src/js/components/Header.js
index 7134f7d9..07ae3a9f 100644
--- a/web/src/js/components/Header.js
+++ b/web/src/js/components/Header.js
@@ -1,39 +1,39 @@
 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/view'
 
-export default class Header extends Component {
+class Header extends Component {
 
-    static entries = [MainMenu, ViewMenu, OptionMenu]
+    static entries = [MainMenu, ViewMenu, OptionMenu, FlowMenu]
 
     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, active_menu} = this.props
+        const Active = _.find(Header.entries, (e) => e.title == active_menu);
+        const entries = selectedFlow ? Header.entries : Header.entries.filter((h) => h != FlowMenu)
         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 })}
@@ -54,3 +54,12 @@ export default class Header extends Component {
         )
     }
 }
+export default connect(
+    (state) => ({
+        selectedFlow: state.flows.selected[0],
+        active_menu: state.view.active_menu
+    }),
+    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..24013ca8 100644
--- a/web/src/js/components/MainView.jsx
+++ b/web/src/js/components/MainView.jsx
@@ -9,6 +9,7 @@ import { Splitter } from './common.js'
 import FlowTable from './FlowTable'
 import FlowView from './flowview/index.js'
 import { selectFlow, setFilter, setHighlight } from '../ducks/flows'
+import { setDefaultMenu, setFlowMenu } from '../ducks/view'
 
 class MainView extends Component {
 
@@ -39,8 +40,10 @@ class MainView extends Component {
      */
     selectFlow(flow) {
         if (flow) {
+            this.props.setFlowMenu()
             this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || 'request'}`)
         } else {
+            this.props.setDefaultMenu()
             this.props.updateLocation('/flows')
         }
     }
@@ -192,6 +195,8 @@ export default connect(
     }),
     dispatch => bindActionCreators({
         selectFlow,
+        setDefaultMenu,
+        setFlowMenu,
         setFilter,
         setHighlight,
     }, dispatch),
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);
-- 
cgit v1.2.3


From 003096b4cc4e268642eb842dbe94cd4439db1908 Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Tue, 14 Jun 2016 22:17:34 +0200
Subject: code review

---
 web/src/js/components/Header.js    | 21 +++++++++++----------
 web/src/js/components/MainView.jsx |  6 ------
 2 files changed, 11 insertions(+), 16 deletions(-)

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/Header.js b/web/src/js/components/Header.js
index 07ae3a9f..f0cd3dcd 100644
--- a/web/src/js/components/Header.js
+++ b/web/src/js/components/Header.js
@@ -27,28 +27,29 @@ class Header extends Component {
 
     render() {
         const { settings, updateLocation, query, selectedFlow, active_menu} = this.props
-        const Active = _.find(Header.entries, (e) => e.title == active_menu);
-        const entries = selectedFlow ? Header.entries : Header.entries.filter((h) => h != FlowMenu)
         return (
             <header>
                 <nav className="nav-tabs nav-tabs-lg">
                     <FileMenu/>
-                    {entries.map(Entry => (
+                    {Header.entries.map(Entry => (
                         <a key={Entry.title}
                            href="#"
-                           className={classnames({ active: Entry === Active })}
+                           className={classnames({ active: Entry.title === active_menu, hidden: !selectedFlow && Entry === FlowMenu })}
                            onClick={e => this.handleClick(Entry, e)}>
                             {Entry.title}
                         </a>
                     ))}
                 </nav>
                 <div className="menu">
-                    <Active
-                        ref="active"
-                        settings={settings}
-                        updateLocation={updateLocation}
-                        query={query}
-                    />
+                    {Header.entries.map(Entry => (
+                        <div className={classnames({ hidden: Entry.title !== active_menu })}>
+                            <Entry
+                                settings={settings}
+                                updateLocation={updateLocation}
+                                query={query}
+                                />
+                        </div>
+                    ))}
                 </div>
             </header>
         )
diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx
index 24013ca8..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'
@@ -9,7 +8,6 @@ import { Splitter } from './common.js'
 import FlowTable from './FlowTable'
 import FlowView from './flowview/index.js'
 import { selectFlow, setFilter, setHighlight } from '../ducks/flows'
-import { setDefaultMenu, setFlowMenu } from '../ducks/view'
 
 class MainView extends Component {
 
@@ -40,10 +38,8 @@ class MainView extends Component {
      */
     selectFlow(flow) {
         if (flow) {
-            this.props.setFlowMenu()
             this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || 'request'}`)
         } else {
-            this.props.setDefaultMenu()
             this.props.updateLocation('/flows')
         }
     }
@@ -195,8 +191,6 @@ export default connect(
     }),
     dispatch => bindActionCreators({
         selectFlow,
-        setDefaultMenu,
-        setFlowMenu,
         setFilter,
         setHighlight,
     }, dispatch),
-- 
cgit v1.2.3


From 00b4abfe8362748c197a32f7150d8b38a37e3739 Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Wed, 15 Jun 2016 00:19:33 +0200
Subject: add previous state to dispatch function

---
 web/src/js/components/Header.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/Header.js b/web/src/js/components/Header.js
index f0cd3dcd..080f438a 100644
--- a/web/src/js/components/Header.js
+++ b/web/src/js/components/Header.js
@@ -11,8 +11,7 @@ import FlowMenu from './Header/FlowMenu'
 import {setActiveMenu} from '../ducks/view'
 
 class Header extends Component {
-
-    static entries = [MainMenu, ViewMenu, OptionMenu, FlowMenu]
+    static entries = [MainMenu, ViewMenu, OptionMenu]
 
     static propTypes = {
         settings: PropTypes.object.isRequired,
@@ -27,29 +26,32 @@ class Header extends Component {
 
     render() {
         const { settings, updateLocation, query, selectedFlow, active_menu} = this.props
+
+        let entries = [...Header.entries]
+        if(selectedFlow)
+            entries.push(FlowMenu)
+
+        const Active = _.find(entries, (e) => e.title == active_menu)
+
         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.title === active_menu, hidden: !selectedFlow && Entry === FlowMenu })}
+                           className={classnames({ active: Entry === Active})}
                            onClick={e => this.handleClick(Entry, e)}>
                             {Entry.title}
                         </a>
                     ))}
                 </nav>
                 <div className="menu">
-                    {Header.entries.map(Entry => (
-                        <div className={classnames({ hidden: Entry.title !== active_menu })}>
-                            <Entry
-                                settings={settings}
-                                updateLocation={updateLocation}
-                                query={query}
-                                />
-                        </div>
-                    ))}
+                    <Active
+                        settings={settings}
+                        updateLocation={updateLocation}
+                        query={query}
+                        />
                 </div>
             </header>
         )
-- 
cgit v1.2.3


From 48e372bf98aeee718f6ce9758fd96d49fb2fd3a5 Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Wed, 15 Jun 2016 08:54:55 +0200
Subject: rename view -> ui, make code more readable

---
 web/src/js/components/Header.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/Header.js b/web/src/js/components/Header.js
index 080f438a..15d33ab3 100644
--- a/web/src/js/components/Header.js
+++ b/web/src/js/components/Header.js
@@ -8,7 +8,7 @@ import ViewMenu from './Header/ViewMenu'
 import OptionMenu from './Header/OptionMenu'
 import FileMenu from './Header/FileMenu'
 import FlowMenu from './Header/FlowMenu'
-import {setActiveMenu} from '../ducks/view'
+import {setActiveMenu} from '../ducks/ui.js'
 
 class Header extends Component {
     static entries = [MainMenu, ViewMenu, OptionMenu]
@@ -60,7 +60,7 @@ class Header extends Component {
 export default connect(
     (state) => ({
         selectedFlow: state.flows.selected[0],
-        active_menu: state.view.active_menu
+        active_menu: state.ui.active_menu
     }),
     dispatch => bindActionCreators({
         setActiveMenu,
-- 
cgit v1.2.3


From 94e2929b3fd6dc335d1c787167956df18f05494e Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Wed, 15 Jun 2016 13:39:56 -0700
Subject: minor fixes

---
 web/src/js/components/Header.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/Header.js b/web/src/js/components/Header.js
index 15d33ab3..8aaa6411 100644
--- a/web/src/js/components/Header.js
+++ b/web/src/js/components/Header.js
@@ -25,13 +25,13 @@ class Header extends Component {
     }
 
     render() {
-        const { settings, updateLocation, query, selectedFlow, active_menu} = 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 == active_menu)
+        const Active = _.find(entries, (e) => e.title == activeMenu)
 
         return (
             <header>
@@ -60,7 +60,7 @@ class Header extends Component {
 export default connect(
     (state) => ({
         selectedFlow: state.flows.selected[0],
-        active_menu: state.ui.active_menu
+        activeMenu: state.ui.activeMenu
     }),
     dispatch => bindActionCreators({
         setActiveMenu,
-- 
cgit v1.2.3