update search bar layout

Signed-off-by: Hailong Cui <ihailong@amazon.com>
Hailong-am · Oct 18, 2024 · a15ee48 · a15ee48
1 parent 8d30da4
commit a15ee48
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 44 deletions.
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -78,6 +78,10 @@
   .left-navigation-wrapper {
     display: flex;
     flex-direction: column;
+
+    .navGroup-container {
+      margin-right: -$euiSizeS;
+    }
   }
 
   .flex-1-container {
@@ -112,7 +116,11 @@
 
   .navGroupEnabledNavTopWrapper {
     padding: 0 $euiSizeS;
-    padding-left: $euiSize;
+    padding-left: $euiSizeS;
+
+    .homeICon {
+      margin-left: $euiSizeS;
+    }
   }
 
   .searchBar-wrapper {

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
@@ -247,6 +247,7 @@ export function CollapsibleNavGroupEnabled({
             style={{ paddingTop: 0 }}
           >
             <NavGroups
+              className="navGroup-container"
               navLinks={navLinksForRender}
               navigateToApp={navigateToApp}
               onNavItemClick={(event, navItem) => {

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -76,7 +76,12 @@ export const CollapsibleNavTop = ({
       <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
         {!shouldShrinkNavigation ? (
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty flush="both" {...homeLinkProps} onClick={onIconClick}>
+            <EuiButtonEmpty
+              flush="both"
+              {...homeLinkProps}
+              onClick={onIconClick}
+              className="homeICon"
+            >
               <EuiIcon
                 type={homeIcon}
                 size="xl"

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -18,6 +18,7 @@ export interface NavGroupsProps {
   navLinks: ChromeNavLink[];
   suffix?: React.ReactElement;
   style?: React.CSSProperties;
+  className?: string;
   appId?: string;
   navigateToApp: InternalApplicationStart['navigateToApp'];
   onNavItemClick: (
@@ -38,6 +39,7 @@ export function NavGroups({
   navLinks,
   suffix,
   style,
+  className: containerClassName,
   appId,
   navigateToApp,
   onNavItemClick,
@@ -189,7 +191,7 @@ export function NavGroups({
     .filter((navItem) => !!navItem.id);
 
   return (
-    <EuiFlexItem style={style}>
+    <EuiFlexItem style={style} className={containerClassName}>
       <EuiSideNav items={sideNavItems} isOpenOnMobile mobileBreakpoints={[]} />
       {suffix}
     </EuiFlexItem>

diff --git a/src/core/public/chrome/ui/header/header_search_bar.tsx b/src/core/public/chrome/ui/header/header_search_bar.tsx
@@ -86,12 +86,10 @@ export const HeaderSearchBar = ({ globalSearchCommands, panel, onSearchResultCli
   const [results, setResults] = useState([] as React.JSX.Element[]);
   const [isLoading, setIsLoading] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [panelWidth, setPanelWidth] = useState(0);
-  const inputElRef = useRef<HTMLElement | null>();
-  const inputRef = (node: HTMLElement | null) => (inputElRef.current = node);
 
   const closePopover = () => {
     setIsPopoverOpen(false);
+    setResults([]);
   };
 
   const resultSection = (items: ReactNode[], sectionHeader: string) => {
@@ -108,7 +106,7 @@ export const HeaderSearchBar = ({ globalSearchCommands, panel, onSearchResultCli
           {items.length ? (
             <EuiListGroup flush={true} gutterSize="none" maxWidth={false}>
               {items.map((item, index) => (
-                <EuiListGroupItem key={index} label={item} size="s" />
+                <EuiListGroupItem key={index} label={item} color="text" />
               ))}
             </EuiListGroup>
           ) : (
@@ -184,7 +182,6 @@ export const HeaderSearchBar = ({ globalSearchCommands, panel, onSearchResultCli
       setIsLoading(false);
       setResults(sections);
     } else {
-      setIsPopoverOpen(false);
       setResults([]);
     }
   };
@@ -203,47 +200,49 @@ export const HeaderSearchBar = ({ globalSearchCommands, panel, onSearchResultCli
       data-test-subj="search-input"
       className="searchInput"
       onFocus={() => {
-        const inputEl = inputElRef.current;
-        if (inputEl) {
-          const width = inputEl.getBoundingClientRect().width;
-          setPanelWidth(width);
-        }
+        setIsPopoverOpen(true);
       }}
     />
   );
 
+  const searchBarPanel = (
+    <EuiPanel
+      hasBorder={false}
+      hasShadow={false}
+      paddingSize="s"
+      data-test-subj="search-result-panel"
+    >
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>{searchBar}</EuiFlexItem>
+        <EuiFlexItem>{searchResultSections}</EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+
   if (panel) {
-    return (
-      <EuiPanel
-        hasBorder={false}
-        hasShadow={false}
-        paddingSize="s"
-        data-test-subj="search-result-panel"
-      >
-        <EuiFlexGroup direction="column" gutterSize="s">
-          <EuiFlexItem>{searchBar}</EuiFlexItem>
-          <EuiFlexItem>{searchResultSections}</EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPanel>
-    );
+    return searchBarPanel;
   } else {
     return (
-      <EuiPopover
-        button={searchBar}
-        buttonRef={inputRef}
-        panelStyle={{ minWidth: panelWidth }}
-        zIndex={2000}
-        panelPaddingSize="s"
-        attachToAnchor={true}
-        ownFocus={false}
-        display="block"
-        isOpen={isPopoverOpen}
-        closePopover={() => {
-          setIsPopoverOpen(false);
-        }}
-      >
-        {searchResultSections}
-      </EuiPopover>
+      <>
+        {!isPopoverOpen && searchBar}
+        {isPopoverOpen && (
+          <EuiPopover
+            panelStyle={{ minWidth: '400px', minHeight: '300px' }}
+            button={<></>}
+            zIndex={2000}
+            panelPaddingSize="s"
+            attachToAnchor={true}
+            ownFocus={true}
+            display="block"
+            isOpen={isPopoverOpen}
+            closePopover={() => {
+              closePopover();
+            }}
+          >
+            {searchBarPanel}
+          </EuiPopover>
+        )}
+      </>
     );
   }
 };