diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx index ecc1046229..e1ee8e71a6 100644 --- a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx +++ b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx @@ -514,7 +514,9 @@ const SearchDisplay: React.FC = ({ ? [activeTab.resource_category] : undefined, ...requestParams, - aggregations: facetNames as LRSearchRequest["aggregations"], + aggregations: (facetNames || []).concat([ + "resource_category", + ]) as LRSearchRequest["aggregations"], offset: (page - 1) * PAGE_SIZE, } }, [ diff --git a/frontends/mit-open/src/pages/ChannelPage/ChannelSearch.tsx b/frontends/mit-open/src/pages/ChannelPage/ChannelSearch.tsx index 96cd0b3b7d..aba1fdadc2 100644 --- a/frontends/mit-open/src/pages/ChannelPage/ChannelSearch.tsx +++ b/frontends/mit-open/src/pages/ChannelPage/ChannelSearch.tsx @@ -50,6 +50,7 @@ const StyledSearchInput = styled(SearchInput)` const FACETS_BY_CHANNEL_TYPE: Record = { [ChannelTypeEnum.Topic]: [ "free", + "resource_type", "certification_type", "learning_format", "offered_by", @@ -57,6 +58,7 @@ const FACETS_BY_CHANNEL_TYPE: Record = { ], [ChannelTypeEnum.Department]: [ "free", + "resource_type", "certification_type", "topic", "learning_format", @@ -64,6 +66,7 @@ const FACETS_BY_CHANNEL_TYPE: Record = { ], [ChannelTypeEnum.Unit]: [ "free", + "resource_type", "topic", "certification_type", "learning_format", @@ -86,9 +89,10 @@ const getFacetManifestForChannelType = ( channelType: ChannelTypeEnum, offerors: Record, constantSearchParams: Facets, + resourceCategory: string | null, ): FacetManifest => { const facets = FACETS_BY_CHANNEL_TYPE[channelType] || [] - return getFacetManifest(offerors) + return getFacetManifest(offerors, resourceCategory) .filter( (facetSetting) => !Object.keys(constantSearchParams).includes(facetSetting.name) && @@ -114,6 +118,7 @@ const ChannelSearch: React.FC = ({ }, [offerorsQuery.data?.results]) const [searchParams, setSearchParams] = useSearchParams() + const resourceCategory = searchParams.get("resource_category") const facetManifest = useMemo( () => @@ -121,8 +126,9 @@ const ChannelSearch: React.FC = ({ channelType, offerors, constantSearchParams, + resourceCategory, ), - [offerors, channelType, constantSearchParams], + [offerors, channelType, constantSearchParams, resourceCategory], ) const setPage = useCallback( @@ -154,7 +160,7 @@ const ChannelSearch: React.FC = ({ } }), ), - ).concat(["resource_category"]) as UseResourceSearchParamsProps["facets"] + ) as UseResourceSearchParamsProps["facets"] const { hasFacets, diff --git a/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx b/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx index 86f2f1831d..2ded93dd1c 100644 --- a/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx +++ b/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx @@ -121,6 +121,7 @@ describe("SearchPage", () => { "offered_by", "professional", "resource_category", + "resource_type", "topic", ]) expect(Object.fromEntries(apiSearchParams.entries())).toEqual( @@ -168,6 +169,37 @@ describe("SearchPage", () => { expect(location.current.search).toBe("?topic=Physics") }) + test("Shows Learning Resource facet only if learning materials tab is selected", async () => { + setMockApiResponses({ + search: { + count: 700, + metadata: { + aggregations: { + resource_category: [ + { key: "course", doc_count: 100 }, + { key: "learning_material", doc_count: 200 }, + ], + resource_type: [ + { key: "course", doc_count: 100 }, + { key: "podcast", doc_count: 100 }, + { key: "video", doc_count: 100 }, + ], + }, + suggestions: [], + }, + }, + }) + renderWithProviders() + + const facetsContainer = screen.getByTestId("facets-container") + expect(within(facetsContainer).queryByText("Resource Type")).toBeNull() + const tabLearningMaterial = screen.getByRole("tab", { + name: /Learning Material/, + }) + await user.click(tabLearningMaterial) + await within(facetsContainer).findByText("Resource Type") + }) + test("Submitting text updates URL", async () => { setMockApiResponses({}) const { location } = renderWithProviders(, { url: "?q=meow" }) diff --git a/frontends/mit-open/src/pages/SearchPage/SearchPage.tsx b/frontends/mit-open/src/pages/SearchPage/SearchPage.tsx index 176451f146..bb1cfed5be 100644 --- a/frontends/mit-open/src/pages/SearchPage/SearchPage.tsx +++ b/frontends/mit-open/src/pages/SearchPage/SearchPage.tsx @@ -54,10 +54,13 @@ const SearchField = styled(SearchInput)` } ` +const LEARNING_MATERIAL = "learning_material" + export const getFacetManifest = ( offerors: Record, + resourceCategory: string | null, ) => { - return [ + const mainfest = [ { type: "group", name: "free", @@ -69,6 +72,18 @@ export const getFacetManifest = ( }, ], }, + { + name: "resource_type", + title: "Resource Type", + type: "static", + expandedOnLoad: true, + preserveItems: true, + labelFunction: (key: string) => + key + .split("_") + .map((word) => capitalize(word)) + .join(" "), + }, { name: "certification_type", title: "Certificate", @@ -113,10 +128,17 @@ export const getFacetManifest = ( labelFunction: (key: string) => getDepartmentName(key) || key, }, ] + + //Only display the resource_type facet if the resource_category is learning_material + if (resourceCategory !== LEARNING_MATERIAL) { + mainfest.splice(1, 1) + } + + return mainfest } const facetNames = [ - "resource_category", + "resource_type", "certification_type", "learning_format", "department", @@ -128,18 +150,21 @@ const facetNames = [ const constantSearchParams = {} -const useFacetManifest = () => { +const useFacetManifest = (resourceCategory: string | null) => { const offerorsQuery = useOfferorsList() const offerors = useMemo(() => { return _.keyBy(offerorsQuery.data?.results ?? [], (o) => o.code) }, [offerorsQuery.data?.results]) - const facetManifest = useMemo(() => getFacetManifest(offerors), [offerors]) + const facetManifest = useMemo( + () => getFacetManifest(offerors, resourceCategory), + [offerors, resourceCategory], + ) return facetManifest } const SearchPage: React.FC = () => { - const facetManifest = useFacetManifest() const [searchParams, setSearchParams] = useSearchParams() + const facetManifest = useFacetManifest(searchParams.get("resource_category")) const setPage = useCallback( (newPage: number) => {