Admin UI tweaking #153

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": {}
+          }
+        ]
       }
     ]
   }

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>
         );

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,
 };
 

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>
         );
     }
 }

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;
+}

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>
         );