diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/index.jsx index 40417d4e1a..36c63d0b69 100644 --- a/frontend/src/component/feature/form/index.jsx +++ b/frontend/src/component/feature/form/index.jsx @@ -68,14 +68,15 @@ class AddFeatureToggleComponent extends Component { value={description} onChange={(v) => setValue('description', v.target.value)} /> -
- - +
+ { setValue('enabled', !enabled); }}>Enabled -
+
+ } ( @@ -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 (
-
- - toggleFeature(featureToggle)}>Toggle {featureToggle.name} - - -
-
{ diff --git a/frontend/src/component/feature/metric-container.jsx b/frontend/src/component/feature/metric-container.jsx index ef7a8b329b..90f8fe6c54 100644 --- a/frontend/src/component/feature/metric-container.jsx +++ b/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); diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx index 9133a372d0..2e3ece9b55 100644 --- a/frontend/src/component/feature/view-component.jsx +++ b/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 (
-

{featureToggle.name} {featureToggle.enabled ? 'is enabled' : 'is disabled'} +

+ toggleFeature(featureToggle)} /> + {featureToggle.name} {featureToggle.enabled ? 'is enabled' : 'is disabled'} + + Created {formatFullDateTime(featureToggle.createdAt)} diff --git a/frontend/src/component/feature/view-container.jsx b/frontend/src/component/feature/view-container.jsx index 47bedf154a..5acbae1714 100644 --- a/frontend/src/component/feature/view-container.jsx +++ b/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);