fix linting issues

src/App.jsx

@@ -35,28 +35,17 @@ class App extends Component {
     this.onAboutModalClose = this.onAboutModalClose.bind(this);
     this.onAboutModalOpen = this.onAboutModalOpen.bind(this);
     this.onNavToggle = this.onNavToggle.bind(this);
-  };
+  }
 
   componentDidMount () {
     this.fetchConfig();
   }
 
-  async fetchConfig () {
-    const { api } = this.props;
-
-    try {
-      const { data: { ansible_version, custom_virtualenvs, version } } = await api.getConfig();
-      this.setState({ ansible_version, custom_virtualenvs, version });
-    } catch (err) {
-      this.setState({ ansible_version: null, custom_virtualenvs: null, version: null });
-    }
-  }
-
   async onLogout () {
     const { api } = this.props;
 
     await api.logout();
-    window.location.replace('/#/login')
+    window.location.replace('/#/login');
   }
 
   onAboutModalOpen () {
@@ -71,6 +60,17 @@ class App extends Component {
     this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
   }
 
+  async fetchConfig () {
+    const { api } = this.props;
+
+    try {
+      const { data: { ansible_version, custom_virtualenvs, version } } = await api.getConfig();
+      this.setState({ ansible_version, custom_virtualenvs, version });
+    } catch (err) {
+      this.setState({ ansible_version: null, custom_virtualenvs: null, version: null });
+    }
+  }
+
   render () {
     const {
       ansible_version,
@@ -100,17 +100,17 @@ class App extends Component {
             <PageHeader
               showNavToggle
               onNavToggle={this.onNavToggle}
-              logo={<TowerLogo linkTo="/"/>}
-              toolbar={
+              logo={<TowerLogo linkTo="/" />}
+              toolbar={(
                 <PageHeaderToolbar
                   isAboutDisabled={!version}
                   onAboutClick={this.onAboutModalOpen}
                   onLogoutClick={this.onLogout}
                 />
-              }
+              )}
             />
           )}
-          sidebar={
+          sidebar={(
             <PageSidebar
               isNavOpen={isNavOpen}
               nav={(
@@ -128,7 +128,7 @@ class App extends Component {
                 </Nav>
               )}
             />
-          }
+          )}
         >
           <ConfigContext.Provider value={config}>
             {render && render({ routeGroups })}

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">

src/context.jsx

@@ -1,3 +1,4 @@
-import React from "react";
+import React from 'react';
 
+// eslint-disable-next-line import/prefer-default-export
 export const ConfigContext = React.createContext({});

src/index.jsx

@@ -65,7 +65,7 @@ export function getLanguage (nav) {
   const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
 
   return languageWithoutRegionCode;
-};
+}
 
 //
 //  Function Main
@@ -269,7 +269,7 @@ export async function main (render, api) {
                                   />
                                 )}
                               />
-                          ))
+                            ))
                         )}
                       />
                     )}
@@ -280,7 +280,8 @@ export async function main (render, api) {
           )}
         </I18n>
       </I18nProvider>
-    </HashRouter>, el);
-};
+    </HashRouter>, el
+  );
+}
 
 main(ReactDOM.render, new APIClient(http));

src/pages/Organizations/components/OrganizationBreadcrumb.jsx

