Revert the docs button from the footer

elastic · Sep 16, 2024 · 4d099f2 · 4d099f2
1 parent a056700
commit 4d099f2
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 2 deletions.
diff --git a/packages/kbn-text-based-editor/src/editor_footer/index.tsx b/packages/kbn-text-based-editor/src/editor_footer/index.tsx
@@ -10,15 +10,27 @@
 import React, { memo, useState, useCallback, useMemo } from 'react';
 
 import { i18n } from '@kbn/i18n';
-import { EuiText, EuiFlexGroup, EuiFlexItem, EuiCode, EuiButtonIcon } from '@elastic/eui';
+import {
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCode,
+  EuiButtonIcon,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 import { Interpolation, Theme, css } from '@emotion/react';
-import { LanguageDocumentationInline } from '@kbn/language-documentation-popover';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import {
+  LanguageDocumentationInline,
+  LanguageDocumentationFlyout,
+} from '@kbn/language-documentation-popover';
 import { getLimitFromESQLQuery } from '@kbn/esql-utils';
 import { type MonacoMessage } from '../helpers';
 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 ? '⌘' : '^';
@@ -45,6 +57,7 @@ interface EditorFooterProps {
   hideTimeFilterInfo?: boolean;
   hideQueryHistory?: boolean;
   isInCompactMode?: boolean;
+  displayDocumentationAsFlyout?: boolean;
 }
 
 export const EditorFooter = memo(function EditorFooter({
@@ -64,9 +77,12 @@ export const EditorFooter = memo(function EditorFooter({
   setIsHistoryOpen,
   hideQueryHistory,
   isInCompactMode,
+  displayDocumentationAsFlyout,
   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);
@@ -273,6 +289,26 @@ export const EditorFooter = memo(function EditorFooter({
                   </EuiFlexGroup>
                 </EuiFlexItem>
               )}
+              {displayDocumentationAsFlyout && !Boolean(editorIsInline) && (
+                <>
+                  <EuiButtonEmpty
+                    iconType="documentation"
+                    color="text"
+                    data-test-subj="TextBasedLangEditor-documentation"
+                    size="m"
+                    onClick={() => toggleLanguageComponent()}
+                    css={css`
+                      cursor: pointer;
+                    `}
+                  />
+                  <LanguageDocumentationFlyout
+                    searchInDescription
+                    linkToDocumentation={docLinks?.links?.query?.queryESQL ?? ''}
+                    isHelpMenuOpen={isLanguageComponentOpen}
+                    onHelpMenuVisibilityChange={setIsLanguageComponentOpen}
+                  />
+                </>
+              )}
             </EuiFlexGroup>
           </EuiFlexItem>
           {Boolean(editorIsInline) && (

diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx
@@ -138,6 +138,18 @@ describe('TextBasedLanguagesEditor', () => {
     expect(component.find('[data-test-subj="TextBasedLangEditor-run-query"]').length).not.toBe(0);
   });
 
+  it('should render the doc icon if the displayDocumentationAsFlyout is true', async () => {
+    const newProps = {
+      ...props,
+      displayDocumentationAsFlyout: true,
+      editorIsInline: false,
+    };
+    const component = mount(renderTextBasedLanguagesEditorComponent({ ...newProps }));
+    expect(component.find('[data-test-subj="TextBasedLangEditor-documentation"]').length).not.toBe(
+      0
+    );
+  });
+
   it('should not render the run query text if the hideRunQueryText prop is set to true', async () => {
     const newProps = {
       ...props,

diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -79,6 +79,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   hideTimeFilterInfo,
   hideQueryHistory,
   hasOutline,
+  displayDocumentationAsFlyout,
 }: TextBasedLanguagesEditorProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const datePickerOpenStatusRef = useRef<boolean>(false);
@@ -734,6 +735,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
         setIsHistoryOpen={toggleHistory}
         measuredContainerWidth={measuredEditorWidth}
         hideQueryHistory={hideHistoryComponent}
+        displayDocumentationAsFlyout={displayDocumentationAsFlyout}
       />
       <ResizableButton
         onMouseDownResizeHandler={onMouseDownResizeHandler}

diff --git a/packages/kbn-text-based-editor/src/types.ts b/packages/kbn-text-based-editor/src/types.ts
@@ -61,6 +61,9 @@ export interface TextBasedLanguagesEditorProps {
 
   /** adds border in the editor **/
   hasOutline?: boolean;
+
+  /** adds a documentation icon in the footer which opens the inline docs as a flyout **/
+  displayDocumentationAsFlyout?: boolean;
 }
 
 export interface TextBasedEditorDeps {

diff --git a/...ndex_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx b/...ndex_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx
@@ -266,6 +266,7 @@ export const IndexDataVisualizerESQL: FC<IndexDataVisualizerESQLProps> = (dataVi
           detectedTimestamp={currentDataView?.timeFieldName}
           hideRunQueryText={false}
           isLoading={queryHistoryStatus ?? false}
+          displayDocumentationAsFlyout
         />
 
         <EuiFlexGroup gutterSize="m" direction={isWithinLargeBreakpoint ? 'column' : 'row'}>