chore: add linter & fix errors (#578)

Author: Kabir-Ivan

lib/static/components/bottom-progress-bar/index.jsx

@@ -2,6 +2,7 @@
 
 import {extend, isNumber} from 'lodash';
 import React from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
 import {getVisibleRootSuiteIds} from '../../modules/selectors/tree';
@@ -34,6 +35,11 @@ const BottomProgressBar = (props) => {
     );
 };
 
+BottomProgressBar.propTypes = {
+    progressBar: PropTypes.object.isRequired,
+    visibleRootSuiteIds: PropTypes.arrayOf(PropTypes.number)
+};
+
 export default connect(
     (state) => ({
         progressBar: state.progressBar,

lib/static/components/bullet.jsx

@@ -31,7 +31,8 @@ const Bullet = ({status, onClick, className}) => {
 Bullet.propTypes = {
     status: PropTypes.oneOf([CHECKED, UNCHECKED, INDETERMINATE]),
     onClick: PropTypes.func,
-    bulletClassName: PropTypes.string
+    bulletClassName: PropTypes.string,
+    className: PropTypes.string
 };
 
 export default Bullet;

lib/static/components/controls/accept-opened-button.jsx

@@ -11,7 +11,9 @@ class AcceptOpenedButton extends Component {
         isSuiteContol: PropTypes.bool,
         // from store
         processing: PropTypes.bool.isRequired,
-        acceptableOpenedImageIds: PropTypes.arrayOf(PropTypes.string).isRequired
+        acceptableOpenedImageIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+        isStaticImageAccepterEnabled: PropTypes.bool,
+        actions: PropTypes.object.isRequired
     };
 
     _acceptOpened = () => {
@@ -39,7 +41,7 @@ export default connect(
         return {
             processing: state.processing,
             acceptableOpenedImageIds: getAcceptableOpenedImageIds(state),
-            isStaticImageAccepterEnabled: state.staticImageAccepter.enabled,
+            isStaticImageAccepterEnabled: state.staticImageAccepter.enabled
         };
     },
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})

lib/static/components/controls/browser-list/index.jsx

@@ -1,52 +1,47 @@
 'use strict';
 
-import React, {useState, useMemo, useEffect, useCallback} from 'react';
-import {flatten, isEmpty, get, chain, compact} from 'lodash';
+import React, {useState, useMemo, useEffect} from 'react';
+import {compact} from 'lodash';
 import PropTypes from 'prop-types';
-import CheckboxTree from 'react-checkbox-tree';
 
 import {mkBrowserIcon, buildComplexId} from './utils';
-import Popup from '../../popup';
-import ArrayContainer from '../../../containers/array';
 
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 import './index.styl';
-import { Button, Select, useSelectOptions } from '@gravity-ui/uikit';
+import {Button, Select, useSelectOptions} from '@gravity-ui/uikit';
 
 const BrowserList = ({available, onChange, selected: selectedProp}) => {
     const getOptions = () => {
         const groups = {};
-        const DEFAULT_GROUP = "other";
+        const DEFAULT_GROUP = 'other';
         let hasNestedOptions = false;
         available.forEach(({id: browserId, versions}) => {
             if (!versions || versions.length < 2) {
                 groups[DEFAULT_GROUP] = groups[DEFAULT_GROUP] || [];
-                groups[DEFAULT_GROUP].push({value: buildComplexId(browserId), 
+                groups[DEFAULT_GROUP].push({value: buildComplexId(browserId),
                     content: <div className='browser-name'>{mkBrowserIcon(browserId)}{buildComplexId(browserId)}</div>});
                 return;
             }
             hasNestedOptions = true;
             versions.forEach((version) => {
                 groups[browserId] = groups[browserId] || [];
-                groups[browserId].push({value: buildComplexId(browserId, version), 
+                groups[browserId].push({value: buildComplexId(browserId, version),
                     content: <div className='browser-name'>{mkBrowserIcon(browserId)}{buildComplexId(browserId, version)}</div>});
-            })
+            });
         });
         if (!hasNestedOptions) {
             return groups[DEFAULT_GROUP];
-        }
-        else {
+        } else {
             const optionsList = [];
             Object.keys(groups).forEach((name) => {
                 optionsList.push({
                     label: name,
                     options: groups[name]
-                })
-            })
+                });
+            });
             return optionsList;
         }
-
-    }
+    };
     const getMapping = () => {
         const mapping = {};
         available.forEach(({id: browserId, versions}) => {
@@ -60,10 +55,10 @@ const BrowserList = ({available, onChange, selected: selectedProp}) => {
             }
             versions.forEach((version) => {
                 mapping[buildComplexId(browserId, version)] = {id: browserId, version};
-            })
+            });
         });
         return mapping;
