[7.x] [Logs + Metrics UI] Remove eslint exceptions (#50979) (#52933)

Backports the following commits to 7.x:
 - [Logs + Metrics UI] Remove eslint exceptions (#50979)

Author: weltenwort

.eslintrc.js

@@ -170,13 +170,6 @@ module.exports = {
         'react-hooks/rules-of-hooks': 'off',
       },
     },
-    {
-      files: ['x-pack/legacy/plugins/infra/**/*.{js,ts,tsx}'],
-      rules: {
-        'react-hooks/exhaustive-deps': 'off',
-        'react-hooks/rules-of-hooks': 'off',
-      },
-    },
     {
       files: ['x-pack/legacy/plugins/lens/**/*.{js,ts,tsx}'],
       rules: {

x-pack/legacy/plugins/infra/public/components/formatted_time.tsx

@@ -37,7 +37,6 @@ export const useFormattedTime = (
 
   const dateFormat = formatMap[format];
   const formattedTime = useMemo(() => getFormattedTime(time, dateFormat, fallbackFormat), [
-    getFormattedTime,
     time,
     dateFormat,
     fallbackFormat,

x-pack/legacy/plugins/infra/public/components/logging/log_entry_flyout/log_entry_actions_menu.tsx

@@ -51,7 +51,7 @@ export const LogEntryActionsMenu: React.FunctionComponent<{
         />
       </EuiContextMenuItem>,
     ],
-    [uptimeLink]
+    [apmLink, uptimeLink]
   );
 
   const hasMenuItems = useMemo(() => menuItems.length > 0, [menuItems]);

x-pack/legacy/plugins/infra/public/components/logging/log_highlights_menu.tsx

@@ -16,7 +16,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { debounce } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import euiStyled from '../../../../../common/eui_styled_components';
 import { useVisibilityState } from '../../utils/use_visibility_state';
@@ -47,8 +47,25 @@ export const LogHighlightsMenu: React.FC<LogHighlightsMenuProps> = ({
   } = useVisibilityState(false);
 
   // Input field state
-  const [highlightTerm, setHighlightTerm] = useState('');
+  const [highlightTerm, _setHighlightTerm] = useState('');
+
   const debouncedOnChange = useMemo(() => debounce(onChange, 275), [onChange]);
+  const setHighlightTerm = useCallback<typeof _setHighlightTerm>(
+    valueOrUpdater =>
+      _setHighlightTerm(previousHighlightTerm => {
+        const newHighlightTerm =
+          typeof valueOrUpdater === 'function'
+            ? valueOrUpdater(previousHighlightTerm)
+            : valueOrUpdater;
+
+        if (newHighlightTerm !== previousHighlightTerm) {
+          debouncedOnChange([newHighlightTerm]);
+        }
+
+        return newHighlightTerm;
+      }),
+    [debouncedOnChange]
+  );
   const changeHighlightTerm = useCallback(
     e => {
       const value = e.target.value;
@@ -57,9 +74,6 @@ export const LogHighlightsMenu: React.FC<LogHighlightsMenuProps> = ({
     [setHighlightTerm]
   );
   const clearHighlightTerm = useCallback(() => setHighlightTerm(''), [setHighlightTerm]);
-  useEffect(() => {
-    debouncedOnChange([highlightTerm]);
-  }, [highlightTerm]);
 
   const button = (
     <EuiButtonEmpty color="text" size="xs" iconType="brush" onClick={togglePopover}>

x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx

@@ -63,7 +63,7 @@ export const useMeasuredCharacterDimensions = (scale: TextScale) => {
         X
       </MonospaceCharacterDimensionsProbe>
     ),
-    [scale]
+    [measureElement, scale]
   );
 
   return {

x-pack/legacy/plugins/infra/public/components/metrics_explorer/metrics.tsx

@@ -7,7 +7,7 @@
 import { EuiComboBox } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState } from 'react';
 import { FieldType } from 'ui/index_patterns';
 import { colorTransformer, MetricsExplorerColor } from '../../../common/color_palette';
 import {
@@ -31,24 +31,19 @@ interface SelectedOption {
 
 export const MetricsExplorerMetrics = ({ options, onChange, fields, autoFocus = false }: Props) => {
   const colors = Object.keys(MetricsExplorerColor) as MetricsExplorerColor[];
-  const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
-  const [focusOnce, setFocusState] = useState<boolean>(false);
+  const [shouldFocus, setShouldFocus] = useState(autoFocus);
 
-  useEffect(() => {
-    if (inputRef && autoFocus && !focusOnce) {
-      inputRef.focus();
-      setFocusState(true);
-    }
-  }, [inputRef]);
+  // the EuiCombobox forwards the ref to an input element
+  const autoFocusInputElement = useCallback(
+    (inputElement: HTMLInputElement | null) => {
+      if (inputElement && shouldFocus) {
+        inputElement.focus();
+        setShouldFocus(false);
+      }
+    },
+    [shouldFocus]
+  );
 
-  // I tried to use useRef originally but the EUIComboBox component's type definition
-  // would only accept an actual input element or a callback function (with the same type).
-  // This effectivly does the same thing but is compatible with EuiComboBox.
-  const handleInputRef = (ref: HTMLInputElement) => {
-    if (ref) {
-      setInputRef(ref);
-    }
-  };
   const handleChange = useCallback(
     selectedOptions => {
       onChange(
@@ -59,7 +54,7 @@ export const MetricsExplorerMetrics = ({ options, onChange, fields, autoFocus =
         }))
       );
     },
-    [options, onChange]
+    [onChange, options.aggregation, colors]
   );
 
   const comboOptions = fields
@@ -86,7 +81,7 @@ export const MetricsExplorerMetrics = ({ options, onChange, fields, autoFocus =
       selectedOptions={selectedOptions}
       onChange={handleChange}
       isClearable={true}
-      inputRef={handleInputRef}
+      inputRef={autoFocusInputElement}
     />
   );
 };

x-pack/legacy/plugins/infra/public/components/saved_views/create_modal.tsx

@@ -36,7 +36,7 @@ export const SavedViewCreateModal = ({ close, save, isInvalid }: Props) => {
 
   const saveView = useCallback(() => {
     save(viewName, includeTime);
-  }, [viewName, includeTime]);
+  }, [includeTime, save, viewName]);
 
   return (
     <EuiOverlayMask>

x-pack/legacy/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx

@@ -94,7 +94,7 @@ export const AddLogColumnButtonAndPopover: React.FunctionComponent<{
 
       addLogColumn(selectedOption.columnConfiguration);
     },
-    [addLogColumn, availableColumnOptions]
+    [addLogColumn, availableColumnOptions, closePopover]
   );
 
   return (

x-pack/legacy/plugins/infra/public/components/source_configuration/source_configuration_form_state.tsx

@@ -52,7 +52,7 @@ export const useSourceConfigurationFormState = (configuration?: SourceConfigurat
   const resetForm = useCallback(() => {
     indicesConfigurationFormState.resetForm();
     logColumnsConfigurationFormState.resetForm();
-  }, [indicesConfigurationFormState.resetForm, logColumnsConfigurationFormState.formState]);
+  }, [indicesConfigurationFormState, logColumnsConfigurationFormState]);
 
   const isFormDirty = useMemo(
     () => indicesConfigurationFormState.isFormDirty || logColumnsConfigurationFormState.isFormDirty,

x-pack/legacy/plugins/infra/public/components/waffle/waffle_inventory_switcher.tsx

@@ -17,28 +17,33 @@ import {
 } from '../../graphql/types';
 import { findInventoryModel } from '../../../common/inventory_models';
 
-interface Props {
+interface WaffleInventorySwitcherProps {
   nodeType: InfraNodeType;
   changeNodeType: (nodeType: InfraNodeType) => void;
   changeGroupBy: (groupBy: InfraSnapshotGroupbyInput[]) => void;
   changeMetric: (metric: InfraSnapshotMetricInput) => void;
 }
 
-export const WaffleInventorySwitcher = (props: Props) => {
+export const WaffleInventorySwitcher: React.FC<WaffleInventorySwitcherProps> = ({
+  changeNodeType,
+  changeGroupBy,
+  changeMetric,
+  nodeType,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const closePopover = useCallback(() => setIsOpen(false), []);
   const openPopover = useCallback(() => setIsOpen(true), []);
   const goToNodeType = useCallback(
-    (nodeType: InfraNodeType) => {
+    (targetNodeType: InfraNodeType) => {
       closePopover();
-      props.changeNodeType(nodeType);
-      props.changeGroupBy([]);
-      const inventoryModel = findInventoryModel(nodeType);
-      props.changeMetric({
+      changeNodeType(targetNodeType);
+      changeGroupBy([]);
+      const inventoryModel = findInventoryModel(targetNodeType);
+      changeMetric({
         type: inventoryModel.metrics.defaultSnapshot as InfraSnapshotMetricType,
       });
     },
-    [props.changeGroupBy, props.changeNodeType, props.changeMetric]
+    [closePopover, changeNodeType, changeGroupBy, changeMetric]
   );
   const goToHost = useCallback(() => goToNodeType('host' as InfraNodeType), [goToNodeType]);
   const goToK8 = useCallback(() => goToNodeType('pod' as InfraNodeType), [goToNodeType]);
@@ -68,10 +73,10 @@ export const WaffleInventorySwitcher = (props: Props) => {
         ],
       },
     ],
-    []
+    [goToDocker, goToHost, goToK8]
   );
   const selectedText = useMemo(() => {
-    switch (props.nodeType) {
+    switch (nodeType) {
       case InfraNodeType.host:
         return i18n.translate('xpack.infra.waffle.nodeTypeSwitcher.hostsLabel', {
           defaultMessage: 'Hosts',
@@ -81,7 +86,7 @@ export const WaffleInventorySwitcher = (props: Props) => {
       case InfraNodeType.container:
         return 'Docker';
     }
-  }, [props.nodeType]);
+  }, [nodeType]);
 
   return (
     <EuiFilterGroup>