[SIEM] Fix eslint errors from jsx-no-bind #1

x-pack/legacy/plugins/siem/public/components/flow_controls/flow_target_select.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiSuperSelect } from '@elastic/eui';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { ActionCreator } from 'typescript-fsa';
 
 import { FlowDirection, FlowTarget } from '../../graphql/types';
@@ -65,22 +65,27 @@ export const FlowTargetSelect = React.memo<FlowTargetSelectProps>(
     selectedTarget,
     displayTextOverride = [],
     updateFlowTargetAction,
-  }) => (
-    <EuiSuperSelect
-      options={
-        selectedDirection
-          ? toggleTargetOptions(id, displayTextOverride).filter(option =>
-              option.directions.includes(selectedDirection)
-            )
-          : toggleTargetOptions(id, displayTextOverride)
-      }
-      valueOfSelected={selectedTarget}
-      onChange={(newFlowTarget: FlowTarget) =>
-        onChangeTarget(newFlowTarget, updateFlowTargetAction)
-      }
-      isLoading={isLoading}
-    />
-  )
+  }) => {
+    const handleChange = useCallback(
+      (newFlowTarget: FlowTarget) => onChangeTarget(newFlowTarget, updateFlowTargetAction),
+      [updateFlowTargetAction]
+    );
+
+    return (
+      <EuiSuperSelect
+        options={
+          selectedDirection
+            ? toggleTargetOptions(id, displayTextOverride).filter(option =>
+                option.directions.includes(selectedDirection)
+              )
+            : toggleTargetOptions(id, displayTextOverride)
+        }
+        valueOfSelected={selectedTarget}
+        onChange={handleChange}
+        isLoading={isLoading}
+      />
+    );
+  }
 );
 
 FlowTargetSelect.displayName = 'FlowTargetSelect';

x-pack/legacy/plugins/siem/public/components/inspect/index.tsx

@@ -6,7 +6,7 @@
 
 import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui';
 import { getOr } from 'lodash/fp';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
 import styled from 'styled-components';
