Add a Search Page

frontends/api/src/clients.ts

@@ -4,6 +4,7 @@ import {
   TopicsApi,
   ArticlesApi,
   ProgramLettersApi,
+  LearningResourcesSearchApi,
 } from "./generated/api"
 import axiosInstance from "./axios"
 
@@ -14,6 +15,12 @@ const learningResourcesApi = new LearningResourcesApi(
   axiosInstance,
 )
 
+const learningResourcesSearchApi = new LearningResourcesSearchApi(
+  undefined,
+  BASE_PATH,
+  axiosInstance,
+)
+
 const learningpathsApi = new LearningpathsApi(
   undefined,
   BASE_PATH,
@@ -35,4 +42,5 @@ export {
   topicsApi,
   articlesApi,
   programLettersApi,
+  learningResourcesSearchApi,
 }

frontends/api/src/hooks/learningResources/index.ts

@@ -17,6 +17,7 @@ import type {
   LearningPathRelationshipRequest,
   MicroLearningPathRelationship,
   LearningResource,
+  LearningResourcesSearchApiLearningResourcesSearchRetrieveRequest as LRSearchRequest,
 } from "../../generated"
 import learningResources, { invalidateResourceQueries } from "./keyFactory"
 
@@ -197,6 +198,16 @@ const useLearningpathRelationshipDestroy = () => {
   })
 }
 
+const useLearningResourcesSearch = (
+  params: LRSearchRequest,
+  opts?: Pick<UseQueryOptions, "keepPreviousData">,
+) => {
+  return useQuery({
+    ...learningResources.search(params),
+    ...opts,
+  })
+}
+
 export {
   useLearningResourcesList,
   useLearningResourcesDetail,
@@ -210,4 +221,5 @@ export {
   useLearningpathRelationshipMove,
   useLearningpathRelationshipCreate,
   useLearningpathRelationshipDestroy,
+  useLearningResourcesSearch,
 }

frontends/api/src/hooks/learningResources/keyFactory.ts

@@ -2,6 +2,7 @@ import type { QueryClient, Query } from "@tanstack/react-query"
 import {
   learningResourcesApi,
   learningpathsApi,
+  learningResourcesSearchApi,
   topicsApi,
 } from "../../clients"
 import axiosInstance from "../../axios"
@@ -13,6 +14,7 @@ import type {
   PaginatedLearningResourceList,
   LearningResource,
   PaginatedLearningPathRelationshipList,
+  LearningResourcesSearchApiLearningResourcesSearchRetrieveRequest as LRSearchRequest,
 } from "../../generated"
 import { createQueryKeys } from "@lukemorales/query-key-factory"
 
@@ -68,6 +70,15 @@ const learningResources = createQueryKeys("learningResources", {
       }),
     },
   },
+  search: (params: LRSearchRequest) => {
+    return {
+      queryKey: [params],
+      queryFn: () =>
+        learningResourcesSearchApi
+          .learningResourcesSearchRetrieve(params)
+          .then((res) => res.data),
+    }
+  },
 })
 
 const listHasResource =

frontends/api/src/test-utils/urls.ts

@@ -67,4 +67,15 @@ const programLetters = {
   details: (id: string) => `/api/v1/program_letters/${id}/`,
 }
 
-export { learningResources, topics, learningPaths, articles, programLetters }
+const search = {
+  resources: () => "/api/v1/learning_resources_search/",
+}
+
+export {
+  learningResources,
+  topics,
+  learningPaths,
+  articles,
+  search,
+  programLetters,
+}

frontends/mit-open/package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@ebay/nice-modal-react": "^1.2.13",
+    "@mitodl/course-search-utils": "^3.0.3",
     "@mui/icons-material": "^5.14.19",
     "@sentry/react": "^7.57.0",
     "@tanstack/react-query": "^4.36.1",
@@ -55,8 +56,8 @@
     "react-dotdotdot": "^1.3.1",
     "react-helmet-async": "^2.0.3",
     "react-infinite-scroller": "^1.2.6",
-    "react-router": "^6.19.0",
-    "react-router-dom": "^6.19.0",
+    "react-router": "^6.22.2",
+    "react-router-dom": "^6.22.2",
     "tiny-invariant": "^1.3.1",
     "yup": "^1.2.0"
   },

frontends/mit-open/src/common/urls.ts

