[8.x] [ES|QL] Renames the language package to a more generic name (el…

…astic#193517) (elastic#193691)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ES|QL] Renames the language package to a more generic name
(elastic#193517)](elastic#193517)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Stratoula
Kalafateli","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-23T07:58:53Z","message":"[ES|QL]
Renames the language package to a more generic name (elastic#193517)\n\n##
Summary\r\n\r\nRenames the language-documentation-popover to
language-documentation as\r\nit stores additional layouts:\r\n-
popover\r\n- flyout\r\n-
inline","sha":"9d0d41ce871be49f4d18b8bbfad7791173c6ebc8","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","Feature:ES|QL","Team:ESQL","v8.16.0"],"number":193517,"url":"https://github.com/elastic/kibana/pull/193517","mergeCommit":{"message":"[ES|QL]
Renames the language package to a more generic name (elastic#193517)\n\n##
Summary\r\n\r\nRenames the language-documentation-popover to
language-documentation as\r\nit stores additional layouts:\r\n-
popover\r\n- flyout\r\n-
inline","sha":"9d0d41ce871be49f4d18b8bbfad7791173c6ebc8"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193517","number":193517,"mergeCommit":{"message":"[ES|QL]
Renames the language package to a more generic name (elastic#193517)\n\n##
Summary\r\n\r\nRenames the language-documentation-popover to
language-documentation as\r\nit stores additional layouts:\r\n-
popover\r\n- flyout\r\n-
inline","sha":"9d0d41ce871be49f4d18b8bbfad7791173c6ebc8"}},{"branch":"8.x","label":"v8.16.0","labelRegex":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

.buildkite/scripts/steps/esql_generate_function_metadata.sh

@@ -2,7 +2,7 @@
 set -euo pipefail
 
 VALIDATION_PACKAGE_DIR="packages/kbn-esql-validation-autocomplete"
-EDITOR_PACKAGE_DIR="packages/kbn-language-documentation-popover"
+EDITOR_PACKAGE_DIR="packages/kbn-language-documentation"
 GIT_SCOPE="$VALIDATION_PACKAGE_DIR/**/* $EDITOR_PACKAGE_DIR/**/*"
 
 report_main_step () {

.i18nrc.json

@@ -118,7 +118,7 @@
     "serverlessPackages": "packages/serverless",
     "sse": [ "packages/kbn-sse-utils" ],
     "coloring": "packages/kbn-coloring/src",
-    "languageDocumentationPopover": "packages/kbn-language-documentation-popover/src",
+    "languageDocumentation": "packages/kbn-language-documentation/src",
     "esql": "src/plugins/esql",
     "esqlDataGrid": "src/plugins/esql_datagrid",
     "statusPage": "src/legacy/core_plugins/status_page",

package.json

@@ -593,7 +593,7 @@
     "@kbn/kibana-utils-plugin": "link:src/plugins/kibana_utils",
     "@kbn/kubernetes-security-plugin": "link:x-pack/plugins/kubernetes_security",
     "@kbn/langchain": "link:x-pack/packages/kbn-langchain",
-    "@kbn/language-documentation-popover": "link:packages/kbn-language-documentation-popover",
+    "@kbn/language-documentation": "link:packages/kbn-language-documentation",
     "@kbn/lens-config-builder-example-plugin": "link:x-pack/examples/lens_config_builder_example",
     "@kbn/lens-embeddable-utils": "link:packages/kbn-lens-embeddable-utils",
     "@kbn/lens-formula-docs": "link:packages/kbn-lens-formula-docs",

packages/kbn-language-documentation-popover/README.md → packages/kbn-language-documentation/README.md

@@ -1,15 +1,29 @@
-### Shareable language documentation popover
+### Shareable language documentation
 
-This is a stateless shareable component that can be used to render documentation for a language as a popover.
+This is a stateless shareable component that can be used to render documentation for a language as a popover, flyour or a React component that you can add in your applications as you wish.
 
 It can be used in every application that would like to add an in-app documentation. The component consists of:
 - A sidebar navigation with a search
 - A details page
 
+### As a popover (currently used for Lens formulas)
+
 ```
 <LanguageDocumentationPopover language={language} sections={documentationSections} onHelpMenuVisibilityChange={onHelpMenuVisibilityChange} isHelpMenuOpen={isHelpMenuOpen} />
 ```
 
+### As a flyout (currently used for ES|QL in unified search)
+
+```
+<LanguageDocumentationFlyout linkToDocumentation={docLinks?.links?.query?.queryESQL ?? ''} isHelpMenuOpen={isLanguageComponentOpen} onHelpMenuVisibilityChange={setIsLanguageComponentOpen} />
+```
+
+### As an inline component (currently used for ES|QL in Lens inline editing, alerts)
+
+```
+<LanguageDocumentationInline />
+```
+
 The properties are typed as:
 
 ```

packages/kbn-language-documentation-popover/jest.config.js → packages/kbn-language-documentation/jest.config.js

@@ -10,5 +10,5 @@
 module.exports = {
   preset: '@kbn/test',
   rootDir: '../..',
-  roots: ['<rootDir>/packages/kbn-language-documentation-popover'],
+  roots: ['<rootDir>/packages/kbn-language-documentation'],
 };

packages/kbn-language-documentation-popover/kibana.jsonc → packages/kbn-language-documentation/kibana.jsonc

@@ -1,5 +1,5 @@
 {
   "type": "shared-common",
-  "id": "@kbn/language-documentation-popover",
+  "id": "@kbn/language-documentation",
   "owner": "@elastic/kibana-esql"
 }

packages/kbn-language-documentation-popover/package.json → packages/kbn-language-documentation/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@kbn/language-documentation-popover",
+  "name": "@kbn/language-documentation",
   "version": "1.0.0",
   "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
   "private": true,
@@ -9,6 +9,6 @@
   "scripts": {
     "make:docs": "ts-node --transpileOnly scripts/generate_esql_docs.ts",
     "postmake:docs": "yarn run lint:fix",
-    "lint:fix": "cd ../.. && node ./scripts/eslint --fix ./packages/kbn-language-documentation-popover/src/sections/generated"
+    "lint:fix": "cd ../.. && node ./scripts/eslint --fix ./packages/kbn-language-documentation/src/sections/generated"
   }
 }

packages/kbn-language-documentation-popover/scripts/generate_esql_docs.ts → packages/kbn-language-documentation/scripts/generate_esql_docs.ts

@@ -86,7 +86,7 @@ function writeFunctionDocs(functionDocs: Map<string, string>, pathToDocsFile: st
   // Do not edit manually... automatically generated by scripts/generate_esql_docs.ts
   {
     label: i18n.translate(
-      'languageDocumentationPopover.documentationESQL.${name}',
+      'languageDocumentation.documentationESQL.${name}',
       {
         defaultMessage: '${name.toUpperCase()}',
       }
@@ -97,7 +97,7 @@ function writeFunctionDocs(functionDocs: Map<string, string>, pathToDocsFile: st
         readOnly
         enableSoftLineBreaks
         markdownContent={i18n.translate(
-          'languageDocumentationPopover.documentationESQL.${name}.markdown',
+          'languageDocumentation.documentationESQL.${name}.markdown',
           {
             defaultMessage: \`${docWithoutLinks.replaceAll('`', '\\`')}\`,
             description:

packages/kbn-language-documentation-popover/src/components/as_flyout/index.tsx → packages/kbn-language-documentation/src/components/as_flyout/index.tsx

@@ -85,7 +85,7 @@ function DocumentationFlyout({
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="s">
               <h3>
-                {i18n.translate('languageDocumentationPopover.documentationFlyoutTitle', {
+                {i18n.translate('languageDocumentation.documentationFlyoutTitle', {
                   defaultMessage: 'ES|QL quick reference',
                 })}
               </h3>

packages/kbn-language-documentation-popover/src/components/as_popover/index.tsx → packages/kbn-language-documentation/src/components/as_popover/index.tsx

@@ -60,7 +60,7 @@ function DocumentationPopover({
         button={
           <EuiToolTip
             position="top"
-            content={i18n.translate('languageDocumentationPopover.tooltip', {
+            content={i18n.translate('languageDocumentation.tooltip', {
               defaultMessage: '{lang} reference',
               values: {
                 lang: language,

packages/kbn-language-documentation-popover/src/components/as_popover/popover_content.tsx → packages/kbn-language-documentation/src/components/as_popover/popover_content.tsx

@@ -70,15 +70,15 @@ function DocumentationContent({
           justifyContent="spaceBetween"
         >
           <EuiFlexItem grow={false}>
-            {i18n.translate('languageDocumentationPopover.header', {
+            {i18n.translate('languageDocumentation.header', {
               defaultMessage: '{language} reference',
               values: { language },
             })}
           </EuiFlexItem>
           {linkToDocumentation && (
             <EuiFlexItem grow={false}>
               <EuiLink external href={linkToDocumentation} target="_blank">
-                {i18n.translate('languageDocumentationPopover.documentationLinkLabel', {
+                {i18n.translate('languageDocumentation.documentationLinkLabel', {
                   defaultMessage: 'View full documentation',
                 })}
               </EuiLink>
@@ -106,7 +106,7 @@ function DocumentationContent({
                   setSearchText(e.target.value);
                 }}
                 data-test-subj="language-documentation-navigation-search"
-                placeholder={i18n.translate('languageDocumentationPopover.searchPlaceholder', {
+                placeholder={i18n.translate('languageDocumentation.searchPlaceholder', {
                   defaultMessage: 'Search',
                 })}
               />

packages/kbn-language-documentation-popover/src/components/shared/documentation_navigation.tsx → packages/kbn-language-documentation/src/components/shared/documentation_navigation.tsx

@@ -45,7 +45,7 @@ function DocumentationNav({
         <EuiFlexItem grow={true}>
           <EuiFormRow
             fullWidth
-            label={i18n.translate('languageDocumentationPopover.esqlDocsLabel', {
+            label={i18n.translate('languageDocumentation.esqlDocsLabel', {
               defaultMessage: 'Select or search topics',
             })}
             labelAppend={
@@ -57,7 +57,7 @@ function DocumentationNav({
                     target="_blank"
                     data-test-subj="language-documentation-navigation-link"
                   >
-                    {i18n.translate('languageDocumentationPopover.esqlDocsLinkLabel', {
+                    {i18n.translate('languageDocumentation.esqlDocsLinkLabel', {
                       defaultMessage: 'View full ES|QL documentation',
                     })}
                   </EuiLink>
@@ -66,10 +66,10 @@ function DocumentationNav({
             }
           >
             <EuiComboBox
-              aria-label={i18n.translate('languageDocumentationPopover.navigationAriaLabel', {
+              aria-label={i18n.translate('languageDocumentation.navigationAriaLabel', {
                 defaultMessage: 'Navigate through the documentation',
               })}
-              placeholder={i18n.translate('languageDocumentationPopover.navigationPlaceholder', {
+              placeholder={i18n.translate('languageDocumentation.navigationPlaceholder', {
                 defaultMessage: 'Commands and functions',
               })}
               data-test-subj="language-documentation-navigation-dropdown"
@@ -94,7 +94,7 @@ function DocumentationNav({
               setSearchText(e.target.value);
             }}
             data-test-subj="language-documentation-navigation-search"
-            placeholder={i18n.translate('languageDocumentationPopover.searchPlaceholder', {
+            placeholder={i18n.translate('languageDocumentation.searchPlaceholder', {
               defaultMessage: 'Search',
             })}
             fullWidth