patch.diff

diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteActions.js b/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteActions.js
index 9d59f9650..4a83eecd2 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteActions.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteActions.js
@@ -10,8 +10,12 @@ import {
 } from './AutoCompleteConstants';
 import { objectDeepTrim } from '../../common/helpers';
 
-export const getResults =
-(path, searchQuery, controller, trigger) => (dispatch) => {
+export const getResults = (
+  path,
+  searchQuery,
+  controller,
+  trigger,
+) => (dispatch) => {
   const loadNextResults = trigger === TRIGGERS.ITEM_SELECT ? '+' : '';
   const url = `${path}${URI.encodeQuery(searchQuery)}${loadNextResults}`;
 
@@ -43,14 +47,15 @@ export const getResults =
         },
       });
     })
-    .catch(error => dispatch({
-      type: AUTO_COMPLETE_FAILURE,
-      payload: {
-        results: [],
-        error: error.message || error,
-        status: STATUS.ERROR,
-      },
-    }));
+    .catch(error =>
+      dispatch({
+        type: AUTO_COMPLETE_FAILURE,
+        payload: {
+          results: [],
+          error: error.message || error,
+          status: STATUS.ERROR,
+        },
+      }));
 };
 
 export const resetData = controller => dispatch =>
@@ -60,7 +65,6 @@ export const resetData = controller => dispatch =>
     error: null,
   });
 
-
 export const initialUpdate = (searchQuery, controller) => dispatch =>
   dispatch({
     type: AUTO_COMPLETE_SUCCESS,
@@ -72,4 +76,3 @@ export const initialUpdate = (searchQuery, controller) => dispatch =>
       results: [],
     },
   });
