1 files changed, 24 insertions, 34 deletions

diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js
index 739a46dc..47531f58 100644
--- a/web/src/js/components/flowview/index.js
+++ b/web/src/js/components/flowview/index.js
@@ -1,22 +1,21 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
 
-var common = require("../common.js");
-var Nav = require("./nav.js");
-var Messages = require("./messages.js");
-var Details = require("./details.js");
-var Prompt = require("../prompt.js");
+import {Router, StickyHeadMixin} from "../common.js"
+import Nav from "./nav.js";
+import {Request, Response, Error} from "./messages.js";
+import Details from "./details.js";
+import Prompt from "../prompt.js";
 
 
 var allTabs = {
-    request: Messages.Request,
-    response: Messages.Response,
-    error: Messages.Error,
+    request: Request,
+    response: Response,
+    error: Error,
     details: Details
 };
 
 var FlowView = React.createClass({
-    mixins: [common.StickyHeadMixin, common.Navigation, common.RouterState],
+    mixins: [StickyHeadMixin, Router],
     getInitialState: function () {
         return {
             prompt: false
@@ -34,37 +33,28 @@ var FlowView = React.createClass({
     },
     nextTab: function (i) {
         var tabs = this.getTabs(this.props.flow);
-        var currentIndex = tabs.indexOf(this.getActive());
+        var currentIndex = tabs.indexOf(this.props.tab);
         // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
         var nextIndex = (currentIndex + i + tabs.length) % tabs.length;
         this.selectTab(tabs[nextIndex]);
     },
     selectTab: function (panel) {
-        this.replaceWith(
-            "flow",
-            {
-                flowId: this.getParams().flowId,
-                detailTab: panel
-            }
-        );
-    },
-    getActive: function(){
-        return this.getParams().detailTab;
+        this.updateLocation(`/flows/${this.props.flow.id}/${panel}`);
     },
     promptEdit: function () {
         var options;
-        switch(this.getActive()){
+        switch (this.props.tab) {
             case "request":
                 options = [
                     "method",
                     "url",
-                    {text:"http version", key:"v"},
+                    {text: "http version", key: "v"},
                     "header"
                     /*, "content"*/];
                 break;
             case "response":
                 options = [
-                    {text:"http version", key:"v"},
+                    {text: "http version", key: "v"},
                     "code",
                     "message",
                     "header"
@@ -73,14 +63,14 @@ var FlowView = React.createClass({
             case "details":
                 return;
             default:
-                throw "Unknown tab for edit: " + this.getActive();
+                throw "Unknown tab for edit: " + this.props.tab;
         }
 
         this.setState({
             prompt: {
                 done: function (k) {
                     this.setState({prompt: false});
-                    if(k){
+                    if (k) {
                         this.refs.tab.edit(k);
                     }
                 }.bind(this),
@@ -91,9 +81,9 @@ var FlowView = React.createClass({
     render: function () {
         var flow = this.props.flow;
         var tabs = this.getTabs(flow);
-        var active = this.getActive();
+        var active = this.props.tab;
 
-        if (!_.contains(tabs, active)) {
+        if (tabs.indexOf(active) < 0) {
             if (active === "response" && flow.error) {
                 active = "error";
             } else if (active === "error" && flow.response) {
@@ -113,10 +103,10 @@ var FlowView = React.createClass({
         return (
             <div className="flow-detail" onScroll={this.adjustHead}>
                 <Nav ref="head"
-                    flow={flow}
-                    tabs={tabs}
-                    active={active}
-                    selectTab={this.selectTab}/>
+                     flow={flow}
+                     tabs={tabs}
+                     active={active}
+                     selectTab={this.selectTab}/>
                 <Tab ref="tab" flow={flow}/>
                 {prompt}
             </div>
@@ -124,4 +114,4 @@ var FlowView = React.createClass({
     }
 });
 
-module.exports = FlowView;
\ No newline at end of file
+export default FlowView;
\ No newline at end of file