[SIEM] Add react/display-name eslint rule

.eslintrc.js

@@ -749,6 +749,7 @@ module.exports = {
         // 'prefer-template': 'warn',
         'react/boolean-prop-naming': 'error',
         'react/button-has-type': 'error',
+        'react/display-name': 'error',
         'react/forbid-dom-props': 'error',
         'react/no-access-state-in-setstate': 'error',
         // This style will be turned on after most bugs are fixed

x-pack/legacy/plugins/siem/public/apps/start_app.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { createHashHistory } from 'history';
 import React, { memo, FC } from 'react';
 import { ApolloProvider } from 'react-apollo';

x-pack/legacy/plugins/siem/public/components/alerts_viewer/alerts_table.tsx

@@ -51,33 +51,35 @@ const defaultAlertsFilters: esFilters.Filter[] = [
   },
 ];
 
-export const AlertsTable = React.memo(
-  ({
-    endDate,
-    startDate,
-    pageFilters = [],
-  }: {
-    endDate: number;
-    startDate: number;
-    pageFilters?: esFilters.Filter[];
-  }) => {
-    const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
-    return (
-      <StatefulEventsViewer
-        pageFilters={alertsFilter}
-        defaultModel={alertsDefaultModel}
-        end={endDate}
-        id={ALERTS_TABLE_ID}
-        start={startDate}
-        timelineTypeContext={useMemo(
-          () => ({
-            documentType: i18n.ALERTS_DOCUMENT_TYPE,
-            footerText: i18n.TOTAL_COUNT_OF_ALERTS,
-            title: i18n.ALERTS_TABLE_TITLE,
-          }),
-          []
-        )}
-      />
-    );
-  }
-);
+interface Props {
+  endDate: number;
+  startDate: number;
+  pageFilters?: esFilters.Filter[];
+}
+
+const AlertsTableComponent: React.FC<Props> = ({ endDate, startDate, pageFilters = [] }) => {
+  const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
+  return (
+    <StatefulEventsViewer
+      pageFilters={alertsFilter}
+      defaultModel={alertsDefaultModel}
+      end={endDate}
+      id={ALERTS_TABLE_ID}
+      start={startDate}
+      timelineTypeContext={useMemo(
+        () => ({
+          documentType: i18n.ALERTS_DOCUMENT_TYPE,
+          footerText: i18n.TOTAL_COUNT_OF_ALERTS,
+          title: i18n.ALERTS_TABLE_TITLE,
+        }),
+        []
+      )}
+    />
+  );
+};
+
+AlertsTableComponent.displayName = 'AlertsTableComponent';
+
+export const AlertsTable = React.memo(AlertsTableComponent);
+
+AlertsTable.displayName = 'AlertsTable';

x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import {
   EuiCheckbox,
   EuiFlexGroup,

x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import {
   EuiIcon,
   EuiFlexGroup,

x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx

@@ -237,3 +237,5 @@ export const FieldsBrowser = React.memo<Props>(
     );
   }
 );
+
+FieldsBrowser.displayName = 'FieldsBrowser';

x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { EuiCheckbox, EuiIcon, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { uniqBy } from 'lodash/fp';
 import * as React from 'react';

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

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { EuiLink, EuiTableRow, EuiTableRowCell, EuiText, EuiToolTip } from '@elastic/eui';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';

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

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { shallow } from 'enzyme';
 import * as React from 'react';
 

x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import { Columns } from '../../paginated_table';

x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 

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

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import chrome from 'ui/chrome';
 import React, { useEffect, useState } from 'react';
 

x-pack/legacy/plugins/siem/public/components/notes/columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import * as React from 'react';
 
 import { EuiTableDataType } from '@elastic/eui';

x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import * as React from 'react';
 

x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { EuiButtonIcon, EuiLink } from '@elastic/eui';
 import { omit } from 'lodash/fp';
 import * as React from 'react';

x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import * as React from 'react';
 
 import { defaultToEmptyTag } from '../../empty_value';

x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { EuiIcon, EuiToolTip } from '@elastic/eui';
 import * as React from 'react';
 

x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { has } from 'lodash/fp';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';

x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';

x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx

@@ -146,6 +146,8 @@ export const KpiNetworkBaseComponent = React.memo<{
   );
 });
 
