Move create field memoization to a hook

Author: machadoum

x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx

@@ -32,8 +32,6 @@ jest.mock('../../../timelines/containers', () => ({
 
 jest.mock('../../components/url_state/normalize_time_range.ts');
 
-jest.mock('../../../common/containers/source', () => ({ useIndexFields: () => ({}) }));
-
 const mockUseResizeObserver: jest.Mock = useResizeObserver as jest.Mock;
 jest.mock('use-resize-observer/polyfilled');
 mockUseResizeObserver.mockImplementation(() => ({}));

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -16,7 +16,7 @@ import { ControlColumnProps, RowRenderer, TimelineId } from '../../../../common/
 import { timelineSelectors, timelineActions } from '../../../timelines/store/timeline';
 import type { SubsetTimelineModel, TimelineModel } from '../../../timelines/store/timeline/model';
 import { Status } from '../../../../common/detection_engine/schemas/common/schemas';
-import { Filter, IndexPatternField } from '../../../../../../../src/plugins/data/public';
+import { Filter } from '../../../../../../../src/plugins/data/public';
 import { InspectButtonContainer } from '../inspect';
 import { useGlobalFullScreen } from '../../containers/use_full_screen';
 import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
@@ -31,11 +31,7 @@ import { defaultControlColumn } from '../../../timelines/components/timeline/bod
 import { EventsViewer } from './events_viewer';
 import * as i18n from './translations';
 import { GraphOverlay } from '../../../timelines/components/graph_overlay';
-import { CreateFieldButton } from '../../../timelines/components/create_field_button';
-import { CreateFieldComponentType, tGridActions } from '../../../../../timelines/public';
-import { useIndexFields } from '../../containers/source';
-import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
-import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
+import { useCreateFieldButton } from '../../../timelines/components/create_field_button';
 
 const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
 const leadingControlColumns: ControlColumnProps[] = [
@@ -178,37 +174,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   }, [id, timelineQuery, globalQuery]);
   const bulkActions = useMemo(() => ({ onAlertStatusActionSuccess }), [onAlertStatusActionSuccess]);
 
-  const { indexFieldsSearch } = useIndexFields(scopeId, false);
-
-  const createFieldComponent = useMemo(() => {
-    const onCreateField = (field: IndexPatternField) => {
-      // Fetch updated list of fields
-      indexFieldsSearch(selectedDataViewId);
-      // Add the new field to the event table
-      dispatch(
-        tGridActions.upsertColumn({
-          column: {
-            columnHeaderType: defaultColumnHeaderType,
-            id: field.name,
-            initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
-          },
-          id,
-          index: 1,
-        })
-      );
-    };
-
-    // It receives onClick props from field browser in order to close the modal.
-    const CreateFieldButtonComponent: CreateFieldComponentType = ({ onClick }) => (
-      <CreateFieldButton
-        selectedDataViewId={selectedDataViewId}
-        onClick={onClick}
-        onCreateField={onCreateField}
-      />
-    );
-
-    return CreateFieldButtonComponent;
-  }, [selectedDataViewId, dispatch, id, indexFieldsSearch]);
+  const createFieldComponent = useCreateFieldButton(scopeId, id);
 
   return (
     <>

x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.test.tsx

@@ -16,6 +16,8 @@ import {
 import { TestProviders } from '../../../common/mock';
 import { useKibana } from '../../../common/lib/kibana';
 import { DataView } from '../../../../../../../src/plugins/data/common';
+import { SourcererScopeName } from '../../../common/store/sourcerer/model';
+import { TimelineId } from '../../../../common';
 
 const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
 
@@ -38,7 +40,8 @@ describe('CreateFieldButton', () => {
       <CreateFieldButton
         selectedDataViewId={'dataViewId'}
         onClick={() => undefined}
-        onCreateField={() => undefined}
+        sourcererScope={SourcererScopeName.timeline}
+        timelineId={TimelineId.detectionsPage}
       />,
       {
         wrapper: TestProviders,
@@ -54,7 +57,8 @@ describe('CreateFieldButton', () => {
       <CreateFieldButton
         selectedDataViewId={'dataViewId'}
         onClick={() => undefined}
-        onCreateField={() => undefined}
+        sourcererScope={SourcererScopeName.timeline}
+        timelineId={TimelineId.detectionsPage}
       />,
       {
         wrapper: TestProviders,
@@ -74,7 +78,8 @@ describe('CreateFieldButton', () => {
         <CreateFieldButton
           selectedDataViewId={'dataViewId'}
           onClick={onClickParam}
-          onCreateField={() => undefined}
+          sourcererScope={SourcererScopeName.timeline}
+          timelineId={TimelineId.detectionsPage}
         />,
         {
           wrapper: TestProviders,

x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.tsx

@@ -5,33 +5,46 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { EuiButton } from '@elastic/eui';
 import styled from 'styled-components';
 
+import { useDispatch } from 'react-redux';
 import { IndexPattern, IndexPatternField } from '../../../../../../../src/plugins/data/public';
 import { useKibana } from '../../../common/lib/kibana';
 
 import * as i18n from './translations';
+import { CreateFieldComponentType, TimelineId } from '../../../../../timelines/common';
+import { tGridActions } from '../../../../../timelines/public';
+import { useIndexFields } from '../../../common/containers/source';
+import { SourcererScopeName } from '../../../common/store/sourcerer/model';
+import { sourcererSelectors } from '../../../common/store';
+import { useDeepEqualSelector } from '../../../common/hooks/use_selector';
+import { SelectedDataView } from '../../../common/store/sourcerer/selectors';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/constants';
+import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
 
 interface CreateFieldButtonProps {
   selectedDataViewId: string;
   onClick: () => void;
-  onCreateField: (field: IndexPatternField) => void;
+  timelineId: TimelineId;
+  sourcererScope: SourcererScopeName;
 }
 const StyledButton = styled(EuiButton)`
   margin-left: ${({ theme }) => theme.eui.paddingSizes.m};
 `;
 
 export const CreateFieldButton = React.memo<CreateFieldButtonProps>(
-  ({ selectedDataViewId, onClick: onClickParam, onCreateField }) => {
+  ({ selectedDataViewId, onClick: onClickParam, sourcererScope, timelineId }) => {
+    const [dataView, setDataView] = useState<IndexPattern | null>(null);
+    const dispatch = useDispatch();
+
+    const { indexFieldsSearch } = useIndexFields(sourcererScope, false);
     const {
       indexPatternFieldEditor,
       data: { dataViews },
     } = useKibana().services;
 
-    const [dataView, setDataView] = useState<IndexPattern | null>(null);
-
     useEffect(() => {
       dataViews.get(selectedDataViewId).then((dataViewResponse) => {
         setDataView(dataViewResponse);
@@ -42,11 +55,35 @@ export const CreateFieldButton = React.memo<CreateFieldButtonProps>(
       if (dataView) {
         indexPatternFieldEditor?.openEditor({
           ctx: { indexPattern: dataView },
-          onSave: onCreateField,
+          onSave: (field: IndexPatternField) => {
+            // Fetch the updated list of fields
+            indexFieldsSearch(selectedDataViewId);
+
+            // Add the new field to the event table
+            dispatch(
+              tGridActions.upsertColumn({
+                column: {
+                  columnHeaderType: defaultColumnHeaderType,
+                  id: field.name,
+                  initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
+                },
+                id: timelineId,
+                index: 0,
+              })
+            );
+          },
         });
       }
       onClickParam();
-    }, [indexPatternFieldEditor, dataView, onClickParam, onCreateField]);
+    }, [
+      indexPatternFieldEditor,
+      dataView,
+      onClickParam,
+      indexFieldsSearch,
+      selectedDataViewId,
+      dispatch,
+      timelineId,
+    ]);
 
     if (!indexPatternFieldEditor?.userPermissions.editIndexPattern()) {
       return null;
@@ -69,3 +106,33 @@ export const CreateFieldButton = React.memo<CreateFieldButtonProps>(
 );
 
 CreateFieldButton.displayName = 'CreateFieldButton';
+
+/**
+ *
+ * Returns a memoised 'CreateFieldButton' with only an 'onClick' property.
+ */
+export const useCreateFieldButton = (
+  sourcererScope: SourcererScopeName,
+  timelineId: TimelineId
+) => {
+  const getSelectedDataView = useMemo(() => sourcererSelectors.getSelectedDataViewSelector(), []);
+  const { dataViewId } = useDeepEqualSelector<SelectedDataView>((state) =>
+    getSelectedDataView(state, sourcererScope)
+  );
+
+  const createFieldComponent = useMemo(() => {
+    // It receives onClick props from field browser in order to close the modal.
+    const CreateFieldButtonComponent: CreateFieldComponentType = ({ onClick }) => (
+      <CreateFieldButton
+        selectedDataViewId={dataViewId}
+        onClick={onClick}
+        sourcererScope={sourcererScope}
+        timelineId={timelineId}
+      />
+    );
+
+    return CreateFieldButtonComponent;
+  }, [dataViewId, sourcererScope, timelineId]);
+
+  return createFieldComponent;
+};

x-pack/plugins/security_solution/public/timelines/components/create_field_button/translations.ts

@@ -7,6 +7,9 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const CREATE_FIELD = i18n.translate('xpack.timelines.fieldBrowser.createFieldButton', {
-  defaultMessage: 'Create field',
-});
+export const CREATE_FIELD = i18n.translate(
+  'xpack.securitySolution.fieldBrowser.createFieldButton',
+  {
+    defaultMessage: 'Create field',
+  }
+);

x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx

@@ -32,12 +32,13 @@ import {
 } from '../../styles';
 import { Sort } from '../sort';
 import { ColumnHeader } from './column_header';
-import { CreateFieldComponentType } from '../../../../../../../timelines/public';
+
+import { SourcererScopeName } from '../../../../../common/store/sourcerer/model';
+import { useCreateFieldButton } from '../../../create_field_button';
 
 interface Props {
   actionsColumnWidth: number;
   browserFields: BrowserFields;
-  createFieldComponent: CreateFieldComponentType;
   columnHeaders: ColumnHeaderOptions[];
   isEventViewer?: boolean;
   isSelectAllChecked: boolean;
@@ -88,7 +89,6 @@ export const ColumnHeadersComponent = ({
   actionsColumnWidth,
   browserFields,
   columnHeaders,
-  createFieldComponent,
   isEventViewer = false,
   isSelectAllChecked,
   onSelectAll,
@@ -172,6 +172,11 @@ export const ColumnHeadersComponent = ({
     [trailingControlColumns]
   );
 
+  const createFieldComponent = useCreateFieldButton(
+    SourcererScopeName.timeline,
+    timelineId as TimelineId
+  );
+
   const LeadingHeaderActions = useMemo(() => {
     return leadingHeaderCells.map(
       (Header: React.ComponentType<HeaderActionProps> | React.ComponentType | undefined, index) => {

x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx

@@ -8,16 +8,14 @@
 import { noop } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { connect, ConnectedProps, useDispatch } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 
 import {
   FIRST_ARIA_INDEX,
   ARIA_COLINDEX_ATTRIBUTE,
   ARIA_ROWINDEX_ATTRIBUTE,
   onKeyDownFocusHandler,
-  CreateFieldComponentType,
-  tGridActions,
 } from '../../../../../../timelines/public';
 import { CellValueElementProps } from '../cell_rendering';
 import { DEFAULT_COLUMN_MIN_WIDTH } from './constants';
@@ -29,9 +27,9 @@ import {
   TimelineId,
   TimelineTabs,
 } from '../../../../../common/types/timeline';
-import { BrowserFields, useIndexFields } from '../../../../common/containers/source';
+import { BrowserFields } from '../../../../common/containers/source';
 import { TimelineItem } from '../../../../../common/search_strategy/timeline';
-import { inputsModel, sourcererSelectors, State } from '../../../../common/store';
+import { inputsModel, State } from '../../../../common/store';
 import { TimelineModel } from '../../../store/timeline/model';
 import { timelineDefaults } from '../../../store/timeline/defaults';
 import { timelineActions, timelineSelectors } from '../../../store/timeline';
@@ -45,11 +43,6 @@ import { ColumnHeaders } from './column_headers';
 import { Events } from './events';
 import { DEFAULT_ICON_BUTTON_WIDTH } from '../helpers';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
-import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
-import { CreateFieldButton } from '../../create_field_button';
-import { SelectedDataView } from '../../../../common/store/sourcerer/selectors';
-import { IndexPatternField } from '../../../../../../../../src/plugins/data/public';
-import { defaultColumnHeaderType } from './column_headers/default_headers';
 
 interface OwnProps {
   activePage: number;
@@ -231,43 +224,6 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
       [columnHeaders.length, containerRef, data.length]
     );
 
-    const getSelectedDataView = useMemo(() => sourcererSelectors.getSelectedDataViewSelector(), []);
-    const { dataViewId } = useDeepEqualSelector<SelectedDataView>((state) =>
-      getSelectedDataView(state, SourcererScopeName.timeline)
-    );
-
-    const dispatch = useDispatch();
-    const { indexFieldsSearch } = useIndexFields(SourcererScopeName.timeline, false);
-
-    const createFieldComponent = useMemo(() => {
-      const onCreateField = (field: IndexPatternField) => {
-        // Fetch updated list of fields
-        indexFieldsSearch(dataViewId);
-        // Add the new field to the event table
-        dispatch(
-          tGridActions.upsertColumn({
-            column: {
-              columnHeaderType: defaultColumnHeaderType,
-              id: field.name,
-              initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
-            },
-            id,
-            index: 0,
-          })
-        );
-      };
-      // It receives onClick props from field browser in order to close the modal.
-      const CreateFieldButtonComponent: CreateFieldComponentType = ({ onClick }) => (
-        <CreateFieldButton
-          selectedDataViewId={dataViewId}
-          onClick={onClick}
-          onCreateField={onCreateField}
-        />
-      );
-
-      return CreateFieldButtonComponent;
-    }, [dataViewId, dispatch, id, indexFieldsSearch]);
-
     return (
       <>
         <TimelineBody data-test-subj="timeline-body" ref={containerRef}>
@@ -284,7 +240,6 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
               actionsColumnWidth={actionsColumnWidth}
               browserFields={browserFields}
               columnHeaders={columnHeaders}
-              createFieldComponent={createFieldComponent}
               isEventViewer={isEventViewer}
               isSelectAllChecked={isSelectAllChecked}
               onSelectAll={onSelectAll}