fix: expand retries does nothing

lib/static/components/controls/button.js

@@ -10,16 +10,19 @@ export default class ControlButton extends Component {
         handler: PropTypes.func.isRequired,
         isActive: PropTypes.bool,
         isAction: PropTypes.bool,
-        isDisabled: PropTypes.bool
+        isDisabled: PropTypes.bool,
+        isSuiteControl: PropTypes.bool,
+        isControlGroup: PropTypes.bool
     }
 
     render() {
-        const {label, handler, isActive, isAction, isSuiteControl, isDisabled = false} = this.props;
+        const {label, handler, isActive, isAction, isSuiteControl, isControlGroup, isDisabled = false} = this.props;
         const className = classNames(
             'button',
             {'button_type_suite-controls': isSuiteControl},
             {'button_checked': isActive},
-            {'button_type_action': isAction}
+            {'button_type_action': isAction},
+            {'control-group__item': isControlGroup}
         );
 
         return (<button onClick={handler} className={className} disabled={isDisabled}>{label}</button>);

lib/static/components/controls/common-controls.js

@@ -17,31 +17,37 @@ class ControlButtons extends Component {
                     {value: 'all', text: 'Show all'},
                     {value: 'failed', text: 'Show only failed'}
                 ]}/>
-                <ControlButton
-                    label="Expand all"
-                    isActive={view.expand === 'all'}
-                    handler={actions.expandAll}
-                />
-                <ControlButton
-                    label="Collapse all"
-                    isActive={view.expand === 'none'}
-                    handler={actions.collapseAll}
-                />
-                <ControlButton
-                    label="Expand errors"
-                    isActive={view.expand === 'errors'}
-                    handler={actions.expandErrors}
-                />
+                <div className="control-group">
+                    <ControlButton
+                        label="Expand all"
+                        isControlGroup={true}
+                        isActive={view.expand === 'all'}
+                        handler={actions.expandAll}
+                    />
+                    <ControlButton
+                        label="Collapse all"
+                        isControlGroup={true}
+                        isActive={view.expand === 'none'}
+                        handler={actions.collapseAll}
+                    />
+                    <ControlButton
+                        label="Expand errors"
+                        isControlGroup={true}
+                        isActive={view.expand === 'errors'}
+                        handler={actions.expandErrors}
+                    />
+                    <ControlButton
+                        label="Expand retries"
+                        isControlGroup={true}
+                        isActive={view.expand === 'retries'}
+                        handler={actions.expandRetries}
+                    />
+                </div>
                 <ControlButton
                     label="Show skipped"
                     isActive={view.showSkipped}
                     handler={actions.toggleSkipped}
                 />
-                <ControlButton
-                    label="Expand retries"
-                    isActive={view.showRetries}
-                    handler={actions.toggleRetries}
-                />
                 <ControlButton
                     label="Show only diff"
                     isActive={view.showOnlyDiff}

lib/static/components/section/section-base.js