@@ -45,3 +45,5 @@ export const login = ({
 }
 
 export const DASHBOARD = "/dashboard/"
+
+export const SEARCH = "/search/"

frontends/mit-open/src/components/PlainVerticalList/PlainVerticalList.tsx

@@ -0,0 +1,21 @@
+import { styled } from "ol-components"
+
+/**
+ * A plain list: No markers, margin, or padding around the list.
+ * Customizable margin between items.
+ */
+const PlainVerticalList = styled.ul<{ itemSpacing: string }>`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  > li {
+    margin-bottom: ${({ itemSpacing }) => itemSpacing};
+  }
+
+  > li:last-child {
+    margin-bottom: none;
+  }
+`
+
+export default PlainVerticalList

frontends/mit-open/src/page-components/LearningResourceCard/LearningResourceCard.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback } from "react"
-import classNames from "classnames"
 import * as NiceModal from "@ebay/nice-modal-react"
 
 import LearningResourceCardTemplate from "@/page-components/LearningResourceCardTemplate/LearningResourceCardTemplate"
@@ -44,7 +43,7 @@ const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
       variant={variant}
       sortable={sortable}
       suppressImage={suppressImage}
-      className={classNames("ic-resource-card", className)}
+      className={className}
       resource={resource}
       imgConfig={imgConfigs[variant]}
       onActivate={console.log}

frontends/mit-open/src/pages/HomePage/HomePage.test.tsx

@@ -4,7 +4,7 @@ import HomePage from "./HomePage"
 
 import { urls, setMockResponse } from "api/test-utils"
 import { learningResources as factory } from "api/test-utils/factories"
-import { renderWithProviders, screen, within } from "../../test-utils"
+import { renderWithProviders, screen, within, user } from "../../test-utils"
 import invariant from "tiny-invariant"
 import type { LearningResource } from "api"
 import LearningResourceCard from "@/page-components/LearningResourceCard/LearningResourceCard"
