Change layout of flyout header

stratoula · Sep 16, 2024 · 3b1998c · 3b1998c
1 parent 4d099f2
commit 3b1998c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 68 deletions.
diff --git a/packages/kbn-language-documentation-popover/src/components/as_flyout/index.tsx b/packages/kbn-language-documentation-popover/src/components/as_flyout/index.tsx
@@ -7,7 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { EuiFlyout, useEuiTheme, EuiFlyoutBody, EuiFlyoutHeader } from '@elastic/eui';
+import {
+  EuiFlyout,
+  useEuiTheme,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiSpacer
+} from '@elastic/eui';
 import { getFilteredGroups } from '../../utils/get_filtered_groups';
 import { DocumentationMainContent, DocumentationNavigation } from '../shared';
 import { getESQLDocsSections } from '../../sections';
@@ -74,6 +81,10 @@ function DocumentationFlyout({
           size={DEFAULT_WIDTH}
         >
           <EuiFlyoutHeader hasBorder>
+            <EuiTitle size="m">
+              <h3>ES|QL quick reference</h3>
+            </EuiTitle>
+            <EuiSpacer size="s" />
             <DocumentationNavigation
               searchText={searchText}
               setSearchText={setSearchText}

diff --git a/...ges/kbn-language-documentation-popover/src/components/shared/documentation_navigation.tsx b/...ges/kbn-language-documentation-popover/src/components/shared/documentation_navigation.tsx
@@ -7,15 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 import React from 'react';
-import { css } from '@emotion/react';
-import {
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiLink,
-  useEuiTheme,
-  EuiFieldSearch,
-  EuiComboBox,
-} from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGroup, EuiFormRow, EuiLink, EuiText, EuiComboBox } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 interface DocumentationNavProps {
@@ -28,73 +20,50 @@ interface DocumentationNavProps {
 }
 
 function DocumentationNav({
-  searchText,
-  setSearchText,
   onNavigationChange,
   filteredGroups,
   linkToDocumentation,
   selectedSection,
 }: DocumentationNavProps) {
-  const { euiTheme } = useEuiTheme();
 
   return (
     <>
-      {linkToDocumentation && (
-        <EuiFlexItem
-          grow={false}
-          css={css`
-            align-items: flex-end;
-            padding-top: ${euiTheme.size.xs};
-          `}
-        >
-          <EuiLink
-            external
-            href={linkToDocumentation}
-            target="_blank"
-            data-test-subj="language-documentation-navigation-link"
-          >
-            {i18n.translate('languageDocumentationPopover.esqlDocsLabel', {
-              defaultMessage: 'View full ES|QL documentation',
-            })}
-          </EuiLink>
-        </EuiFlexItem>
-      )}
-      <EuiFlexGroup gutterSize="none" responsive={false} direction="column">
-        <EuiFlexItem
-          grow={false}
-          css={css`
-            padding: ${euiTheme.size.s} 0;
-          `}
-        >
-          <EuiFieldSearch
-            value={searchText}
-            onChange={(e) => {
-              setSearchText(e.target.value);
-            }}
-            data-test-subj="language-documentation-navigation-search"
-            placeholder={i18n.translate('languageDocumentationPopover.searchPlaceholder', {
-              defaultMessage: 'Search',
-            })}
-            fullWidth
-            compressed
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiComboBox
-            aria-label={i18n.translate('languageDocumentationPopover.navigationAriaLabel', {
-              defaultMessage: 'Navigate through the documentation',
-            })}
-            placeholder={i18n.translate('languageDocumentationPopover.navigationPlaceholder', {
-              defaultMessage: 'Commands and functions',
-            })}
-            data-test-subj="language-documentation-navigation-dropdown"
-            options={filteredGroups}
-            selectedOptions={selectedSection ? [{ label: selectedSection }] : []}
-            singleSelection={{ asPlainText: true }}
-            onChange={onNavigationChange}
-            compressed
+      <EuiFlexGroup gutterSize="s" responsive={false} direction="row" alignItems="center">
+        <EuiFlexItem grow={true}>
+          <EuiFormRow
             fullWidth
-          />
+            label="Search or select topic"
+            labelAppend={linkToDocumentation && (
+              <EuiText size="xs">
+                <EuiLink
+                  external
+                  href={linkToDocumentation}
+                  target="_blank"
+                  data-test-subj="language-documentation-navigation-link"
+                >
+                  {i18n.translate('languageDocumentationPopover.esqlDocsLabel', {
+                    defaultMessage: 'View full ES|QL documentation',
+                  })}
+                </EuiLink>
+              </EuiText>
+              )}
+            >
+            <EuiComboBox
+              aria-label={i18n.translate('languageDocumentationPopover.navigationAriaLabel', {
+                defaultMessage: 'Navigate through the documentation',
+              })}
+              placeholder={i18n.translate('languageDocumentationPopover.navigationPlaceholder', {
+                defaultMessage: 'Commands and functions',
+              })}
+              data-test-subj="language-documentation-navigation-dropdown"
+              options={filteredGroups}
+              selectedOptions={selectedSection ? [{ label: selectedSection }] : []}
+              singleSelection={{ asPlainText: true }}
+              onChange={onNavigationChange}
+              compressed
+              fullWidth
+            />
+          </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>