move toggle to header

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

@@ -68,14 +68,15 @@ class AddFeatureToggleComponent extends Component {
                         value={description}
                         onChange={(v) => setValue('description', v.target.value)} />
 
-                    <br />
-
-                    <Switch
+                    {!editmode && <div>
+                        <br />
+                        <Switch
                         checked={enabled}
                         onChange={() => {
                             setValue('enabled', !enabled);
                         }}>Enabled</Switch>
-                    <hr />
+                        <hr />
+                    </div>}
                 </section>
 
                 <StrategiesSection

frontend/src/component/feature/metric-component.jsx

@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react';
-import { Grid, Cell, Icon, Chip, ChipContact, IconButton } from 'react-mdl';
+import { Grid, Cell, Icon, Chip, ChipContact } from 'react-mdl';
 import Progress from './progress';
-import { Link, hashHistory } from 'react-router';
-import { AppsLinkList, SwitchWithLabel, calc, styles as commonStyles } from '../common';
+import { Link } from 'react-router';
+import { AppsLinkList, calc, styles as commonStyles } from '../common';
 import styles from './metrics.scss';
 
 const StrategyChipItem = ({ strategy }) => (
@@ -26,10 +26,8 @@ export default class MetricComponent extends React.Component {
         return {
             metrics: PropTypes.object.isRequired,
             featureToggle: PropTypes.object.isRequired,
-            toggleFeature: PropTypes.func.isRequired,
             fetchSeenApps: PropTypes.func.isRequired,
             fetchFeatureMetrics: PropTypes.func.isRequired,
-            removeFeatureToggle: PropTypes.func.isRequired,
         };
     }
 
@@ -46,7 +44,7 @@ export default class MetricComponent extends React.Component {
     }
 
     render () {
-        const { metrics = {}, featureToggle, toggleFeature, removeFeatureToggle } = this.props;
+        const { metrics = {}, featureToggle } = this.props;
         const {
             lastHour = { yes: 0, no: 0, isFallback: true },
             lastMinute = { yes: 0, no: 0, isFallback: true },
@@ -56,24 +54,7 @@ export default class MetricComponent extends React.Component {
         const lastHourPercent = 1 * calc(lastHour.yes, lastHour.yes + lastHour.no, 0);
         const lastMinutePercent = 1 * calc(lastMinute.yes, lastMinute.yes + lastMinute.no, 0);
 
-
-        const removeToggle = () => {
-            if (window.confirm('Are you sure you want to remove this toggle?')) {  // eslint-disable-line no-alert
-                removeFeatureToggle(featureToggle.name);
-                hashHistory.push('/features');
-            }
-        };
-
         return (<div>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                <span className={commonStyles.truncate} style={{ paddingTop: '4px' }}>
-                    <SwitchWithLabel
-                        checked={featureToggle.enabled}
-                        onChange={() => toggleFeature(featureToggle)}>Toggle {featureToggle.name}</SwitchWithLabel>
-                </span>
-                <IconButton name="delete" onClick={removeToggle} className="mdl-color-text--grey-600"/>
-            </div>
-            <hr className={commonStyles.divider}/>
             <Grid style={{ textAlign: 'center' }}>
                 <Cell tablet={4} col={3} phone={12}>
                     {

frontend/src/component/feature/metric-container.jsx

@@ -2,7 +2,6 @@
 import { connect } from 'react-redux';
 
 import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-actions';
-import { toggleFeature, removeFeatureToggle } from '../../store/feature-actions';
 
 import MatricComponent from './metric-component';
 
@@ -26,7 +25,5 @@ export default connect((state, props) => ({
     metrics: getMetricsForToggle(state, props.featureToggle.name),
 }), {
     fetchFeatureMetrics,
-    toggleFeature,
     fetchSeenApps,
-    removeFeatureToggle,
 })(MatricComponent);

frontend/src/component/feature/view-component.jsx

@@ -1,10 +1,11 @@
 import React, { PropTypes } from 'react';
-import { Tabs, Tab, ProgressBar } from 'react-mdl';
+import { Tabs, Tab, ProgressBar, IconButton } from 'react-mdl';
 import { hashHistory, Link } from 'react-router';
 
 import HistoryComponent from '../history/history-list-toggle-container';
 import MetricComponent from './metric-container';
 import EditFeatureToggle from './form-edit-container.jsx';
+import { SwitchWithLabel } from '../common';
 import { formatFullDateTime } from '../common/util';
 
 const TABS = {
@@ -24,6 +25,8 @@ export default class ViewFeatureToggleComponent extends React.Component {
             activeTab: PropTypes.string.isRequired,
             featureToggleName: PropTypes.string.isRequired,
             features: PropTypes.array.isRequired,
+            toggleFeature: PropTypes.func.isRequired,
+            removeFeatureToggle: PropTypes.func.isRequired,
             fetchFeatureToggles: PropTypes.array.isRequired,
             featureToggle: PropTypes.object.isRequired,
         };
@@ -60,6 +63,8 @@ export default class ViewFeatureToggleComponent extends React.Component {
             features,
             activeTab,
             featureToggleName,
+            toggleFeature,
+            removeFeatureToggle,
         } = this.props;
 
         if (!featureToggle) {
@@ -77,9 +82,20 @@ export default class ViewFeatureToggleComponent extends React.Component {
         const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.view;
         const tabContent = this.getTabContent(activeTab);
 
+        const removeToggle = () => {
+            if (window.confirm('Are you sure you want to remove this toggle?')) {  // eslint-disable-line no-alert
+                removeFeatureToggle(featureToggle.name);
+                hashHistory.push('/features');
+            }
+        };
+
         return (
             <div>
-                <h4>{featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small>
+                <h4>
+                    <SwitchWithLabel checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle)} />
+                    {featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small>
+
+                    <IconButton style={{ float: 'right' }} name="delete" onClick={removeToggle} className="mdl-color-text--grey-600" />
                     <small style={{ float: 'right', lineHeight: '38px' }}>
                         Created {formatFullDateTime(featureToggle.createdAt)}
                     </small>

frontend/src/component/feature/view-container.jsx

@@ -1,7 +1,7 @@
 
 import { connect } from 'react-redux';
 
-import { fetchFeatureToggles } from '../../store/feature-actions';
+import { fetchFeatureToggles, toggleFeature, removeFeatureToggle } from '../../store/feature-actions';
 
 import ViewToggleComponent from './view-component';
 
@@ -11,4 +11,6 @@ export default connect((state, props) => ({
     activeTab: props.activeTab,
 }), {
     fetchFeatureToggles,
+    toggleFeature,
+    removeFeatureToggle,
 })(ViewToggleComponent);