[Workspace] Add global search bar into left nav

changelogs/fragments/8538.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Add global search bar into left nav ([#8538](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8538))

src/core/public/chrome/chrome_service.mock.ts

@@ -41,6 +41,9 @@
       getNavGroupEnabled: jest.fn(),
       registerNavGroupUpdater: jest.fn(),
     },
+    globalSearch: {
+      registerSearchStrategy: jest.fn(),
+    },
   };
 };
 
@@ -83,6 +86,9 @@
       getCurrentNavGroup$: jest.fn(() => new BehaviorSubject(undefined)),
       setCurrentNavGroup: jest.fn(),
     },
+    globalSearch: {
+      getAllSearchStrategies: jest.fn(() => []),
+    },
     setAppTitle: jest.fn(),
     setIsVisible: jest.fn(),
     getIsVisible$: jest.fn(),

src/core/public/chrome/chrome_service.tsx

@@ -66,6 +66,11 @@ import {
   ChromeNavGroupServiceSetupContract,
   ChromeNavGroupServiceStartContract,
 } from './nav_group';
+import {
+  GlobalSearchService,
+  GlobalSearchServiceSetupContract,
+  GlobalSearchServiceStartContract,
+} from './global_search';
 
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
@@ -136,6 +141,7 @@ export class ChromeService {
   private readonly recentlyAccessed = new RecentlyAccessedService();
   private readonly docTitle = new DocTitleService();
   private readonly navGroup = new ChromeNavGroupService();
+  private readonly globalSearch = new GlobalSearchService();
   private useUpdatedHeader = false;
   private updatedHeaderSubscription: Subscription | undefined;
   private collapsibleNavHeaderRender?: CollapsibleNavHeaderRender;
@@ -198,6 +204,7 @@ export class ChromeService {
 
   public setup({ uiSettings }: SetupDeps): ChromeSetup {
     const navGroup = this.navGroup.setup({ uiSettings });
+    const globalSearch = this.globalSearch.setup();
     return {
       registerCollapsibleNavHeader: (render: CollapsibleNavHeaderRender) => {
         if (this.collapsibleNavHeaderRender) {
@@ -209,6 +216,7 @@ export class ChromeService {
         this.collapsibleNavHeaderRender = render;
       },
       navGroup,
+      globalSearch,
     };
   }
 
@@ -255,6 +263,8 @@ export class ChromeService {
       workspaces,
     });
 
+    const globalSearch = this.globalSearch.start();
+
     // erase chrome fields from a previous app while switching to a next app
     application.currentAppId$.subscribe(() => {
       helpExtension$.next(undefined);
@@ -346,6 +356,7 @@ export class ChromeService {
       docTitle,
       logos,
       navGroup,
+      globalSearch,
 
       getHeaderComponent: () => (
         <Header
@@ -388,6 +399,7 @@ export class ChromeService {
           workspaceList$={workspaces.workspaceList$}
           currentWorkspace$={workspaces.currentWorkspace$}
           useUpdatedHeader={this.useUpdatedHeader}
+          globalSearchStrategies={globalSearch.getAllSearchStrategies()}
         />
       ),
 
@@ -476,6 +488,8 @@ export class ChromeService {
 export interface ChromeSetup {
   registerCollapsibleNavHeader: (render: CollapsibleNavHeaderRender) => void;
   navGroup: ChromeNavGroupServiceSetupContract;
+  /** {@inheritdoc GlobalSearchService} */
+  globalSearch: GlobalSearchServiceSetupContract;
 }
 
 /**
@@ -517,6 +531,8 @@ export interface ChromeStart {
   navGroup: ChromeNavGroupServiceStartContract;
   /** {@inheritdoc Logos} */
   readonly logos: Logos;
+  /** {@inheritdoc GlobalSearchService} */
+  globalSearch: GlobalSearchServiceStartContract;
 
   /**
    * Sets the current app's title
@@ -605,7 +621,7 @@ export interface ChromeStart {
   setCustomNavLink(newCustomNavLink?: Partial<ChromeNavLink>): void;
 
   /**
-   * Get an observable of the current custom help conttent
+   * Get an observable of the current custom help content
    */
   getHelpExtension$(): Observable<ChromeHelpExtension | undefined>;
 

src/core/public/chrome/global_search/global_search_service.test.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// test global_search_service.ts
+import { GlobalSearchService, SearchObjectTypes } from './global_search_service';
+
+describe('GlobalSearchService', () => {
+  const globalSearchService = new GlobalSearchService();
+  const setup = globalSearchService.setup();
+  const start = globalSearchService.start();
+
+  it('registerSearchStrategy', async () => {
+    setup.registerSearchStrategy({
+      id: 'test',
+      type: SearchObjectTypes.PAGES,
+      doSearch: async (query) => {
+        return [];
+      },
+    });
+
+    expect(start.getAllSearchStrategies()).toHaveLength(1);
+    expect(start.getAllSearchStrategies()[0].id).toEqual('test');
+    expect(start.getAllSearchStrategies()[0].type).toEqual(SearchObjectTypes.PAGES);
+  });
+
+  it('registerSearchStrategy with duplicate id', async () => {
+    setup.registerSearchStrategy({
+      id: 'test',
+      type: SearchObjectTypes.PAGES,
+      doSearch: async (query) => {
+        return [];
+      },
+    });
+
+    setup.registerSearchStrategy({
+      id: 'test',
+      type: SearchObjectTypes.PAGES,
+      doSearch: async (query) => {
+        return [];
+      },
+    });
+
+    expect(start.getAllSearchStrategies()).toHaveLength(1);
+  });
+});

src/core/public/chrome/global_search/global_search_service.ts

@@ -0,0 +1,84 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ReactNode } from 'react';
+
+export enum SearchObjectTypes {
+  PAGES = 'pages',
+  SAVED_OBJECTS = 'saved_objects',
+}
+/**
+ * @experimental
+ */
+export interface GlobalSearchStrategy {
+  /**
+   * unique id of this strategy
+   */
+  id: string;
+  /**
+   * search object type
+   * @type {SearchObjectTypes}
+   */
+  type: SearchObjectTypes;
+  /**
+   * do the search and return search result with a React element
+   * @param value search query
+   * @param callback callback function when search is done
+   */
+  doSearch(value: string, callback?: () => void): Promise<ReactNode[]>;
+}
+
+export interface GlobalSearchServiceSetupContract {
+  registerSearchStrategy(searchStrategy: GlobalSearchStrategy): void;
+}
+
+export interface GlobalSearchServiceStartContract {
+  getAllSearchStrategies(): GlobalSearchStrategy[];
+}
+
+/**
+ * {@link GlobalSearchStrategy | APIs} for registering new global search strategy when do search from header search bar .
+ *
+ * @example
+ * Register a GlobalSearchStrategy to search pages
+ * ```jsx
+ * chrome.globalSearch.registerSearchStrategy({
+ *   id: 'test',
+ *   type: SearchObjectTypes.PAGES,
+ *   doSearch: async (query) => {
+ *     return [];
+ *   },
+ * })
+ * ```
+ *
+ * @experimental
+ */
+export class GlobalSearchService {
+  private searchStrategies = [] as GlobalSearchStrategy[];
+
+  private registerSearchStrategy(searchStrategy: GlobalSearchStrategy) {
+    const exists = this.searchStrategies.find((item) => {
+      return item.id === searchStrategy.id;
+    });
+    if (exists) {
+      // eslint-disable-next-line no-console
+      console.warn('Duplicate SearchStrategy id found');
+      return;
+    }
+    this.searchStrategies.push(searchStrategy);
+  }
+
+  public setup() {
+    return {
+      registerSearchStrategy: this.registerSearchStrategy.bind(this),
+    };
+  }
+
+  public start() {
+    return {
+      getAllSearchStrategies: () => this.searchStrategies,
+    };
+  }
+}

src/core/public/chrome/global_search/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './global_search_service';

src/core/public/chrome/index.ts

@@ -61,3 +61,4 @@ export { ChromeDocTitle } from './doc_title';
 export { RightNavigationOrder, HeaderVariant } from './constants';
 export { ChromeRegistrationNavLink, ChromeNavGroupUpdater, NavGroupItemInMap } from './nav_group';
 export { fulfillRegistrationLinksToChromeNavLinks, LinkItemType, getSortedNavLinks } from './utils';
+export { SearchObjectTypes, GlobalSearchStrategy } from './global_search';

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss

@@ -114,4 +114,23 @@
     padding: 0 $euiSizeS;
     padding-left: $euiSize;
   }
+
+  .searchBar-wrapper {
+    padding: $euiSize;
+    padding-top: $euiSizeS;
+    margin-right: $euiSize;
+    background-color: transparent;
+    flex-grow: 0;
+
+    .searchInput {
+      border-radius: $euiSizeS;
+      background-color: transparent;
+    }
+  }
+
+  .searchBarIcon {
+    position: fixed;
+    top: $ouiHeaderChildSize;
+    left: 0;
+  }
 }

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx

@@ -11,8 +11,8 @@ import useObservable from 'react-use/lib/useObservable';
 import * as Rx from 'rxjs';
 import classNames from 'classnames';
 import { WorkspacesStart } from 'src/core/public/workspace';
-import { ChromeNavControl, ChromeNavLink } from '../..';
 import { NavGroupType } from '../../../../types';
+import { ChromeNavControl, ChromeNavLink } from '../..';
 import { InternalApplicationStart } from '../../../application/types';
 import { HttpStart } from '../../../http';
 import { createEuiListItem } from './nav_link';
@@ -27,6 +27,8 @@ import { ALL_USE_CASE_ID, DEFAULT_APP_CATEGORIES } from '../../../../../core/uti
 import { CollapsibleNavTop } from './collapsible_nav_group_enabled_top';
 import { HeaderNavControls } from './header_nav_controls';
 import { NavGroups } from './collapsible_nav_groups';
+import { HeaderSearchBar, HeaderSearchBarIcon } from './header_search_bar';
+import { GlobalSearchStrategy } from '../../global_search';
 
 export interface CollapsibleNavGroupEnabledProps {
   appId$: InternalApplicationStart['currentAppId$'];
@@ -47,6 +49,7 @@ export interface CollapsibleNavGroupEnabledProps {
   setCurrentNavGroup: ChromeNavGroupServiceStartContract['setCurrentNavGroup'];
   capabilities: InternalApplicationStart['capabilities'];
   currentWorkspace$: WorkspacesStart['currentWorkspace$'];
+  globalSearchStrategies?: GlobalSearchStrategy[];
 }
 
 const titleForSeeAll = i18n.translate('core.ui.primaryNav.seeAllLabel', {
@@ -70,6 +73,7 @@ export function CollapsibleNavGroupEnabled({
   setCurrentNavGroup,
   capabilities,
   collapsibleNavHeaderRender,
+  globalSearchStrategies,
   ...observables
 }: CollapsibleNavGroupEnabledProps) {
   const allNavLinks = useObservable(observables.navLinks$, []);
@@ -214,6 +218,24 @@ export function CollapsibleNavGroupEnabled({
             />
           </EuiPanel>
         )}
+        {!isNavOpen ? (
+          <div className="searchBarIcon euiHeaderSectionItemButton">
+            {globalSearchStrategies && (
+              <HeaderSearchBarIcon globalSearchStrategies={globalSearchStrategies} />
+            )}
+          </div>
+        ) : (
+          <EuiPanel
+            hasBorder={false}
+            paddingSize="s"
+            hasShadow={false}
+            className="searchBar-wrapper"
+          >
+            {globalSearchStrategies && (
+              <HeaderSearchBar globalSearchStrategies={globalSearchStrategies} />
+            )}
+          </EuiPanel>
+        )}
         {!isNavOpen ? null : (
           <EuiPanel
             hasBorder={false}

src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx

@@ -19,7 +19,6 @@ import { InternalApplicationStart } from 'src/core/public/application';
 import { createEuiListItem } from './nav_link';
 import { NavGroupItemInMap } from '../../nav_group';
 import { ChromeNavLink } from '../../nav_links';
-
 export interface CollapsibleNavTopProps {
   collapsibleNavHeaderRender?: () => JSX.Element | null;
   homeLink?: ChromeNavLink;