[8.11] [ES|QL] Displays a dismissible callout (#169998) (#170036)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[ES|QL] Displays a dismissible callout
(#169998)](https://github.com/elastic/kibana/pull/169998)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Stratoula
Kalafateli","email":"efstratia.kalafateli@elastic.co"},"sourceCommit":{"committedDate":"2023-10-27T14:03:08Z","message":"[ES|QL]
Displays a dismissible callout (#169998)\n\n## Summary\r\n\r\nAlthough
we are displaying the Technical preview badge in the dataview\r\npicker
we want to make it more prominent in the UI due to some concerns\r\non
the scalability. This PR adds a dismissible callout (state stored
in\r\nlocal storage).\r\n\r\n<img width=\"828\"
alt=\"image\"\r\nsrc=\"9287c9d8-0e67-4498-a544-b17eea9569b4\">\r\n\r\n---------\r\n\r\nCo-authored-by:
florent-leborgne
<florent.leborgne@elastic.co>","sha":"88db22324760aba6161c16c625b9fa5cdb7d674a","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:skip","Team:DataDiscovery","backport:prev-minor","v8.11.0","Feature:ES|QL","v8.12.0"],"number":169998,"url":"https://github.com/elastic/kibana/pull/169998","mergeCommit":{"message":"[ES|QL]
Displays a dismissible callout (#169998)\n\n## Summary\r\n\r\nAlthough
we are displaying the Technical preview badge in the dataview\r\npicker
we want to make it more prominent in the UI due to some concerns\r\non
the scalability. This PR adds a dismissible callout (state stored
in\r\nlocal storage).\r\n\r\n<img width=\"828\"
alt=\"image\"\r\nsrc=\"9287c9d8-0e67-4498-a544-b17eea9569b4\">\r\n\r\n---------\r\n\r\nCo-authored-by:
florent-leborgne
<florent.leborgne@elastic.co>","sha":"88db22324760aba6161c16c625b9fa5cdb7d674a"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/169998","number":169998,"mergeCommit":{"message":"[ES|QL]
Displays a dismissible callout (#169998)\n\n## Summary\r\n\r\nAlthough
we are displaying the Technical preview badge in the dataview\r\npicker
we want to make it more prominent in the UI due to some concerns\r\non
the scalability. This PR adds a dismissible callout (state stored
in\r\nlocal storage).\r\n\r\n<img width=\"828\"
alt=\"image\"\r\nsrc=\"9287c9d8-0e67-4498-a544-b17eea9569b4\">\r\n\r\n---------\r\n\r\nCo-authored-by:
florent-leborgne
<florent.leborgne@elastic.co>","sha":"88db22324760aba6161c16c625b9fa5cdb7d674a"}}]}]
BACKPORT-->

Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>

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

@@ -467,6 +467,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
       luceneQuerySyntax: `${ELASTICSEARCH_DOCS}query-dsl-query-string-query.html#query-string-syntax`,
       percolate: `${ELASTICSEARCH_DOCS}query-dsl-percolate-query.html`,
       queryDsl: `${ELASTICSEARCH_DOCS}query-dsl.html`,
+      queryESQL: `${ELASTICSEARCH_DOCS}esql.html`,
     },
     search: {
       sessions: `${KIBANA_DOCS}search-sessions.html`,

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

@@ -358,6 +358,7 @@ export interface DocLinks {
     readonly luceneQuerySyntax: string;
     readonly percolate: string;
     readonly queryDsl: string;
+    readonly queryESQL: string;
   };
   readonly date: {
     readonly dateMath: string;

src/plugins/discover/public/application/main/components/layout/discover_layout.tsx

@@ -54,6 +54,7 @@ import { DiscoverHistogramLayout } from './discover_histogram_layout';
 import { ErrorCallout } from '../../../../components/common/error_callout';
 import { addLog } from '../../../../utils/add_log';
 import { DiscoverResizableLayout } from './discover_resizable_layout';
+import { ESQLTechPreviewCallout } from './esql_tech_preview_callout';
 
 const SidebarMemoized = React.memo(DiscoverSidebarResponsive);
 const TopNavMemoized = React.memo(DiscoverTopNav);
@@ -73,6 +74,7 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
     history,
     spaces,
     inspector,
+    docLinks,
   } = useDiscoverServices();
   const { euiTheme } = useEuiTheme();
   const pageBackgroundColor = useEuiBackgroundColor('plain');
@@ -206,6 +208,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
 
     return (
       <>
+        {/* Temporarily display a tech preview callout for ES|QL*/}
+        {isPlainRecord && <ESQLTechPreviewCallout docLinks={docLinks} />}
         <DiscoverHistogramLayout
           isPlainRecord={isPlainRecord}
           dataView={dataView}
@@ -223,6 +227,7 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
   }, [
     currentColumns,
     dataView,
+    docLinks,
     isPlainRecord,
     mainContainer,
     onAddFilter,

src/plugins/discover/public/application/main/components/layout/esql_tech_preview_callout.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React, { useCallback } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+import type { DocLinksStart } from '@kbn/core/public';
+
+const ESQL_TECH_PREVIEW_CALLOUT = 'discover.esqlTechPreviewCalloutHidden';
+
+interface ESQLTechPreviewCallout {
+  docLinks: DocLinksStart;
+}
+
+export const ESQLTechPreviewCallout = ({ docLinks }: ESQLTechPreviewCallout) => {
+  const [hideCallout, setHideCallout] = useLocalStorage(ESQL_TECH_PREVIEW_CALLOUT, false);
+
+  const onDismiss = useCallback(() => {
+    setHideCallout(true);
+  }, [setHideCallout]);
+
+  if (hideCallout) {
+    return null;
+  }
+
+  return (
+    <EuiCallOut
+      title={
+        <FormattedMessage
+          id="discover.textBasedMode.techPreviewCalloutMessage"
+          defaultMessage="ES|QL is currently in technical preview. Find more information in the {link}."
+          values={{
+            link: (
+              <EuiLink href={docLinks.links.query.queryESQL} target="_blank">
+                <FormattedMessage
+                  id="discover.textBasedMode.techPreviewCalloutLink"
+                  defaultMessage="documentation"
+                />
+              </EuiLink>
+            ),
+          }}
+        />
+      }
+      color="primary"
+      iconType="beaker"
+      onDismiss={onDismiss}
+      size="s"
+    />
+  );
+};