Feat/search/algolia

[griest024]

PR Checklist

• Commit message follows our contributing guidelines
• Tests added/updated (for bug fixes/features)
• Documentation added/updated (for bug fixes/features)

PR Type

• Bug fix
• Feature
• Style update
• Refactor
• Test
• Build
• CI
• Docs
• Performance
• Other (please describe)

Current behavior

Fixes: #3723
Fixes: #3804

New behavior

Breaking change?

• Yes
• No

Additional context

[xelaint]

@griest024

• Retrieve the package that the search result is from and display it under each result
• No results found div should only be visible if search field has input and no results are found

[griest024]

@xelaint the text color of highlighted items doesn't switch

[griest024]

@griest024

* [ ]  Retrieve the package that the search result is from and display it under each result

* [ ]  `No results found` div should only be visible if search field has input and no results are found

the package will have to wait for #4178 but I fixed the other issue

[griest024]

@xelaint I've added the package to the API search results. It doesn't look great so it will need some styling love from you

[xelaint]

The first five results come from the cart package docs, but it's not really clear. Can the package name also be added to these results?

[xelaint]

Doesn't seem like search history is working. I searched up cart things before this screen. Closed the modal, reopened it, and these are the results that are displayed. When I inspect the code, it seems like these are displayed via the search-results, not search-history.

[griest024]

The first five results come from the cart package docs, but it's not really clear. Can the package name also be added to these results?

hm should @daffodil/ssr instead show as Overview | @daffodil/ssr then?

[xelaint]

The first five results come from the cart package docs, but it's not really clear. Can the package name also be added to these results?

hm should @daffodil/ssr instead show as Overview | @daffodil/ssr then?

Yeah, I think that makes sense?

[griest024]

Doesn't seem like search history is working. I searched up cart things before this screen. Closed the modal, reopened it, and these are the results that are displayed. When I inspect the code, it seems like these are displayed via the search-results, not search-history.

Its a bit tricky. Searching when typing is an incremental search. Using history from incremental results in this:

which doesn't seem like what we want. When should a search be added to the history list?

[xelaint]

Doesn't seem like search history is working. I searched up cart things before this screen. Closed the modal, reopened it, and these are the results that are displayed. When I inspect the code, it seems like these are displayed via the search-results, not search-history.

Its a bit tricky. Searching when typing is an incremental search. Using history from incremental results in this: which doesn't seem like what we want. When should a search be added to the history list?

I think search history should only populate for results that have been navigated to?

[xelaint]

Accessibility considerations to-do (Elain):

• ARIA support
• Check screen reader announcements

[griest024]

@xelaint okay package guides now show the package. search history should be fixed as well.

[xelaint]

@griest024 There's still a list of results (that's not part of search hisory) that show up without any input.

Also, when I search "test" and click on the provideDaffSearchResultKindFactories result, I expected provideDaffSearchResultKindFactories to be in the recent results, not the word "test".

[griest024]

@griest024 There's still a list of results (that's not part of search hisory) that show up without any input.

Also, when I search "test" and click on the provideDaffSearchResultKindFactories result, I expected provideDaffSearchResultKindFactories to be in the recent results, not the word "test".

Ohh I think I misunderstood. Is there just a "recently clicked on results" list, or is that in addition to the recent queries list?

[xelaint]

@griest024 There's still a list of results (that's not part of search hisory) that show up without any input.
Also, when I search "test" and click on the provideDaffSearchResultKindFactories result, I expected provideDaffSearchResultKindFactories to be in the recent results, not the word "test".

Ohh I think I misunderstood. Is there just a "recently clicked on results" list, or is that in addition to the recent queries list?

There isn't a separate UI for recent queries vs recently clicked on. I think we just want recently clicked, not recent queries.

The screenshot above seems like it's showing the recent queries using the <div class="daffio-docs-search-history"> container, and then the bottom portion (starting from "Testing") is using this block:

@let results = docsResults$ | async;
@let loading = loading$ | async;
@if (results?.length > 0 || loading) {
	<ul class="daffio-docs-search-results" role="listbox"></ul>

This block should only ever be visible if the search field has a value and results related to that value.

[griest024]

@xelaint okay I've made updates that I think are what you want. We should probably move the result item to its own component

[xelaint]

@griest024 I tried to move the search results and search history to separate components but couldn't get the ActiveDescendantKeyManager to work properly.

Can we also pass in the enter key to store result?