chore: alphabetize user settings sidebar#26069
Conversation
|
/coder-agents-review |
|
Chat: Review in progress | View chat deep-review v0.7.1 | Round 1 | Last posted: Round 1, 3 findings (2 Nit, 1 Note), COMMENT. Review Finding inventoryFindings
Round logRound 1Panel (13 reviewers). 0 P0-P2, 0 P3, 2 Nit, 1 Note. Reviewed against 6bd4131..17fe42b. About deep-reviewCRF = Coder Review Finding (P0-P4, Nit, Note)
|
| "Security", | ||
| "SSH Keys", | ||
| "Tokens", | ||
| ]; |
There was a problem hiding this comment.
I think we could just make this test check the order of whatever the items are. Otherwise someone in the future is likely to run CI and realize this test failed and then have to add another item to this list in the test.
There was a problem hiding this comment.
Good call — updated to just assert that whatever items are rendered come out alphabetically, no hardcoded list.
There was a problem hiding this comment.
Clean, well-scoped change. The alphabetical reorder is correct across all conditional-item permutations, and the dual-assertion test design (rendered order matches expected list AND expected list is itself sorted) catches both JSX misplacement and stale test data. Multiple reviewers independently verified both properties.
"I tried to build a case against this change and could not. The problem is correctly understood, the solution is proportional, and the fix is at the right level." (Pariston)
Severity summary: 2 Nit, 1 Note. No blocking issues.
🤖 This review was automatically generated with Coder Agents.
| @@ -0,0 +1,79 @@ | |||
| import { render, screen } from "@testing-library/react"; | |||
There was a problem hiding this comment.
Nit [CRF-1] AGENTS.md says: "Do not create standalone vitest/RTL test files for components or pages. Stories double as living documentation, visual regression coverage, and interaction test suites via play functions. Reserve plain vitest files for pure logic only." This test renders the Sidebar component and asserts on DOM output, which is component testing.
The directory already has 6+ vitest/RTL .test.tsx files for other pages, so this follows local precedent while violating the documented rule. If the test becomes a story, the withDashboardProvider decorator already supports features and experiments through story parameters, and the 28 lines of boilerplate collapse into a decorator and a parameters block.
(Netero, Mafu-san)
🤖
There was a problem hiding this comment.
Good catch — moved the assertion into the new Sidebar.stories.tsx play function and deleted Sidebar.test.tsx. The boilerplate collapses to the withDashboardProvider decorator with features/experiments parameters as suggested. Also gets us Chromatic visual coverage.
| expect(navItems).toEqual( | ||
| [...expectedOrder].sort((a, b) => a.localeCompare(b)), | ||
| ); | ||
| }); |
There was a problem hiding this comment.
Nit [CRF-2] [...expectedOrder].sort(...) is the manual version of expectedOrder.toSorted(...). The project targets esnext, and toSorted is already used in 5 places across the codebase (e.g. userSkills.ts, chats.ts, TaskPrompt.tsx). The stdlib version communicates intent more clearly and avoids the intermediate spread.
expect(navItems).toEqual(
expectedOrder.toSorted((a, b) => a.localeCompare(b)),
);(Ging-ts)
🤖
There was a problem hiding this comment.
Switched to toSorted in the play function.
| import themes, { DEFAULT_THEME } from "#/theme"; | ||
| import { Sidebar } from "./Sidebar"; | ||
|
|
||
| const dashboardValue = { |
There was a problem hiding this comment.
Note [CRF-3] The dashboardValue object and Wrapper component duplicate the same pattern from ChatsSidebar.test.tsx:77-106 (same mocks, same provider chain). This is the second copy. A third would make extracting a shared renderWithDashboard helper worthwhile.
(Robin)
🤖
There was a problem hiding this comment.
Acknowledged. The unit test got replaced with a story play function, so the duplicated wrapper is gone for this PR. Agree that a shared renderWithDashboard helper would be worth extracting if a third copy of the pattern shows up.
Sorts the items in the user settings sidebar alphabetically and adds Storybook coverage that asserts the rendered nav items remain in alphabetical order.
New order:
Sidebar.stories.tsxenablesadvanced_template_schedulingand theoauth2experiment via thewithDashboardProviderdecorator so every conditional item renders, and itsplayfunction asserts the rendered list is sorted (localeCompare). The new story also gives Chromatic something to visually diff against.Requested on behalf of @tracyjohnsonux.