[Security Solution] Add ES|QL Query editable component

packages/kbn-securitysolution-utils/src/esql/compute_if_esql_query_aggregating.ts

@@ -7,18 +7,17 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ESQLAst, getAstAndSyntaxErrors } from '@kbn/esql-ast';
+import { type ESQLAstQueryExpression, parse } from '@kbn/esql-ast';
 
-export const isAggregatingQuery = (ast: ESQLAst): boolean => {
-  return ast.some((astItem) => astItem.type === 'command' && astItem.name === 'stats');
-};
+export const isAggregatingQuery = (astExpression: ESQLAstQueryExpression): boolean =>
+  astExpression.commands.some((command) => command.name === 'stats');
 
 /**
  * compute if esqlQuery is aggregating/grouping, i.e. using STATS...BY command
  * @param esqlQuery
  * @returns boolean
  */
 export const computeIsESQLQueryAggregating = (esqlQuery: string): boolean => {
-  const { ast } = getAstAndSyntaxErrors(esqlQuery);
-  return isAggregatingQuery(ast);
+  const { root } = parse(esqlQuery);
+  return isAggregatingQuery(root);
 };

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/esql_info_icon/index.tsx → x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/esql_query_edit/esql_info_icon.tsx

@@ -5,21 +5,19 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 import { EuiPopover, EuiText, EuiButtonIcon, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import * as i18n from './translations';
-
-import { useBoolState } from '../../../../common/hooks/use_bool_state';
+import { useBoolean } from '@kbn/react-hooks';
 import { useKibana } from '../../../../common/lib/kibana';
+import * as i18n from './translations';
 
 /**
  * Icon and popover that gives hint to users how to get started with ES|QL rules
  */
-const EsqlInfoIconComponent = () => {
+export const EsqlInfoIcon = memo(function EsqlInfoIcon(): JSX.Element {
   const { docLinks } = useKibana().services;
-
-  const [isPopoverOpen, , closePopover, togglePopover] = useBoolState();
+  const [isPopoverOpen, { off: closePopover, on: togglePopover }] = useBoolean(false);
 
   const button = (
     <EuiButtonIcon iconType="iInCircle" onClick={togglePopover} aria-label={i18n.ARIA_LABEL} />
@@ -29,13 +27,13 @@ const EsqlInfoIconComponent = () => {
     <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
       <EuiText size="s">
         <FormattedMessage
-          id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.esqlInfoTooltipContent"
+          id="xpack.securitySolution.ruleManagement.esqlQuery.esqlInfoTooltipContent"
           defaultMessage="Check out our {createEsqlRuleTypeLink} to get started using ES|QL rules."
           values={{
             createEsqlRuleTypeLink: (
               <EuiLink href={docLinks.links.securitySolution.createEsqlRuleType} target="_blank">
                 <FormattedMessage
-                  id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.esqlInfoTooltipLink"
+                  id="xpack.securitySolution.ruleManagement.esqlQuery.esqlInfoTooltipLink"
                   defaultMessage="documentation"
                 />
               </EuiLink>
@@ -45,8 +43,4 @@ const EsqlInfoIconComponent = () => {
       </EuiText>
     </EuiPopover>
   );
-};
-
-export const EsqlInfoIcon = React.memo(EsqlInfoIconComponent);
-
-EsqlInfoIcon.displayName = 'EsqlInfoIcon';
+});

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/esql_query_edit/esql_query_edit.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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, { memo, useMemo } from 'react';
+import type { DataViewBase } from '@kbn/es-query';
+import type { FieldConfig } from '../../../../shared_imports';
+import { UseField } from '../../../../shared_imports';
+import type { FieldValueQueryBar } from '../../../rule_creation_ui/components/query_bar';
+import { QueryBarDefineRule } from '../../../rule_creation_ui/components/query_bar';
+import { queryRequiredValidatorFactory } from '../../../rule_creation_ui/validators/query_required_validator_factory';
+import { debounceAsync } from '../../../rule_creation_ui/validators/debounce_async';
+import { esqlQueryValidatorFactory } from '../../../rule_creation_ui/validators/esql_query_validator_factory';
+import { EsqlInfoIcon } from './esql_info_icon';
+import * as i18n from './translations';
+
+interface EsqlQueryEditProps {
+  path: string;
+  fieldsToValidateOnChange?: string | string[];
+  dataView: DataViewBase;
+  required?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  onValidityChange?: (arg: boolean) => void;
+}
+
+export const EsqlQueryEdit = memo(function EsqlQueryEdit({
+  path,
+  fieldsToValidateOnChange,
+  dataView,
+  required = false,
+  loading = false,
+  disabled = false,
+  onValidityChange,
+}: EsqlQueryEditProps): JSX.Element {
+  const componentProps = useMemo(
+    () => ({
+      isDisabled: disabled,
+      isLoading: loading,
+      indexPattern: dataView,
+      idAria: 'ruleEsqlQueryBar',
+      dataTestSubj: 'ruleEsqlQueryBar',
+      onValidityChange,
+    }),
+    [dataView, loading, disabled, onValidityChange]
+  );
+  const fieldConfig: FieldConfig<FieldValueQueryBar> = useMemo(
+    () => ({
+      label: i18n.ESQL_QUERY,
+      labelAppend: <EsqlInfoIcon />,
+      fieldsToValidateOnChange: fieldsToValidateOnChange
+        ? [path, fieldsToValidateOnChange].flat()
+        : undefined,
+      validations: [
+        ...(required
+          ? [
+              {
+                validator: queryRequiredValidatorFactory('esql'),
+              },
+            ]
+          : []),
+        {
+          validator: debounceAsync(esqlQueryValidatorFactory(), 300),
+        },
+      ],
+    }),
+    [required, path, fieldsToValidateOnChange]
+  );
+
+  return (
+    <UseField
+      path={path}
+      component={QueryBarDefineRule}
+      componentProps={componentProps}
+      config={fieldConfig}
+    />
+  );
+});

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/esql_info_icon/translations.ts → x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/esql_query_edit/translations.ts

@@ -7,8 +7,12 @@
 
 import { i18n } from '@kbn/i18n';
 
+export const ESQL_QUERY = i18n.translate('xpack.securitySolution.ruleManagement.esqlQuery.label', {
+  defaultMessage: 'ES|QL query',
+});
+
 export const ARIA_LABEL = i18n.translate(
-  'xpack.securitySolution.detectionEngine.createRule.stepDefineRule.esqlInfoAriaLabel',
+  'xpack.securitySolution.ruleManagement.esqlQuery.ariaLabel',
   {
     defaultMessage: `Open help popover`,
   }