mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Danny White
7e25c27e02
## What kind of change does this PR introduce? Bug fix. Resolves FE-3469. ## What is the current behavior? On auth email template pages, the Docs button builds anchor hashes from the Studio URL slug (derived from user-facing titles), not from canonical template IDs. E.g. **Reset password** links to `#authemailtemplateresetpassword`, but the docs section is `#authemailtemplaterecovery`. 12 of 13 templates had broken Docs links. ## What is the new behavior? Docs links use an explicit `EMAIL_TEMPLATE_DOCS_ANCHORS` map keyed by `template.id`, matching the anchors in [customizing-email-templates.mdx](https://supabase.com/docs/guides/local-development/customizing-email-templates). Examples: - Reset password → `#authemailtemplaterecovery` - Magic link or OTP → `#authemailtemplatemagic_link` - Password changed → `#authemailnotificationpassword_changed` Dashboard URL slugs (`reset-password`, etc.) are unchanged. ## Additional context - Added `EMAIL_TEMPLATE_DOCS_ANCHORS` in `EmailTemplates.constants.ts` with `satisfies Record<AuthTemplateType, string>` for exhaustiveness - Added `EmailTemplates.constants.test.ts` to verify all template types are covered and anchors match docs heading paths **Test plan** - [x] `pnpm --filter studio test EmailTemplates.constants` - [ ] Spot-check Docs button on Reset password, Magic link or OTP, and Password changed templates <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Tests** * Added automated checks to ensure every authentication email template has the correct documentation anchor mapping. * **Chores** * Updated the documentation link behavior for email templates to use a consistent, predefined anchor mapping—improving reliability and maintainability of the docs button. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Writing pages
Rough guidelines
- Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder
components/interfaces/xxx/...(Refer to the README.md under the components folder) - Keep to using
useStatehooks for any UI related logic, do not create MobX local stores to handle UI logic.
Template for building pages
import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'
// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'
// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'
// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'
// Name your page accordingly
const Page: NextPage = () => {
return (
<Layout>
<div>Page content</div>
</Layout>
)
}
export default withAuth(Page)