From 698c1240d88559297d39789e2568fd530e8b556d Mon Sep 17 00:00:00 2001
From: Hailong Cui <ihailong@amazon.com>
Date: Fri, 18 Oct 2024 17:48:35 +0800
Subject: [PATCH 1/8] update search bar layout

Signed-off-by: Hailong Cui <ihailong@amazon.com>
---
 ...ollapsible_nav_group_enabled.test.tsx.snap |  4 +-
 .../header/collapsible_nav_group_enabled.scss | 10 ++-
 .../header/collapsible_nav_group_enabled.tsx  |  1 +
 .../collapsible_nav_group_enabled_top.tsx     |  7 +-
 .../ui/header/collapsible_nav_groups.tsx      |  4 +-
 .../chrome/ui/header/header_search_bar.tsx    | 77 +++++++++----------
 6 files changed, 59 insertions(+), 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
index b65c2335a046..36f3ea559434 100644
--- 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
@@ -28,7 +28,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
         style="padding-top: 0px;"
       >
         <div
-          class="euiFlexItem"
+          class="euiFlexItem navGroup-container"
         >
           <nav
             class="euiSideNav euiSideNav-isOpenMobile"
@@ -126,7 +126,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show use case nav when current na
         style="padding-top: 0px;"
       >
         <div
-          class="euiFlexItem"
+          class="euiFlexItem navGroup-container"
         >
           <nav
             class="euiSideNav euiSideNav-isOpenMobile"
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
index de3a6021b47d..38e97da77783 100644
--- 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
index b5adac4866d1..e7d9c6f5d82e 100644
--- 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
index 628894864928..33add875db01 100644
--- 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
index c22920a633ef..1e795c6d7b5e 100644
--- 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
index 023b5c19566b..25026f81996e 100644
--- 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>
+        )}
+      </>
     );
   }
 };

From 0744c88ebe02fdd1e04bb6d3ccd26c484931170a Mon Sep 17 00:00:00 2001
From: "opensearch-changeset-bot[bot]"
 <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Date: Fri, 18 Oct 2024 09:50:53 +0000
Subject: [PATCH 2/8] Changeset file for PR #8649 created/updated

---
 changelogs/fragments/8649.yml | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 changelogs/fragments/8649.yml

