[Workspace] Add global search bar into left nav #8538
Conversation
❌ Empty Changelog SectionThe 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. |
❌ Empty Changelog SectionThe 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 ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #8538 +/- ##
==========================================
- Coverage 60.95% 60.94% -0.01%
==========================================
Files 3777 3786 +9
Lines 89641 89904 +263
Branches 14046 14091 +45
==========================================
+ Hits 54643 54796 +153
- Misses 31584 31692 +108
- Partials 3414 3416 +2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
❌ Entry Too LongEntry 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]>
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]>
Hailong-am
changed the title
Hailong-am
requested review from
ananzh,
kavilla,
AMoo-Miki,
ashwin-pc,
joshuarrrr,
abbyhu2000,
zengyan-amazon,
zhongnansu,
manasvinibs and
ZilongX
as code owners
Hailong-am
requested review from
Flyingliuhub,
curq,
bandinib-amzn,
SuZhou-Joe,
ruanyl,
BionIT,
xinruiba,
zhyuanqi,
mengweieric,
LDrago27,
virajsanghvi,
sejli,
joshuali925 and
huyaboo
as code owners
Signed-off-by: Hailong Cui <[email protected]>
Signed-off-by: Hailong Cui <[email protected]>
src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
Outdated
Show resolved
Hide resolved
| const [isPopoverOpen, setIsPopoverOpen] = useState(false); | ||
| const [panelWidth, setPanelWidth] = useState(0); | ||
| const inputRef = (node: HTMLElement | null) => setInputEl(node); | ||
| const [inputEl, setInputEl] = useState<HTMLElement | null>(null); |
There was a problem hiding this comment.
Can we use ref object to store the button ref? There is a extra rendering after setInputEl called.
There was a problem hiding this comment.
This is by intention, inputEl is used as dependency for resize.
const onResize = useCallback(() => {
if (inputEl) {
const width = inputEl.getBoundingClientRect().width;
setPanelWidth(width);
}
}, [inputEl, setPanelWidth]);There was a problem hiding this comment.
Do we need to regenerate onResize after every inputEl change? I'm prefer using code below if doesn't update every time.
const inputElRef = useRef<HTMLElement | null>(null);
const inputRef = (node: HTMLElement | null) => inputElRef.current = node;
const onResize = useCallback(() => {
if (inputElRef.current) {
const width = inputElRef.current.getBoundingClientRect().width;
setPanelWidth(width);
}
}, []);There was a problem hiding this comment.
Found that we can remove onResize as it will adjust the panel width when focus.
and changed to const inputElRef = useRef<HTMLElement | null>(null); as well.
Signed-off-by: Hailong Cui <[email protected]>
| /** | ||
| * @experimental | ||
| */ | ||
| export interface GlobalSearchStrategy { |
There was a problem hiding this comment.
Can we not use search strategy as the name? We already have a concept of search strategy in the application. This is used for the actual search queries. Lets call these commands. Here is a really good extensible model that VS code uses for their global search. https://code.visualstudio.com/api/references/contribution-points#contributes.commands
There was a problem hiding this comment.
rename it to searchCommand
| * @param value search query | ||
| * @param callback callback function when search is done | ||
| */ | ||
| doSearch(value: string, callback?: () => void): Promise<ReactNode[]>; |
There was a problem hiding this comment.
How about run. This works well with the term command too. So it will be command.run(props)
There was a problem hiding this comment.
rename this method name to run as well
|
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)
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]>
Signed-off-by: Hailong Cui <[email protected]>
Thanks for sharing your thought on this,
|
Signed-off-by: Hailong Cui <[email protected]>
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
Check List
yarn test:jestyarn test:jest_integration