More create feature toggle

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

@@ -2,7 +2,8 @@ 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';
+import AddFeatureToggleStrategy from './AddFeatureToggleStrategy';
+import ConfiguredStrategies from './ConfiguredStrategies';
 
 const mapStateToProps = (state) => ({
     strategies: state.strategies.toJS(),
@@ -46,40 +47,17 @@ class AddFeatureToggle extends React.Component {
         this.setState({ featureToggle: updatedFeatureToggle });
     };
 
-    cancelConfig = () => {
-        this.setState({ configureStrategy: undefined });
-    };
-
-    renderAddStrategy () {
-        if (this.state.configureStrategy) {
-            return (
-                <div>
-                    <ConfigureStrategy strategy={this.state.configureStrategy} cancelConfig={this.cancelConfig} />
-                </div>
-            );
-        } else {
-            return (
-                <div>
-                    <strong>Choose an activation strategy:</strong>
-                    <ul>{this.renderPossibleStrategies()}</ul>
-                </div>
-            );
-        }
+    addStrategy = (strategy) => {
+        const strategies = this.state.featureToggle.strategies;
+        strategies.push(strategy);
+        const updatedFeatureToggle = Object.assign({}, this.state.featureToggle, { strategies });
+        this.setState({ featureToggle: updatedFeatureToggle });
     }
 
-    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>
-            ));
+    removeStrategy = (strategy) => {
+        const strategies = this.state.featureToggle.strategies.filter(s => s !== strategy);
+        const updatedFeatureToggle = Object.assign({}, this.state.featureToggle, { strategies });
+        this.setState({ featureToggle: updatedFeatureToggle });
     }
 
     render () {
@@ -114,9 +92,15 @@ class AddFeatureToggle extends React.Component {
                     </section>
 
                     <section>
-                        <h3>Strategies</h3>
-                        {this.renderAddStrategy()}
-                        <p>Configured: {configuredStrategies.map(s => s.name).join(', ')}</p>
+                        <strong>Activation strategies</strong>
+                        <ConfiguredStrategies configuredStrategies={configuredStrategies} removeStrategy={this.removeStrategy} />
+                    </section>
+
+                    <section>
+                        <AddFeatureToggleStrategy
+                            strategies={this.props.strategies}
+                            addStrategy={this.addStrategy}
+                        />
                     </section>
 
                     <br />

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

@@ -0,0 +1,51 @@
+import React, { PropTypes } from 'react';
+import ConfigureStrategy from './ConfigureStrategy';
+
+class AddFeatureToggleStrategy extends React.Component {
+    constructor () {
+        super();
+        this.state = {
+            showConfigure: false,
+        };
+    }
+
+    static propTypes () {
+        return {
+            strategies: PropTypes.array.isRequired,
+            addStrategy: PropTypes.func.isRequired,
+        };
+    }
+
+    cancelConfig = () => {
+        this.setState({ showConfigure: false });
+    };
+
+    addStrategy = (strategy) => {
+        this.setState({ showConfigure: false });
+        this.props.addStrategy(strategy);
+    }
+
+    showConfigure = (evt) => {
+        evt.preventDefault();
+        this.setState({ showConfigure: true });
+    }
+
+    renderAddLink () {
+        return (
+            <div>
+                <a href="" onClick={this.showConfigure}>Add strategy</a>
+            </div>
+        );
+    }
+
+    render () {
+        return this.state.showConfigure ?
+            <ConfigureStrategy
+                strategies={this.props.strategies}
+                cancelConfig={this.cancelConfig}
+                addStrategy={this.addStrategy} /> :
+            this.renderAddLink();
+    }
+}
+
+export default AddFeatureToggleStrategy;

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

@@ -1,54 +1,78 @@
 import React, { PropTypes } from 'react';
 import { Button, Input } from 'react-toolbox';
 
-
 class ConfigureStrategy extends React.Component {
-    constructor () {
-        super();
-        this.state = {};
+    constructor (props) {
+        super(props);
+        this.state = {
+            selectedStrategy: props.strategies[0],
+            parameters: {},
+        };
     }
 
     static propTypes () {
         return {
-            strategy: PropTypes.object.isRequired,
+            strategies: PropTypes.array.isRequired,
+            cancelConfig: PropTypes.func.isRequired,
+            addStrategy: PropTypes.func.isRequired,
         };
     }
 
+    handleChange = (evt) => {
+        const strategyName = evt.target.value;
+        const selectedStrategy = this.props.strategies.find(s => s.name === strategyName);
+        this.setState({ selectedStrategy, parameters: {} });
+    }
+
     addStrategy = (evt) => {
         evt.preventDefault();
-    }
-
-    handleChange = (key, value) => {
-        const change = {};
-        change[key] = value;
-
-        const newState = Object.assign({}, this.state, change);
-        this.setState(newState);
+        this.props.addStrategy({
+            name: this.state.selectedStrategy.name,
+            parameters: this.state.parameters,
+        });
     };
 
-    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)} />
+    handleConfigChange = (key, value) => {
+        const parameters = this.state.parameters;
+        parameters[key] = value;
+        this.setState({ parameters });
+    };
+
+    renderInputFields (selectedStrategy) {
+        if (selectedStrategy.parametersTemplate) {
+            return Object.keys(selectedStrategy.parametersTemplate).map(field => (
+                <Input key={field} name={field} label={field} onChange={this.handleConfigChange.bind(this, field)} />
             ));
         }
     }
 
-
     render () {
-        let inputFields = this.renderInputFields();
+        const strategies = this.props.strategies.map(s => (
+            <option key={s.name} value={s.name}>{s.name}</option>
+        ));
+
+        const style = {
+            backgroundColor: '#ECE',
+            padding: '10px',
+        };
+
+        const selectedStrategy = this.state.selectedStrategy;
 
         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 style={style}>
+                <select value={selectedStrategy.name} onChange={this.handleChange}>
+                    {strategies}
+                </select>
+
+                <p><strong>Description:</strong> {selectedStrategy.description}</p>
+
+                {this.renderInputFields(selectedStrategy)}
+
+                <Button raised mini accent label="cancel" onClick={this.props.cancelConfig} />
+                <Button raised mini label="add strategy" onClick={this.addStrategy} />
             </div>
         );
     }
 }
 
-export default (ConfigureStrategy);
+export default ConfigureStrategy;

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

@@ -0,0 +1,36 @@
+import React, { PropTypes } from 'react';
+import { Chip } from 'react-toolbox';
+
+class ConfiguredStrategies extends React.Component {
+    static propTypes () {
+        return {
+            configuredStrategies: PropTypes.array.isRequired,
+            removeStrategy: PropTypes.func.isRequired,
+        };
+    }
+
+    renderName (strategy) {
+        const params = Object.keys(strategy.parameters)
+            .map(param => `${param}=${strategy.parameters[param]}`);
+        return <span>{strategy.name} ({params})</span>;
+    }
+
+    render () {
+        const removeStrategy = this.props.removeStrategy;
+        const strategies = this.props.configuredStrategies.map((s, index) => (
+            <Chip
+                key={`${index}-${s.name}`}
+                deletable
+                onDeleteClick={() => removeStrategy(s)}>
+                {this.renderName(s)}
+            </Chip>
+        ));
+        return (
+            <div>
+                {strategies.length > 0 ? strategies : <p>No activation strategies added</p>}
+            </div>
+        );
+    }
+}
+
+export default ConfiguredStrategies;