diff --git a/changelogs/fragments/8649.yml b/changelogs/fragments/8649.yml
new file mode 100644
index 000000000000..1a3a2d6dbf66
--- /dev/null
+++ b/changelogs/fragments/8649.yml
@@ -0,0 +1,2 @@
+fix:
+- Finetune search bar and workspace selector style ([#8649](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8649))
\ No newline at end of file

From 721eb426f5dcaed2c50a027a978ee7c1dba92b99 Mon Sep 17 00:00:00 2001
From: Hailong Cui <ihailong@amazon.com>
Date: Fri, 18 Oct 2024 18:08:30 +0800
Subject: [PATCH 3/8] update search bar layout

Signed-off-by: Hailong Cui <ihailong@amazon.com>
---
 src/core/public/chrome/ui/header/header_search_bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/public/chrome/ui/header/header_search_bar.tsx b/src/core/public/chrome/ui/header/header_search_bar.tsx
index 25026f81996e..5b9d343dcd07 100644
--- a/src/core/public/chrome/ui/header/header_search_bar.tsx
+++ b/src/core/public/chrome/ui/header/header_search_bar.tsx
@@ -227,7 +227,7 @@ export const HeaderSearchBar = ({ globalSearchCommands, panel, onSearchResultCli
         {!isPopoverOpen && searchBar}
         {isPopoverOpen && (
           <EuiPopover
-            panelStyle={{ minWidth: '400px', minHeight: '300px' }}
+            panelStyle={{ minWidth: '400px', minHeight: '100px' }}
             button={<></>}
             zIndex={2000}
             panelPaddingSize="s"

From f9852f6a7f527a27b68a07d566052dc98a62ee19 Mon Sep 17 00:00:00 2001
From: Hailong Cui <ihailong@amazon.com>
Date: Sat, 19 Oct 2024 08:34:44 +0800
Subject: [PATCH 4/8] update test case

Signed-off-by: Hailong Cui <ihailong@amazon.com>
---
 .../ui/header/header_search_bar.test.tsx      |  66 ++++++---
 .../chrome/ui/header/header_search_bar.tsx    | 138 ++++++++++--------
 2 files changed, 116 insertions(+), 88 deletions(-)

diff --git a/src/core/public/chrome/ui/header/header_search_bar.test.tsx b/src/core/public/chrome/ui/header/header_search_bar.test.tsx
index 4762f85ba75c..aef87858dc46 100644
--- a/src/core/public/chrome/ui/header/header_search_bar.test.tsx
+++ b/src/core/public/chrome/ui/header/header_search_bar.test.tsx
@@ -25,7 +25,7 @@ describe('<HeaderSearchBarIcon />', () => {
     },
   ];
 
-  it('render HeaderSearchBarIcon correctly without search results', () => {
+  it('render HeaderSearchBarIcon correctly without search results', async () => {
     const { getByTestId, queryByText } = render(
       <HeaderSearchBarIcon globalSearchCommands={globalSearchCommands} />
     );
@@ -34,22 +34,22 @@ describe('<HeaderSearchBarIcon />', () => {
 
     fireEvent.click(searchIcon);
 
-    expect(getByTestId('search-input')).toBeVisible();
+    expect(getByTestId('global-search-input')).toBeVisible();
 
     act(() => {
-      fireEvent.change(getByTestId('search-input'), {
+      fireEvent.change(getByTestId('global-search-input'), {
         target: { value: 'index' },
       });
     });
 
     expect(searchFn).toHaveBeenCalled();
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(queryByText('No results found.')).toBeInTheDocument();
     });
   });
 
-  it('render HeaderSearchBarIcon correctly with search results', () => {
+  it('render HeaderSearchBarIcon correctly with search results', async () => {
     const { getByTestId, queryByText } = render(
       <HeaderSearchBarIcon globalSearchCommands={globalSearchCommands} />
     );
@@ -58,18 +58,18 @@ describe('<HeaderSearchBarIcon />', () => {
 
     fireEvent.click(searchIcon);
 
-    expect(getByTestId('search-input')).toBeVisible();
+    expect(getByTestId('global-search-input')).toBeVisible();
 
     searchFn.mockResolvedValue([<EuiText>index page</EuiText>]);
     act(() => {
-      fireEvent.change(getByTestId('search-input'), {
+      fireEvent.change(getByTestId('global-search-input'), {
         target: { value: 'index' },
       });
     });
 
     expect(searchFn).toHaveBeenCalled();
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(queryByText('index page')).toBeInTheDocument();
     });
   });
@@ -109,19 +109,37 @@ describe('<HeaderSearchBar />', () => {
     expect(searchPanel).toBeVisible();
   });
 
-  it('render HeaderSearchBar with search result', () => {
+  it('render HeaderSearchBar with search input', async () => {
+    const { queryByTestId, getByTestId } = render(
+      <HeaderSearchBar globalSearchCommands={globalSearchCommands} />
+    );
+    const searchPanel = queryByTestId('search-result-panel');
+    expect(searchPanel).toBeNull();
+
+    // focus on search input
+    const searchInput = getByTestId('global-search-input');
+    expect(searchInput).toBeVisible();
+    searchInput.focus();
+
+    await waitFor(() => {
+      expect(queryByTestId('search-result-panel')).toBeVisible();
+      expect(queryByTestId('global-search-input')).toBeVisible();
+    });
+  });
+
+  it('render HeaderSearchBar with search result', async () => {
     const { getByTestId, queryByText } = render(
       <HeaderSearchBar globalSearchCommands={globalSearchCommands} panel />
     );
     const searchPanel = getByTestId('search-result-panel');
     expect(searchPanel).toBeVisible();
 
-    expect(getByTestId('search-input')).toBeVisible();
+    expect(getByTestId('global-search-input')).toBeVisible();
 
     searchFn.mockResolvedValue([<EuiText>index page</EuiText>]);
     searchFnBar.mockResolvedValue([<EuiText>index polices</EuiText>]);
     act(() => {
-      fireEvent.change(getByTestId('search-input'), {
+      fireEvent.change(getByTestId('global-search-input'), {
         target: { value: 'index' },
       });
     });
@@ -129,26 +147,26 @@ describe('<HeaderSearchBar />', () => {
     expect(searchFn).toHaveBeenCalled();
 
     // merge page results together
-    waitFor(() => {
+    await waitFor(() => {
       expect(queryByText('index page')).toBeInTheDocument();
       expect(queryByText('index polices')).toBeInTheDocument();
     });
   });
 
-  it('render HeaderSearchBar with reject search result', () => {
+  it('render HeaderSearchBar with reject search result', async () => {
     const { getByTestId, queryByText } = render(
       <HeaderSearchBar globalSearchCommands={globalSearchCommands} panel />
     );
     const searchPanel = getByTestId('search-result-panel');
     expect(searchPanel).toBeVisible();
 
-    expect(getByTestId('search-input')).toBeVisible();
+    expect(getByTestId('global-search-input')).toBeVisible();
 
     searchFn.mockResolvedValue([<EuiText>index page</EuiText>]);
     searchFnBar.mockRejectedValue(new Error('Async search error'));
 
     act(() => {
-      fireEvent.change(getByTestId('search-input'), {
+      fireEvent.change(getByTestId('global-search-input'), {
         target: { value: 'index' },
       });
     });
@@ -156,25 +174,25 @@ describe('<HeaderSearchBar />', () => {
     expect(searchFn).toHaveBeenCalled();
 
     // ignore reject and show pages for success search≠
-    waitFor(() => {
+    await waitFor(() => {
       expect(queryByText('index page')).toBeInTheDocument();
     });
   });
 
-  it('render HeaderSearchBar with all reject search result', () => {
+  it('render HeaderSearchBar with all reject search result', async () => {
     const { getByTestId, queryByText } = render(
       <HeaderSearchBar globalSearchCommands={globalSearchCommands} panel />
     );
     const searchPanel = getByTestId('search-result-panel');
     expect(searchPanel).toBeVisible();
 
-    expect(getByTestId('search-input')).toBeVisible();
+    expect(getByTestId('global-search-input')).toBeVisible();
 
     searchFnBar.mockRejectedValue(new Error('Async search error'));
     searchFn.mockRejectedValue(new Error('Async search error'));
 
     act(() => {
-      fireEvent.change(getByTestId('search-input'), {
+      fireEvent.change(getByTestId('global-search-input'), {
         target: { value: 'index' },
       });
     });
@@ -182,24 +200,24 @@ describe('<HeaderSearchBar />', () => {
     expect(searchFn).toHaveBeenCalled();
 
     // show no result for all reject search
-    waitFor(() => {
+    await waitFor(() => {
       expect(queryByText('No results found.')).toBeInTheDocument();
     });
   });
 
-  it('render HeaderSearchBar with search saved objects', () => {
+  it('render HeaderSearchBar with search saved objects', async () => {
     const { getByTestId, queryByText } = render(
       <HeaderSearchBar globalSearchCommands={globalSearchCommands} panel />
     );
     const searchPanel = getByTestId('search-result-panel');
     expect(searchPanel).toBeVisible();
 
-    expect(getByTestId('search-input')).toBeVisible();
+    expect(getByTestId('global-search-input')).toBeVisible();
 
     searchFnBaz.mockResolvedValue([<div>saved objects</div>]);
 
     act(() => {
-      fireEvent.change(getByTestId('search-input'), {
+      fireEvent.change(getByTestId('global-search-input'), {
         target: { value: '@index' },
       });
     });
@@ -213,7 +231,7 @@ describe('<HeaderSearchBar />', () => {
       }
     });
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(queryByText('saved objects')).toBeInTheDocument();
     });
   });
diff --git a/src/core/public/chrome/ui/header/header_search_bar.tsx b/src/core/public/chrome/ui/header/header_search_bar.tsx
index 5b9d343dcd07..5c94dd28af03 100644
--- a/src/core/public/chrome/ui/header/header_search_bar.tsx
+++ b/src/core/public/chrome/ui/header/header_search_bar.tsx
@@ -16,7 +16,7 @@ import {
   EuiTitle,
   EuiToolTip,
 } from '@elastic/eui';
-import React, { ReactNode, useRef, useState } from 'react';
+import React, { ReactNode, useCallback, useRef, useState } from 'react';
 import { i18n } from '@osd/i18n';
 import {
   GlobalSearchCommand,
@@ -121,70 +121,80 @@ export const HeaderSearchBar = ({ globalSearchCommands, panel, onSearchResultCli
     );
   };
 
-  const searchResultSections = results && (
-    <EuiFlexGroup direction="column" gutterSize="none">
-      {results.map((result) => (
-        <EuiFlexItem key={result.key}>{result}</EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
-  );
+  const searchResultSections =
+    results && results.length ? (
+      <EuiFlexGroup direction="column" gutterSize="none">
+        {results.map((result) => (
+          <EuiFlexItem key={result.key}>{result}</EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    ) : (
+      <EuiText color="subdued" size="xs">
+        {i18n.translate('core.globalSearch.emptyResult.description', {
+          defaultMessage: 'No results found.',
+        })}
+      </EuiText>
+    );
 
-  const onSearch = async (value: string) => {
-    const filteredCommands = globalSearchCommands.filter((command) => {
-      const alias = SearchCommandTypes[command.type].alias;
-      return alias && value.startsWith(alias);
-    });
-
-    const defaultSearchCommands = globalSearchCommands.filter((command) => {
-      return !SearchCommandTypes[command.type].alias;
-    });
-
-    if (filteredCommands.length === 0) {
-      filteredCommands.push(...defaultSearchCommands);
-    }
-
-    if (value && filteredCommands && filteredCommands.length) {
-      setIsPopoverOpen(true);
-      setIsLoading(true);
-
-      const settleResults = await Promise.allSettled(
-        filteredCommands.map((command) => {
-          const callback = onSearchResultClick || closePopover;
-          const alias = SearchCommandTypes[command.type].alias;
-          const queryValue = alias ? value.replace(alias, '').trim() : value;
-          return command.run(queryValue, callback).then((items) => {
-            return { items, type: command.type };
-          });
-        })
-      );
-
-      const searchResults = settleResults
-        .filter((result) => result.status === 'fulfilled')
-        .map(
-          (result) =>
-            (result as PromiseFulfilledResult<{
-              items: ReactNode[];
-              type: SearchCommandKeyTypes;
-            }>).value
-        )
-        .reduce((acc, { items, type }) => {
-          return {
-            ...acc,
-            [type]: (acc[type] || []).concat(items),
-          };
-        }, {} as Record<SearchCommandKeyTypes, ReactNode[]>);
-
-      const sections = Object.entries(searchResults).map(([key, items]) => {
-        const sectionHeader = SearchCommandTypes[key as SearchCommandKeyTypes].description;
-        return resultSection(items, sectionHeader);
+  const onSearch = useCallback(
+    async (value: string) => {
+      const filteredCommands = globalSearchCommands.filter((command) => {
+        const alias = SearchCommandTypes[command.type].alias;
+        return alias && value.startsWith(alias);
       });
 
-      setIsLoading(false);
-      setResults(sections);
-    } else {
-      setResults([]);
-    }
-  };
+      const defaultSearchCommands = globalSearchCommands.filter((command) => {
+        return !SearchCommandTypes[command.type].alias;
+      });
+
+      if (filteredCommands.length === 0) {
+        filteredCommands.push(...defaultSearchCommands);
+      }
+
+      if (value && filteredCommands && filteredCommands.length) {
+        setIsPopoverOpen(true);
+        setIsLoading(true);
+
+        const settleResults = await Promise.allSettled(
+          filteredCommands.map((command) => {
+            const callback = onSearchResultClick || closePopover;
+            const alias = SearchCommandTypes[command.type].alias;
+            const queryValue = alias ? value.replace(alias, '').trim() : value;
+            return command.run(queryValue, callback).then((items) => {
+              return { items, type: command.type };
+            });
+          })
+        );
+
+        const searchResults = settleResults
+          .filter((result) => result.status === 'fulfilled')
+          .map(
+            (result) =>
+              (result as PromiseFulfilledResult<{
+                items: ReactNode[];
+                type: SearchCommandKeyTypes;
+              }>).value
+          )
+          .reduce((acc, { items, type }) => {
+            return {
+              ...acc,
+              [type]: (acc[type] || []).concat(items),
+            };
+          }, {} as Record<SearchCommandKeyTypes, ReactNode[]>);
+
+        const sections = Object.entries(searchResults).map(([key, items]) => {
+          const sectionHeader = SearchCommandTypes[key as SearchCommandKeyTypes].description;
+          return resultSection(items, sectionHeader);
+        });
+
+        setIsLoading(false);
+        setResults(sections);
+      } else {
+        setResults([]);
+      }
+    },
+    [globalSearchCommands, onSearchResultClick]
+  );
 
   const searchBar = (
     <EuiFieldSearch
@@ -197,7 +207,7 @@ export const HeaderSearchBar = ({ globalSearchCommands, panel, onSearchResultCli
       })}
       isLoading={isLoading}
       aria-label="Search the menus"
-      data-test-subj="search-input"
+      data-test-subj="global-search-input"
       className="searchInput"
       onFocus={() => {
         setIsPopoverOpen(true);
@@ -209,7 +219,7 @@ export const HeaderSearchBar = ({ globalSearchCommands, panel, onSearchResultCli
     <EuiPanel
       hasBorder={false}
       hasShadow={false}
-      paddingSize="s"
+      paddingSize="none"
       data-test-subj="search-result-panel"
     >
       <EuiFlexGroup direction="column" gutterSize="s">

From 62a579ec439d8448056381b0ca81fc4f02aa9640 Mon Sep 17 00:00:00 2001
From: Hailong Cui <ihailong@amazon.com>
Date: Mon, 21 Oct 2024 11:29:14 +0800
Subject: [PATCH 5/8] style update

Signed-off-by: Hailong Cui <ihailong@amazon.com>
---
 .../__snapshots__/collapsible_nav_group_enabled.test.tsx.snap | 4 ++--
 .../chrome/ui/header/collapsible_nav_group_enabled.scss       | 4 ----
 .../public/chrome/ui/header/collapsible_nav_group_enabled.tsx | 1 -
 src/core/public/chrome/ui/header/collapsible_nav_groups.tsx   | 4 +---
 4 files changed, 3 insertions(+), 10 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
index 36f3ea559434..b65c2335a046 100644
--- 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
@@ -28,7 +28,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
         style="padding-top: 0px;"
       >
         <div
-          class="euiFlexItem navGroup-container"
+          class="euiFlexItem"
         >
           <nav
             class="euiSideNav euiSideNav-isOpenMobile"
@@ -126,7 +126,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show use case nav when current na
         style="padding-top: 0px;"
       >
         <div
-          class="euiFlexItem navGroup-container"
+          class="euiFlexItem"
         >
           <nav
             class="euiSideNav euiSideNav-isOpenMobile"
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
index 40cf6c1e6eb4..826fdd9b0098 100644
--- 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,10 +78,6 @@
   .left-navigation-wrapper {
     display: flex;
     flex-direction: column;
-
-    .navGroup-container {
-      margin-right: -$euiSizeS;
-    }
   }
 
   .flex-1-container {
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
index e7d9c6f5d82e..b5adac4866d1 100644
--- 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,7 +247,6 @@ 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_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index 1e795c6d7b5e..c22920a633ef 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -18,7 +18,6 @@ export interface NavGroupsProps {
   navLinks: ChromeNavLink[];
   suffix?: React.ReactElement;
   style?: React.CSSProperties;
-  className?: string;
   appId?: string;
   navigateToApp: InternalApplicationStart['navigateToApp'];
   onNavItemClick: (
@@ -39,7 +38,6 @@ export function NavGroups({
   navLinks,
   suffix,
   style,
-  className: containerClassName,
   appId,
   navigateToApp,
   onNavItemClick,
@@ -191,7 +189,7 @@ export function NavGroups({
     .filter((navItem) => !!navItem.id);
 
   return (
-    <EuiFlexItem style={style} className={containerClassName}>
+    <EuiFlexItem style={style}>
       <EuiSideNav items={sideNavItems} isOpenOnMobile mobileBreakpoints={[]} />
       {suffix}
     </EuiFlexItem>

From 18f7e2fa62d7c393bbdf0fdbe5fe5e78e300f4e7 Mon Sep 17 00:00:00 2001
From: Hailong Cui <ihailong@amazon.com>
Date: Mon, 21 Oct 2024 11:38:14 +0800
Subject: [PATCH 6/8] typo

Signed-off-by: Hailong Cui <ihailong@amazon.com>
---
 .../public/chrome/ui/header/collapsible_nav_group_enabled.scss  | 2 +-
 .../chrome/ui/header/collapsible_nav_group_enabled_top.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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
index 826fdd9b0098..812fc229f76b 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -114,7 +114,7 @@
     padding: 0 $euiSizeS;
     padding-left: $euiSizeS;
 
-    .homeICon {
+    .homeIcon {
       margin-left: $euiSizeS;
     }
   }
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
index 33add875db01..7397f718595b 100644
--- 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
@@ -80,7 +80,7 @@ export const CollapsibleNavTop = ({
               flush="both"
               {...homeLinkProps}
               onClick={onIconClick}
-              className="homeICon"
+              className="homeIcon"
             >
               <EuiIcon
                 type={homeIcon}

From f8470da7c89adbd4e85fa791156a4e8441c281cc Mon Sep 17 00:00:00 2001
From: Hailong Cui <ihailong@amazon.com>
Date: Mon, 21 Oct 2024 14:00:48 +0800
Subject: [PATCH 7/8] support search nav items by its parent title

Signed-off-by: Hailong Cui <ihailong@amazon.com>
---
 .../components/global_search/page_item.tsx    | 10 ++++++++-
 .../global_search/search_pages_command.tsx    | 21 ++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/plugins/workspace/public/components/global_search/page_item.tsx b/src/plugins/workspace/public/components/global_search/page_item.tsx
index c3295f0bc671..bc18342ee9ba 100644
--- a/src/plugins/workspace/public/components/global_search/page_item.tsx
+++ b/src/plugins/workspace/public/components/global_search/page_item.tsx
@@ -89,7 +89,15 @@ export const GlobalSearchPageItem = ({
     const parentNavLinkTitle = link.navGroup.navLinks.find(
       (navLink) => navLink.id === link.parentNavLinkId
     )?.title;
-    breadcrumbs.push({ text: parentNavLinkTitle });
+    if (parentNavLinkTitle) {
+      breadcrumbs.push({
+        text: (
+          <EuiHighlight search={search} highlightAll={true}>
+            {parentNavLinkTitle}
+          </EuiHighlight>
+        ),
+      });
+    }
   }
 
   const onNavItemClick = () => {
diff --git a/src/plugins/workspace/public/components/global_search/search_pages_command.tsx b/src/plugins/workspace/public/components/global_search/search_pages_command.tsx
index 0aa73a11088b..7d2b348f08ac 100644
--- a/src/plugins/workspace/public/components/global_search/search_pages_command.tsx
+++ b/src/plugins/workspace/public/components/global_search/search_pages_command.tsx
@@ -43,14 +43,25 @@ export const searchPages = async (
         // parent nav links are not clickable
         const parentNavLinkIds = links.map((link) => link.parentNavLinkId).filter((link) => !!link);
         return links
-          .filter(
-            (link) =>
+          .filter((link) => {
+            const title = link.title;
+            let parentNavLinkTitle;
+            // parent title also taken into consideration for search its sub items
+            if (link.parentNavLinkId) {
+              parentNavLinkTitle = navGroup.navLinks.find(
+                (navLink) => navLink.id === link.parentNavLinkId
+              )?.title;
+            }
+            const titleMatch = title && title.toLowerCase().includes(query.toLowerCase());
+            const parentTitleMatch =
+              parentNavLinkTitle && parentNavLinkTitle.toLowerCase().includes(query.toLowerCase());
+            return (
               !link.hidden &&
               !link.disabled &&
-              link.title &&
-              link.title.toLowerCase().includes(query.toLowerCase()) &&
+              (titleMatch || parentTitleMatch) &&
               !parentNavLinkIds.includes(link.id)
-          )
+            );
+          })
           .map((link) => ({
             ...link,
             navGroup,

From 6ab80cdfd62a9b0b5e9cba47eb1db48719ae0084 Mon Sep 17 00:00:00 2001
From: Hailong Cui <ihailong@amazon.com>
Date: Mon, 21 Oct 2024 14:17:22 +0800
Subject: [PATCH 8/8] address review comments

Signed-off-by: Hailong Cui <ihailong@amazon.com>
---
 .../public/chrome/ui/header/collapsible_nav_group_enabled.scss  | 2 +-
 .../chrome/ui/header/collapsible_nav_group_enabled_top.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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
index 812fc229f76b..cd0d73a0644a 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -114,7 +114,7 @@
     padding: 0 $euiSizeS;
     padding-left: $euiSizeS;
 
-    .homeIcon {
+    .navGroupEnabledHomeIcon {
       margin-left: $euiSizeS;
     }
   }
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
index 7397f718595b..caa825fe8381 100644
--- 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
@@ -80,7 +80,7 @@ export const CollapsibleNavTop = ({
               flush="both"
               {...homeLinkProps}
               onClick={onIconClick}
-              className="homeIcon"
+              className="navGroupEnabledHomeIcon"
             >
               <EuiIcon
                 type={homeIcon}