[Workspace] Add global search bar into left nav #8538

Hailong-am · 2024-10-10T01:15:46Z

Description

This PR is add search bar into left nav, the search bar supports search pages in and out of workspace.

saved objects is not supported yet.

globalsearch.mov

Issues Resolved

part of #1854
and #4055

Screenshot

Testing the changes

Changelog

feat: [Workspace] Add global search bar into left nav

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

github-actions · 2024-10-10T01:16:17Z

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

github-actions · 2024-10-10T01:16:41Z

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

codecov · 2024-10-10T01:30:28Z

Codecov Report

Attention: Patch coverage is 78.91566% with 35 lines in your changes missing coverage. Please review.

Project coverage is 60.91%. Comparing base (841170b) to head (e9fb891).
Report is 74 commits behind head on main.

Files with missing lines	Patch %	Lines
...core/public/chrome/ui/header/header_search_bar.tsx	77.41%	12 Missing and 2 partials ⚠️
...pace/public/components/global_search/page_item.tsx	84.37%	3 Missing and 2 partials ⚠️
.../components/global_search/search_pages_command.tsx	77.27%	2 Missing and 3 partials ⚠️
src/plugins/dev_tools/public/dev_tools_icon.tsx	50.00%	3 Missing ⚠️
src/plugins/dev_tools/public/plugin.ts	70.00%	3 Missing ⚠️
...chrome/ui/header/collapsible_nav_group_enabled.tsx	33.33%	0 Missing and 2 partials ⚠️
src/core/public/chrome/chrome_service.mock.ts	0.00%	1 Missing ⚠️
src/plugins/dev_tools/public/application.tsx	0.00%	1 Missing ⚠️
src/plugins/workspace/public/plugin.ts	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8538      +/-   ##
==========================================
- Coverage   60.93%   60.91%   -0.03%     
==========================================
  Files        3777     3786       +9     
  Lines       89852    90125     +273     
  Branches    14086    14131      +45     
==========================================
+ Hits        54750    54897     +147     
- Misses      31668    31788     +120     
- Partials     3434     3440       +6

