feat(ui): fix eslint warnings (#1254)

Co-authored-by: Ludovic DEHON <[email protected]>

client/.prettierignore

@@ -0,0 +1,2 @@
+build
+node_modules

client/package.json

@@ -12,7 +12,7 @@
     "ace-builds": "^1.4.8",
     "axios": "^0.21.1",
     "axios-progress-bar": "^1.2.0",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.6.1",
     "convert-units": "^2.3.4",
     "css-loader": "^3.4.1",
     "font-awesome": "^4.7.0",
@@ -35,11 +35,11 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "set INLINE_RUNTIME_CHUNK=false&& CI=false DISABLE_ESLINT_PLUGIN=true react-scripts build",
+    "build": "set INLINE_RUNTIME_CHUNK=false&& react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint src",
-    "lint:fix": "eslint --fix ."
+    "lint:fix": "eslint --fix src/**/*.js{,x}"
   },
   "eslintConfig": {
     "extends": "react-app"

client/src/components/Base/Base.jsx

@@ -1,10 +1,12 @@
 import './Base.scss';
-import React, { Component } from 'react';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import Sidebar from '../../containers/SideBar';
 import constants from '../../utils/constants';
 import Loading from '../../containers/Loading';
 import { Helmet } from 'react-helmet';
+
 class Base extends Component {
   state = {
     clusterId: '',
@@ -88,4 +90,12 @@ class Base extends Component {
   }
 }
 
+Base.propTypes = {
+  history: PropTypes.object,
+  match: PropTypes.object,
+  location: PropTypes.object,
+  clusters: PropTypes.array,
+  children: PropTypes.any,
+}
+
 export default withRouter(Base);

client/src/components/DatePicker/DatePicker.jsx

@@ -1,14 +1,10 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import DateTimePicker from 'react-datepicker';
 import moment from 'moment';
 import { formatDateTime } from '../../utils/converters';
 
-class DatePicker extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func
-  };
+class DatePicker extends Component {
 
   state = {
     value: '',
@@ -95,4 +91,13 @@ class DatePicker extends React.Component {
   };
 }
 
+DatePicker.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  showDateTimeInput: PropTypes.bool,
+  showTimeInput: PropTypes.bool,
+  showTimeSelect: PropTypes.bool,
+  onClear: PropTypes.func,
+};
+
 export default DatePicker;

client/src/components/Form/Form.jsx

@@ -87,7 +87,6 @@ class Form extends Root {
     label,
     placeholder,
     type = 'text',
-    onChange = this.handleChange,
     noStyle,
     wrapperClass,
     inputClass,
@@ -114,7 +113,7 @@ class Form extends Root {
 
   renderJSONInput = (name, label, onChange, textMode, options, rest) => {
     const { formData, errors } = this.state;
-    const inputMode = textMode ? "text" : (formData.schemaType === "PROTOBUF" ? "protobuf"  : "json")
+    const inputMode = textMode ? 'text' : formData.schemaType === 'PROTOBUF' ? 'protobuf' : 'json';
     return (
       <div className="form-group row">
         {label !== '' ? (
@@ -126,7 +125,7 @@ class Form extends Root {
         )}
         <div className="col-sm-10" style={{ height: '100%' }}>
           <AceEditor
-            mode={ inputMode }
+            mode={inputMode}
             id={name}
             theme="merbivore_soft"
             value={formData[name]}
@@ -242,21 +241,20 @@ class Form extends Root {
     );
   };
 
-  renderCheckbox = (name, label, isChecked, onChange, isDefaultChecked, rest) => {
+  renderCheckbox = (name, isChecked, onChange, isDefaultChecked, rest) => {
     return (
-        <input
+      <input
         type="checkbox"
         name={name}
         id={name}
-        class="form-input-check"
+        className="form-input-check"
         checked={isChecked}
         onChange={onChange}
-        defaultChecked={ isDefaultChecked ? isDefaultChecked : false}
+        defaultChecked={isDefaultChecked ? isDefaultChecked : false}
         {...rest}
-        />
+      />
     );
   };
 }
 
 export default Form;
-

client/src/components/Form/Input/Input.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const Input = props => {
   const { name, label, placeholder, error, noStyle, wrapperClass, inputClass, ...rest } = props;
@@ -16,7 +17,7 @@ const Input = props => {
   }
 
   return (
-    <div className={`${wrapperClassRender} row`}>
+    <div className={`${wrapperClassRender}`}>
       {label !== '' ? (
         <label htmlFor={name} className="col-sm-2 col-form-label">
           {label}
@@ -44,4 +45,14 @@ const Input = props => {
   );
 };
 
+Input.propTypes = {
+  name: PropTypes.string,
+  label:PropTypes.string,
+  placeholder: PropTypes.string,
+  error: PropTypes.string,
+  noStyle: PropTypes.bool,
+  wrapperClass: PropTypes.string,
+  inputClass: PropTypes.string
+};
+
 export default Input;

client/src/components/Form/RadioGroup/RadioGroup.jsx

@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 class RadioGroup extends Component {
   renderOptions = (name, items, handleChange) => {
-    let renderedItems = [];
-    for (let item of items) {
-      renderedItems.push(
+    return items.map( item =>
         <div id={`radio-option-${name}`} key={item.value} className="form-check">
           <input
             className="form-check-input"
@@ -20,9 +19,6 @@ class RadioGroup extends Component {
           </label>
         </div>
       );
-    }
-
-    return renderedItems;
   };
 
   render() {
@@ -41,4 +37,11 @@ class RadioGroup extends Component {
   }
 }
 
+RadioGroup.propTypes = {
+  name: PropTypes.string,
+  label: PropTypes.string,
+  items: PropTypes.array,
+  handleChange: PropTypes.func,
+}
+
 export default RadioGroup;

client/src/components/Form/Select/Select.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const Select = ({ name, label, items, error, wrapperClass, selectClass, blankItem, ...rest }) => {
     let wrapperClassRender = 'form-group';
@@ -11,7 +12,7 @@ const Select = ({ name, label, items, error, wrapperClass, selectClass, blankIte
     }
 
     return (
-    <div className={`${wrapperClassRender} row`}>
+    <div className={`${wrapperClassRender}`}>
       {label !== '' ? (
         <label htmlFor={name} className="col-sm-2 col-form-label">
           {label}
@@ -38,4 +39,14 @@ const Select = ({ name, label, items, error, wrapperClass, selectClass, blankIte
   );
 };
 
+Select.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    items: PropTypes.array,
+    error: PropTypes.string,
+    blankItem: PropTypes.bool,
+    wrapperClass: PropTypes.string,
+    selectClass: PropTypes.string,
+}
+
 export default Select;

client/src/components/Modal/ConfirmModal/ConfirmModal.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import '../styles.scss';
 
 function ConfirmModal({handleConfirm, handleCancel, show, message, confirmLabel, cancelLabel}) {
-    const showHideClassname = show ? 'modal display-block' : 'modal display-none';
-
     return (
-        <div className={showHideClassname}>
+        <div className={show ? 'modal display-block' : 'modal display-none'}>
             <div className="swal2-container swal2-center swal2-fade swal2-shown" style={{overflowY: 'auto'}}>
                 <div aria-labelledby="swal2-title" aria-describedby="swal2-content"
                      className="swal2-popup swal2-modal swal2-show" tabIndex="-1" role="dialog"
@@ -81,4 +80,13 @@ function ConfirmModal({handleConfirm, handleCancel, show, message, confirmLabel,
     );
 }
 
+ConfirmModal.propTypes = {
+    handleConfirm: PropTypes.func,
+    handleCancel: PropTypes.func,
+    show: PropTypes.bool,
+    message: PropTypes.string,
+    confirmLabel: PropTypes.string,
+    cancelLabel: PropTypes.string,
+}
+
 export default ConfirmModal;

client/src/components/Modal/Modal.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import './styles.scss';
 
 function Modal({ show, children }) {
-    const showHideClassname = show ? 'modal display-block' : 'modal display-none';
-
-    return (
-        <div className={showHideClassname}>
-                {children}
-        </div>
-    );
+  return <div className={show ? 'modal display-block' : 'modal display-none'}>{children}</div>;
 }
 
+Modal.propTypes = {
+  children: PropTypes.any,
+  show: PropTypes.bool
+};
+
 export default Modal;

client/src/components/PageSize/PageSize.jsx

@@ -1,18 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './styles.scss';
 
 const PageSize = ({
-  pageNumber,
-  totalPageNumber,
   currentPageSize,
-  totalRecords,
   ranges = [10, 25, 50, 100, 150, 200],
   onChange,
-  editPageNumber,
-  showTotalPageNumber = true
 }) => {
-    var pageSizeOptions = [];
-    var pageSizeOptionsList = [];
+    let pageSizeOptions = [];
+    let pageSizeOptionsList = [];
     ranges.forEach(element => pageSizeOptions[element] = element );
     //if server's pageSize does not belong to ranges, it should be added - when the page is loaded for the first
     if(!ranges.includes(currentPageSize)){
@@ -24,11 +20,19 @@ const PageSize = ({
   return (
     <div id="result-per-page">
         <span>Results</span>
-        <select className="pagination mb-0" id="currentPageSize" name="currentPageSize" value={currentPageSize} onChange={(e) => {e.preventDefault(); onChange(pageSizeOptions[e.target.value])}}>
+        <select className="pagination mb-0" id="currentPageSize" name="currentPageSize"
+                value={currentPageSize}
+                onChange={(e) => {e.preventDefault(); onChange(pageSizeOptions[e.target.value])}}>
           {pageSizeOptionsList}
         </select>
       </div>
   );
 };
 
+PageSize.propTypes = {
+  ranges: PropTypes.array,
+  currentPageSize: PropTypes.number,
+  onChange: PropTypes.func,
+}
+
 export default PageSize;