Updates to page titles

frontends/jest.jsdom.config.ts

@@ -1,6 +1,8 @@
 import { resolve } from "path"
 import type { Config } from "@jest/types"
 
+process.env.SITE_NAME = "MIT Open"
+
 /**
  * Base configuration for jest tests.
  */

frontends/mit-open/src/pages/AboutPage/AboutPage.test.tsx

@@ -18,7 +18,7 @@ describe("AboutPage", () => {
       url: commonUrls.ABOUT,
     })
     await waitFor(() => {
-      expect(document.title).toBe("About Us")
+      expect(document.title).toBe("About Us | MIT Open")
     })
     screen.getByRole("heading", {
       name: "About Us",

frontends/mit-open/src/pages/AboutPage/AboutPage.tsx

@@ -79,9 +79,7 @@ const AboutPage: React.FC = () => {
   return (
     <Container>
       <PageContainer>
-        <MetaTags>
-          <title>About Us</title>
-        </MetaTags>
+        <MetaTags title="About Us" />
         <BannerContainer>
           <BannerContainerInner>
             <Breadcrumbs

frontends/mit-open/src/pages/ArticleDetailsPage/ArticleDetailsPage.test.tsx

@@ -21,7 +21,7 @@ describe("ArticleDetailsPage", () => {
     screen.getByText(article.html)
 
     await waitFor(() => {
-      expect(document.title).toBe(article.title)
+      expect(document.title).toBe(`${article.title} | MIT Open`)
     })
   })
 

frontends/mit-open/src/pages/ArticleDetailsPage/ArticleDetailsPage.tsx

@@ -26,9 +26,7 @@ const ArticlesDetailPage: React.FC = () => {
       src="/static/images/course_search_banner.png"
       className="articles-detail-page"
     >
-      <MetaTags>
-        <title>{article.data?.title}</title>
-      </MetaTags>
+      <MetaTags title={article.data?.title} />
       <Container maxWidth="sm">
         <GridContainer>
           <GridColumn variant="single-full" container>

frontends/mit-open/src/pages/ArticleUpsertPages/ArticleEditPage.test.tsx

@@ -41,7 +41,7 @@ describe("ArticleEditPage", () => {
     expect(bodyInput).toBeInstanceOf(HTMLTextAreaElement)
 
     await waitFor(() => {
-      expect(document.title).toBe(`Editing: ${article.title}`)
+      expect(document.title).toBe(`${article.title} | Edit | MIT Open`)
     })
   })
 

frontends/mit-open/src/pages/ArticleUpsertPages/ArticleEditPage.tsx

@@ -21,7 +21,7 @@ const ArticleEditPage: React.FC = () => {
     [navigate, id],
   )
   const goHome = useCallback(() => navigate("/"), [navigate])
-  const title = `Editing: ${article.data?.title ?? ""}`
+  const title = article.data?.title ? `${article.data?.title} | Edit` : "Edit"
   return (
     <ArticleUpsertPage title={title}>
       <ArticleUpsertForm

frontends/mit-open/src/pages/ArticleUpsertPages/ArticleUpsertPage.tsx

@@ -14,9 +14,7 @@ const ArticleUpsertPage: React.FC<ArticleUpsertPageProps> = ({
 }) => {
   return (
     <BannerPage src="/static/images/course_search_banner.png">
-      <MetaTags>
-        <title>{title}</title>
-      </MetaTags>
+      <MetaTags title={title} />
       <Container maxWidth="sm">
         <GridContainer>
           <GridColumn variant="single-full">{children}</GridColumn>

frontends/mit-open/src/pages/DashboardPage/Dashboard.test.tsx

@@ -191,7 +191,7 @@ describe("DashboardPage", () => {
     setupAPIs()
     renderWithProviders(<DashboardPage />)
     await waitFor(() => {
-      expect(document.title).toBe("User Home")
+      expect(document.title).toBe("Your MIT Learning Journey | MIT Open")
     })
     screen.getByRole("heading", {
       name: "Your MIT Learning Journey",

frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx

@@ -415,9 +415,7 @@ const DashboardPage: React.FC = () => {
     <Background>
       <Page>
         <DashboardContainer>
-          <MetaTags>
-            <title>User Home</title>
-          </MetaTags>
+          <MetaTags title="Your MIT Learning Journey" />
           <TabContext value={tabValue}>
             <DashboardGrid>
               <DashboardGridItem>

frontends/mit-open/src/pages/DepartmentListingPage/DepartmentListingPage.test.tsx

@@ -82,11 +82,11 @@ describe("DepartmentListingPage", () => {
     }
   }
 
-  it("Has a page title", async () => {
+  it("Has correct page title", async () => {
     setupApis()
     renderWithProviders(<DepartmentListingPage />)
     await waitFor(() => {
-      expect(document.title).toBe("MIT Open | Departments")
+      expect(document.title).toBe("Departments | MIT Open")
     })
     screen.getByRole("heading", { name: "Departments" })
   })

frontends/mit-open/src/pages/DepartmentListingPage/DepartmentListingPage.tsx

@@ -215,9 +215,7 @@ const DepartmentListingPage: React.FC = () => {
 
   return (
     <Page>
-      <MetaTags>
-        <title>MIT Open | Departments</title>
-      </MetaTags>
+      <MetaTags title="Departments" />
       <Banner
         backgroundUrl="/static/images/background_steps.jpeg"
         title="Departments"

frontends/mit-open/src/pages/ErrorPage/ErrorPage.test.tsx

@@ -45,7 +45,7 @@ test.each([{ status: 401 }, { status: 403 }])(
     // redirect elsewhere.
     setup(status, { user: { is_authenticated: true } })
     await waitFor(() => {
-      expect(document.title).toBe("Not Allowed")
+      expect(document.title).toBe("Not Allowed | MIT Open")
     })
   },
 )
@@ -54,15 +54,15 @@ test("ErrorPage shows NotFound on API 404 errors", async () => {
   allowConsoleErrors()
   setup(404)
   await waitFor(() => {
-    expect(document.title).toBe("Not Found")
+    expect(document.title).toBe("Not Found | MIT Open")
   })
 })
 
 test("ErrorPage shows NotFound on frontend routing 404 errors", async () => {
   allowConsoleErrors()
   renderTestApp({ url: "/some-fake-route" })
   await waitFor(() => {
-    expect(document.title).toBe("Not Found")
+    expect(document.title).toBe("Not Found | MIT Open")
   })
 })
 
@@ -87,7 +87,7 @@ test("ErrorPage shows ForbiddenPage on restricted routes.", async () => {
     { user: { is_authenticated: true } },
   )
   await waitFor(() => {
-    expect(document.title).toBe("Not Allowed")
+    expect(document.title).toBe("Not Allowed | MIT Open")
   })
 })
 
@@ -107,7 +107,7 @@ test("ErrorPage shows fallback and logs unexpected errors", async () => {
     { user: { is_authenticated: true } },
   )
   await waitFor(() => {
-    expect(document.title).toBe("Not Allowed")
+    expect(document.title).toBe("Not Allowed | MIT Open")
   })
   expect(consoleError).toHaveBeenCalledWith(Error("Some Error"))
 })

frontends/mit-open/src/pages/ErrorPage/ErrorPageTemplate.tsx

@@ -21,9 +21,8 @@ const ErrorPageTemplate: React.FC<ErrorPageTemplateProps> = ({
   return (
     <Container maxWidth="sm">
       <MuiCard sx={{ marginTop: "1rem" }}>
-        <MetaTags>
+        <MetaTags title={title}>
           <meta name="robots" content="noindex,noarchive" />
-          <title>{title}</title>
         </MetaTags>
         <CardContent>{children}</CardContent>
         <CardActions>

frontends/mit-open/src/pages/ErrorPage/ForbiddenPage.test.tsx

@@ -31,7 +31,7 @@ test("The ForbiddenPage loads with meta", async () => {
   })
   renderWithProviders(<ForbiddenPage />)
   await waitFor(() => {
-    expect(document.title).toBe("Not Allowed")
+    expect(document.title).toBe("Not Allowed | MIT Open")
   })
 
   const meta = document.head.querySelector('meta[name="robots"]')

frontends/mit-open/src/pages/FieldPage/EditFieldPage.tsx

@@ -38,9 +38,7 @@ const EditFieldPage: React.FC = () => {
       name={field.data?.name}
       channelType={field.data?.channel_type}
     >
-      <MetaTags>
-        <title>Edit {field.data.title} Channel</title>
-      </MetaTags>
+      <MetaTags title={[field.data.title, "Edit"]} />
       {field.data.is_moderator ? (
         <TabContext value={tabValue}>
           <div className="page-subbanner">