Bump eslint@7 (#94347)

.eslintrc.js

@@ -492,6 +492,7 @@ module.exports = {
     {
       files: [
         '**/*.stories.tsx',
+        '**/*.test.js',
         'x-pack/test/apm_api_integration/**/*.ts',
         'x-pack/test/functional/apps/**/*.js',
         'x-pack/plugins/apm/**/*.js',
@@ -506,6 +507,7 @@ module.exports = {
       ],
       rules: {
         'import/no-default-export': 'off',
+        'import/no-named-as-default-member': 'off',
         'import/no-named-as-default': 'off',
       },
     },
@@ -1547,8 +1549,8 @@ module.exports = {
       plugins: ['react', '@typescript-eslint'],
       files: ['x-pack/plugins/osquery/**/*.{js,mjs,ts,tsx}'],
       rules: {
-        'arrow-body-style': ['error', 'as-needed'],
+        // 'arrow-body-style': ['error', 'as-needed'],
-        'prefer-arrow-callback': 'error',
+        // 'prefer-arrow-callback': 'error',
         'no-unused-vars': 'off',
         'react/prop-types': 'off',
         '@typescript-eslint/explicit-module-boundary-types': 'off',

package.json

@@ -417,6 +417,8 @@
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.15.7",
+    "@babel/eslint-plugin": "^7.14.5",
     "@babel/generator": "^7.15.4",
     "@babel/parser": "^7.15.7",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
@@ -518,7 +520,7 @@
     "@types/ejs": "^3.0.6",
     "@types/elasticsearch": "^5.0.33",
     "@types/enzyme": "^3.10.8",
-    "@types/eslint": "^6.1.3",
+    "@types/eslint": "^7.28.0",
     "@types/extract-zip": "^1.6.2",
     "@types/faker": "^5.1.5",
     "@types/fancy-log": "^1.3.1",
@@ -640,9 +642,9 @@
     "@types/xml2js": "^0.4.5",
     "@types/yauzl": "^2.9.1",
     "@types/zen-observable": "^0.8.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.14.1",
+    "@typescript-eslint/parser": "^4.31.2",
-    "@typescript-eslint/typescript-estree": "^4.14.1",
+    "@typescript-eslint/typescript-estree": "^4.31.2",
     "@yarnpkg/lockfile": "^1.1.0",
     "abab": "^2.0.4",
     "aggregate-error": "^3.1.0",
@@ -653,7 +655,6 @@
     "argsplit": "^1.0.5",
     "autoprefixer": "^9.7.4",
     "axe-core": "^4.0.2",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
@@ -690,26 +691,25 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-adapter-utils": "^1.14.0",
     "enzyme-to-json": "^3.6.1",
-    "eslint": "^6.8.0",
+    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-prettier": "^7.2.0",
-    "eslint-import-resolver-node": "0.3.2",
+    "eslint-import-resolver-node": "^0.3.6",
-    "eslint-import-resolver-webpack": "0.11.1",
+    "eslint-import-resolver-webpack": "^0.13.1",
-    "eslint-module-utils": "2.5.0",
+    "eslint-module-utils": "^2.6.2",
-    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-ban": "^1.5.2",
-    "eslint-plugin-ban": "^1.4.0",
+    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.3.4",
+    "eslint-plugin-jest": "^24.5.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-mocha": "^6.2.2",
+    "eslint-plugin-mocha": "^9.0.0",
-    "eslint-plugin-no-unsanitized": "^3.0.2",
+    "eslint-plugin-no-unsanitized": "^3.1.5",
-    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
-    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-react-perf": "^3.2.3",
+    "eslint-plugin-react-perf": "^3.3.0",
     "eslint-traverse": "^1.0.0",
     "expose-loader": "^0.7.5",
     "faker": "^5.1.0",

packages/elastic-eslint-config-kibana/javascript.js

@@ -8,11 +8,11 @@ module.exports = {
      */
     {
       files: ['**/*.js'],
-      parser: require.resolve('babel-eslint'),
+      parser: require.resolve('@babel/eslint-parser'),
 
       plugins: [
         'mocha',
-        'babel',
+        '@babel',
         'import',
         'no-unsanitized',
         'prefer-object-spread',
@@ -36,6 +36,10 @@ module.exports = {
       parserOptions: {
         sourceType: 'module',
         ecmaVersion: 2018,
+        requireConfigFile: false,
+        babelOptions: {
+          presets: ['@kbn/babel-preset/node_preset']
+        },
       },
 
       rules: {

packages/kbn-config-schema/src/byte_size_value/index.ts

@@ -34,7 +34,7 @@ export class ByteSizeValue {
       return new ByteSizeValue(number);
     }
 
-    const value = parseInt(match[1], 0);
+    const value = parseInt(match[1], 10);
     const unit = match[2];
 
     return new ByteSizeValue(value * unitMultiplier[unit]);

packages/kbn-config-schema/src/duration/index.ts

@@ -24,7 +24,7 @@ function stringToDuration(text: string) {
     return numberToDuration(number);
   }
 
-  const count = parseInt(result[1], 0);
+  const count = parseInt(result[1], 10);
   const unit = result[2] as DurationInputArg2;
 
   return momentDuration(count, unit);

packages/kbn-eslint-plugin-eslint/BUILD.bazel

@@ -29,7 +29,7 @@ NPM_MODULE_EXTRA_FILES = [
 ]
 
 DEPS = [
-  "@npm//babel-eslint",
+  "@npm//@babel/eslint-parser",
   "@npm//dedent",
   "@npm//eslint",
   "@npm//eslint-module-utils",

packages/kbn-eslint-plugin-eslint/rules/disallow_license_headers.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-const babelEslint = require('babel-eslint');
+const babelEslint = require('@babel/eslint-parser');
 
 const { assert, normalizeWhitespace, init } = require('../lib');
 
@@ -38,7 +38,7 @@ module.exports = {
           assert(!!licenses, '"licenses" option is required');
 
           return licenses.map((license, i) => {
-            const parsed = babelEslint.parse(license);
+            const parsed = babelEslint.parse(license, { requireConfigFile: false });
 
             assert(
               !parsed.body.length,

packages/kbn-eslint-plugin-eslint/rules/disallow_license_headers.test.js

@@ -11,9 +11,10 @@ const rule = require('./disallow_license_headers');
 const dedent = require('dedent');
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('babel-eslint'),
+  parser: require.resolve('@babel/eslint-parser'),
   parserOptions: {
     ecmaVersion: 2018,
+    requireConfigFile: false,
   },
 });
 

packages/kbn-eslint-plugin-eslint/rules/module_migration.test.js

@@ -11,9 +11,10 @@ const rule = require('./module_migration');
 const dedent = require('dedent');
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('babel-eslint'),
+  parser: require.resolve('@babel/eslint-parser'),
   parserOptions: {
     ecmaVersion: 2018,
+    requireConfigFile: false,
   },
 });
 
@@ -69,6 +70,12 @@ ruleTester.run('@kbn/eslint/module-migration', rule, {
           message: 'Re-exported module "foo" should be "bar"',
         },
       ],
+      output: dedent`
+        import 'bar'
+        require('bar/foo2')
+        export { foo } from 'bar'
+        export const foo2 = 'bar'
+      `,
     },
   ],
 });

packages/kbn-eslint-plugin-eslint/rules/no_restricted_paths.test.js

@@ -32,10 +32,11 @@ const { RuleTester } = require('eslint');
 const rule = require('./no_restricted_paths');
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('babel-eslint'),
+  parser: require.resolve('@babel/eslint-parser'),
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2018,
+    requireConfigFile: false,
   },
 });
 

packages/kbn-eslint-plugin-eslint/rules/require_license_header.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-const babelEslint = require('babel-eslint');
+const babelEslint = require('@babel/eslint-parser');
 
 const { assert, normalizeWhitespace, init } = require('../lib');
 
@@ -38,7 +38,7 @@ module.exports = {
 
           assert(!!license, '"license" option is required');
 
-          const parsed = babelEslint.parse(license);
+          const parsed = babelEslint.parse(license, { requireConfigFile: false });
           assert(!parsed.body.length, '"license" option must only include a single comment');
           assert(
             parsed.comments.length === 1,

packages/kbn-eslint-plugin-eslint/rules/require_license_header.test.js

@@ -11,9 +11,10 @@ const rule = require('./require_license_header');
 const dedent = require('dedent');
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('babel-eslint'),
+  parser: require.resolve('@babel/eslint-parser'),
   parserOptions: {
     ecmaVersion: 2018,
+    requireConfigFile: false,
   },
 });
 

packages/kbn-test/src/functional_test_runner/lib/snapshots/decorate_snapshot_ui.ts

@@ -161,7 +161,6 @@ function getSnapshotState(file: string, updateSnapshot: SnapshotUpdateState) {
     path.join(dirname + `/__snapshots__/` + filename.replace(path.extname(filename), '.snap')),
     {
       updateSnapshot,
-      // @ts-expect-error
       getPrettier: () => prettier,
       getBabelTraverse: () => babelTraverse,
     }

src/dev/eslint/lint_files.ts

@@ -20,18 +20,13 @@ function lintFilesOnFS(cli: CLIEngine, files: File[]) {
 
 // For files living somewhere else (ie. git object)
 async function lintFilesOnContent(cli: CLIEngine, files: File[]) {
-  const report: {
+  const report: CLIEngine.LintReport = {
-    results: any[];
-    errorCount: number;
-    warningCount: number;
-    fixableErrorCount: number;
-    fixableWarningCount: number;
-  } = {
     results: [],
     errorCount: 0,
     warningCount: 0,
     fixableErrorCount: 0,
     fixableWarningCount: 0,
+    usedDeprecatedRules: [],
   };
 
   for (let i = 0; i < files.length; i++) {
@@ -46,6 +41,7 @@ async function lintFilesOnContent(cli: CLIEngine, files: File[]) {
     report.warningCount += r.warningCount;
     report.fixableErrorCount += r.fixableErrorCount;
     report.fixableWarningCount += r.fixableWarningCount;
+    report.usedDeprecatedRules.push(...r.usedDeprecatedRules);
   }
 
   return report;

src/dev/license_checker/config.ts

@@ -76,10 +76,5 @@ export const LICENSE_OVERRIDES = {
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@7.15.0': ['Elastic License 2.0'],
   '@elastic/eui@38.0.1': ['SSPL-1.0 OR Elastic License 2.0'],
-
+  'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
-  // TODO can be removed if the https://github.com/jindw/xmldom/issues/239 is released
-  'xmldom@0.1.27': ['MIT'],
-
-  // TODO can be removed once we upgrade the use of walk dependency past or equal to v2.3.14
-  'walk@2.3.9': ['MIT'],
 };

x-pack/plugins/actions/server/usage/actions_telemetry.ts

@@ -78,7 +78,7 @@ export async function getTotalCount(
   }
   return {
     countTotal:
-      Object.keys(aggs).reduce((total: number, key: string) => parseInt(aggs[key], 0) + total, 0) +
+      Object.keys(aggs).reduce((total: number, key: string) => parseInt(aggs[key], 10) + total, 0) +
       (preconfiguredActions?.length ?? 0),
     countByType,
   };

x-pack/plugins/alerting/common/parse_duration.ts

@@ -28,7 +28,7 @@ export function parseDuration(duration: string): number {
 }
 
 export function getDurationNumberInItsUnit(duration: string): number {
-  return parseInt(duration.replace(/[^0-9.]/g, ''), 0);
+  return parseInt(duration.replace(/[^0-9.]/g, ''), 10);
 }
 
 export function getDurationUnitValue(duration: string): string {

x-pack/plugins/alerting/server/usage/alerts_telemetry.ts

@@ -259,7 +259,7 @@ export async function getTotalCountAggregations(
 
   const totalAlertsCount = Object.keys(aggregations.byAlertTypeId.value.types).reduce(
     (total: number, key: string) =>
-      parseInt(aggregations.byAlertTypeId.value.types[key], 0) + total,
+      parseInt(aggregations.byAlertTypeId.value.types[key], 10) + total,
     0
   );
 
@@ -325,7 +325,7 @@ export async function getTotalCountInUse(esClient: ElasticsearchClient, kibanaIn
   return {
     countTotal: Object.keys(aggregations.byAlertTypeId.value.types).reduce(
       (total: number, key: string) =>
-        parseInt(aggregations.byAlertTypeId.value.types[key], 0) + total,
+        parseInt(aggregations.byAlertTypeId.value.types[key], 10) + total,
       0
     ),
     countByType: Object.keys(aggregations.byAlertTypeId.value.types).reduce(

x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx

@@ -72,7 +72,6 @@ export function PageLoadDistChart({
     onPercentileChange(minX, maxX);
   };
 
-  // eslint-disable-next-line react/function-component-definition
   const headerFormatter: TooltipValueFormatter = (tooltip: TooltipValue) => {
     return (
       <div>

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/MaybeViewTraceLink.tsx

@@ -15,7 +15,7 @@ import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_det
 import { IWaterfall } from './waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers';
 import { Environment } from '../../../../../common/environment_rt';
 
-export const MaybeViewTraceLink = ({
+export function MaybeViewTraceLink({
   transaction,
   waterfall,
   environment,
@@ -23,7 +23,7 @@ export const MaybeViewTraceLink = ({
   transaction: ITransaction;
   waterfall: IWaterfall;
   environment: Environment;
-}) => {
+}) {
   const {
     urlParams: { latencyAggregationType },
   } = useUrlParams();
@@ -102,4 +102,4 @@ export const MaybeViewTraceLink = ({
       </EuiFlexItem>
     );
   }
-};
+}

x-pack/plugins/canvas/public/lib/aeroelastic/layout_functions.js

@@ -580,15 +580,6 @@ export const applyLocalTransforms = (shapes, transformIntents) => {
   return shapes.map(shapeApplyLocalTransforms(transformIntents));
 };
 
-// eslint-disable-next-line
-const getUpstreamTransforms = (shapes, shape) =>
-  shape.parent
-    ? getUpstreamTransforms(
-        shapes,
-        shapes.find((s) => s.id === shape.parent)
-      ).concat([shape.localTransformMatrix])
-    : [shape.localTransformMatrix];
-
 const getUpstreams = (shapes, shape) =>
   shape.parent
     ? getUpstreams(

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/helpers/http_requests.js

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import sinon from 'sinon';
+import { fakeServer } from 'sinon';
 
 // Register helpers to mock HTTP Requests
 const registerHttpRequestMockHelpers = (server) => {
@@ -124,7 +124,7 @@ const registerHttpRequestMockHelpers = (server) => {
 };
 
 export const init = () => {
-  const server = sinon.fakeServer.create();
+  const server = fakeServer.create();
   server.respondImmediately = true;
 
   // We make requests to APIs which don't impact the UX, e.g. UI metric telemetry,

x-pack/plugins/graph/public/components/guidance_panel/guidance_panel.tsx

@@ -50,6 +50,7 @@ function ListItem({
   children: ReactNode;
 }) {
   return (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
     <li
       className={classNames('gphGuidancePanel__item', {
         // eslint-disable-next-line @typescript-eslint/naming-convention

x-pack/plugins/osquery/public/packs/common/pack_queries_table.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-/* eslint-disable @typescript-eslint/no-shadow, react-perf/jsx-no-new-object-as-prop, react/jsx-no-bind, react/display-name, react-perf/jsx-no-new-function-as-prop, react-perf/jsx-no-new-array-as-prop */
+/* eslint-disable @typescript-eslint/no-shadow, react-perf/jsx-no-new-object-as-prop, react/jsx-no-bind, react-perf/jsx-no-new-function-as-prop, react-perf/jsx-no-new-array-as-prop */
 
 import { find } from 'lodash/fp';
 import React, { useState } from 'react';

x-pack/plugins/osquery/public/packs/list/pack_table_queries_table.tsx

@@ -24,7 +24,6 @@ const columns = [
   {
     field: 'query',
     name: 'Query',
-    // eslint-disable-next-line react/display-name
     render: (query: string) => (
       <EuiCodeBlock language="sql" fontSize="s" paddingSize="s">
         {query}

x-pack/plugins/osquery/public/results/results_table.tsx

@@ -120,6 +120,7 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
 
   const renderCellValue: EuiDataGridProps['renderCellValue'] = useMemo(
     () =>
+      // eslint-disable-next-line react/display-name
       ({ rowIndex, columnId }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const data = useContext(DataContext);

x-pack/plugins/osquery/public/shared_components/lazy_osquery_action.tsx

@@ -8,6 +8,7 @@
 import React, { lazy, Suspense } from 'react';
 
 // @ts-expect-error update types
+// eslint-disable-next-line react/display-name
 export const getLazyOsqueryAction = (services) => (props) => {
   const OsqueryAction = lazy(() => import('./osquery_action'));
   return (

x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx

@@ -21,7 +21,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx

@@ -21,7 +21,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx

@@ -20,7 +20,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx

@@ -23,7 +23,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx

@@ -95,10 +95,8 @@ type RenderFunctionProp = (
 
 interface Props {
   dataProvider: DataProvider;
-  disabled?: boolean;
   hideTopN?: boolean;
   isDraggable?: boolean;
-  inline?: boolean;
   render: RenderFunctionProp;
   timelineId?: string;
   truncate?: boolean;

x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import { EuiPanel, EuiText } from '@elastic/eui';
 import { get } from 'lodash';
 import memoizeOne from 'memoize-one';

x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.test.tsx

@@ -22,7 +22,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx

@@ -121,7 +121,6 @@ interface Props {
   end: string;
   filters: Filter[];
   headerFilterGroup?: React.ReactNode;
-  height?: number;
   id: TimelineId;
   indexNames: string[];
   indexPattern: IIndexPattern;

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -37,7 +37,6 @@ const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
 const leadingControlColumns: ControlColumnProps[] = [
   {
     ...defaultControlColumn,
-    // eslint-disable-next-line react/display-name
     headerCellRender: () => <>{i18n.ACTIONS}</>,
   },
 ];

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/timeline/processor.tsx

@@ -6,17 +6,17 @@
  */
 
 import React, { useCallback, memo } from 'react';
-import { EuiToolTip, EuiLink, EuiMarkdownAstNodePosition } from '@elastic/eui';
+import { EuiToolTip, EuiLink } from '@elastic/eui';
 
 import { useTimelineClick } from '../../../../utils/timeline/use_timeline_click';
 import { TimelineProps } from './types';
 import * as i18n from './translations';
 
-export const TimelineMarkDownRendererComponent: React.FC<
+export const TimelineMarkDownRendererComponent: React.FC<TimelineProps> = ({
-  TimelineProps & {
+  id,
-    position: EuiMarkdownAstNodePosition;
+  title,
-  }
+  graphEventId,
-> = ({ id, title, graphEventId }) => {
+}) => {
   const handleTimelineClick = useTimelineClick();
   const onClickTimeline = useCallback(
     () => handleTimelineClick(id ?? '', graphEventId),

x-pack/plugins/security_solution/public/common/components/markdown_editor/renderer.tsx

@@ -19,6 +19,7 @@ interface Props {
 
 const MarkdownRendererComponent: React.FC<Props> = ({ children, disableLinks }) => {
   const MarkdownLinkProcessingComponent: React.FC<EuiLinkAnchorProps> = useMemo(
+    // eslint-disable-next-line react/display-name
     () => (props) => <MarkdownLink {...props} disableLinks={disableLinks} />,
     [disableLinks]
   );
@@ -38,4 +39,6 @@ const MarkdownRendererComponent: React.FC<Props> = ({ children, disableLinks })
   );
 };
 
+MarkdownRendererComponent.displayName = 'MarkdownRendererComponent';
+
 export const MarkdownRenderer = memo(MarkdownRendererComponent);

x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.test.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
 

x-pack/plugins/security_solution/public/common/components/ml/entity_draggable.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Columns } from '../../paginated_table';

x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 

x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/jobs_table.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React, { useEffect, useState } from 'react';
 
 import {

x-pack/plugins/security_solution/public/common/components/stat_items/index.test.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';

x-pack/plugins/security_solution/public/common/containers/sourcerer/index.test.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import { act, renderHook } from '@testing-library/react-hooks';
 import { Provider } from 'react-redux';

x-pack/plugins/security_solution/public/common/utils/route/spy_routes.tsx

@@ -99,4 +99,6 @@ export const SpyRouteComponent = memo<
   }
 );
 
+SpyRouteComponent.displayName = 'SpyRouteComponent';
+
 export const SpyRoute = withRouter(SpyRouteComponent);

x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx

@@ -35,7 +35,7 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     EuiFieldText: (props: any) => {
       const { isInvalid, isLoading, fullWidth, inputRef, isDisabled, ...validInputProps } = props;
       return <input {...validInputProps} />;

x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/table_helpers.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import styled from 'styled-components';
 import { EuiButtonIcon, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import {
   EuiBasicTableColumn,
   EuiTableActionsColumnType,

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/exceptions/columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import { EuiButtonIcon, EuiBasicTableColumn, EuiToolTip } from '@elastic/eui';
 

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/failure_history.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import {
   EuiBasicTable,
   EuiPanel,

x-pack/plugins/security_solution/public/hosts/components/authentications_table/index.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import { has } from 'lodash/fp';
 import React, { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';

x-pack/plugins/security_solution/public/hosts/components/uncommon_process_table/index.test.tsx

@@ -26,7 +26,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/hosts/components/uncommon_process_table/index.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React, { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx

@@ -301,7 +301,6 @@ export const EndpointList = () => {
         name: i18n.translate('xpack.securitySolution.endpoint.list.hostStatus', {
           defaultMessage: 'Agent status',
         }),
-        // eslint-disable-next-line react/display-name
         render: (hostStatus: HostInfo['host_status'], endpointInfo) => {
           return (
             <EndpointAgentStatus hostStatus={hostStatus} endpointMetadata={endpointInfo.metadata} />
@@ -315,7 +314,6 @@ export const EndpointList = () => {
           defaultMessage: 'Policy',
         }),
         truncateText: true,
-        // eslint-disable-next-line react/display-name
         render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied'], item: HostInfo) => {
           return (
             <>
@@ -390,7 +388,6 @@ export const EndpointList = () => {
         name: i18n.translate('xpack.securitySolution.endpoint.list.os', {
           defaultMessage: 'OS',
         }),
-        // eslint-disable-next-line react/display-name
         render: (os: string) => {
           return (
             <EuiToolTip content={os} anchorClassName="eui-textTruncate">
@@ -407,7 +404,6 @@ export const EndpointList = () => {
         name: i18n.translate('xpack.securitySolution.endpoint.list.ip', {
           defaultMessage: 'IP address',
         }),
-        // eslint-disable-next-line react/display-name
         render: (ip: string[]) => {
           return (
             <EuiToolTip
@@ -429,7 +425,6 @@ export const EndpointList = () => {
         name: i18n.translate('xpack.securitySolution.endpoint.list.endpointVersion', {
           defaultMessage: 'Version',
         }),
-        // eslint-disable-next-line react/display-name
         render: (version: string) => {
           return (
             <EuiToolTip content={version} anchorClassName="eui-textTruncate">
@@ -462,7 +457,6 @@ export const EndpointList = () => {
         }),
         actions: [
           {
-            // eslint-disable-next-line react/display-name
             render: (item: HostInfo) => {
               return <TableRowActions endpointMetadata={item.metadata} />;
             },

x-pack/plugins/security_solution/public/network/components/ip/index.test.tsx

@@ -20,7 +20,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/network/components/network_http_table/columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import numeral from '@elastic/numeral';
 import {

x-pack/plugins/security_solution/public/network/components/port/index.test.tsx

@@ -21,7 +21,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/network/components/source_destination/index.test.tsx

@@ -55,7 +55,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/network/components/tls_table/columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import moment from 'moment';
 

x-pack/plugins/security_solution/public/network/pages/details/index.test.tsx

@@ -27,7 +27,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/overview/components/overview_cti_links/threat_intel_panel_view.tsx

@@ -34,7 +34,6 @@ const columns: Array<EuiTableFieldDataColumnType<LinkPanelListItem>> = [
     field: 'path',
     truncateText: true,
     width: '80px',
-    // eslint-disable-next-line react/display-name
     render: (path: string) => <Link path={path} copy={LINK_COPY} />,
   },
 ];

x-pack/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.test.tsx

@@ -35,7 +35,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/flyout/index.test.tsx

@@ -34,7 +34,6 @@ jest.mock('react-redux', () => {
 });
 
 jest.mock('../timeline', () => ({
-  // eslint-disable-next-line react/display-name
   StatefulTimeline: () => <div />,
 }));
 

x-pack/plugins/security_solution/public/timelines/components/formatted_ip/index.test.tsx

@@ -40,7 +40,6 @@ jest.mock('../../../common/components/drag_and_drop/draggable_wrapper', () => {
   const original = jest.requireActual('../../../common/components/drag_and_drop/draggable_wrapper');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     DraggableWrapper: () => <div data-test-subj="DraggableWrapper" />,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/netflow/index.test.tsx

@@ -68,7 +68,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { mount } from 'enzyme';

x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import { EuiButtonIcon, EuiLink } from '@elastic/eui';
 import { omit } from 'lodash/fp';
 import React from 'react';

x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/extended_columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 
 import { defaultToEmptyTag } from '../../../../common/components/empty_value';

x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/icon_header_columns.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import { EuiIcon, EuiToolTip } from '@elastic/eui';
 import React from 'react';
 

x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.test.tsx

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
 import { mount } from 'enzyme';
 import React from 'react';
 

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/args.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/generic_details.test.tsx

@@ -21,7 +21,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/generic_file_details.test.tsx

@@ -21,7 +21,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx

@@ -26,7 +26,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import { IconType } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import React from 'react';

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/primary_secondary_user_info.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/session_user_host_working_dir.test.tsx

@@ -20,7 +20,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details.test.tsx

@@ -21,7 +21,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details_line.test.tsx

@@ -18,7 +18,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/empty_column_renderer.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import { ColumnHeaderOptions } from '../../../../../../common';
 import { TimelineNonEcsData } from '../../../../../../common/search_strategy/timeline';

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details.test.tsx

@@ -26,7 +26,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details_line.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/exit_code_draggable.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/file_draggable.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/file_hash.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.test.tsx

@@ -21,7 +21,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_column_renderer.test.tsx

@@ -27,7 +27,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_row_renderer.test.tsx

@@ -26,7 +26,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/host_name.test.tsx

@@ -37,7 +37,6 @@ jest.mock('../../../../../common/lib/kibana/kibana_react', () => {
 });
 
 jest.mock('../../../../../common/components/draggables', () => ({
-  // eslint-disable-next-line react/display-name
   DefaultDraggable: () => <div data-test-subj="DefaultDraggable" />,
 }));
 

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/host_working_dir.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable react/display-name */
-
 import { get } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/parent_process_draggable.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/plain_column_renderer.test.tsx

@@ -24,7 +24,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/process_draggable.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/process_hash.test.tsx

@@ -19,7 +19,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/reason_column_renderer.test.tsx

@@ -61,7 +61,6 @@ const rowRenderers: RowRenderer[] = [
   {
     id: RowRendererId.alerts,
     isInstance: (ecs) => ecs === validEcs,
-    // eslint-disable-next-line react/display-name
     renderRow: () => <span data-test-subj="test-row-render" />,
   },
 ];

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/registry/registry_event_details.test.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 
-import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
 import {
   mockEndpointRegistryModificationEvent,
   TestProviders,
@@ -24,7 +23,6 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    // eslint-disable-next-line react/display-name
     EuiScreenReaderOnly: () => <></>,
   };
 });
@@ -36,7 +34,6 @@ describe('RegistryEventDetails', () => {
     const wrapper = mount(
       <TestProviders>
         <RegistryEventDetails
-          browserFields={mockBrowserFields}
           contextId="test-context"
           data={mockEndpointRegistryModificationEvent}
           text={MODIFIED_REGISTRY_KEY}

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/registry/registry_event_details.tsx

@@ -8,14 +8,12 @@
 import { get } from 'lodash/fp';
 import React from 'react';
 
-import { BrowserFields } from '../../../../../../common/containers/source';
 import { Details, isNillEmptyOrNotFinite } from '../helpers';
 import { Ecs } from '../../../../../../../common/ecs';
 
 import { RegistryEventDetailsLine } from './registry_event_details_line';
 
 interface Props {
-  browserFields: BrowserFields;
   contextId: string;
   data: Ecs;
   isDraggable?: boolean;