[ES|QL] Enhances the inline documentation experience

packages/kbn-text-based-editor/README.md

@@ -14,7 +14,6 @@ In order to enable text based languages on your unified search bar add `textBase
 
 
 ## Languages supported
-- SQL: based on the Elasticsearch sql api
 - ESQL: based on the Elastisearch esql api
 
 

packages/kbn-text-based-editor/src/editor_footer/index.tsx

@@ -7,14 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { memo, useState, useCallback, useEffect, useMemo } from 'react';
+import React, { memo, useState, useCallback, useMemo } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { EuiText, EuiFlexGroup, EuiFlexItem, EuiCode, EuiButtonIcon } from '@elastic/eui';
 import { Interpolation, Theme, css } from '@emotion/react';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
 import {
-  LanguageDocumentationFlyout,
   LanguageDocumentationInline,
   type LanguageDocumentationSections,
 } from '@kbn/language-documentation-popover';
@@ -24,7 +22,6 @@ import { ErrorsWarningsFooterPopover } from './errors_warnings_popover';
 import { QueryHistoryAction, QueryHistory } from './query_history';
 import { SubmitFeedbackComponent } from './feedback_component';
 import { QueryWrapComponent } from './query_wrap_component';
-import type { TextBasedEditorDeps } from '../types';
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 const COMMAND_KEY = isMac ? '⌘' : '^';
@@ -73,9 +70,6 @@ export const EditorFooter = memo(function EditorFooter({
   measuredContainerWidth,
   code,
 }: EditorFooterProps) {
-  const kibana = useKibana<TextBasedEditorDeps>();
-  const { docLinks } = kibana.services;
-
   const [isErrorPopoverOpen, setIsErrorPopoverOpen] = useState(false);
   const [isLanguageComponentOpen, setIsLanguageComponentOpen] = useState(false);
   const [isWarningPopoverOpen, setIsWarningPopoverOpen] = useState(false);
@@ -101,23 +95,17 @@ export const EditorFooter = memo(function EditorFooter({
     setIsLanguageComponentOpen(false);
   }, [isHistoryOpen, setIsHistoryOpen]);
 
-  const toggleLanguageComponent = useCallback(() => {
+  const toggleLanguageComponent = useCallback(async () => {
+    if (!documentationSections) {
+      const sections = await getDocumentationSections('esql');
+      setDocumentationSections(sections);
+    }
     setIsLanguageComponentOpen(!isLanguageComponentOpen);
     setIsHistoryOpen(false);
-  }, [isLanguageComponentOpen, setIsHistoryOpen]);
+  }, [documentationSections, isLanguageComponentOpen, setIsHistoryOpen]);
 
   const limit = useMemo(() => getLimitFromESQLQuery(code), [code]);
 
-  useEffect(() => {
-    async function getDocumentation() {
-      const sections = await getDocumentationSections('esql');
-      setDocumentationSections(sections);
-    }
-    if (!documentationSections) {
-      getDocumentation();
-    }
-  }, [documentationSections]);
-
   return (
     <EuiFlexGroup
       gutterSize="none"
@@ -294,30 +282,6 @@ export const EditorFooter = memo(function EditorFooter({
                   </EuiFlexGroup>
                 </EuiFlexItem>
               )}
-              {documentationSections && !editorIsInline && (
-                <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
-                    iconType="documentation"
-                    onClick={() => setIsLanguageComponentOpen(!isLanguageComponentOpen)}
-                    color="text"
-                    size="xs"
-                    data-test-subj="TextBasedLangEditor-documentation"
-                    aria-label={i18n.translate(
-                      'textBasedEditor.query.textBasedLanguagesEditor.documentationLabel',
-                      {
-                        defaultMessage: 'Documentation',
-                      }
-                    )}
-                  />
-                  <LanguageDocumentationFlyout
-                    sections={documentationSections}
-                    searchInDescription
-                    linkToDocumentation={docLinks?.links?.query?.queryESQL ?? ''}
-                    isHelpMenuOpen={isLanguageComponentOpen}
-                    onHelpMenuVisibilityChange={setIsLanguageComponentOpen}
-                  />
-                </EuiFlexItem>
-              )}
             </EuiFlexGroup>
           </EuiFlexItem>
           {Boolean(editorIsInline) && (
@@ -332,11 +296,9 @@ export const EditorFooter = memo(function EditorFooter({
                       isSpaceReduced={true}
                     />
                   )}
-                  {documentationSections && (
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonIcon iconType="documentation" onClick={toggleLanguageComponent} />
-                    </EuiFlexItem>
-                  )}
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon iconType="documentation" onClick={toggleLanguageComponent} />
+                  </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlexItem>
             </>

src/plugins/unified_search/public/query_string_input/esql_menu_popover.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import {
   EuiPopover,
   EuiButton,
@@ -18,7 +18,6 @@ import {
 } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { i18n } from '@kbn/i18n';
-import { getDocumentationSections } from '@kbn/text-based-editor';
 import { FEEDBACK_LINK } from '@kbn/esql-utils';
 import {
   LanguageDocumentationFlyout,
@@ -35,15 +34,14 @@ export const ESQLMenuPopover = () => {
   const [documentationSections, setDocumentationSections] =
     useState<LanguageDocumentationSections>();
 
-  useEffect(() => {
-    async function getDocumentation() {
+  const toggleLanguageComponent = useCallback(async () => {
+    if (!documentationSections) {
+      const { getDocumentationSections } = await import('@kbn/text-based-editor');
       const sections = await getDocumentationSections('esql');
       setDocumentationSections(sections);
     }
-    if (!documentationSections) {
-      getDocumentation();
-    }
-  }, [documentationSections]);
+    setIsLanguageComponentOpen(!isLanguageComponentOpen);
+  }, [documentationSections, isLanguageComponentOpen]);
 
   const esqlPanelItems = useMemo(() => {
     const panelItems: EuiContextMenuPanelProps['items'] = [];
@@ -52,7 +50,7 @@ export const ESQLMenuPopover = () => {
         key="quickReference"
         icon="documentation"
         data-test-subj="esql-quick-reference"
-        onClick={() => setIsLanguageComponentOpen(!isLanguageComponentOpen)}
+        onClick={() => toggleLanguageComponent()}
       >
         {i18n.translate('unifiedSearch.query.queryBar.esqlMenu.quickReference', {
           defaultMessage: 'Quick Reference',
@@ -97,7 +95,7 @@ export const ESQLMenuPopover = () => {
   }, [
     docLinks.links.query.queryESQL,
     docLinks.links.query.queryESQLExamples,
-    isLanguageComponentOpen,
+    toggleLanguageComponent,
   ]);
 
   return (