Open
Conversation
Sections in the Inputs form can now be collapsed/expanded by clicking the section header. A new x-collapsed YAML property controls the initial state (collapsed by default when set to true). Backend: parse x-collapsed from boilerplate YAML, add Collapsed field to Section struct, propagate to API response. Frontend: replace static h3 headers with clickable chevron toggles that show/hide section contents. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThe changes implement a collapsible sections feature for boilerplate forms. The backend now parses an Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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: 2
🧹 Nitpick comments (1)
api/boilerplate_config_test.go (1)
660-685: Good coverage add — one extra edge case would make it bulletproof.Consider adding a case where two variables in the same section set conflicting
x-collapsedvalues, so the “first value wins” rule is locked in by tests (and future refactors don’t surprise us).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@api/boilerplate_config_test.go` around lines 660 - 685, Add a test case to the existing table that exercises conflicting x-collapsed values in the same section (e.g., two variables Var1 and Var2 both with x-section: "Same" but one with x-collapsed: true and the other x-collapsed: false) to lock in the “first value wins” behavior; add a case named like "x-collapsed conflict same section first wins" and set expectedSections to a single Section{ Name: "Same", Variables: []string{"Var1","Var2"}, Collapsed: true } (refer to the test table entries, the Section type and its Collapsed field and expectedSections slice).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/src/components/mdx/_shared/components/BoilerplateInputsForm.tsx`:
- Around line 290-304: The toggle button rendering for the section (button using
onClick={() => toggleSection(section.name)} with labels based on isCollapsed)
lacks accessibility semantics; update the button element to include
aria-expanded set to the inverse of isCollapsed (or true/false based on current
expanded state) and add aria-controls pointing to the id of the collapsible
content container (generate a stable id from section.name or use section.id) so
screen readers can detect state and target the collapsible region; ensure the
collapsible container element (rendered when !isCollapsed) has the matching id.
- Around line 185-195: The collapsedSections state in BoilerplateInputsForm is
only initialized once from boilerplateConfig, so new configs keep old values;
update the component to reset/recompute collapsedSections whenever
boilerplateConfig changes by adding a useEffect that derives the same initial
Record<string, boolean> from boilerplateConfig and calls setCollapsedSections;
apply the same pattern to the other instance referenced around lines 197-203
(the related useState/set call) so both spots recompute on boilerplateConfig
changes, and reference the collapsedSections and setCollapsedSections symbols
when making the change.
---
Nitpick comments:
In `@api/boilerplate_config_test.go`:
- Around line 660-685: Add a test case to the existing table that exercises
conflicting x-collapsed values in the same section (e.g., two variables Var1 and
Var2 both with x-section: "Same" but one with x-collapsed: true and the other
x-collapsed: false) to lock in the “first value wins” behavior; add a case named
like "x-collapsed conflict same section first wins" and set expectedSections to
a single Section{ Name: "Same", Variables: []string{"Var1","Var2"}, Collapsed:
true } (refer to the test table entries, the Section type and its Collapsed
field and expectedSections slice).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 26f6b6d1-4d3b-4f3d-a6c4-13a315d8da40
📒 Files selected for processing (5)
api/boilerplate_config.goapi/boilerplate_config_test.goapi/types.goweb/src/components/mdx/_shared/components/BoilerplateInputsForm.tsxweb/src/types/boilerplateConfig.ts
Comment on lines
+185
to
+195
| // Track collapsed state per section, initialized from the API's collapsed flag | ||
| const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>(() => { | ||
| if (!boilerplateConfig?.sections) return {} | ||
| const initial: Record<string, boolean> = {} | ||
| for (const section of boilerplateConfig.sections) { | ||
| if (section.name) { | ||
| initial[section.name] = section.collapsed ?? false | ||
| } | ||
| } | ||
| return initial | ||
| }) |
There was a problem hiding this comment.
Reset collapsedSections when boilerplateConfig changes.
Right now this state is a one-time snapshot. If the form loads a new config/template, old collapsed values can stick and ignore incoming section.collapsed.
Suggested fix
const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>(() => {
if (!boilerplateConfig?.sections) return {}
const initial: Record<string, boolean> = {}
for (const section of boilerplateConfig.sections) {
if (section.name) {
initial[section.name] = section.collapsed ?? false
}
}
return initial
})
+
+ useEffect(() => {
+ const next: Record<string, boolean> = {}
+ for (const section of boilerplateConfig?.sections ?? []) {
+ if (section.name) {
+ next[section.name] = section.collapsed
+ }
+ }
+ setCollapsedSections(next)
+ }, [boilerplateConfig])Also applies to: 197-203
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/src/components/mdx/_shared/components/BoilerplateInputsForm.tsx` around
lines 185 - 195, The collapsedSections state in BoilerplateInputsForm is only
initialized once from boilerplateConfig, so new configs keep old values; update
the component to reset/recompute collapsedSections whenever boilerplateConfig
changes by adding a useEffect that derives the same initial Record<string,
boolean> from boilerplateConfig and calls setCollapsedSections; apply the same
pattern to the other instance referenced around lines 197-203 (the related
useState/set call) so both spots recompute on boilerplateConfig changes, and
reference the collapsedSections and setCollapsedSections symbols when making the
change.
Comment on lines
+290
to
+304
| <button | ||
| type="button" | ||
| onClick={() => toggleSection(section.name)} | ||
| className="flex items-center gap-2 w-full pt-5 pb-1 border-b border-gray-400 cursor-pointer hover:border-gray-600 transition-colors" | ||
| > | ||
| {isCollapsed ? ( | ||
| <ChevronRight className="size-4 text-gray-500 shrink-0" /> | ||
| ) : ( | ||
| <ChevronDown className="size-4 text-gray-500 shrink-0" /> | ||
| )} | ||
| <span className="text-lg font-semibold text-gray-800"> | ||
| {section.name} | ||
| </span> | ||
| </button> | ||
| {!isCollapsed && ( |
There was a problem hiding this comment.
Add expanded/collapsed semantics to the toggle button.
The toggle works, but screen readers won’t get section state without aria-expanded (and optionally aria-controls).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/src/components/mdx/_shared/components/BoilerplateInputsForm.tsx` around
lines 290 - 304, The toggle button rendering for the section (button using
onClick={() => toggleSection(section.name)} with labels based on isCollapsed)
lacks accessibility semantics; update the button element to include
aria-expanded set to the inverse of isCollapsed (or true/false based on current
expanded state) and add aria-controls pointing to the id of the collapsible
content container (generate a stable id from section.name or use section.id) so
screen readers can detect state and target the collapsible region; ensure the
collapsible container element (rendered when !isCollapsed) has the matching id.
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
1 participant
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.
Summary
x-collapsed: trueYAML property on variables controls whether a section starts collapsedx-collapsedand propagates it via theSection.CollapsedJSON field<h3>section headers with clickable chevron togglesUsage
Test plan
TestExtractSectionGroupingswith newx-collapsedcases)x-collapsed: truesections render collapsed initiallyx-collapseddefault to expanded🤖 Generated with Claude Code
Summary by CodeRabbit