From d91e024f66b4a8c71749f599e392b8de7a5cd6e7 Mon Sep 17 00:00:00 2001 From: Xavier Mouligneau <189600+XavierM@users.noreply.github.com> Date: Tue, 11 Aug 2020 08:52:38 -0400 Subject: [PATCH] [SECURITY] Bugs css/inspect (#74711) * Fix inspection button when using topN * css left over --- .../components/configure_cases/index.tsx | 3 +++ .../common/components/header_global/index.tsx | 6 ++++-- .../public/common/components/top_n/index.tsx | 2 +- .../containers/use_global_time/index.test.tsx | 21 ++++++++++++++++++- .../containers/use_global_time/index.tsx | 8 ++++--- 5 files changed, 33 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/security_solution/public/cases/components/configure_cases/index.tsx b/x-pack/plugins/security_solution/public/cases/components/configure_cases/index.tsx index e2e3a600a95f..63b271b8cce7 100644 --- a/x-pack/plugins/security_solution/public/cases/components/configure_cases/index.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/configure_cases/index.tsx @@ -42,6 +42,9 @@ const FormWrapper = styled.div` padding-top: ${theme.eui.paddingSizes.xl}; padding-bottom: ${theme.eui.paddingSizes.xl}; + .euiFlyout { + z-index: ${theme.eui.euiZNavigation + 1}; + } `} `; diff --git a/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx b/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx index fbc3d62768d0..e05e3c2e9aeb 100644 --- a/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx @@ -41,14 +41,15 @@ const FlexItem = styled(EuiFlexItem)` `; FlexItem.displayName = 'FlexItem'; -const FlexGroup = styled(EuiFlexGroup)<{ $globalFullScreen: boolean }>` - ${({ $globalFullScreen, theme }) => ` +const FlexGroup = styled(EuiFlexGroup)<{ $globalFullScreen: boolean; $hasSibling: boolean }>` + ${({ $globalFullScreen, $hasSibling, theme }) => ` border-bottom: ${theme.eui.euiBorderThin}; margin-bottom: 1px; padding-bottom: 4px; padding-left: ${theme.eui.paddingSizes.l}; padding-right: ${gutterTimeline}; ${$globalFullScreen ? 'display: none;' : ''} + ${$hasSibling ? `border-bottom: ${theme.eui.euiBorderThin};` : 'border-bottom-width: 0px;'} `} `; FlexGroup.displayName = 'FlexGroup'; @@ -75,6 +76,7 @@ export const HeaderGlobal = React.memo(({ hideDetectionEngine diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/index.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/index.tsx index 807f1839973f..d71242329bcd 100644 --- a/x-pack/plugins/security_solution/public/common/components/top_n/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/top_n/index.tsx @@ -104,7 +104,7 @@ const StatefulTopNComponent: React.FC = ({ value, }) => { const kibana = useKibana(); - const { from, deleteQuery, setQuery, to } = useGlobalTime(); + const { from, deleteQuery, setQuery, to } = useGlobalTime(false); const options = getOptions( timelineId === TimelineId.active ? activeTimelineEventType : undefined diff --git a/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.test.tsx b/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.test.tsx index 9d5f1740b027..07ce3551e328 100644 --- a/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.test.tsx @@ -8,17 +8,22 @@ import { act, renderHook } from '@testing-library/react-hooks'; import { useGlobalTime } from '.'; +const mockDispatch = jest.fn(); + jest.mock('react-redux', () => { const originalModule = jest.requireActual('react-redux'); return { ...originalModule, - useDispatch: jest.fn().mockReturnValue(jest.fn()), + useDispatch: () => mockDispatch, useSelector: jest.fn().mockReturnValue({ from: 0, to: 0 }), }; }); describe('useGlobalTime', () => { + beforeEach(() => { + mockDispatch.mockReset(); + }); test('returns memoized value', () => { const { result, rerender } = renderHook(() => useGlobalTime()); @@ -30,4 +35,18 @@ describe('useGlobalTime', () => { expect(result1.from).toBe(0); expect(result1.to).toBe(0); }); + + test('clear all queries at unmount', () => { + const { rerender } = renderHook(() => useGlobalTime()); + act(() => rerender()); + expect(mockDispatch.mock.calls[0][0].type).toEqual( + 'x-pack/security_solution/local/inputs/DELETE_ALL_QUERY' + ); + }); + + test('do NOT clear all queries at unmount', () => { + const { rerender } = renderHook(() => useGlobalTime(false)); + act(() => rerender()); + expect(mockDispatch.mock.calls.length).toBe(0); + }); }); diff --git a/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx b/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx index b63616ecbcf5..52825caf9ce7 100644 --- a/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx +++ b/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx @@ -11,7 +11,7 @@ import { inputsSelectors } from '../../store'; import { inputsActions } from '../../store/actions'; import { SetQuery, DeleteQuery } from './types'; -export const useGlobalTime = () => { +export const useGlobalTime = (clearAllQuery: boolean = true) => { const dispatch = useDispatch(); const { from, to } = useSelector(inputsSelectors.globalTimeRangeSelector); const [isInitializing, setIsInitializing] = useState(true); @@ -32,9 +32,11 @@ export const useGlobalTime = () => { setIsInitializing(false); } return () => { - dispatch(inputsActions.deleteAllQuery({ id: 'global' })); + if (clearAllQuery) { + dispatch(inputsActions.deleteAllQuery({ id: 'global' })); + } }; - }, [dispatch, isInitializing]); + }, [clearAllQuery, dispatch, isInitializing]); const memoizedReturn = useMemo( () => ({