Skip to content

fix: SettingsPage syncs active tab when ?tab changes post-mount (closes #479)#551

Merged
hellodk merged 2 commits into
masterfrom
fix/479-settings-tab-sync
Jun 7, 2026
Merged

fix: SettingsPage syncs active tab when ?tab changes post-mount (closes #479)#551
hellodk merged 2 commits into
masterfrom
fix/479-settings-tab-sync

Conversation

@hellodk

@hellodk hellodk commented Jun 7, 2026

Copy link
Copy Markdown
Owner

Summary

  • SettingsPage read ?tab from the URL only in the useState lazy initializer, so external navigation (back/forward, programmatic history.push) while the page stayed mounted left the displayed tab out of sync with the URL.
  • Added a useEffect watching searchParams that calls setActiveTab only when the normalised value differs from the current tab, preventing update loops.
  • Extracted the param→tab resolution into a standalone pure helper frontend/src/lib/settingsTabParam.ts (resolveSettingsTab) so the logic is testable without React or a browser.
  • 14 new unit tests cover all 8 tabs, both legacy aliases ('Bootstrap' / 'Advanced''Automation'), empty string, and null.
  • Existing normaliseLegacyTab inline logic removed from the component; TABS constant retained for the JSX tab bar.

Closes #479

Test plan

  • pytest tests/unit/test_settings_tab_param.py -v — 14 tests, all pass
  • pytest tests/unit/ -q — 1957 passed, 0 failures
  • pnpm exec tsc -b --noEmit (frontend) — exit 0
  • pnpm exec eslint src/pages/SettingsPage.tsx src/lib/settingsTabParam.ts — exit 0
  • All pre-commit hooks passed (tsc, eslint, ruff, format)

🤖 Generated with Claude Code

…loses #479)

SettingsPage initialised activeTab from ?tab only once in useState. External
navigation (back/forward, programmatic pushes) while the page stayed mounted
silently desynchronised the displayed tab from the URL.

Fix: add a useEffect that watches searchParams and calls setActiveTab only when
the resolved tab differs from the current one, guarding against update loops.

Extract the param→tab resolution into a standalone pure helper
(frontend/src/lib/settingsTabParam.ts) so it can be node-strip tested without
React. 13 new behavioural unit tests cover all tabs, both legacy aliases
(Bootstrap/Advanced → Automation), empty and null inputs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@hellodk hellodk added bug Something is broken p3-low Nice to have frontend Frontend / React changes labels Jun 7, 2026
@github-actions github-actions Bot added the test Test coverage improvement label Jun 7, 2026
@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

Coverage Report

81.1% on fleet_platform/services/ (gate: 80%)

Gate passed

@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

Coverage Report

81.1% on fleet_platform/services/ (gate: 80%)

Gate passed

@hellodk
hellodk merged commit c235bba into master Jun 7, 2026
10 checks passed
@hellodk
hellodk deleted the fix/479-settings-tab-sync branch June 7, 2026 14:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something is broken frontend Frontend / React changes p3-low Nice to have test Test coverage improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

P3: #457 fix — SettingsPage reads ?tab only on mount; param changes while mounted don't switch tabs

1 participant