Skip to content

chore: alphabetize user settings sidebar#26069

Open
blinkagent[bot] wants to merge 4 commits into
mainfrom
blink/alphabetize-user-settings-sidebar
Open

chore: alphabetize user settings sidebar#26069
blinkagent[bot] wants to merge 4 commits into
mainfrom
blink/alphabetize-user-settings-sidebar

Conversation

@blinkagent
Copy link
Copy Markdown
Contributor

@blinkagent blinkagent Bot commented Jun 4, 2026

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:

  • Account
  • Appearance
  • External Authentication
  • Notifications
  • OAuth2 Applications
  • Schedule
  • Secrets
  • Security
  • SSH Keys
  • Tokens

Sidebar.stories.tsx enables advanced_template_scheduling and the oauth2 experiment via the withDashboardProvider decorator so every conditional item renders, and its play function asserts the rendered list is sorted (localeCompare). The new story also gives Chromatic something to visually diff against.

Requested on behalf of @tracyjohnsonux.

@github-actions github-actions Bot added the community Pull Requests and issues created by the community. label Jun 4, 2026
@tracyjohnsonux
Copy link
Copy Markdown
Contributor

/coder-agents-review

@coder-agents-review
Copy link
Copy Markdown
Contributor

coder-agents-review Bot commented Jun 4, 2026

Chat: Review in progress | View chat
Requested: 2026-06-04 17:27 UTC by @tracyjohnsonux

deep-review v0.7.1 | Round 1 | 6bd4131..17fe42b

Last posted: Round 1, 3 findings (2 Nit, 1 Note), COMMENT. Review

Finding inventory

Findings

# Sev Status Location Summary Round Reviewer Posted
CRF-1 Nit Open Sidebar.test.tsx:1 New vitest/RTL test file for component; project convention requires Storybook story R1 Netero, Mafu-san Yes
CRF-2 Nit Open Sidebar.test.tsx:78 [...expectedOrder].sort(fn) should use toSorted(fn) R1 Ging-ts Yes
CRF-3 Note Open Sidebar.test.tsx:18 dashboardValue/Wrapper duplicates ChatsSidebar.test.tsx pattern R1 Robin Yes

Round log

Round 1

Panel (13 reviewers). 0 P0-P2, 0 P3, 2 Nit, 1 Note. Reviewed against 6bd4131..17fe42b.

About deep-review

CRF = Coder Review Finding (P0-P4, Nit, Note)

Reviewer Focus
Bisky tests
Chopper ops/errors
Churn-guard change verification
Ging language modernization
Gon naming
Hisoka edge cases
Killua perf
Kite change integrity
Knov contracts
Knuckle SQL
Kurapika security
Law decomposition
Leorio docs
Luffy product
Mafu-san process
Mafuuu contracts
Melody dispatch/pairing
Meruem structural
Nami frontend
Netero mechanical checks
Pariston premise testing
Pen-botter product gaps
Razor verification
Robin duplication
Ryosuke Go arch
Takumi concurrency
Zoro shape

🤖 Managed by Coder Agents.

"Security",
"SSH Keys",
"Tokens",
];
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call — updated to just assert that whatever items are rendered come out alphabetically, no hardcoded list.

@linear-code
Copy link
Copy Markdown

linear-code Bot commented Jun 4, 2026

DES-22057

Copy link
Copy Markdown
Contributor

@coder-agents-review coder-agents-review Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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";
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

🤖

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)),
);
});
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

🤖

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switched to toSorted in the play function.

import themes, { DEFAULT_THEME } from "#/theme";
import { Sidebar } from "./Sidebar";

const dashboardValue = {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

🤖

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

community Pull Requests and issues created by the community.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants