From 4fe332e90621cc5fd04a73c8498145034c034898 Mon Sep 17 00:00:00 2001
From: ivaosthu <ivar.conradi.osthus@finn.no>
Date: Fri, 30 Sep 2016 22:37:41 +0200
Subject: [PATCH] Admin UI tweaking #153

---
 packages/unleash-frontend-next/mock-api.json  | 47 +++++++++++++++----
 .../component/feature/AddFeatureToggle.jsx    |  5 +-
 .../src/component/feature/Feature.jsx         | 17 +++++--
 .../src/component/feature/FeatureList.jsx     | 18 ++++++-
 .../src/component/feature/table.scss          | 12 +++++
 .../src/page/features/index.js                |  2 +-
 6 files changed, 82 insertions(+), 19 deletions(-)
 create mode 100644 packages/unleash-frontend-next/src/component/feature/table.scss

diff --git a/packages/unleash-frontend-next/mock-api.json b/packages/unleash-frontend-next/mock-api.json
index 18ac7346df..0bc4ee1726 100644
--- a/packages/unleash-frontend-next/mock-api.json
+++ b/packages/unleash-frontend-next/mock-api.json
@@ -11,9 +11,7 @@
             "name": "default",
             "parameters": {}
           }
-        ],
-        "strategy": "default",
-        "parameters": {}
+        ]
       },
       {
         "name": "Feature.B",
@@ -32,11 +30,44 @@
               "percentage": "10"
             }
           }
-        ],
-        "strategy": "ActiveForUserWithId",
-        "parameters": {
-          "userIdList": "123,221,998"
-        }
+        ]
+      },
+      {
+        "name": "Feature.C",
+        "description": "lorem ipsum",
+        "enabled": false,
+        "strategies": [
+          {
+            "name": "default",
+            "parameters": {}
+          }
+        ]
+      },
+      {
+        "name": "Feature.D",
+        "description": "lorem ipsum",
+        "enabled": true,
+        "strategies": [
+          {
+            "name": "default",
+            "parameters": {}
+          }
+        ]
+      },
+      {
+        "name": "Feature.E",
+        "description": "lorem ipsum",
+        "enabled": true,
+        "strategies": [
+          {
+            "name": "default",
+            "parameters": {}
+          },
+          {
+            "name": "FancyStrat",
+            "parameters": {}
+          }
+        ]
       }
     ]
   }
diff --git a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
index 97c30c802d..13e026bdb6 100644
--- a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
@@ -64,14 +64,13 @@ class AddFeatureToggle extends React.Component {
                     </section>
 
                     <section>
-                        <legend>Strategies</legend>
-                        <Button icon="add" floating />
+                        <a href="#" onClick="">Add strategy..</a>
                     </section>
 
                     <br />
 
 
-                    <Button type="submit" raised primary label="Create Feature Toggle" />
+                    <Button type="submit" raised primary label="Create" />
                 </form>
             </div>
         );
diff --git a/packages/unleash-frontend-next/src/component/feature/Feature.jsx b/packages/unleash-frontend-next/src/component/feature/Feature.jsx
index cb12dfd6c9..022b95a2ab 100644
--- a/packages/unleash-frontend-next/src/component/feature/Feature.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/Feature.jsx
@@ -1,17 +1,24 @@
 /* eslint no-shadow: ["error", { "allow": ["name"] }]*/
 
 import React, { PropTypes } from 'react';
+import { Switch, FontIcon } from 'react-toolbox';
 
-const Feature = ({ onClick, name, enabled }) => (
-  <li>
-    {name} is {enabled ? 'enabled ' : 'disabled '}
-    <a onClick={onClick} href="#">toggle</a>
-  </li>
+const Feature = ({ onClick, name, enabled, strategies }) => (
+  <tr>
+    <td style={{ paddingTop: '1.5rem' }}><Switch onChange={onClick} checked={enabled} /></td>
+    <td><a href="/edit">{name}</a></td>
+    <td>{strategies.map(s => `${s.name}, `)}</td>
+    <td style={{ textAlign: 'right' }}>
+      <FontIcon value="edit" />
+      <FontIcon value="delete"  style={{ color: 'red' }} />
+    </td>
+  </tr>
 );
 
 Feature.propTypes = {
     onClick: PropTypes.func.isRequired,
     enabled: PropTypes.bool.isRequired,
+    strategies: PropTypes.array.isRequired,
     name: PropTypes.string.isRequired,
 };
 
diff --git a/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx b/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx
index 4b5730755b..89c0f83e44 100644
--- a/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import Feature from './Feature';
+import style from './table.scss';
 
 export default class FeatureList extends React.Component {
     constructor () {
@@ -27,10 +28,23 @@ export default class FeatureList extends React.Component {
                 <Feature key={featureToggle.name}
                     {...featureToggle}
                     onClick={() => onFeatureClick(featureToggle.name)}
-                />);
+                />
+            );
 
         return (
-            <ul>{features}</ul>
+            <table className={style.ztable}>
+                <thead>
+                    <tr>
+                        <th width="80">Enabled</th>
+                        <th>Feature Toggle</th>
+                        <th>Strategies</th>
+                        <th width="100" style={{ textAlign: 'right' }}>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {features}
+                </tbody>
+            </table>
         );
     }
 }
diff --git a/packages/unleash-frontend-next/src/component/feature/table.scss b/packages/unleash-frontend-next/src/component/feature/table.scss
new file mode 100644
index 0000000000..14294804d7
--- /dev/null
+++ b/packages/unleash-frontend-next/src/component/feature/table.scss
@@ -0,0 +1,12 @@
+.ztable tbody tr:nth-child(odd) {
+    background-color: #efefef;
+}
+.ztable {
+    margin: 10px;
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+.ztable td, th {
+    padding: 4px 10px;
+}
\ No newline at end of file
diff --git a/packages/unleash-frontend-next/src/page/features/index.js b/packages/unleash-frontend-next/src/page/features/index.js
index 81b8e3a681..ba112f4df8 100644
--- a/packages/unleash-frontend-next/src/page/features/index.js
+++ b/packages/unleash-frontend-next/src/page/features/index.js
@@ -13,7 +13,7 @@ export default class Features extends Component {
         return (
             <div>
                 <h1>Feature Toggles</h1>
-                <Button href={createHref} icon="add" label="Create feature toggle"/>
+                <Button href={createHref} icon="add" raised primary label="New Feature Toggle"/>
                 <FeatureListContainer />
             </div>
         );