Skip to content

feat: add collapse/expand all buttons for collection items#4063

Open
makstech wants to merge 2 commits intobitfocus:mainfrom
makstech:feat/collection-collapse-expand-all
Open

feat: add collapse/expand all buttons for collection items#4063
makstech wants to merge 2 commits intobitfocus:mainfrom
makstech:feat/collection-collapse-expand-all

Conversation

@makstech
Copy link
Copy Markdown
Contributor

@makstech makstech commented Apr 1, 2026

Adds per-section collapse/expand all buttons for items within collections and the ungrouped items section.

  • Collapse/expand buttons appear in each collection header when the collection contains 2+ items
  • Ungrouped items section is now a collapsible group with a caret toggle, matching collection header styling
  • Only the relevant button is shown: expand when items are collapsed, collapse when expanded
  • Buttons are hidden when the section itself is collapsed
  • Top-level "Expand All" / "Collapse All" now also affects the ungrouped section

Closes #3530

image image

Summary by CodeRabbit

  • New Features
    • Ungrouped items now have a collapsible header with visual caret and can be shown/hidden.
    • Per-section "collapse all" / "expand all" controls added for collections and for ungrouped items.
    • Batch collapse/expand operations added to toggle multiple sections at once for faster management.
    • Global expand/collapse controls now include the ungrouped section.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 1, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3b391cd5-497c-462b-9926-862271a0a54c

📥 Commits

Reviewing files that changed from the base of the PR and between 04f2f6c and 3113b90.

📒 Files selected for processing (1)
  • webui/src/Variables/CustomVariablesList.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • webui/src/Variables/CustomVariablesList.tsx

📝 Walkthrough

Walkthrough

Introduces collapsible UI and batch item-collapse controls for ungrouped collection items: a new UngroupedSection with UNGROUPED_PANEL_ID, an item-level CollectionItemsCollapseButtons component, and a setMultipleCollapsed helper for atomic batch collapse/expand updates.

Changes

Cohort / File(s) Summary
Ungrouped section & panel id
webui/src/Components/CollectionsNestingTable/CollectionsNestingTable.tsx
Replaced inline ungrouped rendering with a new UngroupedSection subcomponent and exported UNGROUPED_PANEL_ID. Adds collapsible header/caret UI and conditional rendering of collapse controls when applicable.
Item-level collapse controls
webui/src/Components/CollectionsNestingTable/CollectionsNestingTableGroupsList.tsx
Added CollectionItemsCollapseButtons (observer) to batch-expand or batch-collapse multiple item panels; integrates with collection item rendering to show controls when a collection has >1 item.
Batch collapse API
webui/src/Helpers/CollapseHelper.tsx
Extended PanelCollapseHelper interface and store with setMultipleCollapsed(panelIds: string[], collapsed: boolean) to update many panel states in a single MobX action and persist once.
Top-level expand/collapse integration
webui/src/Variables/CustomVariablesList.tsx
Included UNGROUPED_PANEL_ID in the set of panel IDs used by top-level expand/collapse buttons so ungrouped items participate in global expand/collapse actions.

Poem

📦 Ungrouped lines fold and hide,
Caret twinkles, toggles wide,
Batch a bunch with one swift click,
Panels shrink and then unstick,
Debugging dances, tidy and bright ✨

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main feature: adding collapse/expand-all buttons for collection items, which is the core objective of this PR.
Linked Issues check ✅ Passed The PR fully implements issue #3530 requirements: per-collection collapse/expand buttons (for 2+ items), ungrouped section collapsibility, context-aware button display, and integration with top-level Collapse All behavior.
Out of Scope Changes check ✅ Passed All changes are directly scoped to implementing the collapse/expand functionality for collections and ungrouped items; no unrelated modifications detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 989c88de-acb9-405f-9949-6d5fb0dc6c29

📥 Commits

Reviewing files that changed from the base of the PR and between 0a7ada7 and 04f2f6c.

📒 Files selected for processing (4)
  • webui/src/Components/CollectionsNestingTable/CollectionsNestingTable.tsx
  • webui/src/Components/CollectionsNestingTable/CollectionsNestingTableGroupsList.tsx
  • webui/src/Helpers/CollapseHelper.tsx
  • webui/src/Variables/CustomVariablesList.tsx

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4.1.0 Collapse variable Collection entries

1 participant