-    }
+    };
     const getSelected = () => {
         const selectedOptions = [];
         if (!selectedProp || !selectedProp.length) {
@@ -76,23 +71,22 @@ const BrowserList = ({available, onChange, selected: selectedProp}) => {
             }
             versions.forEach((version) => {
                 selectedOptions.push(buildComplexId(browserId, version));
-            })
+            });
         });
         return selectedOptions;
-    }
+    };
     const rawOptions = useMemo(getOptions, [available]);
     const getOptionsFrom = (optionsData) => {
         const allOptionsList = [];
         optionsData.forEach((option) => {
             if (option.label) {
                 getOptionsFrom(option.options).forEach((o) => allOptionsList.push(o));
-            }
-            else {
+            } else {
                 allOptionsList.push(option.value);
             }
-        })
+        });
         return allOptionsList;
-    }
+    };
     const allOptions = useMemo(() => getOptionsFrom(rawOptions), [rawOptions]);
     const options = useSelectOptions({
         options: rawOptions
@@ -102,52 +96,53 @@ const BrowserList = ({available, onChange, selected: selectedProp}) => {
 
     const selectAll = () => {
         setSelected(allOptions);
-    }
+    };
 
     const formatSelectedData = () => {
-        const selectedData = {}
+        const selectedData = {};
         selected.forEach((option) => {
-            if (!mapping[option] || !mapping[option].id) return;
+            if (!mapping[option] || !mapping[option].id) {
+                return;
+            }
             const {id: browserId, version} = mapping[option];
             selectedData[browserId] = selectedData[browserId] || [];
             selectedData[browserId].push(version);
-        })
-        return Object.entries(selectedData).map(([id, versions]) => ({id, versions: compact(versions)}))
-    }
+        });
+        return Object.entries(selectedData).map(([id, versions]) => ({id, versions: compact(versions)}));
+    };
 
     const renderFilter = () => {
-        const allSelected = selected.length == options.length;
         return (
             <div className='browserlist__filter'>
-            <Button onClick={selectAll} width='max'>
+                <Button onClick={selectAll} width='max'>
                 Select All
-            </Button>
+                </Button>
             </div>
-        )
-    }
+        );
+    };
 
     const renderOption = (option) => {
-        const isTheOnlySelected = selected.includes(option.value) && selected.length == 1;
+        const isTheOnlySelected = selected.includes(option.value) && selected.length === 1;
         const selectOnly = (e) => {
             e.preventDefault();
             e.stopPropagation();
             setSelected([option.value]);
-        }
+        };
         const selectExcept = (e) => {
             e.preventDefault();
             e.stopPropagation();
-            setSelected(allOptions.filter(o => o != option.value));
-        }
+            setSelected(allOptions.filter(o => o !== option.value));
+        };
         return (
-        <div className='browserlist__row'>
-            <div className='browserlist__row_content'>
-            {option.content}
+            <div className='browserlist__row'>
+                <div className='browserlist__row_content'>
+                    {option.content}
+                </div>
+                <Button size='s' onClick={isTheOnlySelected ? selectExcept : selectOnly} className='action-button'>{isTheOnlySelected ? 'Except' : 'Only'}</Button>
             </div>
-            <Button size='s' onClick={isTheOnlySelected ? selectExcept : selectOnly} className='action-button'>{isTheOnlySelected ? 'Except' : 'Only'}</Button>
-        </div>
-        )
-    }
-    
+        );
+    };
+
     useEffect(() => {
         onChange && onChange(formatSelectedData(selected));
     }, [selected]);
