fix: set document title via Helmet on the template route

Adopt the per-page document title pattern from frontend-base ADR 0015,
so apps generated from this template ship with a sensible browser-tab
title instead of inheriting the previous app's.  Since frontend-base's
migration how-to points to this repo for complete examples, including
the pattern here also makes it discoverable for new apps.

Refs openedx/frontend-base#250.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: arbrandes

package-lock.json

@@ -56,7 +56,8 @@
     "url": "https://github.com/openedx/frontend-template-application/issues"
   },
   "dependencies": {
-    "@edx/openedx-atlas": "^0.7.0"
+    "@edx/openedx-atlas": "^0.7.0",
+    "react-helmet": "^6.1.0"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.5.0",

package.json

@@ -0,0 +1,19 @@
+import { render, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { IntlProvider } from '@openedx/frontend-base';
+import Main from './Main';
+
+describe('Main', () => {
+  it('sets the document title from the page-title message and site name', async () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <BrowserRouter>
+          <Main />
+        </BrowserRouter>
+      </IntlProvider>
+    );
+    await waitFor(() => {
+      expect(document.title).toBe('Template | Template Test Site');
+    });
+  });
+});

src/Main.test.tsx

@@ -1,15 +1,27 @@
-import { CurrentAppProvider } from '@openedx/frontend-base';
+import { CurrentAppProvider, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Helmet } from 'react-helmet';
 import { Outlet } from 'react-router-dom';
 import { appId } from './constants';
+import messages from './messages';
 
 import './style.scss';
 
-const Main = () => (
-  <CurrentAppProvider appId={appId}>
-    <main className="d-flex flex-column flex-grow-1">
-      <Outlet />
-    </main>
-  </CurrentAppProvider>
-);
+const Main = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <CurrentAppProvider appId={appId}>
+      <Helmet>
+        <title>
+          {formatMessage(messages['template.page.title'], {
+            siteName: getSiteConfig().siteName,
+          })}
+        </title>
+      </Helmet>
+      <main className="d-flex flex-column flex-grow-1">
+        <Outlet />
+      </main>
+    </CurrentAppProvider>
+  );
+};
 
 export default Main;

src/Main.tsx

@@ -0,0 +1,11 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  'template.page.title': {
+    id: 'template.page.title',
+    defaultMessage: 'Template | {siteName}',
+    description: 'Document title for the template app',
+  },
+});
+
+export default messages;