Upgrade eslint to v8

.eslintrc.js

@@ -725,7 +725,7 @@ module.exports = {
     {
       files: ['**/*.test.{js,mjs,ts,tsx}'],
       rules: {
-        'jest/valid-describe': 'error',
+        'jest/valid-describe-callback': 'error',
       },
     },
 
@@ -1160,12 +1160,12 @@ module.exports = {
         'react/no-unsafe': 'error',
         'react/no-unused-prop-types': 'error',
         'react/no-unused-state': 'error',
+        'react/sort-default-props': 'error',
         'react/void-dom-elements-no-children': 'error',
         'react/jsx-no-comment-textnodes': 'error',
         'react/jsx-no-literals': 'error',
         'react/jsx-no-target-blank': 'error',
         'react/jsx-fragments': 'error',
-        'react/jsx-sort-default-props': 'error',
         'require-atomic-updates': 'error',
         'symbol-description': 'error',
         'vars-on-top': 'error',
@@ -1255,12 +1255,12 @@ module.exports = {
         'react/no-unused-prop-types': 'error',
         'react/no-unused-state': 'error',
         'react/sort-comp': 'error',
+        'react/sort-default-props': 'error',
         'react/void-dom-elements-no-children': 'error',
         'react/jsx-no-comment-textnodes': 'error',
         'react/jsx-no-literals': 'error',
         'react/jsx-no-target-blank': 'error',
         'react/jsx-fragments': 'error',
-        'react/jsx-sort-default-props': 'error',
       },
     },
     {

package.json

@@ -1242,7 +1242,7 @@
     "@types/delete-empty": "^2.0.0",
     "@types/ejs": "^3.0.6",
     "@types/enzyme": "^3.10.12",
-    "@types/eslint": "^7.28.0",
+    "@types/eslint": "^8.44.0",
     "@types/express": "^4.17.13",
     "@types/extract-zip": "^1.6.2",
     "@types/faker": "^5.1.5",
@@ -1411,22 +1411,22 @@
     "ejs": "^3.1.8",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-module-utils": "^2.6.2",
-    "eslint-plugin-ban": "^1.5.2",
-    "eslint-plugin-cypress": "^2.13.2",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-module-utils": "^2.8.0",
+    "eslint-plugin-ban": "^1.6.0",
+    "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.5.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-mocha": "^10.0.5",
-    "eslint-plugin-no-unsanitized": "^3.1.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-no-unsanitized": "^4.0.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-react-perf": "^3.3.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-perf": "^3.3.1",
     "eslint-traverse": "^1.0.0",
     "exit-hook": "^2.2.0",
     "expect": "^29.6.1",

packages/kbn-eslint-config/react.js

@@ -61,7 +61,14 @@ module.exports = {
     'react/no-will-update-set-state': 'error',
     'react/no-is-mounted': 'error',
     'react/no-multi-comp': ['error', { ignoreStateless: true }],
-    'react/no-unknown-property': 'error',
+    'react/no-unknown-property': ['error', { ignore: [
+      'css',
+      'kbn-canvas-height',
+      'kbn-canvas-page',
+      'kbn-canvas-shareable',
+      'kbn-canvas-url',
+      'kbn-canvas-width',
+    ] }],
     'react/prefer-es6-class': ['error', 'always'],
     'react/prefer-stateless-function': ['error', { ignorePureComponents: true }],
     'react/no-unescaped-entities': 'error',

src/core/server/integration_tests/ui_settings/index.test.ts

@@ -20,9 +20,9 @@ describe('uiSettings/routes', function () {
   jest.setTimeout(120_000);
 
   beforeAll(startServers);
-  // eslint-disable-next-line jest/valid-describe
+  // eslint-disable-next-line jest/valid-describe-callback
   describe('doc missing', docMissingSuite(savedObjectIndex));
-  // eslint-disable-next-line jest/valid-describe
+  // eslint-disable-next-line jest/valid-describe-callback
   describe('doc exists', docExistsSuite(savedObjectIndex));
   afterAll(stopServers);
 });

src/dev/eslint/eslint_bin_path.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { join, dirname } from 'path';
+import { bin } from 'eslint/package.json';
+
+// Since eslint 8.0 we can't resolve `eslint/bin/eslint` directly since it's
+// not exported in the eslint package.json file. Instead we need to resolve it
+// using the following hack:
+export const eslintBinPath = join(dirname(require.resolve('eslint/package.json')), bin.eslint);

src/dev/eslint/index.ts

@@ -9,3 +9,4 @@
 export { pickFilesToLint } from './pick_files_to_lint';
 export { lintFiles } from './lint_files';
 export { runEslintWithTypes } from './run_eslint_with_types';
+export { eslintBinPath } from './eslint_bin_path';

src/dev/eslint/lint_files.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { CLIEngine } from 'eslint';
+import { ESLint } from 'eslint';
 
 import { REPO_ROOT } from '@kbn/repo-info';
 import { createFailError } from '@kbn/dev-cli-errors';
@@ -21,26 +21,39 @@ import { File } from '../file';
  * @param  {Array<File>} files
  * @return {undefined}
  */
-export function lintFiles(log: ToolingLog, files: File[], { fix }: { fix?: boolean } = {}) {
-  const cli = new CLIEngine({
+export async function lintFiles(log: ToolingLog, files: File[], { fix }: { fix?: boolean } = {}) {
+  const eslint = new ESLint({
     cache: true,
     cwd: REPO_ROOT,
     fix,
   });
 
   const paths = files.map((file) => file.getRelativePath());
-  const report = cli.executeOnFiles(paths);
+  const reports = await eslint.lintFiles(paths);
 
   if (fix) {
-    CLIEngine.outputFixes(report);
+    await ESLint.outputFixes(reports);
   }
 
-  if (report.errorCount || report.warningCount) {
-    log[report.errorCount ? 'error' : 'warning'](cli.getFormatter()(report.results));
-  }
+  let foundError = false;
+  let foundWarning = false;
+  reports.some((report) => {
+    if (report.errorCount !== 0) {
+      foundError = true;
+      return true;
+    } else if (report.warningCount !== 0) {
+      foundWarning = true;
+    }
+  });
+
+  if (foundError || foundWarning) {
+    const formatter = await eslint.loadFormatter();
+    const msg = await formatter.format(reports);
+    log[foundError ? 'error' : 'warning'](msg);
 
-  if (report.errorCount) {
-    throw createFailError(`[eslint] errors`);
+    if (foundError) {
+      throw createFailError(`[eslint] errors`);
+    }
   }
 
   log.success('[eslint] %d files linted successfully', files.length);

src/dev/eslint/pick_files_to_lint.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { CLIEngine } from 'eslint';
+import { ESLint } from 'eslint';
 
 import { ToolingLog } from '@kbn/tooling-log';
 import { File } from '../file';
@@ -18,22 +18,23 @@ import { File } from '../file';
  * @param  {Array<File>} files
  * @return {Array<File>}
  */
-export function pickFilesToLint(log: ToolingLog, files: File[]) {
-  const cli = new CLIEngine({});
+export async function pickFilesToLint(log: ToolingLog, files: File[]) {
+  const eslint = new ESLint();
+  const filesToLint = [];
 
-  return files.filter((file) => {
-    if (!file.isJs() && !file.isTypescript()) {
-      return;
-    }
+  for (const file of files) {
+    if (!file.isJs() && !file.isTypescript()) continue;
 
     const path = file.getRelativePath();
 
-    if (cli.isPathIgnored(path)) {
+    if (await eslint.isPathIgnored(path)) {
       log.warning(`[eslint] %j ignored by .eslintignore`, file);
-      return false;
+      continue;
     }
 
     log.debug('[eslint] linting %j', file);
-    return true;
-  });
+    filesToLint.push(file);
+  }
+
+  return filesToLint;
 }

src/dev/eslint/run_eslint_with_types.ts

@@ -20,10 +20,11 @@ import { REPO_ROOT } from '@kbn/repo-info';
 
 import { TS_PROJECTS, type TsProject } from '@kbn/ts-projects';
 
+import { eslintBinPath } from './eslint_bin_path';
+
 export function runEslintWithTypes() {
   run(
     async ({ log, flags }) => {
-      const eslintPath = require.resolve('eslint/bin/eslint');
       const ignoreFilePath = Path.resolve(REPO_ROOT, '.eslintignore');
       const configTemplate = Fs.readFileSync(
         Path.resolve(__dirname, 'types.eslint.config.template.js'),
@@ -77,7 +78,7 @@ export function runEslintWithTypes() {
             const proc = await execa(
               process.execPath,
               [
-                Path.relative(project.directory, eslintPath),
+                Path.relative(project.directory, eslintBinPath),
                 ...(project.config.include ?? []).map((p) =>
                   p.endsWith('*') ? `${p}.{ts,tsx}` : p
                 ),

src/dev/run_eslint.js

@@ -6,7 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { parse } from 'eslint/lib/options';
+import minimist from 'minimist';
+
+import { eslintBinPath } from './eslint';
 
 let quiet = true;
 if (process.argv.includes('--no-quiet')) {
@@ -15,7 +17,7 @@ if (process.argv.includes('--no-quiet')) {
   process.argv.push('--quiet');
 }
 
-const options = parse(process.argv);
+const options = minimist(process.argv.slice(2));
 process.env.KIBANA_RESOLVER_HARD_CACHE = 'true';
 
 if (!options._.length && !options.printConfig) {
@@ -31,7 +33,7 @@ if (!process.argv.includes('--ext')) {
 }
 
 // common-js is required so that logic before this executes before loading eslint
-require('eslint/bin/eslint');
+require(eslintBinPath); // eslint-disable-line import/no-dynamic-require
 
 if (quiet) {
   process.on('exit', (code) => {

src/dev/run_precommit_hook.js

@@ -43,7 +43,7 @@ run(
     }
 
     for (const Linter of [Eslint, Stylelint]) {
-      const filesToLint = Linter.pickFilesToLint(log, files);
+      const filesToLint = await Linter.pickFilesToLint(log, files);
       if (filesToLint.length > 0) {
         try {
           await Linter.lintFiles(log, filesToLint, {

src/plugins/interactive_setup/public/app.tsx

@@ -15,13 +15,13 @@ import useAsync from 'react-use/lib/useAsync';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import type { StatusResult } from '../common';
 import { ClusterAddressForm } from './cluster_address_form';
 import type { ClusterConfigurationFormProps } from './cluster_configuration_form';
 import { ClusterConfigurationForm } from './cluster_configuration_form';
 import { EnrollmentTokenForm } from './enrollment_token_form';
 import { ProgressIndicator } from './progress_indicator';
 import { useKibana } from './use_kibana';
+import type { StatusResult } from '../common';
 
 export interface AppProps {
   onSuccess?(): void;

src/plugins/interactive_setup/public/cluster_address_form.tsx

@@ -22,11 +22,11 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import type { PingResult } from '../common';
 import { SubmitErrorCallout } from './submit_error_callout';
 import type { ValidationErrors } from './use_form';
 import { useForm } from './use_form';
 import { useKibana } from './use_kibana';
+import type { PingResult } from '../common';
 
 export interface ClusterAddressFormValues {
   host: string;

src/plugins/interactive_setup/public/cluster_configuration_form.tsx

@@ -40,7 +40,6 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { euiThemeVars } from '@kbn/ui-theme';
 
-import type { Certificate } from '../common';
 import { DocLink } from './doc_link';
 import { getCommandLineSnippet } from './get_command_line_snippet';
 import { SubmitErrorCallout } from './submit_error_callout';
@@ -51,6 +50,7 @@ import { useHtmlId } from './use_html_id';
 import { useKibana } from './use_kibana';
 import { useVerification } from './use_verification';
 import { useVisibility } from './use_visibility';
+import type { Certificate } from '../common';
 
 export interface ClusterConfigurationFormValues {
   username: string;

src/plugins/interactive_setup/public/enrollment_token_form.test.tsx

@@ -11,9 +11,9 @@ import React from 'react';
 
 import { coreMock, themeServiceMock } from '@kbn/core/public/mocks';
 
-import type { EnrollmentToken } from '../common';
 import { decodeEnrollmentToken, EnrollmentTokenForm } from './enrollment_token_form';
 import { Providers } from './plugin';
+import type { EnrollmentToken } from '../common';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => `id-${Math.random()}`,

src/plugins/interactive_setup/public/enrollment_token_form.tsx

@@ -28,7 +28,6 @@ import useUpdateEffect from 'react-use/lib/useUpdateEffect';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import type { EnrollmentToken } from '../common';
 import { DocLink } from './doc_link';
 import { getCommandLineSnippet } from './get_command_line_snippet';
 import { SubmitErrorCallout } from './submit_error_callout';
@@ -38,6 +37,7 @@ import { useForm } from './use_form';
 import { useKibana } from './use_kibana';
 import { useVerification } from './use_verification';
 import { useVisibility } from './use_visibility';
+import type { EnrollmentToken } from '../common';
 
 export interface EnrollmentTokenFormValues {
   token: string;

src/plugins/interactive_setup/public/submit_error_callout.test.tsx

@@ -10,6 +10,7 @@ import { errors } from '@elastic/elasticsearch';
 import { shallow } from 'enzyme';
 import React from 'react';
 
+import { SubmitErrorCallout } from './submit_error_callout';
 import {
   ERROR_CONFIGURE_FAILURE,
   ERROR_ELASTICSEARCH_CONNECTION_CONFIGURED,
@@ -20,7 +21,6 @@ import {
   ERROR_PING_FAILURE,
 } from '../common';
 import { interactiveSetupMock } from '../server/mocks';
-import { SubmitErrorCallout } from './submit_error_callout';
 
 describe('SubmitErrorCallout', () => {
   it('renders unknown errors correctly', async () => {

src/plugins/interactive_setup/public/verification_code_form.tsx

@@ -22,13 +22,13 @@ import type { IHttpFetchError, ResponseErrorBody } from '@kbn/core-http-browser'
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { VERIFICATION_CODE_LENGTH } from '../common';
 import { getCommandLineSnippet } from './get_command_line_snippet';
 import { SingleCharsField } from './single_chars_field';
 import { SubmitErrorCallout } from './submit_error_callout';
 import type { ValidationErrors } from './use_form';
 import { useForm } from './use_form';
 import { useKibana } from './use_kibana';
+import { VERIFICATION_CODE_LENGTH } from '../common';
 
 export interface VerificationCodeFormValues {
   code: string;