Upgrade eslint and dependencies (#2255)

Updates configuration and fixes issues introduced

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     'react/prefer-stateless-function': 0,
     'react/no-multi-comp': 0,
     'react/no-unused-prop-types': [1, { 'customValidators': [], skipShapeProps: true }],
+    'react/require-default-props': 0, // TODO set default props and enable this check
     'no-param-reassign': 0,
     'new-cap': 0,
     'import/no-unresolved': 2,

frontend/components/App/App.jsx

@@ -55,7 +55,7 @@ export class App extends Component {
 
     const wrapperStyles = classnames(
       'wrapper',
-      { 'wrapper--background': showBackgroundImage }
+      { 'wrapper--background': showBackgroundImage },
     );
 
     return (

frontend/components/App/App.tests.jsx

@@ -15,7 +15,7 @@ describe('App - component', () => {
   const store = { app: {}, auth: {}, notifications: {} };
   const mockStore = reduxMockStore(store);
   const component = mount(
-    connectedComponent(ConnectedApp, { mockStore })
+    connectedComponent(ConnectedApp, { mockStore }),
   );
 
   afterEach(() => {

frontend/components/AuthenticatedAdminRoutes/AuthenticatedAdminRoutes.tests.js

@@ -18,7 +18,7 @@ describe('AuthenticatedAdminRoutes - layout', () => {
     const storeWithoutAdminUser = { auth: { user } };
     const mockStore = reduxMockStore(storeWithoutAdminUser);
     mount(
-      connectedComponent(ConnectedAdminRoutes, { mockStore })
+      connectedComponent(ConnectedAdminRoutes, { mockStore }),
     );
 
     expect(mockStore.getActions()).toInclude(redirectToHomeAction);
@@ -29,7 +29,7 @@ describe('AuthenticatedAdminRoutes - layout', () => {
     const storeWithAdminUser = { auth: { user } };
     const mockStore = reduxMockStore(storeWithAdminUser);
     mount(
-      connectedComponent(ConnectedAdminRoutes, { mockStore })
+      connectedComponent(ConnectedAdminRoutes, { mockStore }),
     );
 
     expect(mockStore.getActions()).toNotInclude(redirectToHomeAction);

frontend/components/AuthenticatedRoutes/AuthenticatedRoutes.tests.jsx

@@ -75,7 +75,7 @@ describe('AuthenticatedRoutes - component', () => {
         <AuthenticatedRoutes>
           <div>{renderedText}</div>
         </AuthenticatedRoutes>
-      </Provider>
+      </Provider>,
     );
 
     expect(component.text()).toEqual(renderedText);
@@ -89,7 +89,7 @@ describe('AuthenticatedRoutes - component', () => {
         <AuthenticatedRoutes>
           <div>{renderedText}</div>
         </AuthenticatedRoutes>
-      </Provider>
+      </Provider>,
     );
 
     expect(mockStore.getActions()).toInclude(redirectToPasswordResetAction);
@@ -103,7 +103,7 @@ describe('AuthenticatedRoutes - component', () => {
         <AuthenticatedRoutes>
           <div>{renderedText}</div>
         </AuthenticatedRoutes>
-      </Provider>
+      </Provider>,
     );
 
     expect(mockStore.getActions()).toInclude(redirectToLoginAction);
@@ -118,7 +118,7 @@ describe('AuthenticatedRoutes - component', () => {
         <AuthenticatedRoutes>
           <div>{renderedText}</div>
         </AuthenticatedRoutes>
-      </Provider>
+      </Provider>,
     );
 
     expect(mockStore.getActions()).toNotInclude(redirectToLoginAction);

frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.jsx

@@ -61,7 +61,7 @@ class StackedWhiteBoxes extends Component {
     if (previousLocation) {
       window.setTimeout(
         () => { onLeave(previousLocation); },
-        300
+        300,
       );
     }
 
@@ -109,7 +109,7 @@ class StackedWhiteBoxes extends Component {
         [`${baseClass}--loading`]: isLoading,
         [`${baseClass}--loaded`]: isLoaded,
         [`${baseClass}--leaving`]: isLeaving,
-      }
+      },
     );
 
     return (

frontend/components/UserBlock/UserBlock.jsx

@@ -83,7 +83,7 @@ class UserBlock extends Component {
     const userWrapperClass = classnames(
       baseClass,
       { [`${baseClass}--invited`]: isInvite },
-      { [`${baseClass}--disabled`]: !enabled && !isInvite }
+      { [`${baseClass}--disabled`]: !enabled && !isInvite },
     );
 
     const userHeaderClass = classnames(
@@ -91,40 +91,40 @@ class UserBlock extends Component {
       { [`${baseClass}__header--admin`]: admin },
       { [`${baseClass}__header--user`]: !admin },
       { [`${baseClass}__header--invited`]: isInvite },
-      { [`${baseClass}__header--disabled`]: !enabled && !isInvite }
+      { [`${baseClass}__header--disabled`]: !enabled && !isInvite },
     );
 
     const userAvatarClass = classnames(
       `${baseClass}__avatar`,
-      { [`${baseClass}__avatar--enabled`]: enabled }
+      { [`${baseClass}__avatar--enabled`]: enabled },
     );
 
     const userStatusLabelClass = classnames(
       `${baseClass}__status-label`,
-      { [`${baseClass}__status-label--admin`]: admin }
+      { [`${baseClass}__status-label--admin`]: admin },
     );
 
     const userStatusTextClass = classnames(
       `${baseClass}__status-text`,
       { [`${baseClass}__status-text--invited`]: isInvite },
       { [`${baseClass}__status-text--enabled`]: enabled },
-      { [`${baseClass}__status-text--disabled`]: !enabled && !isInvite }
+      { [`${baseClass}__status-text--disabled`]: !enabled && !isInvite },
     );
 
     const userUsernameClass = classnames(
       `${baseClass}__username`,
       { [`${baseClass}__username--enabled`]: enabled },
-      { [`${baseClass}__username--hidden`]: !username }
+      { [`${baseClass}__username--hidden`]: !username },
     );
 
     const userPositionClass = classnames(
       `${baseClass}__position`,
-      { [`${baseClass}__position--hidden`]: !position }
+      { [`${baseClass}__position--hidden`]: !position },
     );
 
     const userEmailClass = classnames(
       `${baseClass}__email`,
-      { [`${baseClass}__email--disabled`]: !enabled }
+      { [`${baseClass}__email--disabled`]: !enabled },
     );
 
     if (isEditing) {

frontend/components/buttons/DropdownButton/DropdownButton.jsx

@@ -19,7 +19,7 @@ export class DropdownButton extends Component {
         disabled: PropTypes.bool,
         label: PropTypes.string,
         onClick: PropTypes.func,
-      })
+      }),
     ).isRequired,
     size: PropTypes.string,
     tabIndex: PropTypes.number,

frontend/components/buttons/DropdownButton/DropdownButton.tests.jsx

@@ -14,7 +14,7 @@ describe('DropdownButton - component', () => {
     const component = mount(
       <DropdownButton options={dropdownOptions}>
         New Button
-      </DropdownButton>
+      </DropdownButton>,
     );
 
     component.find('button.dropdown-button').simulate('click');

frontend/components/buttons/EllipsisMenu/EllipsisMenu.tests.jsx

@@ -9,7 +9,7 @@ describe('EllipsisMenu - component', () => {
     const component = mount(
       <EllipsisMenu>
         <span>EllipsisMenu Children</span>
-      </EllipsisMenu>
+      </EllipsisMenu>,
     );
 
     expect(component.state().showChildren).toEqual(false);

frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx

@@ -91,7 +91,6 @@ class EnrollSecretRow extends Component {
       </div>
     );
   }
-
 }
 
 class EnrollSecretTable extends Component {
@@ -110,12 +109,11 @@ class EnrollSecretTable extends Component {
     return (
       <div className={baseClass}>
         {activeSecrets.map(({ name, secret }) =>
-          <EnrollSecretRow key={name} name={name} secret={secret} />
-         )}
+          <EnrollSecretRow key={name} name={name} secret={secret} />,
+        )}
       </div>
     );
   }
-
 }
 
 export default EnrollSecretTable;

frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx

@@ -43,6 +43,7 @@ export class ConfigurePackQueryForm extends Component {
       logging_type: formFieldInterface.isRequired,
       platform: formFieldInterface.isRequired,
       version: formFieldInterface.isRequired,
+      shard: formFieldInterface.isRequired,
     }).isRequired,
     formData: PropTypes.shape({
       id: PropTypes.number,
@@ -54,7 +55,7 @@ export class ConfigurePackQueryForm extends Component {
   componentWillMount () {
     const { fields } = this.props;
 
-    if (fields && fields.shared && !fields.shard.value) {
+    if (fields && fields.shard && !fields.shard.value) {
       fields.shard.value = '';
     }
   }

frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.tests.jsx

@@ -14,7 +14,7 @@ describe('ConfigurePackQueryForm - component', () => {
     const form = mount(
       <DefaultConfigurePackQueryForm
         handleSubmit={noop}
-      />
+      />,
     );
 
     it('updates form state', () => {
@@ -41,7 +41,7 @@ describe('ConfigurePackQueryForm - component', () => {
         fields={fieldsObj}
         handleSubmit={noop}
         formData={{ query_id: 1 }}
-      />
+      />,
     );
 
     it("doesn't allow All when other options are chosen", () => {
@@ -63,7 +63,7 @@ describe('ConfigurePackQueryForm - component', () => {
       <DefaultConfigurePackQueryForm
         handleSubmit={spy}
         formData={{ query_id: 1 }}
-      />
+      />,
     );
 
     it('submits the form with the form data', () => {
@@ -95,14 +95,14 @@ describe('ConfigurePackQueryForm - component', () => {
           formData={{ query_id: 1 }}
           handleSubmit={noop}
           onCancel={noop}
-        />
+        />,
       );
       const UpdateScheduledQueryForm = mount(
         <DefaultConfigurePackQueryForm
           formData={scheduledQueryStub}
           handleSubmit={noop}
           onCancel={noop}
-        />
+        />,
       );
 
       expect(CancelButton(NewScheduledQueryForm).length).toEqual(0);
@@ -116,7 +116,7 @@ describe('ConfigurePackQueryForm - component', () => {
           formData={scheduledQueryStub}
           handleSubmit={noop}
           onCancel={spy}
-        />
+        />,
       );
 
       CancelButton(UpdateScheduledQueryForm).hostNodes().simulate('click');

frontend/components/forms/FormField/FormField.jsx

@@ -19,7 +19,7 @@ class FormField extends Component {
     const { error, label, name } = this.props;
     const labelWrapperClasses = classnames(
       `${baseClass}__label`,
-      { [`${baseClass}__label--error`]: error }
+      { [`${baseClass}__label--error`]: error },
     );
 
     if (!label) {

frontend/components/forms/InviteUserForm/InviteUserForm.jsx

@@ -84,14 +84,14 @@ class InviteUserForm extends Component {
     const valid = this.validate();
 
     if (valid) {
-      const { formData: { admin, email, name, sso_enabled } } = this.state;
+      const { formData: { admin, email, name, sso_enabled: ssoEnabled } } = this.state;
       const { invitedBy, onSubmit } = this.props;
       return onSubmit({
         admin,
         email,
         invited_by: invitedBy.id,
         name,
-        sso_enabled,
+        sso_enabled: ssoEnabled,
       });
     }
 

frontend/components/forms/LoginForm/LoginForm.jsx

@@ -74,7 +74,7 @@ class LoginForm extends Component {
 
     const loginFormClass = classnames(
       baseClass,
-      { [`${baseClass}--hidden`]: isHidden }
+      { [`${baseClass}--hidden`]: isHidden },
     );
 
     return (

frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.tests.jsx

@@ -20,7 +20,7 @@ describe('ConfirmationPage - form', () => {
       <ConfirmationPage
         formData={formData}
         handleSubmit={noop}
-      />
+      />,
     );
 
     expect(form.text()).toInclude(formData.username);
@@ -35,7 +35,7 @@ describe('ConfirmationPage - form', () => {
       <ConfirmationPage
         formData={formData}
         handleSubmit={handleSubmitSpy}
-      />
+      />,
     );
     const htmlForm = form.find('form');
 

frontend/components/forms/RegistrationForm/RegistrationForm.jsx

@@ -148,17 +148,17 @@ class RegistrationForm extends Component {
 
     const adminDetailsClass = classnames(
       `${baseClass}__field-wrapper`,
-      `${baseClass}__field-wrapper--admin`
+      `${baseClass}__field-wrapper--admin`,
     );
 
     const orgDetailsClass = classnames(
       `${baseClass}__field-wrapper`,
-      `${baseClass}__field-wrapper--org`
+      `${baseClass}__field-wrapper--org`,
     );
 
     const kolideDetailsClass = classnames(
       `${baseClass}__field-wrapper`,
-      `${baseClass}__field-wrapper--kolide`
+      `${baseClass}__field-wrapper--kolide`,
     );
 
     const formSectionClasses = classnames(
@@ -170,7 +170,7 @@ class RegistrationForm extends Component {
         [`${baseClass}__form--step2-complete`]: page > 2,
         [`${baseClass}__form--step3-active`]: page === 3,
         [`${baseClass}__form--step3-complete`]: page > 3,
-      }
+      },
     );
 
     return (

frontend/components/forms/fields/Checkbox/Checkbox.tests.jsx

@@ -20,7 +20,7 @@ describe('Checkbox - component', () => {
         name="checkbox"
         onChange={onCheckedComponentChangeSpy}
         value
-      />
+      />,
     ).find('input');
 
     const uncheckedComponent = mount(
@@ -28,7 +28,7 @@ describe('Checkbox - component', () => {
         name="checkbox"
         onChange={onUncheckedComponentChangeSpy}
         value={false}
-      />
+      />,
     ).find('input');
 
     checkedComponent.simulate('change');

frontend/components/forms/fields/Dropdown/Dropdown.jsx

@@ -50,7 +50,7 @@ class Dropdown extends Component {
     const labelWrapperClasses = classnames(
       `${baseClass}__label`,
       labelClassName,
-      { [`${baseClass}__label--error`]: error }
+      { [`${baseClass}__label--error`]: error },
     );
 
     if (!label) {

frontend/components/forms/fields/InputField/InputField.jsx

@@ -21,7 +21,7 @@ class InputField extends Component {
     placeholder: PropTypes.string,
     type: PropTypes.string,
     value: PropTypes.oneOfType(
-      [PropTypes.bool, PropTypes.string, PropTypes.number]
+      [PropTypes.bool, PropTypes.string, PropTypes.number],
     ).isRequired,
   };
 

frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx

@@ -26,7 +26,7 @@ class InputFieldWithIcon extends InputField {
 
     const labelClasses = classnames(
       `${baseClass}__label`,
-      { [`${baseClass}__label--hidden`]: !value }
+      { [`${baseClass}__label--hidden`]: !value },
     );
 
     if (error) {
@@ -55,13 +55,13 @@ class InputFieldWithIcon extends InputField {
       'input-with-icon',
       className,
       { [`${baseClass}__input--error`]: error },
-      { [`${baseClass}__input--password`]: type === 'password' && value }
+      { [`${baseClass}__input--password`]: type === 'password' && value },
     );
 
     const iconClasses = classnames(
       `${baseClass}__icon`,
       { [`${baseClass}__icon--error`]: error },
-      { [`${baseClass}__icon--active`]: value }
+      { [`${baseClass}__icon--active`]: value },
     );
 
     return (

frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/SelectTargetsMenu.jsx

@@ -61,7 +61,7 @@ const SelectTargetsMenuWrapper = (onMoreInfoClick, moreInfoTarget, handleBackToR
             isDisabled={isDisabled}
             isFocused={isFocused}
             isSelected={isSelected}
-            key={`option-${index}-${target[valueKey]}`}
+            key={`option-${target[valueKey]}`}
             onFocus={onFocus}
             onSelect={noop}
             option={target}

frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.tests.jsx

@@ -30,7 +30,7 @@ describe('TargetOption - component', () => {
         onMoreInfoClick={noop}
         onSelect={onSelectSpy}
         target={hostStub}
-      />
+      />,
     );
     component.find('.target-option__add-btn').simulate('click');
     expect(onSelectSpy).toHaveBeenCalled();
@@ -45,7 +45,7 @@ describe('TargetOption - component', () => {
       <TargetOption
         onMoreInfoClick={onMoreInfoClick}
         target={hostStub}
-      />
+      />,
     );
     component.find('.target-option__target-content').simulate('click');
     expect(onMoreInfoClickSpy).toHaveBeenCalled();

frontend/components/forms/fields/Slider/Slider.jsx

@@ -11,12 +11,12 @@ const Slider = (props) => {
 
   const sliderBtnClass = classnames(
     baseClass,
-    { [`${baseClass}--active`]: value }
+    { [`${baseClass}--active`]: value },
   );
 
   const sliderDotClass = classnames(
     `${baseClass}__dot`,
-    { [`${baseClass}__dot--active`]: value }
+    { [`${baseClass}__dot--active`]: value },
   );
 
   const handleClick = (evt) => {

frontend/components/forms/validators/validate_query/validate_query.tests.js

@@ -23,12 +23,12 @@ const validQueries = [
 
 describe('validateQuery', () => {
   it('rejects malformed queries', () => {
-    for (const query of malformedQueries) {
+    malformedQueries.forEach((query) => {
       const { error, valid } = validateQuery(query);
 
       expect(valid).toEqual(false);
       expect(error).toMatch(/Syntax error found near .+/);
-    }
+    });
   });
 
   it('rejects blank queries', () => {
@@ -39,10 +39,10 @@ describe('validateQuery', () => {
   });
 
   it('accepts valid queries', () => {
-    for (const query of validQueries) {
+    validQueries.forEach((query) => {
       const { error, valid } = validateQuery(query);
       expect(valid).toEqual(true, query);
       expect(error).toNotExist();
-    }
+    });
   });
 });

frontend/components/hosts/AddHostModal/AddHostModal.jsx

@@ -60,7 +60,7 @@ class AddHostModal extends Component {
               </p>
               <p className={`${baseClass}__download-cert`}>
                 <Button variant="unstyled" onClick={onFetchCertificate}>
-                  <img src={certificate} role="presentation" />
+                  <img src={certificate} alt="" />
                   <span>Fetch Fleet Certificate</span>
                 </Button>
               </p>

frontend/components/hosts/HostDetails/HostDetails.tests.jsx

@@ -20,7 +20,7 @@ describe('HostDetails - component', () => {
         onDestroyHost={destroySpy}
         onQueryHost={querySpy}
         isLoading={false}
-      />
+      />,
     );
     const btn = offlineComponent.find('Button');
 
@@ -43,7 +43,7 @@ describe('HostDetails - component', () => {
         onDestroyHost={destroySpy}
         onQueryHost={querySpy}
         isLoading={false}
-      />
+      />,
     );
     const btn = miaComponent.find('Button');
 
@@ -66,7 +66,7 @@ describe('HostDetails - component', () => {
         onDestroyHost={destroySpy}
         onQueryHost={querySpy}
         isLoading={false}
-      />
+      />,
     );
     const btn = onlineComponent.find('Button');
 
@@ -85,7 +85,7 @@ describe('HostDetails - component', () => {
         onDestroyHost={noop}
         onQueryHost={noop}
         isLoading
-      />
+      />,
     );
 
     expect(loadingComponent.find('Circle').length).toEqual(1);

frontend/components/hosts/HostsTable/HostsTable.jsx

@@ -53,7 +53,7 @@ class HostsTable extends Component {
     const { onDestroyHost, onQueryHost } = this.props;
     const statusClassName = classnames(
       `${baseClass}__status`,
-      `${baseClass}__status--${host.status}`
+      `${baseClass}__status--${host.status}`,
     );
 
     return (

frontend/components/hosts/HostsTable/HostsTable.tests.jsx

@@ -18,7 +18,7 @@ describe('HostsTable - component', () => {
         hosts={[offlineHost]}
         onDestroyHost={destroySpy}
         onQueryHost={querySpy}
-      />
+      />,
     );
     const btn = offlineComponent.find('Button');
 
@@ -40,7 +40,7 @@ describe('HostsTable - component', () => {
         hosts={[miaHost]}
         onDestroyHost={destroySpy}
         onQueryHost={querySpy}
-      />
+      />,
     );
     const btn = miaComponent.find('Button');
 
@@ -62,7 +62,7 @@ describe('HostsTable - component', () => {
         hosts={[onlineHost]}
         onDestroyHost={destroySpy}
         onQueryHost={querySpy}
-      />
+      />,
     );
     const btn = onlineComponent.find('Button');
 

frontend/components/hosts/LonelyHost/LonelyHost.jsx

@@ -14,7 +14,7 @@ const LonelyHost = ({ onClick = noop }) => {
       <Button variant="unstyled" className={`${baseClass}__add-host-btn`} onClick={onClick}>
         <span className={`${baseClass}__title`}>Add New Host</span>
         <span className={`${baseClass}__icon`}>
-          <img src={laptop} className={`${baseClass}__laptop`} role="presentation" />
+          <img src={laptop} className={`${baseClass}__laptop`} alt="" />
         </span>
       </Button>
 
@@ -22,7 +22,7 @@ const LonelyHost = ({ onClick = noop }) => {
         <h1>It&#39;s Kinda Lonely In Here...</h1>
         <h2>Get started adding hosts to Fleet.</h2>
         <p>This can be done individually or across your entire fleet.</p>
-        <img src={swoop} className={`${baseClass}__swoop`} role="presentation" />
+        <img src={swoop} className={`${baseClass}__swoop`} alt="" />
       </div>
     </div>
   );

frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.tests.jsx

@@ -16,7 +16,7 @@ describe('EditPackFormWrapper - component', () => {
         onCancelEditPack={noop}
         onEditPack={noop}
         pack={packStub}
-      />
+      />,
     );
 
     expect(component.find('EditPackForm').length).toEqual(0);
@@ -29,7 +29,7 @@ describe('EditPackFormWrapper - component', () => {
         onCancelEditPack={noop}
         onEditPack={noop}
         pack={packStub}
-      />
+      />,
     );
 
     expect(component.find('EditPackForm').length).toEqual(1);
@@ -43,7 +43,7 @@ describe('EditPackFormWrapper - component', () => {
         onCancelEditPack={noop}
         onEditPack={spy}
         pack={packStub}
-      />
+      />,
     );
     const editBtn = component.find('Button');
 

frontend/components/queries/QueryResultsTable/QueryResultsRow.jsx

@@ -1,12 +1,10 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { isEqual, omit, values } from 'lodash';
+import { isEqual, omit } from 'lodash';
 
 import queryResultInterface from 'interfaces/query_result';
 
 class QueryResultsRow extends Component {
   static propTypes = {
-    index: PropTypes.number.isRequired,
     queryResult: queryResultInterface.isRequired,
   };
 
@@ -15,16 +13,15 @@ class QueryResultsRow extends Component {
   }
 
   render () {
-    const { index, queryResult } = this.props;
+    const { queryResult } = this.props;
     const { host_hostname: hostHostname } = queryResult;
-    const queryAttrs = omit(queryResult, ['host_hostname']);
-    const queryAttrValues = values(queryAttrs);
+    const queryColumns = omit(queryResult, ['host_hostname']);
 
     return (
       <tr>
         <td>{hostHostname}</td>
-        {queryAttrValues.map((attribute, i) => {
-          return <td key={`query-results-table-row-${index}-${i}`}>{attribute}</td>;
+        {Object.keys(queryColumns).map((col) => {
+          return <td key={col}>{queryColumns[col]}</td>;
         })}
       </tr>
     );

frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx

@@ -101,13 +101,9 @@ class QueryResultsTable extends Component {
     const { resultsFilter } = this.state;
     const filteredQueryResults = filterArrayByHash(queryResults, resultsFilter);
 
-    return filteredQueryResults.map((queryResult, index) => {
+    return filteredQueryResults.map((queryResult) => {
       return (
-        <QueryResultsRow
-          index={index}
-          key={`qrtr-${index}`}
-          queryResult={queryResult}
-        />
+        <QueryResultsRow queryResult={queryResult} />
       );
     });
   }

frontend/components/queries/QueryResultsTable/QueryResultsTable.tests.jsx

@@ -63,10 +63,10 @@ describe('QueryResultsTable - component', () => {
   afterEach(restoreSpies);
 
   const componentWithoutQueryResults = mount(
-    <QueryResultsTable campaign={campaignWithNoQueryResults} />
+    <QueryResultsTable campaign={campaignWithNoQueryResults} />,
   );
   const componentWithQueryResults = mount(
-    <QueryResultsTable campaign={campaignWithQueryResults} />
+    <QueryResultsTable campaign={campaignWithQueryResults} />,
   );
 
   it('renders', () => {

frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.tests.jsx

@@ -20,7 +20,7 @@ describe('ScheduledQueriesList - component', () => {
         onSelectQuery={noop}
         scheduledQueries={scheduledQueries}
         selectedScheduledQueryIDs={[]}
-      />
+      />,
     );
 
     expect(component.find('ScheduledQueriesListItem').length).toEqual(2);
@@ -35,7 +35,7 @@ describe('ScheduledQueriesList - component', () => {
         onSelectQuery={noop}
         scheduledQueries={[]}
         selectedScheduledQueryIDs={[]}
-      />
+      />,
     );
 
     expect(component.text()).toInclude('No queries matched your search criteria');
@@ -49,7 +49,7 @@ describe('ScheduledQueriesList - component', () => {
         onSelectQuery={noop}
         scheduledQueries={[]}
         selectedScheduledQueryIDs={[]}
-      />
+      />,
     );
 
     expect(component.text()).toInclude("First let's add a query");

frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx

@@ -71,7 +71,7 @@ class ScheduledQueriesListItem extends Component {
       return <PlatformIcon name="all" title="All Platforms" className={`${baseClass}__icon`} />;
     }
 
-    return platformArr.map((pltf, idx) => <PlatformIcon name={pltf} title={pltf} className={`${baseClass}__icon`} key={`${idx}-${pltf}`} />);
+    return platformArr.map(pltf => <PlatformIcon name={pltf} title={pltf} className={`${baseClass}__icon`} key={pltf} />);
   }
 
   render () {

frontend/components/side_panels/HostSidePanel/PanelGroup/PanelGroup.tests.jsx

@@ -12,7 +12,7 @@ describe('PanelGroup - component', () => {
   ];
 
   const component = mount(
-    <PanelGroup groupItems={validPanelGroupItems} />
+    <PanelGroup groupItems={validPanelGroupItems} />,
   );
 
   it('renders a PanelGroupItem for each group item', () => {

frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx

@@ -12,10 +12,11 @@ const baseClass = 'panel-group-item';
 class PanelGroupItem extends Component {
   static propTypes = {
     item: PropTypes.shape({
-      count: PropTypes.number,
+      count: PropTypes.number.isRequired,
       title_description: PropTypes.string,
-      display_text: PropTypes.string,
-      type: PropTypes.string,
+      display_text: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     }).isRequired,
     onLabelClick: PropTypes.func,
     isSelected: PropTypes.bool,
@@ -73,7 +74,7 @@ class PanelGroupItem extends Component {
       `${baseClass}__${type.toLowerCase()}--${displayText.toLowerCase().replace(' ', '-')}`,
       {
         [`${baseClass}--selected`]: isSelected,
-      }
+      },
     );
 
     return (

frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.tests.jsx

@@ -26,19 +26,19 @@ describe('PanelGroupItem - component', () => {
   };
 
   const labelComponent = mount(
-    <PanelGroupItem item={validPanelGroupItem} statusLabels={statusLabels} />
+    <PanelGroupItem item={validPanelGroupItem} statusLabels={statusLabels} />,
   );
 
   const platformComponent = mount(
-    <PanelGroupItem item={validPanelGroupItem} statusLabels={statusLabels} type="platform" />
+    <PanelGroupItem item={validPanelGroupItem} statusLabels={statusLabels} type="platform" />,
   );
 
   const statusLabelComponent = mount(
-    <PanelGroupItem item={validStatusGroupItem} statusLabels={statusLabels} type="status" />
+    <PanelGroupItem item={validStatusGroupItem} statusLabels={statusLabels} type="status" />,
   );
 
   const loadingStatusLabelComponent = mount(
-    <PanelGroupItem item={validStatusGroupItem} statusLabels={loadingStatusLabels} type="status" />
+    <PanelGroupItem item={validStatusGroupItem} statusLabels={loadingStatusLabels} type="status" />,
   );
 
   it('renders the appropriate icon', () => {

frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx

@@ -95,12 +95,12 @@ class QuerySidePanel extends Component {
         <div className={`${baseClass}__os-availability`}>
           <h2 className={`${baseClass}__header`}>OS Availability</h2>
           <ul className={`${baseClass}__platforms`}>
-            {platformArr.map((os, idx) => {
+            {platformArr.map((os) => {
               if (os.type === 'all') {
-                return <li key={idx}><Icon name="hosts" /> {os.display_text}</li>;
+                return <li key={os.type}><Icon name="hosts" /> {os.display_text}</li>;
               }
 
-              return <li key={idx}><PlatformIcon name={os.display_text} title={os.display_text} /> {os.display_text}</li>;
+              return <li key={os.type}><PlatformIcon name={os.display_text} title={os.display_text} /> {os.display_text}</li>;
             })}
           </ul>
         </div>

frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx

@@ -75,12 +75,12 @@ class SiteNavHeader extends Component {
     const headerToggleClass = classnames(
       `${headerBaseClass}__button`,
       'button',
-      'button--unstyled'
+      'button--unstyled',
     );
 
     const userStatusClass = classnames(
       `${headerBaseClass}__user-status`,
-      { [`${headerBaseClass}__user-status--enabled`]: enabled }
+      { [`${headerBaseClass}__user-status--enabled`]: enabled },
     );
 
     return (

frontend/components/side_panels/SiteNavHeader/UserMenu.jsx

@@ -14,6 +14,7 @@ class UserMenu extends Component {
     user: PropTypes.shape({
       gravatarURL: PropTypes.string,
       name: PropTypes.string,
+      username: PropTypes.string.isRequired,
       position: PropTypes.string,
     }).isRequired,
   };
@@ -29,7 +30,7 @@ class UserMenu extends Component {
     const toggleBaseClass = 'user-menu-toggle';
     const userMenuClass = classnames(
       toggleBaseClass,
-      { [`${toggleBaseClass}--open`]: isOpened }
+      { [`${toggleBaseClass}--open`]: isOpened },
     );
 
     return (

frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx

@@ -59,7 +59,7 @@ class SiteNavSidePanel extends Component {
       {
         [`${navItemBaseClass}--active`]: active,
         [`${navItemBaseClass}--single`]: subItems.length === 0,
-      }
+      },
     );
 
     return (
@@ -100,7 +100,7 @@ class SiteNavSidePanel extends Component {
 
     const baseSubItemItemClass = classnames(
       `${baseSubItemClass}`,
-      { [`${baseSubItemClass}--active`]: active }
+      { [`${baseSubItemClass}--active`]: active },
     );
 
     return (
@@ -128,7 +128,7 @@ class SiteNavSidePanel extends Component {
 
     const subItemListClasses = classnames(
       `${baseSubItemsClass}__list`,
-      { [`${baseSubItemsClass}__list--expanded`]: showSubItems }
+      { [`${baseSubItemsClass}__list--expanded`]: showSubItems },
     );
 
     if (!subItems.length) return false;

frontend/interfaces/enroll_secret.js

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 
 export default PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      secret: PropTypes.string,
-      active: PropTypes.bool,
-      created_at: PropTypes.string,
-    }),
+  PropTypes.shape({
+    name: PropTypes.string,
+    secret: PropTypes.string,
+    active: PropTypes.bool,
+    created_at: PropTypes.string,
+  }),
 );

frontend/interfaces/form_field.js

@@ -5,7 +5,7 @@ export default PropTypes.shape({
   name: PropTypes.string,
   onChange: PropTypes.func,
   value: PropTypes.oneOfType(
-    [PropTypes.array, PropTypes.bool, PropTypes.number, PropTypes.string]
+    [PropTypes.array, PropTypes.bool, PropTypes.number, PropTypes.string],
   ),
 });
 

frontend/kolide/helpers.tests.js

@@ -47,18 +47,18 @@ describe('Kolide API - helpers', () => {
         org_info: { org_name: 'The Gnar Co' },
       });
       expect(
-        formatConfigDataForServer({ org_name: 'The Gnar Co', kolide_server_url: 'https://example.com' })
+        formatConfigDataForServer({ org_name: 'The Gnar Co', kolide_server_url: 'https://example.com' }),
       ).toEqual({
         org_info: { org_name: 'The Gnar Co' },
         server_settings: { kolide_server_url: 'https://example.com' },
       });
       expect(
-        formatConfigDataForServer({ domain: 'https://kolide.co' })
+        formatConfigDataForServer({ domain: 'https://kolide.co' }),
       ).toEqual({
         smtp_settings: { domain: 'https://kolide.co' },
       });
       expect(
-        formatConfigDataForServer({ host_expiry_window: '12' })
+        formatConfigDataForServer({ host_expiry_window: '12' }),
       ).toEqual({
         host_expiry_settings: {
           host_expiry_window: 12,

frontend/pages/ConfirmInvitePage/ConfirmInvitePage.tests.jsx

@@ -18,7 +18,7 @@ describe('ConfirmInvitePage - component', () => {
   it('renders', () => {
     expect(page.length).toEqual(1);
     expect(
-      page.find('ConfirmInvitePage').prop('inviteFormData')
+      page.find('ConfirmInvitePage').prop('inviteFormData'),
     ).toEqual({
       email: 'hi@gnar.dog',
       invite_token: inviteToken,

frontend/pages/ConfirmSSOInvitePage/ConfirmSSOInvitePage.tests.jsx

@@ -18,7 +18,7 @@ describe('ConfirmInvitePage - component', () => {
   it('renders', () => {
     expect(page.length).toEqual(1);
     expect(
-      page.find('ConfirmInvitePage').prop('inviteFormData')
+      page.find('ConfirmInvitePage').prop('inviteFormData'),
     ).toEqual({
       email: 'hi@gnar.dog',
       invite_token: inviteToken,

frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx

@@ -62,7 +62,7 @@ export class ForgotPasswordPage extends Component {
             <p className={`${baseClass}__text`}>
               An email was sent to
               <span className={`${baseClass}__email`}> {email}</span>.
-               Click the link on the email to proceed with the password reset process.
+              Click the link on the email to proceed with the password reset process.
             </p>
           </div>
           <div className={`${baseClass}__button`}>

frontend/pages/Kolide404/Kolide404.jsx

@@ -6,7 +6,6 @@ import gopher from '../../../assets/images/404.svg';
 const baseClass = 'kolide-404';
 
 class Kolide404 extends Component {
-
   render () {
     return (
       <div className={baseClass}>
@@ -21,7 +20,7 @@ class Kolide404 extends Component {
           <p>You seem to have lost your way.</p>
           <p>Might we recommend going back on your browser or visiting the <a href="/">home page?</a></p>
           <div className="gopher-container">
-            <img src={gopher} role="presentation" />
+            <img src={gopher} alt="" />
             <p>Need assistance? <a href="https://github.com/kolide/fleet/issues">File an issue</a>.</p>
           </div>
         </main>

frontend/pages/Kolide500/Kolide500.jsx

@@ -6,7 +6,6 @@ import gopher from '../../../assets/images/500.svg';
 const baseClass = 'kolide-500';
 
 class Kolide404 extends Component {
-
   render () {
     return (
       <div className={baseClass}>
@@ -21,7 +20,7 @@ class Kolide404 extends Component {
           <p>Something went wrong on our end.</p>
           <p>We have alerted the engineers and they are working on a solution.</p>
           <div className="gopher-container">
-            <img src={gopher} role="presentation" />
+            <img src={gopher} alt="" />
             <p>Need assistance? <a href="https://github.com/kolide/fleet/issues">File an issue</a>.</p>
           </div>
         </main>

frontend/pages/LoginSuccessfulPage/LoginSuccessfulPage.jsx

@@ -1,14 +1,9 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import Icon from 'components/icons/Icon';
 
 class LoginSuccessfulPage extends Component {
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-  };
-
   render () {
     const baseClass = 'login-success';
     return (

frontend/pages/admin/AppSettingsPage/AppSettingsPage.tests.jsx

@@ -37,7 +37,7 @@ describe('AppSettingsPage - component', () => {
   it('renders a warning if SMTP has not been configured', () => {
     const mockStore = reduxMockStore(storeWithoutSMTPConfig);
     const page = mount(
-      connectedComponent(AppSettingsPage, { mockStore })
+      connectedComponent(AppSettingsPage, { mockStore }),
     ).find('AppSettingsPage');
 
     const smtpWarning = page.find('WarningBanner');
@@ -50,7 +50,7 @@ describe('AppSettingsPage - component', () => {
   it('dismisses the smtp warning when "DISMISS" is clicked', () => {
     const mockStore = reduxMockStore(storeWithoutSMTPConfig);
     const page = mount(
-      connectedComponent(AppSettingsPage, { mockStore })
+      connectedComponent(AppSettingsPage, { mockStore }),
     );
 
     const smtpWarning = page.find('WarningBanner');
@@ -64,7 +64,7 @@ describe('AppSettingsPage - component', () => {
   it('does not render a warning if SMTP has been configured', () => {
     const mockStore = reduxMockStore(storeWithSMTPConfig);
     const page = mount(
-      connectedComponent(AppSettingsPage, { mockStore })
+      connectedComponent(AppSettingsPage, { mockStore }),
     ).find('AppSettingsPage');
 
     expect(page.find('WarningBanner').html()).toNotExist();

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx

@@ -112,14 +112,14 @@ describe('ManageHostsPage - component', () => {
           {...props}
           hosts={[hostStub, offlineHost]}
           selectedLabel={allHostsLabel}
-        />
+        />,
       ).instance();
       const offlineHostsLabelPageNode = mount(
         <ManageHostsPage
           {...props}
           hosts={[hostStub, offlineHost]}
           selectedLabel={offlineHostsLabel}
-        />
+        />,
       ).instance();
 
       expect(allHostsLabelPageNode.filterAllHosts([hostStub, offlineHost], allHostsLabel)).toEqual([hostStub, offlineHost]);

frontend/redux/nodes/entities/base/config_thunks.tests.js

@@ -52,9 +52,9 @@ describe('ReduxConfig - thunks', () => {
       it('calls the createFunc', () => {
         const params = { first_name: 'Mike' };
         return mockStore.dispatch(config.actions.create(params))
-        .then(() => {
-          expect(createFunc).toHaveBeenCalledWith(params);
-        });
+          .then(() => {
+            expect(createFunc).toHaveBeenCalledWith(params);
+          });
       });
 
       it('dispatches the correct actions', () => {
@@ -139,9 +139,9 @@ describe('ReduxConfig - thunks', () => {
 
       it('calls the destroyFunc', () => {
         return mockStore.dispatch(config.actions.destroy(params))
-        .then(() => {
-          expect(destroyFunc).toHaveBeenCalledWith(params);
-        });
+          .then(() => {
+            expect(destroyFunc).toHaveBeenCalledWith(params);
+          });
       });
 
       it('dispatches the correct actions', () => {
@@ -217,9 +217,9 @@ describe('ReduxConfig - thunks', () => {
         const params = { id: 1 };
 
         return mockStore.dispatch(config.actions.load(params))
-        .then(() => {
-          expect(loadFunc).toHaveBeenCalledWith(params);
-        });
+          .then(() => {
+            expect(loadFunc).toHaveBeenCalledWith(params);
+          });
       });
 
       it('dispatches the correct actions', () => {
@@ -296,9 +296,9 @@ describe('ReduxConfig - thunks', () => {
         const params = { id: 1 };
 
         return mockStore.dispatch(config.actions.loadAll(params))
-        .then(() => {
-          expect(loadAllFunc).toHaveBeenCalledWith(params);
-        });
+          .then(() => {
+            expect(loadAllFunc).toHaveBeenCalledWith(params);
+          });
       });
 
       it('dispatches the correct actions', () => {
@@ -375,9 +375,9 @@ describe('ReduxConfig - thunks', () => {
         const params = { id: 1 };
 
         return mockStore.dispatch(config.actions.update(params))
-        .then(() => {
-          expect(updateFunc).toHaveBeenCalledWith(params);
-        });
+          .then(() => {
+            expect(updateFunc).toHaveBeenCalledWith(params);
+          });
       });
 
       it('dispatches the correct actions', () => {

package.json

@@ -77,7 +77,7 @@
     "@types/node": "6.0.112",
     "@types/react": "0.14.57",
     "babel-core": "6.26.3",
-    "babel-eslint": "6.1.2",
+    "babel-eslint": "^7",
     "babel-loader": "^7.0.0",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.1",
@@ -85,12 +85,12 @@
     "babel-preset-stage-0": "6.24.1",
     "css-loader": "0.28.11",
     "enzyme-adapter-react-16": "^1.7.1",
-    "eslint": "3.19.0",
-    "eslint-config-airbnb": "12.0.0",
+    "eslint": "^4",
+    "eslint-config-airbnb": "^15",
     "eslint-import-resolver-webpack": "0.10.0",
-    "eslint-plugin-import": "1.16.0",
-    "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "6.10.3",
+    "eslint-plugin-import": "^2",
+    "eslint-plugin-jsx-a11y": "^5",
+    "eslint-plugin-react": "^7",
     "expose-loader": "0.7.5",
     "file-loader": "^4.1.0",
     "html-webpack-plugin": "^3.2.0",