Fix saved query modal overlay

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,9 +88,47 @@ export function SavedQueryManagementComponent({
     }
   }, [isOpen, activePage, savedQueryService]);
 
-  const goToPage = (pageNumber: number) => {
-    setActivePage(pageNumber);
-  };
+  const handleClosePopover = useCallback(() => setIsOpen(false), []);
+
+  const handleSave = useCallback(() => {
+    onSave();
+    handleClosePopover();
+  }, [handleClosePopover, onSave]);
+
+  const handleSaveAsNew = useCallback(() => {
+    onSaveAsNew();
+    handleClosePopover();
+  }, [handleClosePopover, onSaveAsNew]);
+
+  const handleSelect = useCallback(
+    (savedQueryToSelect) => {
+      onLoad(savedQueryToSelect);
+      handleClosePopover();
+    },
+    [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,18 +151,8 @@ export function SavedQueryManagementComponent({
     }
   );
 
-  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);
+  const goToPage = (pageNumber: number) => {
+    setActivePage(pageNumber);
   };
 
   const savedQueryPopoverButton = (
@@ -159,11 +187,8 @@ export function SavedQueryManagementComponent({
         key={savedQuery.id}
         savedQuery={savedQuery}
         isSelected={!!loadedSavedQuery && loadedSavedQuery.id === savedQuery.id}
-        onSelect={(savedQueryToSelect) => {
-          onLoad(savedQueryToSelect);
-          setIsOpen(false);
-        }}
-        onDelete={(savedQueryToDelete) => onDeleteSavedQuery(savedQueryToDelete)}
+        onSelect={handleSelect}
+        onDelete={handleDelete}
         showWriteOperations={!!showSaveQuery}
       />
     ));
@@ -175,9 +200,7 @@ export function SavedQueryManagementComponent({
         id="savedQueryPopover"
         button={savedQueryPopoverButton}
         isOpen={isOpen}
-        closePopover={() => {
-          setIsOpen(false);
-        }}
+        closePopover={handleClosePopover}
         anchorPosition="downLeft"
         panelPaddingSize="none"
         buffer={-8}
@@ -234,7 +257,7 @@ export function SavedQueryManagementComponent({
                     <EuiButton
                       size="s"
                       fill
-                      onClick={() => onSave()}
+                      onClick={handleSave}
                       aria-label={i18n.translate(
                         'data.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel',
                         {
@@ -255,7 +278,7 @@ export function SavedQueryManagementComponent({
                   <EuiFlexItem grow={false}>
                     <EuiButton
                       size="s"
-                      onClick={() => onSaveAsNew()}
+                      onClick={handleSaveAsNew}
                       aria-label={i18n.translate(
                         'data.search.searchBar.savedQueryPopoverSaveAsNewButtonAriaLabel',
                         {
@@ -279,7 +302,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' }
@@ -298,7 +321,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' }