[Security Solution] Add EQL query editable component with EQL options fields

x-pack/plugins/security_solution/common/search_strategy/timeline/events/eql/index.ts

@@ -7,7 +7,7 @@
 
 export type {
   TimelineEqlResponse,
-  EqlOptionsData,
-  EqlOptionsSelected,
+  EqlFieldsComboBoxOptions,
+  EqlOptions,
   FieldsEqlOptions,
 } from '@kbn/timelines-plugin/common';

x-pack/plugins/security_solution/public/common/hooks/eql/api.test.ts

@@ -34,7 +34,7 @@ const triggerValidateEql = () => {
     query: 'any where true',
     signal,
     runtimeMappings: undefined,
-    options: undefined,
+    eqlOptions: undefined,
   });
 };
 

x-pack/plugins/security_solution/public/common/hooks/eql/api.ts

@@ -11,7 +11,7 @@ import type { EqlSearchStrategyRequest, EqlSearchStrategyResponse } from '@kbn/d
 import { EQL_SEARCH_STRATEGY } from '@kbn/data-plugin/common';
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 
-import type { EqlOptionsSelected } from '../../../../common/search_strategy';
+import type { EqlOptions } from '../../../../common/search_strategy';
 import {
   getValidationErrors,
   isErrorResponse,
@@ -31,9 +31,9 @@ interface Params {
   dataViewTitle: string;
   query: string;
   data: DataPublicPluginStart;
-  signal: AbortSignal;
   runtimeMappings: estypes.MappingRuntimeFields | undefined;
-  options: Omit<EqlOptionsSelected, 'query' | 'size'> | undefined;
+  eqlOptions: Omit<EqlOptions, 'query' | 'size'> | undefined;
+  signal?: AbortSignal;
 }
 
 export interface EqlResponseError {
@@ -51,9 +51,9 @@ export const validateEql = async ({
   data,
   dataViewTitle,
   query,
-  signal,
   runtimeMappings,
-  options,
+  eqlOptions,
+  signal,
 }: Params): Promise<ValidateEqlResponse> => {
   try {
     const { rawResponse: response } = await firstValueFrom(
@@ -62,9 +62,9 @@ export const validateEql = async ({
           params: {
             index: dataViewTitle,
             body: { query, runtime_mappings: runtimeMappings, size: 0 },
-            timestamp_field: options?.timestampField,
-            tiebreaker_field: options?.tiebreakerField || undefined,
-            event_category_field: options?.eventCategoryField,
+            timestamp_field: eqlOptions?.timestampField,
+            tiebreaker_field: eqlOptions?.tiebreakerField,
+            event_category_field: eqlOptions?.eventCategoryField,
           },
           options: { ignore: [400] },
         },
@@ -79,26 +79,31 @@ export const validateEql = async ({
         valid: false,
         error: { code: EQL_ERROR_CODES.INVALID_SYNTAX, messages: getValidationErrors(response) },
       };
-    } else if (isVerificationErrorResponse(response) || isMappingErrorResponse(response)) {
+    }
+
+    if (isVerificationErrorResponse(response) || isMappingErrorResponse(response)) {
       return {
         valid: false,
         error: { code: EQL_ERROR_CODES.INVALID_EQL, messages: getValidationErrors(response) },
       };
-    } else if (isErrorResponse(response)) {
+    }
+
+    if (isErrorResponse(response)) {
       return {
         valid: false,
         error: { code: EQL_ERROR_CODES.FAILED_REQUEST, error: new Error(JSON.stringify(response)) },
       };
-    } else {
-      return { valid: true };
     }
+
+    return { valid: true };
   } catch (error) {
     if (error instanceof Error && error.message.startsWith('index_not_found_exception')) {
       return {
         valid: false,
         error: { code: EQL_ERROR_CODES.MISSING_DATA_SOURCE, messages: [error.message] },
       };
     }
+
     return {
       valid: false,
       error: {

x-pack/plugins/security_solution/public/common/mock/global_state.ts

@@ -349,7 +349,6 @@ export const mockGlobalState: State = {
         description: '',
         eqlOptions: {
           eventCategoryField: 'event.category',
-          tiebreakerField: '',
           timestampField: '@timestamp',
         },
         eventIdToNoteIds: { '1': ['1'] },

x-pack/plugins/security_solution/public/common/mock/timeline_results.ts

@@ -2052,7 +2052,6 @@ export const defaultTimelineProps: CreateTimelineProps = {
       eventCategoryField: 'event.category',
       query: '',
       size: 100,
-      tiebreakerField: '',
       timestampField: '@timestamp',
     },
     eventIdToNoteIds: {},

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/description_step/helpers.tsx

@@ -32,7 +32,7 @@ import type {
 } from '../../../../../common/api/detection_engine/model/rule_schema';
 import { AlertSuppressionMissingFieldsStrategyEnum } from '../../../../../common/api/detection_engine/model/rule_schema';
 import { MATCHES, AND, OR } from '../../../../common/components/threat_match/translations';
-import type { EqlOptionsSelected } from '../../../../../common/search_strategy';
+import type { EqlOptions } from '../../../../../common/search_strategy';
 import { assertUnreachable } from '../../../../../common/utility_types';
 import * as i18nSeverity from '../severity_mapping/translations';
 import * as i18nRiskScore from '../risk_score_mapping/translations';
@@ -147,7 +147,7 @@ export const buildQueryBarDescription = ({
   return items;
 };
 
-export const buildEqlOptionsDescription = (eqlOptions: EqlOptionsSelected): ListItems[] => {
+export const buildEqlOptionsDescription = (eqlOptions: EqlOptions): ListItems[] => {
   let items: ListItems[] = [];
   if (!isEmpty(eqlOptions.eventCategoryField)) {
     items = [

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/description_step/index.tsx

@@ -19,7 +19,7 @@ import type {
 } from '../../../../../common/api/detection_engine/model/rule_schema';
 import { buildRelatedIntegrationsDescription } from '../../../../detections/components/rules/related_integrations/integrations_description';
 import { DEFAULT_TIMELINE_TITLE } from '../../../../timelines/components/timeline/translations';
-import type { EqlOptionsSelected } from '../../../../../common/search_strategy';
+import type { EqlOptions } from '../../../../../common/search_strategy';
 import { useKibana } from '../../../../common/lib/kibana';
 import type {
   AboutStepRiskScore,
@@ -275,7 +275,7 @@ export const getDescriptionItem = (
       return [];
     }
   } else if (field === 'eqlOptions') {
-    const eqlOptions: EqlOptionsSelected = get(field, data);
+    const eqlOptions: EqlOptions = get(field, data);
     return buildEqlOptionsDescription(eqlOptions);
   } else if (field === 'threat') {
     const threats: Threats = get(field, data);

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/eql_query_bar/eql_query_bar.test.tsx → x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/eql_query_edit/eql_query_bar.test.tsx

@@ -130,9 +130,9 @@ describe('EqlQueryBar', () => {
             dataTestSubj="myQueryBar"
             field={mockField}
             isLoading={false}
-            optionsData={mockOptionsData}
+            eqlFieldsComboBoxOptions={mockOptionsData}
             indexPattern={mockIndexPattern}
-            onOptionsChange={onOptionsChangeMock}
+            onEqlOptionsChange={onOptionsChangeMock}
           />
         </TestProviders>
       );

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/eql_query_bar/eql_query_bar.tsx → x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/eql_query_edit/eql_query_bar.tsx

@@ -22,8 +22,8 @@ import * as i18n from './translations';
 import { EqlQueryBarFooter } from './footer';
 import { getValidationResults } from './validators';
 import type {
-  EqlOptionsData,
-  EqlOptionsSelected,
+  EqlFieldsComboBoxOptions,
+  EqlOptions,
   FieldsEqlOptions,
 } from '../../../../../common/search_strategy';
 import { useKibana } from '../../../../common/lib/kibana';
@@ -65,27 +65,27 @@ export interface EqlQueryBarProps {
   indexPattern: DataViewBase;
   showFilterBar?: boolean;
   idAria?: string;
-  optionsData?: EqlOptionsData;
-  optionsSelected?: EqlOptionsSelected;
+  eqlFieldsComboBoxOptions?: EqlFieldsComboBoxOptions;
+  eqlOptions?: EqlOptions;
   isSizeOptionDisabled?: boolean;
-  onOptionsChange?: (field: FieldsEqlOptions, newValue: string | undefined) => void;
+  onEqlOptionsChange?: (field: FieldsEqlOptions, newValue: string | undefined) => void;
   onValidityChange?: (arg: boolean) => void;
-  onValiditingChange?: (arg: boolean) => void;
+  onValidatingChange?: (arg: boolean) => void;
 }
 
 export const EqlQueryBar: FC<EqlQueryBarProps> = ({
   dataTestSubj,
   field,
-  isLoading = false,
+  isLoading,
   indexPattern,
   showFilterBar,
   idAria,
-  optionsData,
-  optionsSelected,
+  eqlFieldsComboBoxOptions,
+  eqlOptions: optionsSelected,
   isSizeOptionDisabled,
-  onOptionsChange,
+  onEqlOptionsChange,
   onValidityChange,
-  onValiditingChange,
+  onValidatingChange,
 }) => {
   const { addError } = useAppToasts();
   const [errorMessages, setErrorMessages] = useState<string[]>([]);
@@ -115,10 +115,10 @@ export const EqlQueryBar: FC<EqlQueryBarProps> = ({
   }, [error, addError]);
 
   useEffect(() => {
-    if (onValiditingChange) {
-      onValiditingChange(isValidating);
+    if (onValidatingChange) {
+      onValidatingChange(isValidating);
     }
-  }, [isValidating, onValiditingChange]);
+  }, [isValidating, onValidatingChange]);
 
   useEffect(() => {
     let isSubscribed = true;
@@ -156,8 +156,8 @@ export const EqlQueryBar: FC<EqlQueryBarProps> = ({
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       const newQuery = e.target.value;
-      if (onValiditingChange) {
-        onValiditingChange(true);
+      if (onValidatingChange) {
+        onValidatingChange(true);
       }
       setErrorMessages([]);
       setFieldValue({
@@ -169,7 +169,7 @@ export const EqlQueryBar: FC<EqlQueryBarProps> = ({
         saved_id: null,
       });
     },
-    [fieldValue, setFieldValue, onValiditingChange]
+    [fieldValue, setFieldValue, onValidatingChange]
   );
 
   return (
@@ -195,9 +195,9 @@ export const EqlQueryBar: FC<EqlQueryBarProps> = ({
           errors={errorMessages}
           isLoading={isValidating}
           isSizeOptionDisabled={isSizeOptionDisabled}
-          optionsData={optionsData}
+          optionsData={eqlFieldsComboBoxOptions}
           optionsSelected={optionsSelected}
-          onOptionsChange={onOptionsChange}
+          onOptionsChange={onEqlOptionsChange}
         />
         {showFilterBar && (
           <>