use next_start_date when available in learning resource drawer

frontends/main/src/page-components/LearningResourceExpanded/InfoSection.test.tsx

@@ -115,6 +115,35 @@ describe("Learning resource info section start date", () => {
     within(section).getByText(runDate)
   })
 
+  test("Uses next_start_date when available", () => {
+    const course = {
+      ...courses.free.dated,
+      next_start_date: "2024-03-15T00:00:00Z",
+    }
+    renderWithTheme(<InfoSection resource={course} />)
+
+    const section = screen.getByTestId("drawer-info-items")
+    within(section).getByText("Starts:")
+    within(section).getByText("March 15, 2024")
+  })
+
+  test("Falls back to run date when next_start_date is null", () => {
+    const course = {
+      ...courses.free.dated,
+      next_start_date: null,
+    }
+    const run = course.runs?.[0]
+    invariant(run)
+    const runDate = formatRunDate(run, false)
+    invariant(runDate)
+    renderWithTheme(<InfoSection resource={course} />)
+
+    const section = screen.getByTestId("drawer-info-items")
+    within(section).getByText("Starts:")
+    within(section).getByText(runDate)
+    expect(within(section).queryByText("March 15, 2024")).toBeNull()
+  })
+
   test("As taught in date(s)", () => {
     const course = courses.free.anytime
     const run = course.runs?.[0]
@@ -151,6 +180,31 @@ describe("Learning resource info section start date", () => {
     })
   })
 
+  test("Multiple run dates with next_start_date uses next_start_date as first date", () => {
+    const course = {
+      ...courses.multipleRuns.sameData,
+      next_start_date: "2024-01-15T00:00:00Z",
+    }
+    const sortedDates = course.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, false))
+      .filter((date) => date !== null)
+
+    // First date should be next_start_date, second should be original second date
+    const expectedDateText = `January 15, 2024${SEPARATOR}${sortedDates?.[1]}Show more`
+    renderWithTheme(<InfoSection resource={course} />)
+
+    const section = screen.getByTestId("drawer-info-items")
+    within(section).getAllByText((_content, node) => {
+      return node?.textContent === expectedDateText || false
+    })
+  })
+
   test("If data is different then dates, formats, locations and prices are not shown", () => {
     const course = courses.multipleRuns.differentData
     renderWithTheme(<InfoSection resource={course} />)

frontends/main/src/page-components/LearningResourceExpanded/InfoSection.tsx

@@ -31,6 +31,7 @@ import {
   getLearningResourcePrices,
   showStartAnytime,
   NoSSR,
+  formatDate,
 } from "ol-utilities"
 import { theme, Link } from "ol-components"
 import DifferingRunsTable from "./DifferingRunsTable"
@@ -188,6 +189,13 @@ const RunDates: React.FC<{ resource: LearningResource }> = ({ resource }) => {
     })
     .map((run) => formatRunDate(run, showStartAnytime(resource)))
     .filter((date) => date !== null)
+  if (!sortedDates || sortedDates.length === 0) {
+    return null
+  }
+  const nextStartDate = resource.next_start_date
+    ? formatDate(resource.next_start_date, "MMMM DD, YYYY")
+    : null
+  sortedDates[0] = nextStartDate ?? sortedDates[0]
   const totalDates = sortedDates?.length || 0
   const showMore = totalDates > 2
   if (showMore) {