@@ -20,6 +20,21 @@ const checkLRC = async (container: HTMLElement, resource: LearningResource) => {
 }
 
 describe("HomePage", () => {
+  test("Submitting search goes to search page", async () => {
+    const resources = factory.resources({ count: 0 })
+    setMockResponse.get(urls.learningResources.list(), resources)
+    const { location } = renderWithProviders(<HomePage />)
+    const searchbox = screen.getByRole("textbox", { name: /search for/i })
+    await user.click(searchbox)
+    await user.paste("physics")
+    await user.type(searchbox, "[Enter]")
+    expect(location.current).toEqual(
+      expect.objectContaining({
+        pathname: "/search",
+        search: "?q=physics",
+      }),
+    )
+  })
   it("Shows Upcoming Courses", async () => {
     const resources = factory.resources({ count: 4 })
     setMockResponse.get(urls.learningResources.list(), resources)

frontends/mit-open/src/pages/HomePage/HomePage.tsx

@@ -11,6 +11,7 @@ import type { SearchInputProps } from "ol-components"
 import { GridContainer } from "@/components/GridLayout/GridLayout"
 import { useLearningResourcesList } from "api/hooks/learningResources"
 import HomePageCarousel from "./HomePageCarousel"
+import { useNavigate } from "react-router"
 
 const EXPLORE_BUTTONS = [
   {
@@ -134,13 +135,19 @@ const FrontPageImage = styled.img`
 const HomePage: React.FC = () => {
   const [searchText, setSearchText] = useState("")
   const onSearchClear = useCallback(() => setSearchText(""), [])
+  const navigate = useNavigate()
   const onSearchChange: SearchInputProps["onChange"] = useCallback((e) => {
     setSearchText(e.target.value)
   }, [])
-  const onSearchSubmit: SearchInputProps["onSubmit"] = useCallback((e) => {
-    console.log("Submitting search")
-    console.log(e)
-  }, [])
+  const onSearchSubmit: SearchInputProps["onSubmit"] = useCallback(
+    (e) => {
+      navigate({
+        pathname: "/search",
+        search: `q=${e.target.value}`,
+      })
+    },
+    [navigate],
+  )
   const resourcesQuery = useLearningResourcesList()
 
   return (

frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.tsx

@@ -76,7 +76,6 @@ const ListCard: React.FC<ListCardProps> = ({ list, onActivate, canEdit }) => {
   return (
     <LearningResourceCardTemplate
       variant="row-reverse"
-      className="ic-resource-card"
       resource={list}
       imgConfig={imgConfigs["row-reverse-small"]}
       footerActionSlot={canEdit ? <EditListMenu resource={list} /> : null}

frontends/mit-open/src/pages/SearchPage/ResourceTypeTabs.tsx

@@ -0,0 +1,124 @@
+import React from "react"
+import { Tab, TabContext, TabList, TabPanel } from "ol-components"
+import type { ResourceTypeEnum, LearningResourceSearchResponse } from "api"
+import type { UseSearchQueryParamsResult } from "@mitodl/course-search-utils"
+
+type TabConfig = {
+  resource_type: ResourceTypeEnum
+  label: string
+}
+
+type Aggregations = LearningResourceSearchResponse["metadata"]["aggregations"]
+const resourceTypeCounts = (aggregations?: Aggregations) => {
+  if (!aggregations) return null
+  const buckets = aggregations?.resource_type ?? []
+  const counts = buckets.reduce(
+    (acc, bucket) => {
+      acc[bucket.key] = bucket.doc_count
+      return acc
+    },
+    {} as Record<string, number>,
+  )
+  return counts
+}
+const appendCount = (label: string, count?: number) => {
+  if (Number.isFinite(count)) {
+    return `${label} (${count})`
+  }
+  return label
+}
+
+/**
+ *
+ */
+const ResourceTypesTabContext: React.FC<{
+  resourceType?: ResourceTypeEnum
+  children: React.ReactNode
+}> = ({ resourceType, children }) => {
+  const tab = resourceType ?? "all"
+  return <TabContext value={tab}>{children}</TabContext>
+}
+
+type ResourceTypeTabsProps = {
+  aggregations?: Aggregations
+  tabs: TabConfig[]
+  setFacetActive: UseSearchQueryParamsResult["setFacetActive"]
+  clearFacet: UseSearchQueryParamsResult["clearFacet"]
+  onTabChange?: (tab: ResourceTypeEnum | "all") => void
+}
+const ResourceTypeTabList: React.FC<ResourceTypeTabsProps> = ({
+  tabs,
+  aggregations,
+  setFacetActive,
+  clearFacet,
+  onTabChange,
+}) => {
+  const counts = resourceTypeCounts(aggregations)
+  const allCount = counts
+    ? tabs.reduce((acc, tab) => acc + (counts[tab.resource_type] ?? 0), 0)
+    : undefined
+  return (
+    <TabList
+      onChange={(_e, value) => {
+        clearFacet("resource_type")
+        if (value !== "all") {
+          setFacetActive("resource_type", value, true)
+        }
+        onTabChange?.(value)
+      }}
+    >
+      <Tab value="all" label={appendCount("All", allCount)} />
+      {tabs.map((t) => {
+        const count = counts ? counts[t.resource_type] ?? 0 : undefined
+        return (
+          <Tab
+            key={t.resource_type}
+            value={t.resource_type}
+            label={appendCount(t.label, count)}
+          />
+        )
+      })}
+    </TabList>
+  )
+}
+
+const ResourceTypeTabPanels: React.FC<{
+  tabs: TabConfig[]
+  children?: React.ReactNode
+}> = ({ tabs, children }) => {
+  return (
+    <>
+      <TabPanel value="all">{children}</TabPanel>
+      {tabs.map((t) => (
+        <TabPanel key={t.resource_type} value={t.resource_type}>
+          {children}
+        </TabPanel>
+      ))}
+    </>
+  )
+}
+
+/**
+ * Components for a tabbed search UI with tabs controlling resource_type facet.
+ *
+ * Intended usage is:
+ * ```jsx
+ * <ResourceTypeTabs.Context>
+ *    <ResourceTypeTabs.TabList />
+ *    <ResourceTypeTabPanels>
+ *      Panel Content
+ *    </ResourceTypeTabPanels>
+ * <ResourceTypeTabs.Context>
+ * ```
+ *
+ * These are exported as three separate components (Context, TabList, TabPanels)
+ * to facilitate placement within a grid layout.
+ */
+const ResourceTypeTabs = {
+  Context: ResourceTypesTabContext,
+  TabList: ResourceTypeTabList,
+  TabPanels: ResourceTypeTabPanels,
+}
+
+export { ResourceTypeTabs }
+export type { TabConfig }