alter org page header based on new requirements (#2659)

Author: gumaerc

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

@@ -26,6 +26,7 @@ const makeProgram = factories.programs.program
 const makeProgramCollection = factories.programs.programCollection
 const makeCourseEnrollment = factories.enrollment.courseEnrollment
 const makeGrade = factories.enrollment.grade
+const makeContract = factories.contracts.contract
 
 const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
   return mergeOverrides<DashboardCourse>(
@@ -127,6 +128,11 @@ const setupEnrollments = (includeExpired: boolean) => {
 const setupProgramsAndCourses = () => {
   const user = u.factories.user.user()
   const orgX = factories.organizations.organization({ name: "Org X" })
+  const contract = makeContract({
+    organization: orgX.id,
+    name: "Org X Contract",
+  })
+  orgX.contracts = [contract]
   const mitxOnlineUser = factories.user.user({ b2b_organizations: [orgX] })
   setMockResponse.get(u.urls.userMe.get(), user)
   setMockResponse.get(urls.userMe.get(), mitxOnlineUser)

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

@@ -37,8 +37,9 @@ describe("OrganizationContent", () => {
     renderWithProviders(<OrganizationContent orgSlug={orgX.slug} />)
 
     await screen.findByRole("heading", {
-      name: `Your ${orgX.name} Home`,
+      name: orgX.name,
     })
+    await screen.findByText(orgX.contracts[0].name)
 
     const programAHeader = await screen.findByText(programA.title)
     const programBHeader = await screen.findByText(programB.title)
@@ -300,8 +301,9 @@ describe("OrganizationContent", () => {
 
     // Wait for the header to appear
     await screen.findByRole("heading", {
-      name: `Your ${orgX.name} Home`,
+      name: orgX.name,
     })
+    await screen.findByText(orgX.contracts[0].name)
 
     // Since there are no programs or collections, no program/collection components should be rendered
     const programs = screen.queryAllByTestId("org-program-root")
@@ -331,8 +333,9 @@ describe("OrganizationContent", () => {
 
     // Wait for the header to appear
     await screen.findByRole("heading", {
-      name: `Your ${orgX.name} Home`,
+      name: orgX.name,
     })
+    await screen.findByText(orgX.contracts[0].name)
 
     // Should have no collections
     const collections = screen.queryAllByTestId("org-program-collection-root")

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

@@ -68,9 +68,10 @@ const OrganizationHeader: React.FC<{ org?: OrganizationPage }> = ({ org }) => {
       </ImageContainer>
       <Stack gap="8px">
         <Typography variant="h3" component="h1">
-          Your {org?.name} Home
+          {org?.name}
         </Typography>
-        <Typography variant="body1">MIT courses for {org?.name}</Typography>
+        {/* For now we will use the first contract name until we refactor this to be based on contracts / offerings */}
+        <Typography variant="body1">{org?.contracts[0]?.name}</Typography>
       </Stack>
     </HeaderRoot>
   )