fix view all fields button when filtered (#110464)

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

@@ -8,10 +8,11 @@
 import { mount } from 'enzyme';
 import React from 'react';
 
-import { mockBrowserFields } from '../../../../mock';
+import { mockBrowserFields, TestProviders } from '../../../../mock';
 
-import { CATEGORY_PANE_WIDTH, getFieldCount } from './helpers';
+import { CATEGORY_PANE_WIDTH, getFieldCount, VIEW_ALL_BUTTON_CLASS_NAME } from './helpers';
 import { CategoriesPane } from './categories_pane';
+import { ViewAllButton } from './category_columns';
 
 const timelineId = 'test';
 
@@ -121,3 +122,32 @@ describe('getCategoryColumns', () => {
     expect(onCategorySelected).toHaveBeenCalledWith(notTheSelectedCategoryId);
   });
 });
+
+describe('ViewAllButton', () => {
+  it(`should update fields with the timestamp and category fields`, () => {
+    const onUpdateColumns = jest.fn();
+
+    const wrapper = mount(
+      <TestProviders>
+        <ViewAllButton
+          browserFields={{ agent: mockBrowserFields.agent }}
+          categoryId="agent"
+          onUpdateColumns={onUpdateColumns}
+          timelineId={timelineId}
+        />
+      </TestProviders>
+    );
+
+    wrapper.find(`.${VIEW_ALL_BUTTON_CLASS_NAME}`).first().simulate('click');
+
+    expect(onUpdateColumns).toHaveBeenCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({ id: '@timestamp' }),
+        expect.objectContaining({ id: 'agent.ephemeral_id' }),
+        expect.objectContaining({ id: 'agent.hostname' }),
+        expect.objectContaining({ id: 'agent.id' }),
+        expect.objectContaining({ id: 'agent.name' }),
+      ])
+    );
+  });
+});

x-pack/plugins/timelines/public/components/utils/helpers.ts

@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import { get, getOr, isEmpty, uniqBy } from 'lodash/fp';
+import { getOr, isEmpty, uniqBy } from 'lodash/fp';
 import { BrowserField, BrowserFields, ColumnHeaderOptions } from '../../../common';
-import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../t_grid/body/constants';
+import { defaultHeaders } from '../t_grid/body/column_headers/default_headers';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../t_grid/body/constants';
 
 export const getColumnHeaderFromBrowserField = ({
   browserField,
@@ -39,17 +40,14 @@ export const getColumnsWithTimestamp = ({
   category: string;
 }): ColumnHeaderOptions[] => {
   const emptyFields: Record<string, Partial<BrowserField>> = {};
-  const timestamp = get('base.fields.@timestamp', browserFields);
+  const timestamp = defaultHeaders.find(({ id }) => id === '@timestamp');
   const categoryFields: Array<Partial<BrowserField>> = [
     ...Object.values(getOr(emptyFields, `${category}.fields`, browserFields)),
   ];
 
-  return timestamp != null && categoryFields.length
+  return timestamp != null
     ? uniqBy('id', [
-        getColumnHeaderFromBrowserField({
-          browserField: timestamp,
-          width: DEFAULT_DATE_COLUMN_MIN_WIDTH,
-        }),
+        timestamp,
         ...categoryFields.map((f) => getColumnHeaderFromBrowserField({ browserField: f })),
       ])
     : [];