{SECURITY SOLUTION] EQL timeline bug (#93555) (#93720)

* timeline eql -> 1-Do not default tiebreaker 2-Close EQL setting popover * review I * review focus trap is a trap * no need to mock it for everybody Co-authored-by: Xavier Mouligneau <[email protected]>
elastic · Mar 5, 2021 · 231b271 · 231b271
1 parent 96de13e
commit 231b271
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 19 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/mock/global_state.ts b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
@@ -214,7 +214,7 @@ export const mockGlobalState: State = {
         description: '',
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
         },
         eventIdToNoteIds: {},

diff --git a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
@@ -2238,7 +2238,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
       eventCategoryField: 'event.category',
       query: '',
       size: 100,
-      tiebreakerField: 'event.sequence',
+      tiebreakerField: '',
       timestampField: '@timestamp',
     },
     eventIdToNoteIds: {},

diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
@@ -157,7 +157,7 @@ describe('alert actions', () => {
               eventCategoryField: 'event.category',
               query: '',
               size: 100,
-              tiebreakerField: 'event.sequence',
+              tiebreakerField: '',
               timestampField: '@timestamp',
             },
             eventIdToNoteIds: {},

diff --git a/...lugins/security_solution/public/detections/components/rules/eql_query_bar/footer.test.tsx b/...lugins/security_solution/public/detections/components/rules/eql_query_bar/footer.test.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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 { mount } from 'enzyme';
+
+import { TestProviders } from '../../../../common/mock';
+import { EqlQueryBarFooter } from './footer';
+
+jest.mock('../../../../common/lib/kibana', () => {
+  const originalModule = jest.requireActual('../../../../common/lib/kibana');
+  return {
+    ...originalModule,
+    useKibana: () => ({
+      services: {
+        docLinks: { links: { query: { eql: 'url-eql_doc' } } },
+      },
+    }),
+  };
+});
+
+describe('EQL footer', () => {
+  describe('EQL Settings', () => {
+    beforeEach(() => {
+      jest.resetAllMocks();
+    });
+
+    it('EQL settings button is enable when popover is NOT open', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <EqlQueryBarFooter errors={[]} onOptionsChange={jest.fn()} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper.find(`[data-test-subj="eql-settings-trigger"]`).first().prop('isDisabled')
+      ).toBeFalsy();
+    });
+
+    it('disable EQL settings button when popover is open', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <EqlQueryBarFooter errors={[]} onOptionsChange={jest.fn()} />
+        </TestProviders>
+      );
+      wrapper.find(`[data-test-subj="eql-settings-trigger"]`).first().simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper.find(`[data-test-subj="eql-settings-trigger"]`).first().prop('isDisabled')
+      ).toBeTruthy();
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/eql_query_bar/footer.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/eql_query_bar/footer.tsx
@@ -75,8 +75,14 @@ export const EqlQueryBarFooter: FC<Props> = ({
   const [openEqlSettings, setIsOpenEqlSettings] = useState(false);
   const [localSize, setLocalSize] = useState(optionsSelected?.size ?? 100);
   const debounceSize = useRef<Cancelable & SizeVoidFunc>();
-  const openEqlSettingsHandler = useCallback(() => setIsOpenEqlSettings(true), []);
-  const closeEqlSettingsHandler = useCallback(() => setIsOpenEqlSettings(false), []);
+
+  const openEqlSettingsHandler = useCallback(() => {
+    setIsOpenEqlSettings(true);
+  }, []);
+  const closeEqlSettingsHandler = useCallback(() => {
+    setIsOpenEqlSettings(false);
+  }, []);
+
   const handleEventCategoryField = useCallback(
     (opt: EuiComboBoxOptionOption[]) => {
       if (onOptionsChange) {
@@ -174,13 +180,15 @@ export const EqlQueryBarFooter: FC<Props> = ({
                   <EuiButtonIcon
                     onClick={openEqlSettingsHandler}
                     iconType="controlsVertical"
+                    isDisabled={openEqlSettings}
                     aria-label="eql settings"
+                    data-test-subj="eql-settings-trigger"
                   />
                 }
                 isOpen={openEqlSettings}
                 closePopover={closeEqlSettingsHandler}
                 anchorPosition="downCenter"
-                ownFocus={true}
+                ownFocus={false}
               >
                 <EuiPopoverTitle>{i18n.EQL_SETTINGS_TITLE}</EuiPopoverTitle>
                 <div style={{ width: '300px' }}>

diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
@@ -293,7 +293,7 @@ describe('helpers', () => {
         deletedEventIds: [],
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
           query: '',
           size: 100,
@@ -403,7 +403,7 @@ describe('helpers', () => {
         deletedEventIds: [],
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
           query: '',
           size: 100,
@@ -513,7 +513,7 @@ describe('helpers', () => {
         deletedEventIds: [],
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
           query: '',
           size: 100,
@@ -621,7 +621,7 @@ describe('helpers', () => {
         deletedEventIds: [],
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
           query: '',
           size: 100,
@@ -767,7 +767,7 @@ describe('helpers', () => {
         deletedEventIds: [],
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
           query: '',
           size: 100,
@@ -902,7 +902,7 @@ describe('helpers', () => {
         deletedEventIds: [],
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
           query: '',
           size: 100,
@@ -1053,7 +1053,7 @@ describe('helpers', () => {
         deletedEventIds: [],
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
           query: '',
           size: 100,
@@ -1163,7 +1163,7 @@ describe('helpers', () => {
         deletedEventIds: [],
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
           query: '',
           size: 100,

diff --git a/...lugins/security_solution/public/timelines/components/timeline/query_bar/eql/selectors.tsx b/...lugins/security_solution/public/timelines/components/timeline/query_bar/eql/selectors.tsx
@@ -16,7 +16,7 @@ export const getEqlOptions = () =>
         eventCategoryField: [{ label: 'event.category' }],
         tiebreakerField: [
           {
-            label: 'event.sequence',
+            label: '',
           },
         ],
         timestampField: [

diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/defaults.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/defaults.ts
@@ -25,7 +25,7 @@ export const timelineDefaults: SubsetTimelineModel &
   description: '',
   eqlOptions: {
     eventCategoryField: 'event.category',
-    tiebreakerField: 'event.sequence',
+    tiebreakerField: '',
     timestampField: '@timestamp',
     query: '',
     size: 100,

diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic.test.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic.test.ts
@@ -91,7 +91,7 @@ describe('Epic Timeline', () => {
         description: '',
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
         },
         eventIdToNoteIds: {},
@@ -241,7 +241,7 @@ describe('Epic Timeline', () => {
         description: '',
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: 'event.sequence',
+          tiebreakerField: '',
           timestampField: '@timestamp',
         },
         eventType: 'all',

diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.test.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.test.ts
@@ -79,7 +79,7 @@ const basicTimeline: TimelineModel = {
   description: '',
   eqlOptions: {
     eventCategoryField: 'event.category',
-    tiebreakerField: 'event.sequence',
+    tiebreakerField: '',
     timestampField: '@timestamp',
   },
   eventIdToNoteIds: {},