refactor for consistent field browser naming (#134364)

x-pack/plugins/timelines/common/types/index.ts

@@ -5,5 +5,5 @@
  * 2.0.
  */
 
-export * from './fields_browser';
+export * from './field_browser';
 export * from './timeline';

x-pack/plugins/timelines/common/types/timeline/actions/index.ts

@@ -12,7 +12,7 @@ import { BrowserFields } from '../../../search_strategy/index_fields';
 import { ColumnHeaderOptions } from '../columns';
 import { TimelineItem, TimelineNonEcsData } from '../../../search_strategy';
 import { Ecs } from '../../../ecs';
-import { FieldBrowserOptions } from '../../fields_browser';
+import { FieldBrowserOptions } from '../../field_browser';
 
 export interface ActionProps {
   action?: RowCellRender;

x-pack/plugins/timelines/public/components/field_browser/index.tsx

@@ -9,14 +9,14 @@ import React from 'react';
 import type { Store } from 'redux';
 import { Provider } from 'react-redux';
 import { I18nProvider } from '@kbn/i18n-react';
-import { StatefulFieldsBrowser } from '../t_grid/toolbar/fields_browser';
-import { FieldBrowserProps } from '../../../common/types/fields_browser';
+import { FieldBrowser } from '../t_grid/toolbar/field_browser';
+import { FieldBrowserProps } from '../../../common/types/field_browser';
 export type {
   CreateFieldComponent,
   FieldBrowserOptions,
   FieldBrowserProps,
   GetFieldTableColumns,
-} from '../../../common/types/fields_browser';
+} from '../../../common/types/field_browser';
 
 const EMPTY_BROWSER_FIELDS = {};
 
@@ -26,14 +26,14 @@ export type FieldBrowserWrappedComponentProps = FieldBrowserProps & {
 
 export const FieldBrowserWrappedComponent = (props: FieldBrowserWrappedComponentProps) => {
   const { store, ...restProps } = props;
-  const fieldsBrowseProps = {
+  const fieldBrowserProps = {
     ...restProps,
     browserFields: restProps.browserFields ?? EMPTY_BROWSER_FIELDS,
   };
   return (
     <Provider store={store}>
       <I18nProvider>
-        <StatefulFieldsBrowser {...fieldsBrowseProps} />
+        <FieldBrowser {...fieldBrowserProps} />
       </I18nProvider>
     </Provider>
   );

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

@@ -58,4 +58,4 @@ export { TGrid as default };
 export * from './drag_and_drop';
 export * from './last_updated';
 export * from './loading';
-export * from './fields_browser';
+export * from './field_browser';

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

@@ -69,7 +69,7 @@ import type { FieldBrowserOptions } from '../../../../common/types';
 import type { Refetch } from '../../../store/t_grid/inputs';
 import { getPageRowIndex } from '../../../../common/utils/pagination';
 import { StatefulEventContext } from '../../stateful_event_context';
-import { StatefulFieldsBrowser } from '../toolbar/fields_browser';
+import { FieldBrowser } from '../toolbar/field_browser';
 import { tGridActions, TGridModel, tGridSelectors, TimelineState } from '../../../store/t_grid';
 import { useDeepEqualSelector } from '../../../hooks/use_selector';
 import { RowAction } from './row_action';
@@ -519,7 +519,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
             ) : (
               <>
                 {additionalControls ?? null}
-                <StatefulFieldsBrowser
+                <FieldBrowser
                   data-test-subj="field-browser"
                   browserFields={browserFields}
                   options={fieldBrowserOptions}

x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx

@@ -42,7 +42,7 @@ import { defaultHeaders } from '../body/column_headers/default_headers';
 import { buildCombinedQuery, getCombinedFilterQuery, resolverIsShowing } from '../helpers';
 import { tGridActions, tGridSelectors } from '../../../store/t_grid';
 import { useTimelineEvents, InspectResponse, Refetch } from '../../../container';
-import { FieldBrowserOptions } from '../../fields_browser';
+import { FieldBrowserOptions } from '../../field_browser';
 import { StatefulBody } from '../body';
 import { SELECTOR_TIMELINE_GLOBAL_CONTAINER, UpdatedFlexGroup, UpdatedFlexItem } from '../styles';
 import { Sort } from '../body/sort';

x-pack/plugins/timelines/public/components/t_grid/toolbar/field_browser/field_browser.test.tsx

@@ -12,7 +12,7 @@ import { mockBrowserFields, TestProviders } from '../../../../mock';
 
 import { FIELD_BROWSER_WIDTH } from './helpers';
 
-import { StatefulFieldsBrowserComponent } from '.';
+import { FieldBrowserComponent } from './field_browser';
 
 describe('StatefulFieldsBrowser', () => {
   const timelineId = 'test';
@@ -20,7 +20,7 @@ describe('StatefulFieldsBrowser', () => {
   it('should render the Fields button, which displays the fields browser on click', () => {
     const result = render(
       <TestProviders>
-        <StatefulFieldsBrowserComponent
+        <FieldBrowserComponent
           browserFields={mockBrowserFields}
           columnHeaders={[]}
           timelineId={timelineId}
@@ -35,7 +35,7 @@ describe('StatefulFieldsBrowser', () => {
     it('should NOT render the fields browser until the Fields button is clicked', () => {
       const result = render(
         <TestProviders>
-          <StatefulFieldsBrowserComponent
+          <FieldBrowserComponent
             browserFields={mockBrowserFields}
             columnHeaders={[]}
             timelineId={timelineId}
@@ -49,7 +49,7 @@ describe('StatefulFieldsBrowser', () => {
     it('should render the fields browser when the Fields button is clicked', async () => {
       const result = render(
         <TestProviders>
-          <StatefulFieldsBrowserComponent
+          <FieldBrowserComponent
             browserFields={mockBrowserFields}
             columnHeaders={[]}
             timelineId={timelineId}
@@ -67,7 +67,7 @@ describe('StatefulFieldsBrowser', () => {
     it('should add a selected category, which creates the category badge', async () => {
       const result = render(
         <TestProviders>
-          <StatefulFieldsBrowserComponent
+          <FieldBrowserComponent
             browserFields={mockBrowserFields}
             columnHeaders={[]}
             timelineId={timelineId}
@@ -93,7 +93,7 @@ describe('StatefulFieldsBrowser', () => {
     it('should remove a selected category, which deletes the category badge', async () => {
       const result = render(
         <TestProviders>
-          <StatefulFieldsBrowserComponent
+          <FieldBrowserComponent
             browserFields={mockBrowserFields}
             columnHeaders={[]}
             timelineId={timelineId}
@@ -123,7 +123,7 @@ describe('StatefulFieldsBrowser', () => {
     it('should update the available categories according to the search input', async () => {
       const result = render(
         <TestProviders>
-          <StatefulFieldsBrowserComponent
+          <FieldBrowserComponent
             browserFields={mockBrowserFields}
             columnHeaders={[]}
             timelineId={timelineId}
@@ -152,7 +152,7 @@ describe('StatefulFieldsBrowser', () => {
 
     const result = render(
       <TestProviders>
-        <StatefulFieldsBrowserComponent
+        <FieldBrowserComponent
           browserFields={mockBrowserFields}
           columnHeaders={[]}
           isEventViewer={isEventViewer}
@@ -169,7 +169,7 @@ describe('StatefulFieldsBrowser', () => {
 
     const result = render(
       <TestProviders>
-        <StatefulFieldsBrowserComponent
+        <FieldBrowserComponent
           browserFields={mockBrowserFields}
           columnHeaders={[]}
           isEventViewer={isEventViewer}

x-pack/plugins/timelines/public/components/t_grid/toolbar/field_browser/field_browser.tsx

@@ -11,8 +11,8 @@ import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react'
 import styled from 'styled-components';
 
 import type { BrowserFields } from '../../../../../common/search_strategy/index_fields';
-import type { FieldBrowserProps } from '../../../../../common/types/fields_browser';
-import { FieldsBrowser } from './field_browser';
+import type { FieldBrowserProps } from '../../../../../common/types/field_browser';
+import { FieldBrowserModal } from './field_browser_modal';
 import { filterBrowserFieldsByFieldName, filterSelectedBrowserFields } from './helpers';
 import * as i18n from './translations';
 
@@ -21,16 +21,16 @@ const FIELDS_BUTTON_CLASS_NAME = 'fields-button';
 /** wait this many ms after the user completes typing before applying the filter input */
 export const INPUT_TIMEOUT = 250;
 
-const FieldsBrowserButtonContainer = styled.div`
+const FieldBrowserButtonContainer = styled.div`
   display: inline-block;
   position: relative;
 `;
 
-FieldsBrowserButtonContainer.displayName = 'FieldsBrowserButtonContainer';
+FieldBrowserButtonContainer.displayName = 'FieldBrowserButtonContainer';
 /**
  * Manages the state of the field browser
  */
-export const StatefulFieldsBrowserComponent: React.FC<FieldBrowserProps> = ({
+export const FieldBrowserComponent: React.FC<FieldBrowserProps> = ({
   timelineId,
   columnHeaders,
   browserFields,
@@ -122,7 +122,7 @@ export const StatefulFieldsBrowserComponent: React.FC<FieldBrowserProps> = ({
   );
 
   return (
-    <FieldsBrowserButtonContainer data-test-subj="fields-browser-button-container">
+    <FieldBrowserButtonContainer data-test-subj="fields-browser-button-container">
       <EuiToolTip content={i18n.FIELDS_BROWSER}>
         <EuiButtonEmpty
           aria-label={i18n.FIELDS_BROWSER}
@@ -139,7 +139,7 @@ export const StatefulFieldsBrowserComponent: React.FC<FieldBrowserProps> = ({
       </EuiToolTip>
 
       {show && (
-        <FieldsBrowser
+        <FieldBrowserModal
           columnHeaders={columnHeaders}
           filteredBrowserFields={
             filteredBrowserFields != null ? filteredBrowserFields : browserFields
@@ -159,8 +159,8 @@ export const StatefulFieldsBrowserComponent: React.FC<FieldBrowserProps> = ({
           width={width}
         />
       )}
-    </FieldsBrowserButtonContainer>
+    </FieldBrowserButtonContainer>
   );
 };
 
-export const StatefulFieldsBrowser = React.memo(StatefulFieldsBrowserComponent);
+export const FieldBrowser = React.memo(FieldBrowserComponent);

x-pack/plugins/timelines/public/components/t_grid/toolbar/field_browser/field_browser_modal.test.tsx

@@ -12,7 +12,7 @@ import { TestProviders, mockBrowserFields, defaultHeaders } from '../../../../mo
 import { mockGlobalState } from '../../../../mock/global_state';
 import { tGridActions } from '../../../../store/t_grid';
 
-import { FieldsBrowser, FieldsBrowserComponentProps } from './field_browser';
+import { FieldBrowserModal, FieldBrowserModalProps } from './field_browser_modal';
 
 import { createStore, State } from '../../../../types';
 import { createSecuritySolutionStorageMock } from '../../../../mock/mock_local_storage';
@@ -27,7 +27,7 @@ jest.mock('react-redux', () => {
 });
 const timelineId = 'test';
 const onHide = jest.fn();
-const testProps: FieldsBrowserComponentProps = {
+const testProps: FieldBrowserModalProps = {
   columnHeaders: [],
   filteredBrowserFields: mockBrowserFields,
   searchInput: '',
@@ -44,7 +44,7 @@ const testProps: FieldsBrowserComponentProps = {
 };
 const { storage } = createSecuritySolutionStorageMock();
 
-describe('FieldsBrowser', () => {
+describe('FieldBrowserModal', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -52,7 +52,7 @@ describe('FieldsBrowser', () => {
   test('it renders the Close button', () => {
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} />
+        <FieldBrowserModal {...testProps} />
       </TestProviders>
     );
 
@@ -62,7 +62,7 @@ describe('FieldsBrowser', () => {
   test('it invokes the Close button', () => {
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} />
+        <FieldBrowserModal {...testProps} />
       </TestProviders>
     );
 
@@ -73,7 +73,7 @@ describe('FieldsBrowser', () => {
   test('it renders the Reset Fields button', () => {
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} />
+        <FieldBrowserModal {...testProps} />
       </TestProviders>
     );
 
@@ -83,7 +83,7 @@ describe('FieldsBrowser', () => {
   test('it invokes updateColumns action when the user clicks the Reset Fields button', () => {
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} columnHeaders={defaultHeaders} />
+        <FieldBrowserModal {...testProps} columnHeaders={defaultHeaders} />
       </TestProviders>
     );
 
@@ -100,7 +100,7 @@ describe('FieldsBrowser', () => {
   test('it invokes onHide when the user clicks the Reset Fields button', () => {
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} />
+        <FieldBrowserModal {...testProps} />
       </TestProviders>
     );
 
@@ -112,7 +112,7 @@ describe('FieldsBrowser', () => {
   test('it renders the search', () => {
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} />
+        <FieldBrowserModal {...testProps} />
       </TestProviders>
     );
 
@@ -122,7 +122,7 @@ describe('FieldsBrowser', () => {
   test('it renders the categories selector', () => {
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} />
+        <FieldBrowserModal {...testProps} />
       </TestProviders>
     );
 
@@ -132,7 +132,7 @@ describe('FieldsBrowser', () => {
   test('it renders the fields table', () => {
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} />
+        <FieldBrowserModal {...testProps} />
       </TestProviders>
     );
 
@@ -142,7 +142,7 @@ describe('FieldsBrowser', () => {
   test('focuses the search input when the component mounts', () => {
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} />
+        <FieldBrowserModal {...testProps} />
       </TestProviders>
     );
 
@@ -158,7 +158,7 @@ describe('FieldsBrowser', () => {
 
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser {...testProps} onSearchInputChange={onSearchInputChange} />
+        <FieldBrowserModal {...testProps} onSearchInputChange={onSearchInputChange} />
       </TestProviders>
     );
 
@@ -178,7 +178,7 @@ describe('FieldsBrowser', () => {
 
     const wrapper = mount(
       <TestProviders>
-        <FieldsBrowser
+        <FieldBrowserModal
           {...testProps}
           options={{
             createFieldButton: MyTestComponent,
@@ -207,7 +207,7 @@ describe('FieldsBrowser', () => {
 
     const wrapper = mount(
       <TestProviders store={store}>
-        <FieldsBrowser
+        <FieldBrowserModal
           {...testProps}
           options={{
             createFieldButton: MyTestComponent,

x-pack/plugins/timelines/public/components/t_grid/toolbar/field_browser/field_browser_modal.tsx

@@ -33,10 +33,7 @@ import { CategoriesSelector } from './categories_selector';
 import { FieldTable } from './field_table';
 import { CategoriesBadges } from './categories_badges';
 
-export type FieldsBrowserComponentProps = Pick<
-  FieldBrowserProps,
-  'timelineId' | 'width' | 'options'
-> & {
+export type FieldBrowserModalProps = Pick<FieldBrowserProps, 'timelineId' | 'width' | 'options'> & {
   /**
    * The current timeline column headers
    */
@@ -89,7 +86,7 @@ export type FieldsBrowserComponentProps = Pick<
  * This component has no internal state, but it uses lifecycle methods to
  * set focus to the search input, scroll to the selected category, etc
  */
-const FieldsBrowserComponent: React.FC<FieldsBrowserComponentProps> = ({
+const FieldBrowserModalComponent: React.FC<FieldBrowserModalProps> = ({
   appliedFilterInput,
   columnHeaders,
   filteredBrowserFields,
@@ -226,4 +223,4 @@ const FieldsBrowserComponent: React.FC<FieldsBrowserComponentProps> = ({
   );
 };
 
-export const FieldsBrowser = React.memo(FieldsBrowserComponent);
+export const FieldBrowserModal = React.memo(FieldBrowserModalComponent);

x-pack/plugins/timelines/public/components/t_grid/toolbar/field_browser/field_table.tsx

@@ -13,7 +13,7 @@ import { BrowserFields, ColumnHeaderOptions } from '../../../../../common';
 import { getColumnHeader, getFieldColumns, getFieldItems, isActionsColumn } from './field_items';
 import { CATEGORY_TABLE_CLASS_NAME, TABLE_HEIGHT } from './helpers';
 import { tGridActions } from '../../../../store/t_grid';
-import type { GetFieldTableColumns } from '../../../../../common/types/fields_browser';
+import type { GetFieldTableColumns } from '../../../../../common/types/field_browser';
 import { FieldTableHeader } from './field_table_header';
 
 const DEFAULT_SORTING: { field: string; direction: Direction } = {

x-pack/plugins/timelines/public/components/t_grid/toolbar/field_browser/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+export { FieldBrowser } from './field_browser';

x-pack/plugins/timelines/public/methods/index.tsx

@@ -73,11 +73,11 @@ export const getLoadingPanelLazy = (props: LoadingPanelProps) => {
   );
 };
 
-const FieldsBrowserLazy = lazy(() => import('../components/fields_browser'));
-export const getFieldsBrowserLazy = (props: FieldBrowserProps, { store }: { store: Store }) => {
+const FieldBrowserLazy = lazy(() => import('../components/field_browser'));
+export const getFieldBrowserLazy = (props: FieldBrowserProps, { store }: { store: Store }) => {
   return (
     <Suspense fallback={<EuiLoadingSpinner />}>
-      <FieldsBrowserLazy {...props} store={store} />
+      <FieldBrowserLazy {...props} store={store} />
     </Suspense>
   );
 };

x-pack/plugins/timelines/public/plugin.ts

@@ -15,7 +15,7 @@ import {
   getLastUpdatedLazy,
   getLoadingPanelLazy,
   getTGridLazy,
-  getFieldsBrowserLazy,
+  getFieldBrowserLazy,
 } from './methods';
 import type { TimelinesUIStart, TGridProps, TimelinesStartPlugins } from './types';
 import { tGridReducer } from './store/t_grid/reducer';
@@ -75,7 +75,7 @@ export class TimelinesPlugin implements Plugin<void, TimelinesUIStart> {
         return getLastUpdatedLazy(props);
       },
       getFieldBrowser: (props: FieldBrowserProps) => {
-        return getFieldsBrowserLazy(props, {
+        return getFieldBrowserLazy(props, {
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           store: this._store!,
         });