github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

fix add field popover visibility issue (#137588) (#137967)

Browse source 
(cherry picked from commit 4912f3b8dc)
This commit is contained in:
Jatin Kathuria 2022-08-03 15:05:57 +02:00 • committed by GitHub
parent 988b6eb558
commit aa34e2e41f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

55
x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__tests__/add_data_provider_popover.test.tsx Normal file
View file

@ -0,0 +1,55 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { AddDataProviderPopover } from '../add_data_provider_popover';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { TestProvidersComponent } from '../../../../../common/mock/test_providers';
import { mockBrowserFields } from '../../../../../common/containers/source/mock';
const TEST_ID = {
ADD_FIELD: 'addField',
};
const clickOnAddField = () => {
const addFieldButton = screen.getByTestId(TEST_ID.ADD_FIELD);
fireEvent.click(addFieldButton);
};
describe('Testing AddDataProviderPopover', () => {
it('Test Popover is visible', async () => {
render(
<TestProvidersComponent>
<AddDataProviderPopover browserFields={mockBrowserFields} timelineId="some_ID" />
</TestProvidersComponent>
);
clickOnAddField();
await waitFor(() => {
expect(screen.getByRole('dialog')).toBeVisible();
});
});
it('Test Popover goes away after clicking again on add field', async () => {
render(
<TestProvidersComponent>
<AddDataProviderPopover browserFields={mockBrowserFields} timelineId="some_ID" />
</TestProvidersComponent>
);
clickOnAddField();
await waitFor(() => {
expect(screen.getByRole('dialog')).toBeVisible();
});
clickOnAddField();
await waitFor(() => {
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
});
});

12
x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx
View file

@ -44,9 +44,9 @@ const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = (
pick(['dataProviders', 'timelineType'], getTimeline(state, timelineId))
);
const handleOpenPopover = useCallback(
() => setIsAddFilterPopoverOpen(true),
[setIsAddFilterPopoverOpen]
const togglePopoverState = useCallback(
() => setIsAddFilterPopoverOpen(!isAddFilterPopoverOpen),
[setIsAddFilterPopoverOpen, isAddFilterPopoverOpen]
);
const handleClosePopover = useCallback(
@ -152,7 +152,7 @@ const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = (
return (
<EuiButton
size="s"
onClick={handleOpenPopover}
onClick={togglePopoverState}
data-test-subj="addField"
iconType="arrowDown"
fill
@ -166,14 +166,14 @@ const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = (
return (
<EuiButtonEmpty
size="s"
onClick={handleOpenPopover}
onClick={togglePopoverState}
data-test-subj="addField"
iconSide="right"
>
<EuiText size="s">{`+ ${ADD_FIELD_LABEL}`}</EuiText>
</EuiButtonEmpty>
);
}, [handleOpenPopover, timelineType]);
}, [togglePopoverState, timelineType]);
const content = useMemo(() => {
if (timelineType === TimelineType.template) {