diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx
index 4d43040880ae1..37b6a264269bf 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx
+++ b/x-pack/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(
+
+
+
+ );
+
+ 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(
+
+
+
+ );
+
+ 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(
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
index e3920856ea19e..c0c26780e8d71 100644
--- 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 (
<>
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
index c6bb35fdb7266..733c2303255cc 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
@@ -183,8 +183,6 @@ const StepDefineRuleComponent: FC = ({
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(
(groupAcc, [groupName, groupValue]) => {
@@ -508,7 +506,7 @@ const StepDefineRuleComponent: FC = ({
ruleType={ruleType}
index={index}
query={formQuery}
- isDisabled={queryBarQuery.trim() === '' || !isQueryBarValid || index.length === 0}
+ isDisabled={!isQueryBarValid || index.length === 0}
threshold={thresholdFormValue}
/>
>