@@ -70,7 +70,6 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
         </Fragment>
       );
     } else {
-
       breadcrumb = (
         <Fragment>
           {generateCrumb(true)}

src/pages/Organizations/screens/Organization/OrganizationEdit.jsx

@@ -8,18 +8,15 @@ import {
   Link
 } from 'react-router-dom';
 
-const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => {
-
-  return (
-    <Card className="at-c-orgPane">
-      <CardBody>
-        <Trans>edit view   </Trans>
-        <Link to={{ pathname: `/organizations/${match.params.id}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-          <Trans>save/cancel and go back to view</Trans>
-        </Link>
-      </CardBody>
-    </Card>
-  );
-};
+const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => (
+  <Card className="at-c-orgPane">
+    <CardBody>
+      <Trans>edit view   </Trans>
+      <Link to={{ pathname: `/organizations/${match.params.id}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+        <Trans>save/cancel and go back to view</Trans>
+      </Link>
+    </CardBody>
+  </Card>
+);
 
 export default OrganizationEdit;

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -20,10 +20,20 @@ import {
 
 import { ConfigContext } from '../../../context';
 import Lookup from '../../../components/Lookup';
-import AnsibleSelect from '../../../components/AnsibleSelect'
+import AnsibleSelect from '../../../components/AnsibleSelect';
+
 const { light } = PageSectionVariants;
 class OrganizationAdd extends React.Component {
-  constructor(props) {
+  static format (data) {
+    const results = data.results.map((result) => ({
+      id: result.id,
+      name: result.name,
+      isChecked: false
+    }));
+    return results;
+  }
+
+  constructor (props) {
     super(props);
 
     this.handleChange = this.handleChange.bind(this);
@@ -45,87 +55,80 @@ class OrganizationAdd extends React.Component {
     error: '',
   };
 
-  onSelectChange(value, _) {
-    this.setState({ custom_virtualenv: value });
-  };
-
-  onLookupChange(id, _) {
-    let selected = { ...this.state.results }
-    const index = id - 1;
-    selected[index].isChecked = !selected[index].isChecked;
-    this.setState({ selected })
-  }
-
-  resetForm() {
-    this.setState({
-      name: '',
-      description: '',
-    });
-    let reset = [];
-    this.state.results.map((result) => {
-      reset.push({ id: result.id, name: result.name, isChecked: false });
-    })
-    this.setState({ results: reset });
-  }
-
-  handleChange(_, evt) {
-    this.setState({ [evt.target.name]: evt.target.value });
-  }
-
-  async onSubmit() {
-    const { api } = this.props;
-    const data = Object.assign({}, { ...this.state });
-    try {
-      const { data: response } = await api.createOrganization(data);
-      const url = response.related.instance_groups;
-      const selected = this.state.results.filter(group => group.isChecked);
-      try {
-        if (selected.length > 0) {
-          selected.forEach( async (select) => {
-            await api.createInstanceGroups(url, select.id);
-          });
-        }
-      } catch (err) {
-        this.setState({ createInstanceGroupsError: err })
-      } finally {
-        this.resetForm();
-        this.onSuccess(response.id);
-      }
-    }
-    catch (err) {
-      this.setState({ onSubmitError: err })
-    }
-  }
-
-  onCancel() {
-    this.props.history.push('/organizations');
-  }
-
-  onSuccess(id) {
-    this.props.history.push(`/organizations/${id}`);
-  }
-
-  format(data) {
-    let results = [];
-    data.results.map((result) => {
-      results.push({ id: result.id, name: result.name, isChecked: false });
-    });
-    return results;
-  };
-
-  async componentDidMount() {
+  async componentDidMount () {
     const { api } = this.props;
     try {
       const { data } = await api.getInstanceGroups();
       const results = this.format(data);
       this.setState({ results });
     } catch (error) {
-      this.setState({ getInstanceGroupsError: error })
+      this.setState({ getInstanceGroupsError: error });
     }
   }
 
-  render() {
-    const { name, results } = this.state;
+  onSelectChange (value) {
+    this.setState({ custom_virtualenv: value });
+  }
+
+  onLookupChange (id) {
+    const { results } = this.state;
+    const selected = { ...results };
+    const index = id - 1;
+    selected[index].isChecked = !selected[index].isChecked;
+    this.setState({ selected });
+  }
+
+  async onSubmit () {
+    const { api } = this.props;
+    const data = Object.assign({}, { ...this.state });
+    const { results } = this.state;
+    try {
+      const { data: response } = await api.createOrganization(data);
+      const url = response.related.instance_groups;
+      const selected = results.filter(group => group.isChecked);
+      try {
+        if (selected.length > 0) {
+          selected.forEach(async (select) => {
+            await api.createInstanceGroups(url, select.id);
+          });
+        }
+      } catch (err) {
+        this.setState({ createInstanceGroupsError: err });
+      } finally {
+        this.resetForm();
+        this.onSuccess(response.id);
+      }
+    } catch (err) {
+      this.setState({ onSubmitError: err });
+    }
+  }
+
+  onCancel () {
+    const { history } = this.props;
+    history.push('/organizations');
+  }
+
+  onSuccess (id) {
+    const { history } = this.props;
+    history.push(`/organizations/${id}`);
+  }
+
+  handleChange (_, evt) {
+    this.setState({ [evt.target.name]: evt.target.value });
+  }
+
+  resetForm () {
+    this.setState({
+      name: '',
+      description: '',
+    });
+    const { results } = this.state;
+    const reset = results.map((result) => ({ id: result.id, name: result.name, isChecked: false }));
+    this.setState({ results: reset });
+  }
+
+  render () {
+    const { name, results, description, custom_virtualenv } = this.state;
     const enabled = name.length > 0; // TODO: add better form validation
 
     return (
@@ -150,7 +153,7 @@ class OrganizationAdd extends React.Component {
                       type="text"
                       id="add-org-form-name"
                       name="name"
-                      value={this.state.name}
+                      value={name}
                       onChange={this.handleChange}
                     />
                   </FormGroup>
@@ -158,7 +161,7 @@ class OrganizationAdd extends React.Component {
                     <TextInput
                       id="add-org-form-description"
                       name="description"
-                      value={this.state.description}
+                      value={description}
                       onChange={this.handleChange}
                     />
                   </FormGroup>
@@ -170,14 +173,14 @@ class OrganizationAdd extends React.Component {
                     />
                   </FormGroup>
                   <ConfigContext.Consumer>
-                    {({ custom_virtualenvs }) =>
+                    {({ custom_virtualenvs }) => (
                       <AnsibleSelect
                         labelName="Ansible Environment"
-                        selected={this.state.custom_virtualenv}
+                        selected={custom_virtualenv}
                         selectChange={this.onSelectChange}
                         data={custom_virtualenvs}
                       />
-                    }
+                    )}
                   </ConfigContext.Consumer>
                 </Gallery>
                 <ActionGroup className="at-align-right">
@@ -200,7 +203,7 @@ class OrganizationAdd extends React.Component {
 }
 
 OrganizationAdd.contextTypes = {
-  custom_virtualenvs: PropTypes.array,
+  custom_virtualenvs: PropTypes.arrayOf(PropTypes.string)
 };
 
 export default withRouter(OrganizationAdd);