Add assets search and enhance search commands

changelogs/fragments/10789.yml

@@ -0,0 +1,3 @@
+feat:
+- Add assets search command to find dashboards and visualizations from global search ([#10789](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10789))
+- Add search submit commands for Enter-key triggered actions in global search ([#10789](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10789))

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

@@ -43,6 +43,7 @@ const createSetupContractMock = () => {
     },
     globalSearch: {
       registerSearchCommand: jest.fn(),
+      registerSearchSubmitCommand: jest.fn(),
     },
   };
 };
@@ -92,6 +93,8 @@ const createStartContractMock = () => {
     globalSearch: {
       getAllSearchCommands: jest.fn(() => []),
       unregisterSearchCommand: jest.fn(),
+      getSearchSubmitCommands$: jest.fn(() => new BehaviorSubject([])),
+      unregisterSearchSubmitCommand: jest.fn(),
     },
     setAppTitle: jest.fn(),
     setIsVisible: jest.fn(),

src/core/public/chrome/chrome_service.tsx

@@ -433,6 +433,7 @@ export class ChromeService {
           currentWorkspace$={workspaces.currentWorkspace$}
           useUpdatedHeader={this.useUpdatedHeader}
           globalSearchCommands={globalSearch.getAllSearchCommands()}
+          globalSearchSubmitCommands$={globalSearch.getSearchSubmitCommands$()}
           globalBanner$={this.globalBanner$.pipe(takeUntil(this.stop$))}
           keyboardShortcut={keyboardShortcut}
         />

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

@@ -69,4 +69,119 @@ describe('GlobalSearchService', () => {
     expect(start.getAllSearchCommands()[0].id).toEqual('test2');
     expect(start.getAllSearchCommands()[0].type).toEqual('PAGES');
   });
+
+  it('registerSearchSubmitCommand', () => {
+    const globalSearchService = new GlobalSearchService();
+    const setup = globalSearchService.setup();
+    const start = globalSearchService.start();
+
+    const mockRun = jest.fn();
+    setup.registerSearchSubmitCommand({
+      id: 'submit1',
+      name: 'Submit Command 1',
+      run: mockRun,
+    });
+
+    let commands: any[] = [];
+    start.getSearchSubmitCommands$().subscribe((cmds) => {
+      commands = cmds;
+    });
+
+    expect(commands).toHaveLength(1);
+    expect(commands[0].id).toEqual('submit1');
+    expect(commands[0].name).toEqual('Submit Command 1');
+  });
+
+  it('unregisterSearchSubmitCommand', () => {
+    const globalSearchService = new GlobalSearchService();
+    const setup = globalSearchService.setup();
+    const start = globalSearchService.start();
+
+    setup.registerSearchSubmitCommand({
+      id: 'submit1',
+      name: 'Submit Command 1',
+      run: jest.fn(),
+    });
+
+    let commands: any[] = [];
+    start.getSearchSubmitCommands$().subscribe((cmds) => {
+      commands = cmds;
+    });
+
+    expect(commands).toHaveLength(1);
+
+    start.unregisterSearchSubmitCommand('submit1');
+
+    expect(commands).toHaveLength(0);
+  });
+
+  it('registerSearchSubmitCommand with duplicate id', () => {
+    const globalSearchService = new GlobalSearchService();
+    const setup = globalSearchService.setup();
+    const start = globalSearchService.start();
+
+    setup.registerSearchSubmitCommand({
+      id: 'submit1',
+      name: 'Submit Command 1',
+      run: jest.fn(),
+    });
+
+    setup.registerSearchSubmitCommand({
+      id: 'submit1',
+      name: 'Submit Command 1 Duplicate',
+      run: jest.fn(),
+    });
+
+    let commands: any[] = [];
+    start.getSearchSubmitCommands$().subscribe((cmds) => {
+      commands = cmds;
+    });
+
+    // the second one will not overwrite the first one
+    expect(commands).toHaveLength(1);
+    expect(commands[0].name).toEqual('Submit Command 1');
+  });
+
+  it('getSearchSubmitCommands$ returns observable that emits updates', () => {
+    const globalSearchService = new GlobalSearchService();
+    const setup = globalSearchService.setup();
+    const start = globalSearchService.start();
+
+    const emittedValues: any[][] = [];
+    start.getSearchSubmitCommands$().subscribe((cmds) => {
+      emittedValues.push([...cmds]);
+    });
+
+    // Initial empty state
+    expect(emittedValues).toHaveLength(1);
+    expect(emittedValues[0]).toHaveLength(0);
+
+    // Register first command
+    setup.registerSearchSubmitCommand({
+      id: 'submit1',
+      name: 'Submit Command 1',
+      run: jest.fn(),
+    });
+
+    expect(emittedValues).toHaveLength(2);
+    expect(emittedValues[1]).toHaveLength(1);
+    expect(emittedValues[1][0].id).toEqual('submit1');
+
+    // Register second command
+    setup.registerSearchSubmitCommand({
+      id: 'submit2',
+      name: 'Submit Command 2',
+      run: jest.fn(),
+    });
+
+    expect(emittedValues).toHaveLength(3);
+    expect(emittedValues[2]).toHaveLength(2);
+
+    // Unregister first command
+    start.unregisterSearchSubmitCommand('submit1');
+
+    expect(emittedValues).toHaveLength(4);
+    expect(emittedValues[3]).toHaveLength(1);
+    expect(emittedValues[3][0].id).toEqual('submit2');
+  });
 });

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

@@ -5,6 +5,7 @@
 
 import { ReactNode } from 'react';
 import { i18n } from '@osd/i18n';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 /**
  * search input match with `@` will handled by saved objects search command
@@ -46,16 +47,28 @@ export interface GlobalSearchCommand {
    * @param value search query
    * @param callback callback function when search is done
    */
-  run(value: string, callback?: () => void): Promise<ReactNode[]>;
+  run(value: string, callback?: () => void, abortSignal?: AbortSignal): Promise<ReactNode[]>;
+}
+
+/**
+ * @experimental
+ */
+export interface GlobalSearchSubmitCommand {
+  id: string;
+  name: string;
+  run: (payload: { content: string }) => void;
 }
 
 export interface GlobalSearchServiceSetupContract {
   registerSearchCommand(searchCommand: GlobalSearchCommand): void;
+  registerSearchSubmitCommand(searchResultCommand: GlobalSearchSubmitCommand): void;
 }
 
 export interface GlobalSearchServiceStartContract {
   getAllSearchCommands(): GlobalSearchCommand[];
   unregisterSearchCommand(id: string): void;
+  unregisterSearchSubmitCommand(id: string): void;
+  getSearchSubmitCommands$: () => Observable<GlobalSearchSubmitCommand[]>;
 }
 
 /**
@@ -76,7 +89,8 @@ export interface GlobalSearchServiceStartContract {
  * @experimental
  */
 export class GlobalSearchService {
-  private searchCommands = [] as GlobalSearchCommand[];
+  private searchCommands: GlobalSearchCommand[] = [];
+  private searchSubmitCommands$ = new BehaviorSubject<GlobalSearchSubmitCommand[]>([]);
 
   private registerSearchCommand(searchHandler: GlobalSearchCommand) {
     const exists = this.searchCommands.find((item) => {
@@ -96,16 +110,39 @@ export class GlobalSearchService {
     });
   }
 
+  private registerSearchSubmitCommand = (searchSubmitCommand: GlobalSearchSubmitCommand) => {
+    const commands = this.searchSubmitCommands$.getValue();
+    if (commands.find((command) => command.id === searchSubmitCommand.id)) {
+      // eslint-disable-next-line no-console
+      console.warn(`Duplicate SearchSubmitCommands id ${searchSubmitCommand.id} found`);
+      return;
+    }
+    this.searchSubmitCommands$.next([...commands, searchSubmitCommand]);
+  };
+
+  private unregisterSearchSubmitCommand(id: string) {
+    const newCommands = this.searchSubmitCommands$.getValue().filter((item) => {
+      return item.id !== id;
+    });
+    if (newCommands.length === this.searchSubmitCommands$.getValue().length) {
+      return;
+    }
+    this.searchSubmitCommands$.next(newCommands);
+  }
+
   public setup(): GlobalSearchServiceSetupContract {
     return {
       registerSearchCommand: this.registerSearchCommand.bind(this),
+      registerSearchSubmitCommand: this.registerSearchSubmitCommand,
     };
   }
 
   public start(): GlobalSearchServiceStartContract {
     return {
       getAllSearchCommands: () => this.searchCommands,
+      getSearchSubmitCommands$: () => this.searchSubmitCommands$.asObservable(),
       unregisterSearchCommand: this.unregisterSearchCommand.bind(this),
+      unregisterSearchSubmitCommand: this.unregisterSearchSubmitCommand.bind(this),
     };
   }
 }

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

@@ -111,6 +111,7 @@ describe('<CollapsibleNavGroupEnabled />', () => {
         }
       },
       capabilities: { ...capabilitiesServiceMock.createStartContract().capabilities },
+      globalSearchSubmitCommands$: new BehaviorSubject([]),
       ...props,
     };
   }

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

