From b42742e992dd1dd6c2b7c503ed1f8c46bf871540 Mon Sep 17 00:00:00 2001
From: ivaosthu <ivar.conradi.osthus@finn.no>
Date: Sun, 18 Dec 2016 10:27:04 +0100
Subject: [PATCH] Make strategy tab part of the url to increase linkability.

---
 .../component/strategies/edit-container.js    |  5 +--
 .../strategies/strategy-details-component.jsx | 37 +++++++++++++------
 .../strategies/strategy-details-container.js  |  2 +
 frontend/src/index.jsx                        |  2 +-
 frontend/src/page/strategies/show.js          |  2 +-
 frontend/src/store/strategy/index.js          | 14 ++++++-
 6 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/frontend/src/component/strategies/edit-container.js b/frontend/src/component/strategies/edit-container.js
index 00e77a1c3c..ccc852e1db 100644
--- a/frontend/src/component/strategies/edit-container.js
+++ b/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(() => window.history.back());
+                .then(() => hashHistory.push(`/strategies/view/${input.name}`));
         }
     );
 
diff --git a/frontend/src/component/strategies/strategy-details-component.jsx b/frontend/src/component/strategies/strategy-details-component.jsx
index 0f1697a75a..8169e4ed52 100644
--- a/frontend/src/component/strategies/strategy-details-component.jsx
+++ b/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) {
-        super(props);
-        this.state = { activeTab: 0 };
+    static propTypes () {
+        return {
+            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) {
-        if (id === EDIT) {
+    getTabContent (activeTabId) {
+        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}
-                    onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
-                    <Tab>Details</Tab>
-                    <Tab>Edit</Tab>
+                <Tabs activeTab={activeTabId} ripple>
+                    <Tab onClick={() => this.goToTab('view')}>Details</Tab>
+                    <Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
                 </Tabs>
                 <section>
                     <div className="content">
diff --git a/frontend/src/component/strategies/strategy-details-container.js b/frontend/src/component/strategies/strategy-details-container.js
index 3f22c5522e..66e82d91d5 100644
--- a/frontend/src/component/strategies/strategy-details-container.js
+++ b/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,
     };
 };
 
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index fb696b0115..35ea590100 100644
--- a/frontend/src/index.jsx
+++ b/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">
diff --git a/frontend/src/page/strategies/show.js b/frontend/src/page/strategies/show.js
index f39b2f3be8..fbfd604c78 100644
--- a/frontend/src/page/strategies/show.js
+++ b/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;
diff --git a/frontend/src/store/strategy/index.js b/frontend/src/store/strategy/index.js
index bb043c3712..125f3fc530 100644
--- a/frontend/src/store/strategy/index.js
+++ b/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;
     }