Adjustments to devmode #82
Conversation
WalkthroughAdds a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant EditorMode as useEditorMode
participant UI as ResizeHandle
User->>Router: Navigate app
Router->>EditorMode: get editorMode
EditorMode-->>Router: editorMode.data
alt editorMode != "dev"
Router->>UI: Render ResizeHandle
else editorMode == "dev"
Router--x UI: Do not render ResizeHandle
end
sequenceDiagram
participant User
participant Index as Index View
participant EditorMode as useEditorMode
participant TopBar
participant NodeList
User->>Index: Open project
Index->>EditorMode: get editorMode
EditorMode-->>Index: editorMode.data
Index->>TopBar: Render TopBar (always)
alt editorMode != "dev"
TopBar-->>User: Show Language dropdown, Pull button
else editorMode == "dev"
TopBar-->>User: Hide Language dropdown, Pull button
end
Index->>NodeList: Render list (full selection)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
src/ui/components/NodeList/NodeRow.css (1)
39-42: Deduplicate.keyand.nsrules; also make.actionspan all rows to avoid misalignment.
.nsduplicates.key. Combine them. With the new third row,.actioncurrently spans only two rows; center it across all rows to prevent odd alignment when namespace is present.Apply:
.action { - grid-column: 3; - grid-row: 1 / span 2; + grid-column: 3; + grid-row: 1 / -1; align-self: center; } -.key { - cursor: unset; - grid-column: 1 / span 2; -} - -.ns { - cursor: unset; - grid-column: 1 / span 2; -} +.key, +.ns { + cursor: unset; + grid-column: 1 / span 2; +}src/ui/views/Push/Changes.tsx (1)
28-28: Verify fixed rowHeight=28 vs variable content height (possible clipping/overlap).NodeRow can render text, key, and namespace; content may exceed 28px, especially with wrapped text. Confirm in both “New keys” and “Changed keys” lists that virtualization (if any) doesn’t clip.
If clipping occurs, consider:
- Use a taller rowHeight (e.g., 48–56), or
- Provide a custom row that omits/wraps less, or
- Switch to dynamic measurement (estimateSize) if NodeList supports it.
Also applies to: 51-51
src/ui/views/Router.tsx (1)
103-104: Avoid dev/non‑dev flicker while editorMode loads.
editorMode.datais undefined initially, so the handle renders then disappears in dev, causing flicker.Apply:
- {editorMode.data !== "dev" && <ResizeHandle />} + {editorMode.isSuccess && editorMode.data !== "dev" && <ResizeHandle />}src/ui/views/Index/Index.tsx (3)
120-137: Gate UI by editorMode load state to prevent flicker.Same pattern as Router: undefined
editorMode.dataevaluates as non‑dev. Wait for success before showing non‑dev controls.Minimal change:
- {languages && editorMode.data !== "dev" && ( + {languages && editorMode.isSuccess && editorMode.data !== "dev" && ( <select data-cy="index_language_select" className={styles.languageContainer} value={language} onChange={(e) => { handleLanguageChange( (e.target as HTMLInputElement).value ); }} > {languages.map((l) => ( <option key={l.tag} value={l.tag}> {l.name} </option> ))} </select> )} ... - {editorMode.data !== "dev" && ( + {editorMode.isSuccess && editorMode.data !== "dev" && ( <Fragment> <Button data-cy="index_pull_button" onClick={handlePull} secondary > {nothingSelected ? "Pull all" : "Pull"} </Button> <Button data-cy="index_create_copy_button" onClick={handleCopy} secondary > Copy </Button> </Fragment> )}Also applies to: 143-161
121-129: Add an accessible label to the language select.The select lacks an associated label; add an aria-label for screen readers.
- <select + <select + aria-label="Language" data-cy="index_language_select" className={styles.languageContainer} value={language} onChange={(e) => {
165-175: Make the Settings “button” keyboard accessible.It’s a div with role=button but no keyboard handling or focusability.
- <div + <div data-cy="index_settings_button" className={styles.settingsButton} onClick={() => setRoute("settings")} role="button" + tabIndex={0} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + setRoute("settings"); + } + }} > <Settings width={15} height={15} /> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/ui/components/NodeList/NodeRow.css(1 hunks)src/ui/components/NodeList/NodeRow.css.d.ts(1 hunks)src/ui/components/NodeList/NodeRow.tsx(1 hunks)src/ui/views/Index/Index.tsx(2 hunks)src/ui/views/Push/Changes.tsx(2 hunks)src/ui/views/Router.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/ui/views/Router.tsx (2)
src/ui/hooks/useEditorMode.ts (1)
useEditorMode(4-9)src/ui/components/ResizeHandle/ResizeHandle.tsx (1)
ResizeHandle(15-154)
src/ui/views/Index/Index.tsx (2)
src/ui/components/TopBar/TopBar.tsx (1)
TopBar(12-31)src/ui/state/GlobalState.ts (1)
setRoute(61-64)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cypress
🔇 Additional comments (3)
src/ui/components/NodeList/NodeRow.css.d.ts (1)
6-6: Type addition looks good.
styles.nsmatches the CSS module and usage in TSX.src/ui/components/NodeList/NodeRow.tsx (1)
80-80: LGTM: style hook-up for namespace.Wires the new
.nsclass without changing behavior.src/ui/views/Index/Index.tsx (1)
205-205: Confirm NodeList row height vs content here too.Selection rows may show long text and namespace; ensure default NodeList rowHeight (or lack thereof) matches actual content height to avoid clipping, consistent with the Push/Changes view.
4 participants
The devmode now allows to push keys and see + edit unconnected keys. This should allow developers to have more possibilities to interact with the figma files and make easier integration in the dev workflow
Summary by CodeRabbit
New Features
Style