@@ -166,8 +161,8 @@ const BrowserList = ({available, onChange, selected: selectedProp}) => {
             popupClassName='browserlist__popup'
             className='browserlist'
         />
-    )
-}
+    );
+};
 
 BrowserList.propTypes = {
     available: PropTypes.arrayOf(PropTypes.shape({

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

@@ -1,9 +1,9 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
-import {capitalize, pull} from 'lodash';
+import {capitalize} from 'lodash';
 import * as actions from '../../modules/actions';
-import ControlButton from './control-button';
 import ControlSelect from './selects/control';
 import GroupTestsSelect from './selects/group-tests';
 import BaseHostInput from './base-host-input';
@@ -12,20 +12,30 @@ import ReportInfo from './report-info';
 import {ViewMode} from '../../../constants/view-modes';
 import {DiffModes} from '../../../constants/diff-modes';
 import {EXPAND_ALL, COLLAPSE_ALL, EXPAND_ERRORS, EXPAND_RETRIES} from '../../../constants/expand-modes';
-import { RadioButton, Select } from '@gravity-ui/uikit';
 
 class ControlButtons extends Component {
+    static propTypes = {
+        view: PropTypes.shape({
+            expand: PropTypes.string.isRequired,
+            viewMode: PropTypes.string.isRequired,
+            diffMode: PropTypes.string.isRequired,
+            changeViewMode: PropTypes.func.isRequired
+        }),
+        isStatisImageAccepterEnabled: PropTypes.bool,
+        actions: PropTypes.object.isRequired
+    };
+
     _onUpdateExpand = (value) => {
         const {actions} = this.props;
         const actionsDict = {
             [EXPAND_ALL]: actions.expandAll,
             [COLLAPSE_ALL]: actions.collapseAll,
             [EXPAND_ERRORS]: actions.expandErrors,
             [EXPAND_RETRIES]: actions.expandRetries
-        }
+        };
         actionsDict[value].call();
-    }
-    
+    };
+
     _getShowTestsOptions() {
         const viewModes = Object.values(ViewMode).map(value => ({value, content: capitalize(value)}));
 
@@ -46,17 +56,17 @@ class ControlButtons extends Component {
                     handler={actions.changeViewMode}
                     options = {this._getShowTestsOptions()}
                 />
-                <ControlSelect 
+                <ControlSelect
                     size='m'
                     label="Expand"
                     value={view.expand}
-                    handler={this._onUpdateExpand} 
+                    handler={this._onUpdateExpand}
                     qa='expand-dropdown'
                     options={[
-                        {value: EXPAND_ALL, content: "All"},
-                        {value: COLLAPSE_ALL, content: "None"},
-                        {value: EXPAND_ERRORS, content: "Errors"},
-                        {value: EXPAND_RETRIES, content: "Retries"}
+                        {value: EXPAND_ALL, content: 'All'},
+                        {value: COLLAPSE_ALL, content: 'None'},
+                        {value: EXPAND_ERRORS, content: 'Errors'},
+                        {value: EXPAND_RETRIES, content: 'Retries'}
                     ]}
                     extendClassNames='expand-dropdown'
                     extendPopupClassNames='expand-popup'

lib/static/components/controls/common-filters.jsx

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import * as actions from '../../modules/actions';
@@ -10,11 +11,12 @@ import ShowCheckboxesInput from './show-checkboxes-input';
 import BrowserList from './browser-list';
 import ControlButton from './control-button';
 import AcceptOpenedButton from './accept-opened-button';
+import {staticImageAccepterPropType} from '../../modules/static-image-accepter';
 
 const CommonFilters = (props) => {
     const onCommitChanges = () => {
         props.actions.staticAccepterOpenConfirm();
-    }
+    };
 
     const renderStaticImageAccepterControls = () => {
         const {staticImageAccepter} = props;
@@ -34,8 +36,8 @@ const CommonFilters = (props) => {
                     handler={onCommitChanges}
                 />
             </div>
-        )
-    }
+        );
+    };
 
     return (
         <div className="control-container control-filters">
@@ -50,14 +52,28 @@ const CommonFilters = (props) => {
             {renderStaticImageAccepterControls()}
         </div>
     );
-}
+};
+
+CommonFilters.propTypes = {
+    gui: PropTypes.bool.isRequired,
+    browsers: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string,
+        versions: PropTypes.arrayOf(PropTypes.string)
+    })).isRequired,
+    filteredBrowsers: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string,
+        versions: PropTypes.arrayOf(PropTypes.string)
+    })),
+    staticImageAccepter: staticImageAccepterPropType,
+    actions: PropTypes.object.isRequired
+};
 
 export default connect(
     ({view, browsers, gui, staticImageAccepter}) => ({
         filteredBrowsers: view.filteredBrowsers,
         browsers,
         gui,
-        staticImageAccepter,
+        staticImageAccepter
     }),
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(CommonFilters);