From 05faa25291d642db1b770545ec5eee2a6017bcab Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Wed, 10 Jun 2020 23:42:53 +0200 Subject: [PATCH 1/3] Fix saved query modal overlay --- .../saved_query_management_component.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx index 6108de02801830..a31789b0390ce8 100644 --- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx +++ b/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,6 +88,16 @@ export function SavedQueryManagementComponent({ } }, [isOpen, activePage, savedQueryService]); + const handleSave = useCallback(() => { + onSave(); + setIsOpen(false); + }, [onSave]); + + const handleSaveAsNew = useCallback(() => { + onSaveAsNew(); + setIsOpen(false); + }, [onSaveAsNew]); + const goToPage = (pageNumber: number) => { setActivePage(pageNumber); }; @@ -234,7 +244,7 @@ export function SavedQueryManagementComponent({ onSave()} + onClick={handleSave} aria-label={i18n.translate( 'data.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel', { @@ -255,7 +265,7 @@ export function SavedQueryManagementComponent({ onSaveAsNew()} + onClick={handleSaveAsNew} aria-label={i18n.translate( 'data.search.searchBar.savedQueryPopoverSaveAsNewButtonAriaLabel', { @@ -279,7 +289,7 @@ export function SavedQueryManagementComponent({ onSave()} + onClick={handleSave} aria-label={i18n.translate( 'data.search.searchBar.savedQueryPopoverSaveButtonAriaLabel', { defaultMessage: 'Save a new saved query' } From c6932952c250795e4a3b03128529c6bff8b671d7 Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Thu, 11 Jun 2020 06:53:14 +0200 Subject: [PATCH 2/3] Fix onDelete callback --- .../saved_query_management_component.tsx | 69 +++++++++++-------- 1 file changed, 41 insertions(+), 28 deletions(-) diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx index a31789b0390ce8..c68501cc177818 100644 --- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx +++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx @@ -88,19 +88,47 @@ export function SavedQueryManagementComponent({ } }, [isOpen, activePage, savedQueryService]); + const handleClosePopover = useCallback(() => setIsOpen(false), []); + const handleSave = useCallback(() => { onSave(); - setIsOpen(false); - }, [onSave]); + handleClosePopover(); + }, [handleClosePopover, onSave]); const handleSaveAsNew = useCallback(() => { onSaveAsNew(); - setIsOpen(false); - }, [onSaveAsNew]); + handleClosePopover(); + }, [handleClosePopover, onSaveAsNew]); - const goToPage = (pageNumber: number) => { - setActivePage(pageNumber); - }; + 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', @@ -123,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 = ( @@ -169,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} /> )); @@ -185,9 +200,7 @@ export function SavedQueryManagementComponent({ id="savedQueryPopover" button={savedQueryPopoverButton} isOpen={isOpen} - closePopover={() => { - setIsOpen(false); - }} + closePopover={handleClosePopover} anchorPosition="downLeft" panelPaddingSize="none" buffer={-8} @@ -308,7 +321,7 @@ export function SavedQueryManagementComponent({ onClearSavedQuery()} + onClick={onClearSavedQuery} aria-label={i18n.translate( 'data.search.searchBar.savedQueryPopoverClearButtonAriaLabel', { defaultMessage: 'Clear current saved query' } From 136c7da9372940f336cf6c1dd6779518e2d5576b Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Thu, 2 Jul 2020 15:25:28 +0200 Subject: [PATCH 3/3] Add unit test --- .../saved_query_management_component.tsx | 14 +++-- .../components/query_bar/index.test.tsx | 59 +++++++++++++++++++ 2 files changed, 67 insertions(+), 6 deletions(-) diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx index c68501cc177818..4c5b3ad9aececc 100644 --- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx +++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx @@ -88,22 +88,26 @@ export function SavedQueryManagementComponent({ } }, [isOpen, activePage, savedQueryService]); + const handleTogglePopover = useCallback(() => setIsOpen((currentState) => !currentState), [ + setIsOpen, + ]); + const handleClosePopover = useCallback(() => setIsOpen(false), []); const handleSave = useCallback(() => { - onSave(); handleClosePopover(); + onSave(); }, [handleClosePopover, onSave]); const handleSaveAsNew = useCallback(() => { - onSaveAsNew(); handleClosePopover(); + onSaveAsNew(); }, [handleClosePopover, onSaveAsNew]); const handleSelect = useCallback( (savedQueryToSelect) => { - onLoad(savedQueryToSelect); handleClosePopover(); + onLoad(savedQueryToSelect); }, [handleClosePopover, onLoad] ); @@ -157,9 +161,7 @@ export function SavedQueryManagementComponent({ const savedQueryPopoverButton = ( { - setIsOpen(!isOpen); - }} + onClick={handleTogglePopover} aria-label={i18n.translate('data.search.searchBar.savedQueryPopoverButtonText', { defaultMessage: 'See saved queries', })} diff --git a/x-pack/plugins/security_solution/public/common/components/query_bar/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/query_bar/index.test.tsx index f079715baec1c1..a3cab1cfabd71b 100644 --- a/x-pack/plugins/security_solution/public/common/components/query_bar/index.test.tsx +++ b/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) => ( + + + + + + ); + + const wrapper = mount( + + ); + + 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(); + }); + }); });