[Discover] Dismiss other flyouts

packages/kbn-discover-utils/index.ts

@@ -57,6 +57,7 @@ export {
   getVisibleColumns,
   canPrependTimeFieldColumn,
   DiscoverFlyouts,
+  dismissAllFlyoutsExceptFor,
   dismissFlyouts,
 } from './src';
 

packages/kbn-discover-utils/src/utils/dismiss_flyouts.ts

@@ -13,7 +13,7 @@ export enum DiscoverFlyouts {
   esqlDocs = 'esqlDocs',
 }
 
-const ALL_FLYOUTS = Object.values(DiscoverFlyouts);
+const AllDiscoverFlyouts = Object.values(DiscoverFlyouts);
 
 const getFlyoutCloseButton = (flyout: DiscoverFlyouts): HTMLElement | null => {
   switch (flyout) {
@@ -28,11 +28,21 @@ const getFlyoutCloseButton = (flyout: DiscoverFlyouts): HTMLElement | null => {
   }
 };
 
-export const dismissFlyouts = (selectedFlyouts: DiscoverFlyouts[] = ALL_FLYOUTS) => {
+export const dismissFlyouts = (
+  selectedFlyouts: DiscoverFlyouts[] = AllDiscoverFlyouts,
+  excludedFlyout?: DiscoverFlyouts
+) => {
   selectedFlyouts.forEach((flyout) => {
+    if (flyout === excludedFlyout) {
+      return;
+    }
     const closeButton = getFlyoutCloseButton(flyout);
     if (closeButton) {
       closeButton.click?.();
     }
   });
 };
+
+export const dismissAllFlyoutsExceptFor = (excludedFlyout: DiscoverFlyouts) => {
+  dismissFlyouts(AllDiscoverFlyouts, excludedFlyout);
+};

packages/kbn-discover-utils/src/utils/index.ts

@@ -22,4 +22,4 @@ export * from './get_field_value';
 export * from './calc_field_counts';
 export * from './get_visible_columns';
 export { isLegacyTableEnabled } from './is_legacy_table_enabled';
-export { DiscoverFlyouts, dismissFlyouts } from './dismiss_flyouts';
+export { DiscoverFlyouts, dismissAllFlyoutsExceptFor, dismissFlyouts } from './dismiss_flyouts';

src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx

@@ -12,6 +12,7 @@ import { type DataView, DataViewType } from '@kbn/data-views-plugin/public';
 import { DataViewPickerProps } from '@kbn/unified-search-plugin/public';
 import { ENABLE_ESQL } from '@kbn/esql-utils';
 import { TextBasedLanguages } from '@kbn/esql-utils';
+import { DiscoverFlyouts, dismissAllFlyoutsExceptFor } from '@kbn/discover-utils';
 import { useSavedSearchInitial } from '../../state_management/discover_state_provider';
 import { ESQL_TRANSITION_MODAL_KEY } from '../../../../../common/constants';
 import { useInternalStateSelector } from '../../state_management/discover_internal_state_container';
@@ -233,6 +234,12 @@ export const DiscoverTopNav = ({
     uiSettings,
   ]);
 
+  const onESQLDocsFlyoutVisibilityChanged = useCallback((isOpen: boolean) => {
+    if (isOpen) {
+      dismissAllFlyoutsExceptFor(DiscoverFlyouts.esqlDocs);
+    }
+  }, []);
+
   const searchBarCustomization = useDiscoverCustomization('search_bar');
 
   const SearchBar = useMemo(
@@ -278,6 +285,7 @@ export const DiscoverTopNav = ({
             <searchBarCustomization.PrependFilterBar />
           ) : undefined
         }
+        onESQLDocsFlyoutVisibilityChanged={onESQLDocsFlyoutVisibilityChanged}
       />
       {isESQLToDataViewTransitionModalVisible && (
         <ESQLToDataViewTransitionModal onClose={onESQLToDataViewTransitionModalClose} />

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

@@ -7,13 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import { Filter, Query, AggregateQuery, isOfAggregateQueryType } from '@kbn/es-query';
+import { AggregateQuery, Filter, isOfAggregateQueryType, Query } from '@kbn/es-query';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DataTableColumnsMeta } from '@kbn/unified-data-table';
 import type { DocViewsRegistry } from '@kbn/unified-doc-viewer';
+import { DiscoverFlyouts, dismissAllFlyoutsExceptFor } from '@kbn/discover-utils';
 import { UnifiedDocViewerFlyout } from '@kbn/unified-doc-viewer-plugin/public';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
 import { useFlyoutActions } from './use_flyout_actions';
@@ -88,6 +89,10 @@ export function DiscoverGridFlyout({
     return getDocViewer({ record: actualHit });
   }, [flyoutCustomization, getDocViewerAccessor, actualHit]);
 
+  useEffect(() => {
+    dismissAllFlyoutsExceptFor(DiscoverFlyouts.docViewer);
+  }, []);
+
   return (
     <UnifiedDocViewerFlyout
       flyoutTitle={docViewer.title}

src/plugins/unified_histogram/public/chart/chart_config_panel.tsx

@@ -14,6 +14,7 @@ import { isEqual, isObject } from 'lodash';
 import type { LensEmbeddableOutput, Suggestion } from '@kbn/lens-plugin/public';
 import type { Datatable } from '@kbn/expressions-plugin/common';
 import { EditLensConfigPanelComponent } from '@kbn/lens-plugin/public/plugin';
+import { DiscoverFlyouts, dismissAllFlyoutsExceptFor } from '@kbn/discover-utils';
 import { deriveLensSuggestionFromLensAttributes } from '../utils/external_vis_context';
 
 import {
@@ -144,5 +145,13 @@ export function ChartConfigPanel({
     currentSuggestionType,
   ]);
 
-  return isPlainRecord ? editLensConfigPanel : null;
+  const flyoutElement = isPlainRecord ? editLensConfigPanel : null;
+
+  useEffect(() => {
+    if (flyoutElement) {
+      dismissAllFlyoutsExceptFor(DiscoverFlyouts.lensEdit);
+    }
+  }, [flyoutElement]);
+
+  return flyoutElement;
 }

src/plugins/unified_search/public/query_string_input/esql_menu_popover.tsx

@@ -22,7 +22,13 @@ import { FEEDBACK_LINK } from '@kbn/esql-utils';
 import { LanguageDocumentationFlyout } from '@kbn/language-documentation';
 import type { IUnifiedSearchPluginServices } from '../types';
 
-export const ESQLMenuPopover = () => {
+export interface ESQLMenuPopoverProps {
+  onESQLDocsFlyoutVisibilityChanged?: (isOpen: boolean) => void;
+}
+
+export const ESQLMenuPopover: React.FC<ESQLMenuPopoverProps> = ({
+  onESQLDocsFlyoutVisibilityChanged,
+}) => {
   const kibana = useKibana<IUnifiedSearchPluginServices>();
 
   const { docLinks } = kibana.services;
@@ -34,6 +40,14 @@ export const ESQLMenuPopover = () => {
     setIsESQLMenuPopoverOpen(false);
   }, [isLanguageComponentOpen]);
 
+  const onHelpMenuVisibilityChange = useCallback(
+    (status: boolean) => {
+      setIsLanguageComponentOpen(status);
+      onESQLDocsFlyoutVisibilityChanged?.(status);
+    },
+    [setIsLanguageComponentOpen, onESQLDocsFlyoutVisibilityChanged]
+  );
+
   const esqlPanelItems = useMemo(() => {
     const panelItems: EuiContextMenuPanelProps['items'] = [];
     panelItems.push(
@@ -122,7 +136,7 @@ export const ESQLMenuPopover = () => {
         searchInDescription
         linkToDocumentation={docLinks?.links?.query?.queryESQL ?? ''}
         isHelpMenuOpen={isLanguageComponentOpen}
-        onHelpMenuVisibilityChange={setIsLanguageComponentOpen}
+        onHelpMenuVisibilityChange={onHelpMenuVisibilityChange}
       />
     </>
   );

src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx

@@ -51,7 +51,7 @@ import { NoDataPopover } from './no_data_popover';
 import { shallowEqual } from '../utils/shallow_equal';
 import { AddFilterPopover } from './add_filter_popover';
 import { DataViewPicker, DataViewPickerProps } from '../dataview_picker';
-import { ESQLMenuPopover } from './esql_menu_popover';
+import { ESQLMenuPopover, type ESQLMenuPopoverProps } from './esql_menu_popover';
 
 import { FilterButtonGroup } from '../filter_bar/filter_button_group/filter_button_group';
 import type {
@@ -186,6 +186,7 @@ export interface QueryBarTopRowProps<QT extends Query | AggregateQuery = Query>
   submitOnBlur?: boolean;
   renderQueryInputAppend?: () => React.ReactNode;
   disableExternalPadding?: boolean;
+  onESQLDocsFlyoutVisibilityChanged?: ESQLMenuPopoverProps['onESQLDocsFlyoutVisibilityChanged'];
 }
 
 export const SharingMetaFields = React.memo(function SharingMetaFields({
@@ -774,7 +775,11 @@ export const QueryBarTopRow = React.memo(
               wrap
             >
               {props.dataViewPickerOverride || renderDataViewsPicker()}
-              {Boolean(isQueryLangSelected) && <ESQLMenuPopover />}
+              {Boolean(isQueryLangSelected) && (
+                <ESQLMenuPopover
+                  onESQLDocsFlyoutVisibilityChanged={props.onESQLDocsFlyoutVisibilityChanged}
+                />
+              )}
               <EuiFlexItem
                 grow={!shouldShowDatePickerAsBadge()}
                 style={{ minWidth: shouldShowDatePickerAsBadge() ? 'auto' : 320, maxWidth: '100%' }}

src/plugins/unified_search/public/search_bar/create_search_bar.tsx

@@ -268,6 +268,7 @@ export function createSearchBar({
             dataTestSubj={props.dataTestSubj}
             filtersForSuggestions={props.filtersForSuggestions}
             prependFilterBar={props.prependFilterBar}
+            onESQLDocsFlyoutVisibilityChanged={props.onESQLDocsFlyoutVisibilityChanged}
           />
         </core.i18n.Context>
       </KibanaContextProvider>

src/plugins/unified_search/public/search_bar/search_bar.tsx

@@ -138,6 +138,7 @@ export interface SearchBarOwnProps<QT extends AggregateQuery | Query = Query> {
   submitOnBlur?: boolean;
 
   renderQueryInputAppend?: () => React.ReactNode;
+  onESQLDocsFlyoutVisibilityChanged?: QueryBarTopRowProps['onESQLDocsFlyoutVisibilityChanged'];
 }
 
 export type SearchBarProps<QT extends Query | AggregateQuery = Query> = SearchBarOwnProps<QT> &
@@ -660,6 +661,7 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
           suggestionsAbstraction={this.props.suggestionsAbstraction}
           renderQueryInputAppend={this.props.renderQueryInputAppend}
           disableExternalPadding={this.props.displayStyle === 'withBorders'}
+          onESQLDocsFlyoutVisibilityChanged={this.props.onESQLDocsFlyoutVisibilityChanged}
         />
       </div>
     );