fix program collections in org dashboards (#2625)

* update mitxonline api package and update program collection signature

* fix issue with non-unique key on program collection loading skeletons

* program in req_tree is now a number (the ID)

* update UserOrganization to OrganizationPage

* use index instead of random number for skeleton key

* add some spacing between program collections if there happens to be multiple

Author: gumaerc

frontends/api/package.json

@@ -30,7 +30,7 @@
     "ol-test-utilities": "0.0.0"
   },
   "dependencies": {
-    "@mitodl/mitxonline-api-axios": "^2025.10.14",
+    "@mitodl/mitxonline-api-axios": "^2025.10.21",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.12.2"
   }

frontends/api/src/mitxonline/test-utils/factories/pages.ts

@@ -285,7 +285,7 @@ const programPageItem: PartialFactory<ProgramPageItem> = (override) => {
             node_type: "operator",
             operator: "all_of",
             operator_value: null,
-            program: faker.lorem.slug(),
+            program: faker.number.int(),
             course: null,
             title: "Required Courses",
             elective_flag: false,
@@ -297,7 +297,7 @@ const programPageItem: PartialFactory<ProgramPageItem> = (override) => {
             node_type: "operator",
             operator: "min_number_of",
             operator_value: "2",
-            program: faker.lorem.slug(),
+            program: faker.number.int(),
             course: null,
             title: "Elective Courses",
             elective_flag: true,

frontends/api/src/mitxonline/test-utils/factories/programs.ts

@@ -85,7 +85,13 @@ const programCollection: PartialFactory<V2ProgramCollection> = (
   const defaults: V2ProgramCollection = {
     id: uniqueProgramId.enforce(() => faker.number.int()),
     description: faker.lorem.paragraph(),
-    programs: programs({ count: 2 }).results.map((p) => p.id),
+    programs: programs({ count: 2 }).results.map((p, i) => {
+      return {
+        id: p.id,
+        title: p.title,
+        order: i + 1,
+      }
+    }),
     title: faker.lorem.words(3),
     created_on: faker.date.past().toISOString(),
     updated_on: faker.date.recent().toISOString(),

frontends/api/src/mitxonline/test-utils/factories/user.ts

@@ -4,7 +4,7 @@ import type {
   User,
   LegalAddress,
   UserProfile,
-  UserOrganization,
+  OrganizationPage,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { UniqueEnforcer } from "enforce-unique"
 
@@ -46,7 +46,7 @@ const userProfile = (): UserProfile => ({
   type_is_other: faker.datatype.boolean(),
 })
 
-const userOrganization = (): UserOrganization => ({
+const userOrganization = (): OrganizationPage => ({
   id: faker.number.int(),
   name: faker.company.name(),
   description: faker.company.catchPhrase(),

frontends/main/package.json

@@ -14,7 +14,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/styled": "^11.11.0",
     "@mitodl/course-search-utils": "^3.4.1",
-    "@mitodl/mitxonline-api-axios": "^2025.10.14",
+    "@mitodl/mitxonline-api-axios": "^2025.10.21",
     "@mitodl/smoot-design": "^6.17.1",
     "@next/bundle-analyzer": "^14.2.15",
     "@react-pdf/renderer": "^4.3.0",

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts

@@ -303,6 +303,7 @@ const createTestContracts = (
     name: faker.company.name(),
     organization: orgId,
     slug: faker.lorem.slug(),
+    membership_type: faker.helpers.arrayElement(["managed", "unmanaged"]),
   }))
 }
 

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts

@@ -270,7 +270,7 @@ const mitxonlineProgramCollection = (
     type: DashboardResourceType.ProgramCollection,
     title: raw.title,
     description: raw.description ?? null,
-    programIds: raw.programs,
+    programs: raw.programs,
   }
 }
 

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts

@@ -81,7 +81,13 @@ type DashboardProgramCollection = {
   type: typeof DashboardResourceType.ProgramCollection
   title: string
   description?: string | null
-  programIds: number[]
+  programs: DashboardProgramCollectionProgram[]
+}
+
+type DashboardProgramCollectionProgram = {
+  id?: number
+  title?: string
+  order?: number
 }
 
 type DashboardResource =
@@ -97,4 +103,5 @@ export type {
   DashboardCourseEnrollment,
   DashboardProgram,
   DashboardProgramCollection,
+  DashboardProgramCollectionProgram,
 }

frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx

@@ -144,7 +144,18 @@ describe("OrganizationContent", () => {
       setupProgramsAndCourses()
 
     // Set up the collection to include both programs in a specific order
-    programCollection.programs = [programB.id, programA.id] // Note: B first, then A
+    programCollection.programs = [
+      {
+        id: programB.id,
+        title: programB.title,
+        order: 1,
+      },
+      {
+        id: programA.id,
+        title: programA.title,
+        order: 2,
+      },
+    ] // Note: B first, then A
     setMockResponse.get(urls.programCollections.programCollectionsList(), {
       results: [programCollection],
     })
@@ -200,7 +211,13 @@ describe("OrganizationContent", () => {
     const { orgX, programA, programCollection, coursesA } =
       setupProgramsAndCourses()
 
-    programCollection.programs = [programA.id]
+    programCollection.programs = [
+      {
+        id: programA.id,
+        title: programA.title,
+        order: 1,
+      },
+    ]
     setMockResponse.get(urls.programCollections.programCollectionsList(), {
       results: [programCollection],
     })
@@ -240,7 +257,18 @@ describe("OrganizationContent", () => {
       setupProgramsAndCourses()
 
     // Set up the collection to include both programs
-    programCollection.programs = [programA.id, programB.id]
+    programCollection.programs = [
+      {
+        id: programB.id,
+        title: programB.title,
+        order: 1,
+      },
+      {
+        id: programA.id,
+        title: programA.title,
+        order: 2,
+      },
+    ]
     setMockResponse.get(urls.programCollections.programCollectionsList(), {
       results: [programCollection],
     })
@@ -332,7 +360,18 @@ describe("OrganizationContent", () => {
     const programANoCourses = { ...programA, courses: [] }
 
     // Set up the collection to include both programs
-    programCollection.programs = [programANoCourses.id, programB.id]
+    programCollection.programs = [
+      {
+        id: programANoCourses.id,
+        title: programANoCourses.title,
+        order: 1,
+      },
+      {
+        id: programB.id,
+        title: programB.title,
+        order: 2,
+      },
+    ]
     setMockResponse.get(urls.programCollections.programCollectionsList(), {
       results: [programCollection],
     })

frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx

@@ -19,6 +19,7 @@ import { PlainList, Skeleton, Stack, styled, Typography } from "ol-components"
 import {
   DashboardProgram,
   DashboardProgramCollection,
+  DashboardProgramCollectionProgram,
 } from "./CoursewareDisplay/types"
 import graduateLogo from "@/public/images/dashboard/graduate.png"
 import {
@@ -129,25 +130,36 @@ const ProgramDescription = styled(Typography)({
   },
 })
 
+const ProgramCollectionsList = styled(PlainList)({
+  display: "flex",
+  flexDirection: "column",
+  gap: "40px",
+})
+
 // Custom hook to handle multiple program queries and check if any have courses
-const useProgramCollectionCourses = (programIds: number[], orgId: number) => {
+const useProgramCollectionCourses = (
+  programs: DashboardProgramCollectionProgram[],
+  orgId: number,
+) => {
   const programQueries = useQueries({
-    queries: programIds.map((programId) =>
-      programsQueries.programsList({ id: programId, org_id: orgId }),
-    ),
+    queries: programs
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      .map((program) =>
+        programsQueries.programsList({ id: program.id, org_id: orgId }),
+      ),
   })
 
   const isLoading = programQueries.some((query) => query.isLoading)
 
   const programsWithCourses = programQueries
-    .map((query, index) => {
+    .map((query) => {
       if (!query.data?.results?.length) {
         return null
       }
       const program = query.data.results[0]
       const transformedProgram = transform.mitxonlineProgram(program)
       return {
-        programId: programIds[index],
+        programId: query.data.results[0].id,
         program: transformedProgram,
         hasCourses: program.courses && program.courses.length > 0,
       }
@@ -171,7 +183,7 @@ const OrgProgramCollectionDisplay: React.FC<{
 }> = ({ collection, contracts, enrollments, orgId }) => {
   const sanitizedDescription = DOMPurify.sanitize(collection.description ?? "")
   const { isLoading, programsWithCourses, hasAnyCourses } =
-    useProgramCollectionCourses(collection.programIds, orgId)
+    useProgramCollectionCourses(collection.programs, orgId)
   const firstCourseIds = programsWithCourses
     .map((p) => p?.program.courseIds[0])
     .filter((id): id is number => id !== undefined)
@@ -231,9 +243,9 @@ const OrgProgramCollectionDisplay: React.FC<{
       {header}
       <PlainList>
         {courses.isLoading &&
-          programsWithCourses.map((item) => (
+          programsWithCourses.map((item, index) => (
             <Skeleton
-              key={item?.programId}
+              key={`${collection.id}-${item?.programId}-${index}`}
               width="100%"
               height="65px"
               style={{ marginBottom: "16px" }}
@@ -400,7 +412,7 @@ const OrganizationContentInternal: React.FC<
       {programCollections.isLoading ? (
         skeleton
       ) : (
-        <PlainList>
+        <ProgramCollectionsList>
           {programCollections.data?.results.map((collection) => {
             const transformedCollection =
               transform.mitxonlineProgramCollection(collection)
@@ -414,7 +426,7 @@ const OrganizationContentInternal: React.FC<
               />
             )
           })}
-        </PlainList>
+        </ProgramCollectionsList>
       )}
       {programs.data?.results.length === 0 && (
         <HeaderRoot>