Repository navigation
refactor: set the page title with Helmet on seven pages - #3345
PRAYAG-PATEL-1998 wants to merge 7 commits into
Conversation
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
… keep Helmet Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
|
Thanks for the pull request, @PRAYAG-PATEL-1998! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Submit a signed contributor agreement (CLA)
If you've signed an agreement in the past, you may need to re-sign. Once you've signed the CLA, please allow 1 business day for it to be processed. 🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. DetailsWhere can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
Description
Seven pages set the browser tab title with
document.title = …. This PR moves each one to<Helmet><title>…</title></Helmet>, the pattern thatCourseExportPage,CourseOutline,VideosPageand other pages already use. The title text is unchanged: each page still builds it withgetPageHeadTitleand its existingintlheading message.PagesAndResources,CustomPages,FilesPage,ScheduleAndDetails,CourseTeam: delete thedocument.titleline and add a<Helmet>as the first child of the main return.CourseUnit: delete theuseEffectthat only set the title (and its unused import) and add a<Helmet>in the main return.GroupConfigurations: this page already rendered a<Helmet>, so I only delete the duplicatedocument.titleline.sets the page title through Helmet, in its existing test file. It readsHelmet.peek().title, asCourseExportPage.test.tsxdoes.Users affected: Course Authors (the browser tab title only). I built each title from the same helper and messages as before, and I checked the tab titles in a running Studio.
Supporting information
Closes #897. Maintainer direction in the issue: "Please open one PR for all seven and anything else related to the titles." To find anything else related, I searched for other direct title writes on this branch:
No matches remain.
Certificatesalready sets its title through Helmet (useCertificatesreturns the title andCertificates.tsxrenders it in<title>).One change from my first comment on the issue: I said each page would get a new translatable title message. That is not needed, because all seven pages already format their title from an existing
intlheading message, so this PR adds no messages.Testing instructions
Tests:
npm ciTZ=UTC npx fedx-scripts jest --silent src/pages-and-resources src/group-configurations src/course-unit/CourseUnit.test src/course-team src/schedule-and-details src/custom-pages src/files-and-videos/files-pageBefore the change, the six new tests for
CourseTeam,CustomPages,PagesAndResources,FilesPage,ScheduleAndDetailsandCourseUnitfail withTypeError: Cannot read properties of undefined (reading 'title'), because those pages mount no<Helmet>. To see this, run the new test files against the base commit.To check in Studio: open each of the seven pages and compare the tab title with the one on
master. I did this on this branch and the tab titles were correct.Other information
GroupConfigurationstest passes before and after this change, because that page already had a<Helmet>. It guards the title but does not prove the fix.npm run types,oxlint --type-aware --deny-warningsanddprint checkon the 14 changed files. All pass.npm run lint(on my Windows PC dprint flags about 2,000 files for CRLF line endings),make validate, and the full Jest suite. CI will run them.CourseOutline,VideosPageandGradingSettings. The old code also set it while loading and on permission-denied. Should those returns get a title too? I can add it if you want.AI use: I directed this change and Claude Code implemented it. I decided what to do: this issue, one PR for the seven pages, and Jest tests plus a manual check in Studio. I brought the options and constraints, we evaluated them together, I made the decisions, and Claude wrote the code in small commits, one per page. The test approach was mine, a test for each page that fails without the fix, and Claude wrote it and tightened it. I also used it to map the project structure, to find the failing code, and to draw out edge cases. Examples: the loading and permission-denied returns that have no title, the duplicate
document.titleinGroupConfigurations, and the titleuseEffectinCourseUnit. Claude Code ran the tests and checks listed here, and I ran the tests myself as well. I read the diff and can explain each change. Commits carry aCo-Authored-Bytrailer for Claude.Best Practices Checklist
.ts,.tsx). (No new files.)propTypesanddefaultPropsin any new or modified code.src/testUtils.tsx(specificallyinitializeMocks)messages.tsfiles have adescriptionfor translators to use. (No new messages.)../in import paths. To import from parent folders, use@src.🤖 Generated with Claude Code