@@ -72,72 +72,71 @@ const InspectButtonComponent = React.memo<InspectButtonProps>(
     setIsInspected,
     show,
     title = '',
-  }: InspectButtonProps) => (
-    <InspectContainer
-      data-test-subj={`${show ? 'opaque' : 'transparent'}-inspect-container`}
-      showInspect={show}
-    >
-      {inputId === 'timeline' && !compact && (
-        <EuiButtonEmpty
-          aria-label={i18n.INSPECT}
-          data-test-subj="inspect-empty-button"
-          color="text"
-          iconSide="left"
-          iconType="inspect"
-          isDisabled={loading || isDisabled}
-          isLoading={loading}
-          onClick={() => {
-            setIsInspected({
-              id: queryId,
-              inputId,
-              isInspected: true,
-              selectedInspectIndex: inspectIndex,
-            });
-          }}
-        >
-          {i18n.INSPECT}
-        </EuiButtonEmpty>
-      )}
-      {(inputId === 'global' || compact) && (
-        <EuiButtonIcon
-          aria-label={i18n.INSPECT}
-          data-test-subj="inspect-icon-button"
-          iconSize="m"
-          iconType="inspect"
-          isDisabled={loading || isDisabled}
-          title={i18n.INSPECT}
-          onClick={() => {
-            setIsInspected({
-              id: queryId,
-              inputId,
-              isInspected: true,
-              selectedInspectIndex: inspectIndex,
-            });
-          }}
-        />
-      )}
-      <ModalInspectQuery
-        closeModal={() => {
-          if (onCloseInspect != null) {
-            onCloseInspect();
+  }: InspectButtonProps) => {
+    const handleClick = useCallback(() => {
+      setIsInspected({
+        id: queryId,
+        inputId,
+        isInspected: true,
+        selectedInspectIndex: inspectIndex,
+      });
+    }, [setIsInspected, queryId, inputId, inspectIndex]);
+
+    const handleCloseModal = useCallback(() => {
+      if (onCloseInspect != null) {
+        onCloseInspect();
+      }
+      setIsInspected({
+        id: queryId,
+        inputId,
+        isInspected: false,
+        selectedInspectIndex: inspectIndex,
+      });
+    }, [onCloseInspect, setIsInspected, queryId, inputId, inspectIndex]);
+
+    return (
+      <InspectContainer
+        data-test-subj={`${show ? 'opaque' : 'transparent'}-inspect-container`}
+        showInspect={show}
+      >
+        {inputId === 'timeline' && !compact && (
+          <EuiButtonEmpty
+            aria-label={i18n.INSPECT}
+            data-test-subj="inspect-empty-button"
+            color="text"
+            iconSide="left"
+            iconType="inspect"
+            isDisabled={loading || isDisabled}
+            isLoading={loading}
+            onClick={handleClick}
+          >
+            {i18n.INSPECT}
+          </EuiButtonEmpty>
+        )}
+        {(inputId === 'global' || compact) && (
+          <EuiButtonIcon
+            aria-label={i18n.INSPECT}
+            data-test-subj="inspect-icon-button"
+            iconSize="m"
+            iconType="inspect"
+            isDisabled={loading || isDisabled}
+            title={i18n.INSPECT}
+            onClick={handleClick}
+          />
+        )}
+        <ModalInspectQuery
+          closeModal={handleCloseModal}
+          isShowing={!loading && selectedInspectIndex === inspectIndex && isInspected}
+          request={inspect != null && inspect.dsl.length > 0 ? inspect.dsl[inspectIndex] : null}
+          response={
+            inspect != null && inspect.response.length > 0 ? inspect.response[inspectIndex] : null
           }
-          setIsInspected({
-            id: queryId,
-            inputId,
-            isInspected: false,
-            selectedInspectIndex: inspectIndex,
-          });
-        }}
-        isShowing={!loading && selectedInspectIndex === inspectIndex && isInspected}
-        request={inspect != null && inspect.dsl.length > 0 ? inspect.dsl[inspectIndex] : null}
-        response={
-          inspect != null && inspect.response.length > 0 ? inspect.response[inspectIndex] : null
-        }
-        title={title}
-        data-test-subj="inspect-modal"
-      />
-    </InspectContainer>
-  )
+          title={title}
+          data-test-subj="inspect-modal"
+        />
+      </InspectContainer>
+    );
+  }
 );
 
 InspectButtonComponent.displayName = 'InspectButtonComponent';

x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { ScaleType } from '@elastic/charts';
 
 import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
@@ -56,12 +56,15 @@ export const MatrixHistogram = ({
     }
   }, [loading]);
 