@@ -24,7 +24,7 @@ import {
 } from '../../nav_group';
 import { fulfillRegistrationLinksToChromeNavLinks, getVisibleUseCases, sortBy } from '../../utils';
 import { ALL_USE_CASE_ID, DEFAULT_APP_CATEGORIES } from '../../../../../core/utils';
-import { GlobalSearchCommand } from '../../global_search';
+import { GlobalSearchCommand, GlobalSearchSubmitCommand } from '../../global_search';
 import { CollapsibleNavTop } from './collapsible_nav_group_enabled_top';
 import { HeaderNavControls } from './header_nav_controls';
 import { NavGroups } from './collapsible_nav_groups';
@@ -50,6 +50,7 @@ export interface CollapsibleNavGroupEnabledProps {
   capabilities: InternalApplicationStart['capabilities'];
   currentWorkspace$: WorkspacesStart['currentWorkspace$'];
   globalSearchCommands?: GlobalSearchCommand[];
+  globalSearchSubmitCommands$: Rx.Observable<GlobalSearchSubmitCommand[]>;
 }
 
 const titleForSeeAll = i18n.translate('core.ui.primaryNav.seeAllLabel', {
@@ -83,6 +84,10 @@ export function CollapsibleNavGroupEnabled({
   const navGroupsMap = useObservable(observables.navGroupsMap$, {});
   const currentNavGroup = useObservable(observables.currentNavGroup$, undefined);
   const currentWorkspace = useObservable(observables.currentWorkspace$);
+  const globalSearchSubmitCommands = useObservable(
+    observables.globalSearchSubmitCommands$,
+    undefined
+  );
 
   const visibleUseCases = useMemo(() => getVisibleUseCases(navGroupsMap), [navGroupsMap]);
 
@@ -221,7 +226,10 @@ export function CollapsibleNavGroupEnabled({
         {!isNavOpen ? (
           <div className="searchBarIcon euiHeaderSectionItemButton">
             {globalSearchCommands && (
-              <HeaderSearchBarIcon globalSearchCommands={globalSearchCommands} />
+              <HeaderSearchBarIcon
+                globalSearchCommands={globalSearchCommands}
+                globalSearchSubmitCommands={globalSearchSubmitCommands}
+              />
             )}
           </div>
         ) : (
@@ -232,7 +240,10 @@ export function CollapsibleNavGroupEnabled({
             className="searchBar-wrapper"
           >
             {globalSearchCommands && (
-              <HeaderSearchBar globalSearchCommands={globalSearchCommands} />
+              <HeaderSearchBar
+                globalSearchCommands={globalSearchCommands}
+                globalSearchSubmitCommands={globalSearchSubmitCommands}
+              />
             )}
           </EuiPanel>
         )}