Make strategy tab part of the url to increase linkability.

frontend/src/component/strategies/edit-container.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-
+import { hashHistory } from 'react-router';
 import { createMapper, createActions } from '../input-helpers';
 import { updateStrategy } from '../../store/strategy/actions';
 
@@ -47,8 +47,7 @@ const prepare = (methods, dispatch) => {
                 parameters,
             })(dispatch)
                 .then(() => methods.clear())
-                // somewhat quickfix / hacky to go back..
+                .then(() => hashHistory.push(`/strategies/view/${input.name}`));
-                .then(() => window.history.back());
         }
     );
 

frontend/src/component/strategies/strategy-details-component.jsx

@@ -1,15 +1,24 @@
-import React, { Component } from 'react';
+import React, { PropTypes, Component } from 'react';
+import { hashHistory } from 'react-router';
 import { Tabs, Tab, ProgressBar } from 'react-mdl';
 import ShowStrategy from './show-strategy-component';
 import EditStrategy from './edit-container';
 import { HeaderTitle } from '../common';
 
-const EDIT = 1;
+const TABS = {
+    view: 0,
+    edit: 1,
+};
 
 export default class StrategyDetails extends Component {
-    constructor (props) {
+    static propTypes () {
-        super(props);
+        return {
-        this.state = { activeTab: 0 };
+            activeTab: PropTypes.string.isRequired,
+            strategy: PropTypes.object.isRequired,
+            fetchStrategies: PropTypes.func.isRequired,
+            fetchApplications: PropTypes.func.isRequired,
+            fetchFeatureToggles: PropTypes.func.isRequired,
+        };
     }
 
     componentDidMount () {
@@ -24,8 +33,8 @@ export default class StrategyDetails extends Component {
         }
     }
 
-    getTabContent (id) {
+    getTabContent (activeTabId) {
-        if (id === EDIT) {
+        if (activeTabId === TABS.edit) {
             return <EditStrategy strategy={this.props.strategy} />;
         } else {
             return (<ShowStrategy
@@ -35,21 +44,25 @@ export default class StrategyDetails extends Component {
         }
     }
 
+    goToTab (tabName) {
+        hashHistory.push(`/strategies/${tabName}/${this.props.strategyName}`);
+    }
+
     render () {
+        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.view;
         const strategy = this.props.strategy;
         if (!strategy) {
             return <ProgressBar indeterminate />;
         }
 
-        const tabContent = this.getTabContent(this.state.activeTab);
+        const tabContent = this.getTabContent(activeTabId);
 
         return (
             <div>
                 <HeaderTitle title={strategy.name} subtitle={strategy.description} />
-                <Tabs activeTab={this.state.activeTab}
+                <Tabs activeTab={activeTabId} ripple>
-                    onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
+                    <Tab onClick={() => this.goToTab('view')}>Details</Tab>
-                    <Tab>Details</Tab>
+                    <Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
-                    <Tab>Edit</Tab>
                 </Tabs>
                 <section>
                     <div className="content">

frontend/src/component/strategies/strategy-details-container.js

@@ -17,8 +17,10 @@ const mapStateToProps = (state, props) => {
 
     return {
         strategy,
+        strategyName: props.strategyName,
         applications: applications && applications.toJS(),
         toggles: toggles && toggles.toJS(),
+        activeTab: props.activeTab,
     };
 };
 

frontend/src/index.jsx

@@ -45,7 +45,7 @@ ReactDOM.render(
                 <Route pageTitle="Strategies" link="/strategies">
                     <Route pageTitle="Strategies" path="/strategies" component={Strategies} />
                     <Route pageTitle="New" path="/strategies/create" component={CreateStrategies} />
-                    <Route pageTitle=":strategyName" path="/strategies/view/:strategyName" component={StrategyView} />
+                    <Route pageTitle=":strategyName" path="/strategies/:activeTab/:strategyName" component={StrategyView} />
                 </Route>
 
                 <Route pageTitle="History" link="/history">

frontend/src/page/strategies/show.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ShowStrategy from '../../component/strategies/strategy-details-container';
 
-const render = ({ params }) => <ShowStrategy strategyName={params.strategyName} />;
+const render = ({ params }) => <ShowStrategy strategyName={params.strategyName} activeTab={params.activeTab} />;
 
 export default render;

frontend/src/store/strategy/index.js

@@ -1,5 +1,5 @@
 import { List, Map as $Map } from 'immutable';
-import { RECEIVE_STRATEGIES, REMOVE_STRATEGY, ADD_STRATEGY } from './actions';
+import { RECEIVE_STRATEGIES, REMOVE_STRATEGY, ADD_STRATEGY, UPDATE_STRATEGY } from './actions';
 
 function getInitState () {
     return new $Map({ list: new List() });
@@ -13,6 +13,16 @@ function removeStrategy (state, action) {
     return state;
 }
 
+function updateStrategy (state, action) {
+    return state.update('list', (list) => list.map(strategy => {
+        if (strategy.name === action.strategy.name) {
+            return action.strategy;
+        } else {
+            return strategy;
+        }
+    }));
+}
+
 const strategies = (state = getInitState(), action) => {
     switch (action.type) {
         case RECEIVE_STRATEGIES:
@@ -21,6 +31,8 @@ const strategies = (state = getInitState(), action) => {
             return removeStrategy(state, action);
         case ADD_STRATEGY:
             return state.update('list', (list) => list.push(action.strategy));
+        case UPDATE_STRATEGY:
+            return updateStrategy(state, action);
         default:
             return state;
     }