[babel] Remove @elastic/eslint-config-kibana and babel-eslint-plugin (#6808)

* Remove deprecated babel eslint packages

- `eslint-plugin-babel` is not used by anything in our repo except for:
- `@elastic/eslint-config-kibana` is no longer supported/maintained, and exists in Kibana now. It doesn't make sense for us to import from Kibana, so we should likely just maintain our own eslint config settings

* Replace rules from in `eslint-config-kibana`

@see https://github.com/elastic/eslint-config-kibana/blob/master/.eslintrc.js

- excluding rules that overlap w/ Prettier (spacing, quotes, indentation, etc)
- excluded `no-undef`, `no-redeclare` - `@typescript/eslint` already handles these without throwing errors on globals and type exports (see https://stackoverflow.com/a/64197516/4294462) - also allows removing `env` config
+ update eqeqeq rule and no-empty rule to allow empty catches

[opinionated]
- removed `no-nested-ternary`, as we use those plenty and Prettier styles them to be very readable
- also removed several rules which just don't come up for us often, e.g. `__proto__` and `__iterator__` checks

* Restore `mocha` rules set by Kibana eslint config

+ upgrade `mocha` eslint plugin to latest

* Restore `import` rules set by Kibana eslint config

+ remove unused import disable rules
+ remove `import/named` - it doesn't know how to handle types and `@typescript/eslint` already does it better

* Restore `react` rules set by Kibana eslint config

+ upgrade react eslint packages to latest

+ remove unused disable rules

* Remove `react` rule causing unused fragments to not be linted

+ remove unnecessary `jsx` import in Jest test

Author: cee-chen

.eslintrc.js

@@ -30,17 +30,48 @@ module.exports = {
     },
   },
   extends: [
-    '@elastic/eslint-config-kibana',
     'plugin:@typescript-eslint/recommended',
     // Prettier options need to come last, in order to override other style
     // rules.
     'prettier/react',
     'prettier/standard',
     'plugin:prettier/recommended',
   ],
-  plugins: ['jsx-a11y', 'prettier', 'local', 'react-hooks', '@emotion'],
+  plugins: [
+    'mocha',
+    'jsx-a11y',
+    'prettier',
+    'local',
+    'import',
+    'react',
+    'react-hooks',
+    '@emotion',
+  ],
   rules: {
+    'block-scoped-var': 'error',
+    camelcase: 'off',
+    'dot-notation': ['error', { allowKeywords: true }],
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'guard-for-in': 'error',
+    'new-cap': ['error', { capIsNewExceptions: ['Private'] }],
+    'no-caller': 'error',
+    'no-const-assign': 'error',
+    'no-debugger': 'error',
+    'no-empty': ['error', { allowEmptyCatch: true }],
+    'no-eval': 'error',
+    'no-extend-native': 'error',
+    'no-global-assign': 'error',
+    'no-loop-func': 'error',
+    'no-restricted-globals': ['error', 'context'],
+    'no-script-url': 'error',
+    'no-sequences': 'error',
+    'no-var': 'error',
+    'no-with': 'error',
+    'prefer-const': 'error',
     'prefer-template': 'error',
+    strict: ['error', 'never'],
+    'valid-typeof': 'error',
+
     'local/i18n': 'error',
     'local/href-with-rel': 'error',
     'local/forward-ref': 'error',
@@ -53,9 +84,18 @@ module.exports = {
         license: SSPL_ELASTIC_2_0_LICENSE_HEADER,
       },
     ],
-    'no-use-before-define': 'off',
-    quotes: ['warn', 'single', 'avoid-escape'],
-    camelcase: 'off',
+
+    'import/no-unresolved': ['error', { amd: true, commonjs: true }],
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/no-named-as-default': 'error',
+    'import/no-named-as-default-member': 'error',
+    'import/no-duplicates': 'error',
+
+    'mocha/handle-done-callback': 'error',
+    'mocha/no-exclusive-tests': 'error',
+
     'jsx-a11y/accessible-emoji': 'error',
     'jsx-a11y/alt-text': 'error',
     'jsx-a11y/anchor-has-content': 'error',
@@ -82,6 +122,10 @@ module.exports = {
     'jsx-a11y/tabindex-no-positive': 'error',
     'jsx-a11y/label-has-associated-control': 'error',
 
+    'react/jsx-uses-vars': 'error',
+    'react/jsx-no-undef': 'error',
+    'react/jsx-pascal-case': 'error',
+
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
 
@@ -119,16 +163,11 @@ module.exports = {
       { fixMixedExportsWithInlineTypeSpecifier: false },
     ],
   },
-  env: {
-    jest: true,
-  },
   overrides: [
     {
       files: ['*.d.ts'],
       rules: {
-        'react/no-multi-comp': 'off',
         'react/prefer-es6-class': 'off',
-        'react/prefer-stateless-function': 'off',
       },
     },
   ],

package.json

@@ -115,7 +115,6 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^53.1.1",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/cache": "^11.10.3",
     "@emotion/css": "^11.10.0",
@@ -178,16 +177,15 @@
     "eslint": "^7.10.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-import-resolver-webpack": "^0.13.0",
-    "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-local": "^1.0.0",
-    "eslint-plugin-mocha": "^8.0.0",
+    "eslint-plugin-mocha": "^10.1.0",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.3",
-    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",

scripts/babel/react-docgen-typescript.js

@@ -88,7 +88,6 @@ module.exports = function ({ types }) {
                 savePropValueAsString: true,
               })
               .parseWithProgramProvider(filename, () => program);
