diff --git a/packages/unleash-frontend-next/src/component/feature/add-component.jsx b/packages/unleash-frontend-next/src/component/feature/add-component.jsx
index 433b7a4566..10008bfa98 100644
--- a/packages/unleash-frontend-next/src/component/feature/add-component.jsx
+++ b/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 {
diff --git a/packages/unleash-frontend-next/src/component/feature/add-strategy.jsx b/packages/unleash-frontend-next/src/component/feature/add-strategy.jsx
new file mode 100644
index 0000000000..e83b7f1b07
--- /dev/null
+++ b/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 => (
+
+ ));
+
+ const selectedStrategy = this.state.selectedStrategy || this.props.strategies[0];
+
+ if (!selectedStrategy) {
+ return Strategies loading...;
+ }
+
+ return (
+
+
+
+
+
+
Description: {selectedStrategy.description}
+
+ );
+ }
+}
+
+export default AddStrategy;
diff --git a/packages/unleash-frontend-next/src/component/feature/select-strategies-container.js b/packages/unleash-frontend-next/src/component/feature/select-strategies-container.js
index 95489c2f57..36e718f3f6 100644
--- a/packages/unleash-frontend-next/src/component/feature/select-strategies-container.js
+++ b/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);
diff --git a/packages/unleash-frontend-next/src/component/feature/strategies-for-toggle-container.jsx b/packages/unleash-frontend-next/src/component/feature/strategies-for-toggle-container.jsx
new file mode 100644
index 0000000000..36e718f3f6
--- /dev/null
+++ b/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);
diff --git a/packages/unleash-frontend-next/src/component/feature/strategies-for-toggle.jsx b/packages/unleash-frontend-next/src/component/feature/strategies-for-toggle.jsx
index 8d79f3971e..8a011e35f3 100644
--- a/packages/unleash-frontend-next/src/component/feature/strategies-for-toggle.jsx
+++ b/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 (
-
-
-
- );
- }
render () {
+ const selectedStrategy = this.state.selectedStrategy || this.props.strategies[0];
+
+ const strategies = this.props.strategies.map(s => (
+
+ ));
+
return (
- this.state.showConfigure ?
- :
- this.renderAddLink()
+
+
+
+
);
}
}