Fix ordering of modules in UAI dashboard (#2232)

gumaerc · web-flow · commit 4c8d68d9d8e2 · 2025-05-09T15:14:54.000-04:00
* add a function for sorting uai dashboard courses and associated tests

* remove unnecessary manual ordering of unenrolled modules

* move setupProgramsAndCourses to its proper spot in test-utils
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
@@ -6,6 +6,13 @@ import {
   EnrollmentStatus,
 } from "./types"
 import type { DashboardCourse } from "./types"
+import * as u from "api/test-utils"
+import { urls, factories } from "api/mitxonline-test-utils"
+import { setMockResponse } from "../../../test-utils"
+import { mockOrgData } from "api/mitxonline-hooks/enrollment"
+
+const makeCourses = factories.courses.courses
+const makeProgram = factories.programs.program
 
 const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
   return mergeOverrides<DashboardCourse>(
@@ -31,4 +38,39 @@ const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
   )
 }
 
-export { dashboardCourse }
+const setupProgramsAndCourses = () => {
+  const user = u.factories.user.user()
+  setMockResponse.get(u.urls.userMe.get(), user)
+
+  const orgId = mockOrgData.orgX.id
+  const coursesA = makeCourses({ count: 4 })
+  const coursesB = makeCourses({ count: 3 })
+  const programA = makeProgram({
+    courses: coursesA.results.map((c) => c.id),
+  })
+  const programB = makeProgram({
+    courses: coursesB.results.map((c) => c.id),
+  })
+
+  setMockResponse.get(
+    urls.programs.programsList({ orgId: mockOrgData.orgX.id }),
+    { results: [programA, programB] },
+  )
+  setMockResponse.get(urls.courses.coursesList({ id: programA.courses }), {
+    results: coursesA.results,
+  })
+  setMockResponse.get(urls.courses.coursesList({ id: programB.courses }), {
+    results: coursesB.results,
+  })
+
+  return {
+    orgId,
+    user,
+    programA,
+    programB,
+    coursesA: coursesA.results,
+    coursesB: coursesB.results,
+  }
+}
+
+export { dashboardCourse, setupProgramsAndCourses }
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
@@ -2,6 +2,12 @@ import { factories as mitx } from "api/mitxonline-test-utils"
 import * as transform from "./transform"
 import { DashboardResourceType, EnrollmentStatus } from "./types"
 import type { DashboardResource } from "./types"
