[workspace] update search bar layout and align workspace selector (#8649

) (#8687) * update search bar layout * Changeset file for PR #8649 created/updated * update search bar layout * update test case * style update * typo * support search nav items by its parent title * address review comments --------- (cherry picked from commit 79fed30) Signed-off-by: Hailong Cui <ihailong@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Oct 23, 2024 · 0433659 · 0433659
1 parent a0b42c6
commit 0433659
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 134 deletions.
diff --git a/changelogs/fragments/8649.yml 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))
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
@@ -112,7 +112,11 @@
 
   .navGroupEnabledNavTopWrapper {
     padding: 0 $euiSizeS;
-    padding-left: $euiSize;
+    padding-left: $euiSizeS;
+
+    .navGroupEnabledHomeIcon {
+      margin-left: $euiSizeS;
+    }
   }
 
   .searchBar-wrapper {

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="navGroupEnabledHomeIcon"
+            >
               <EuiIcon
                 type={homeIcon}
                 size="xl"

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
@@ -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,97 +109,115 @@ 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' },
       });
     });
 
     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' },
       });
     });
 
     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' },
       });
     });
 
     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();
     });
   });