maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix saved query modal overlay (#68826)

Browse source
This commit is contained in:
patrykkopycinski 2020-07-02 23:48:41 +02:00 committed by GitHub
parent 113962e12a
commit 5fcf803d3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 115 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
View file

@ -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,51 @@ export function SavedQueryManagementComponent({
}
}, [isOpen, activePage, savedQueryService]);
const goToPage = (pageNumber: number) => {
setActivePage(pageNumber);
};
const handleTogglePopover = useCallback(() => setIsOpen((currentState) => !currentState), [
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) => {
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 = (
<EuiButtonEmpty
onClick={() => {
setIsOpen(!isOpen);
}}
onClick={handleTogglePopover}
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) => {
onLoad(savedQueryToSelect);
setIsOpen(false);
}}
onDelete={(savedQueryToDelete) => onDeleteSavedQuery(savedQueryToDelete)}
onSelect={handleSelect}
onDelete={handleDelete}
showWriteOperations={!!showSaveQuery}
/>
));
@ -175,9 +202,7 @@ export function SavedQueryManagementComponent({
id="savedQueryPopover"
button={savedQueryPopoverButton}
isOpen={isOpen}
closePopover={() => {
setIsOpen(false);
}}
closePopover={handleClosePopover}
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' }

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

@ -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();
});
});
});