From 6328a9f597f3cd694d8201a1ee6e787691bf1a00 Mon Sep 17 00:00:00 2001 From: Dmitry Tomashevich <39378793+Dmitriynj@users.noreply.github.com> Date: Wed, 3 Nov 2021 11:42:37 +0300 Subject: [PATCH] [Discover] Fix Data grid columns movement (#115279) * [Discover] fix data grid columns movement * [Discover] apply suggestion * [Discover] fix linting Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../application/apps/context/context_app.tsx | 4 ++-- .../apps/context/context_app_content.tsx | 2 +- .../components/doc_table/actions/columns.test.ts | 2 +- .../main/components/doc_table/actions/columns.ts | 7 ++++--- .../components/layout/discover_documents.tsx | 4 ++-- .../main/components/layout/discover_layout.tsx | 4 ++-- .../components/discover_grid/discover_grid.tsx | 16 ++++++++++++---- .../helpers/use_data_grid_columns.test.tsx | 10 +++++----- .../application/helpers/use_data_grid_columns.ts | 6 +++--- 9 files changed, 32 insertions(+), 23 deletions(-) diff --git a/src/plugins/discover/public/application/apps/context/context_app.tsx b/src/plugins/discover/public/application/apps/context/context_app.tsx index 9d39c93d250f24..bfc13aac90e4b5 100644 --- a/src/plugins/discover/public/application/apps/context/context_app.tsx +++ b/src/plugins/discover/public/application/apps/context/context_app.tsx @@ -19,7 +19,7 @@ import { IndexPattern, IndexPatternField } from '../../../../../data/common'; import { LoadingStatus } from './services/context_query_state'; import { getServices } from '../../../kibana_services'; import { AppState, isEqualFilters } from './services/context_state'; -import { useDataGridColumns } from '../../helpers/use_data_grid_columns'; +import { useColumns } from '../../helpers/use_data_grid_columns'; import { useContextAppState } from './utils/use_context_app_state'; import { useContextAppFetch } from './utils/use_context_app_fetch'; import { popularizeField } from '../../helpers/popularize_field'; @@ -84,7 +84,7 @@ export const ContextApp = ({ indexPattern, anchorId }: ContextAppProps) => { fetchedState.anchor._id, ]); - const { columns, onAddColumn, onRemoveColumn, onSetColumns } = useDataGridColumns({ + const { columns, onAddColumn, onRemoveColumn, onSetColumns } = useColumns({ capabilities, config: uiSettings, indexPattern, diff --git a/src/plugins/discover/public/application/apps/context/context_app_content.tsx b/src/plugins/discover/public/application/apps/context/context_app_content.tsx index 2d4d3cab250f3b..153639edc29a13 100644 --- a/src/plugins/discover/public/application/apps/context/context_app_content.tsx +++ b/src/plugins/discover/public/application/apps/context/context_app_content.tsx @@ -28,7 +28,7 @@ export interface ContextAppContentProps { columns: string[]; onAddColumn: (columnsName: string) => void; onRemoveColumn: (columnsName: string) => void; - onSetColumns: (columnsNames: string[]) => void; + onSetColumns: (columnsNames: string[], hideTimeColumn: boolean) => void; services: DiscoverServices; indexPattern: IndexPattern; predecessorCount: number; diff --git a/src/plugins/discover/public/application/apps/main/components/doc_table/actions/columns.test.ts b/src/plugins/discover/public/application/apps/main/components/doc_table/actions/columns.test.ts index d0984ff6fa7977..93b38cfc6519c0 100644 --- a/src/plugins/discover/public/application/apps/main/components/doc_table/actions/columns.test.ts +++ b/src/plugins/discover/public/application/apps/main/components/doc_table/actions/columns.test.ts @@ -64,7 +64,7 @@ describe('Test column actions', () => { sort: [], }); setAppState.mockClear(); - actions.onSetColumns(['first', 'second', 'third']); + actions.onSetColumns(['first', 'second', 'third'], true); expect(setAppState).toHaveBeenCalledWith({ columns: ['first', 'second', 'third'], }); diff --git a/src/plugins/discover/public/application/apps/main/components/doc_table/actions/columns.ts b/src/plugins/discover/public/application/apps/main/components/doc_table/actions/columns.ts index f3ad590ac6ce45..2fc82e25634bd3 100644 --- a/src/plugins/discover/public/application/apps/main/components/doc_table/actions/columns.ts +++ b/src/plugins/discover/public/application/apps/main/components/doc_table/actions/columns.ts @@ -102,12 +102,13 @@ export function getStateColumnActions({ setAppState({ columns }); } - function onSetColumns(columns: string[]) { - // remove first element of columns if it's the configured timeFieldName, which is prepended automatically + function onSetColumns(columns: string[], hideTimeColumn: boolean) { + // The next line should gone when classic table will be removed const actualColumns = - indexPattern.timeFieldName && indexPattern.timeFieldName === columns[0] + !hideTimeColumn && indexPattern.timeFieldName && indexPattern.timeFieldName === columns[0] ? columns.slice(1) : columns; + setAppState({ columns: actualColumns }); } return { diff --git a/src/plugins/discover/public/application/apps/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/apps/main/components/layout/discover_documents.tsx index d6ede9aa7fe5fe..64d5e08f25d73e 100644 --- a/src/plugins/discover/public/application/apps/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/apps/main/components/layout/discover_documents.tsx @@ -23,7 +23,7 @@ import { SAMPLE_SIZE_SETTING, SEARCH_FIELDS_FROM_SOURCE, } from '../../../../../../common'; -import { useDataGridColumns } from '../../../../helpers/use_data_grid_columns'; +import { useColumns } from '../../../../helpers/use_data_grid_columns'; import { IndexPattern } from '../../../../../../../data/common'; import { SavedSearch } from '../../../../../saved_searches'; import { DataDocumentsMsg, DataDocuments$ } from '../../services/use_saved_search'; @@ -69,7 +69,7 @@ function DiscoverDocumentsComponent({ const rows = useMemo(() => documentState.result || [], [documentState.result]); - const { columns, onAddColumn, onRemoveColumn, onMoveColumn, onSetColumns } = useDataGridColumns({ + const { columns, onAddColumn, onRemoveColumn, onMoveColumn, onSetColumns } = useColumns({ capabilities, config: uiSettings, indexPattern, diff --git a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx index a0799777a39473..76ed7069b294aa 100644 --- a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx +++ b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx @@ -35,7 +35,7 @@ import { getResultState } from '../../utils/get_result_state'; import { InspectorSession } from '../../../../../../../inspector/public'; import { DiscoverUninitialized } from '../uninitialized/uninitialized'; import { DataMainMsg } from '../../services/use_saved_search'; -import { useDataGridColumns } from '../../../../helpers/use_data_grid_columns'; +import { useColumns } from '../../../../helpers/use_data_grid_columns'; import { DiscoverDocuments } from './discover_documents'; import { FetchStatus } from '../../../../types'; import { useDataState } from '../../utils/use_data_state'; @@ -141,7 +141,7 @@ export function DiscoverLayout({ }; }, [inspectorSession]); - const { columns, onAddColumn, onRemoveColumn } = useDataGridColumns({ + const { columns, onAddColumn, onRemoveColumn } = useColumns({ capabilities, config: uiSettings, indexPattern, diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx index ca403c813010b8..6f96f21c9b8c8a 100644 --- a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx @@ -36,7 +36,11 @@ import { import { defaultPageSize, gridStyle, pageSizeArr, toolbarVisibility } from './constants'; import { DiscoverServices } from '../../../build_services'; import { getDisplayedColumns } from '../../helpers/columns'; -import { MAX_DOC_FIELDS_DISPLAYED, SHOW_MULTIFIELDS } from '../../../../common'; +import { + DOC_HIDE_TIME_COLUMN_SETTING, + MAX_DOC_FIELDS_DISPLAYED, + SHOW_MULTIFIELDS, +} from '../../../../common'; import { DiscoverGridDocumentToolbarBtn, getDocId } from './discover_grid_document_selection'; import { SortPairArr } from '../../apps/main/components/doc_table/lib/get_sort'; import { getFieldsToShow } from '../../helpers/get_fields_to_show'; @@ -91,7 +95,7 @@ export interface DiscoverGridProps { /** * Function to set all columns */ - onSetColumns: (columns: string[]) => void; + onSetColumns: (columns: string[], hideTimeColumn: boolean) => void; /** * function to change sorting of the documents, skipped when isSortEnabled is set to false */ @@ -302,15 +306,19 @@ export const DiscoverGrid = ({ [displayedColumns, indexPattern, showTimeCol, settings, defaultColumns, isSortEnabled] ); + const hideTimeColumn = useMemo( + () => services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false), + [services.uiSettings] + ); const schemaDetectors = useMemo(() => getSchemaDetectors(), []); const columnsVisibility = useMemo( () => ({ visibleColumns: getVisibleColumns(displayedColumns, indexPattern, showTimeCol) as string[], setVisibleColumns: (newColumns: string[]) => { - onSetColumns(newColumns); + onSetColumns(newColumns, hideTimeColumn); }, }), - [displayedColumns, indexPattern, showTimeCol, onSetColumns] + [displayedColumns, indexPattern, showTimeCol, hideTimeColumn, onSetColumns] ); const sorting = useMemo(() => { if (isSortEnabled) { diff --git a/src/plugins/discover/public/application/helpers/use_data_grid_columns.test.tsx b/src/plugins/discover/public/application/helpers/use_data_grid_columns.test.tsx index ccee271b73e324..abb2138e882b15 100644 --- a/src/plugins/discover/public/application/helpers/use_data_grid_columns.test.tsx +++ b/src/plugins/discover/public/application/helpers/use_data_grid_columns.test.tsx @@ -7,14 +7,14 @@ */ import { renderHook } from '@testing-library/react-hooks'; -import { useDataGridColumns } from './use_data_grid_columns'; +import { useColumns } from './use_data_grid_columns'; import { indexPatternMock } from '../../__mocks__/index_pattern'; import { configMock } from '../../__mocks__/config'; import { indexPatternsMock } from '../../__mocks__/index_patterns'; import { AppState } from '../apps/context/services/context_state'; import { Capabilities } from '../../../../../core/types'; -describe('useDataGridColumns', () => { +describe('useColumns', () => { const defaultProps = { capabilities: { discover: { save: true } } as unknown as Capabilities, config: configMock, @@ -29,7 +29,7 @@ describe('useDataGridColumns', () => { test('should return valid result', () => { const { result } = renderHook(() => { - return useDataGridColumns(defaultProps); + return useColumns(defaultProps); }); expect(result.current.columns).toEqual(['Time', 'message']); @@ -41,7 +41,7 @@ describe('useDataGridColumns', () => { test('should skip _source column when useNewFieldsApi is set to true', () => { const { result } = renderHook(() => { - return useDataGridColumns({ + return useColumns({ ...defaultProps, state: { columns: ['Time', '_source'], @@ -55,7 +55,7 @@ describe('useDataGridColumns', () => { test('should return empty columns array', () => { const { result } = renderHook(() => { - return useDataGridColumns({ + return useColumns({ ...defaultProps, state: { columns: [], diff --git a/src/plugins/discover/public/application/helpers/use_data_grid_columns.ts b/src/plugins/discover/public/application/helpers/use_data_grid_columns.ts index 4dbe14017dc6e7..888d67e2aaff31 100644 --- a/src/plugins/discover/public/application/helpers/use_data_grid_columns.ts +++ b/src/plugins/discover/public/application/helpers/use_data_grid_columns.ts @@ -20,7 +20,7 @@ import { } from '../apps/context/services/context_state'; import { getStateColumnActions } from '../apps/main/components/doc_table/actions/columns'; -interface UseDataGridColumnsProps { +interface UseColumnsProps { capabilities: Capabilities; config: IUiSettingsClient; indexPattern: IndexPattern; @@ -30,7 +30,7 @@ interface UseDataGridColumnsProps { state: DiscoverState | ContextState; } -export const useDataGridColumns = ({ +export const useColumns = ({ capabilities, config, indexPattern, @@ -38,7 +38,7 @@ export const useDataGridColumns = ({ setAppState, state, useNewFieldsApi, -}: UseDataGridColumnsProps) => { +}: UseColumnsProps) => { const { onAddColumn, onRemoveColumn, onSetColumns, onMoveColumn } = useMemo( () => getStateColumnActions({