[Discover] Close expanded document sidebar when switch data views (#1…

…19736)

* [Discover] close expanded document sidebar on index pattern change

* [Discover] fix unit test

* [Discover] fix use_discover_state unit test

* [Discover] fix linting

* [Discover] apply suggestions

* [Discover] fix linting

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/discover/public/application/context/context_app_content.tsx

@@ -15,14 +15,15 @@ import { SortDirection } from '../../../../data/public';
 import { LoadingStatus } from './services/context_query_state';
 import { ActionBar } from './components/action_bar/action_bar';
 import { DiscoverGrid } from '../../components/discover_grid/discover_grid';
-import { DocViewFilterFn, ElasticSearchHit } from '../../services/doc_views/doc_views_types';
+import { DocViewFilterFn } from '../../services/doc_views/doc_views_types';
 import { AppState } from './services/context_state';
 import { SurrDocType } from './services/context';
 import { DiscoverServices } from '../../build_services';
 import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from './services/constants';
 import { DocTableContext } from '../../components/doc_table/doc_table_context';
 import { EsHitRecordList } from '../types';
 import { SortPairArr } from '../../components/doc_table/lib/get_sort';
+import { ElasticSearchHit } from '../../types';
 
 export interface ContextAppContentProps {
   columns: string[];

src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx

@@ -17,8 +17,8 @@ import { DataDocuments$ } from '../../utils/use_saved_search';
 import { discoverServiceMock } from '../../../../__mocks__/services';
 import { FetchStatus } from '../../../types';
 import { DiscoverDocuments } from './discover_documents';
-import { ElasticSearchHit } from '../../../../services/doc_views/doc_views_types';
 import { indexPatternMock } from '../../../../__mocks__/index_pattern';
+import { ElasticSearchHit } from 'src/plugins/discover/public/types';
 
 jest.mock('../../../../kibana_services', () => ({
   ...jest.requireActual('../../../../kibana_services'),

src/plugins/discover/public/application/main/components/layout/discover_documents.tsx

@@ -14,7 +14,7 @@ import {
   EuiScreenReaderOnly,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { DocViewFilterFn, ElasticSearchHit } from '../../../../services/doc_views/doc_views_types';
+import { DocViewFilterFn } from '../../../../services/doc_views/doc_views_types';
 import { DiscoverGrid } from '../../../../components/discover_grid/discover_grid';
 import { FetchStatus } from '../../../types';
 import {
@@ -32,6 +32,7 @@ import { AppState, GetStateReturn } from '../../services/discover_state';
 import { useDataState } from '../../utils/use_data_state';
 import { DocTableInfinite } from '../../../../components/doc_table/doc_table_infinite';
 import { SortPairArr } from '../../../../components/doc_table/lib/get_sort';
+import { ElasticSearchHit } from '../../../../types';
 
 const DocTableInfiniteMemoized = React.memo(DocTableInfinite);
 const DataGridMemoized = React.memo(DiscoverGrid);
@@ -54,7 +55,7 @@ function DiscoverDocumentsComponent({
   onAddFilter: DocViewFilterFn;
   savedSearch: SavedSearch;
   services: DiscoverServices;
-  setExpandedDoc: (doc: ElasticSearchHit | undefined) => void;
+  setExpandedDoc: (doc?: ElasticSearchHit) => void;
   state: AppState;
   stateContainer: GetStateReturn;
 }) {

src/plugins/discover/public/application/main/components/layout/discover_layout.test.tsx

@@ -28,10 +28,10 @@ import {
 } from '../../utils/use_saved_search';
 import { discoverServiceMock } from '../../../../__mocks__/services';
 import { FetchStatus } from '../../../types';
-import { ElasticSearchHit } from '../../../../services/doc_views/doc_views_types';
 import { RequestAdapter } from '../../../../../../inspector';
 import { Chart } from '../chart/point_series';
 import { DiscoverSidebar } from '../sidebar/discover_sidebar';
+import { ElasticSearchHit } from '../../../../types';
 
 jest.mock('../../../../kibana_services', () => ({
   ...jest.requireActual('../../../../kibana_services'),
@@ -150,6 +150,7 @@ function getProps(indexPattern: IndexPattern, wasSidebarClosed?: boolean): Disco
     services,
     state: { columns: [] },
     stateContainer: {} as GetStateReturn,
+    setExpandedDoc: jest.fn(),
   };
 }
 

src/plugins/discover/public/application/main/components/layout/discover_layout.tsx

@@ -29,7 +29,7 @@ import { DiscoverLayoutProps } from './types';
 import { SEARCH_FIELDS_FROM_SOURCE, SHOW_FIELD_STATISTICS } from '../../../../../common';
 import { popularizeField } from '../../../../utils/popularize_field';
 import { DiscoverTopNav } from '../top_nav/discover_topnav';
-import { DocViewFilterFn, ElasticSearchHit } from '../../../../services/doc_views/doc_views_types';
+import { DocViewFilterFn } from '../../../../services/doc_views/doc_views_types';
 import { DiscoverChart } from '../chart';
 import { getResultState } from '../../utils/get_result_state';
 import { InspectorSession } from '../../../../../../inspector/public';
@@ -62,9 +62,11 @@ export function DiscoverLayout({
   indexPattern,
   indexPatternList,
   inspectorAdapters,
+  expandedDoc,
   navigateTo,
   onChangeIndexPattern,
   onUpdateQuery,
+  setExpandedDoc,
   savedSearchRefetch$,
   resetSavedSearch,
   savedSearchData$,
@@ -86,7 +88,6 @@ export function DiscoverLayout({
     spaces,
   } = services;
   const { main$, charts$, totalHits$ } = savedSearchData$;
-  const [expandedDoc, setExpandedDoc] = useState<ElasticSearchHit | undefined>(undefined);
   const [inspectorSession, setInspectorSession] = useState<InspectorSession | undefined>(undefined);
 
   const viewMode = useMemo(() => {

src/plugins/discover/public/application/main/components/layout/types.ts

@@ -19,6 +19,7 @@ import { DataRefetch$, SavedSearchData } from '../../utils/use_saved_search';
 import { DiscoverServices } from '../../../../build_services';
 import { SavedSearch } from '../../../../services/saved_searches';
 import { RequestAdapter } from '../../../../../../inspector';
+import { ElasticSearchHit } from '../../../../types';
 
 export interface DiscoverLayoutProps {
   indexPattern: IndexPattern;
@@ -28,6 +29,8 @@ export interface DiscoverLayoutProps {
   onChangeIndexPattern: (id: string) => void;
   onUpdateQuery: (payload: { dateRange: TimeRange; query?: Query }, isUpdate?: boolean) => void;
   resetSavedSearch: () => void;
+  expandedDoc?: ElasticSearchHit;
+  setExpandedDoc: (doc?: ElasticSearchHit) => void;
   savedSearch: SavedSearch;
   savedSearchData$: SavedSearchData;
   savedSearchRefetch$: DataRefetch$;

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.test.tsx

@@ -19,10 +19,10 @@ import { flattenHit, IndexPatternAttributes } from '../../../../../../data/commo
 import { SavedObject } from '../../../../../../../core/types';
 import { getDefaultFieldFilter } from './lib/field_filter';
 import { DiscoverSidebarComponent as DiscoverSidebar } from './discover_sidebar';
-import { ElasticSearchHit } from '../../../../services/doc_views/doc_views_types';
 import { discoverServiceMock as mockDiscoverServices } from '../../../../__mocks__/services';
 import { stubLogstashIndexPattern } from '../../../../../../data/common/stubs';
 import { VIEW_MODE } from '../../../../components/view_mode_toggle';
+import { ElasticSearchHit } from '../../../../types';
 
 jest.mock('../../../../kibana_services', () => ({
   getServices: () => mockDiscoverServices,

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx

@@ -39,8 +39,8 @@ import { FieldFilterState, getDefaultFieldFilter, setFieldFilterProp } from './l
 import { getIndexPatternFieldList } from './lib/get_index_pattern_field_list';
 import { DiscoverSidebarResponsiveProps } from './discover_sidebar_responsive';
 import { DiscoverIndexPatternManagement } from './discover_index_pattern_management';
-import { ElasticSearchHit } from '../../../../services/doc_views/doc_views_types';
 import { VIEW_MODE } from '../../../../components/view_mode_toggle';
+import { ElasticSearchHit } from '../../../../types';
 
 /**
  * Default number of available fields displayed and added on scroll

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx

@@ -22,11 +22,11 @@ import {
   DiscoverSidebarResponsiveProps,
 } from './discover_sidebar_responsive';
 import { DiscoverServices } from '../../../../build_services';
-import { ElasticSearchHit } from '../../../../services/doc_views/doc_views_types';
 import { FetchStatus } from '../../../types';
 import { DataDocuments$ } from '../../utils/use_saved_search';
 import { stubLogstashIndexPattern } from '../../../../../../data/common/stubs';
 import { VIEW_MODE } from '../../../../components/view_mode_toggle';
+import { ElasticSearchHit } from '../../../../types';
 
 const mockServices = {
   history: () => ({

src/plugins/discover/public/application/main/components/sidebar/lib/get_details.ts

@@ -9,7 +9,7 @@
 // @ts-expect-error
 import { fieldCalculator } from './field_calculator';
 import { IndexPattern, IndexPatternField } from '../../../../../../../data/public';
-import { ElasticSearchHit } from '../../../../../services/doc_views/doc_views_types';
+import { ElasticSearchHit } from '../../../../../types';
 
 export function getDetails(
   field: IndexPatternField,

src/plugins/discover/public/application/main/discover_main_app.tsx

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { History } from 'history';
 import { DiscoverLayout } from './components/layout';
 import { setBreadcrumbsTitle } from '../../utils/breadcrumbs';
@@ -15,6 +15,7 @@ import { useUrl } from './utils/use_url';
 import { IndexPatternAttributes, SavedObject } from '../../../../data/common';
 import { DiscoverServices } from '../../build_services';
 import { SavedSearch } from '../../services/saved_searches';
+import { ElasticSearchHit } from '../../types';
 
 const DiscoverLayoutMemoized = React.memo(DiscoverLayout);
 
@@ -40,6 +41,7 @@ export interface DiscoverMainProps {
 export function DiscoverMainApp(props: DiscoverMainProps) {
   const { savedSearch, services, history, indexPatternList } = props;
   const { chrome, docLinks, uiSettings: config, data } = services;
+  const [expandedDoc, setExpandedDoc] = useState<ElasticSearchHit | undefined>(undefined);
   const navigateTo = useCallback(
     (path: string) => {
       history.push(path);
@@ -65,6 +67,7 @@ export function DiscoverMainApp(props: DiscoverMainProps) {
     services,
     history,
     savedSearch,
+    setExpandedDoc,
   });
 
   /**
@@ -100,9 +103,11 @@ export function DiscoverMainApp(props: DiscoverMainProps) {
       indexPattern={indexPattern}
       indexPatternList={indexPatternList}
       inspectorAdapters={inspectorAdapters}
+      expandedDoc={expandedDoc}
       onChangeIndexPattern={onChangeIndexPattern}
       onUpdateQuery={onUpdateQuery}
       resetSavedSearch={resetCurrentSavedSearch}
+      setExpandedDoc={setExpandedDoc}
       navigateTo={navigateTo}
       savedSearch={savedSearch}
       savedSearchData$={data$}

src/plugins/discover/public/application/main/utils/calc_field_counts.test.ts

@@ -8,7 +8,7 @@
 
 import { calcFieldCounts } from './calc_field_counts';
 import { indexPatternMock } from '../../../__mocks__/index_pattern';
-import { ElasticSearchHit } from '../../../services/doc_views/doc_views_types';
+import { ElasticSearchHit } from '../../../types';
 
 describe('calcFieldCounts', () => {
   test('returns valid field count data', async () => {

src/plugins/discover/public/application/main/utils/calc_field_counts.ts

@@ -7,7 +7,7 @@
  */
 
 import { flattenHit, IndexPattern } from '../../../../../data/common';
-import { ElasticSearchHit } from '../../../services/doc_views/doc_views_types';
+import { ElasticSearchHit } from '../../../types';
 
 /**
  * This function is recording stats of the available fields, for usage in sidebar and sharing

src/plugins/discover/public/application/main/utils/use_discover_state.test.ts

@@ -37,6 +37,7 @@ describe('test useDiscoverState', () => {
         services: discoverServiceMock,
         history,
         savedSearch: savedSearchMock,
+        setExpandedDoc: jest.fn(),
       });
     });
     expect(result.current.state.index).toBe(indexPatternMock.id);
@@ -53,6 +54,7 @@ describe('test useDiscoverState', () => {
         services: discoverServiceMock,
         history,
         savedSearch: savedSearchMock,
+        setExpandedDoc: jest.fn(),
       });
     });
     await act(async () => {
@@ -69,6 +71,7 @@ describe('test useDiscoverState', () => {
         services: discoverServiceMock,
         history,
         savedSearch: savedSearchMock,
+        setExpandedDoc: jest.fn(),
       });
     });
 

src/plugins/discover/public/application/main/utils/use_discover_state.ts

@@ -24,15 +24,18 @@ import { useSearchSession } from './use_search_session';
 import { FetchStatus } from '../../types';
 import { getSwitchIndexPatternAppState } from './get_switch_index_pattern_app_state';
 import { SortPairArr } from '../../../components/doc_table/lib/get_sort';
+import { ElasticSearchHit } from '../../../types';
 
 export function useDiscoverState({
   services,
   history,
   savedSearch,
+  setExpandedDoc,
 }: {
   services: DiscoverServices;
   savedSearch: SavedSearch;
   history: History;
+  setExpandedDoc: (doc?: ElasticSearchHit) => void;
 }) {
   const { uiSettings: config, data, filterManager, indexPatterns, storage } = services;
   const useNewFieldsApi = useMemo(() => !config.get(SEARCH_FIELDS_FROM_SOURCE), [config]);
@@ -186,8 +189,9 @@ export function useDiscoverState({
         );
         stateContainer.setAppState(nextAppState);
       }
+      setExpandedDoc(undefined);
     },
-    [config, indexPattern, indexPatterns, state.columns, state.sort, stateContainer]
+    [config, indexPattern, indexPatterns, setExpandedDoc, state.columns, state.sort, stateContainer]
   );
   /**
    * Function triggered when the user changes the query in the search bar

src/plugins/discover/public/application/main/utils/use_saved_search.test.ts

@@ -59,6 +59,7 @@ describe('test useSavedSearch', () => {
         services: discoverServiceMock,
         history,
         savedSearch: savedSearchMock,
+        setExpandedDoc: jest.fn(),
       });
     });
 
@@ -100,6 +101,7 @@ describe('test useSavedSearch', () => {
         services: discoverServiceMock,
         history,
         savedSearch: savedSearchMock,
+        setExpandedDoc: jest.fn(),
       });
     });
 

src/plugins/discover/public/application/main/utils/use_saved_search.ts

@@ -11,7 +11,6 @@ import { DiscoverServices } from '../../../build_services';
 import { DiscoverSearchSessionManager } from '../services/discover_search_session';
 import { ISearchSource } from '../../../../../data/common';
 import { GetStateReturn } from '../services/discover_state';
-import { ElasticSearchHit } from '../../../services/doc_views/doc_views_types';
 import { RequestAdapter } from '../../../../../inspector/public';
 import type { AutoRefreshDoneFn } from '../../../../../data/public';
 import { validateTimeRange } from './validate_time_range';
@@ -23,6 +22,7 @@ import { fetchAll } from './fetch_all';
 import { useBehaviorSubject } from './use_behavior_subject';
 import { sendResetMsg } from './use_saved_search_messages';
 import { getFetch$ } from './get_fetch_observable';
+import { ElasticSearchHit } from '../../../types';
 
 export interface SavedSearchData {
   main$: DataMain$;

src/plugins/discover/public/components/discover_grid/discover_grid.test.tsx

@@ -16,8 +16,8 @@ import { mountWithIntl } from '@kbn/test/jest';
 import { DiscoverGrid, DiscoverGridProps } from './discover_grid';
 import { uiSettingsMock } from '../../__mocks__/ui_settings';
 import { DiscoverServices } from '../../build_services';
-import { ElasticSearchHit } from '../../services/doc_views/doc_views_types';
 import { getDocId } from './discover_grid_document_selection';
+import { ElasticSearchHit } from '../../types';
 
 jest.mock('../../kibana_services', () => ({
   ...jest.requireActual('../../kibana_services'),

src/plugins/discover/public/components/discover_grid/discover_grid.tsx

@@ -22,7 +22,7 @@ import {
   EuiIcon,
 } from '@elastic/eui';
 import { flattenHit, IndexPattern } from '../../../../data/common';
-import { DocViewFilterFn, ElasticSearchHit } from '../../services/doc_views/doc_views_types';
+import { DocViewFilterFn } from '../../services/doc_views/doc_views_types';
 import { getSchemaDetectors } from './discover_grid_schema';
 import { DiscoverGridFlyout } from './discover_grid_flyout';
 import { DiscoverGridContext } from './discover_grid_context';
@@ -49,6 +49,7 @@ import {
 import { DiscoverGridDocumentToolbarBtn, getDocId } from './discover_grid_document_selection';
 import { SortPairArr } from '../doc_table/lib/get_sort';
 import { getFieldsToShow } from '../../utils/get_fields_to_show';
+import { ElasticSearchHit } from '../../types';
 
 interface SortObj {
   id: string;
@@ -116,7 +117,7 @@ export interface DiscoverGridProps {
   /**
    * Function to set the expanded document, which is displayed in a flyout
    */
-  setExpandedDoc: (doc: ElasticSearchHit | undefined) => void;
+  setExpandedDoc: (doc?: ElasticSearchHit) => void;
   /**
    * Grid display settings persisted in Elasticsearch (e.g. column width)
    */

src/plugins/discover/public/components/discover_grid/discover_grid_context.tsx

@@ -8,11 +8,12 @@
 
 import React from 'react';
 import type { IndexPattern } from 'src/plugins/data/common';
-import { DocViewFilterFn, ElasticSearchHit } from '../../services/doc_views/doc_views_types';
+import { DocViewFilterFn } from '../../services/doc_views/doc_views_types';
+import { ElasticSearchHit } from '../../types';
 
 export interface GridContext {
-  expanded: ElasticSearchHit | undefined;
-  setExpanded: (hit: ElasticSearchHit | undefined) => void;
+  expanded?: ElasticSearchHit;
+  setExpanded: (hit?: ElasticSearchHit) => void;
   rows: ElasticSearchHit[];
   onFilter: DocViewFilterFn;
   indexPattern: IndexPattern;

src/plugins/discover/public/components/discover_grid/discover_grid_document_selection.tsx

@@ -21,8 +21,8 @@ import {
   euiLightVars as themeLight,
   euiDarkVars as themeDark,
 } from '@kbn/ui-shared-deps-src/theme';
-import { ElasticSearchHit } from '../../services/doc_views/doc_views_types';
 import { DiscoverGridContext } from './discover_grid_context';
+import { ElasticSearchHit } from '../../types';
 
 /**
  * Returning a generated id of a given ES document, since `_id` can be the same

src/plugins/discover/public/components/discover_grid/discover_grid_flyout.tsx

@@ -25,10 +25,11 @@ import {
   keys,
 } from '@elastic/eui';
 import { DocViewer } from '../../services/doc_views/components/doc_viewer/doc_viewer';
-import { DocViewFilterFn, ElasticSearchHit } from '../../services/doc_views/doc_views_types';
+import { DocViewFilterFn } from '../../services/doc_views/doc_views_types';
 import { DiscoverServices } from '../../build_services';
 import { getContextUrl } from '../../utils/get_context_url';
 import { getSingleDocUrl } from '../../utils/get_single_doc_url';
+import { ElasticSearchHit } from '../../types';
 
 interface Props {
   columns: string[];

src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx

@@ -10,8 +10,8 @@ import React from 'react';
 import { ReactWrapper, shallow } from 'enzyme';
 import { getRenderCellValueFn } from './get_render_cell_value';
 import { indexPatternMock } from '../../__mocks__/index_pattern';
-import { ElasticSearchHit } from '../../services/doc_views/doc_views_types';
 import { flattenHit } from 'src/plugins/data/common';
+import { ElasticSearchHit } from '../../types';
 
 jest.mock('../../../../kibana_react/public', () => ({
   useUiSetting: () => true,