move LearningResourceExpanded to main (#1987)

Not sure this ever really belonged in ol-components. It is very specific to the application. Immediate motivation is to more easily use posthog within the component.
mitodl · Jan 24, 2025 · 284a43f · 284a43f
1 parent 117af25
commit 284a43f
Show file tree

Hide file tree

Showing 16 changed files with 369 additions and 342 deletions.
diff --git a/frontends/main/package.json b/frontends/main/package.json
@@ -23,6 +23,7 @@
     "@tanstack/react-query": "^4.36.1",
     "api": "workspace:*",
     "formik": "^2.4.6",
+    "iso-639-1": "^3.1.4",
     "lodash": "^4.17.21",
     "next": "^15.0.2",
     "next-nprogress-bar": "^2.4.2",

diff --git a/...ourceExpanded/DifferingRunsTable.test.tsx → ...esourceDrawer/DifferingRunsTable.test.tsx b/...ourceExpanded/DifferingRunsTable.test.tsx → ...esourceDrawer/DifferingRunsTable.test.tsx
@@ -1,20 +1,20 @@
 import React from "react"
 import { screen, within } from "@testing-library/react"
-import { courses } from "../LearningResourceCard/testUtils"
-import InfoSectionV2 from "./InfoSection"
+import { courses } from "./testUtils"
+import InfoSection from "./InfoSection"
 import { DeliveryEnumDescriptions } from "api"
-import { renderWithTheme } from "../../test-utils"
+import { renderWithTheme } from "@/test-utils"
 
 describe("Differing runs comparison table", () => {
   test("Does not appear if data is the same", () => {
     const course = courses.multipleRuns.sameData
-    renderWithTheme(<InfoSectionV2 resource={course} />)
+    renderWithTheme(<InfoSection resource={course} />)
     expect(screen.queryByTestId("differing-runs-table")).toBeNull()
   })
 
   test("Appears if data is different", () => {
     const course = courses.multipleRuns.differentData
-    renderWithTheme(<InfoSectionV2 resource={course} />)
+    renderWithTheme(<InfoSection resource={course} />)
     const differingRunsTable = screen.getByTestId("differing-runs-table")
     expect(differingRunsTable).toBeInTheDocument()
     const onlineLabels = within(differingRunsTable).getAllByText(

diff --git a/...ngResourceExpanded/DifferingRunsTable.tsx → ...ningResourceDrawer/DifferingRunsTable.tsx b/...ngResourceExpanded/DifferingRunsTable.tsx → ...ningResourceDrawer/DifferingRunsTable.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { theme } from "../ThemeProvider/ThemeProvider"
+import { theme } from "ol-components"
 import { LearningResource } from "api"
 import {
   allRunsAreIdentical,

diff --git a/...ningResourceExpanded/InfoSection.test.tsx → ...arningResourceDrawer/InfoSection.test.tsx b/...ningResourceExpanded/InfoSection.test.tsx → ...arningResourceDrawer/InfoSection.test.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { screen, within } from "@testing-library/react"
-import { courses } from "../LearningResourceCard/testUtils"
-import InfoSectionV2 from "./InfoSection"
+import { courses } from "./testUtils"
+import InfoSection from "./InfoSection"
 import { formatRunDate } from "ol-utilities"
 import invariant from "tiny-invariant"
 import user from "@testing-library/user-event"
@@ -12,7 +12,7 @@ const SEPARATOR = "|"
 
 describe("Learning resource info section pricing", () => {
   test("Free course, no certificate", () => {
-    renderWithTheme(<InfoSectionV2 resource={courses.free.noCertificate} />)
+    renderWithTheme(<InfoSection resource={courses.free.noCertificate} />)
 
     screen.getByText("Free")
     expect(screen.queryByText("Paid")).toBeNull()
@@ -22,7 +22,7 @@ describe("Learning resource info section pricing", () => {
 
   test("Free course, with certificate, one price", () => {
     renderWithTheme(
-      <InfoSectionV2 resource={courses.free.withCertificateOnePrice} />,
+      <InfoSection resource={courses.free.withCertificateOnePrice} />,
     )
 
     screen.getByText("Free")
@@ -33,7 +33,7 @@ describe("Learning resource info section pricing", () => {
 
   test("Free course, with certificate, price range", () => {
     renderWithTheme(
-      <InfoSectionV2 resource={courses.free.withCertificatePriceRange} />,
+      <InfoSection resource={courses.free.withCertificatePriceRange} />,
     )
 
     screen.getByText("Free")
@@ -44,7 +44,7 @@ describe("Learning resource info section pricing", () => {
 
   test("Unknown price, no certificate", () => {
     renderWithTheme(
-      <InfoSectionV2 resource={courses.unknownPrice.noCertificate} />,
+      <InfoSection resource={courses.unknownPrice.noCertificate} />,
     )
 
     screen.getByText("Paid")
@@ -55,7 +55,7 @@ describe("Learning resource info section pricing", () => {
 
   test("Unknown price, with certificate", () => {
     renderWithTheme(
-      <InfoSectionV2 resource={courses.unknownPrice.withCertificate} />,
+      <InfoSection resource={courses.unknownPrice.withCertificate} />,
     )
 
     screen.getByText("Paid")
@@ -67,9 +67,7 @@ describe("Learning resource info section pricing", () => {
   })
 
   test("Paid course, no certificate", () => {
-    renderWithTheme(
-      <InfoSectionV2 resource={courses.paid.withoutCertificate} />,
-    )
+    renderWithTheme(<InfoSection resource={courses.paid.withoutCertificate} />)
 
     screen.getByText("$49")
     expect(screen.queryByText("Paid")).toBeNull()
@@ -80,7 +78,7 @@ describe("Learning resource info section pricing", () => {
 
   test("Paid course, with certificate, one price", () => {
     renderWithTheme(
-      <InfoSectionV2 resource={courses.paid.withCerticateOnePrice} />,
+      <InfoSection resource={courses.paid.withCerticateOnePrice} />,
     )
 
     screen.getByText("$49")
@@ -91,7 +89,7 @@ describe("Learning resource info section pricing", () => {
 
   test("Paid course, with certificate, price range", () => {
     renderWithTheme(
-      <InfoSectionV2 resource={courses.paid.withCertificatePriceRange} />,
+      <InfoSection resource={courses.paid.withCertificatePriceRange} />,
     )
 
     screen.getByText("$49 – $99")
@@ -110,7 +108,7 @@ describe("Learning resource info section start date", () => {
     invariant(run)
     const runDate = formatRunDate(run, false)
     invariant(runDate)
-    renderWithTheme(<InfoSectionV2 resource={course} />)
+    renderWithTheme(<InfoSection resource={course} />)
 
     const section = screen.getByTestId("drawer-info-items")
     within(section).getByText("Starts:")
@@ -123,7 +121,7 @@ describe("Learning resource info section start date", () => {
     invariant(run)
     const runDate = formatRunDate(run, true)
     invariant(runDate)
-    renderWithTheme(<InfoSectionV2 resource={course} />)
+    renderWithTheme(<InfoSection resource={course} />)
 
     const section = screen.getByTestId("drawer-info-items")
     const expectedDateText = `As taught in:${runDate}`
@@ -145,7 +143,7 @@ describe("Learning resource info section start date", () => {
       .slice(0, 2)
       .join(SEPARATOR)}Show more`
     invariant(expectedDateText)
-    renderWithTheme(<InfoSectionV2 resource={course} />)
+    renderWithTheme(<InfoSection resource={course} />)
 
     const section = screen.getByTestId("drawer-info-items")
     within(section).getAllByText((_content, node) => {
@@ -155,7 +153,7 @@ describe("Learning resource info section start date", () => {
 
   test("If data is different then dates, formats, locations and prices are not shown", () => {
     const course = courses.multipleRuns.differentData
-    renderWithTheme(<InfoSectionV2 resource={course} />)
+    renderWithTheme(<InfoSection resource={course} />)
     const section = screen.getByTestId("drawer-info-items")
     expect(within(section).queryByText("Starts:")).toBeNull()
     expect(within(section).queryByText("Price:")).toBeNull()
@@ -166,7 +164,7 @@ describe("Learning resource info section start date", () => {
   test("Clicking the show more button should show more dates", async () => {
     const course = courses.multipleRuns.sameData
     const totalRuns = course.runs?.length ? course.runs.length : 0
-    renderWithTheme(<InfoSectionV2 resource={course} />)
+    renderWithTheme(<InfoSection resource={course} />)
 
     const runDates = screen.getByTestId("drawer-run-dates")
     expect(runDates.children.length).toBe(3)
@@ -179,7 +177,7 @@ describe("Learning resource info section start date", () => {
 describe("Learning resource info section format and location", () => {
   test("Multiple formats", () => {
     const course = courses.multipleFormats
-    renderWithTheme(<InfoSectionV2 resource={course} />)
+    renderWithTheme(<InfoSection resource={course} />)
 
     const section = screen.getByTestId("drawer-info-items")
     within(section).getAllByText((_content, node) => {
@@ -193,7 +191,7 @@ describe("Learning resource info section format and location", () => {
 
   test("Single format", () => {
     const course = courses.singleFormat
-    renderWithTheme(<InfoSectionV2 resource={course} />)
+    renderWithTheme(<InfoSection resource={course} />)
 
     const section = screen.getByTestId("drawer-info-items")
     within(section).getAllByText((_content, node) => {

diff --git a/.../LearningResourceExpanded/InfoSection.tsx → ...ts/LearningResourceDrawer/InfoSection.tsx b/.../LearningResourceExpanded/InfoSection.tsx → ...ts/LearningResourceDrawer/InfoSection.tsx
@@ -32,9 +32,8 @@ import {
   showStartAnytime,
   NoSSR,
 } from "ol-utilities"
-import { theme } from "../ThemeProvider/ThemeProvider"
+import { theme, Link } from "ol-components"
 import DifferingRunsTable from "./DifferingRunsTable"
-import { Link } from "../Link/Link"
 
 const SeparatorContainer = styled.span({
   padding: "0 8px",
@@ -541,7 +540,7 @@ const InfoItem = ({ label, Icon, value }: InfoItemProps) => {
   )
 }
 
-const InfoSectionV2 = ({ resource }: { resource?: LearningResource }) => {
+const InfoSection = ({ resource }: { resource?: LearningResource }) => {
   if (!resource) {
     return null
   }
@@ -570,4 +569,4 @@ const InfoSectionV2 = ({ resource }: { resource?: LearningResource }) => {
   )
 }
 
-export default InfoSectionV2
+export default InfoSection
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx
@@ -8,14 +8,14 @@ import {
 } from "@/test-utils"
 import LearningResourceDrawer from "./LearningResourceDrawer"
 import { urls, factories, setMockResponse } from "api/test-utils"
-import { LearningResourceExpanded } from "ol-components"
+import { LearningResourceExpanded } from "./LearningResourceExpanded"
 import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
 import { LearningResource, ResourceTypeEnum } from "api"
 import { makeUserSettings } from "@/test-utils/factories"
 import type { User } from "api/hooks/user"
 
-jest.mock("ol-components", () => {
-  const actual = jest.requireActual("ol-components")
+jest.mock("./LearningResourceExpanded", () => {
+  const actual = jest.requireActual("./LearningResourceExpanded")
   return {
     ...actual,
     LearningResourceExpanded: jest.fn(actual.LearningResourceExpanded),

diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
@@ -1,9 +1,6 @@
 import React, { Suspense, useEffect, useId, useMemo } from "react"
-import {
-  RoutedDrawer,
-  LearningResourceExpanded,
-  imgConfigs,
-} from "ol-components"
+import { RoutedDrawer, imgConfigs } from "ol-components"
+import { LearningResourceExpanded } from "./LearningResourceExpanded"
 import type {
   LearningResourceCardProps,
   RoutedDrawerProps,

diff --git a/...xpanded/LearningResourceExpanded.test.tsx → ...eDrawer/LearningResourceExpanded.test.tsx b/...xpanded/LearningResourceExpanded.test.tsx → ...eDrawer/LearningResourceExpanded.test.tsx
@@ -1,5 +1,4 @@
 import React from "react"
-import { BrowserRouter } from "react-router-dom"
 import { screen, within } from "@testing-library/react"
 
 import {
@@ -11,10 +10,9 @@ import { ResourceTypeEnum } from "api"
 import { factories, setMockResponse, urls } from "api/test-utils"
 import invariant from "tiny-invariant"
 import type { LearningResource } from "api"
-import { PLATFORM_LOGOS } from "../Logo/Logo"
-import _ from "lodash"
+import { PLATFORM_LOGOS } from "ol-components"
 import user from "@testing-library/user-event"
-import { renderWithTheme } from "../../test-utils"
+import { renderWithTheme } from "@/test-utils"
 
 const IMG_CONFIG: LearningResourceExpandedProps["imgConfig"] = {
   width: 385,
@@ -33,15 +31,13 @@ const setup = (resource: LearningResource, isLearningPathEditor?: boolean) => {
   }
   setMockResponse.get(urls.userMe.get(), user)
   return renderWithTheme(
-    <BrowserRouter>
-      <LearningResourceExpanded
-        resourceId={resource.id}
-        resource={resource}
-        user={user}
-        shareUrl={`https://learn.mit.edu/search?resource=${resource.id}`}
-        imgConfig={IMG_CONFIG}
-      />
-    </BrowserRouter>,
+    <LearningResourceExpanded
+      resourceId={resource.id}
+      resource={resource}
+      user={user}
+      shareUrl={`https://learn.mit.edu/search?resource=${resource.id}`}
+      imgConfig={IMG_CONFIG}
+    />,
   )
 }
 

diff --git a/...urceExpanded/LearningResourceExpanded.tsx → ...sourceDrawer/LearningResourceExpanded.tsx b/...urceExpanded/LearningResourceExpanded.tsx → ...sourceDrawer/LearningResourceExpanded.tsx
@@ -1,6 +1,15 @@
 import React, { useCallback, useEffect, useRef, useState } from "react"
 import styled from "@emotion/styled"
-import Skeleton from "@mui/material/Skeleton"
+import {
+  Skeleton,
+  theme,
+  PlatformLogo,
+  PLATFORM_LOGOS,
+  Link,
+  Input,
+  Typography,
+} from "ol-components"
+import type { ImageConfig, LearningResourceCardProps } from "ol-components"
 import { default as NextImage } from "next/image"
 import {
   ActionButton,
@@ -23,16 +32,10 @@ import {
   RiShareLine,
   RiTwitterXLine,
 } from "@remixicon/react"
-import type { ImageConfig } from "../../constants/imgConfigs"
-import { theme } from "../ThemeProvider/ThemeProvider"
-import { PlatformLogo, PLATFORM_LOGOS } from "../Logo/Logo"
-import InfoSectionV2 from "./InfoSection"
+
+import InfoSection from "./InfoSection"
 import type { User } from "api/hooks/user"
-import { LearningResourceCardProps } from "../LearningResourceCard/LearningResourceCard"
 import VideoFrame from "./VideoFrame"
-import { Link } from "../Link/Link"
-import { Input } from "../Input/Input"
-import Typography from "@mui/material/Typography"
 
 const DRAWER_WIDTH = "900px"
 
@@ -734,7 +737,7 @@ const LearningResourceExpanded: React.FC<LearningResourceExpandedProps> = ({
         <ContentContainer>
           <LeftContainer>
             <ResourceDescription resource={resource} />
-            <InfoSectionV2 resource={resource} />
+            <InfoSection resource={resource} />
           </LeftContainer>
           <RightContainer>
             <CallToActionSection

diff --git a/...s/LearningResourceExpanded/VideoFrame.tsx → ...nts/LearningResourceDrawer/VideoFrame.tsx b/...s/LearningResourceExpanded/VideoFrame.tsx → ...nts/LearningResourceDrawer/VideoFrame.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { EmbedlyCard } from "../EmbedlyCard/EmbedlyCard"
+import { EmbedlyCard } from "ol-components"
 
 const IFrame = styled.iframe`
   border-radius: 8px;