[Discover] Fix Data grid columns movement (#115279) (#117266)

* [Discover] fix data grid columns movement * [Discover] apply suggestion * [Discover] fix linting Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dmitry Tomashevich <39378793+Dmitriynj@users.noreply.github.com>
elastic · Nov 3, 2021 · 750b30e · 750b30e
1 parent 1eb7537
commit 750b30e
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 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
@@ -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
@@ -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/...lugins/discover/public/application/apps/main/components/doc_table/actions/columns.test.ts b/...lugins/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
@@ -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
@@ -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
@@ -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';
@@ -125,7 +125,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
@@ -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
@@ -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
@@ -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,15 +30,15 @@ interface UseDataGridColumnsProps {
   state: DiscoverState | ContextState;
 }
 
-export const useDataGridColumns = ({
+export const useColumns = ({
   capabilities,
   config,
   indexPattern,
   indexPatterns,
   setAppState,
   state,
   useNewFieldsApi,
-}: UseDataGridColumnsProps) => {
+}: UseColumnsProps) => {
   const { onAddColumn, onRemoveColumn, onSetColumns, onMoveColumn } = useMemo(
     () =>
       getStateColumnActions({