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

Update how the timeline flyout is hidden so that children do not accidentally get displayed (#129660)

Browse source
This commit is contained in:
Kevin Qualters 2022-04-06 22:47:16 -04:00 • committed by GitHub
parent 6afbe5284a
commit 55c3353afd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

7
x-pack/plugins/security_solution/public/timelines/components/flyout/pane/__snapshots__/index.test.tsx.snap generated
View file

@ -1,7 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Pane renders correctly against snapshot 1`] = `
<Pane
timelineId="test"
/>
`;

26
x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.test.tsx
View file

@ -5,20 +5,38 @@
* 2.0.
*/
import { shallow } from 'enzyme';
import { render } from '@testing-library/react';
import React from 'react';
import { TestProviders } from '../../../../common/mock';
import { TimelineId } from '../../../../../common/types/timeline';
import { Pane } from '.';
jest.mock('../../../../common/lib/kibana');
jest.mock('../../../../common/components/url_state/normalize_time_range.ts');
jest.mock('../../../../common/hooks/use_resolve_conflict', () => {
return {
useResolveConflict: jest.fn().mockImplementation(() => null),
};
});
describe('Pane', () => {
test('renders correctly against snapshot', () => {
const EmptyComponent = shallow(
test('renders with display block by default', () => {
const EmptyComponent = render(
<TestProviders>
<Pane timelineId={TimelineId.test} />
</TestProviders>
);
expect(EmptyComponent.find('Pane')).toMatchSnapshot();
expect(EmptyComponent.getByTestId('flyout-pane')).toHaveStyle('display: block');
});
test('renders with display none when visibility is set to false', () => {
const EmptyComponent = render(
<TestProviders>
<Pane timelineId={TimelineId.test} visible={false} />
</TestProviders>
);
expect(EmptyComponent.getByTestId('flyout-pane')).toHaveStyle('display: none');
});
});

4
x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx
View file

@ -51,7 +51,7 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
}, [dispatch, timelineId]);
return (
<div data-test-subj="flyout-pane" style={{ visibility: visible ? 'visible' : 'hidden' }}>
<div data-test-subj="flyout-pane" style={{ display: visible ? 'block' : 'none' }}>
<StyledEuiFlyout
aria-label={i18n.TIMELINE_DESCRIPTION}
className="timeline-flyout"
@ -60,7 +60,7 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
onClose={handleClose}
size="100%"
ownFocus={false}
style={{ visibility: visible ? 'visible' : 'hidden' }}
style={{ display: visible ? 'block' : 'none' }}
>
<IndexPatternFieldEditorOverlayGlobalStyle />
<StatefulTimeline