Sync .kiro/ from master — v2.2.0 release batch
New specs: archer-template-library, ccp-metrics-view-restructure, compliance-list-stale-after-sidebar-edit, compliance-metric-estimated-resolution-date, compliance-remediation-display-fix, flexible-jira-ticket-creation, forecast-burndown-chart, granite-loader-export, ivanti-queue-clear-completed-fix, multi-item-jira-ticket, queue-collapsible-sections, vendor-issue-type-dropdown New steering: archer-template-gen.md Updated: migration-registration-check hook, remediation-plan-history spec, gitlab-workflow, tech, versioning steering files
This commit is contained in:
Jordan Ramos
112
.kiro/specs/queue-collapsible-sections/tasks.md
Normal file
112
.kiro/specs/queue-collapsible-sections/tasks.md
Normal file
@@ -0,0 +1,112 @@
|
||||
# Implementation Plan: Queue Collapsible Sections
|
||||
|
||||
## Overview
|
||||
|
||||
Add collapsible, grouped sections to the IvantiTodoQueuePage. Items are organized into a hybrid layout: an "Inventory" section (CARD, GRANITE, DECOM workflow types) at the top, followed by vendor-grouped sections for FP and Archer items. Each section has a clickable header that toggles visibility. This is a frontend-only change to a single file with property-based tests for the grouping logic.
|
||||
|
||||
## Tasks
|
||||
|
||||
- [x] 1. Add section header styles and icon imports
|
||||
- [x] 1.1 Add ChevronDown and ChevronRight to the lucide-react import statement
|
||||
- Add `ChevronDown, ChevronRight` to the existing import from `lucide-react`
|
||||
- _Requirements: 5.2_
|
||||
|
||||
- [x] 1.2 Add section header style entries to the STYLES constant
|
||||
- Add `sectionHeaderInventory`, `sectionHeaderVendor`, and `sectionCount` style objects to the existing `STYLES` constant
|
||||
- Use green accent (`#10B981`) for Inventory header, neutral (`#94A3B8`) for vendor headers
|
||||
- Include `cursor: 'pointer'`, `userSelect: 'none'`, monospace font, uppercase text
|
||||
- _Requirements: 3.3, 3.4, 3.5, 5.1, 5.3_
|
||||
|
||||
- [x] 2. Implement grouping computation and collapse state
|
||||
- [x] 2.1 Add the `groupedSections` useMemo hook
|
||||
- Add a `useMemo` that transforms `visibleItems` into an array of section objects `{ key, label, type, items }`
|
||||
- Items with workflow_type CARD, GRANITE, or DECOM go into the Inventory section
|
||||
- Remaining items are grouped by vendor field (null/empty vendor → "Unknown")
|
||||
- Inventory section appears first (if non-empty), vendor sections sorted alphabetically
|
||||
- Sections with zero items are omitted
|
||||
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7_
|
||||
|
||||
- [x] 2.2 Add collapse state and toggle handler
|
||||
- Add `const [collapsedSections, setCollapsedSections] = useState({})` for collapse tracking
|
||||
- Add `toggleSection` callback that flips the boolean for a given section key
|
||||
- All sections default to expanded (empty object → falsy lookup)
|
||||
- _Requirements: 2.2, 2.7_
|
||||
|
||||
- [x] 3. Refactor render to use grouped sections with collapsible headers
|
||||
- [x] 3.1 Replace flat `visibleItems.map(...)` with grouped section rendering
|
||||
- Map over `groupedSections` instead of `visibleItems` directly
|
||||
- For each section, render a clickable Section Header with chevron icon, label, and item count
|
||||
- Conditionally render section body (item rows) only when section is not collapsed
|
||||
- Preserve existing queue item row rendering logic inside each section body
|
||||
- Add `role="button"`, `tabIndex={0}`, `aria-expanded`, `aria-label` to section headers for accessibility
|
||||
- _Requirements: 2.1, 2.3, 2.4, 2.5, 2.6, 3.1, 3.2_
|
||||
|
||||
- [x] 3.2 Verify cross-section selection still works correctly
|
||||
- Ensure Select All checkbox still toggles all `visibleItems` across all sections regardless of collapse state
|
||||
- Ensure selection count reflects total selected items across all sections
|
||||
- Ensure floating action bar operates on all selected items regardless of collapse state
|
||||
- Ensure collapsing a section does not clear or modify `selectedIds`
|
||||
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6_
|
||||
|
||||
- [x] 3.3 Verify existing functionality is preserved
|
||||
- Ticket link badges continue to display on items with associated Jira tickets
|
||||
- Consolidation modal continues to function with selected items
|
||||
- Floating action bar appears when items are selected
|
||||
- Completed items count still displays at the bottom
|
||||
- Empty state renders without section headers when no visible items exist
|
||||
- _Requirements: 5.4, 5.5, 5.6, 5.7, 5.8_
|
||||
|
||||
- [x] 4. Checkpoint - Ensure frontend builds successfully
|
||||
- Ensure all tests pass, ask the user if questions arise.
|
||||
|
||||
- [x] 5. Write property-based tests for grouping logic
|
||||
- [x]* 5.1 Write property test: Grouping Correctness
|
||||
- **Property 1: Grouping Correctness**
|
||||
- Every item with workflow_type CARD, GRANITE, or DECOM appears in the Inventory section; every FP/Archer item appears in the vendor section matching its vendor field (or "Unknown" if null/empty); no item appears in more than one section
|
||||
- Extract the grouping logic into a testable pure function or test it inline
|
||||
- **Validates: Requirements 1.1, 1.2, 1.5**
|
||||
|
||||
- [x]* 5.2 Write property test: Section Ordering
|
||||
- **Property 2: Section Ordering**
|
||||
- Inventory section (if present) is always first; vendor sections are sorted alphabetically by label
|
||||
- **Validates: Requirements 1.3, 1.4**
|
||||
|
||||
- [x]* 5.3 Write property test: Empty Section Omission
|
||||
- **Property 3: Empty Section Omission**
|
||||
- No section in the output has zero items; if no inventory-type items exist, no Inventory section appears
|
||||
- **Validates: Requirements 1.6, 1.7**
|
||||
|
||||
- [x]* 5.4 Write property test: Section Header Count Accuracy
|
||||
- **Property 4: Section Header Count Accuracy**
|
||||
- For every section, the items array length equals the count that would be displayed in the header
|
||||
- **Validates: Requirements 3.1, 3.2**
|
||||
|
||||
- [x]* 5.5 Write property test: Selection Independence from Collapse State
|
||||
- **Property 5: Selection Independence from Collapse State**
|
||||
- Toggling collapse state does not alter the set of selected item IDs; Select All always covers all visible items regardless of collapse
|
||||
- **Validates: Requirements 4.2, 4.4, 4.5**
|
||||
|
||||
- [x] 6. Final checkpoint - Ensure all tests pass
|
||||
- Ensure all tests pass, ask the user if questions arise.
|
||||
|
||||
## Notes
|
||||
|
||||
- Tasks marked with `*` are optional and can be skipped for faster MVP
|
||||
- This is a frontend-only change to a single file: `frontend/src/components/pages/IvantiTodoQueuePage.js`
|
||||
- Property tests should use `fast-check` (already a project dependency) and extract the grouping logic as a pure function for testability
|
||||
- The selection logic (`selectedIds`, `toggleSelectAll`, `allVisibleSelected`) operates on `visibleItems` which is independent of collapse state — no changes needed to selection logic
|
||||
- The collapse state is purely visual — it controls rendering, not data
|
||||
|
||||
## Task Dependency Graph
|
||||
|
||||
```json
|
||||
{
|
||||
"waves": [
|
||||
{ "id": 0, "tasks": ["1.1", "1.2"] },
|
||||
{ "id": 1, "tasks": ["2.1", "2.2"] },
|
||||
{ "id": 2, "tasks": ["3.1"] },
|
||||
{ "id": 3, "tasks": ["3.2", "3.3"] },
|
||||
{ "id": 4, "tasks": ["5.1", "5.2", "5.3", "5.4", "5.5"] }
|
||||
]
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user