From d3d8591b45493edc4cc40dcc5435e2947a220bf2 Mon Sep 17 00:00:00 2001
From: Ivar <ivarconr@gmail.com>
Date: Tue, 15 Nov 2016 23:14:30 +0100
Subject: [PATCH] fix configure strategy UI

---
 frontend/src/component/feature/form/index.jsx |  2 ++
 .../component/feature/form/strategies-add.jsx | 17 ++++++-----
 .../feature/form/strategies-list.jsx          |  6 ++--
 .../feature/form/strategies-section.jsx       | 10 ++-----
 .../feature/form/strategy-configure.jsx       | 29 ++++++++++---------
 5 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/index.jsx
index f292085a01..98050c541f 100644
--- a/frontend/src/component/feature/form/index.jsx
+++ b/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} />
diff --git a/frontend/src/component/feature/form/strategies-add.jsx b/frontend/src/component/feature/form/strategies-add.jsx
index b775fa827b..c255b40b0b 100644
--- a/frontend/src/component/feature/form/strategies-add.jsx
+++ b/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>
         );
     }
 }
diff --git a/frontend/src/component/feature/form/strategies-list.jsx b/frontend/src/component/feature/form/strategies-list.jsx
index 35a96cb8f1..58878efd21 100644
--- a/frontend/src/component/feature/form/strategies-list.jsx
+++ b/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>
         );
     }
 }
diff --git a/frontend/src/component/feature/form/strategies-section.jsx b/frontend/src/component/feature/form/strategies-section.jsx
index 06d91567aa..4b8b2c7f2b 100644
--- a/frontend/src/component/feature/form/strategies-section.jsx
+++ b/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>
         );
     }
diff --git a/frontend/src/component/feature/form/strategy-configure.jsx b/frontend/src/component/feature/form/strategy-configure.jsx
index fdef8863ce..8bb7f1b227 100644
--- a/frontend/src/component/feature/form/strategy-configure.jsx
+++ b/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>
         );
     }
 }