minor cleanups, move header to common component

frontend/src/component/application/application-edit-component.js

@@ -3,7 +3,7 @@ import React, { Component, PureComponent } from 'react';
 
 import { Link } from 'react-router';
 import { Grid, Cell, List, ListItem, ListItemContent, Textfield, Icon } from 'react-mdl';
-
+import { HeaderTitle } from '../common';
 
 class StatefulTextfield extends Component {
     constructor (props) {
@@ -51,8 +51,7 @@ class ClientStrategies extends PureComponent {
 
         return (
             <div>
-                <h5><Icon name={icon} /> {appName}</h5>
+                <HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description} />
-                {description && <p>{description} </p>}
                 <Grid>
                     <Cell col={3}>
                         <h6> Toggles</h6>

frontend/src/component/application/application-list-component.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { AppsLinkList } from '../common';
+import { AppsLinkList, HeaderTitle } from '../common';
 
 class ClientStrategies extends Component {
 
@@ -17,8 +17,7 @@ class ClientStrategies extends Component {
         }
         return (
             <div>
-                <h5>Applications</h5>
+                <HeaderTitle title="Applications" />
-                <hr />
                 <AppsLinkList apps={applications} />
             </div>
         );

frontend/src/component/archive/archive-list-component.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
-import { DataTable, TableHeader, Chip, Switch, IconButton } from 'react-mdl';
+import { Link } from 'react-router';
+import { DataTable, TableHeader, IconButton, Icon } from 'react-mdl';
+import { HeaderTitle } from '../common';
 
 class ArchiveList extends Component {
     componentDidMount () {
@@ -13,8 +15,9 @@ class ArchiveList extends Component {
         });
         return (
             <div>
-                <h6>Toggle Archive</h6>
+                <HeaderTitle title="Toggle Archive" />
-
+                {
+                    archive.length > 0 ?
                     <DataTable
                         rows={archive}
                         style={{ width: '100%' }}>
@@ -24,7 +27,12 @@ class ArchiveList extends Component {
                         <TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>Enabled</TableHeader>
                         <TableHeader name="name">Toggle name</TableHeader>
                         <TableHeader numeric name="createdAt">Created</TableHeader>
-                </DataTable>
+                    </DataTable> :
+                    <div style={{ textAlign: 'center' }}>
+                        <Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br />
+                        No archived feature toggles, go see <Link to="/features">active toggles here</Link>
+                    </div>
+                }
             </div>
         );
     }

frontend/src/component/common/index.js

@@ -1,5 +1,9 @@
 const React = require('react');
-const { List, ListItem, ListItemContent } = require('react-mdl');
+const {
+    List, ListItem, ListItemContent,
+    Grid, Cell,
+    Button, Icon,
+} = require('react-mdl');
 const { Link } = require('react-router');
 
 export const AppsLinkList = ({ apps }) => (
@@ -16,3 +20,26 @@ export const AppsLinkList = ({ apps }) => (
     </List>
 );
 
+export const HeaderTitle = ({ title, actions, subtitle }) => (
+    <Grid style={{ borderBottom: '1px solid #f1f1f1', marginBottom: '10px' }}>
+        <Cell col={6}>
+            <h4 className="mdl-typography--subhead">{title}</h4>
+            {subtitle && <small>{subtitle}</small>}
+        </Cell>
+        <Cell col={6} style={{ textAlign: 'right' }}>{actions}</Cell>
+    </Grid>
+);
+
+export const FormButtons = ({ submitText = 'Create', onCancel }) => (
+    <div>
+        <Button type="submit" ripple raised primary icon="add">
+            <Icon name="add" />&nbsp;&nbsp;&nbsp;
+            { submitText }
+        </Button>
+        &nbsp;
+        <Button type="cancel" ripple raised onClick={onCancel} style={{ float: 'right' }}>
+            <Icon name="cancel" />&nbsp;&nbsp;&nbsp;
+            Cancel
+        </Button>
+    </div>
+);

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

@@ -1,7 +1,9 @@
 import React, { Component, PropTypes } from 'react';
-import { Textfield, Button, Switch, Icon } from 'react-mdl';
+import { Textfield, Switch } from 'react-mdl';
 import StrategiesSection from './strategies-section-container';
 
+import { FormButtons } from '../../common';
+
 const trim = (value) => {
     if (value && value.trim) {
         return value.trim();
@@ -77,15 +79,10 @@ class AddFeatureToggleComponent extends Component {
                     removeStrategy={removeStrategy} />
 
                 <br />
-                <Button type="submit" ripple raised primary icon="add">
+                <FormButtons
-                    <Icon name="add" />&nbsp;&nbsp;&nbsp;
+                    submitText={editmode ? 'Update' : 'Create'}
-                    {editmode ? 'Update' : 'Create'}
+                    onCancel={onCancel}
-                </Button>
+                />
-                &nbsp;
-                <Button type="cancel" ripple raised onClick={onCancel} style={{ float: 'right' }}>
-                    <Icon name="cancel" />&nbsp;&nbsp;&nbsp;
-                    Cancel
-                </Button>
             </form>
         );
     }

frontend/src/component/history/history-component.jsx

@@ -18,10 +18,7 @@ class History extends PureComponent {
         }
 
         return (
-            <div>
+            <HistoryList history={history} title="Last 100 changes" />
-                <h5>Last 100 changes</h5>
-                <HistoryList history={history} />
-            </div>
         );
     }
 }

frontend/src/component/history/history-list-component.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import HistoryItemDiff from './history-item-diff';
 import HistoryItemJson from './history-item-json';
 import { Switch, Table, TableHeader, Grid, Cell } from 'react-mdl';
+import { HeaderTitle } from '../common';
 
 import style from './history.scss';
 
@@ -41,11 +42,7 @@ class HistoryList extends Component {
 
         return (
             <div className={style.history}>
-                <Grid>
+                <HeaderTitle title={this.props.title} actions={<Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>}/>
-                    <Cell>
-                         <Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>
-                    </Cell>
-                </Grid>
                 {entries}
             </div>
         );

frontend/src/component/history/history-list-toggle-component.jsx

@@ -20,10 +20,9 @@ class HistoryListToggle extends Component {
         }
         const { history, toggleName } = this.props;
         return (
-            <div>
+                <ListComponent
-                <h5>Showing history for toggle: <Link to={`/features/edit/${toggleName}`}><strong>{toggleName}</strong></Link></h5>
+                    history={history}
-                <ListComponent history={history} />
+                    title={<span>Showing history for toggle: <Link to={`/features/edit/${toggleName}`}><strong>{toggleName}</strong></Link></span>}/>
-            </div>
         );
     }
 }

frontend/src/component/strategies/add-strategy.jsx

@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react';
 
-import { Textfield, Button, IconButton } from 'react-mdl';
+import { Textfield, IconButton } from 'react-mdl';
+import { HeaderTitle, FormButtons } from '../common';
+
 
 const trim = (value) => {
     if (value && value.trim) {
@@ -35,6 +37,7 @@ const AddStrategy = ({
     onSubmit,
 }) => (
     <form onSubmit={onSubmit(input)}>
+        <HeaderTitle title="Create new strategy"/>
         <section>
             <Textfield label="Strategy name"
                 name="name" required
@@ -63,11 +66,9 @@ const AddStrategy = ({
         <br />
         <hr />
 
-        <section>
+        <FormButtons
-            <Button type="submit" raised primary >Create</Button>
+            onCancel={onCancel}
-            &nbsp;
+        />
-            <Button type="cancel" raised onClick={onCancel}>Cancel</Button>
-        </section>
     </form>
 );
 

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

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router';
 
 import { List, ListItem, ListItemContent, IconButton, Chip } from 'react-mdl';
+import { HeaderTitle } from '../common';
 
 class StrategiesListComponent extends Component {
 
@@ -24,10 +25,7 @@ class StrategiesListComponent extends Component {
 
         return (
             <div>
-            <h5>Strategies</h5>
+                <HeaderTitle title="Strategies" actions={<IconButton name="add" onClick={() => this.context.router.push('/strategies/create')} title="Add new strategy"/>} />
-            <IconButton name="add" onClick={() => this.context.router.push('/strategies/create')} title="Add new strategy"/>
-
-            <hr />
                 <List>
                     {strategies.length > 0 ? strategies.map((strategy, i) => {
                         return (
@@ -41,8 +39,6 @@ class StrategiesListComponent extends Component {
                             </ListItem>
                         );
                     }) : <ListItem>No entries</ListItem>}
-                
-
                 </List>
             </div>
         );