separate starts and as taught in, show anytime availability (#1828)

* refactor starts / as taught in functionality to show on separate lines, show "anytime" in starts if availability is anytime

* fix rebase mishap

Author: gumaerc

frontends/ol-components/src/components/LearningResourceCard/testUtils.ts

@@ -105,7 +105,12 @@ const courses = {
     }),
     anytime: makeResource({
       resource_type: ResourceTypeEnum.Course,
-      runs: [factories.learningResources.run()],
+      runs: [
+        factories.learningResources.run({
+          year: 2022,
+          semester: "Spring",
+        }),
+      ],
       free: true,
       certification: false,
       prices: ["0"],

frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.test.tsx

@@ -112,7 +112,7 @@ describe("Learning resource info section pricing", () => {
 })
 
 describe("Learning resource info section start date", () => {
-  test("Start date", () => {
+  test("Start date(s)", () => {
     const course = courses.free.dated
     const run = course.runs?.[0]
     invariant(run)
@@ -123,11 +123,11 @@ describe("Learning resource info section start date", () => {
     })
 
     const section = screen.getByTestId("drawer-info-items")
-    within(section).getByText("Start Date:")
+    within(section).getByText("Starts:")
     within(section).getByText(runDate)
   })
 
-  test("As taught in", () => {
+  test("As taught in date(s)", () => {
     const course = courses.free.anytime
     const run = course.runs?.[0]
     invariant(run)
@@ -138,8 +138,10 @@ describe("Learning resource info section start date", () => {
     })
 
     const section = screen.getByTestId("drawer-info-items")
-    within(section).getByText("As taught in:")
-    within(section).getByText(runDate)
+    const expectedDateText = `As taught in:${runDate}`
+    within(section).getAllByText((_content, node) => {
+      return node?.textContent === expectedDateText || false
+    })
   })
 
   test("Multiple run dates", () => {
@@ -171,7 +173,7 @@ describe("Learning resource info section start date", () => {
       wrapper: ThemeProvider,
     })
     const section = screen.getByTestId("drawer-info-items")
-    expect(within(section).queryByText("Start Date:")).toBeNull()
+    expect(within(section).queryByText("Starts:")).toBeNull()
     expect(within(section).queryByText("Price:")).toBeNull()
     expect(within(section).queryByText("Format:")).toBeNull()
     expect(within(section).queryByText("Location:")).toBeNull()

frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx

@@ -16,6 +16,7 @@ import {
   RiAwardLine,
   RiComputerLine,
   RiMapPinLine,
+  RiCalendarScheduleLine,
 } from "@remixicon/react"
 import { DeliveryEnum, LearningResource, ResourceTypeEnum } from "api"
 import {
@@ -164,17 +165,25 @@ const InfoItemValue: React.FC<InfoItemValueProps> = ({
   )
 }
 
+const totalRunsWithDates = (resource: LearningResource) => {
+  return (
+    resource.runs
+      ?.map((run) => formatRunDate(run, showStartAnytime(resource)))
+      .filter((date) => date !== null).length || 0
+  )
+}
+
 const RunDates: React.FC<{ resource: LearningResource }> = ({ resource }) => {
   const [showingMore, setShowingMore] = useState(false)
-  const asTaughtIn = showStartAnytime(resource)
   const sortedDates = resource.runs
     ?.sort((a, b) => {
       if (a?.start_date && b?.start_date) {
         return Date.parse(a.start_date) - Date.parse(b.start_date)
       }
       return 0
     })
-    .map((run) => formatRunDate(run, asTaughtIn))
+    .map((run) => formatRunDate(run, showStartAnytime(resource)))
+    .filter((date) => date !== null)
   const totalDates = sortedDates?.length || 0
   const showMore = totalDates > 2
   if (showMore) {
@@ -246,21 +255,22 @@ const shouldShowFormat = (resource: LearningResource) => {
 
 const INFO_ITEMS: InfoItemConfig = [
   {
-    label: (resource: LearningResource) => {
-      const asTaughtIn = resource ? showStartAnytime(resource) : false
-      const label = asTaughtIn ? "As taught in:" : "Start Date:"
-      return label
-    },
+    label: "Starts:",
     Icon: RiCalendarLine,
     selector: (resource: LearningResource) => {
-      const totalDatesWithRuns =
-        resource.runs?.filter((run) => run.start_date !== null).length || 0
-      if (allRunsAreIdentical(resource) && totalDatesWithRuns > 0) {
+      const anytime = showStartAnytime(resource)
+      if (
+        allRunsAreIdentical(resource) &&
+        totalRunsWithDates(resource) > 0 &&
+        !anytime
+      ) {
         return (
           <NoSSR>
             <RunDates resource={resource} />
           </NoSSR>
         )
+      } else if (anytime) {
+        return <InfoItemValue label="Anytime" index={1} total={1} />
       } else return null
     },
   },
@@ -343,6 +353,15 @@ const INFO_ITEMS: InfoItemConfig = [
       ) : null
     },
   },
+  {
+    label: "As taught in:",
+    Icon: RiCalendarScheduleLine,
+    selector: (resource: LearningResource) => {
+      if (totalRunsWithDates(resource) > 0 && showStartAnytime(resource)) {
+        return <RunDates resource={resource} />
+      } else return null
+    },
+  },
   {
     label: "Topics:",
     Icon: RiPresentationLine,