[Discover] Close expanded document sidebar when switch data views

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

@@ -54,7 +54,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

@@ -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

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { ElasticSearchHit } from 'src/plugins/discover/public/services/doc_views/doc_views_types';
 import {
   IndexPattern,
   IndexPatternAttributes,
@@ -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/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 '../../services/doc_views/doc_views_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/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 '../../../services/doc_views/doc_views_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/components/discover_grid/discover_grid.tsx

@@ -111,7 +111,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

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