Search page cleanup

[ChristopherChudzicki]

What are the relevant tickets?

For #640

Description (What does it do?)

This PR makes several changes to the search page:

1. Removes the "Active Facets" display above facet list. (These chips have been removed.)
2. Now, if a facet is active, its checkbox should always be shown.
   • Facets options are only included in the API results if their result count is nonzero. So if an active facet corresponds to zero results, it previously was not shown. This situation can occur by toggling a facet on, then entering query text. For example: https://mitopen-rc.odl.mit.edu/search/?q=quaternions&t=Visual+Arts
3. The results title count has been removed. (No more '524 results for "Physics".)
4. "Clear all facets" no longer clears the resource tab selection.
5. Adds "Offered by" facet.
6. Facets now use API query names ("department" not "d")
7. Facets now work even if they aren't explicitly included in UI.
   • e.g., http://localhost:8063/search?platform=mitx

Screenshots (if appropriate):

How can this be tested?

1. Visit http://localhost:8063/search

2. Try:

   • click resource tabs
   • entering query text
   • toggling left sidebar filters on and off
   • using the "Clear all" filters button

   Things to look out for

   • URL bar should use "real" API parameter names ("department" not "d")

3. Append a filter not included in the UI to the URL; for example ?platform=mitxonline or (&platform=mitxonline). The results should update.

Additional Context

[codecov]

Codecov Report

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

Project coverage is 75.18%. Comparing base (398ad13) to head (59b4be8).
Report is 2 commits behind head on main.

❗ Current head 59b4be8 differs from pull request most recent head be24377. Consider uploading reports for the commit be24377 to get more accurate results

Files	Patch %	Lines
frontends/api/src/hooks/learningResources/index.ts	20.00%	4 Missing ⚠️
...ends/api/src/hooks/learningResources/keyFactory.ts	0.00%	2 Missing ⚠️
frontends/api/src/test-utils/urls.ts	33.33%	2 Missing ⚠️
...tends/mit-open/src/pages/SearchPage/SearchPage.tsx	95.83%	0 Missing and 2 partials ⚠️
frontends/api/src/clients.ts	50.00%	1 Missing ⚠️
.../api/src/test-utils/factories/learningResources.ts	50.00%	1 Missing ⚠️
...it-open/src/components/CardRowList/CardRowList.tsx	50.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #675      +/-   ##
==========================================
+ Coverage   72.58%   75.18%   +2.59%     
==========================================
  Files         281      260      -21     
  Lines       12581    11721     -860     
  Branches     2184     2030     -154     
==========================================
- Hits         9132     8812     -320     
+ Misses       3265     2727     -538     
+ Partials      184      182       -2     

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

[ChristopherChudzicki]

@abeglova Maybe the FacetDisplay component should handle this? OCW does seem to add-in active facets with zero count, but I don't think it's in course-search-utils currently?

[abeglova]

I agree, I think it makes sense for this to be moved to FacetDisplay in course-search-utils.

[ChristopherChudzicki]

Sounds good. I'd like to do that separately from mitodl/course-search-utils#78, but I can do it before merging this PR.

mitodl/course-search-utils#78 is big enough already, and I'd like replace the Enzyme-based facet tests if I'm going to be adding more there.

[abeglova]

This works great!

I agree with you that includeActiveZerosInBuckets should be moved to course-search-utils.

Additionally it looks like you implemented useValidatedSearchParams in course-search-utils but are not using it in this pr - I can search for an invalid param such as http://localhost:8063/search/?topic=monkey and it adds monkey to the topics list

[abeglova]

I agree, I think it makes sense for this to be moved to FacetDisplay in course-search-utils.

[ChristopherChudzicki]

Additionally it looks like you implemented useValidatedSearchParams in course-search-utils but are not using it in this pr - I can search for an invalid param such as http://localhost:8063/search/?topic=monkey and it adds monkey to the topics list

useValidatedSearchParams isn't actually exported from course-search-utils. But it is used in implementing useResourceSearchParams and useContentFileSearchParams. For example:

const useResourceSearchParams = ({
  searchParams,
  setSearchParams,
  facets = [],
  onFacetsChange
}: UseValidatedSearchParamsProps<ResourceSearchRequest>) => {
  return useValidatedSearchParams<ResourceSearchRequest>({
    searchParams,
    setSearchParams,
    facets,
    validators: resourceSearchValidators,
    onFacetsChange
  })
}

I can search for an invalid param such as http://localhost:8063/search/?topic=monkey and it adds monkey to the topics list

The validation is based on the OpenAPI spec, by which "monkey" is a valid topic. (For topic, the spec just says "string"; department and platform, we have an enum; similarly https://mitopen-rc.odl.mit.edu/api/v1/learning_resources_search/?topic=monkey is a 200 response with zero hits, whereas https://mitopen-rc.odl.mit.edu/api/v1/learning_resources_search/?department=monkey is a 400.) My preference would be to continue validating based only on the OpenAPI spec...It's not detrimental to the UI (since filter choices are populated off the API response) and keeps things simple.

[Ferdi]

@ChristopherChudzicki if it's not too late can we change the order of tabs to all, courses, programs, podcasts ?

[ChristopherChudzicki]

@ChristopherChudzicki if it's not too late can we change the order of tabs to all, courses, programs, podcasts ?