fix(strategy-create): Should be able to open the create strategy view

frontend/CHANGELOG.md

@@ -10,6 +10,9 @@ The latest version of this document is always available in
 
 ## [Unreleased]
 
+## [3.1.1]
+- fix(strategy-create): Should be able to open the create strategy view.
+
 ## [3.1.0]
 - fix(react-router): Upgrade to react-router v4.
 - fix(feature-create): Default strategy should be chosen if strategy list is empty. 

frontend/src/component/app.jsx

@@ -20,10 +20,6 @@ export default class App extends Component {
         match: PropTypes.object.isRequired,
     };
 
-    static contextTypes = {
-        router: PropTypes.object,
-    };
-
     componentWillReceiveProps(nextProps) {
         if (this.props.location.pathname !== nextProps.location.pathname) {
             clearTimeout(this.timer);

frontend/src/component/feature/list-component.jsx

@@ -21,10 +21,6 @@ export default class FeatureListComponent extends React.Component {
         history: PropTypes.object.isRequired,
     };
 
-    static contextTypes = {
-        router: PropTypes.object,
-    };
-
     componentDidMount() {
         if (this.props.logout) {
             this.props.logoutUser();

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

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { Textfield, IconButton, Menu, MenuItem, Checkbox, Grid, Cell } from 'react-mdl';
+import { Textfield, IconButton, Menu, MenuItem, Checkbox, CardTitle, Card, CardActions } from 'react-mdl';
-import { FormButtons } from '../common';
+import { styles as commonStyles, FormButtons } from '../common';
 
 const trim = value => {
     if (value && value.trim) {
@@ -129,10 +129,12 @@ class AddStrategy extends Component {
         const { input, setValue, updateInList, incValue, onCancel, editmode = false, onSubmit } = this.props;
 
         return (
-            <Grid className="mdl-color--white">
+            <Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible', paddingBottom: '10px' }}>
-                <Cell col={12}>
+                <CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>
-                    <form onSubmit={onSubmit(input)}>
+                    {editmode ? <EditHeader /> : <CreateHeader />}
-                        {editmode ? <EditHeader /> : <CreateHeader />}
+                </CardTitle>
+                <form onSubmit={onSubmit(input)}>
+                    <section style={{ padding: '16px' }}>
                         <Textfield
                             label="Strategy name"
                             floatingLabel
@@ -163,12 +165,12 @@ class AddStrategy extends Component {
                             }}
                         />{' '}
                         &nbsp;Add parameter
-                        <br />
+                    </section>
-                        <hr />
+                    <CardActions>
                         <FormButtons submitText={editmode ? 'Update' : 'Create'} onCancel={onCancel} />
-                    </form>
+                    </CardActions>
-                </Cell>
+                </form>
-            </Grid>
+            </Card>
         );
     }
 }

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

@@ -21,7 +21,7 @@ const mapStateToProps = createMapper({
     },
 });
 
-const prepare = (methods, dispatch) => {
+const prepare = (methods, dispatch, ownProps) => {
     methods.onSubmit = input => e => {
         e.preventDefault();
         // clean
@@ -40,14 +40,13 @@ const prepare = (methods, dispatch) => {
             parameters,
         })(dispatch)
             .then(() => methods.clear())
-            .then(() => this.props.history.push(`/strategies/view/${input.name}`));
+            .then(() => ownProps.history.push(`/strategies/view/${input.name}`));
     };
 
     methods.onCancel = e => {
         e.preventDefault();
         methods.clear();
-        // somewhat quickfix / hacky to go back..
+        ownProps.history.push(`/strategies/view/${ownProps.strategy.name}`);
-        window.history.back();
     };
 
     return methods;

frontend/src/component/strategies/list-component.jsx

@@ -10,10 +10,7 @@ class StrategiesListComponent extends Component {
         strategies: PropTypes.array.isRequired,
         fetchStrategies: PropTypes.func.isRequired,
         removeStrategy: PropTypes.func.isRequired,
-    };
+        history: PropTypes.object.isRequired,
-
-    static contextTypes = {
-        router: PropTypes.object,
     };
 
     componentDidMount() {
@@ -32,7 +29,7 @@ class StrategiesListComponent extends Component {
                             <IconButton
                                 raised
                                 name="add"
-                                onClick={() => this.context.router.push('/strategies/create')}
+                                onClick={() => this.props.history.push('/strategies/create')}
                                 title="Add new strategy"
                             />
                         }

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

@@ -37,7 +37,7 @@ export default class StrategyDetails extends Component {
 
     getTabContent(activeTabId) {
         if (activeTabId === TABS.edit) {
-            return <EditStrategy strategy={this.props.strategy} />;
+            return <EditStrategy strategy={this.props.strategy} history={this.props.history} />;
         } else {
             return (
                 <ShowStrategy

frontend/src/page/strategies/create.js

@@ -1,4 +1,11 @@
 import React from 'react';
 import AddStrategies from '../../component/strategies/add-container';
+import PropTypes from 'prop-types';
 
-export default () => <AddStrategies />;
+const render = ({ history }) => <AddStrategies history={history} />;
+
+render.propTypes = {
+    history: PropTypes.object.isRequired,
+};
+
+export default render;

frontend/src/page/strategies/index.js

@@ -1,4 +1,11 @@
 import React from 'react';
 import Strategies from '../../component/strategies/list-container';
+import PropTypes from 'prop-types';
 
-export default () => <Strategies />;
+const render = ({ history }) => <Strategies history={history} />;
+
+render.propTypes = {
+    history: PropTypes.object.isRequired,
+};
+
+export default render;

frontend/src/page/strategies/show.js

@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ShowStrategy from '../../component/strategies/strategy-details-container';
 
-const render = ({ match: { params } }) => (
+const render = ({ match: { params }, history }) => (
-    <ShowStrategy strategyName={params.strategyName} activeTab={params.activeTab} />
+    <ShowStrategy strategyName={params.strategyName} activeTab={params.activeTab} history={history} />
 );
 
 render.propTypes = {
     match: PropTypes.object.isRequired,
+    history: PropTypes.object.isRequired,
 };
 
 export default render;