fix configure strategy UI

frontend/src/component/feature/form/index.jsx

@@ -71,6 +71,8 @@ class AddFeatureToggleComponent extends Component {
 
                 <br />
 
+                <hr />
+
                 <Button type="submit" raised primary label={editmode ? 'Update' : 'Create'} />
                 &nbsp;
                 <Button type="cancel" raised label="Cancel" onClick={onCancel} />

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

@@ -57,13 +57,16 @@ class AddStrategy extends React.Component {
         });
 
         return (
-            <Dropdown
-                allowBlank={false}
-                source={strats}
-                onChange={this.addStrategy}
-                label="Add an activation strategy"
-                template={this.customItem}
-            />
+            <div style={{ maxWidth: '400px', marginTop: '20px' }}>
+                <Dropdown
+                    allowBlank={false}
+                    auto
+                    source={strats}
+                    onChange={this.addStrategy}
+                    label="Click to add activation strategy"
+                    template={this.customItem}
+                />
+            </div>
         );
     }
 }

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

@@ -21,7 +21,7 @@ class StrategiesList extends React.Component {
         } = this.props;
 
         if (!configuredStrategies || configuredStrategies.length === 0) {
-            return <i>No strategies added</i>;
+            return <i style={{ color: 'red' }}>No strategies added</i>;
         }
 
         const blocks = configuredStrategies.map((strat, i) => (
@@ -33,9 +33,9 @@ class StrategiesList extends React.Component {
                 strategyDefinition={strategies.find(s => s.name === strat.name)} />
         ));
         return (
-            <List>
+            <div>
                 {blocks}
-            </List>
+            </div>
         );
     }
 }

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

@@ -3,8 +3,6 @@ import StrategiesList from './strategies-list';
 import AddStrategy from './strategies-add';
 
 const headerStyle = {
-    borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
-    paddingBottom: '5px',
     marginBottom: '10px',
 };
 
@@ -31,11 +29,9 @@ class StrategiesSection extends React.Component {
 
         return (
             <div>
-                 <div>
-                    <h5 style={headerStyle}>Strategies:</h5>
-                    <StrategiesList {...this.props} />
-                    <AddStrategy {...this.props} />
-                </div>
+                <h5 style={headerStyle}>Activation strategies</h5>
+                <StrategiesList {...this.props} />
+                <AddStrategy {...this.props} />
             </div>
         );
     }

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

@@ -23,7 +23,7 @@ class StrategyConfigure extends React.Component {
     };
 
     handleConfigChange = (key, value) => {
-        const parameters = {};
+        const parameters = this.props.strategy.parameters || {};
         parameters[key] = value;
 
         const updatedStrategy = Object.assign({}, this.props.strategy, { parameters });
@@ -52,27 +52,28 @@ class StrategyConfigure extends React.Component {
     }
 
     render () {
-        const leftActions = [
-            <Button key="remove" onClick={this.handleRemove} icon="remove" floating accent mini />,
-        ];
-
         if (!this.props.strategyDefinition) {
             return (
-                <ListItem
-                    leftActions={leftActions}
-                    caption={<span style={{ color: 'red' }}>Strategy "{this.props.strategy.name}" deleted</span>}
-                />
+                <div>
+                    <h6><span style={{ color: 'red' }}>Strategy "{this.props.strategy.name}" deleted</span></h6>
+                    <Button onClick={this.handleRemove} icon="remove" label="remove strategy" flat/>
+                </div>
             );
         }
 
         const inputFields = this.renderInputFields(this.props.strategyDefinition) || [];
 
         return (
-            <ListItem leftActions={leftActions}
-                caption={this.props.strategy.name}
-                legend={this.props.strategyDefinition.description}
-                rightActions={inputFields}
-            />
+            <div style={{ padding: '5px 15px', backgroundColor: '#f7f8ff', marginBottom: '10px' }}>
+                <h6>
+                    <strong>{this.props.strategy.name} </strong>
+                    (<a style={{ color: '#ff4081' }} onClick={this.handleRemove} href="#remove-strat">remove</a>)
+                </h6>
+                <small>{this.props.strategyDefinition.description}</small>
+                <div>
+                    {inputFields}
+                </div>
+            </div>
         );
     }
 }