Flag	Coverage Δ
Linux_1	`29.17% <36.23%> (+0.02%)`	⬆️
Linux_2	`56.35% <79.26%> (+0.07%)`	⬆️
Linux_3	`37.73% <23.63%> (-0.08%)`	⬇️
Linux_4	`29.91% <6.09%> (-0.04%)`	⬇️
Windows_1	`29.18% <36.23%> (+0.02%)`	⬆️
Windows_2	`56.30% <79.26%> (+0.07%)`	⬆️
Windows_3	`37.73% <23.63%> (-0.08%)`	⬇️
Windows_4	`29.91% <6.09%> (-0.04%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2024-10-10T01:33:10Z

❌ Entry Too Long

Entry is 107 characters long, which is 7 characters longer than the maximum allowed length of 100 characters. Please revise your entry to be within the maximum length.

Signed-off-by: Hailong Cui <[email protected]> search bar on left nav Signed-off-by: Hailong Cui <[email protected]> compressed input Signed-off-by: Hailong Cui <[email protected]>

Signed-off-by: Hailong Cui <[email protected]>

Signed-off-by: Hailong Cui <[email protected]> add more unit test Signed-off-by: Hailong Cui <[email protected]>

Signed-off-by: Hailong Cui <[email protected]>

ashwin-pc · 2024-10-11T01:40:11Z

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

+   * @param value search query
+   * @param callback callback function when search is done
+   */
+  doSearch(value: string, callback?: () => void): Promise<ReactNode[]>;


How about run. This works well with the term command too. So it will be command.run(props)

rename this method name to run as well

ashwin-pc · 2024-10-11T02:25:05Z

So here's what i had in mind for that project (And we can impliment a subset of that today for the sake of time)

We have a global command service
We also have a global search bar
The default behaviour of the search bar is to search for applications/pages
if the @ symbol is specified we search for saved objects
If the > is specified, we show the available commands using the command service

Plugins can only register commands. Pages and saved objects are used by default but we dont expose this

This is very similar to how VS code does it and its really elagant.

cc: @kgcreative

If we dont want to go that far right now, lets keep the search bar simple and not expose any API's. This is not something we need to rush and will not be easy to walk back on in the future :)

Signed-off-by: Hailong Cui <[email protected]>

Hailong-am · 2024-10-11T14:55:30Z

So here's what i had in mind for that project (And we can impliment a subset of that today for the sake of time)

We have a global command service

We also have a global search bar

The default behaviour of the search bar is to search for applications/pages

if the @ symbol is specified we search for saved objects

If the > is specified, we show the available commands using the command service

Plugins can only register commands. Pages and saved objects are used by default but we dont expose this

This is very similar to how VS code does it and its really elagant.

cc: @kgcreative

If we dont want to go that far right now, lets keep the search bar simple and not expose any API's. This is not something we need to rush and will not be easy to walk back on in the future :)

Thanks for sharing your thought on this,

saved objects search will come with next PR
we can have some examples/use cases of commands after that we can have it implemented

Signed-off-by: Hailong Cui <[email protected]>

ruanyl · 2024-10-12T02:02:29Z

@Hailong-am From the screen record you share, it seems the highlighted text color is black and the rest are blue, while the blue text looks more like highlighted text to me, is this by design?

Hailong-am · 2024-10-12T02:08:26Z

@Hailong-am From the screen record you share, it seems the highlighted text color is black and the rest are blue, while the blue text looks more like highlighted text to me, is this by design?

That's OUI default highlight behavior and didn't provide a way to customized it. Confirmed with @kgcreative we don't do customization to the default OUI behavior.

Reference: https://oui.opensearch.org/1.16/#/utilities/highlight-and-mark

Signed-off-by: Hailong Cui <[email protected]>

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

SuZhou-Joe · 2024-10-12T04:05:37Z

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

+export const SAVED_OBJECTS_SYMBOL = '@';
+export const COMMANDS_SYMBOL = '>';


It looks a little bit weird to me. Why don't we just aggregate all the results from globalSearchCommands?

That's to filter what kind of searchCommand we want to run. If user input is start with @ like @flights it will only search for saved objects title has flights.

Oh, that's a big vision in the future but seems weird that we implement in this PR. I think these should be done in an enhancement PR if we really have the use case. And we should come up with a prefix registration mechanism if that is really critical.

Anyway, thanks for doing these changes. The search functionality looks super fancy and we even comply the dev tools modal with the search commands.

Agree these should come with future enhancement PR, these are built in symbols for saved objects and commands, so i put it here in advance.

regarding to prefix registration, that's might be long term plan if we plan to support more command types.

SuZhou-Joe

Looks amazing to me and finally we get a global search function in left nav.

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

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

ruanyl · 2024-10-12T04:30:32Z

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

+            iconType="search"
+            color="text"
+            buttonRef={buttonRef}
+            data-test-subj="search-icon"


Nit: could have a more specific test id just in case not collide with others

ruanyl · 2024-10-12T05:46:31Z

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

+export const SearchCommandFilters = {
+  [SearchObjectTypes.PAGES]: (value: string) => {
+    return {
+      match: !value.startsWith(SAVED_OBJECTS_SYMBOL) && !value.startsWith(COMMANDS_SYMBOL),
+      searchValue: value,
+    };
+  },
+  [SearchObjectTypes.SAVED_OBJECTS]: (value: string) => {
+    return {
+      match: value.startsWith(SAVED_OBJECTS_SYMBOL),
+      searchValue: value.replace(SAVED_OBJECTS_SYMBOL, '').trim(),
+    };
+  },
+};


Just for discussion, instead of having these hard coded rules in one place, perhaps we can make it standardized,

// Command interface { id: string; name: string; alias?: string; ... }

For example, the command for saved object search:

{ id: 'savedObjects.open', name: 'asset', alias: '@', }

Then we can do filter based on the current input, if the input starts with asset: or @:, then we only show that matched command.

If the input not start with any command name/alias, the it should call run for all commands with the current input. Each command can decide if it should run the command itself, for example, if savedObjects.open wants to only run when the input starts with asset: or @:, the run function could be:

run(value: string) { if (!value.startsWith('asset:') || !value.startsWith('@:')) return; // ... }

That's make sense, to let each command decide what's the behavior. But for builtin pages and saved objects search command, we don't want to provide the flexibility to customized the alias, name and behavior of whether to run the command or not.

If the input not start with any command name/alias, the it should call run for all commands with the current input.

I think we should search pages only, to search other types it will need explicit type the alias

ruanyl · 2024-10-12T06:19:03Z

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

+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <EuiText size="xs" color="subdued">
+              {i18n.translate('core.globalSearch.pageSection.title', { defaultMessage: 'Pages' })}


This is again just for discussion.

It seems we need a specific pagesSection based on the type just to render the title, can we make it so that it's part of the command interface? Like:

{ id: 'workspacePagesSearchCommand', category: 'Pages', }

Then for all the items returns by this command, we display it under the Pages title. Seems then we don't need type: SearchObjectTypes;

Yeah, the section render could be a general component/method, the only difference is the section header. Refactor it to accept a section header props to make it reusable.

I combine category into type and change type to a object like this

export const SearchCommandTypes = { PAGES: { description: i18n.translate('core.globalSearch.pages.description', { defaultMessage: 'Pages' }), alias: null, }, SAVED_OBJECTS: { description: i18n.translate('core.globalSearch.assets.description', { defaultMessage: 'Assets', }), alias: SAVED_OBJECTS_SYMBOL, }, } as const;

I think header_search_bar should better not maintain page or save_objects, because in the future, there might be alerts and anomaly_detectors, these are registered by plugins, which core should NOT be aware of, so the description and alias should be better registered by the plugin. What do you think?

Let plugin to register it makes more sense. we could add description and alias to GlobalSearchCommand interface that will take precedence. And SearchCommandTypes serve as the builtin for pages and assets.

ruanyl · 2024-10-12T06:52:43Z

src/plugins/dev_tools/public/dev_tools_icon.tsx

+  const [devToolTab, setDevToolTab] = useState('');
+
+  const createOpenDevToolAction = createAction<typeof DEVTOOL_OPEN_ACTION>({


Just sharing my thought, instead of implementing it with Action/Trigger, I'd simply use a global state for the modalVisible and devToolTab, perhaps just a BahaviorSubject.

Just sharing my thought, instead of implementing it with Action/Trigger, I'd simply use a global state for the modalVisible and devToolTab, perhaps just a BahaviorSubject.

sounds like Observable is more lightweight, haven't got a chance to try it.

By comparing uiActions and Observable, they are both able to handle events. the uiActions is a central place to manage events and could have context object associate with. It's more powerful and extensible. I would prefer keep the current implementation.

src/plugins/workspace/public/components/global_search/page_item.tsx

src/plugins/workspace/public/components/global_search/search_pages_command.tsx

Signed-off-by: Hailong Cui <[email protected]>

* search bar on left nav Signed-off-by: Hailong Cui <[email protected]> search bar on left nav Signed-off-by: Hailong Cui <[email protected]> compressed input Signed-off-by: Hailong Cui <[email protected]> * support search dev tools Signed-off-by: Hailong Cui <[email protected]> * enable devtools search only if new home is enabled Signed-off-by: Hailong Cui <[email protected]> * add unit test Signed-off-by: Hailong Cui <[email protected]> add more unit test Signed-off-by: Hailong Cui <[email protected]> * Changeset file for PR #8538 created/updated * fix incorrect variable name Signed-off-by: Hailong Cui <[email protected]> * dismiss tooltip when close popover Signed-off-by: Hailong Cui <[email protected]> * style adjustment Signed-off-by: Hailong Cui <[email protected]> * address review comments Signed-off-by: Hailong Cui <[email protected]> * rename search stategy to searchHandler Signed-off-by: Hailong Cui <[email protected]> * rename to searchCommand Signed-off-by: Hailong Cui <[email protected]> * exclude parent pages Signed-off-by: Hailong Cui <[email protected]> * remove duplicate return Signed-off-by: Hailong Cui <[email protected]> * address review comments Signed-off-by: Hailong Cui <[email protected]> * wording change for strategy Signed-off-by: Hailong Cui <[email protected]> * add icon for data adminstration & settings Signed-off-by: Hailong Cui <[email protected]> --------- Signed-off-by: Hailong Cui <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 479a3fc) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* search bar on left nav search bar on left nav compressed input * support search dev tools * enable devtools search only if new home is enabled * add unit test add more unit test * Changeset file for PR #8538 created/updated * fix incorrect variable name * dismiss tooltip when close popover * style adjustment * address review comments * rename search stategy to searchHandler * rename to searchCommand * exclude parent pages * remove duplicate return * address review comments * wording change for strategy * add icon for data adminstration & settings --------- (cherry picked from commit 479a3fc) Signed-off-by: Hailong Cui <[email protected]> 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>

) * search bar on left nav Signed-off-by: Hailong Cui <[email protected]> search bar on left nav Signed-off-by: Hailong Cui <[email protected]> compressed input Signed-off-by: Hailong Cui <[email protected]> * support search dev tools Signed-off-by: Hailong Cui <[email protected]> * enable devtools search only if new home is enabled Signed-off-by: Hailong Cui <[email protected]> * add unit test Signed-off-by: Hailong Cui <[email protected]> add more unit test Signed-off-by: Hailong Cui <[email protected]> * Changeset file for PR opensearch-project#8538 created/updated * fix incorrect variable name Signed-off-by: Hailong Cui <[email protected]> * dismiss tooltip when close popover Signed-off-by: Hailong Cui <[email protected]> * style adjustment Signed-off-by: Hailong Cui <[email protected]> * address review comments Signed-off-by: Hailong Cui <[email protected]> * rename search stategy to searchHandler Signed-off-by: Hailong Cui <[email protected]> * rename to searchCommand Signed-off-by: Hailong Cui <[email protected]> * exclude parent pages Signed-off-by: Hailong Cui <[email protected]> * remove duplicate return Signed-off-by: Hailong Cui <[email protected]> * address review comments Signed-off-by: Hailong Cui <[email protected]> * wording change for strategy Signed-off-by: Hailong Cui <[email protected]> * add icon for data adminstration & settings Signed-off-by: Hailong Cui <[email protected]> --------- Signed-off-by: Hailong Cui <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

github-actions bot added the all-star-contributor label Oct 10, 2024

Hailong-am changed the title [] [Workspace] Add search bar into left nav Oct 10, 2024

github-actions bot added the failed changeset label Oct 10, 2024

opensearch-changeset-bot bot added a commit to Hailong-am/OpenSearch-Dashboards that referenced this pull request Oct 10, 2024

Changeset file for PR opensearch-project#8538 created/updated

80fa39b

github-actions bot removed the failed changeset label Oct 10, 2024

Hailong-am added 4 commits October 10, 2024 11:44

search bar on left nav

fbd86d5

Signed-off-by: Hailong Cui <[email protected]> search bar on left nav Signed-off-by: Hailong Cui <[email protected]> compressed input Signed-off-by: Hailong Cui <[email protected]>

support search dev tools

37cd6f6

Signed-off-by: Hailong Cui <[email protected]>

enable devtools search only if new home is enabled

3a7a107

Signed-off-by: Hailong Cui <[email protected]>

add unit test

024f2fb

Signed-off-by: Hailong Cui <[email protected]> add more unit test Signed-off-by: Hailong Cui <[email protected]>

Hailong-am force-pushed the search_ branch from 80fa39b to 024f2fb Compare October 10, 2024 03:45

opensearch-changeset-bot bot and others added 2 commits October 10, 2024 03:47

Changeset file for PR opensearch-project#8538 created/updated

4a1c182

fix incorrect variable name

96b2e92

Signed-off-by: Hailong Cui <[email protected]>

Hailong-am changed the title ~~[Workspace] Add search bar into left nav~~ [Workspace] Add global search bar into left nav Oct 10, 2024

Hailong-am added backport 2.x workspace labels Oct 10, 2024

Hailong-am marked this pull request as ready for review October 10, 2024 05:00

Hailong-am requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, zhongnansu, manasvinibs and ZilongX as code owners October 10, 2024 05:00

ashwin-pc reviewed Oct 11, 2024

View reviewed changes

Hailong-am added 4 commits October 11, 2024 16:09

rename search stategy to searchHandler

7f94dbc

Signed-off-by: Hailong Cui <[email protected]>

Merge remote-tracking branch 'upstream/main' into search_

fb673d1

rename to searchCommand

ed21641

Signed-off-by: Hailong Cui <[email protected]>

Merge remote-tracking branch 'upstream/main' into search_

2d58cf0

exclude parent pages

ea06fd1

Signed-off-by: Hailong Cui <[email protected]>

Hailong-am added 2 commits October 12, 2024 11:20

remove duplicate return

600b803

Signed-off-by: Hailong Cui <[email protected]>

Merge remote-tracking branch 'upstream/main' into search_

b5f66b0

SuZhou-Joe reviewed Oct 12, 2024

View reviewed changes

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss Outdated Show resolved Hide resolved

SuZhou-Joe reviewed Oct 12, 2024

View reviewed changes

SuZhou-Joe previously approved these changes Oct 12, 2024

View reviewed changes

ruanyl reviewed Oct 12, 2024

View reviewed changes

Hailong-am added 2 commits October 12, 2024 17:11

address review comments

2d13afa

Signed-off-by: Hailong Cui <[email protected]>

Merge remote-tracking branch 'upstream/main' into search_

b918836

Hailong-am dismissed SuZhou-Joe’s stale review via b918836 October 12, 2024 09:11

Hailong-am added 2 commits October 12, 2024 17:21

wording change for strategy

47f45e8

Signed-off-by: Hailong Cui <[email protected]>

add icon for data adminstration & settings

e9fb891

Signed-off-by: Hailong Cui <[email protected]>

SuZhou-Joe approved these changes Oct 14, 2024

View reviewed changes

ruanyl approved these changes Oct 14, 2024

View reviewed changes

Hailong-am merged commit 479a3fc into opensearch-project:main Oct 14, 2024
68 checks passed

opensearch-trigger-bot bot mentioned this pull request Oct 14, 2024

[Backport 2.x] [Workspace] Add global search bar into left nav #8580

Merged

ananzh added the v2.18.0 label Oct 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Workspace] Add global search bar into left nav #8538

[Workspace] Add global search bar into left nav #8538

Hailong-am commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Oct 10, 2024

github-actions bot commented Oct 10, 2024

codecov bot commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Oct 10, 2024

ashwin-pc Oct 11, 2024

Hailong-am Oct 11, 2024

ashwin-pc commented Oct 11, 2024 •

edited

Loading

Hailong-am commented Oct 11, 2024

ruanyl commented Oct 12, 2024 •

edited

Loading

Hailong-am commented Oct 12, 2024 •

edited

Loading

SuZhou-Joe Oct 12, 2024

Hailong-am Oct 12, 2024

SuZhou-Joe Oct 12, 2024 •

edited

Loading

Hailong-am Oct 12, 2024 •

edited

Loading

SuZhou-Joe left a comment •

edited

Loading

ruanyl Oct 12, 2024

ruanyl Oct 12, 2024

Hailong-am Oct 12, 2024

Hailong-am Oct 12, 2024

ruanyl Oct 12, 2024

Hailong-am Oct 12, 2024 •

edited

Loading

Hailong-am Oct 12, 2024

ruanyl Oct 14, 2024

Hailong-am Oct 14, 2024

ruanyl Oct 12, 2024

Hailong-am Oct 12, 2024

Hailong-am Oct 14, 2024 •

edited

Loading

		export const SAVED_OBJECTS_SYMBOL = '@';
		export const COMMANDS_SYMBOL = '>';

		const [devToolTab, setDevToolTab] = useState('');

		const createOpenDevToolAction = createAction<typeof DEVTOOL_OPEN_ACTION>({

[Workspace] Add global search bar into left nav #8538

[Workspace] Add global search bar into left nav #8538

Conversation

Hailong-am commented Oct 10, 2024 • edited Loading

Description

Issues Resolved

Screenshot

Testing the changes

Changelog

Check List

github-actions bot commented Oct 10, 2024

❌ Empty Changelog Section

github-actions bot commented Oct 10, 2024

❌ Empty Changelog Section

codecov bot commented Oct 10, 2024 • edited Loading

Codecov Report

github-actions bot commented Oct 10, 2024

❌ Entry Too Long

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ashwin-pc commented Oct 11, 2024 • edited Loading

Hailong-am commented Oct 11, 2024

ruanyl commented Oct 12, 2024 • edited Loading

Hailong-am commented Oct 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SuZhou-Joe Oct 12, 2024 • edited Loading

Choose a reason for hiding this comment

Hailong-am Oct 12, 2024 • edited Loading

Choose a reason for hiding this comment

SuZhou-Joe left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hailong-am Oct 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hailong-am Oct 14, 2024 • edited Loading

Choose a reason for hiding this comment

Hailong-am commented Oct 10, 2024 •

edited

Loading

codecov bot commented Oct 10, 2024 •

edited

Loading

ashwin-pc commented Oct 11, 2024 •

edited

Loading

ruanyl commented Oct 12, 2024 •

edited

Loading

Hailong-am commented Oct 12, 2024 •

edited

Loading

SuZhou-Joe Oct 12, 2024 •

edited

Loading

Hailong-am Oct 12, 2024 •

edited

Loading

SuZhou-Joe left a comment •

edited

Loading

Hailong-am Oct 12, 2024 •

edited

Loading

Hailong-am Oct 14, 2024 •

edited

Loading