Description
With more collections being added to the unified dashboard, we need to account for the growing numbers as certain campaign/event pages have translation lists in multiple sub-pages:
-Wikimedia_CEE_Spring_2024 ,
-WikiLoves Ramadhan 2025
-Wiki99
Depends On:
This Task depends on the implementation of T392753
Goal
- Enable users to select either a specific sub-collections(e.g. "CEE Spring 2025 Albania") or the entire parent collection("CEE Spring 2025")
- Implement an inline expansion mechanism for collections with sub-collections.
Design
System Preparedness
- Requires backend functionality to identify which collections are parents and their associated sub-collections.
- One potential approach to achieve this identification would be to analyze page naming patterns where "/" characters are used by community members (e.g., "CEE Spring 2025/Albania"), treating the prefix before the slash as the parent collection and the suffix as the sub-collection name.
 |  |
Visual Differentiation of Collection Chips:
- Parent/Expandable Chip (Collapsed State):
- Components: Folder icon (📁) + Parent Name + Sub-collection Count ((X)) + Collapse Chevron (▼).
- Style: Uses the default/unselected chip appearance.
- Example: 📁 CEE Spring 2025(41) ▼
- Parent/Expandable Chip (Collapsed State):
- Standalone/Specific Collection Chip:
- Components: Pages icon + Collection Name.
- Style: Uses the default/unselected chip appearance. Appears intermingled alphabetically with Parent chips in the list.
Parent/Expandable Chip (Expanded State):
- Components: Folder icon (📁) + Parent Name + / Selected Item Name + Expand Chevron (▲). ("Selected Item Name" is "All" or the name of the chosen sub-collection).
- Style: Uses the "selected" chip appearance
- Example when 'All' selected: 📁 CEE Spring 2025(41) / All ▲ [Selected Style]
- Example when 'Albania' selected: 📁 CEE Spring 2025(41) / Albania ▲ [Selected Style]
Sub-Collection Chip (Inside expanded group):
- Components: Page icon (📄) + Sub-collection Name.
- Style: Standard chip appearance; gets "selected" style when active.
- Example: 📄 Albania
Interaction - Inline Expansion:
 |
- Clicking a collapsed parent item (📁 ... ▼) expands it inline below itself. The chevron updates (▲).
- The expanded area displays all associated sub-collection chips, including the [ All ] chip first.
- Clicking the parent item header again collapses the section.
Interaction - Selection (Single Topic):
 |
- Default [ All ] Selection: When a parent item is expanded, the [ All ] chip within its expanded section is selected by default.
- Done Button State: The main Done button becomes active/enabled immediately upon expansion (due to default selection).
- Explicit Selection Change: Clicking a different chip (a specific sub-collection 📄, the ☑️ All chip, or a different standalone/parent chip 📄/📁 elsewhere in the main list) updates the selection.
- Mutual Exclusivity: Only one chip can be selected at any time within the entire dialog. Selecting any chip automatically deselects any previously selected chip.
- No Disabling: All visible chips remain enabled and clickable.
Parent Item State Update: The parent expandable item (📁 ...) visually indicates the current selection made within its group:
- Upon Expansion: Immediately gets "selected" style + / All label.
- When Sub-item Selected: Remains "selected" style + label updates to / Sub-item Name.
- When Collapsed: Retains "selected" style + summary label (/ All or / Sub-item Name).
- When Deselected Entirely: Reverts to default collapsed, unselected state (📁 ... ▼).
- Confirmation: The final selection is confirmed via the main Done button. (Decision Needed: Confirm this vs. immediate close).
Acceptance Criteria
This task will be considered complete when:
UI Implementation
- All visual states are correctly implemented (collapsed, expanded, selected)
- Inline expansion/collapse works correctly
- Selection of parent collections and sub-collections functions as specified
Derived Requirements
- Support for Hierarchical Collections The Unified Dashboard must support community-defined translation collections structured as parent collections with sub-collections (e.g., CEE Spring 2025/Albania as a sub-collection of CEE Spring 2025).
- Visual & Interactive Chip Behavior The interface must:
- Display parent chips with a 📁 icon, name, sub-collection count, and a collapse/expand chevron.
- Allow inline expansion to reveal sub-collection chips (📄), starting with an \[All] option.
- Visually indicate which item is selected (with selected chip styling).
- Ensure mutual exclusivity: only one chip (standalone, parent, or sub-collection) is active at a time.
- Interaction & State Behavior
- Clicking a 📁 parent chip expands its sub-collections inline.
- The \[All] sub-collection is selected by default when expanded.
- Clicking another chip (including other parents or standalones) deselects the current one.
- When collapsed, the parent chip still reflects the selected sub-item (e.g., /All, /Albania).
- Clicking “Done” finalizes the selection; UI must enable the Done button immediately on expansion.
- Back-End Requirements
- The system must be able to identify parent-sub relationships via naming convention (/).
- The frontend must render these dynamically based on backend-provided structure.
Test Steps
Test Case 1: Display and Expand Parent Collections
- Go to the Unified Dashboard with translation collections enabled.
- Locate a parent collection (e.g., 📁 Wiki99 (3) ▼).
- ✅❓❌⬜ AC1: Confirm that the chip includes a folder icon, label, item count, and expand chevron.
- Click the parent chip to expand it.
- ✅❓❌⬜ AC2: Confirm that sub-collections (e.g., 📄 food) appear inline, and \[All] is listed first.
Test Case 2: Selection Behavior and Chip State Updates
- With the parent chip expanded, confirm the \[All] chip is selected by default.
- ✅❓❌⬜ AC3: Confirm the Done button becomes active immediately.
- Select a sub-collection chip (e.g., 📄 food).
- ✅❓❌⬜ AC4: Confirm the parent chip label updates to / food and maintains selected styling.
Test Case 3: Mutual Exclusivity Across All Chips
- Expand a second parent chip or select a standalone collection chip.
- ✅❓❌⬜ AC5: Confirm that the previously selected chip becomes deselected since only one chip is ever active at any time.
Test Case 4: Collapse, Deselect, and Confirmation Behavior
- Click the expanded parent chip again to collapse it.
- ✅❓❌⬜ AC6: Confirm that it still shows the selected sub-collection (/ food) in its label.
- Click the same parent chip’s label or the \[All] chip again.
- ✅❓❌⬜ AC7: Confirm selection is retained unless a different chip is selected.
- Click the Done button.
- ✅❓❌⬜ AC8: Confirm the dialog closes and the selection is applied.
QA Results - TestWiki
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T374695#10952086 |
| 2 | ✅ | T374695#10952086 |
| 3 | ✅ | T374695#10952086 |
| 4 | ✅ | T374695#10952086 |
| 5 | ✅ | T374695#11087704 |
| 6 | ✅ | T374695#11087704 |
| 7 | ✅ | T374695#10952086 |
| 8 | ✅ | T374695#10952086 |
