Update typescript eslint to v4.8

.eslintrc.js

@@ -863,7 +863,8 @@ module.exports = {
         'no-shadow-restricted-names': 'error',
         'no-sparse-arrays': 'error',
         'no-this-before-super': 'error',
-        'no-undef': 'error',
+        // rely on typescript
+        'no-undef': 'off',
         'no-unreachable': 'error',
         'no-unsafe-finally': 'error',
         'no-useless-call': 'error',
@@ -998,7 +999,8 @@ module.exports = {
         'no-shadow-restricted-names': 'error',
         'no-sparse-arrays': 'error',
         'no-this-before-super': 'error',
-        'no-undef': 'error',
+        // rely on typescript
+        'no-undef': 'off',
         'no-unreachable': 'error',
         'no-unsafe-finally': 'error',
         'no-useless-call': 'error',

examples/state_containers_examples/public/todo/todo.tsx

@@ -313,7 +313,7 @@ export const TodoAppPage: React.FC<{
 
 function withDefaultState<State extends BaseState>(
   stateContainer: BaseStateContainer<State>,
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   defaultState: State
 ): INullableBaseStateContainer<State> {
   return {

examples/state_containers_examples/public/with_data_services/components/app.tsx

@@ -180,6 +180,7 @@ function useGlobalStateSyncing(
   }, [query, kbnUrlStateStorage]);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-shadow
 function useAppStateSyncing<AppState extends QueryState>(
   appStateContainer: BaseStateContainer<AppState>,
   query: DataPublicPluginStart['query'],

package.json

@@ -567,8 +567,8 @@
     "@types/xml2js": "^0.4.5",
     "@types/yauzl": "^2.9.1",
     "@types/zen-observable": "^0.8.0",
-    "@typescript-eslint/eslint-plugin": "^3.10.0",
-    "@typescript-eslint/parser": "^3.10.0",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
     "@welldone-software/why-did-you-render": "^5.0.0",
     "@yarnpkg/lockfile": "^1.1.0",
     "abab": "^1.0.4",
@@ -644,7 +644,7 @@
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.4",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-perf": "^3.2.3",
     "expose-loader": "^0.7.5",
     "faker": "1.1.0",

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

@@ -189,6 +189,11 @@ module.exports = {
           '@typescript-eslint/no-extra-non-null-assertion': 'error',
           '@typescript-eslint/no-misused-new': 'error',
           '@typescript-eslint/no-namespace': 'error',
+          '@typescript-eslint/no-shadow': 'error',
+          // rely on typescript
+          '@typescript-eslint/no-undef': 'off',
+          'no-undef': 'off',
+
           '@typescript-eslint/triple-slash-reference': ['error', {
             path: 'never',
             types: 'never',
@@ -218,7 +223,6 @@ module.exports = {
           'no-eval': 'error',
           'no-new-wrappers': 'error',
           'no-script-url': 'error',
-          'no-shadow': 'error',
           'no-throw-literal': 'error',
           'no-undef-init': 'error',
           'no-unsafe-finally': 'error',

src/core/public/utils/crypto/sha256.ts

@@ -130,7 +130,7 @@ type BufferEncoding =
   | 'binary'
   | 'hex';
 
-/* eslint-disable  no-bitwise, no-shadow */
+/* eslint-disable  no-bitwise, @typescript-eslint/no-shadow */
 export class Sha256 {
   private _a: number;
   private _b: number;

src/core/server/http/router/validator/validator.ts

@@ -143,8 +143,8 @@ export type RouteValidatorFullConfig<P, Q, B> = RouteValidatorConfig<P, Q, B> &
  * @internal
  */
 export class RouteValidator<P = {}, Q = {}, B = {}> {
-  public static from<P = {}, Q = {}, B = {}>(
-    opts: RouteValidator<P, Q, B> | RouteValidatorFullConfig<P, Q, B>
+  public static from<_P = {}, _Q = {}, _B = {}>(
+    opts: RouteValidator<_P, _Q, _B> | RouteValidatorFullConfig<_P, _Q, _B>
   ) {
     if (opts instanceof RouteValidator) {
       return opts;

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts

@@ -118,16 +118,16 @@ export const useField = <T, FormType = FormData, I = T>(
    * updating the "value" state.
    */
   const formatInputValue = useCallback(
-    <T>(inputValue: unknown): T => {
+    <U>(inputValue: unknown): U => {
       const isEmptyString = typeof inputValue === 'string' && inputValue.trim() === '';
 
       if (isEmptyString || !formatters) {
-        return inputValue as T;
+        return inputValue as U;
       }
 
       const formData = __getFormData$().value;
 
-      return formatters.reduce((output, formatter) => formatter(output, formData), inputValue) as T;
+      return formatters.reduce((output, formatter) => formatter(output, formData), inputValue) as U;
     },
     [formatters, __getFormData$]
   );

src/plugins/kibana_utils/common/state_containers/create_state_container_react_helpers.test.tsx

@@ -97,11 +97,11 @@ test('context receives stateContainer', () => {
   const { Provider, context } = createStateContainerReactHelpers<typeof stateContainer>();
 
   ReactDOM.render(
-    /* eslint-disable no-shadow */
+    /* eslint-disable @typescript-eslint/no-shadow */
     <Provider value={stateContainer}>
       <context.Consumer>{(stateContainer) => stateContainer.get().foo}</context.Consumer>
     </Provider>,
-    /* eslint-enable no-shadow */
+    /* eslint-enable @typescript-eslint/no-shadow */
     container
   );
 
@@ -116,7 +116,7 @@ describe('hooks', () => {
       const stateContainer = createStateContainer({ foo: 'bar' });
       const { Provider, useContainer } = createStateContainerReactHelpers<typeof stateContainer>();
       const Demo: React.FC<{}> = () => {
-        // eslint-disable-next-line no-shadow
+        // eslint-disable-next-line @typescript-eslint/no-shadow
         const stateContainer = useContainer();
         return <>{stateContainer.get().foo}</>;
       };

src/plugins/kibana_utils/demos/state_sync/url.ts

@@ -56,9 +56,9 @@ export const result = Promise.resolve()
   });
 
 function withDefaultState<State extends BaseState>(
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   stateContainer: BaseStateContainer<State>,
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   defaultState: State
 ): INullableBaseStateContainer<State> {
   return {

src/plugins/kibana_utils/public/state_sync/state_sync.test.ts

@@ -354,7 +354,7 @@ describe('state_sync', () => {
 
 function withDefaultState<State extends BaseState>(
   stateContainer: BaseStateContainer<State>,
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   defaultState: State
 ): INullableBaseStateContainer<State> {
   return {

src/plugins/vis_default_editor/public/components/controls/has_extended_bounds.tsx

@@ -38,7 +38,6 @@ function HasExtendedBoundsParamEditor(props: AggParamEditorProps<boolean>) {
 
       setValue(value && agg.params.min_doc_count);
     }
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [agg.params.min_doc_count, setValue, value]);
 
   return (

src/plugins/visualizations/public/vis.ts

@@ -97,13 +97,13 @@ export class Vis<TVisParams = VisParams> {
   public readonly uiState: PersistedState;
 
   constructor(visType: string, visState: SerializedVis = {} as any) {
-    this.type = this.getType<TVisParams>(visType);
+    this.type = this.getType(visType);
     this.params = this.getParams(visState.params);
     this.uiState = new PersistedState(visState.uiState);
     this.id = visState.id;
   }
 
-  private getType<TVisParams>(visType: string) {
+  private getType(visType: string) {
     const type = getTypes().get<TVisParams>(visType);
     if (!type) {
       const errorMessage = i18n.translate('visualizations.visualizationTypeInvalidMessage', {

tsconfig.base.json

@@ -53,7 +53,6 @@
     "types": [
       "node",
       "jest",
-      "react",
       "flot",
       "jest-styled-components",
       "@testing-library/jest-dom"

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.tsx

@@ -81,7 +81,6 @@ export function AgentConfigurationCreateEdit({
       ..._newConfig,
       settings: existingConfig?.settings || {},
     }));
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [existingConfig]);
 
   // update newConfig when existingConfig has loaded

x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx

@@ -65,7 +65,6 @@ export function TransactionActionMenu({ transaction }: Props) {
         { key: 'transaction.name', value: transaction?.transaction.name },
         { key: 'transaction.type', value: transaction?.transaction.type },
       ].filter((filter): filter is Filter => typeof filter.value === 'string'),
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [transaction]
   );
 

x-pack/plugins/apm/typings/common.d.ts

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
+import type { UnwrapPromise } from '@kbn/utility-types';
 import '../../../typings/rison_node';
 import '../../infra/types/eui';
 // EUIBasicTable
@@ -21,8 +21,6 @@ type AllowUnknownObjectProperties<T> = T extends object
     }
   : T;
 
-export type PromiseValueType<Value> = Value extends Promise<infer Value>
-  ? Value
-  : Value;
+export type PromiseValueType<T extends Promise<any>> = UnwrapPromise<T>;
 
 export type Maybe<T> = T | null | undefined;

x-pack/plugins/canvas/shareable_runtime/components/__tests__/app.test.tsx

@@ -39,7 +39,7 @@ jest.mock('../../supported_renderers');
 jest.mock('@elastic/eui/lib/components/portal/portal', () => {
   // Local constants are not supported in Jest mocks-- they must be
   // imported within the mock.
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   const React = jest.requireActual('react');
   return {
     EuiPortal: (props: any) => <div>{props.children}</div>,

x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx

@@ -25,7 +25,7 @@ jest.mock('@elastic/eui/lib/services/accessibility', () => {
   };
 });
 jest.mock('@elastic/eui/lib/components/portal/portal', () => {
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   const React = jest.requireActual('react');
   return {
     EuiPortal: (props: any) => <div>{props.children}</div>,

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/package_policy_input_config.tsx

@@ -47,6 +47,7 @@ export const PackagePolicyInputConfig: React.FunctionComponent<{
     const hasErrors = forceShowErrors && validationHasErrors(inputVarsValidationResults);
 
     const requiredVars: RegistryVarsEntry[] = [];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const advancedVars: RegistryVarsEntry[] = [];
 
     if (packageInputVars) {

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/package_policy_input_stream.tsx

@@ -49,6 +49,7 @@ export const PackagePolicyInputStreamConfig: React.FunctionComponent<{
     const hasErrors = forceShowErrors && validationHasErrors(inputStreamValidationResults);
 
     const requiredVars: RegistryVarsEntry[] = [];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const advancedVars: RegistryVarsEntry[] = [];
 
     if (packageInputStream.vars && packageInputStream.vars.length) {

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/step_select_agent_policy.tsx

@@ -91,6 +91,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
     sortOrder: 'asc',
     full: true,
   });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const agentPolicies = agentPoliciesData?.items || [];
   const agentPoliciesById = agentPolicies.reduce(
     (acc: { [key: string]: GetAgentPoliciesResponseItem }, policy) => {
@@ -131,6 +132,7 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
     }
   }, [selectedPolicyId, agentPolicy, updateAgentPolicy, setIsLoadingSecondStep]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const agentPolicyOptions: Array<EuiComboBoxOptionOption<string>> = packageInfoData
     ? agentPolicies.map((agentConf) => {
         const alreadyHasLimitedPackage =

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx

@@ -278,6 +278,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
     perPage: 1000,
   });
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const agentPolicies = agentPoliciesRequest.data ? agentPoliciesRequest.data.items : [];
   const agentPoliciesIndexedById = useMemo(() => {
     return agentPolicies.reduce((acc, agentPolicy) => {

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_reassign_policy_flyout/index.tsx

@@ -49,6 +49,7 @@ export const AgentReassignAgentPolicyFlyout: React.FunctionComponent<Props> = ({
     page: 1,
     perPage: 1000,
   });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const agentPolicies = agentPoliciesRequest.data ? agentPoliciesRequest.data.items : [];
   useEffect(() => {
     if (!selectedAgentPolicyId && agentPolicies[0]) {

x-pack/plugins/fleet/public/applications/fleet/sections/epm/components/package_list_grid.tsx

@@ -37,7 +37,7 @@ export function PackageListGrid({ isLoading, controls, title, list }: ListProps)
   const localSearchRef = useLocalSearch(list);
 
   const onQueryChange = ({
-    // eslint-disable-next-line no-shadow
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     query,
     queryText: userInput,
     error,

x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx

@@ -105,6 +105,7 @@ export const TemplateForm = ({
     aliases: true,
   });
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const indexTemplate = defaultValue ?? {
     name: '',
     indexPatterns: [],

x-pack/plugins/infra/public/alerting/inventory/components/expression.tsx

@@ -147,7 +147,6 @@ export const Expressions: React.FC<Props> = (props) => {
       timeUnit: timeUnit ?? defaultExpression.timeUnit,
     });
     setAlertParams('criteria', exp);
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [setAlertParams, alertParams.criteria, timeSize, timeUnit]);
 
   const removeExpression = useCallback(

x-pack/plugins/infra/public/alerting/inventory/components/metric.tsx

@@ -91,6 +91,7 @@ export const MetricExpression = ({
   const [selectedOption, setSelectedOption] = useState(metric?.value);
   const [fieldDisplayedCustomLabel, setFieldDisplayedCustomLabel] = useState(customMetric?.label);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const firstFieldOption = {
     text: i18n.translate('xpack.infra.metrics.alertFlyout.expression.metric.selectFieldLabel', {
       defaultMessage: 'Select a metric',
@@ -106,16 +107,11 @@ export const MetricExpression = ({
     [fields, customMetric?.field]
   );
 
-  const expressionDisplayValue = useMemo(
-    () => {
-      return customMetricTabOpen
-        ? customMetric?.field && getCustomMetricLabel(customMetric)
-        : metric?.text || firstFieldOption.text;
-    },
-    // The ?s are confusing eslint here, so...
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [customMetricTabOpen, metric, customMetric, firstFieldOption]
-  );
+  const expressionDisplayValue = useMemo(() => {
+    return customMetricTabOpen
+      ? customMetric?.field && getCustomMetricLabel(customMetric)
+      : metric?.text || firstFieldOption.text;
+  }, [customMetricTabOpen, metric, customMetric, firstFieldOption]);
 
   const onChangeTab = useCallback(
     (id) => {

x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/editor.tsx

@@ -157,7 +157,6 @@ export const Editor: React.FC<Props> = (props) => {
     } else {
       return [];
     }
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [sourceStatus]);
 
   const groupByFields = useMemo(() => {
@@ -168,7 +167,6 @@ export const Editor: React.FC<Props> = (props) => {
     } else {
       return [];
     }
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [sourceStatus]);
 
   const updateThreshold = useCallback(