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} />