Add new results landing page for website search

[zelinh]

Description

Add new results landing page for website search for documentation website.
This will be a separate search results page besides than the current dropdown menu.
The page will have options to do advanced search such as version selector and documentation-only search.
The backend API support is pending and will be onboarded pretty soon.

Issues Resolved

Part of these community request. opensearch-project/project-website-search#43 (comment)
Part of opensearch-project/project-website-search#65

Version

All versions will be backported.

Checklist

• By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license and subject to the Developers Certificate of Origin.
  For more information on following Developer Certificate of Origin and signing off your commits, please check here.

[github-actions]

Thank you for submitting your PR. The PR states are In progress (or Draft) -> Tech review -> Doc review -> Editorial review -> Merged.

Before you submit your PR for doc review, make sure the content is technically accurate. If you need help finding a tech reviewer, tag a maintainer.

When you're ready for doc review, tag the assignee of this PR. The doc reviewer may push edits to the PR directly or leave comments and editorial suggestions for you to address (let us know in a comment if you have a preference). The doc reviewer will arrange for an editorial review.

[epugh]

cc @smacrakis

[peterzhuamazon]

Hi @zelinh

A few observations:

• Add more space between each result in details page, or at least add a horizontal line to separate them
• Make title of each entry bold text?
• The simple search drop down list have each entry started with its category, such as News OpenSearch 2.16 while the details page does not.

Thanks.

[peterzhuamazon]

A few more nitpik for this:

1. When switching versions from 2.x to 1.3, search bar text does not carry-over.
2. When switching to 1.3 versions I can still find 2.16 related news.
3. Change the checkbox of the category to radio button to indicate it is single-select only.

[kolchfa-aws]

Thank you, @zelinh!

In terms of UI, I would change the following:

• Refine Your Search -> Filter results
• Remove “Category:” heading
• Tab over the 2nd and 3rd checkboxes so All becomes parent and Documentation and News become children. Functionally, checking All checks Documentation and News. As soon as one of them is unchecked, All becomes unchecked.
• Remove the “Start searching” button. Instead, listen to checking and unchecking of the checkboxes and update the results accordingly.
• Change the placeholder text “Search from results page” to just the magnifying glass icon.
• Search Results for “…” -> Search results for “…”
• Augment the results with the category (For example, if you search for A, the results can be A API | Documentation or How to use A | News

Functionality nice-to-haves:

• Add the number of results in parentheses, after the checkbox so it looks like
  [] All (5)
  [] Documentation (3)
  [] News (2)
• Add a sort dropdown so users can sort by relevance or date
• Paginate search results

[zelinh]

Updated the PR to accommodate the suggestions:

• Add breadcrumb to the search results and bold the results title.
• Add break line between results.
• Remove the Start Searching button and trigger search event based on Enter press in input box or checkbox change.
• Enable checkbox hierarchy; checking All will check all children checkboxes.
• Update wording and title.
• Add magnifying glass to the input field.

@peterzhuamazon @kolchfa-aws Please help take a look here. Thanks.

[peterzhuamazon]

Updated the PR to accommodate the suggestions:

* Add breadcrumb to the search results and bold the results title.

* Add break line between results.

* Remove the `Start Searching` button and trigger search event based on `Enter` press in input box or checkbox change.

* Enable checkbox hierarchy; checking `All` will check all children checkboxes.

* Update wording and title.

* Add magnifying glass to the input field.

@peterzhuamazon @kolchfa-aws Please help take a look here. Thanks.

Looks better now. Still miss radiobutton.

[kolchfa-aws]

I think a checkbox group works better because radio buttons mean exclusive OR. Checkboxes imply regular OR (users can check one or more checkboxes).

[kolchfa-aws]

@zelinh Thanks for updating! A couple of things:

• Change the exclamation point to a period at the end of "No results found!" -> No results found.
• I think when everything is unchecked the results should say "No results found."
• Move the child checkboxes to the right a little so All is clearly the parent

Thanks!

[zelinh]

@zelinh Thanks for updating! A couple of things:

• Change the exclamation point to a period at the end of "No results found!" -> No results found.
• I think when everything is unchecked the results should say "No results found."
• Move the child checkboxes to the right a little so All is clearly the parent

Thanks!

Updated with new commits. Please help review again. Thanks!

[kolchfa-aws]

LGTM. Thank you, @zelinh!

[peterzhuamazon]

Thanks @zelinh !