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

## Summary

Although we are displaying the Technical preview badge in the dataview
picker we want to make it more prominent in the UI due to some concerns
on the scalability. This PR adds a dismissible callout (state stored in
local storage).

<img width="828" alt="image"
src="9287c9d8-0e67-4498-a544-b17eea9569b4">

---------

Co-authored-by: florent-leborgne <florent.leborgne@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"
+    />
+  );
+};