+  const handleOnMouseEnter = useCallback(() => setShowInspect(true), []);
+  const handleOnMouseLeave = useCallback(() => setShowInspect(false), []);
+
   return (
     <Panel
       data-test-subj={`${dataKey}Panel`}
       loading={loading}
-      onMouseEnter={() => setShowInspect(true)}
-      onMouseLeave={() => setShowInspect(false)}
+      onMouseEnter={handleOnMouseEnter}
+      onMouseLeave={handleOnMouseLeave}
     >
       <HeaderSection
         id={id}

x-pack/legacy/plugins/siem/public/components/ml/score/draggable_score.tsx

@@ -20,41 +20,45 @@ export const DraggableScoreComponent = ({
   id: string;
   index?: number;
   score: Anomaly;
-}): JSX.Element => (
-  <DraggableWrapper
-    key={`draggable-score-draggable-wrapper-${id}`}
-    dataProvider={{
-      and: [],
-      enabled: true,
-      id,
-      name: score.entityName,
-      excluded: false,
-      kqlQuery: '',
-      queryMatch: {
-        field: score.entityName,
-        value: score.entityValue,
-        operator: IS_OPERATOR,
-      },
-    }}
-    render={(dataProvider, _, snapshot) =>
-      snapshot.isDragging ? (
-        <DragEffects>
-          <Provider dataProvider={dataProvider} />
-        </DragEffects>
-      ) : (
-        <>
-          {index !== 0 && (
-            <>
-              {','}
-              <Spacer />
-            </>
-          )}
-          {getScoreString(score.severity)}
-        </>
-      )
-    }
-  />
-);
+}): JSX.Element => {
+  const scoreString = getScoreString(score.severity);
+
+  return (
+    <DraggableWrapper
+      key={`draggable-score-draggable-wrapper-${id}`}
+      dataProvider={{
+        and: [],
+        enabled: true,
+        id,
+        name: score.entityName,
+        excluded: false,
+        kqlQuery: '',
+        queryMatch: {
+          field: score.entityName,
+          value: score.entityValue,
+          operator: IS_OPERATOR,
+        },
+      }}
+      render={(dataProvider, _, snapshot) =>
+        snapshot.isDragging ? (
+          <DragEffects>
+            <Provider dataProvider={dataProvider} />
+          </DragEffects>
+        ) : (
+          <>
+            {index !== 0 && (
+              <>
+                {','}
+                <Spacer />
+              </>
+            )}
+            {scoreString}
+          </>
+        )
+      }
+    />
+  );
+};
 
 DraggableScoreComponent.displayName = 'DraggableScoreComponent';
 

x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useState, useCallback } from 'react';
 
 import {
   EuiFilterButton,
@@ -42,6 +42,21 @@ export const JobsTableFiltersComponent = ({ siemJobs, onFilterChanged }: JobsTab
     onFilterChanged({ filterQuery, showCustomJobs, showElasticJobs, selectedGroups });
   }, [filterQuery, selectedGroups.sort().join(), showCustomJobs, showElasticJobs]);
 
+  const handleChange = useCallback(
+    (query: EuiSearchBarQuery) => setFilterQuery(query.queryText.trim()),
+    [setFilterQuery]
+  );
+
+  const handleElasticJobsClick = useCallback(() => {
+    setShowElasticJobs(!showElasticJobs);
+    setShowCustomJobs(false);
+  }, [setShowElasticJobs, showElasticJobs, setShowCustomJobs]);
+
+  const handleCustomJobsClick = useCallback(() => {
+    setShowCustomJobs(!showCustomJobs);
+    setShowElasticJobs(false);
+  }, [setShowElasticJobs, showCustomJobs, setShowCustomJobs]);
+
   return (
     <EuiFlexGroup gutterSize="m" justifyContent="flexEnd">
       <EuiFlexItem grow={true}>
@@ -51,7 +66,7 @@ export const JobsTableFiltersComponent = ({ siemJobs, onFilterChanged }: JobsTab
             placeholder: i18n.FILTER_PLACEHOLDER,
             incremental: true,
           }}
-          onChange={(query: EuiSearchBarQuery) => setFilterQuery(query.queryText.trim())}
+          onChange={handleChange}
         />
       </EuiFlexItem>
 
@@ -65,21 +80,15 @@ export const JobsTableFiltersComponent = ({ siemJobs, onFilterChanged }: JobsTab
         <EuiFilterGroup>
           <EuiFilterButton
             hasActiveFilters={showElasticJobs}
-            onClick={() => {
-              setShowElasticJobs(!showElasticJobs);
-              setShowCustomJobs(false);
-            }}
+            onClick={handleElasticJobsClick}
             data-test-subj="show-elastic-jobs-filter-button"
             withNext
           >
             {i18n.SHOW_ELASTIC_JOBS}
           </EuiFilterButton>
           <EuiFilterButton
             hasActiveFilters={showCustomJobs}
-            onClick={() => {
-              setShowCustomJobs(!showCustomJobs);
-              setShowElasticJobs(false);
-            }}
+            onClick={handleCustomJobsClick}
             data-test-subj="show-custom-jobs-filter-button"
           >
             {i18n.SHOW_CUSTOM_JOBS}