Add stragies should always be an option

packages/unleash-frontend-next/src/component/feature/add-component.jsx

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import Input from 'react-toolbox/lib/input';
 import Button from 'react-toolbox/lib/button';
 import Switch from 'react-toolbox/lib/switch';
-import SelectStrategies from './strategies-for-toggle';
+import SelectStrategies from './strategies-for-toggle-container';
 import SelectedStrategies from './selected-strategies';
 
 class AddFeatureToggleComponent extends Component {

packages/unleash-frontend-next/src/component/feature/add-strategy.jsx

@@ -0,0 +1,77 @@
+import React, { PropTypes } from 'react';
+import { Button, Input } from 'react-toolbox';
+
+class AddStrategy extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            selectedStrategy: props.strategies[0],
+        };
+    }
+
+    static propTypes () {
+        return {
+            strategies: PropTypes.array.isRequired,
+            addStrategy: PropTypes.func.isRequired,
+            fetchStrategies: PropTypes.func.isRequired,
+        };
+    }
+
+    componentWillMount () {
+        // TODO: move somewhere appropriate?
+        this.props.fetchStrategies();
+    }
+
+    componentWillReceiveProps (nextProps) {
+        // this will fix async strategies list loading after mounted
+        if (!this.state.selectedStrategy && nextProps.strategies.length > 0) {
+            this.setState({ selectedStrategy: nextProps.strategies[0] });
+        }
+    }
+
+    handleChange = (evt) => {
+        const strategyName = evt.target.value;
+        const selectedStrategy = this.props.strategies.find(s => s.name === strategyName);
+        this.setState({ selectedStrategy });
+    }
+
+    addStrategy = (evt) => {
+        evt.preventDefault();
+        const selectedStrategy =  this.state.selectedStrategy;
+        const parameters = {};
+        const keys = Object.keys(selectedStrategy.parametersTemplate || {});
+        keys.forEach(prop => { parameters[prop] = ''; });
+
+
+        this.props.addStrategy({
+            name: selectedStrategy.name,
+            parameters,
+        });
+    };
+
+    render () {
+        const strategies = this.props.strategies.map(s => (
+            <option key={s.name} value={s.name}>{s.name}</option>
+        ));
+
+        const selectedStrategy = this.state.selectedStrategy || this.props.strategies[0];
+
+        if (!selectedStrategy) {
+            return <i>Strategies loading...</i>;
+        }
+
+        return (
+            <div>
+                <select value={selectedStrategy.name} onChange={this.handleChange}>
+                    {strategies}
+                </select>
+
+                <Button icon="add" accent flat label="add strategy" onClick={this.addStrategy} />
+
+                <p><strong>Description:</strong> {selectedStrategy.description}</p>
+            </div>
+        );
+    }
+}
+
+export default AddStrategy;

packages/unleash-frontend-next/src/component/feature/select-strategies-container.js

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
-import SelectStrategies from './select-strategies';
+import AddStrategy from './add-strategy';
 import { fetchStrategies } from '../../store/strategy-actions';
 
 
 export default connect((state) => ({
     strategies: state.strategies.get('list').toArray(),
-}), { fetchStrategies })(SelectStrategies);
+}), { fetchStrategies })(AddStrategy);

packages/unleash-frontend-next/src/component/feature/strategies-for-toggle-container.jsx

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import AddStrategy from './add-strategy';
+import { fetchStrategies } from '../../store/strategy-actions';
+
+
+export default connect((state) => ({
+    strategies: state.strategies.get('list').toArray(),
+}), { fetchStrategies })(AddStrategy);

packages/unleash-frontend-next/src/component/feature/strategies-for-toggle.jsx

@@ -1,48 +1,48 @@
 import React, { PropTypes } from 'react';
-import SelectStrategies from './select-strategies-container';
 import Button from 'react-toolbox/lib/button';
 
 class AddStrategiesToToggle extends React.Component {
-    constructor () {
-        super();
+    constructor (props) {
+        super(props);
         this.state = {
-            showConfigure: false,
+            selectedStrategy: undefined,
         };
     }
 
     static propTypes () {
         return {
             addStrategy: PropTypes.func.isRequired,
+            strategies: PropTypes.array.isRequired,
+            fetchStrategies: PropTypes.func.isRequired,
         };
     }
 
-    cancelConfig = () => {
-        this.setState({ showConfigure: false });
-    };
+    componentWillMount () {
+        // TODO: move somewhere appropriate?
+        this.props.fetchStrategies();
+    }
+
 
     addStrategy = (strategy) => {
-        this.setState({ showConfigure: false });
+        this.setState({ selectedStrategy: undefined });
         this.props.addStrategy(strategy);
     }
 
-    showConfigure = (evt) => {
-        evt.preventDefault();
-        this.setState({ showConfigure: true });
-    }
-
-    renderAddLink () {
-        return (
-            <div>
-                <Button icon="add" accent onClick={this.showConfigure}>Add strategy</Button>
-            </div>
-        );
-    }
 
     render () {
+        const selectedStrategy = this.state.selectedStrategy || this.props.strategies[0];
+
+        const strategies = this.props.strategies.map(s => (
+            <option key={s.name} value={s.name}>{s.name}</option>
+        ));
+
         return (
-            this.state.showConfigure ?
-            <SelectStrategies cancelConfig={this.cancelConfig} addStrategy={this.addStrategy} /> :
-            this.renderAddLink()
+            <div>
+                <select value={selectedStrategy.name} onChange={this.handleChange}>
+                    {strategies}
+                </select>
+                <Button icon="add" accent onClick={this.showConfigure}>Add strategy</Button>
+            </div>
         );
     }
 }