[Data Contracts] UI Contract Management #7246
Description
Parent Epic
Part of #6192
Priority
P3 (Low)
Phase
Phase 5 - UI
Blocked By
- Contract REST API Endpoints
- Quality Score Calculator
- Contract Search and Filtering
Description
Implement UI components for managing contracts in the Apicurio Registry web interface.
Requirements
Contract Metadata Panel
- Add contract tab/section on artifact detail page
- Display contract status with color-coded badge:
- DRAFT: Blue
- STABLE: Green
- DEPRECATED: Orange/Red
- Show owner team, domain, classification
- Show promotion stage with badge
- Edit contract metadata button with modal form
Contract Status Management
- Status change button with confirmation dialog
- Comment input required for status changes
- Display status history timeline
Quality Score Visualization
- Overall score gauge/progress indicator
- Dimension breakdown chart:
- Completeness bar
- Compliance bar
- Stability bar
- Improvement suggestions list
Contract Search Page
- New "Contracts" navigation item
- Filter panel with:
- Status dropdown
- Owner team text input
- Domain dropdown
- Stage dropdown
- Classification dropdown
- Contract list table with columns:
- Name, Group, Artifact, Status, Stage, Owner, Modified
- Pagination controls
Audit Log Viewer
- Audit tab in contract panel
- Chronological list of changes
- Filter by action type
- Expand/collapse for details
- Export to CSV button
UI Components (PatternFly)
| Component | PatternFly Element |
|---|---|
| Status badge | Label with color |
| Quality gauge | Progress with segments |
| Status history | Timeline |
| Filter panel | Toolbar with filters |
| Contract list | Table with pagination |
| Edit modal | Modal with form |
Acceptance Criteria
- UI components are functional and accessible
- UI follows PatternFly design patterns
- UI tests cover main flows
- UI is responsive on tablet/desktop
- No console errors or warnings
Technical Notes
UI location: ui/ui-app/src/
Component library: PatternFly React
Build: Vite + TypeScript