fix strategies menu

frontend/src/component/feature/form/strategies-add.jsx

@@ -1,7 +1,5 @@
 import React, { PropTypes } from 'react';
-// import Dropdown from 'react-toolbox/lib/dropdown';
+import { Menu, MenuItem, IconButton }  from 'react-mdl';
-// TODO use menu
-import { Icon }  from 'react-mdl';
 
 class AddStrategy extends React.Component {
 
@@ -26,53 +24,15 @@ class AddStrategy extends React.Component {
         });
     };
 
-    customItem (item) {
-        const containerStyle = {
-            display: 'flex',
-            flexDirection: 'row',
-        };
-
-
-        const contentStyle = {
-            display: 'flex',
-            flexDirection: 'column',
-            flexGrow: 2,
-            marginLeft: '10px',
-        };
-
-        return (
-        <div style={containerStyle}>
-            <Icon value="add" />
-            <div style={contentStyle}>
-                <strong>{item.name}</strong>
-                <small>{item.description}</small>
-            </div>
-        </div>
-        );
-    }
-
     render () {
-        const strats = this.props.strategies.map(s => {
-            s.value = s.name;
-            return s;
-        });
-
-/*
-
-<Dropdown
-                    allowBlank={false}
-                    auto
-                    source={strats}
-                    onChange={this.addStrategy}
-                    label="Click to add activation strategy"
-                    template={this.customItem}
-                />
-                
-*/
-
         return (
-            <div style={{ maxWidth: '400px', marginTop: '20px' }}>
+            <div style={{ position: 'relative', width: '25px', height: '25px', display: 'inline-block' }} >
-                
+                <IconButton name="add" id="demo-menu-top-right" colored title="Sort" />
+                <Menu target="demo-menu-top-right" valign="bottom" align="center" ripple onClick={
+                    (e) => this.setSort(e.target.getAttribute('data-target'))}>
+                    <MenuItem disabled>Add Strategy:</MenuItem>
+                    {this.props.strategies.map((s) => <MenuItem key={s.name} onClick={() => this.addStrategy(s.name)}>{s.name}</MenuItem>)}
+                </Menu>
             </div>
         );
     }

frontend/src/component/feature/form/strategies-section.jsx

@@ -29,9 +29,8 @@ class StrategiesSection extends React.Component {
 
         return (
             <div>
-                <h5 style={headerStyle}>Activation strategies</h5>
+                <h5 style={headerStyle}>Activation strategies <AddStrategy {...this.props} /> </h5>
                 <StrategiesList {...this.props} />
-                <AddStrategy {...this.props} />
             </div>
         );
     }

frontend/src/component/feature/form/strategy-configure.jsx

@@ -12,9 +12,9 @@ class StrategyConfigure extends React.Component {
         };
     }
 
-    handleConfigChange = (key, value) => {
+    handleConfigChange = (key, e) => {
         const parameters = this.props.strategy.parameters || {};
-        parameters[key] = value;
+        parameters[key] = e.target.value;
 
         const updatedStrategy = Object.assign({}, this.props.strategy, { parameters });
 
@@ -30,7 +30,6 @@ class StrategyConfigure extends React.Component {
         if (strategyDefinition.parametersTemplate) {
             return Object.keys(strategyDefinition.parametersTemplate).map(field => (
                 <Textfield
-                    type="text"
                     key={field}
                     name={field}
                     label={field}

frontend/src/component/feature/list-component.jsx

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import Feature from './feature-component';
 import { Link } from 'react-router';
-import { Icon, Chip, ChipContact, IconButton, Button, FABButton, Textfield, Menu, MenuItem } from 'react-mdl';
+import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem } from 'react-mdl';
 
 import styles from './feature.scss';
 
@@ -114,9 +114,10 @@ export default class FeatureListComponent extends React.PureComponent {
                 )}
                 </ul>
                 <hr />
-                <Link to="/features/create">
+                <Link to="/features/create" className={styles.topListItem0}>
-                    <Icon name="add" />
+                    <FABButton ripple component="span" mini>
-                    <strong>Create </strong><small>new feature toggle</small>
+                        <Icon name="add" />
+                    </FABButton>
                 </Link>
            </div>
         );