[Security Solution][Preview] - Enable preview when only filters used (#…

…94018) (#94044) ### Summary Addresses #93245 where the preview button was grayed out when only filters were present - no main query. # Conflicts: # x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx
elastic · Mar 9, 2021 · 108ebe6 · 108ebe6
1 parent 2a83da7
commit 108ebe6
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 7 deletions.
diff --git a/...plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx b/...plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx
@@ -16,6 +16,7 @@ import { PreviewQuery } from './';
 import { getMockEqlResponse } from '../../../../common/hooks/eql/eql_search_response.mock';
 import { useMatrixHistogram } from '../../../../common/containers/matrix_histogram';
 import { useEqlPreview } from '../../../../common/hooks/eql/';
+import { FilterMeta } from 'src/plugins/data/common';
 
 const mockTheme = {
   eui: {
@@ -130,6 +131,49 @@ describe('PreviewQuery', () => {
     ).toBeTruthy();
   });
 
+  test('it renders preview button enabled if query exists', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={mockTheme}>
+        <PreviewQuery
+          ruleType="query"
+          dataTestSubj="queryPreviewSelect"
+          idAria="queryPreview"
+          query={{ query: { query: 'host.name:"foo"', language: 'kql' }, filters: [] }}
+          index={['foo-*']}
+          threshold={undefined}
+          isDisabled={false}
+        />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper.find('[data-test-subj="queryPreviewButton"] button').props().disabled
+    ).toBeFalsy();
+  });
+
+  test('it renders preview button enabled if no query exists but filters do exist', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={mockTheme}>
+        <PreviewQuery
+          ruleType="query"
+          dataTestSubj="queryPreviewSelect"
+          idAria="queryPreview"
+          query={{
+            query: { query: '', language: 'kuery' },
+            filters: [{ meta: {} as FilterMeta, query: {} }],
+          }}
+          index={['foo-*']}
+          threshold={undefined}
+          isDisabled={false}
+        />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper.find('[data-test-subj="queryPreviewButton"] button').props().disabled
+    ).toBeFalsy();
+  });
+
   test('it renders query histogram when rule type is query and preview button clicked', () => {
     const wrapper = mount(
       <ThemeProvider theme={mockTheme}>

diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { Fragment, useCallback, useEffect, useReducer, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import { Unit } from '@elastic/datemath';
 import styled from 'styled-components';
 import {
@@ -277,6 +277,16 @@ export const PreviewQuery = ({
     }
   }, [setWarnings, setShowHistogram, ruleType, handlePreviewEqlQuery, startNonEql, timeframe]);
 
+  const previewButtonDisabled = useMemo(() => {
+    return (
+      isMatrixHistogramLoading ||
+      eqlQueryLoading ||
+      isDisabled ||
+      query == null ||
+      (query != null && query.query.query === '' && query.filters.length === 0)
+    );
+  }, [eqlQueryLoading, isDisabled, isMatrixHistogramLoading, query]);
+
   return (
     <>
       <EuiFormRow
@@ -302,9 +312,7 @@ export const PreviewQuery = ({
           <EuiFlexItem grow={false}>
             <PreviewButton
               fill
-              isDisabled={
-                isMatrixHistogramLoading || eqlQueryLoading || isDisabled || query == null
-              }
+              isDisabled={previewButtonDisabled}
               onClick={handlePreviewClicked}
               data-test-subj="queryPreviewButton"
             >

diff --git a/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx b/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
@@ -183,8 +183,6 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
   const index = formIndex || initialState.index;
   const threatIndex = formThreatIndex || initialState.threatIndex;
   const ruleType = formRuleType || initialState.ruleType;
-  const queryBarQuery =
-    formQuery != null ? formQuery.query.query : '' || initialState.queryBar.query.query;
   const [indexPatternsLoading, { browserFields, indexPatterns }] = useFetchIndex(index);
   const aggregatableFields = Object.entries(browserFields).reduce<BrowserFields>(
     (groupAcc, [groupName, groupValue]) => {
@@ -508,7 +506,7 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
               ruleType={ruleType}
               index={index}
               query={formQuery}
-              isDisabled={queryBarQuery.trim() === '' || !isQueryBarValid || index.length === 0}
+              isDisabled={!isQueryBarValid || index.length === 0}
               threshold={thresholdFormValue}
             />
           </>