fix: apply edits

gemini-testing · Jun 23, 2023 · 4af63cd · 4af63cd
1 parent 012b049
commit 4af63cd
Show file tree

Hide file tree

Showing 14 changed files with 131 additions and 81 deletions.
diff --git a/lib/common-utils.js b/lib/common-utils.js
@@ -115,3 +115,4 @@ function isRelativeUrl(url) {
 exports.isCheckboxChecked = (status) => status == CHECKED; // eslint-disable-line eqeqeq
 exports.isCheckboxIndeterminate = (status) => status == INDETERMINATE; // eslint-disable-line eqeqeq
 exports.isCheckboxUnchecked = (status) => status == UNCHECKED; // eslint-disable-line eqeqeq
+exports.getToggledCheckboxState = (status) => exports.isCheckboxChecked(status) ? UNCHECKED : CHECKED;
diff --git a/lib/static/components/bullet.js b/lib/static/components/bullet.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {Checkbox} from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+import {isCheckboxChecked, isCheckboxIndeterminate} from '../../common-utils';
+import {CHECKED, INDETERMINATE, UNCHECKED} from '../../constants/checked-statuses';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+const Bullet = ({status, onClick, bulletClassName = 'section__bullet'}) => {
+    const [isCheckbox] = useLocalStorage('showCheckboxes', false);
+
+    if (!isCheckbox) {
+        return <span className={bulletClassName} />;
+    }
+
+    return <Checkbox
+        checked={isCheckboxChecked(status)}
+        indeterminate={isCheckboxIndeterminate(status)}
+        onClick={onClick}
+    />;
+};
+
+Bullet.propTypes = {
+    status: PropTypes.oneOf([CHECKED, UNCHECKED, INDETERMINATE]),
+    onClick: PropTypes.func,
+    bulletClassName: PropTypes.string
+};
+
+export default Bullet;
diff --git a/lib/static/components/controls/run-button/index.js b/lib/static/components/controls/run-button/index.js
@@ -2,6 +2,7 @@
 
 import React, {useEffect, useState} from 'react';
 import {bindActionCreators} from 'redux';
+import {isEmpty} from 'lodash';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -22,15 +23,14 @@ const RunButton = ({actions, autoRun, isDisabled, isRunning, failedTests, checke
     const [mode, setMode] = useState(RunMode.ALL);
     const [showCheckboxes] = useLocalStorage('showCheckboxes', false);
 
-    const btnClassName = classNames({'button_blink': isRunning});
+    const btnClassName = classNames('btn', {'button_blink': isRunning});
 
-    const shouldShowFailed = !!failedTests.length;
-    const shouldShowChecked = showCheckboxes && !!checkedTests.length;
-    const shouldShowPopup = !isDisabled && (shouldShowFailed || shouldShowChecked);
+    const shouldDisableFailed = isEmpty(failedTests);
+    const shouldDisableChecked = !showCheckboxes || isEmpty(checkedTests);
 
     const selectAllTests = () => setMode(RunMode.ALL);
-    const selectFailedTests = () => setMode(RunMode.FAILED);
-    const selectCheckedTests = () => setMode(RunMode.CHECKED);
+    const selectFailedTests = () => !shouldDisableFailed && setMode(RunMode.FAILED);
+    const selectCheckedTests = () => !shouldDisableChecked && setMode(RunMode.CHECKED);
 
     const runAllTests = () => actions.runAllTests();
     const runFailedTests = () => actions.runFailedTests(failedTests);
@@ -53,28 +53,47 @@ const RunButton = ({actions, autoRun, isDisabled, isRunning, failedTests, checke
     }, []);
 
     useEffect(() => {
-        const pickedEmptyFailed = mode === RunMode.FAILED && !shouldShowFailed;
-        const pickedEmptyChecked = mode === RunMode.CHECKED && !shouldShowChecked;
+        if (!shouldDisableChecked) {
+            selectCheckedTests();
+        }
+    }, [shouldDisableChecked]);
+
+    useEffect(() => {
+        const pickedEmptyFailed = mode === RunMode.FAILED && shouldDisableFailed;
+        const pickedEmptyChecked = mode === RunMode.CHECKED && shouldDisableChecked;
 
         if (pickedEmptyFailed || pickedEmptyChecked) {
             setMode(RunMode.ALL);
         }
-    }, [shouldShowFailed, shouldShowChecked]);
+    }, [shouldDisableFailed, shouldDisableChecked]);
 
     return (
         <div className='run-button'>
             <button disabled={isDisabled} onClick={handleRunClick} className={btnClassName}>
                 {isRunning ? 'Running' : `Run ${mode.toLowerCase()} tests`}
             </button>
-            {shouldShowPopup && <Popup
+            {!isDisabled && <Popup
                 action='hover'
                 hideOnClick={true}
                 target={<span className='run-button__dropdown' />}
             >
                 <ul className='run-modes'>
-                    <li onClick={selectAllTests}>{RunMode.ALL}</li>
-                    {shouldShowFailed && <li onClick={selectFailedTests}>{RunMode.FAILED}</li>}
-                    {shouldShowChecked && <li onClick={selectCheckedTests}>{RunMode.CHECKED}</li>}
+                    <li
+                        className='run-mode'
+                        onClick={selectAllTests}
+                    >
+                        {RunMode.ALL}
+                    </li>
+                    <li
+                        className={classNames('run-mode', {'run-mode_disabled': shouldDisableFailed})}
+                        onClick={selectFailedTests}>{RunMode.FAILED}
+                    </li>
+                    <li
+                        className={classNames('run-mode', {'run-mode_disabled': shouldDisableChecked})}
+                        onClick={selectCheckedTests}
+                    >
+                        {RunMode.CHECKED}
+                    </li>
                 </ul>
             </Popup>}
         </div>

diff --git a/lib/static/components/controls/run-button/index.styl b/lib/static/components/controls/run-button/index.styl
@@ -9,7 +9,7 @@
     border-radius: 2px;
     background-color: #ffeba0;
 
-    button {
+    .btn {
         flex-grow: 1;
         height: 100%;
         background-color: #ffeba0;
@@ -34,10 +34,16 @@
     .run-modes {
         padding: 0;
 
-        li {
+        .run-mode {
             font-size: 13px;
             padding: 5px 10px;
             list-style: none;
+            user-select: none;
+
+            &.run-mode_disabled {
+                color: #939393;
+                cursor: auto;
+            }
         }
     }
 }
diff --git a/lib/static/components/group-tests/item.js b/lib/static/components/group-tests/item.js
@@ -3,16 +3,14 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import classNames from 'classnames';
-import {Checkbox} from 'semantic-ui-react';
 
 import * as actions from '../../modules/actions';
 import Suites from '../suites';
-import useLocalStorage from '../../hooks/useLocalStorage';
 import {INDETERMINATE} from '../../../constants/checked-statuses';
-import {isCheckboxIndeterminate, isCheckboxChecked} from '../../../common-utils';
+import {getToggledCheckboxState} from '../../../common-utils';
+import Bullet from '../bullet';
 
 const GroupTestsItem = ({group, isActive, onClick, checkStatus, actions}) => {
-    const [showCheckbox] = useLocalStorage('showCheckboxes', false);
     const {name, pattern, testCount, resultCount} = group;
 
     const body = isActive ? (
@@ -31,20 +29,14 @@ const GroupTestsItem = ({group, isActive, onClick, checkStatus, actions}) => {
 
         actions.toggleGroupCheckbox({
             browserIds: group.browserIds,
-            checkStatus: Number(!isCheckboxChecked(checkStatus))
+            checkStatus: getToggledCheckboxState(checkStatus)
         });
     };
 
     return (
         <div className={className}>
             <div className="tests-group__title" onClick={onClick} title={pattern}>
-                {showCheckbox
-                    ? <Checkbox
-                        checked={isCheckboxChecked(checkStatus)}
-                        indeterminate={isCheckboxIndeterminate(checkStatus)}
-                        onClick={onToggleCheckbox}
-                    /> : <span className="tests-group__bullet" />
-                }
+                <Bullet status={checkStatus} onClick={onToggleCheckbox} bulletClassName='tests-group__bullet'/>
                 <span className="tests-group__name">{name}</span>
                 <span className="tests-group__count">&nbsp;({`tests: ${testCount}, runs: ${resultCount}`})</span>
             </div>

diff --git a/lib/static/components/section/title/browser-skipped.js b/lib/static/components/section/title/browser-skipped.js
@@ -4,31 +4,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {Checkbox} from 'semantic-ui-react';
 import * as actions from '../../../modules/actions';
-import useLocalStorage from '../../../hooks/useLocalStorage';
-import {isCheckboxChecked} from '../../../../common-utils';
+import {getToggledCheckboxState} from '../../../../common-utils';
+import Bullet from '../../bullet';
 
 const BrowserSkippedTitle = (props) => {
-    const [showCheckbox] = useLocalStorage('showCheckboxes', false);
-
     const onToggleCheckbox = (e) => {
         e.stopPropagation();
 
         props.actions.toggleBrowserCheckbox({
             suiteBrowserId: props.browserId,
-            checkStatus: Number(!props.checkStatus)
+            checkStatus: getToggledCheckboxState(props.checkStatus)
         });
     };
 
     return (
         <div className="section__title section__title_skipped">
-            {showCheckbox
-                ? <Checkbox
-                    checked={isCheckboxChecked(props.checkStatus)}
-                    onClick={onToggleCheckbox}
-                /> : <span className="section__bullet" />
-            }
+            <Bullet status={props.checkStatus} onClick={onToggleCheckbox} />
             {props.title}
         </div>
     );

diff --git a/lib/static/components/section/title/browser.js b/lib/static/components/section/title/browser.js
@@ -4,18 +4,15 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {get} from 'lodash';
-import {Checkbox} from 'semantic-ui-react';
 import * as actions from '../../../modules/actions';
 import {appendQuery} from '../../../modules/query-params';
 import viewModes from '../../../../constants/view-modes';
 import {EXPAND_ALL} from '../../../../constants/expand-modes';
-import {isCheckboxChecked} from '../../../../common-utils';
+import {getToggledCheckboxState} from '../../../../common-utils';
 import ViewInBrowserIcon from '../../icons/view-in-browser';
-import useLocalStorage from '../../../hooks/useLocalStorage';
+import Bullet from '../../bullet';
 
 const BrowserTitle = (props) => {
-    const [showCheckbox] = useLocalStorage('showCheckboxes', false);
-
     const getTestUrl = () => {
         return appendQuery(window.location.href, {
             browser: props.browserName,
@@ -38,18 +35,13 @@ const BrowserTitle = (props) => {
 
         props.actions.toggleBrowserCheckbox({
             suiteBrowserId: props.browserId,
-            checkStatus: Number(!props.checkStatus)
+            checkStatus: getToggledCheckboxState(props.checkStatus)
         });
     };
 
     return (
         <div className="section__title section__title_type_browser" onClick={props.handler}>
-            {showCheckbox
-                ? <Checkbox
-                    checked={isCheckboxChecked(props.checkStatus)}
-                    onClick={onToggleCheckbox}
-                /> : <span className="section__bullet" />
-            }
+            <Bullet status={props.checkStatus} onClick={onToggleCheckbox} />
             {props.title}
             <ViewInBrowserIcon resultId={props.lastResultId}/>
             <ClipboardButton

diff --git a/lib/static/components/section/title/simple.js b/lib/static/components/section/title/simple.js
@@ -5,15 +5,12 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import PropTypes from 'prop-types';
 import ClipboardButton from 'react-clipboard.js';
-import {Checkbox} from 'semantic-ui-react';
 import * as actions from '../../../modules/actions';
 import {mkGetTestsBySuiteId} from '../../../modules/selectors/tree';
-import {isCheckboxChecked, isCheckboxIndeterminate} from '../../../../common-utils';
-import useLocalStorage from '../../../hooks/useLocalStorage';
+import {getToggledCheckboxState} from '../../../../common-utils';
+import Bullet from '../../bullet';
 
 const SectionTitle = ({name, suiteId, handler, gui, checkStatus, suiteTests, actions}) => {
-    const [showCheckbox] = useLocalStorage('showCheckboxes', false);
-
     const onCopySuiteName = (e) => {
         e.stopPropagation();
 
@@ -31,7 +28,7 @@ const SectionTitle = ({name, suiteId, handler, gui, checkStatus, suiteTests, act
 
         actions.toggleSuiteCheckbox({
             suiteId,
-            checkStatus: Number(!isCheckboxChecked(checkStatus))
+            checkStatus: getToggledCheckboxState(checkStatus)
         });
     };
 
@@ -54,13 +51,7 @@ const SectionTitle = ({name, suiteId, handler, gui, checkStatus, suiteTests, act
 
     return (
         <div className="section__title" onClick={handler}>
-            {showCheckbox
-                ? <Checkbox
-                    checked={isCheckboxChecked(checkStatus)}
-                    indeterminate={isCheckboxIndeterminate(checkStatus)}
-                    onClick={onToggleCheckbox}
-                /> : <span className="section__bullet" />
-            }
+            <Bullet status={checkStatus} onClick={onToggleCheckbox} />
             {name}
             {drawCopyButton()}
             {gui && drawRetryButton()}

diff --git a/lib/static/styles.css b/lib/static/styles.css
@@ -281,7 +281,7 @@ main.container {
 
 .section__title .ui.checkbox,
 .tests-group__title .ui.checkbox {
-    vertical-align: middle;
+    vertical-align: bottom;
     margin-right: 5px;
 
     width: 18px;
@@ -290,9 +290,19 @@ main.container {
 
 .section__title .ui.checkbox label:before,
 .tests-group__title .ui.checkbox label:before {
+    width: 14px;
+    height: 14px;
     border-width: 1.5px;
 }
 
+.section__title .ui.checkbox label:after,
+.tests-group__title .ui.checkbox label:after {
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+    line-height: 14px;
+}
+
 .section__body .section__title {
     font-size: 15px;
     line-height: 20px;