+KpiNetworkBaseComponent.displayName = 'KpiNetworkBaseComponent';
+
 export const KpiNetworkComponent = React.memo<KpiNetworkProps>(
   ({ data, from, id, loading, to, narrowDateRange }) => {
     return loading ? (

x-pack/legacy/plugins/siem/public/components/page/network/network_http_table/columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import React from 'react';
 import numeral from '@elastic/numeral';
 import { NetworkHttpEdges, NetworkHttpFields, NetworkHttpItem } from '../../../../graphql/types';

x-pack/legacy/plugins/siem/public/components/page/network/tls_table/columns.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import React from 'react';
 import moment from 'moment';
 import { TlsNode } from '../../../../graphql/types';

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

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import { mount, ReactWrapper } from 'enzyme';
 import toJson from 'enzyme-to-json';

x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx

@@ -108,6 +108,8 @@ const Attributes = React.memo<AttributesProps>(({ children }) => {
   );
 });
 
+Attributes.displayName = 'Attributes';
+
 export const StatefulEvent = React.memo<Props>(
   ({
     actionsColumnWidth,

x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { IconType } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import React from 'react';

x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import * as React from 'react';
 
 import { TimelineNonEcsData } from '../../../../graphql/types';

x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { get } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';

x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import React from 'react';
 
 import { RowRenderer } from './row_renderer';

x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { get } from 'lodash/fp';
 import React from 'react';
 

x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { get } from 'lodash/fp';
 import React from 'react';
 

x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import { get } from 'lodash/fp';
 import React from 'react';
 

x-pack/legacy/plugins/siem/public/components/timeline/refetch_timeline.tsx

@@ -43,6 +43,8 @@ const TimelineRefetchComponent = memo<OwnProps>(
   }
 );
 
+TimelineRefetchComponent.displayName = 'TimelineRefetchComponent';
+
 export const TimelineRefetch = compose<React.ComponentClass<TimelineRefetchProps>>(
   connect(null, {
     setTimelineQuery: inputsActions.setQuery,

x-pack/legacy/plugins/siem/public/components/timeline/timeline_context.tsx

@@ -72,3 +72,5 @@ export const ManageTimelineContext = memo<ManageTimelineContextProps>(
     );
   }
 );
+
+ManageTimelineContext.displayName = 'ManageTimelineContext';

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

@@ -49,3 +49,5 @@ export const UseUrlState = React.memo<UrlStateProps>(props => {
   };
   return <UrlStateRedux {...urlStateReduxProps} />;
 });
+
+UseUrlState.displayName = 'UseUrlState';

x-pack/legacy/plugins/siem/public/containers/global_time/index.tsx

@@ -75,6 +75,8 @@ export const GlobalTimeComponent = React.memo(
   }
 );
 
+GlobalTimeComponent.displayName = 'GlobalTimeComponent';
+
 const mapStateToProps = (state: State) => {
   const timerange: inputsModel.TimeRange = inputsSelectors.globalTimeRangeSelector(state);
   return {

x-pack/legacy/plugins/siem/public/containers/timeline/all/index.tsx

@@ -100,3 +100,5 @@ export const AllTimelinesQuery = React.memo<OwnProps>(
     );
   }
 );
+
+AllTimelinesQuery.displayName = 'AllTimelinesQuery';

x-pack/legacy/plugins/siem/public/containers/timeline/details/index.tsx

@@ -62,3 +62,5 @@ export const TimelineDetailsComponentQuery = React.memo<TimelineDetailsProps>(
     );
   }
 );
+
+TimelineDetailsComponentQuery.displayName = 'TimelineDetailsComponentQuery';

x-pack/legacy/plugins/siem/public/mock/kibana_react.ts

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/* eslint-disable react/display-name */
+
 import React from 'react';
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 

x-pack/legacy/plugins/siem/public/mock/test_providers.tsx

@@ -77,10 +77,14 @@ export const TestProviders = React.memo<Props>(
   )
 );
 
+TestProviders.displayName = 'TestProviders';
+
 export const TestProviderWithoutDragAndDrop = React.memo<Props>(
   ({ children, store = createStore(state, apolloClientObservable) }) => (
     <I18nProvider>
       <ReduxStoreProvider store={store}>{children}</ReduxStoreProvider>
     </I18nProvider>
   )
 );
+
+TestProviderWithoutDragAndDrop.displayName = 'TestProviderWithoutDragAndDrop';