@@ -8,7 +8,6 @@ import {isFailStatus, isSkippedStatus} from '../../../common-utils';
 export default class Base extends Component {
     static propTypes = {
         expand: PropTypes.string,
-        showRetries: PropTypes.bool,
         viewMode: PropTypes.string
     }
 
@@ -18,13 +17,13 @@ export default class Base extends Component {
     }
 
     componentWillMount() {
-        const {failed, retried, skipped, expand, showRetries} = this._getStateFromProps();
+        const {failed, retried, skipped, expand} = this._getStateFromProps();
 
         this.setState({
             failed,
             retried,
             skipped,
-            collapsed: this._shouldBeCollapsed({failed, retried, expand, showRetries})
+            collapsed: this._shouldBeCollapsed({failed, retried, expand})
         });
     }
 
@@ -53,10 +52,10 @@ export default class Base extends Component {
         return null;
     }
 
-    _shouldBeCollapsed({failed, retried, expand, showRetries}) {
+    _shouldBeCollapsed({failed, retried, expand}) {
         if (expand === 'errors' && failed) {
             return false;
-        } else if (showRetries && retried) {
+        } else if (expand === 'retries' && retried) {
             return false;
         } else if (expand === 'all') {
             return false;

lib/static/components/section/section-browser.js

@@ -55,5 +55,5 @@ export class SectionBrowser extends SectionBase {
 }
 
 export default connect(
-    ({view: {expand, showRetries}}) => ({expand, showRetries})
+    ({view: {expand}}) => ({expand})
 )(SectionBrowser);

lib/static/components/section/section-common.js

@@ -22,7 +22,7 @@ export class SectionCommon extends SectionBase {
     }
 
     render() {
-        const {suite, expand, showRetries} = this.props;
+        const {suite, expand} = this.props;
         const {
             name,
             browsers = [],
@@ -40,7 +40,7 @@ export class SectionCommon extends SectionBase {
 
         const childrenTmpl = children.map((child) => {
             const key = uniqueId(`${suite.suitePath}-${suite.name}`);
-            return <SectionCommon key={key} suite={child} expand={expand} showRetries={showRetries}/>;
+            return <SectionCommon key={key} suite={child} expand={expand}/>;
         });
         const browserTmpl = browsers.map((browser) => {
             return <SectionBrowser key={browser.name} browser={browser} suite={suite}/>;
@@ -71,10 +71,9 @@ export class SectionCommon extends SectionBase {
 }
 
 export default connect(
-    ({view: {expand, showRetries, viewMode}, suites}, ownProps) => {
+    ({view: {expand, viewMode}, suites}, ownProps) => {
         return {
             expand,
-            showRetries,
             viewMode,
             suite: suites[ownProps.suiteId]
         };

lib/static/modules/action-names.js

@@ -14,11 +14,11 @@ export default {
     VIEW_INITIAL: 'VIEW_INITIAL',
     VIEW_EXPAND_ALL: 'VIEW_EXPAND_ALL',
     VIEW_EXPAND_ERRORS: 'VIEW_EXPAND_ERRORS',
+    VIEW_EXPAND_RETRIES: 'VIEW_EXPAND_RETRIES',
     VIEW_COLLAPSE_ALL: 'VIEW_COLLAPSE_ALL',
     VIEW_SHOW_ALL: 'VIEW_SHOW_ALL',
     VIEW_SHOW_FAILED: 'VIEW_SHOW_FAILED',
     VIEW_TOGGLE_SKIPPED: 'VIEW_TOGGLE_SKIPPED',
-    VIEW_TOGGLE_RETRIES: 'VIEW_TOGGLE_RETRIES',
     VIEW_TOGGLE_ONLY_DIFF: 'VIEW_TOGGLE_ONLY_DIFF',
     VIEW_UPDATE_BASE_HOST: 'VIEW_UPDATE_BASE_HOST',
     VIEW_TOGGLE_SCALE_IMAGES: 'VIEW_TOGGLE_SCALE_IMAGES'

lib/static/modules/actions.js

@@ -78,9 +78,9 @@ export const testsEnd = () => ({type: actionNames.TESTS_END});
 export const runFailed = () => ({type: actionNames.RUN_FAILED_TESTS});
 export const expandAll = () => ({type: actionNames.VIEW_EXPAND_ALL});
 export const expandErrors = () => ({type: actionNames.VIEW_EXPAND_ERRORS});
+export const expandRetries = () => ({type: actionNames.VIEW_EXPAND_RETRIES});
 export const collapseAll = () => ({type: actionNames.VIEW_COLLAPSE_ALL});
 export const toggleSkipped = () => ({type: actionNames.VIEW_TOGGLE_SKIPPED});
-export const toggleRetries = () => ({type: actionNames.VIEW_TOGGLE_RETRIES});
 export const toggleOnlyDiff = () => ({type: actionNames.VIEW_TOGGLE_ONLY_DIFF});
 export const toggleScaleImages = () => ({type: actionNames.VIEW_TOGGLE_SCALE_IMAGES});
 export const updateBaseHost = (host) => {

lib/static/modules/default-state.js

@@ -28,7 +28,6 @@ export default {
         viewMode: 'all',
         expand: 'errors',
         showSkipped: false,
-        showRetries: false,
         showOnlyDiff: false,
         scaleImages: false,
         baseHost: ''

lib/static/modules/reducer.js

@@ -82,6 +82,9 @@ export default function reducer(state = getInitialState(compiledData), action) {
         case actionNames.VIEW_EXPAND_ERRORS: {
             return _mutateStateView(state, {expand: 'errors'});
         }
+        case actionNames.VIEW_EXPAND_RETRIES: {
+            return _mutateStateView(state, {expand: 'retries'});
+        }
         case actionNames.VIEW_COLLAPSE_ALL: {
             return _mutateStateView(state, {expand: 'none'});
         }
@@ -94,9 +97,6 @@ export default function reducer(state = getInitialState(compiledData), action) {
         case actionNames.VIEW_TOGGLE_SKIPPED: {
             return _mutateStateView(state, {showSkipped: !state.view.showSkipped});
         }
-        case actionNames.VIEW_TOGGLE_RETRIES: {
-            return _mutateStateView(state, {showRetries: !state.view.showRetries});
-        }
         case actionNames.VIEW_TOGGLE_ONLY_DIFF: {
             return _mutateStateView(state, {showOnlyDiff: !state.view.showOnlyDiff});
         }

lib/static/styles.css

@@ -35,6 +35,7 @@
     padding: 5px;
     outline: 0;
     box-sizing: content-box;
+    transition: border-color 200ms, background-color 200ms;
 }
 
 .button:hover {
@@ -45,10 +46,6 @@
     background: #ccc;
 }
 
-.button:hover:enabled {
-    border-color: #555;
-}
-
 .button.pressed,
 .button:active {
     background: #eee;
@@ -63,6 +60,53 @@
     background: #ffde5a;
 }
 
+.control-group {
+    display: inline-block;
+    margin-right: 4px;
+    white-space: nowrap;
+}
+
+.control-group__item {
+    position: relative;
+    margin: 0;
+    border-radius: 0;
+}
+
+.control-group__item:first-child {
+    border-radius: 2px 0 0 2px;
+}
+
+.control-group__item:last-child {
+    border-radius: 0 2px 2px 0;
+}
+
+.control-group__item:not(:last-child) {
+    border-right: 0;
+}
+
+.control-group__item:not(:last-child):after {
+    content: "";
+    border-right: 1px solid transparent;
+    position: absolute;
+    z-index: 1;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    transition: border-color 200ms;
+}
+
+.control-group__item:first-child:after {
+    border-radius: 2px 0 0 2px;
+}
+
+.control-group__item:last-child:after {
+    border-radius: 0 2px 2px 0;
+}
+
+.control-group__item:hover:after {
+    border-color: #555;
+}
+
 .image-box {
     padding: 5px;
     border: 1px solid #ccc;