From 5cfc5b0861f12b7a9ac39a43a739773ad1f08c58 Mon Sep 17 00:00:00 2001 From: vsandvold Date: Wed, 4 Jan 2017 00:29:27 +0100 Subject: [PATCH] moved remove feature button from list to view --- frontend/src/component/common/common.scss | 12 +++++- frontend/src/component/common/index.js | 6 ++- .../feature/feature-list-item-component.jsx | 42 +++++++------------ frontend/src/component/feature/feature.scss | 30 +++++-------- .../src/component/feature/list-component.jsx | 6 +-- .../src/component/feature/list-container.jsx | 3 +- .../component/feature/metric-component.jsx | 32 +++++++++----- .../component/feature/metric-container.jsx | 3 +- 8 files changed, 67 insertions(+), 67 deletions(-) diff --git a/frontend/src/component/common/common.scss b/frontend/src/component/common/common.scss index 3244d563de..8a1d6a3f07 100644 --- a/frontend/src/component/common/common.scss +++ b/frontend/src/component/common/common.scss @@ -2,4 +2,14 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -} \ No newline at end of file +} + +.divider { + border-color: #e1e1e1; +} + +@media (max-width: 960px) { + .hideLt960 { + display: none; + } +} diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js index 7500669472..1b6130fea0 100644 --- a/frontend/src/component/common/index.js +++ b/frontend/src/component/common/index.js @@ -9,6 +9,8 @@ const { } = require('react-mdl'); const { Link } = require('react-router'); +export { styles }; + export const shorten = (str, len = 50) => (str && str.length > len ? `${str.substring(0, len)}...` : str); export const AppsLinkList = ({ apps }) => ( @@ -52,10 +54,10 @@ export const FormButtons = ({ submitText = 'Create', onCancel }) => ( export const SwitchWithLabel = ({ onChange, children, checked }) => ( - + - {children} + {children} ); diff --git a/frontend/src/component/feature/feature-list-item-component.jsx b/frontend/src/component/feature/feature-list-item-component.jsx index 0e39abf359..31f639fd4f 100644 --- a/frontend/src/component/feature/feature-list-item-component.jsx +++ b/frontend/src/component/feature/feature-list-item-component.jsx @@ -1,15 +1,14 @@ import React, { PropTypes } from 'react'; import { Link } from 'react-router'; -import { Switch, Icon, IconButton } from 'react-mdl'; +import { Chip, Switch, Icon } from 'react-mdl'; import Progress from './progress'; -import { shorten, calc } from '../common'; +import { shorten, calc, styles as commonStyles } from '../common'; -import style from './feature.scss'; +import styles from './feature.scss'; const Feature = ({ feature, onFeatureClick, - onFeatureRemove, settings, metricsLastHour = { yes: 0, no: 0, isFallback: true }, metricsLastMinute = { yes: 0, no: 0, isFallback: true }, @@ -24,44 +23,34 @@ const Feature = ({ calc(metricsLastMinute.yes, metricsLastMinute.yes + metricsLastMinute.no, 0) ); - const removeToggle = () => { - if (window.confirm('Are you sure you want to remove this toggle?')) { // eslint-disable-line no-alert - onFeatureRemove(name); - } - }; - return (
  • - -
    + +
    { isStale ? : + name="report problem" title="No metrics available" /> :
    }
    - - onFeatureClick(feature)} checked={enabled} /> + + onFeatureClick(feature)} checked={enabled} /> - - - {shorten(name, 75)} - {shorten(description, 75) || ''} + + + {shorten(name, 75)} + {shorten(description, 75) || ''} - - - {strategies && strategies.map((s, i) => + + {strategies && strategies.map((s, i) => {s.name} - )} - - - + )}
    • ); @@ -70,7 +59,6 @@ const Feature = ({ Feature.propTypes = { feature: PropTypes.object, onFeatureClick: PropTypes.func, - onFeatureRemove: PropTypes.func, }; export default Feature; diff --git a/frontend/src/component/feature/feature.scss b/frontend/src/component/feature/feature.scss index 75de1f5e72..065e6b694d 100644 --- a/frontend/src/component/feature/feature.scss +++ b/frontend/src/component/feature/feature.scss @@ -14,30 +14,26 @@ .link { color: #212121; text-decoration: none; -} - -.link small { - color: #aaa; - font-weight: 100; + font-weight: normal; + display: block; } .link:hover { color: #000; } -.iconListItem { - color: #bbb !important; +.iconListItemProgress { + float: left; + margin-right: 16px; } -.iconListItem *:hover { - color: #333; + +.iconListItemToggle { + float: left; + margin-right: 16px; + width: 40px; } .iconListItemChip { - font-size: 10px; - line-height: 12px; - background-color: #e0e0e0; - border-radius: 10px; - padding: 5px 8px 4px 8px; margin-left: 5px !important; } @@ -58,9 +54,3 @@ .topListItem2 { flex: 2; } - -@media (max-width: 960px) { - .hideLt960 { - display: none; - } -} diff --git a/frontend/src/component/feature/list-component.jsx b/frontend/src/component/feature/list-component.jsx index 625fe0d8b8..991f9e4d80 100644 --- a/frontend/src/component/feature/list-component.jsx +++ b/frontend/src/component/feature/list-component.jsx @@ -10,7 +10,6 @@ export default class FeatureListComponent extends React.PureComponent { static propTypes () { return { onFeatureClick: PropTypes.func.isRequired, - onFeatureRemove: PropTypes.func.isRequired, features: PropTypes.array.isRequired, featureMetrics: PropTypes.object.isRequired, fetchFeatureToggles: PropTypes.func.isRequired, @@ -47,7 +46,7 @@ export default class FeatureListComponent extends React.PureComponent { } render () { - const { features, onFeatureClick, onFeatureRemove, featureMetrics, settings } = this.props; + const { features, onFeatureClick, featureMetrics, settings } = this.props; return (
    @@ -104,8 +103,7 @@ export default class FeatureListComponent extends React.PureComponent { metricsLastHour={featureMetrics.lastHour[feature.name]} metricsLastMinute={featureMetrics.lastMinute[feature.name]} feature={feature} - onFeatureClick={onFeatureClick} - onFeatureRemove={onFeatureRemove}/> + onFeatureClick={onFeatureClick}/> )}
    diff --git a/frontend/src/component/feature/list-container.jsx b/frontend/src/component/feature/list-container.jsx index d4e934f885..ec8ccbd799 100644 --- a/frontend/src/component/feature/list-container.jsx +++ b/frontend/src/component/feature/list-container.jsx @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { toggleFeature, fetchFeatureToggles, removeFeatureToggle } from '../../store/feature-actions'; +import { toggleFeature, fetchFeatureToggles } from '../../store/feature-actions'; import { fetchFeatureMetrics } from '../../store/feature-metrics-actions'; import { updateSettingForGroup } from '../../store/settings/actions'; @@ -71,7 +71,6 @@ const mapStateToProps = (state) => { const mapDispatchToProps = { onFeatureClick: toggleFeature, - onFeatureRemove: removeFeatureToggle, fetchFeatureToggles, fetchFeatureMetrics, updateSetting: updateSettingForGroup('feature'), diff --git a/frontend/src/component/feature/metric-component.jsx b/frontend/src/component/feature/metric-component.jsx index 021911c573..ed62396144 100644 --- a/frontend/src/component/feature/metric-component.jsx +++ b/frontend/src/component/feature/metric-component.jsx @@ -1,8 +1,8 @@ import React, { PropTypes } from 'react'; -import { Grid, Cell, Icon, Chip, ChipContact } from 'react-mdl'; +import { Grid, Cell, Icon, Chip, ChipContact, IconButton } from 'react-mdl'; import Progress from './progress'; -import { Link } from 'react-router'; -import { AppsLinkList, SwitchWithLabel, calc } from '../common'; +import { Link, hashHistory } from 'react-router'; +import { AppsLinkList, SwitchWithLabel, calc, styles as commonStyles } from '../common'; import styles from './metrics.scss'; const StrategyChipItem = ({ strategy }) => ( @@ -29,6 +29,7 @@ export default class MetricComponent extends React.Component { toggleFeature: PropTypes.func.isRequired, fetchSeenApps: PropTypes.func.isRequired, fetchFeatureMetrics: PropTypes.func.isRequired, + removeFeatureToggle: PropTypes.func.isRequired, }; } @@ -45,7 +46,7 @@ export default class MetricComponent extends React.Component { } render () { - const { metrics = {}, featureToggle, toggleFeature } = this.props; + const { metrics = {}, featureToggle, toggleFeature, removeFeatureToggle } = this.props; const { lastHour = { yes: 0, no: 0, isFallback: true }, lastMinute = { yes: 0, no: 0, isFallback: true }, @@ -55,13 +56,24 @@ 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} +
    + + toggleFeature(featureToggle)}>Toggle {featureToggle.name} + +
    -
    +
    { @@ -95,7 +107,7 @@ export default class MetricComponent extends React.Component { -
    +
    ); } diff --git a/frontend/src/component/feature/metric-container.jsx b/frontend/src/component/feature/metric-container.jsx index 077775fe84..ef7a8b329b 100644 --- a/frontend/src/component/feature/metric-container.jsx +++ b/frontend/src/component/feature/metric-container.jsx @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-actions'; -import { toggleFeature } from '../../store/feature-actions'; +import { toggleFeature, removeFeatureToggle } from '../../store/feature-actions'; import MatricComponent from './metric-component'; @@ -28,4 +28,5 @@ export default connect((state, props) => ({ fetchFeatureMetrics, toggleFeature, fetchSeenApps, + removeFeatureToggle, })(MatricComponent);