From de4011a27bacde340761525a101cf956da3fc872 Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Tue, 25 Oct 2016 23:13:50 +0200
Subject: [PATCH] use list for strategies

---
 .../feature/configure-strategies.jsx          |  7 +++--
 .../component/feature/configure-strategy.jsx  | 27 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/unleash-frontend-next/src/component/feature/configure-strategies.jsx b/packages/unleash-frontend-next/src/component/feature/configure-strategies.jsx
index 83f6e23b22..6edfc770dd 100644
--- a/packages/unleash-frontend-next/src/component/feature/configure-strategies.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/configure-strategies.jsx
@@ -1,5 +1,8 @@
 import React, { PropTypes } from 'react';
 import ConfigureStrategy from './configure-strategy';
+import { List } from 'react-toolbox/lib/list';
+
+
 class ConfigureStrategies extends React.Component {
 
     static propTypes () {
@@ -30,9 +33,9 @@ class ConfigureStrategies extends React.Component {
                 strategyDefinition={strategies.find(s => s.name === strat.name)} />
         ));
         return (
-            <div>
+            <List>
                 {blocks}
-            </div>
+            </List>
         );
     }
 }
diff --git a/packages/unleash-frontend-next/src/component/feature/configure-strategy.jsx b/packages/unleash-frontend-next/src/component/feature/configure-strategy.jsx
index b74bcc168b..0fa2f3b8a2 100644
--- a/packages/unleash-frontend-next/src/component/feature/configure-strategy.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/configure-strategy.jsx
@@ -1,5 +1,7 @@
 import React, { PropTypes } from 'react';
-import { Button, Input } from 'react-toolbox';
+import Input from 'react-toolbox/lib/input';
+import Button from 'react-toolbox/lib/button';
+import { List, ListItem, ListSubHeader, ListDivider } from 'react-toolbox/lib/list';
 
 class ConfigureStrategies extends React.Component {
 
@@ -35,7 +37,6 @@ class ConfigureStrategies extends React.Component {
     }
 
     renderInputFields (strategyDefinition) {
-        
 
         if (strategyDefinition.parametersTemplate) {
             return Object.keys(strategyDefinition.parametersTemplate).map(field => (
@@ -52,24 +53,24 @@ class ConfigureStrategies extends React.Component {
     }
 
     render () {
+        const leftActions = [
+            <Button onClick={this.handleRemove} icon="remove" floating accent mini />,
+        ];
+
         if (!this.props.strategyDefinition) {
             return (
-                <div>
-                    <span style={{ color: 'red' }}>Strategy "{this.props.strategy.name}" deleted</span>
-                    <Button title="Remove Strategy" onClick={this.handleRemove} icon="remove" floating accent mini />
-                </div>
-            )
+                <ListItem leftActions={leftActions} caption={<span style={{ color: 'red' }}>Strategy "{this.props.strategy.name}" deleted</span>}/>
+            );
         }
 
         const inputFields = this.renderInputFields(this.props.strategyDefinition);
 
         return (
-            <div>
-                <strong>{this.props.strategy.name}</strong>
-                <Button title="Remove Strategy" onClick={this.handleRemove} icon="remove" floating accent mini />
-                <p><i>{this.props.strategyDefinition.description}</i></p>
-                {inputFields}
-            </div>
+            <ListItem leftActions={leftActions}
+                caption={this.props.strategy.name}
+                legend={this.props.strategyDefinition.description}
+                rightActions={inputFields}
+            />
         );
     }
 }