multiple enrollment display (#3534)

* add sibling enrollments to data model and add desktop multiple enrollmetns view

* add expired run indicator

* separate out sibling runs accordion into its own component, implement basic mobile design

* add multiple enrollments display to dashboard home

* add tests

* fix typecheck

* handle compact ui

* add course id matching to sibling run filtering

* fix accordion onchange

* change upcoming run icon color to orange

* fix isloading check on home enrollments display

* add accessible label to view content link

* filter out b2b runs

* add aria-hidden to non-remix icon

* add hover effect to runs count

* fix rebase issue

* add missing aria tags

Author: gumaerc

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/CoursewareCard.tsx

@@ -12,7 +12,10 @@
  *   - "program-enrollment" → a program enrollment.
  */
 import React from "react"
-import { type DashboardCourseEntry } from "./model/dashboardViewModel"
+import {
+  type DashboardCourseEntry,
+  filterVariantSiblings,
+} from "./model/dashboardViewModel"
 import type {
   CourseRunEnrollmentV3,
   V3UserProgramEnrollment,
@@ -57,6 +60,7 @@ type CoursewareCardEnrollmentProps = StyledComponentBaseProps &
   CourseDisplayProps & {
     kind: "enrollment"
     enrollment: CourseRunEnrollmentV3
+    siblingEnrollments?: CourseRunEnrollmentV3[]
   }
 
 /** A program enrollment. */
@@ -93,6 +97,7 @@ const CoursewareCard: React.FC<CoursewareCardProps> = (props) => {
     return (
       <EnrolledCourseCard
         enrollment={props.enrollment}
+        siblingEnrollments={props.siblingEnrollments}
         layout={layout}
         headingLevel={headingLevel}
         onUpgradeError={onUpgradeError}
@@ -108,6 +113,10 @@ const CoursewareCard: React.FC<CoursewareCardProps> = (props) => {
     // Will likely diverge with multiple enrollment display.
     <EnrolledCourseCard
       enrollment={entry.displayedEnrollment}
+      siblingEnrollments={filterVariantSiblings(
+        entry.enrollments,
+        entry.displayedEnrollment,
+      )}
       layout={layout}
       headingLevel={headingLevel}
       onUpgradeError={onUpgradeError}

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrolledCourseCard.test.tsx

@@ -379,6 +379,7 @@ describe.each([
       const enrollment = mitxonline.factories.enrollment.courseEnrollment({
         enrollment_mode: enrollmentMode,
         b2b_contract_id: b2bContractId,
+        certificate: null,
         run,
       })
       renderWithProviders(<EnrolledCourseCard enrollment={enrollment} />)
@@ -454,6 +455,7 @@ describe.each([
     const enrollment = mitxonline.factories.enrollment.courseEnrollment({
       enrollment_mode: EnrollmentMode.Audit,
       b2b_contract_id: null,
+      certificate: null,
       run: {
         is_upgradable: true,
         upgrade_deadline: deadline,
@@ -474,6 +476,7 @@ describe.each([
     const enrollment = mitxonline.factories.enrollment.courseEnrollment({
       enrollment_mode: EnrollmentMode.Audit,
       b2b_contract_id: null,
+      certificate: null,
       run: {
         is_upgradable: true,
         upgrade_deadline: null,
@@ -496,6 +499,7 @@ describe.each([
     const enrollment = mitxonline.factories.enrollment.courseEnrollment({
       enrollment_mode: EnrollmentMode.Audit,
       b2b_contract_id: null,
+      certificate: null,
       run: {
         is_upgradable: true,
         upgrade_deadline: faker.date.future().toISOString(),
@@ -529,6 +533,7 @@ describe.each([
     const enrollment = mitxonline.factories.enrollment.courseEnrollment({
       enrollment_mode: EnrollmentMode.Audit,
       b2b_contract_id: null,
+      certificate: null,
       run: {
         is_upgradable: true,
         upgrade_deadline: faker.date.future().toISOString(),
@@ -734,3 +739,72 @@ describe.each([
     windowOpenSpy.mockRestore()
   })
 })
+
+describe("EnrolledCourseCard — multiple enrollment runs", () => {
+  setupLocationMock()
+
+  test("shows accordion on desktop when siblingEnrollments is non-empty", () => {
+    setupUserApis()
+    const enrollment = mitxonline.factories.enrollment.courseEnrollment({
+      run: currentRunDates,
+    })
+    const siblings = [
+      mitxonline.factories.enrollment.courseEnrollment(),
+      mitxonline.factories.enrollment.courseEnrollment(),
+    ]
+    renderWithProviders(
+      <EnrolledCourseCard
+        enrollment={enrollment}
+        siblingEnrollments={siblings}
+      />,
+    )
+    const desktopCard = screen.getByTestId("enrollment-card-desktop")
+    // 2 siblings + 1 current = 3
+    expect(within(desktopCard).getByText("Course runs (3)")).toBeInTheDocument()
+  })
+
+  test("does not show accordion on desktop when siblingEnrollments is empty", () => {
+    setupUserApis()
+    const enrollment = mitxonline.factories.enrollment.courseEnrollment()
+    renderWithProviders(
+      <EnrolledCourseCard enrollment={enrollment} siblingEnrollments={[]} />,
+    )
+    expect(screen.queryByText(/Course runs/)).not.toBeInTheDocument()
+  })
+
+  test("does not show accordion when siblingEnrollments is omitted", () => {
+    setupUserApis()
+    const enrollment = mitxonline.factories.enrollment.courseEnrollment()
+    renderWithProviders(<EnrolledCourseCard enrollment={enrollment} />)
+    expect(screen.queryByText(/Course runs/)).not.toBeInTheDocument()
+  })
+
+  test("shows accordion on mobile when siblingEnrollments is non-empty", () => {
+    setupUserApis()
+    const enrollment = mitxonline.factories.enrollment.courseEnrollment()
+    const sibling = mitxonline.factories.enrollment.courseEnrollment()
+    renderWithProviders(
+      <EnrolledCourseCard
+        enrollment={enrollment}
+        siblingEnrollments={[sibling]}
+      />,
+    )
+    const mobileCard = screen.getByTestId("enrollment-card-mobile")
+    expect(within(mobileCard).getByText("Course runs (2)")).toBeInTheDocument()
+  })
+
+  test("accordion count reflects total runs (siblings + current)", () => {
+    setupUserApis()
+    const enrollment = mitxonline.factories.enrollment.courseEnrollment()
+    const siblings = Array.from({ length: 4 }, () =>
+      mitxonline.factories.enrollment.courseEnrollment(),
+    )
+    renderWithProviders(
+      <EnrolledCourseCard
+        enrollment={enrollment}
+        siblingEnrollments={siblings}
+      />,
+    )
+    expect(screen.getAllByText("Course runs (5)").length).toBeGreaterThan(0)
+  })
+})

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrolledCourseCard.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { SimpleMenu, Stack } from "ol-components"
+import { SimpleMenu, Stack, styled } from "ol-components"
 import {
   CardRoot,
   CardTypeText,
@@ -27,6 +27,7 @@ import { isVerifiedEnrollmentMode } from "@/common/mitxonline"
 import { RiArrowUpCircleLine, RiAwardLine, RiMore2Line } from "@remixicon/react"
 import { useReplaceBasketItem } from "@/common/mitxonline/useReplaceBasketItem"
 import { isInPast, calendarDaysUntil, NoSSR } from "ol-utilities"
+import { SiblingRunsAccordion } from "./SiblingRunsAccordion"
 import { EnrollmentStatusIndicator } from "./EnrollmentStatusIndicator"
 import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import { useQuery } from "@tanstack/react-query"
@@ -109,8 +110,45 @@ const UpgradeBanner: React.FC<
   )
 }
 
+const EnrolledCardShell = styled.div(({ theme }) => ({
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  borderRadius: "8px",
+  overflow: "hidden",
+  backgroundColor: theme.custom.colors.white,
+  [theme.breakpoints.down("md")]: {
+    display: "none",
+  },
+  '&[data-layout="compact"]': {
+    border: "none",
+    borderBottom: `1px solid ${theme.custom.colors.lightGray2}`,
+    borderRadius: "0px !important",
+    boxShadow: "none",
+    "&:first-of-type": {
+      borderTopLeftRadius: "8px !important",
+      borderTopRightRadius: "8px !important",
+    },
+    "&:last-of-type": {
+      borderBottomLeftRadius: "8px !important",
+      borderBottomRightRadius: "8px !important",
+      borderBottom: "none",
+    },
+  },
+}))
+
+const CardHeaderContent = styled.div({
+  padding: "16px 16px 0 16px",
+  display: "flex",
+  gap: "8px",
+  alignItems: "center",
+})
+
+const MobileAccordionWrapper = styled.div({
+  width: "100%",
+})
+
 type EnrolledCourseCardProps = {
   enrollment: CourseRunEnrollmentV3
+  siblingEnrollments?: CourseRunEnrollmentV3[]
   layout?: "default" | "compact"
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
   onUpgradeError?: (error: string) => void
@@ -120,6 +158,7 @@ type EnrolledCourseCardProps = {
 
 export const EnrolledCourseCard = ({
   enrollment,
+  siblingEnrollments,
   layout = "default",
   headingLevel,
   onUpgradeError,
@@ -165,7 +204,12 @@ export const EnrolledCourseCard = ({
   })
   const upgradedAndIncomplete =
     !isContractPageResource && isVerifiedEnrollmentMode(enrollmentMode)
-  const certStatus = showUpgradeBanner ? (
+  const certStatus = certificateLink ? (
+    <SubtitleLink href={certificateLink} layout={layout}>
+      <RiAwardLine size="16px" />
+      {isCompact ? "Certificate" : "View Certificate"}
+    </SubtitleLink>
+  ) : showUpgradeBanner ? (
     <UpgradeBanner
       data-testid="upgrade-root"
       canUpgrade={showUpgradeBanner}
@@ -179,11 +223,6 @@ export const EnrolledCourseCard = ({
         )
       }}
     />
-  ) : certificateLink ? (
-    <SubtitleLink href={certificateLink} layout={layout}>
-      <RiAwardLine size="16px" />
-      {isCompact ? "Certificate" : "View Certificate"}
-    </SubtitleLink>
   ) : upgradedAndIncomplete ? (
     <UpgradedBanner />
   ) : null
@@ -347,25 +386,50 @@ export const EnrolledCourseCard = ({
     />
   )
 
+  const hasMultipleRuns = (siblingEnrollments?.length ?? 0) > 0
+
   return (
     <>
-      <CardRoot
-        screenSize="desktop"
-        data-testid="enrollment-card-desktop"
-        as={Component}
-        className={className}
-        layout={layout}
-      >
-        <Stack justifyContent="start" alignItems="stretch" flex={1}>
-          <CardTypeText>Course</CardTypeText>
-          {titleSection}
-        </Stack>
-        <Stack direction="row" gap="8px" alignItems="center">
-          {buttonSection}
-          {contextMenu}
-        </Stack>
-      </CardRoot>
-
+      {hasMultipleRuns ? (
+        <EnrolledCardShell
+          data-testid="enrollment-card-desktop"
+          data-layout={layout}
+          className={className}
+          as={Component}
+        >
+          <CardHeaderContent>
+            <Stack justifyContent="start" alignItems="stretch" flex={1}>
+              <CardTypeText>Course</CardTypeText>
+              {titleSection}
+            </Stack>
+            <Stack direction="row" gap="8px" alignItems="center">
+              {buttonSection}
+              {contextMenu}
+            </Stack>
+          </CardHeaderContent>
+          <SiblingRunsAccordion
+            enrollment={enrollment}
+            siblingEnrollments={siblingEnrollments ?? []}
+          />
+        </EnrolledCardShell>
+      ) : (
+        <CardRoot
+          screenSize="desktop"
+          data-testid="enrollment-card-desktop"
+          as={Component}
+          className={className}
+          layout={layout}
+        >
+          <Stack justifyContent="start" alignItems="stretch" flex={1}>
+            <CardTypeText>Course</CardTypeText>
+            {titleSection}
+          </Stack>
+          <Stack direction="row" gap="8px" alignItems="center">
+            {buttonSection}
+            {contextMenu}
+          </Stack>
+        </CardRoot>
+      )}
       <CardRoot
         screenSize="mobile"
         data-testid="enrollment-card-mobile"
@@ -394,6 +458,14 @@ export const EnrolledCourseCard = ({
         >
           {buttonSection}
         </Stack>
+        {hasMultipleRuns && (
+          <MobileAccordionWrapper>
+            <SiblingRunsAccordion
+              enrollment={enrollment}
+              siblingEnrollments={siblingEnrollments ?? []}
+            />
+          </MobileAccordionWrapper>
+        )}
       </CardRoot>
     </>
   )