Change eslint configuration and fix resulting issues (#4423)

* Remove app/service/query-string (unused) and its dependency.

* Fix usage of mixed operators.

* eslint --fix fixes for missing dependencies for react hooks

* Fix: useCallback dependency passed to $http's .catch.

* Satisfy react/no-direct-mutation-state.

* Fix no-mixed-operators violations.

* Move the decision of whether to render Custom chart one level up to make sure hooks are called in the same order.

* Fix: name was undefined. It wasn't detected before because there is such global.

* Simplify eslint config and switch to creat-react-app's eslint base.

* Add prettier config.

* Make sure eslint doesn't conflict with prettier

* A few updates post eslint (#4425)

* Prettier command in package.json

client/.eslintignore

@@ -1,3 +1,4 @@
 build/*.js
+dist
 config/*.js
 client/dist

client/.eslintrc.js

@@ -1,66 +1,17 @@
 module.exports = {
  root: true,
- extends: ["airbnb", "plugin:compat/recommended"],
+ extends: ["react-app", "plugin:compat/recommended", "prettier"],
  plugins: ["jest", "compat", "no-only-tests"],
  settings: {
  "import/resolver": "webpack"
  },
- parser: "babel-eslint",
  env: {
  browser: true,
  node: true
  },
  rules: {
  // allow debugger during development
  "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
- "no-param-reassign": 0,
- "no-mixed-operators": 0,
- "no-underscore-dangle": 0,
- "no-use-before-define": ["error", "nofunc"],
- "prefer-destructuring": "off",
- "prefer-template": "off",
- "no-restricted-properties": "off",
- "no-restricted-globals": "off",
- "no-multi-assign": "off",
- "no-lonely-if": "off",
- "consistent-return": "off",
- "no-control-regex": "off",
- "no-multiple-empty-lines": "warn",
- "no-only-tests/no-only-tests": "error",
- "operator-linebreak": "off",
- "react/destructuring-assignment": "off",
- "react/jsx-filename-extension": "off",
- "react/jsx-one-expression-per-line": "off",
- "react/jsx-uses-react": "error",
- "react/jsx-uses-vars": "error",
- "react/jsx-wrap-multilines": "warn",
- "react/no-access-state-in-setstate": "warn",
- "react/prefer-stateless-function": "warn",
- "react/forbid-prop-types": "warn",
- "react/prop-types": "warn",
  "jsx-a11y/anchor-is-valid": "off",
- "jsx-a11y/click-events-have-key-events": "off",
- "jsx-a11y/label-has-associated-control": [
- "warn",
- {
- controlComponents: true
- }
- ],
- "jsx-a11y/label-has-for": "off",
- "jsx-a11y/no-static-element-interactions": "off",
- "max-len": [
- "error",
- 120,
- 2,
- {
- ignoreUrls: true,
- ignoreComments: false,
- ignoreRegExpLiterals: true,
- ignoreStrings: true,
- ignoreTemplateLiterals: true
- }
- ],
- "no-else-return": ["error", { allowElseIf: true }],
- "object-curly-newline": ["error", { consistent: true }]
  }
 };

client/app/components/EditParameterSettingsDialog.jsx

@@ -86,13 +86,13 @@ function EditParameterSettingsDialog(props) {
 
  // fetch query by id
  useEffect(() => {
- const { queryId } = props.parameter;
+ const queryId = props.parameter.queryId;
  if (queryId) {
  Query.get({ id: queryId }, (query) => {
  setInitialQuery(query);
  });
  }
- }, []);
+ }, [props.parameter.queryId]);
 
  function isFulfilled() {
  // name

client/app/components/QuerySelector.jsx

@@ -2,22 +2,15 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { react2angular } from 'react2angular';
-import { debounce, find } from 'lodash';
+import { find } from 'lodash';
 import Input from 'antd/lib/input';
 import Select from 'antd/lib/select';
 import { Query } from '@/services/query';
 import notification from '@/services/notification';
 import { QueryTagsControl } from '@/components/tags-control/TagsControl';
+import useSearchResults from '@/lib/hooks/useSearchResults';
 
-const SEARCH_DEBOUNCE_DURATION = 200;
 const { Option } = Select;
-
-class StaleSearchError extends Error {
- constructor() {
- super('stale search');
- }
-}
-
 function search(term) {
  // get recent
  if (!term) {
@@ -34,61 +27,23 @@ function search(term) {
 }
 
 export function QuerySelector(props) {
- const [searchTerm, setSearchTerm] = useState();
- const [searching, setSearching] = useState();
- const [searchResults, setSearchResults] = useState([]);
+ const [searchTerm, setSearchTerm] = useState('');
  const [selectedQuery, setSelectedQuery] = useState();
+ const [doSearch, searchResults, searching] = useSearchResults(search, { initialResults: [] });
 
- let isStaleSearch = false;
- const debouncedSearch = debounce(_search, SEARCH_DEBOUNCE_DURATION);
  const placeholder = 'Search a query by name';
  const clearIcon = <i className="fa fa-times hide-in-percy" onClick={() => selectQuery(null)} />;
  const spinIcon = <i className={cx('fa fa-spinner fa-pulse hide-in-percy', { hidden: !searching })} />;
 
+ useEffect(() => { doSearch(searchTerm); }, [doSearch, searchTerm]);
+
  // set selected from prop
  useEffect(() => {
  if (props.selectedQuery) {
  setSelectedQuery(props.selectedQuery);
  }
  }, [props.selectedQuery]);
 
- // on search term changed, debounced
- useEffect(() => {
- // clear results, no search
- if (searchTerm === null) {
- setSearchResults(null);
- return () => {};
- }
-
- // search
- debouncedSearch(searchTerm);
- return () => {
- debouncedSearch.cancel();
- isStaleSearch = true;
- };
- }, [searchTerm]);
-
- function _search(term) {
- setSearching(true);
- search(term)
- .then(rejectStale)
- .then((results) => {
- setSearchResults(results);
- setSearching(false);
- })
- .catch((err) => {
- if (!(err instanceof StaleSearchError)) {
- setSearching(false);
- }
- });
- }
-
- function rejectStale(results) {
- return isStaleSearch
- ? Promise.reject(new StaleSearchError())
- : Promise.resolve(results);
- }
-
  function selectQuery(queryId) {
  let query = null;
  if (queryId) {

client/app/components/TimeAgo.jsx

@@ -26,7 +26,7 @@ export function TimeAgo({ date, placeholder, autoUpdate }) {
  const timer = setInterval(forceUpdate, 30 * 1000);
  return () => clearInterval(timer);
  }
- }, [autoUpdate]);
+ }, [autoUpdate, forceUpdate]);
 
  return (
  <Tooltip title={title}>

client/app/components/Timer.jsx

@@ -12,7 +12,7 @@ export function Timer({ from }) {
  useEffect(() => {
  const timer = setInterval(forceUpdate, 1000);
  return () => clearInterval(timer);
- }, []);
+ }, [forceUpdate]);
 
  const diff = moment.now() - startTime;
  const format = diff > 1000 * 60 * 60 ? 'HH:mm:ss' : 'mm:ss'; // no HH under an hour

client/app/components/app-header/components/FavoritesDropdown.jsx

@@ -27,7 +27,9 @@ export default function FavoritesDropdown({ fetch, urlTemplate }) {
  }, [fetch]);
 
  // fetch items on init
- useEffect(() => fetchItems(false), []);
+ useEffect(() => {
+ fetchItems(false);
+ }, [fetchItems]);
 
  // fetch items on click
  const onVisibleChange = visible => visible && fetchItems();

client/app/components/dynamic-form/DynamicForm.jsx

@@ -58,22 +58,22 @@ class DynamicForm extends React.Component {
 
  const hasFilledExtraField = some(props.fields, (field) => {
  const { extra, initialValue } = field;
- return extra && (!isEmpty(initialValue) || isNumber(initialValue) || isBoolean(initialValue) && initialValue);
+ return extra && (!isEmpty(initialValue) || isNumber(initialValue) || (isBoolean(initialValue) && initialValue));
  });
+
+ const inProgressActions = {};
+ props.actions.forEach(action => inProgressActions[action.name] = false);
+
  this.state = {
  isSubmitting: false,
- inProgressActions: [],
  showExtraFields: hasFilledExtraField,
+ inProgressActions
  };
 
  this.actionCallbacks = this.props.actions.reduce((acc, cur) => ({
  ...acc,
  [cur.name]: cur.callback,
  }), null);
-
- props.actions.forEach((action) => {
- this.state.inProgressActions[action.name] = false;
- });
  }
 
  setActionInProgress = (actionName, inProgress) => {

client/app/components/permissions-editor/PermissionsEditorDialog.jsx

@@ -34,7 +34,7 @@ function useGrantees(url) {
 
  const addPermission = useCallback((userId, accessType = 'modify') => $http.post(
  url, { access_type: accessType, user_id: userId },
- ).catch(() => notification.error('Could not grant permission to the user'), [url]));
+ ).catch(() => notification.error('Could not grant permission to the user')), [url]);
 
  const removePermission = useCallback((userId, accessType = 'modify') => $http.delete(
  url, { data: { access_type: accessType, user_id: userId } },
@@ -77,7 +77,7 @@ function UserSelect({ onSelect, shouldShowUser }) {
  useEffect(() => {
  setLoadingUsers(true);
  debouncedSearchUsers(searchTerm);
- }, [searchTerm]);
+ }, [debouncedSearchUsers, searchTerm]);
 
  return (
  <Select
@@ -117,16 +117,16 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
  .then(setGrantees)
  .catch(() => notification.error('Failed to load grantees list'))
  .finally(() => setLoadingGrantees(false));
- }, []);
+ }, [loadGrantees]);
 
  const userHasPermission = useCallback(
  user => (user.id === author.id || !!get(find(grantees, { id: user.id }), 'accessType')),
- [grantees],
+ [author.id, grantees],
  );
 
  useEffect(() => {
  loadUsersWithPermissions();
- }, [aclUrl]);
+ }, [aclUrl, loadUsersWithPermissions]);
 
  return (
  <Modal

client/app/components/users/ChangePasswordDialog.jsx

@@ -71,7 +71,7 @@ class ChangePasswordDialog extends React.Component {
  notification.success('Saved.');
  this.props.dialog.close({ success: true });
  }, (error = {}) => {
- notification.error(error.data && error.data.message || 'Failed saving.');
+ notification.error((error.data && error.data.message) || 'Failed saving.');
  this.setState({ updatingPassword: false });
  });
  } else {

client/app/components/users/UserEdit.jsx

@@ -112,7 +112,7 @@ export default class UserEdit extends React.Component {
  successCallback('Saved.');
  this.setState({ user: User.convertUserInfo(user) });
  }, (error = {}) => {
- errorCallback(error.data && error.data.message || 'Failed saving.');
+ errorCallback((error.data && error.data.message) || 'Failed saving.');
  });
  };
 

client/app/lib/hooks/useQueryResult.js

@@ -11,8 +11,8 @@ function getQueryResultData(queryResult) {
 
 export default function useQueryResult(queryResult) {
  const [data, setData] = useState(getQueryResultData(queryResult));
- let isCancelled = false;
  useEffect(() => {
+ let isCancelled = false;
  if (queryResult) {
  queryResult.toPromise()
  .then(() => {

client/app/lib/hooks/useSearchResults.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 
 export default function useSearchResults(
@@ -7,17 +7,16 @@ export default function useSearchResults(
 ) {
  const [result, setResult] = useState(initialResults);
  const [isLoading, setIsLoading] = useState(false);
-
- let currentSearchTerm = null;
- let isDestroyed = false;
+ const currentSearchTerm = useRef(null);
+ const isDestroyed = useRef(false);
 
  const [doSearch] = useDebouncedCallback((searchTerm) => {
  setIsLoading(true);
- currentSearchTerm = searchTerm;
+ currentSearchTerm.current = searchTerm;
  fetch(searchTerm)
  .catch(() => null)
  .then((data) => {
- if ((searchTerm === currentSearchTerm) && !isDestroyed) {
+ if ((searchTerm === currentSearchTerm.current) && !isDestroyed.current) {
  setResult(data);
  setIsLoading(false);
  }
@@ -26,7 +25,7 @@ export default function useSearchResults(
 
  useEffect(() => (
  // ignore all requests after component destruction
- () => { isDestroyed = true; }
+ () => { isDestroyed.current = true; }
  ), []);
 
  return [doSearch, result, isLoading];

client/app/pages/alert/components/AlertDestinations.jsx

@@ -109,7 +109,7 @@ export default class AlertDestinations extends React.Component {
  return {
  content: (
  <div className="destination-wrapper">
- <img src={`${IMG_ROOT}/${item.type}.png`} className="destination-icon" alt={name} />
+ <img src={`${IMG_ROOT}/${item.type}.png`} className="destination-icon" alt={item.name} />
  <span className="flex-fill">{item.name}</span>
  <ListItemAddon isSelected={isSelected} alreadyInGroup={alreadyInGroup} deselectedIcon="fa-plus" />
  </div>

client/app/pages/alert/components/MenuButton.jsx

@@ -34,7 +34,7 @@ export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
  maskClosable: true,
  autoFocusButton: null,
  });
- }, []);
+ }, [doDelete]);
 
  return (
  <Dropdown

client/app/pages/alert/components/Rearm.jsx

@@ -28,7 +28,7 @@ function RearmByDuration({ value, onChange, editMode }) {
  break;
  }
  }
- }, []);
+ }, [value]);
 
  if (!isNumber(count) || !isNumber(durationIdx)) {
  return null;

client/app/pages/home/Home.jsx

@@ -68,7 +68,7 @@ function FavoriteList({ title, resource, itemUrl, emptyState }) {
  resource.favorites().$promise
  .then(({ results }) => setItems(results))
  .finally(() => setLoading(false));
- }, []);
+ }, [resource]);
 
  return (
  <>

client/app/visualizations/EditVisualizationDialog.jsx

@@ -84,7 +84,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
  originalOptions: options,
  };
  },
- [visualization],
+ [data, isNew, visualization],
  );
 
  const [type, setType] = useState(defaultState.type);