Set document titles from current page content

[rahulbsw]

Resolves #324

Summary

• add shared page-title helpers for topic, Kafka Connect, KSQL DB, and reset-offset routes
• update page heading to set document titles from route-aware values
• add tests for page-heading behavior and route title mapping

Testing

• pnpm exec tsc --noEmit
• pnpm exec eslint src/components/Connect/Details/DetailsPage.tsx src/components/Connect/Header/Header.tsx src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx src/components/KsqlDb/KsqlDb.tsx src/components/Topics/Topic/Topic.tsx src/components/common/PageHeading/PageHeading.tsx src/components/common/PageHeading/tests/PageHeading.spec.tsx src/lib/pageTitles.ts src/lib/test/pageTitles.spec.ts
• pnpm exec jest --runInBand --runTestsByPath src/components/common/PageHeading/tests/PageHeading.spec.tsx src/lib/test/pageTitles.spec.ts

Summary by CodeRabbit

• New Features

  • Browser tab titles now update dynamically to reflect current page context (cluster, resource, and section) across Topics, Kafka Connect, KsqlDB, and Consumer Groups.
  • Page heading component accepts an explicit documentTitle to control the browser title.

• Tests

  • Added unit tests for page title builders and browser title update behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 51047d37-c9ab-4b10-902e-f783e1fdd9e8

📥 Commits

Reviewing files that changed from the base of the PR and between b412068 and 8deddc2.

📒 Files selected for processing (1)

• frontend/src/components/common/PageHeading/__tests__/PageHeading.spec.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/components/common/PageHeading/tests/PageHeading.spec.tsx

---

📝 Walkthrough

Walkthrough

This PR centralizes browser title construction with a new pageTitles.ts module, updates PageHeading to accept an optional documentTitle prop and set document.title, and updates five pages (Connect Details, Connect Header, KSQL DB, Topic, Reset Offsets) to compute and pass explicit titles based on pathname and entity context.

Changes

Document Title Generation

Layer / File(s)	Summary
Title utility library and tests frontend/src/lib/pageTitles.ts, frontend/src/lib/__test__/pageTitles.spec.ts	Introduces buildPageTitle and page-specific helpers (getKafkaConnectPageTitle, getKsqlDbPageTitle, getConnectDetailsPageTitle, getTopicPageTitle) and tests that assert expected composed titles for route patterns.
PageHeading component enhancement frontend/src/components/common/PageHeading/PageHeading.tsx, frontend/src/components/common/PageHeading/__tests__/PageHeading.spec.tsx	PageHeading accepts optional documentTitle?: string and sets document.title in a useEffect, preferring the explicit prop over buildPageTitle(text, title); tests cover default composition and override.
Page component integrations frontend/src/components/Connect/Details/DetailsPage.tsx, frontend/src/components/Connect/Header/Header.tsx, frontend/src/components/KsqlDb/KsqlDb.tsx, frontend/src/components/Topics/Topic/Topic.tsx, frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx	Pages import useLocation() to read pathname and pass a computed documentTitle to ResourcePageHeading using the appropriate title helper (e.g., getConnectDetailsPageTitle, getTopicPageTitle).

sequenceDiagram
  participant Page as Page Component
  participant Router as useLocation()
  participant TitleUtil as pageTitles
  participant PageHeading
  Page->>Router: read current pathname
  Page->>TitleUtil: compute title using pathname, clusterName, entityName
  TitleUtil->>Page: return computed documentTitle
  Page->>PageHeading: render ResourcePageHeading with documentTitle
  PageHeading->>document: set document.title (useEffect)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

A rabbit hops through every route with care,
Setting titles bright in the browser's air.
From Topics to Connectors, each path now shines,
With context-aware names—a tidy design! 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'Set document titles from current page content' accurately summarizes the primary change: implementing dynamic document titles based on page context.
Linked Issues check	✅ Passed	The PR implements all core requirements from issue #324: dynamic titles for topic pages, Kafka Connect pages, KSQL DB pages, reset offsets pages, and generic page heading with route-aware title computation.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing dynamic document titles. No unrelated modifications to routing logic, data fetching, or other components were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/common/PageHeading/__tests__/PageHeading.spec.tsx`:
- Around line 6-8: The test cleanup currently hard-resets document.title to an
empty string in the afterEach block; instead capture the original title before
tests run (e.g., store document.title in a variable at the top of
PageHeading.spec.tsx or in a beforeEach) and restore that saved value in the
afterEach handler so global state is returned to its prior value; update the
afterEach in PageHeading.spec.tsx to use the saved originalTitle rather than ''
and ensure the variable is accessible to the afterEach scope.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ebb7a07f-2818-4353-b38f-0801dd498950

📥 Commits

Reviewing files that changed from the base of the PR and between 4bf06dd and b412068.

📒 Files selected for processing (9)

• frontend/src/components/Connect/Details/DetailsPage.tsx
• frontend/src/components/Connect/Header/Header.tsx
• frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
• frontend/src/components/KsqlDb/KsqlDb.tsx
• frontend/src/components/Topics/Topic/Topic.tsx
• frontend/src/components/common/PageHeading/PageHeading.tsx
• frontend/src/components/common/PageHeading/__tests__/PageHeading.spec.tsx
• frontend/src/lib/__test__/pageTitles.spec.ts
• frontend/src/lib/pageTitles.ts