Add eslint rule for checking React Hooks best practices. (#33901)

* Rename Console's useResizeChecker to applyResizeCheckerToEditors, to bypass greedy react-hooks lint rule.

package.json

@@ -346,6 +346,7 @@
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "faker": "1.1.0",
     "fetch-mock": "7.3.0",
     "geckodriver": "1.12.2",

packages/eslint-config-kibana/.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'mocha',
     'babel',
     'react',
+    'react-hooks',
     'import',
     'no-unsanitized',
     'prefer-object-spread',
@@ -127,6 +128,8 @@ module.exports = {
       arrow: true,
     }],
     'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
+    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
     'jsx-a11y/accessible-emoji': 'error',
     'jsx-a11y/alt-text': 'error',
     'jsx-a11y/anchor-has-content': 'error',

packages/eslint-config-kibana/package.json

@@ -24,6 +24,7 @@
     "eslint-plugin-mocha": "^5.3.0",
     "eslint-plugin-no-unsanitized": "^3.0.2",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
-    "eslint-plugin-react": "^7.12.4"
+    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.6.0"
   }
 }

src/legacy/core_plugins/console/public/src/controllers/sense_controller.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 import 'ui/doc_title';
-import { useResizeChecker } from '../sense_editor_resize';
+import { applyResizeCheckerToEditors } from '../sense_editor_resize';
 import $ from 'jquery';
 import { initializeInput } from '../input';
 import { initializeOutput } from '../output';
@@ -30,7 +30,7 @@ const module = require('ui/modules').get('app/sense');
 
 module.run(function (Private, $rootScope) {
   module.setupResizeCheckerForRootEditors = ($el, ...editors) => {
-    return useResizeChecker($rootScope, $el, ...editors);
+    return applyResizeCheckerToEditors($rootScope, $el, ...editors);
   };
 });
 

src/legacy/core_plugins/console/public/src/directives/sense_help_example.js

@@ -19,7 +19,7 @@
 
 const SenseEditor = require('../sense_editor/editor');
 const exampleText = require('raw-loader!./helpExample.txt').trim();
-import { useResizeChecker } from '../sense_editor_resize';
+import { applyResizeCheckerToEditors } from '../sense_editor_resize';
 
 require('ui/modules')
   .get('app/sense')
@@ -29,7 +29,7 @@ require('ui/modules')
       link: function ($scope, $el) {
         $el.text(exampleText);
         $scope.editor = new SenseEditor($el);
-        useResizeChecker($scope, $el, $scope.editor);
+        applyResizeCheckerToEditors($scope, $el, $scope.editor);
         $scope.editor.setReadOnly(true);
         $scope.editor.$blockScrolling = Infinity;
 

src/legacy/core_plugins/console/public/src/directives/sense_history_viewer.js

@@ -19,7 +19,7 @@
 
 const SenseEditor = require('../sense_editor/editor');
 
-import { useResizeChecker } from '../sense_editor_resize';
+import { applyResizeCheckerToEditors } from '../sense_editor_resize';
 
 require('ui/modules')
   .get('app/sense')
@@ -33,7 +33,7 @@ require('ui/modules')
         const viewer = new SenseEditor($el);
         viewer.setReadOnly(true);
         viewer.renderer.setShowPrintMargin(false);
-        useResizeChecker($scope, $el, viewer);
+        applyResizeCheckerToEditors($scope, $el, viewer);
         require('../settings').applyCurrentSettings(viewer);
 
         $scope.$watch('req', function (req) {

src/legacy/core_plugins/console/public/src/sense_editor_resize.js

@@ -19,7 +19,7 @@
 
 import { ResizeChecker } from 'ui/resize_checker';
 
-export function useResizeChecker($scope, $el, ...editors) {
+export function applyResizeCheckerToEditors($scope, $el, ...editors) {
   const checker = new ResizeChecker($el);
   checker.on('resize', () => editors.forEach(e => e.resize()));
   $scope.$on('$destroy', () => checker.destroy());

yarn.lock

@@ -8609,6 +8609,11 @@ eslint-plugin-prettier@^3.0.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-react-hooks@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz#348efcda8fb426399ac7b8609607c7b4025a6f5f"
+  integrity sha512-lHBVRIaz5ibnIgNG07JNiAuBUeKhEf8l4etNx5vfAEwqQ5tcuK3jV9yjmopPgQDagQb7HwIuQVsE3IVcGrRnag==
+
 eslint-plugin-react@^7.12.4:
   version "7.12.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz#b1ecf26479d61aee650da612e425c53a99f48c8c"