Fix saved query modal overlay (#68826)

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx

@@ -33,7 +33,7 @@ import {
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
-import React, { useEffect, useState, Fragment, useRef } from 'react';
+import React, { useCallback, useEffect, useState, Fragment, useRef } from 'react';
 import { sortBy } from 'lodash';
 import { SavedQuery, SavedQueryService } from '../..';
 import { SavedQueryListItem } from './saved_query_list_item';
@@ -88,10 +88,52 @@ export function SavedQueryManagementComponent({
     }
   }, [isOpen, activePage, savedQueryService]);
 
-  const goToPage = (pageNumber: number) => {
+  const handleTogglePopover = useCallback(() => setIsOpen((currentState) => !currentState), [
-    setActivePage(pageNumber);
+    setIsOpen,
+  ]);
+
+  const handleClosePopover = useCallback(() => setIsOpen(false), []);
+
+  const handleSave = useCallback(() => {
+    handleClosePopover();
+    onSave();
+  }, [handleClosePopover, onSave]);
+
+  const handleSaveAsNew = useCallback(() => {
+    handleClosePopover();
+    onSaveAsNew();
+  }, [handleClosePopover, onSaveAsNew]);
+
+  const handleSelect = useCallback(
+    (savedQueryToSelect) => {
+      handleClosePopover();
+      onLoad(savedQueryToSelect);
+    },
+    [handleClosePopover, onLoad]
+  );
+
+  const handleDelete = useCallback(
+    (savedQueryToDelete: SavedQuery) => {
+      const onDeleteSavedQuery = async (savedQuery: SavedQuery) => {
+        cancelPendingListingRequest.current();
+        setSavedQueries(
+          savedQueries.filter((currentSavedQuery) => currentSavedQuery.id !== savedQuery.id)
+        );
+
+        if (loadedSavedQuery && loadedSavedQuery.id === savedQuery.id) {
+          onClearSavedQuery();
+        }
+
+        await savedQueryService.deleteSavedQuery(savedQuery.id);
+        setActivePage(0);
       };
 
+      onDeleteSavedQuery(savedQueryToDelete);
+      handleClosePopover();
+    },
+    [handleClosePopover, loadedSavedQuery, onClearSavedQuery, savedQueries, savedQueryService]
+  );
+
   const savedQueryDescriptionText = i18n.translate(
     'data.search.searchBar.savedQueryDescriptionText',
     {
@@ -113,25 +155,13 @@ export function SavedQueryManagementComponent({
     }
   );
 
-  const onDeleteSavedQuery = async (savedQuery: SavedQuery) => {
+  const goToPage = (pageNumber: number) => {
-    cancelPendingListingRequest.current();
+    setActivePage(pageNumber);
-    setSavedQueries(
-      savedQueries.filter((currentSavedQuery) => currentSavedQuery.id !== savedQuery.id)
-    );
-
-    if (loadedSavedQuery && loadedSavedQuery.id === savedQuery.id) {
-      onClearSavedQuery();
-    }
-
-    await savedQueryService.deleteSavedQuery(savedQuery.id);
-    setActivePage(0);
   };
 
   const savedQueryPopoverButton = (
     <EuiButtonEmpty
-      onClick={() => {
+      onClick={handleTogglePopover}
-        setIsOpen(!isOpen);
-      }}
       aria-label={i18n.translate('data.search.searchBar.savedQueryPopoverButtonText', {
         defaultMessage: 'See saved queries',
       })}
@@ -159,11 +189,8 @@ export function SavedQueryManagementComponent({
         key={savedQuery.id}
         savedQuery={savedQuery}
         isSelected={!!loadedSavedQuery && loadedSavedQuery.id === savedQuery.id}
-        onSelect={(savedQueryToSelect) => {
+        onSelect={handleSelect}
-          onLoad(savedQueryToSelect);
+        onDelete={handleDelete}
-          setIsOpen(false);
-        }}
-        onDelete={(savedQueryToDelete) => onDeleteSavedQuery(savedQueryToDelete)}
         showWriteOperations={!!showSaveQuery}
       />
     ));
@@ -175,9 +202,7 @@ export function SavedQueryManagementComponent({
         id="savedQueryPopover"
         button={savedQueryPopoverButton}
         isOpen={isOpen}
-        closePopover={() => {
+        closePopover={handleClosePopover}
-          setIsOpen(false);
-        }}
         anchorPosition="downLeft"
         panelPaddingSize="none"
         buffer={-8}
@@ -235,7 +260,7 @@ export function SavedQueryManagementComponent({
                     <EuiButton
                       size="s"
                       fill
-                      onClick={() => onSave()}
+                      onClick={handleSave}
                       aria-label={i18n.translate(
                         'data.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel',
                         {
@@ -256,7 +281,7 @@ export function SavedQueryManagementComponent({
                   <EuiFlexItem grow={false}>
                     <EuiButton
                       size="s"
-                      onClick={() => onSaveAsNew()}
+                      onClick={handleSaveAsNew}
                       aria-label={i18n.translate(
                         'data.search.searchBar.savedQueryPopoverSaveAsNewButtonAriaLabel',
                         {
@@ -280,7 +305,7 @@ export function SavedQueryManagementComponent({
                   <EuiButton
                     size="s"
                     fill
-                    onClick={() => onSave()}
+                    onClick={handleSave}
                     aria-label={i18n.translate(
                       'data.search.searchBar.savedQueryPopoverSaveButtonAriaLabel',
                       { defaultMessage: 'Save a new saved query' }
@@ -299,7 +324,7 @@ export function SavedQueryManagementComponent({
                   <EuiButtonEmpty
                     size="s"
                     flush="left"
-                    onClick={() => onClearSavedQuery()}
+                    onClick={onClearSavedQuery}
                     aria-label={i18n.translate(
                       'data.search.searchBar.savedQueryPopoverClearButtonAriaLabel',
                       { defaultMessage: 'Clear current saved query' }

x-pack/plugins/security_solution/public/common/components/query_bar/index.test.tsx

@@ -376,4 +376,63 @@ describe('QueryBar ', () => {
       expect(onSubmitQueryRef).toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
     });
   });
+
+  describe('SavedQueryManagementComponent state', () => {
+    test('popover should hidden when "Save current query" button was clicked', () => {
+      const KibanaWithStorageProvider = createKibanaContextProviderMock();
+
+      const Proxy = (props: QueryBarComponentProps) => (
+        <TestProviders>
+          <KibanaWithStorageProvider
+            services={{
+              data: {
+                query: {
+                  savedQueries: {
+                    findSavedQueries: jest.fn().mockResolvedValue({ total: 0, queries: [] }),
+                    getAllSavedQueries: jest.fn().mockResolvedValue([]),
+                  },
+                },
+              },
+            }}
+          >
+            <QueryBar {...props} />
+          </KibanaWithStorageProvider>
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          dateRangeFrom={DEFAULT_FROM}
+          dateRangeTo={DEFAULT_TO}
+          hideSavedQuery={false}
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          filterQuery={{
+            query: 'here: query',
+            language: 'kuery',
+          }}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filters={[]}
+          onChangedQuery={mockOnChangeQuery}
+          onSubmitQuery={mockOnSubmitQuery}
+          onSavedQuery={mockOnSavedQuery}
+        />
+      );
+
+      const isSavedQueryPopoverOpen = () =>
+        wrapper.find('EuiPopover[id="savedQueryPopover"]').prop('isOpen');
+
+      expect(isSavedQueryPopoverOpen()).toBeFalsy();
+
+      wrapper
+        .find('button[data-test-subj="saved-query-management-popover-button"]')
+        .simulate('click');
+
+      expect(isSavedQueryPopoverOpen()).toBeTruthy();
+
+      wrapper.find('button[data-test-subj="saved-query-management-save-button"]').simulate('click');
+
+      expect(isSavedQueryPopoverOpen()).toBeFalsy();
+    });
+  });
 });