-
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteReducer.js b/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteReducer.js
index fd5a03918..931ed3c53 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteReducer.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteReducer.js
@@ -19,12 +19,7 @@ export default (state = initialState, action) => {
   const {
     type,
     payload: {
-      controller,
-      error,
-      results,
-      searchQuery,
-      status,
-      trigger,
+      controller, error, results, searchQuery, status, trigger,
     } = {},
   } = action;
   switch (type) {
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoComplete.test.js b/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoComplete.test.js
index f22fb1093..136ab24a7 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoComplete.test.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoComplete.test.js
@@ -28,13 +28,13 @@ describe('AutoComplete', () => {
     it('initial query should update query on componentDidMount', () => {
       const initialQuery = 'test';
       const props = getProps();
-      mount(<AutoComplete {...props} initialQuery={initialQuery}/>);
+      mount(<AutoComplete {...props} initialQuery={initialQuery} />);
       expect(props.initialUpdate.mock.calls.length).toBe(1);
     });
 
     it('input focus should call getResults', () => {
       const props = getProps();
-      const component = mount(<AutoComplete {...props} results={[]}/>);
+      const component = mount(<AutoComplete {...props} results={[]} />);
       const instance = component.instance();
       const emptyEvent = { target: { value: '' } };
       expect(props.getResults.mock.calls.length).toBe(0);
@@ -44,18 +44,20 @@ describe('AutoComplete', () => {
 
     it('pressing "forward-slash" should trigger focus', () => {
       const props = getProps();
-      const component = mount(<AutoComplete {...props}/>);
+      const component = mount(<AutoComplete {...props} />);
       const typeahead = component.instance()._typeahead.current.getInstance();
       typeahead.focus = jest.fn();
       expect(typeahead.focus.mock.calls.length).toBe(0);
-      const event = new KeyboardEvent('keypress', { keyCode: KEYCODES.FWD_SLASH });
+      const event = new KeyboardEvent('keypress', {
+        keyCode: KEYCODES.FWD_SLASH,
+      });
       global.dispatchEvent(event);
       expect(typeahead.focus.mock.calls.length).toBe(1);
     });
 
     it('pressing "ESC" should trigger blur', () => {
       const props = getProps();
-      const component = mount(<AutoComplete {...props}/>);
+      const component = mount(<AutoComplete {...props} />);
       const instance = component.instance();
       const typeahead = instance._typeahead.current.getInstance();
       typeahead.blur = jest.fn();
@@ -66,7 +68,7 @@ describe('AutoComplete', () => {
 
     it('"Enter" keydown should trigger handle search', () => {
       const props = getProps();
-      const component = mount(<AutoComplete {...props}/>);
+      const component = mount(<AutoComplete {...props} />);
       const instance = component.instance();
       expect(props.handleSearch.mock.calls.length).toBe(0);
       instance.handleKeyDown({ keyCode: KEYCODES.ENTER });
@@ -75,7 +77,7 @@ describe('AutoComplete', () => {
 
     it('input change should call getResult', () => {
       const props = getProps();
-      const component = mount(<AutoComplete {...props}/>);
+      const component = mount(<AutoComplete {...props} />);
       const instance = component.instance();
       expect(props.getResults.mock.calls.length).toBe(0);
       instance.handleInputChange();
@@ -84,7 +86,7 @@ describe('AutoComplete', () => {
 
     it('resetData should be called once', () => {
       const props = getProps();
-      const component = mount(<AutoComplete {...props}/>);
+      const component = mount(<AutoComplete {...props} />);
       expect(props.resetData.mock.calls.length).toBe(0);
       component.instance().componentWillUnmount();
       expect(props.resetData.mock.calls.length).toBe(1);
@@ -92,15 +94,18 @@ describe('AutoComplete', () => {
 
     it('clear button click should call getResult', () => {
       const props = getProps();
-      const component = mount(<AutoComplete {...props}/>);
+      const component = mount(<AutoComplete {...props} />);
       expect(props.getResults.mock.calls.length).toBe(0);
-      component.find('.autocomplete-clear-button').first().simulate('click');
+      component
+        .find('.autocomplete-clear-button')
+        .first()
+        .simulate('click');
       expect(props.getResults.mock.calls.length).toBe(1);
     });
 
     it('handleResultsChange should call getResult', () => {
       const props = getProps();
-      const component = mount(<AutoComplete {...props}/>);
+      const component = mount(<AutoComplete {...props} />);
       const instance = component.instance();
       expect(props.getResults.mock.calls.length).toBe(0);
       instance.handleResultsChange(props.results);
@@ -112,7 +117,7 @@ describe('AutoComplete', () => {
 
     it('menu should be hidden if no results', () => {
       const props = { ...getProps() };
-      const component = mount(<AutoComplete {...props} results={[]}/>);
+      const component = mount(<AutoComplete {...props} results={[]} />);
       const mainInput = component.find('.rbt-input-main').first();
       mainInput.simulate('focus', { target: { value: '' } });
       expect(component.find('.rbt-menu').exists()).toBeFalsy();
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteActions.test.js b/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteActions.test.js
index dc7e53444..a81e3f930 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteActions.test.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteActions.test.js
@@ -1,15 +1,17 @@
 import API from '../../../API';
 import { testActionSnapshotWithFixtures } from '../../../common/testHelpers';
+import { getResults, resetData, initialUpdate } from '../AutoCompleteActions';
 import {
-  getResults,
-  resetData,
-  initialUpdate,
-} from '../AutoCompleteActions';
-import { APIFailMock, searchQuery, controller, url, trigger, APISuccessMock } from '../AutoComplete.fixtures';
+  APIFailMock,
+  searchQuery,
+  controller,
+  url,
+  trigger,
+  APISuccessMock,
+} from '../AutoComplete.fixtures';
 
 jest.mock('../../../API');
 
-
 const loadResults = (requestParams, serverMock) => {
   API.get.mockImplementation(serverMock);
 
@@ -17,15 +19,23 @@ const loadResults = (requestParams, serverMock) => {
 };
 
 const fixtures = {
-  'should update store with initial data': () => initialUpdate('searchQuery', controller),
+  'should update store with initial data': () =>
+    initialUpdate('searchQuery', controller),
 
   'should load results and success': () =>
-    loadResults([url, searchQuery, controller, trigger], async () => APISuccessMock),
+    loadResults(
+      [url, searchQuery, controller, trigger],
+      async () => APISuccessMock,
+    ),
 
   'should load results and fail': () =>
-    loadResults(['x = y', searchQuery, controller, trigger], async () => APIFailMock),
+    loadResults(
+      ['x = y', searchQuery, controller, trigger],
+      async () => APIFailMock,
+    ),
 
   'should reset-data': () => resetData(controller),
 };
 
-describe('AutoComplete actions', () => testActionSnapshotWithFixtures(fixtures));
+describe('AutoComplete actions', () =>
+  testActionSnapshotWithFixtures(fixtures));
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteReducer.test.js b/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteReducer.test.js
index 6cd151d49..1799c6847 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteReducer.test.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteReducer.test.js
@@ -43,4 +43,5 @@ const fixtures = {
   },
 };
 
-describe('AutoComplete reducer', () => testReducerSnapshotWithFixtures(reducer, fixtures));
+describe('AutoComplete reducer', () =>
+  testReducerSnapshotWithFixtures(reducer, fixtures));
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/auto-complete.scss b/webpack/assets/javascripts/react_app/components/AutoComplete/auto-complete.scss
index ff65f9c6b..d4475a220 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/auto-complete.scss
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/auto-complete.scss
@@ -1,5 +1,5 @@
-@import '~patternfly/dist/sass/patternfly/_color-variables.scss';
-@import '~patternfly-react/dist/sass/_type-ahead-select.scss';
+@import "~patternfly/dist/sass/patternfly/_color-variables.scss";
+@import "~patternfly-react/dist/sass/_type-ahead-select.scss";
 
 .search-bar {
   .autocomplete-aux {
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteAux.js b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteAux.js
index 9fc6140fa..f3567e3e9 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteAux.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteAux.js
@@ -3,11 +3,17 @@ import AutoCompleteClearButton from './AutoCompleteClearButton';
 import AutoCompleteFocusShortcut from './AutoCompleteFocusShortcut';
 
 const AutoCompleteAux = ({
-  useKeyShortcuts, onClear, clearTooltipID, focusTooltipID,
+  useKeyShortcuts,
+  onClear,
+  clearTooltipID,
+  focusTooltipID,
 }) => (
   <div className="autocomplete-aux">
-    <AutoCompleteClearButton onClear={onClear} tooltipID={clearTooltipID}/>
-    <AutoCompleteFocusShortcut useKeyShortcuts={useKeyShortcuts} tooltipID={focusTooltipID}/>
+    <AutoCompleteClearButton onClear={onClear} tooltipID={clearTooltipID} />
+    <AutoCompleteFocusShortcut
+      useKeyShortcuts={useKeyShortcuts}
+      tooltipID={focusTooltipID}
+    />
   </div>
 );
 
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteClearButton.js b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteClearButton.js
index 380cd2b9d..d01ae7bb2 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteClearButton.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteClearButton.js
@@ -4,17 +4,20 @@ import UUID from 'uuid/v1';
 import { Icon, OverlayTrigger, Tooltip } from 'patternfly-react';
 import { noop } from '../../../common/helpers';
 
-
 const AutoCompleteClearButton = ({ onClear, tooltipID }) => {
-  const tooltip = (<Tooltip id={tooltipID}>{__('Clear')}</Tooltip>);
+  const tooltip = <Tooltip id={tooltipID}>{__('Clear')}</Tooltip>;
   return (
-  <OverlayTrigger overlay={tooltip} placement="top" trigger={['hover', 'focus']}>
-    <Icon
-      name="close"
-      className="autocomplete-clear-button"
-      onClick={onClear}
-    />
-  </OverlayTrigger>
+    <OverlayTrigger
+      overlay={tooltip}
+      placement="top"
+      trigger={['hover', 'focus']}
+    >
+      <Icon
+        name="close"
+        className="autocomplete-clear-button"
+        onClick={onClear}
+      />
+    </OverlayTrigger>
   );
 };
 
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteFocusShortcut.js b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteFocusShortcut.js
index 76decb509..cf8a6d060 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteFocusShortcut.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteFocusShortcut.js
@@ -4,13 +4,25 @@ import UUID from 'uuid/v1';
 import cx from 'classnames';
 import { OverlayTrigger, Tooltip } from 'patternfly-react';
 
-
 const AutoCompleteFocusShortcut = ({ useKeyShortcuts, tooltipID }) => {
-  const tooltip = useKeyShortcuts && (<Tooltip id={tooltipID}>{__("Press ' / ' to focus on search")}</Tooltip>);
+  const tooltip = useKeyShortcuts && (
+    <Tooltip id={tooltipID}>{__("Press ' / ' to focus on search")}</Tooltip>
+  );
   return (
-  <OverlayTrigger overlay={tooltip} placement="top" trigger={['hover', 'focus']}>
-    <span className={cx('autocomplete-focus-shortcut', !useKeyShortcuts ? 'hide' : '')}>/</span>
-  </OverlayTrigger>
+    <OverlayTrigger
+      overlay={tooltip}
+      placement="top"
+      trigger={['hover', 'focus']}
+    >
+      <span
+        className={cx(
+          'autocomplete-focus-shortcut',
+          !useKeyShortcuts ? 'hide' : '',
+        )}
+      >
+        /
+      </span>
+    </OverlayTrigger>
   );
 };
 
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteMenu.js b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteMenu.js
index 059ee4b2b..983a7d86c 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteMenu.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteMenu.js
@@ -9,22 +9,26 @@ const { Menu, MenuItem } = TypeAheadSelect;
 const AutoCompleteMenu = ({ results, menuProps }) => {
   let itemIndex = 0;
   const grouped = groupBy(results, r => r.category);
-  const getMenuItemsByCategory = category => grouped[category].map((result) => {
-    itemIndex += 1;
-    return (
-    <MenuItem key={itemIndex} option={result.label} position={itemIndex}>
-      <SubstringWrapper substring={menuProps.text}>
-        {result.label}
-      </SubstringWrapper>
-    </MenuItem>);
-  });
-  const items = Object.keys(grouped).sort().map(category => (
-    <React.Fragment key={`${category}-fragment`}>
-      {!!itemIndex && <Menu.Divider key={`${category}-divider`} />}
-      <Menu.Header key={`${category}-header`}>{category}</Menu.Header>
-     { getMenuItemsByCategory(category)}
-    </React.Fragment>
-  ));
+  const getMenuItemsByCategory = category =>
+    grouped[category].map((result) => {
+      itemIndex += 1;
+      return (
+        <MenuItem key={itemIndex} option={result.label} position={itemIndex}>
+          <SubstringWrapper substring={menuProps.text}>
+            {result.label}
+          </SubstringWrapper>
+        </MenuItem>
+      );
+    });
+  const items = Object.keys(grouped)
+    .sort()
+    .map(category => (
+      <React.Fragment key={`${category}-fragment`}>
+        {!!itemIndex && <Menu.Divider key={`${category}-divider`} />}
+        <Menu.Header key={`${category}-header`}>{category}</Menu.Header>
+        {getMenuItemsByCategory(category)}
+      </React.Fragment>
+    ));
   return <Menu {...menuProps}>{items}</Menu>;
 };
 
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteSearchButton.js b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteSearchButton.js
index 3935a6ddc..fc600a98b 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteSearchButton.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteSearchButton.js
@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import { Button, Col, Icon } from 'patternfly-react';
 
 const SearchButton = ({ className, ...props }) => (
-    <Button
-        {...props}
-        className={`autocomplete-search-btn ${className}`}>
-        <Icon name="search" />
-        <Col className="autocomplete-search-btn-text" xsHidden>&nbsp;{__('Search')}</Col>
-    </Button>
+  <Button {...props} className={`autocomplete-search-btn ${className}`}>
+    <Icon name="search" />
+    <Col className="autocomplete-search-btn-text" xsHidden>
+      &nbsp;
+      {__('Search')}
+    </Col>
+  </Button>
 );
 
 SearchButton.propTypes = {
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/index.js b/webpack/assets/javascripts/react_app/components/AutoComplete/index.js
index 7f4c330a2..fd0f4077d 100644
--- a/webpack/assets/javascripts/react_app/components/AutoComplete/index.js
+++ b/webpack/assets/javascripts/react_app/components/AutoComplete/index.js
@@ -13,7 +13,16 @@ import './auto-complete.scss';
 class AutoComplete extends React.Component {
   constructor(props) {
     super(props);
-    bindMethods(this, ['handleClear', 'handleInputChange', 'handleResultsChange', 'handleInputFocus', 'getResults', 'windowKeyPressHandler', 'unableHTMLAutocomplete', 'handleKeyDown']);
+    bindMethods(this, [
+      'handleClear',
+      'handleInputChange',
+      'handleResultsChange',
+      'handleInputFocus',
+      'getResults',
+      'windowKeyPressHandler',
+      'unableHTMLAutocomplete',
+      'handleKeyDown',
+    ]);
     debounceMethods(this, 250, ['handleInputChange', 'handleLoading']);
     debounceMethods(this, 125, ['handleInputFocus']);
     this._typeahead = React.createRef();
@@ -21,9 +30,7 @@ class AutoComplete extends React.Component {
 
   componentDidMount() {
     window.addEventListener('keypress', this.windowKeyPressHandler);
-    const {
-      controller, initialQuery, initialUpdate,
-    } = this.props;
+    const { controller, initialQuery, initialUpdate } = this.props;
     initialUpdate(initialQuery, controller);
     this.unableHTMLAutocomplete();
   }
@@ -53,7 +60,8 @@ class AutoComplete extends React.Component {
   }
 
   unableHTMLAutocomplete() {
-    const input = this._typeahead.current &&
+    const input =
+      this._typeahead.current &&
       this._typeahead.current.getInstance().getInput();
     if (input) {
       input.autocomplete = 'off';
@@ -61,9 +69,7 @@ class AutoComplete extends React.Component {
   }
 
   getResults(query, trigger) {
-    const {
-      getResults, controller, url,
-    } = this.props;
+    const { getResults, controller, url } = this.props;
     getResults(url, query, controller, trigger);
   }
 
@@ -84,9 +90,9 @@ class AutoComplete extends React.Component {
     }
     this.getResults(result, TRIGGERS.ITEM_SELECT);
     /**
-       *  HACK: I had no choice but to call to an inner function,
-       * due to lack of design in react-bootstrap-typeahead.
-        */
+     *  HACK: I had no choice but to call to an inner function,
+     * due to lack of design in react-bootstrap-typeahead.
+     */
     this._typeahead.current.getInstance()._showMenu();
   }
 
@@ -149,8 +155,14 @@ class AutoComplete extends React.Component {
           onKeyDown={this.handleKeyDown}
           emptyLabel={emptyLabel}
           placeholder={__(placeholder)}
-          renderMenu={(r, menuProps) => <AutoCompleteMenu {...{ results: r, menuProps }} />}
-          inputProps={{ className: 'search-input', spellCheck: 'false', ...inputProps }}
+          renderMenu={(r, menuProps) => (
+            <AutoCompleteMenu {...{ results: r, menuProps }} />
+          )}
+          inputProps={{
+            className: 'search-input',
+            spellCheck: 'false',
+            ...inputProps,
+          }}
         />
         <AutoCompleteAux
           onClear={this.handleClear}
@@ -158,7 +170,7 @@ class AutoComplete extends React.Component {
           focusTooltipID={focusTooltipID}
           useKeyShortcuts={useKeyShortcuts}
         />
-        <AutoCompleteError error={error}/>
+        <AutoCompleteError error={error} />
       </div>
     );
   }
diff --git a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.js b/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.js
index 9150b32da..a96cef92a 100644
--- a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.js
+++ b/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.js
@@ -27,18 +27,14 @@ const SearchBar = ({
   resetData,
   getResults,
   initialUpdate,
-  data: {
-    autocomplete,
-    controller,
-    bookmarks,
-  },
+  data: { autocomplete, controller, bookmarks },
   ...props
 }) => {
-  const bookmarksComponent = !isEmpty(bookmarks) ?
-    <Bookmarks data={ { ...bookmarks, controller, searchQuery } } /> :
-    null;
+  const bookmarksComponent = !isEmpty(bookmarks) ? (
+    <Bookmarks data={{ ...bookmarks, controller, searchQuery }} />
+  ) : null;
   return (
-  <div className={`search-bar input-group ${className}`}>
+    <div className={`search-bar input-group ${className}`}>
       <AutoComplete
         {...props}
         controller={controller}
@@ -55,10 +51,12 @@ const SearchBar = ({
         useKeyShortcuts={autocomplete.useKeyShortcuts}
       />
       <div className="input-group-btn">
-        <AutoComplete.SearchButton onClick={() => handleSearch(searchQuery, onSearch)}/>
+        <AutoComplete.SearchButton
+          onClick={() => handleSearch(searchQuery, onSearch)}
+        />
         {bookmarksComponent}
       </div>
-  </div>
+    </div>
   );
 };
 
diff --git a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.stories.js b/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.stories.js
index 5b643d924..7c6390409 100644
--- a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.stories.js
+++ b/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.stories.js
@@ -17,12 +17,14 @@ mock.onGet(someAutoCompletePath).reply(({ url }) => {
   return [200, results || []];
 });
 
-storiesOf('Components/SearchBar', module)
-  .add('Search Bar with mock data', () => (
-      <Provider store={Store}>
-        <div style={storyStyle}>
-          <h4>Try typing something like: "name = "</h4>
-          <SearchBar data={SearchBarProps.data}/>
-        </div>
-      </Provider>
-  ));
+storiesOf('Components/SearchBar', module).add(
+  'Search Bar with mock data',
+  () => (
+    <Provider store={Store}>
+      <div style={storyStyle}>
+        <h4>Try typing something like: "name = "</h4>
+        <SearchBar data={SearchBarProps.data} />
+      </div>
+    </Provider>
+  ),
+);
diff --git a/webpack/assets/javascripts/react_app/components/SearchBar/__tests__/integration.test.js b/webpack/assets/javascripts/react_app/components/SearchBar/__tests__/integration.test.js
index 855f1844c..6debe62c0 100644
--- a/webpack/assets/javascripts/react_app/components/SearchBar/__tests__/integration.test.js
+++ b/webpack/assets/javascripts/react_app/components/SearchBar/__tests__/integration.test.js
@@ -17,9 +17,11 @@ const combinedReducers = { ...reducers, bookmarks: bookmarksReducer };
 describe('SearchBar integration test', () => {
   it('should flow', async () => {
     const label = 'result';
-    API.get.mockImplementation(async () => ({ data: [{ label, category: '' }] }));
+    API.get.mockImplementation(async () => ({
+      data: [{ label, category: '' }],
+    }));
     const integrationTestHelper = new IntegrationTestHelper(combinedReducers);
-    const wrapper = integrationTestHelper.mount(<SearchBar {...SearchBarProps}/>);
+    const wrapper = integrationTestHelper.mount(<SearchBar {...SearchBarProps} />,);
     const AutoCompleteInstance = wrapper.find('AutoComplete').instance();
     const mainInput = wrapper.find('.rbt-input-main').first();
     const menuItemsShouldMatchSecondAPIcall = () => {
@@ -39,7 +41,7 @@ describe('SearchBar integration test', () => {
     expect(wrapper.find('.rbt-loader').exists()).toBeTruthy();
     await IntegrationTestHelper.flushAllPromises();
     wrapper.update();
-    integrationTestHelper.takeStoreAndLastActionSnapshot('request that was triggered by focus is over');
+    integrationTestHelper.takeStoreAndLastActionSnapshot('request that was triggered by focus is over',);
     // Because request status is not PENDING, check if the loading spinner disappeared.
     expect(wrapper.find('.rbt-loader').exists()).toBeFalsy();
     // Trigger Focus
@@ -60,26 +62,32 @@ describe('SearchBar integration test', () => {
     integrationTestHelper.takeStoreAndLastActionSnapshot('option selected');
     await IntegrationTestHelper.flushAllPromises();
     wrapper.update();
-    integrationTestHelper.takeStoreAndLastActionSnapshot('request that was triggered by option select is over');
+    integrationTestHelper.takeStoreAndLastActionSnapshot('request that was triggered by option select is over',);
     // expect input text to be the same as the selected option(label).
     expect(AutoCompleteInstance.props.searchQuery).toBe(label);
     // expect menu to be open and to be built correctly
     menuItemsShouldMatchSecondAPIcall();
     // Simulate clear
-    wrapper.find('.autocomplete-clear-button').first().simulate('click');
-    integrationTestHelper.takeStoreAndLastActionSnapshot('Clear button clicked');
+    wrapper
+      .find('.autocomplete-clear-button')
+      .first()
+      .simulate('click');
+    integrationTestHelper.takeStoreAndLastActionSnapshot('Clear button clicked',);
     // Because it detects that it was searched earlier, no API request will be made,
     // and menu items should be the first menu Items.
     expect(menuItem.text()).toBe(label);
     // trigger menu item click.
     menuItem.simulate('click');
-    integrationTestHelper.takeStoreAndLastActionSnapshot('option selected again');
+    integrationTestHelper.takeStoreAndLastActionSnapshot('option selected again',);
     // same request as before, no need of another API request.
     // menu items should be the same as in the second API call.
     menuItemsShouldMatchSecondAPIcall();
     // trigger search button click.
-    wrapper.find('.autocomplete-search-btn').first().simulate('click');
-    integrationTestHelper.takeStoreAndLastActionSnapshot('Clicked the search button');
+    wrapper
+      .find('.autocomplete-search-btn')
+      .first()
+      .simulate('click');
+    integrationTestHelper.takeStoreAndLastActionSnapshot('Clicked the search button',);
     // expect it to call Turbolinks.
     expect(global.Turbolinks.visit.mock.calls.length).toBe(1);
     const event = new KeyboardEvent('keypress', { keyCode: 13 });
@@ -87,12 +95,21 @@ describe('SearchBar integration test', () => {
     expect(global.Turbolinks.visit.mock.calls.length).toBe(2);
     // bookmark this page:
     // click on bookmark button
-    wrapper.find('button[title="Bookmarks"]').first().simulate('click');
-    integrationTestHelper.takeStoreAndLastActionSnapshot('bookmarks button click');
+    wrapper
+      .find('button[title="Bookmarks"]')
+      .first()
+      .simulate('click');
+    integrationTestHelper.takeStoreAndLastActionSnapshot('bookmarks button click',);
     // dropdown should open, lets click on 'Bookmark this page'
-    wrapper.find('a[id="newBookmark"]').first().simulate('click');
-    integrationTestHelper.takeStoreAndLastActionSnapshot('in bookmarks dropdown: click on "bookmark this page"');
+    wrapper
+      .find('a[id="newBookmark"]')
+      .first()
+      .simulate('click');
+    integrationTestHelper.takeStoreAndLastActionSnapshot('in bookmarks dropdown: click on "bookmark this page"',);
     // modal should open, lets check its query value
-    expect(wrapper.find('ConnectedField').at(1).props().initial).toBe(label);
+    expect(wrapper
+        .find('ConnectedField')
+        .at(1)
+        .props().initial,).toBe(label);
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/SearchBar/index.js b/webpack/assets/javascripts/react_app/components/SearchBar/index.js
index 267569434..7ead7e7f3 100644
--- a/webpack/assets/javascripts/react_app/components/SearchBar/index.js
+++ b/webpack/assets/javascripts/react_app/components/SearchBar/index.js
@@ -6,10 +6,7 @@ import SearchBar from './SearchBar';
 
 const mapStateToProps = ({
   autocomplete: {
-    error,
-    results,
-    searchQuery,
-    status,
+    error, results, searchQuery, status,
   },
 }) => ({
   error,