-            // eslint-disable-next-line no-empty
           } catch (e) {}
 
           /**
@@ -349,4 +348,5 @@ const intrinsicValuesRaw = [
 const reactElementTypeExpanded =
   'ReactElement<any, string | JSXElementConstructor<any>>';
 
-const reactNodeTypeExpanded = /(string \| number \| boolean \| {} \| ReactElement \| ReactNodeArray \| ReactPortal)( \| \({} & string\).+\(ReactPortal & string\))?/g;
+const reactNodeTypeExpanded =
+  /(string \| number \| boolean \| {} \| ReactElement \| ReactNodeArray \| ReactPortal)( \| \({} & string\).+\(ReactPortal & string\))?/g;

src-docs/src/components/guide_section/guide_section.tsx

@@ -230,7 +230,6 @@ export const GuideSection: FunctionComponent<GuideSectionProps> = ({
           <GuideSectionExample
             example={
               <EuiErrorBoundary>
-                {/* eslint-disable-next-line no-nested-ternary */}
                 {fullScreen == null ? (
                   <div>{demo}</div>
                 ) : demo == null ? (

src-docs/src/views/date_picker/custom_input.js

@@ -21,7 +21,6 @@ ExampleCustomInput.propTypes = {
   value: PropTypes.string,
 };
 
-// eslint-disable-next-line react/no-multi-comp
 export default () => {
   const [startDate, setStartDate] = useState(moment());
 

src-docs/src/views/elastic_charts/pie_alts.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import React, { useState } from 'react';
 import groupBy from 'lodash/groupBy';
 import mapValues from 'lodash/mapValues';

src-docs/src/views/elastic_charts/pie_slices.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import React, { useState } from 'react';
 import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
 

src-docs/src/views/elastic_charts/theming_categorical.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import React, { useState, useEffect } from 'react';
 import { Chart, Settings, Axis, DataGenerator } from '@elastic/charts';
 

src-docs/src/views/empty_prompt/empty_prompt_multiple_types.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React, { ReactNode, useState } from 'react';
 
 import { EuiSpacer, EuiSelect } from '../../../../src/components';

src-docs/src/views/empty_prompt/empty_prompt_panel_options.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React, { useState } from 'react';
 
 import {

src-docs/src/views/form_layouts/form_layouts_example.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../components';

src-docs/src/views/form_validation/guidelines.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState } from 'react';
 import { GuideRule, GuideRuleExample } from '../../components';
 import {
   EuiTitle,

src-docs/src/views/page_template/_page_demo.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import React, { useState, FunctionComponent } from 'react';
 import { useRouteMatch } from 'react-router';
 import {

src-docs/src/views/popover/popover_htmlelement_anchor.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-multi-comp */
 import React, { useState, useEffect } from 'react';
 
 import { render, unmountComponentAtNode } from 'react-dom';

src-docs/src/views/suggest/suggest_item_example.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React, { useState } from 'react';
 
 import { EuiSwitch, EuiSuggestItem } from '../../../../src/components';

src-docs/src/views/tabs/tabs_example.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React from 'react';
 import { Link } from 'react-router-dom';
 

src-docs/src/views/theme/consuming_hoc.tsx

@@ -4,7 +4,6 @@ import { withEuiTheme, WithEuiThemeProps } from '../../../../src/services';
 import { EuiIcon } from '../../../../src/components/icon';
 import { EuiText } from '../../../../src/components/text';
 
-// eslint-disable-next-line react/prefer-stateless-function
 class Block extends React.Component<WithEuiThemeProps> {
   render() {
     const { theme } = this.props;

src/components/button/button.tsx

@@ -101,7 +101,6 @@ export const EuiButton: FunctionComponent<Props> = (props) => {
     isLoading: rest.isLoading,
   });
 
-  // eslint-disable-next-line no-nested-ternary
   const color = buttonIsDisabled ? 'disabled' : _color;
 
   const buttonColorStyles = useEuiButtonColorCSS({

src/components/button/button_empty/button_empty.tsx

@@ -130,7 +130,6 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = (
     isLoading,
   });
 
-  // eslint-disable-next-line no-nested-ternary
   const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
   const buttonColorStyles = useEuiButtonColorCSS({
     display: 'empty',

src/components/button/button_group/button_group_button.tsx

@@ -100,9 +100,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
     };
   }
 
-  // eslint-disable-next-line no-nested-ternary
   const color = isDisabled ? 'disabled' : _color;
-  // eslint-disable-next-line no-nested-ternary
   const display = isSelected
     ? 'fill'
     : size === 'compressed'

src/components/button/button_icon/button_icon.tsx

@@ -156,7 +156,6 @@ export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
     );
   }
 
-  // eslint-disable-next-line no-nested-ternary
   const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
 
   const styles = {

src/components/context_menu/context_menu.tsx

@@ -207,7 +207,6 @@ export class EuiContextMenu extends Component<EuiContextMenuProps, State> {
 
   componentDidUpdate(prevProps: EuiContextMenuProps) {
     if (prevProps.panels !== this.props.panels) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         idToRenderedItemsMap: this.mapIdsToRenderedItems(this.props.panels),
       });

src/components/datagrid/body/data_grid_cell_popover.tsx

@@ -147,7 +147,7 @@ export const JsonPopoverContent = ({ cellText }: { cellText: string }) => {
   let formattedText = cellText;
   try {
     formattedText = JSON.stringify(JSON.parse(formattedText), null, 2);
-  } catch (e) {} // eslint-disable-line no-empty
+  } catch (e) {}
 
   return (
     <EuiCodeBlock

src/components/datagrid/body/header/data_grid_header_cell.tsx

@@ -223,7 +223,6 @@ export const useSortingUtils = ({
    * @see https://github.com/w3c/aria/issues/283 for potential future multi-column usage
    */
   const ariaSort: AriaAttributes['aria-sort'] =
-    // eslint-disable-next-line no-nested-ternary
     isColumnSorted && hasOnlyOneSort
       ? sorting.columns[0].direction === 'asc'
         ? 'ascending'

src/components/focus_trap/focus_trap.tsx

@@ -72,7 +72,6 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
 
   componentDidUpdate(prevProps: EuiFocusTrapProps) {
     if (prevProps.disabled === true && this.props.disabled === false) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ hasBeenDisabledByClick: false });
     }
   }

src/components/form/file_picker/file_picker.tsx

@@ -245,7 +245,7 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
                   <EuiIcon
                     className="euiFilePicker__icon"
                     color={
-                      isInvalid ? 'danger' : disabled ? 'subdued' : 'primary' // eslint-disable-line no-nested-ternary
+                      isInvalid ? 'danger' : disabled ? 'subdued' : 'primary'
                     }
                     type={isInvalid ? 'alert' : 'importAction'}
                     size={normalFormControl ? 'm' : 'l'}

src/components/form/range/dual_range.tsx

@@ -95,18 +95,12 @@ export class EuiDualRangeClass extends Component<
 
   componentDidMount() {
     if (this.rangeSliderRef && this.rangeSliderRef.clientWidth === 0) {
-      // Safe to call `setState` inside conditional
-      // https://reactjs.org/docs/react-component.html#componentdidmount
-      // eslint-disable-next-line react/no-did-mount-set-state
       this.setState({ isVisible: false });
     }
   }
 
   componentDidUpdate() {
     if (this.rangeSliderRef?.clientWidth && !this.state.isVisible) {
-      // Safe to call `setState` inside conditional
-      // https://reactjs.org/docs/react-component.html#componentdidupdate
-      // eslint-disable-next-line  react/no-did-update-set-state
       this.setState({ isVisible: true });
     }
   }

src/components/icon/icon.tsx

@@ -153,7 +153,6 @@ export class EuiIconClass extends PureComponent<
     const { type } = this.props;
 
     if (isEuiIconType(type) && this.state.icon == null) {
-      //eslint-disable-next-line react/no-did-mount-set-state
       this.setState({
         neededLoading: true,
         isLoading: true,
@@ -169,14 +168,12 @@ export class EuiIconClass extends PureComponent<
     const { type } = this.props;
     if (type !== prevProps.type) {
       if (isEuiIconType(type)) {
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           neededLoading: iconComponentCache.hasOwnProperty(type),
           isLoading: true,
         });
         this.loadIconComponent(type);
       } else {
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           icon: type,
           neededLoading: true,

src/components/markdown_editor/unified-plugins.d.ts

@@ -14,7 +14,6 @@ declare module 'remark-emoji' {
 }
 
 declare module 'mdast-util-to-hast/lib/all' {
-  // eslint-disable-next-line import/no-unresolved
   import { Node } from 'unist';
   import { H } from 'mdast-util-to-hast';
 

src/components/popover/popover.tsx

@@ -439,7 +439,6 @@ export class EuiPopover extends Component<Props, State> {
     if (this.state.suppressingPopover) {
       // component was created with isOpen=true; now that it's mounted
       // stop suppressing and start opening
-      // eslint-disable-next-line react/no-did-mount-set-state
       this.setState({ suppressingPopover: false, isOpening: true }, () => {
         this.onOpenPopover();
       });

src/components/search_bar/search_bar.test.tsx

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-/* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react';
 import { act } from 'react-dom/test-utils';
 

src/components/selectable/selectable_list/selectable_list_item.tsx

@@ -86,7 +86,6 @@ export type EuiSelectableListItemProps = LiHTMLAttributes<HTMLLIElement> &
     textWrap?: 'truncate' | 'wrap';
   };
 
-// eslint-disable-next-line react/prefer-stateless-function
 export class EuiSelectableListItem extends Component<
   EuiSelectableListItemProps
 > {
@@ -243,7 +242,6 @@ export class EuiSelectableListItem extends Component<
     switch (checked) {
       case 'on':
         state = screenReaderStrings.checked.state;
-        // eslint-disable-next-line no-nested-ternary
         instructions = allowExclusions
           ? screenReaderStrings.excluded.instructions
           : searchable

src/components/tree_view/tree_view.tsx

@@ -131,7 +131,6 @@ export class EuiTreeView extends Component<EuiTreeViewProps, EuiTreeViewState> {
 
   componentDidUpdate(prevProps: EuiTreeViewProps) {
     if (this.props.id !== prevProps.id) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         treeID: getTreeId(this.props.id, this.context, this.treeIdGenerator),
       });