Add a Search Page

[ChristopherChudzicki]

What are the relevant tickets?

Closes #490

Description (What does it do?)

This PR adds a search page. We don't have final designs for this, but I used https://www.figma.com/proto/bRb19HaucO5loHGSU81nFG/MIT_Prototype?page-id=0%3A1&type=design&node-id=9-6102&viewport=4023%2C1145%2C0.25&t=6VyDzTtHVzsZ3Nyv-1&scaling=scale-down&starting-point-node-id=48%3A2446&show-proto-sidebar=1 as inspiration.

Note: After discussing with @Ferdi, only "Topics" facet is supported for now (and "Resource Type" via the tabs).

Screenshots (if appropriate):

How can this be tested?

1. Ensure you have a working search index https://github.com/mitodl/mit-open?tab=readme-ov-file#enabling-searching-the-course-catalog-on-opensearch
2. Visit http://localhost:8063/; enter something in the searchbox and hit enter.
3. You should now be on the searchpage. Try facets in sidebar, tabs for resource_type facet, query text, and pagination.
   • results should update appropriately
   • URL should update appropriately

[codecov]

Codecov Report

Attention: Patch coverage is 92.62295% with 9 lines in your changes are missing coverage. Please review.

Project coverage is 75.00%. Comparing base (48979c3) to head (87c557b).
Report is 2 commits behind head on main.

Files	Patch %	Lines
...ends/api/src/hooks/learningResources/keyFactory.ts	0.00%	3 Missing ⚠️
frontends/api/src/test-utils/urls.ts	62.50%	3 Missing ⚠️
frontends/api/src/hooks/learningResources/index.ts	33.33%	2 Missing ⚠️
frontends/api/src/clients.ts	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #618      +/-   ##
==========================================
+ Coverage   74.81%   75.00%   +0.18%     
==========================================
  Files         245      247       +2     
  Lines       11204    11308     +104     
  Branches     1947     1962      +15     
==========================================
+ Hits         8382     8481      +99     
- Misses       2648     2653       +5     
  Partials      174      174              

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

[jonkafton]

This really does work very nicely. The only thing I noticed while testing the UI was that the search clear doesn't reset results (or clear the URL search param).

There are couple of small layout issues for mobile / smaller screen width. I appreciate we are working off designs for desktop. Do we have plans for mobile at this point?

[shanbady]

works like it should 👍

[Ferdi]

The only thing I noticed while testing the UI was that the search clear doesn't reset results (or clear the URL search param).

I think we should try to fix this in this PR if it's an issue.

We can deal with perfecting mobile later.

[jonkafton]

It would be good to find a solution that doesn't depend on classnames in dependencies. I do see the dilemma - how to write course-search-utils that are customizable, but still largely hold their layout and base styles without having to pass so many components in that lose code reuse.

If course-search-utils also used styled components, we could provide them to the css template literal for interpolation (we discussed that a bit the other day). The benefit would be that course-search-utils API is defined by its exports and not additionally by its classnames. Not one for this PR, but food for thought.

[jonkafton]

The only thing I noticed while testing the UI was that the search clear doesn't reset results (or clear the URL search param).

I think we should try to fix this in this PR if it's an issue.

Retested after @ChristopherChudzicki's last change - works perfectly!