[SECURITY] Bugs css/inspect (#74711) (#74760)

* Fix inspection button when using topN * css left over
elastic · Aug 11, 2020 · 848c2f7 · 848c2f7
1 parent 2dd1b0f
commit 848c2f7
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 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
@@ -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
@@ -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<HeaderGlobalProps>(({ hideDetectionEngine
       <FlexGroup
         alignItems="center"
         $globalFullScreen={globalFullScreen}
+        $hasSibling={globalHeaderPortalNode.hasChildNodes()}
         justifyContent="spaceBetween"
         wrap
       >

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
@@ -104,7 +104,7 @@ const StatefulTopNComponent: React.FC<Props> = ({
   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
@@ -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
@@ -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(
     () => ({