[SIEM] Add react/display-name eslint rule (elastic#53107)

patrykkopycinski · Jan 7, 2020 · 4889510 · 4889510
1 parent a6ea611
commit 4889510
Show file tree

Hide file tree

Showing 53 changed files with 837 additions and 703 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -762,6 +762,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

diff --git a/x-pack/legacy/plugins/siem/public/apps/start_app.tsx b/x-pack/legacy/plugins/siem/public/apps/start_app.tsx
@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { createHashHistory } from 'history';
-import React, { memo, FC } from 'react';
+import { createHashHistory, History } from 'history';
+import React, { memo, useMemo, FC } from 'react';
 import { ApolloProvider } from 'react-apollo';
+import { Store } from 'redux';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 
@@ -23,7 +24,7 @@ import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
 import { DEFAULT_DARK_MODE } from '../../common/constants';
 import { ErrorToastDispatcher } from '../components/error_toast_dispatcher';
 import { compose } from '../lib/compose/kibana_compose';
-import { AppFrontendLibs } from '../lib/lib';
+import { AppFrontendLibs, AppApolloClient } from '../lib/lib';
 import { StartCore, StartPlugins } from './plugin';
 import { PageRouter } from '../routes';
 import { createStore } from '../store/store';
@@ -32,48 +33,70 @@ import { MlCapabilitiesProvider } from '../components/ml/permissions/ml_capabili
 
 import { ApolloClientContext } from '../utils/apollo_context';
 
-const StartApp: FC<AppFrontendLibs> = memo(libs => {
-  const history = createHashHistory();
+interface AppPluginRootComponentProps {
+  apolloClient: AppApolloClient;
+  history: History;
+  store: Store;
+  theme: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
 
-  const libs$ = new BehaviorSubject(libs);
+const AppPluginRootComponent: React.FC<AppPluginRootComponentProps> = ({
+  theme,
+  store,
+  apolloClient,
+  history,
+}) => (
+  <EuiErrorBoundary>
+    <I18nContext>
+      <ManageGlobalToaster>
+        <ReduxStoreProvider store={store}>
+          <ApolloProvider client={apolloClient}>
+            <ApolloClientContext.Provider value={apolloClient}>
+              <ThemeProvider theme={theme}>
+                <MlCapabilitiesProvider>
+                  <PageRouter history={history} />
+                </MlCapabilitiesProvider>
+              </ThemeProvider>
+              <ErrorToastDispatcher />
+              <GlobalToaster />
+            </ApolloClientContext.Provider>
+          </ApolloProvider>
+        </ReduxStoreProvider>
+      </ManageGlobalToaster>
+    </I18nContext>
+  </EuiErrorBoundary>
+);
 
+const AppPluginRoot = memo(AppPluginRootComponent);
+
+const StartAppComponent: FC<AppFrontendLibs> = libs => {
+  const history = createHashHistory();
+  const libs$ = new BehaviorSubject(libs);
   const store = createStore(undefined, libs$.pipe(pluck('apolloClient')));
+  const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
+  const theme = useMemo(
+    () => ({
+      eui: darkMode ? euiDarkVars : euiLightVars,
+      darkMode,
+    }),
+    [darkMode]
+  );
+
+  return (
+    <AppPluginRoot store={store} apolloClient={libs.apolloClient} history={history} theme={theme} />
+  );
+};
 
-  const AppPluginRoot = memo(() => {
-    const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
-    return (
-      <EuiErrorBoundary>
-        <I18nContext>
-          <ManageGlobalToaster>
-            <ReduxStoreProvider store={store}>
-              <ApolloProvider client={libs.apolloClient}>
-                <ApolloClientContext.Provider value={libs.apolloClient}>
-                  <ThemeProvider
-                    theme={() => ({
-                      eui: darkMode ? euiDarkVars : euiLightVars,
-                      darkMode,
-                    })}
-                  >
-                    <MlCapabilitiesProvider>
-                      <PageRouter history={history} />
-                    </MlCapabilitiesProvider>
-                  </ThemeProvider>
-                  <ErrorToastDispatcher />
-                  <GlobalToaster />
-                </ApolloClientContext.Provider>
-              </ApolloProvider>
-            </ReduxStoreProvider>
-          </ManageGlobalToaster>
-        </I18nContext>
-      </EuiErrorBoundary>
-    );
-  });
-  return <AppPluginRoot />;
-});
+const StartApp = memo(StartAppComponent);
 
 export const ROOT_ELEMENT_ID = 'react-siem-root';
 
-export const SiemApp = memo<{ core: StartCore; plugins: StartPlugins }>(({ core, plugins }) => (
+interface SiemAppComponentProps {
+  core: StartCore;
+  plugins: StartPlugins;
+}
+
+const SiemAppComponent: React.FC<SiemAppComponentProps> = ({ core, plugins }) => (
   <KibanaContextProvider
     services={{
       appName: 'siem',
@@ -84,4 +107,6 @@ export const SiemApp = memo<{ core: StartCore; plugins: StartPlugins }>(({ core,
   >
     <StartApp {...compose()} />
   </KibanaContextProvider>
-));
+);
+
+export const SiemApp = memo(SiemAppComponent);
diff --git a/x-pack/legacy/plugins/siem/public/components/alerts_viewer/alerts_table.tsx b/x-pack/legacy/plugins/siem/public/components/alerts_viewer/alerts_table.tsx
@@ -51,33 +51,31 @@ 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,
+        }),
+        []
+      )}
+    />
+  );
+};
+
+export const AlertsTable = React.memo(AlertsTableComponent);
diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx b/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,

diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx b/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,