1 files changed, 24 insertions, 7 deletions
diff --git a/web/src/js/components/FlowView/Nav.jsx b/web/src/js/components/FlowView/Nav.jsx
index 386c3a6c..b9e15d92 100644
--- a/web/src/js/components/FlowView/Nav.jsx
+++ b/web/src/js/components/FlowView/Nav.jsx
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
 import classnames from 'classnames'
-import { FlowActions } from '../../actions.js'
+import * as flowsActions from '../../ducks/flows'
 
 NavAction.propTypes = {
     icon: PropTypes.string.isRequired,
@@ -27,9 +28,14 @@ Nav.propTypes = {
     active: PropTypes.string.isRequired,
     tabs: PropTypes.array.isRequired,
     onSelectTab: PropTypes.func.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    onDuplicate: PropTypes.func.isRequired,
+    onReplay: PropTypes.func.isRequired,
+    onAccept: PropTypes.func.isRequired,
+    onRevert: PropTypes.func.isRequired,
 }
 
-export default function Nav({ flow, active, tabs, onSelectTab }) {
+function Nav({ flow, active, tabs, onSelectTab, onRemove, onDuplicate, onReplay, onAccept, onRevert }) {
     return (
         <nav className="nav-tabs nav-tabs-sm">
             {tabs.map(tab => (
@@ -43,15 +49,26 @@ export default function Nav({ flow, active, tabs, onSelectTab }) {
                     {_.capitalize(tab)}
                 </a>
             ))}
-            <NavAction title="[d]elete flow" icon="fa-trash" onClick={() => FlowActions.delete(flow)} />
-            <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={() => FlowActions.duplicate(flow)} />
-            <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={() => FlowActions.replay(flow)} />
+            <NavAction title="[d]elete flow" icon="fa-trash" onClick={() => onRemove(flow)} />
+            <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={() => onDuplicate(flow)} />
+            <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={() => onReplay(flow)} />
             {flow.intercepted && (
-                <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={() => FlowActions.accept(flow)} />
+                <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={() => onAccept(flow)} />
             )}
             {flow.modified && (
-                <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={() => FlowActions.revert(flow)} />
+                <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={() => onRevert(flow)} />
             )}
         </nav>
     )
 }
+
+export default connect(
+    null,
+    {
+        onRemove: flowsActions.remove,
+        onDuplicate: flowsActions.duplicate,
+        onReplay: flowsActions.replay,
+        onAccept: flowsActions.accept,
+        onRevert: flowsActions.revert,
+    }
+)(Nav)