fix linting issues

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -7,7 +7,7 @@ import {
 } from '@patternfly/react-core';
 
 class AnsibleSelect extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props);
     this.onSelectChange = this.onSelectChange.bind(this);
   }
@@ -16,34 +16,39 @@ class AnsibleSelect extends React.Component {
     count: 1,
   }
 
-  static getDerivedStateFromProps(nexProps, _) {
+  static getDerivedStateFromProps (nexProps) {
     if (nexProps.data) {
       return {
         count: nexProps.data.length,
-      }
+      };
     }
     return null;
   }
-  onSelectChange(val, _) {
-    this.props.selectChange(val);
+
+  onSelectChange (val) {
+    const { selectChange } = this.props;
+    selectChange(val);
   }
 
-  render() {
+  render () {
     const { count } = this.state;
+    const { labelName, selected, data } = this.props;
+    let elem;
     if (count > 1) {
-      return (
-        <FormGroup label={this.props.labelName} fieldId="ansible-select">
-          <Select value={this.props.selected} onChange={this.onSelectChange} aria-label="Select Input">
-            {this.props.data.map((datum, index) => (
-              <SelectOption isDisabled={datum.disabled} key={index} value={datum} label={datum} />
+      elem = (
+        <FormGroup label={labelName} fieldId="ansible-select">
+          <Select value={selected} onChange={this.onSelectChange} aria-label="Select Input">
+            {data.map((datum) => (
+              <SelectOption isDisabled={datum.disabled} key={datum} value={datum} label={datum} />
             ))}
           </Select>
         </FormGroup>
-      )
-    }
-    else {
-      return null;
+      );
+    } else {
+      elem = null;
     }
+
+    return elem;
   }
 }
 

src/components/DataListToolbar/DataListToolbar.jsx

@@ -53,10 +53,6 @@ class DataListToolbar extends React.Component {
     this.onSort = this.onSort.bind(this);
   }
 
-  handleSearchInputChange (searchValue) {
-    this.setState({ searchValue });
-  }
-
   onSortDropdownToggle (isSortDropdownOpen) {
     this.setState({ isSortDropdownOpen });
   }
@@ -97,6 +93,10 @@ class DataListToolbar extends React.Component {
     onSort(sortedColumnKey, newSortOrder);
   }
 
+  handleSearchInputChange (searchValue) {
+    this.setState({ searchValue });
+  }
+
   render () {
     const { up } = DropdownPosition;
     const {
@@ -223,7 +223,7 @@ class DataListToolbar extends React.Component {
                         variant="plain"
                         aria-label={i18n._(t`Sort`)}
                       >
-                        <SortIcon/>
+                        <SortIcon />
                       </Button>
                     </ToolbarItem>
                   </ToolbarGroup>

src/components/ListItem/CheckboxListItem.jsx

@@ -11,24 +11,24 @@ export default ({
   isSelected,
   onSelect,
 }) => (
-    <li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
-      <div className="pf-c-data-list__check">
-        <I18n>
-          {({ i18n }) => (
-            <Checkbox
-              checked={isSelected}
-              onChange={onSelect}
-              aria-label={i18n._(t`selected ${itemId}`)}
-              id={`selectd-${itemId}`}
-              value={itemId}
-            />
-          )}
-        </I18n>
-      </div>
-      <div className="pf-c-data-list__cell">
-        <label htmlFor={`selectd-${itemId}`} className="check-action-item">
-          <b>{name}</b>
-        </label>
-      </div>
-    </li>
-  );
+  <li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
+    <div className="pf-c-data-list__check">
+      <I18n>
+        {({ i18n }) => (
+          <Checkbox
+            checked={isSelected}
+            onChange={onSelect}
+            aria-label={i18n._(t`selected ${itemId}`)}
+            id={`selectd-${itemId}`}
+            value={itemId}
+          />
+        )}
+      </I18n>
+    </div>
+    <div className="pf-c-data-list__cell">
+      <label htmlFor={`selectd-${itemId}`} className="check-action-item">
+        <b>{name}</b>
+      </label>
+    </div>
+  </li>
+);

src/components/Lookup/Lookup.jsx

@@ -9,14 +9,14 @@ import {
   ToolbarGroup,
 } from '@patternfly/react-core';
 
-import CheckboxListItem from '../ListItem'
+import CheckboxListItem from '../ListItem';
 
 class Lookup extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props);
     this.state = {
       isModalOpen: false,
-    }
+    };
     this.handleModalToggle = this.handleModalToggle.bind(this);
     this.onLookup = this.onLookup.bind(this);
     this.onChecked = this.onChecked.bind(this);
@@ -24,46 +24,54 @@ class Lookup extends React.Component {
     this.onRemove = this.onRemove.bind(this);
   }
 
-  handleModalToggle() {
-    this.setState((prevState, _) => ({
-      isModalOpen: !prevState.isModalOpen,
-    }));
-  };
-
-  onLookup() {
+  onLookup () {
     this.handleModalToggle();
   }
 
-  onChecked(_, evt) {
-    this.props.lookupChange(evt.target.value);
-  };
-
-  onRemove(evt) {
-    this.props.lookupChange(evt.target.id);
-  }
-  wrapTags(tags) {
-    return tags.filter(tag => tag.isChecked).map((tag, index) => {
-      return (
-        <span className="awx-c-tag--pill" key={index}>{tag.name}<span className="awx-c-icon--remove" id={tag.id} onClick={this.onRemove}>x</span></span>
-      )
-    })
+  onChecked (_, evt) {
+    const { lookupChange } = this.props;
+    lookupChange(evt.target.value);
   }
 
-  render() {
+  onRemove (evt) {
+    const { lookupChange } = this.props;
+    lookupChange(evt.target.id);
+  }
+
+  handleModalToggle () {
+    this.setState((prevState) => ({
+      isModalOpen: !prevState.isModalOpen,
+    }));
+  }
+
+  wrapTags (tags) {
+    return tags.filter(tag => tag.isChecked).map((tag) => (
+      <span className="awx-c-tag--pill" key={tag.id}>
+        {tag.name}
+        <Button className="awx-c-icon--remove" id={tag.id} onClick={this.onRemove}>
+          x
+        </Button>
+      </span>
+    ));
+  }
+
+  render () {
     const { isModalOpen } = this.state;
-    const { data } = this.props;
+    const { data, lookupHeader } = this.props;
     return (
       <div className="pf-c-input-group awx-lookup">
-        <span className="pf-c-input-group__text" aria-label="search" id="search" onClick={this.onLookup}><SearchIcon /></span>
-        <div className="pf-c-form-control">{this.wrapTags(this.props.data)}</div>
+        <Button className="pf-c-input-group__text" aria-label="search" id="search" onClick={this.onLookup}>
+          <SearchIcon />
+        </Button>
+        <div className="pf-c-form-control">{this.wrapTags(data)}</div>
         <Modal
           className="awx-c-modal"
-          title={`Select ${this.props.lookupHeader}`}
+          title={`Select ${lookupHeader}`}
           isOpen={isModalOpen}
           onClose={this.handleModalToggle}
         >
           <ul className="pf-c-data-list awx-c-list">
-            {data.map(i =>
+            {data.map(i => (
               <CheckboxListItem
                 key={i.id}
                 itemId={i.id}
@@ -71,12 +79,12 @@ class Lookup extends React.Component {
                 isSelected={i.isChecked}
                 onSelect={this.onChecked}
               />
-            )}
+            ))}
           </ul>
           <ActionGroup className="at-align-right">
             <Toolbar>
               <ToolbarGroup>
-                <Button className="at-C-SubmitButton" variant="primary" onClick={this.handleModalToggle} >Select</Button>
+                <Button className="at-C-SubmitButton" variant="primary" onClick={this.handleModalToggle}>Select</Button>
               </ToolbarGroup>
               <ToolbarGroup>
                 <Button className="at-C-CancelButton" variant="secondary" onClick={this.handleModalToggle}>Cancel</Button>
@@ -85,7 +93,7 @@ class Lookup extends React.Component {
           </ActionGroup>
         </Modal>
       </div>
-    )
+    );
   }
 }
 export default Lookup;

src/components/Pagination/Pagination.jsx

@@ -49,6 +49,7 @@ class Pagination extends Component {
 
     event.preventDefault();
 
+    // eslint-disable-next-line no-bitwise
     const isPositiveInteger = value >>> 0 === parseFloat(value) && parseInt(value, 10) > 0;
     const isValid = isPositiveInteger && parseInt(value, 10) <= pageCount;
 
@@ -73,7 +74,7 @@ class Pagination extends Component {
   }
 
   onNext () {
-    const { onSetPage, page, pageCount, page_size } = this.props;
+    const { onSetPage, page, page_size } = this.props;
     const nextPage = page + 1;
 
     onSetPage(nextPage, page_size);
@@ -82,7 +83,7 @@ class Pagination extends Component {
   onLast () {
     const { onSetPage, pageCount, page_size } = this.props;
 
-    onSetPage(pageCount, page_size)
+    onSetPage(pageCount, page_size);
   }
 
   onTogglePageSize (isOpen) {
@@ -160,7 +161,7 @@ class Pagination extends Component {
               <LevelItem>
                 <Split gutter="md" className="pf-u-display-flex pf-u-align-items-center">
                   <SplitItem>
-                    <Trans>{itemMin} - {itemMax} of {count}</Trans>
+                    <Trans>{`${itemMin} - ${itemMax} of ${count}`}</Trans>
                   </SplitItem>
                   <SplitItem>
                     <div className="pf-c-input-group">
@@ -187,7 +188,8 @@ class Pagination extends Component {
                   <SplitItem isMain>
                     <form onSubmit={this.onSubmit}>
                       <Trans>
-                        Page <TextInput
+                        {'Page '}
+                        <TextInput
                           isDisabled={pageCount === 1}
                           aria-label={i18n._(t`Page Number`)}
                           style={{
@@ -201,7 +203,9 @@ class Pagination extends Component {
                           value={value}
                           type="text"
                           onChange={this.onPageChange}
-                        /> of {pageCount}
+                        />
+                        {' of '}
+                        {pageCount}
                       </Trans>
                     </form>
                   </SplitItem>

src/components/Tabs/Tab.jsx

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 
 import './tabs.scss';
 
-
 const Tab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
   const tabClasses = () => {
     let classes = 'pf-c-tabs__item';
@@ -28,13 +27,14 @@ const Tab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
   return (
     <li className={tabClasses()}>
       <Link
-        className={'pf-c-tabs__button'}
+        className="pf-c-tabs__button"
         to={{ pathname: `${match.url}`, search: tabParams(), state: { breadcrumb } }}
-        replace={tab === currentTab}>
+        replace={tab === currentTab}
+      >
         {children}
       </Link>
     </li>
-  )
-}
+  );
+};
 
 export default Tab;

src/components/Tabs/Tabs.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import './tabs.scss';
 
-
 const Tabs = ({ children, labelText }) => (
   <div className="pf-c-tabs" aria-label={labelText}>
     <ul className="pf-c-tabs__list">