[Security Solution][Detection Engine] updates ES|QL info popover (ela…

…stic#168611)

## Summary

- addresses elastic/ux-writing#41
- content of info tooltip is moved to doc page. Instead only link to
that page is displayed


### Before

<img width="1459" alt="Screenshot 2023-10-13 at 15 56 20"
src="https://github.com/elastic/kibana/assets/92328789/9a00ea01-19c1-4639-ad7b-9ae92829f075">


### After

<img width="1298" alt="Screenshot 2023-10-13 at 15 53 07"
src="https://github.com/elastic/kibana/assets/92328789/84811780-5d42-4ed3-b0d6-200467443e2f">


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: Nastasha Solomon <79124755+nastasha-solomon@users.noreply.github.com>

packages/kbn-doc-links/src/get_doc_links.ts

@@ -457,6 +457,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
       },
       privileges: `${SECURITY_SOLUTION_DOCS}endpoint-management-req.html`,
       manageDetectionRules: `${SECURITY_SOLUTION_DOCS}rules-ui-management.html`,
+      createEsqlRuleType: `${SECURITY_SOLUTION_DOCS}rules-ui-create.html#create-esql-rule`,
     },
     query: {
       eql: `${ELASTICSEARCH_DOCS}eql.html`,
@@ -856,9 +857,6 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
     synthetics: {
       featureRoles: `${ELASTIC_WEBSITE_URL}guide/en/observability/${DOC_LINK_VERSION}/synthetics-feature-roles.html`,
     },
-    esql: {
-      statsBy: `${ELASTICSEARCH_DOCS}esql.html`,
-    },
     telemetry: {
       settings: `${KIBANA_DOCS}telemetry-settings-kbn.html`,
     },

packages/kbn-doc-links/src/types.ts

@@ -348,6 +348,7 @@ export interface DocLinks {
     };
     readonly privileges: string;
     readonly manageDetectionRules: string;
+    readonly createEsqlRuleType: string;
   };
   readonly query: {
     readonly eql: string;
@@ -613,9 +614,6 @@ export interface DocLinks {
   readonly synthetics: {
     readonly featureRoles: string;
   };
-  readonly esql: {
-    readonly statsBy: string;
-  };
   readonly telemetry: {
     readonly settings: string;
   };

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

@@ -6,16 +6,13 @@
  */
 
 import React from 'react';
-import { EuiPopover, EuiText, EuiButtonIcon } from '@elastic/eui';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+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 { useKibana } from '../../../../common/lib/kibana';
 
-const POPOVER_WIDTH = 640;
-
 /**
  * Icon and popover that gives hint to users how to get started with ES|QL rules
  */
@@ -30,14 +27,20 @@ const EsqlInfoIconComponent = () => {
 
   return (
     <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
-      <EuiText style={{ width: POPOVER_WIDTH }} size="s">
-        <Markdown
-          markdown={i18n.getTooltipContent(
-            docLinks.links.esql.statsBy,
-            // Docs team will provide actual link to a new page before release
-            // For now, it's just a mock
-            docLinks.links.esql.statsBy
-          )}
+      <EuiText size="s">
+        <FormattedMessage
+          id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.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"
+                  defaultMessage="documentation"
+                />
+              </EuiLink>
+            ),
+          }}
         />
       </EuiText>
     </EuiPopover>

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

@@ -13,39 +13,3 @@ export const ARIA_LABEL = i18n.translate(
     defaultMessage: `Open help popover`,
   }
 );
-
-export const getTooltipContent = (statsByLink: string, startUsingEsqlLink: string) =>
-  i18n.translate(
-    'xpack.securitySolution.detectionEngine.createRule.stepDefineRule.esqlInfoTooltipContent',
-    {
-      defaultMessage: `
-### Aggregating rule
-Is a rule that uses {statsByLink} grouping commands. So, its result can not be matched with a particular document in ES.
-\`\`\`
-FROM logs*
-| STATS count = COUNT(host.name) BY host.name
-| SORT host.name
-\`\`\`
-
-
-### Non-aggregating rule
-Is a rule that does not use {statsByLink} grouping commands. Hence, each row in result can be tracked to a source document in ES. For this type of rule,
-please use operator \`[metadata _id, _index, _version]\` after defining index source. This would allow deduplicate alerts and link them with the source document.
-
-Example
-
-\`\`\`
-FROM logs* [metadata _id, _index, _version]
-| WHERE event.id == "test"
-| LIMIT 10
-\`\`\`
-
-Please, ensure, metadata properties \`id\`, \`_index\`, \`_version\` are carried over through pipe operators.
-    `,
-      values: {
-        statsByLink: `[STATS..BY](${statsByLink})`,
-        // Docs team will provide actual link to a new page before release
-        //  startUsingEsqlLink: `[WIP: Get started using ES|QL rules](${startUsingEsqlLink})`,
-      },
-    }
-  );

x-pack/plugins/security_solution/public/detection_engine/rule_creation/logic/translations.ts

@@ -23,6 +23,6 @@ export const esqlValidationErrorMessage = (message: string) =>
 export const ESQL_VALIDATION_MISSING_ID_IN_QUERY_ERROR = i18n.translate(
   'xpack.securitySolution.detectionEngine.esqlValidation.missingIdInQueryError',
   {
-    defaultMessage: `For non-aggregating rules(that don't use STATS..BY function), please write query that returns _id field from [metadata _id, _version, _index] operator`,
+    defaultMessage: `Queries that don’t use the STATS...BY function (non-aggregating queries) must include the [metadata _id, _version, _index] operator after the source command. For example: FROM logs* [metadata _id, _version, _index].  In addition, the metadata properties (_id, _version, and _index)  must be returned in the query response.`,
   }
 );

x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/translations.ts

@@ -32,7 +32,8 @@ export const ESQL_TYPE_TITLE = i18n.translate(
 export const ESQL_TYPE_DESCRIPTION = i18n.translate(
   'xpack.securitySolution.detectionEngine.createRule.stepDefineRule.ruleTypeField.esqlTypeDescription',
   {
-    defaultMessage: 'Use The Elasticsearch Query Language (ES|QL) to search or aggregate events',
+    defaultMessage:
+      'Use Elasticsearch Query Language (ES|QL) to find events and aggregate search results.',
   }
 );
 

x-pack/test/security_solution_cypress/cypress/e2e/detection_response/rule_creation/esql_rule_ess.cy.ts

@@ -125,7 +125,7 @@ describe('Detection ES|QL rules, creation', { tags: ['@ess'] }, () => {
       getDefineContinueButton().click();
 
       cy.get(ESQL_QUERY_BAR).contains(
-        'write query that returns _id field from [metadata _id, _version, _index] operator'
+        'must include the [metadata _id, _version, _index] operator after the source command'
       );
     });
 
@@ -139,7 +139,7 @@ describe('Detection ES|QL rules, creation', { tags: ['@ess'] }, () => {
       getDefineContinueButton().click();
 
       cy.get(ESQL_QUERY_BAR).contains(
-        'write query that returns _id field from [metadata _id, _version, _index] operator'
+        'must include the [metadata _id, _version, _index] operator after the source command'
       );
     });