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>
-                {description && <p>{description} </p>}
+                <HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description} />
                 <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>
-                <hr />
+                <HeaderTitle title="Applications" />
                 <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,18 +15,24 @@ class ArchiveList extends Component {
         });
         return (
             <div>
-                <h6>Toggle Archive</h6>
-
-                <DataTable
-                    rows={archive}
-                    style={{ width: '100%' }}>
-                    <TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
-                        <IconButton colored name="undo" onClick={() => revive(reviveName)} />
-                    )}>Revive</TableHeader>
-                    <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>
+                <HeaderTitle title="Toggle Archive" />
+                {
+                    archive.length > 0 ?
+                    <DataTable
+                        rows={archive}
+                        style={{ width: '100%' }}>
+                        <TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
+                            <IconButton colored name="undo" onClick={() => revive(reviveName)} />
+                        )}>Revive</TableHeader>
+                        <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> :
+                    <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">
-                    <Icon name="add" />&nbsp;&nbsp;&nbsp;
-                    {editmode ? 'Update' : 'Create'}
-                </Button>
-                &nbsp;
-                <Button type="cancel" ripple raised onClick={onCancel} style={{ float: 'right' }}>
-                    <Icon name="cancel" />&nbsp;&nbsp;&nbsp;
-                    Cancel
-                </Button>
+                <FormButtons
+                    submitText={editmode ? 'Update' : 'Create'}
+                    onCancel={onCancel}
+                />
             </form>
         );
     }

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

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

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>
-                    <Cell>
-                         <Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>
-                    </Cell>
-                </Grid>
+                <HeaderTitle title={this.props.title} actions={<Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>}/>
                 {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>
-                <h5>Showing history for toggle: <Link to={`/features/edit/${toggleName}`}><strong>{toggleName}</strong></Link></h5>
-                <ListComponent history={history} />
-            </div>
+                <ListComponent
+                    history={history}
+                    title={<span>Showing history for toggle: <Link to={`/features/edit/${toggleName}`}><strong>{toggleName}</strong></Link></span>}/>
         );
     }
 }

frontend/src/component/metrics/metrics-component.js

@@ -21,10 +21,10 @@ class Metrics extends Component {
                     <TableHeader name="name">Instance</TableHeader>
                     <TableHeader name="appName">Application name</TableHeader>
                     <TableHeader numeric name="ping" cellFormatter={
-                        (v) => (v.toString()) 
+                        (v) => (v.toString())
                     }>Last seen</TableHeader>
                     <TableHeader numeric name="count">Counted</TableHeader>
-                    
+
                 </DataTable>
             </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>
-            <Button type="submit" raised primary >Create</Button>
-            &nbsp;
-            <Button type="cancel" raised onClick={onCancel}>Cancel</Button>
-        </section>
+        <FormButtons
+            onCancel={onCancel}
+        />
     </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,26 +25,21 @@ class StrategiesListComponent extends Component {
 
         return (
             <div>
-            <h5>Strategies</h5>
-            <IconButton name="add" onClick={() => this.context.router.push('/strategies/create')} title="Add new strategy"/>
-
-            <hr />
-            <List>
-                {strategies.length > 0 ? strategies.map((strategy, i) => {
-                    return (
-                        <ListItem key={i}>
-                            <ListItemContent>
-                                <Link to={`/strategies/view/${strategy.name}`}>
-                                    <strong>{strategy.name}</strong>
-                                </Link> 
-                                <span> {strategy.description}</span></ListItemContent>
-                            <IconButton name="delete" onClick={() => removeStrategy(strategy)} />
-                        </ListItem>
-                    );
-                }) : <ListItem>No entries</ListItem>}
-                
-
-            </List>
+                <HeaderTitle title="Strategies" actions={<IconButton name="add" onClick={() => this.context.router.push('/strategies/create')} title="Add new strategy"/>} />
+                <List>
+                    {strategies.length > 0 ? strategies.map((strategy, i) => {
+                        return (
+                            <ListItem key={i}>
+                                <ListItemContent>
+                                    <Link to={`/strategies/view/${strategy.name}`}>
+                                        <strong>{strategy.name}</strong>
+                                    </Link>
+                                    <span> {strategy.description}</span></ListItemContent>
+                                <IconButton name="delete" onClick={() => removeStrategy(strategy)} />
+                            </ListItem>
+                        );
+                    }) : <ListItem>No entries</ListItem>}
+                </List>
             </div>
         );
     }