+import {
+  mitxonlineCourses,
+  mitxonlineProgram,
+  sortDashboardCourses,
+} from "./transform"
+import { setupProgramsAndCourses } from "./test-utils"
 
 describe("Transforming mitxonline enrollment data to DashboardResource", () => {
   test.each([
@@ -53,4 +59,33 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
     expect(transformed).toHaveLength(1)
     expect(transformed[0].run.certificateUpgradePrice).toEqual("10")
   })
+
+  test("sortDashboardCourses sorts courses by enrollment status and program order", () => {
+    const { programA, coursesA } = setupProgramsAndCourses()
+
+    const enrollments = [
+      mitx.enrollment.courseEnrollment({
+        run: { course: { id: coursesA[0].id } },
+        grades: [mitx.enrollment.grade({ passed: true })],
+        enrollment_mode: "audit",
+      }),
+      mitx.enrollment.courseEnrollment({
+        run: { course: { id: coursesA[1].id } },
+        grades: [],
+        enrollment_mode: "verified",
+      }),
+    ]
+
+    const sortedCourses = sortDashboardCourses(
+      mitxonlineProgram(programA),
+      mitxonlineCourses({ courses: coursesA, enrollments }),
+    )
+
+    expect(sortedCourses.map((course) => course.id)).toEqual([
+      `mitxonline-course-${coursesA[1].id}`, // Enrolled course
+      `mitxonline-course-${coursesA[0].id}`, // Completed course
+      `mitxonline-course-${coursesA[2].id}`, // Not enrolled course
+      `mitxonline-course-${coursesA[3].id}`, // Not enrolled course
+    ])
+  })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -105,4 +105,34 @@ const mitxonlineProgram = (raw: V2Program): DashboardProgram => {
   }
 }
 
-export { mitxonlineEnrollments, mitxonlineCourses, mitxonlineProgram }
+const sortDashboardCourses = (
+  program: DashboardProgram,
+  courses: DashboardCourse[],
+) => {
+  return courses.sort((a, b) => {
+    const aCompleted = a.enrollment?.status === EnrollmentStatus.Completed
+    const bCompleted = b.enrollment?.status === EnrollmentStatus.Completed
+    const aEnrolled = a.enrollment?.status === EnrollmentStatus.Enrolled
+    const bEnrolled = b.enrollment?.status === EnrollmentStatus.Enrolled
+    if (aEnrolled && !bEnrolled) {
+      return -1
+    }
+    if (!aEnrolled && bEnrolled) {
+      return 1
+    }
+    if (aCompleted && !bCompleted) {
+      return -1
+    }
+    if (!aCompleted && bCompleted) {
+      return 1
+    }
+    return 0
+  })
+}
+
+export {
+  mitxonlineEnrollments,
+  mitxonlineCourses,
+  mitxonlineProgram,
+  sortDashboardCourses,
+}
diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
@@ -1,16 +1,19 @@
 import React from "react"
 import { renderWithProviders, screen, within } from "@/test-utils"
 import OrganizationContent from "./OrganizationContent"
-import * as u from "api/test-utils"
 import { setMockResponse } from "api/test-utils"
 import { urls, factories } from "api/mitxonline-test-utils"
 import { mockOrgData } from "api/mitxonline-hooks/enrollment"
 import { useFeatureFlagEnabled } from "posthog-js/react"
+import {
+  mitxonlineCourses,
+  mitxonlineProgram,
+  sortDashboardCourses,
+} from "./CoursewareDisplay/transform"
+import { setupProgramsAndCourses } from "./CoursewareDisplay/test-utils"
 
 const makeCourseEnrollment = factories.enrollment.courseEnrollment
 const makeGrade = factories.enrollment.grade
-const makeProgram = factories.programs.program
-const makeCourses = factories.courses.courses
 
 jest.mock("posthog-js/react")
 const mockedUseFeatureFlagEnabled = jest
@@ -22,41 +25,6 @@ describe("OrganizationContent", () => {
     mockedUseFeatureFlagEnabled.mockReturnValue(true)
   })
 
-  const setupProgramsAndCourses = () => {
-    const user = u.factories.user.user()
-    setMockResponse.get(u.urls.userMe.get(), user)
-
-    const orgId = mockOrgData.orgX.id
-    const coursesA = makeCourses({ count: 4 })
-    const coursesB = makeCourses({ count: 3 })
-    const programA = makeProgram({
-      courses: coursesA.results.map((c) => c.id),
-    })
-    const programB = makeProgram({
-      courses: coursesB.results.map((c) => c.id),
-    })
-
-    setMockResponse.get(
-      urls.programs.programsList({ orgId: mockOrgData.orgX.id }),
-      { results: [programA, programB] },
-    )
-    setMockResponse.get(urls.courses.coursesList({ id: programA.courses }), {
-      results: coursesA.results,
-    })
-    setMockResponse.get(urls.courses.coursesList({ id: programB.courses }), {
-      results: coursesB.results,
-    })
-
-    return {
-      orgId,
-      user,
-      programA,
-      programB,
-      coursesA: coursesA.results,
-      coursesB: coursesB.results,
-    }
-  }
-
   it("displays a header for each program returned and cards for courses in program", async () => {
     const { orgId, programA, programB, coursesA, coursesB } =
       setupProgramsAndCourses()
@@ -82,7 +50,7 @@ describe("OrganizationContent", () => {
   })
 
   test("Shows correct enrollment status", async () => {
-    const { orgId, coursesA } = setupProgramsAndCourses()
+    const { orgId, programA, coursesA } = setupProgramsAndCourses()
     const enrollments = [
       makeCourseEnrollment({
         run: { course: { id: coursesA[0].id, title: coursesA[0].title } },
@@ -104,15 +72,19 @@ describe("OrganizationContent", () => {
       "enrollment-card-desktop",
     )
     expect(cards.length).toBeGreaterThan(0)
+    const sortedCourses = sortDashboardCourses(
+      mitxonlineProgram(programA),
+      mitxonlineCourses({ courses: coursesA, enrollments: enrollments }),
+    )
     cards.forEach((card, i) => {
-      const course = coursesA[i]
+      const course = sortedCourses[i]
       expect(card).toHaveTextContent(course.title)
       const indicator = within(card).getByTestId("enrollment-status")
 
       if (i === 0) {
-        expect(indicator).toHaveTextContent("Completed")
-      } else if (i === 1) {
         expect(indicator).toHaveTextContent("Enrolled")
+      } else if (i === 1) {
+        expect(indicator).toHaveTextContent("Completed")
       } else {
         expect(indicator).toHaveTextContent("Not Enrolled")
       }
diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx
@@ -146,7 +146,7 @@ const OrgProgramDisplay: React.FC<{
         <Typography variant="body1">{program.description}</Typography>
       </ProgramHeader>
       <PlainList itemSpacing={0}>
-        {courses.map((course) => (
+        {transform.sortDashboardCourses(program, courses).map((course) => (
           <DashboardCardStyled
             Component="li"
             key={course.id}
