diff --git a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx index 13e026bdb6..3417df7660 100644 --- a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx +++ b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx @@ -7,7 +7,17 @@ import { addFeatureToggle } from '../../store/actions'; class AddFeatureToggle extends React.Component { constructor () { super(); - this.state = { name: '', description: '', enabled: false }; + this.state = { + featureToggle: { + name: '', + description: '', + enabled: false, + strategies: [ + { name: 'default' }, + ], + }, + showAddStrategy: false, + }; } static propTypes () { @@ -22,18 +32,31 @@ class AddFeatureToggle extends React.Component { onSubmit = (evt) => { evt.preventDefault(); - this.props.dispatch(addFeatureToggle(this.state.name)); + this.props.dispatch(addFeatureToggle(this.state.featureToggle)); this.context.router.push('/features'); }; + addStrategy = (evt) => { + evt.preventDefault(); + this.setState({ showAddStrategy: true }); + } + handleChange = (key, value) => { const change = {}; change[key] = value; + const updatedFeatureToggle = Object.assign({}, this.state.featureToggle, change); - const newState = Object.assign({}, this.state, change); - this.setState(newState); + this.setState({ featureToggle: updatedFeatureToggle }); }; + renderAddStrategy () { + if (this.state.showAddStrategy) { + return

Adding strat

; + } else { + return Add strategy..; + } + } + render () { return (
@@ -44,19 +67,19 @@ class AddFeatureToggle extends React.Component { label="Name" name="name" required - value={this.state.name} + value={this.state.featureToggle.name} onChange={this.handleChange.bind(this, 'name')} />
@@ -64,7 +87,8 @@ class AddFeatureToggle extends React.Component {
- Add strategy.. +

Strategies

+ {this.renderAddStrategy()}

diff --git a/packages/unleash-frontend-next/src/component/feature/AddStrategy.jsx b/packages/unleash-frontend-next/src/component/feature/AddStrategy.jsx new file mode 100644 index 0000000000..c6d009d7d8 --- /dev/null +++ b/packages/unleash-frontend-next/src/component/feature/AddStrategy.jsx @@ -0,0 +1,53 @@ +import React, { PropTypes } from 'react'; +import { connect } from 'react-redux'; +import { Button } from 'react-toolbox'; + + +class AddStrategy extends React.Component { + constructor () { + super(); + this.state = { + name: '', + parameters: {}, + }; + } + + static propTypes () { + return { + StrategyDefinitions: PropTypes.array.isRequired, + }; + } + + static contextTypes = { + router: React.PropTypes.object, + } + + onSubmit = (evt) => { + evt.preventDefault(); + }; + + addStrategy = (evt) => { + evt.preventDefault(); + } + + handleChange = (key, value) => { + const change = {}; + change[key] = value; + + const newState = Object.assign({}, this.state, change); + this.setState(newState); + }; + + render () { + return ( +
+
+ New Strategy: +
+ ); + } +} + +export default connect()(AddStrategy); diff --git a/packages/unleash-frontend-next/src/store/actions.js b/packages/unleash-frontend-next/src/store/actions.js index 24c03fe643..523a3302fd 100644 --- a/packages/unleash-frontend-next/src/store/actions.js +++ b/packages/unleash-frontend-next/src/store/actions.js @@ -4,9 +4,9 @@ export const REQUEST_FEATURE_TOGGLES = 'REQUEST_FEATURE_TOGGLES'; export const RECEIVE_FEATURE_TOGGLES = 'RECEIVE_FEATURE_TOGGLES'; export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES'; -export const addFeatureToggle = (featureName) => ({ +export const addFeatureToggle = (featureToggle) => ({ type: ADD_FEATURE_TOGGLE, - name: featureName, + featureToggle, }); export const toggleFeature = (featureName) => ({ diff --git a/packages/unleash-frontend-next/src/store/features.js b/packages/unleash-frontend-next/src/store/features.js index 04570fab96..2c0797c03a 100644 --- a/packages/unleash-frontend-next/src/store/features.js +++ b/packages/unleash-frontend-next/src/store/features.js @@ -7,10 +7,7 @@ import { const feature = (state = {}, action) => { switch (action.type) { case ADD_FEATURE_TOGGLE: - return { - name: action.name, - enabled: false, - }; + return action.featureToggle; case TOGGLE_FEATURE_TOGGLE: if (state.name !== action.name) { return state;