inital, needs refactor

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

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { Input, Switch, Button } from 'react-toolbox';
 import { createFeatureToggles } from '../../store/feature-actions';
+import ConfigureStrategy from './ConfigureStrategy';
 
 const mapStateToProps = (state) => ({
     strategies: state.strategies.toJS(),
@@ -15,11 +16,8 @@ class AddFeatureToggle extends React.Component {
                 name: '',
                 description: '',
                 enabled: false,
-                strategies: [
-                    { name: 'default' },
-                ],
+                strategies: [],
             },
-            showAddStrategy: false,
         };
     }
 
@@ -40,11 +38,6 @@ class AddFeatureToggle extends React.Component {
         this.context.router.push('/features');
     };
 
-    addStrategy = (evt) => {
-        evt.preventDefault();
-        this.setState({ showAddStrategy: true });
-    }
-
     handleChange = (key, value) => {
         const change = {};
         change[key] = value;
@@ -53,20 +46,45 @@ class AddFeatureToggle extends React.Component {
         this.setState({ featureToggle: updatedFeatureToggle });
     };
 
+    cancelConfig = () => {
+        this.setState({ configureStrategy: undefined });
+    };
+
     renderAddStrategy () {
-        if (this.state.showAddStrategy) {
+        if (this.state.configureStrategy) {
             return (
                 <div>
-                    <h4>Adding strat</h4>
-                    <p>Possible: {this.props.strategies.map(s => s.name).join(', ')}</p>
+                    <ConfigureStrategy strategy={this.state.configureStrategy} cancelConfig={this.cancelConfig} />
                 </div>
             );
         } else {
-            return <a onClick={this.addStrategy} href="#addStrategy">Add strategy..</a>;
+            return (
+                <div>
+                    <strong>Choose an activation strategy:</strong>
+                    <ul>{this.renderPossibleStrategies()}</ul>
+                </div>
+            );
         }
     }
 
+    renderPossibleStrategies () {
+        const configure = (strategy, evt) => {
+            evt.preventDefault();
+            this.setState({
+                configureStrategy: strategy,
+            });
+        };
+        const configuredStrategies = this.state.featureToggle.strategies;
+        return this.props.strategies
+            .filter(s => !configuredStrategies.find(selected => selected.name === s.name))
+            .map((s) => (
+                <li key={s.name}><a href={`#configure-${s.name}`} onClick={configure.bind(this, s)}>{s.name}</a></li>
+            ));
+    }
+
     render () {
+        const configuredStrategies = this.state.featureToggle.strategies;
+
         return (
             <div>
                 <form onSubmit={this.onSubmit}>
@@ -98,6 +116,7 @@ class AddFeatureToggle extends React.Component {
                     <section>
                         <h3>Strategies</h3>
                         {this.renderAddStrategy()}
+                        <p>Configured: {configuredStrategies.map(s => s.name).join(', ')}</p>
                     </section>
 
                     <br />

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

@@ -0,0 +1,54 @@
+import React, { PropTypes } from 'react';
+import { Button, Input } from 'react-toolbox';
+
+
+class ConfigureStrategy extends React.Component {
+    constructor () {
+        super();
+        this.state = {};
+    }
+
+    static propTypes () {
+        return {
+            strategy: PropTypes.object.isRequired,
+        };
+    }
+
+    addStrategy = (evt) => {
+        evt.preventDefault();
+    }
+
+    handleChange = (key, value) => {
+        const change = {};
+        change[key] = value;
+
+        const newState = Object.assign({}, this.state, change);
+        this.setState(newState);
+    };
+
+    renderInputFields () {
+        const strategy = this.props.strategy;
+        if (strategy.parametersTemplate) {
+            return Object.keys(strategy.parametersTemplate).map(field => (
+                <Input key={field} name={field} label={field} onChange={this.handleChange.bind(null, field)} />
+            ));
+        }
+    }
+
+
+    render () {
+        let inputFields = this.renderInputFields();
+
+        return (
+            <div style={{ backgroundColor: '#ECECEC', padding: '10px' }}>
+                <h4>{this.props.strategy.name}</h4>
+                <p>{this.props.strategy.description}</p>
+                {inputFields}
+                <Button raised label="add strategy" />
+                <Button raised accent label="cancel" onClick={this.props.cancelConfig} />
+            </div>
+        );
+    }
+}
+
+export default (ConfigureStrategy);

packages/unleash-frontend-next/src/store/strategy-store.js

@@ -6,7 +6,7 @@ const init = new List([
         {
             name: 'ActiveForUserWithEmail',
             description: 'Active for user with specified email',
-            parametersTemplate: { emails: 'string' },
+            parametersTemplate: { emails: 'string', ids: 'string' },
         }),
 ]);