refactor(components): decompose SettingsTab into per-section files#53
Merged
Conversation
Extract formatBytes, formatSpeed, formatVerificationStatus, getSearchApiEmbeddingBadge, validateQualityThresholds, and formatAuditEvent into SettingsTab.helpers.ts. SettingsTab.tsx re-exports them so SettingsTab.helpers.test.ts keeps passing without import changes.
Extract Language Model, Context Window, Semantic Search, Knowledge Base, Advanced Search, Template Variables, and Jira sections into dedicated sibling files under sections/. The SettingsTab shell now orchestrates these section components along with the previously extracted ops and overview sections. Each section owns the props it needs; variable-form state lives inside VariablesSection, jira-form state lives inside JiraSection, and show-other-models toggle lives inside ModelSection.
Move the cross-section initial data load (Promise.all of 12 hook fetches), the audit loader, and the MemoryKernel preflight refresh into useSettingsInit. Shell still calls the 10 data hooks and orchestrates handlers; the new hook owns the init-driven state plus the effects that populate it on mount.
Add focused unit tests for ModelSection, ContextWindowSection, SemanticSearchSection, KbSection, AdvancedSearchSection, VariablesSection, and JiraSection. Each test mocks only the props that section needs. The omnibus SettingsTab.test.tsx remains as the integration suite exercising cross-section flows.
The setters returned by useSettingsInit are stable React setState references, but eslint's exhaustive-deps lint still wants them in the dependency arrays. Include them to silence the warnings and document the dependency clearly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Decompose
src/components/Settings/SettingsTab.tsx(1842 → 847 LOC shell) into seven new per-section sibling files undersrc/components/Settings/sections/plus auseSettingsInithook that centralizes initial-load orchestration. Exported helpers move toSettingsTab.helpers.ts(re-exported from the shell so existing tests keep working).Why
Longest settings file in the codebase. Each section has distinct concerns (LLM, KB, Jira, semantic-search, advanced-search, variables, context window) that deserve their own focused file. Per-section tests mock only the props that section actually uses.
How
5 commits:
SettingsTab.helpers.ts(shell re-exports to keepSettingsTab.helpers.test.tsgreen).ModelSection,ContextWindowSection,SemanticSearchSection,KbSection,AdvancedSearchSection,VariablesSection,JiraSection. Section-local state (variable form, jira form, show-other-models toggle) lives inside the owning section.useSettingsInithook that centralizes the init fetch orchestration, audit loading, and MemoryKernel preflight refresh.SettingsTab.test.tsxstays as the integration suite.useCallbackarrays to silence exhaustive-deps warnings after the refactor.Decisions / notes
SettingsContextwould add overhead without measurable clarity gain. Prop drilling kept.useLlm,useKb, etc.) and passes their methods intouseSettingsInit. Centralizing the hook calls inside the init hook would break the existingSettingsTab.test.tsxmock layout; that shift can be done in a follow-up if the shell's hook list grows further.SettingsTab.tsxre-exportsformatBytes,formatSpeed,formatVerificationStatus,getSearchApiEmbeddingBadge,validateQualityThresholds, andformatAuditEventsoSettingsTab.helpers.test.tskeeps passing unchanged.Testing
pnpm ui:gate:static— clean (only pre-existing warnings in other files).pnpm test— 184 tests pass (was 168; +16 new per-section tests).Risk
SettingsTabdefault export, helper named exports, and CSS class names preserved.