Implement Quality Gates Panel in Dashboard

[frankbria]

Problem

The Quality Gates Panel is not fully implemented in the Dashboard UI.

Affected Tests

• test_dashboard.spec.ts:70 - should display quality gates panel

Current State

Quality gates panel requires task selection and is currently disabled in Dashboard. The panel should display quality gate status indicators for all gate types.

Proposed Solution

1. Add quality gates panel to Dashboard
2. Support task selection to view quality gates
3. Display status indicators for all gate types:
   • tests
   • coverage
   • type-check
   • lint
   • review

Acceptance Criteria

• Quality gates panel visible in Dashboard
• Panel shows all 5 gate types
• Status indicators display correctly
• Panel integrates with task selection
• E2E test passes
• Skip decorator removed

Files

• tests/e2e/test_dashboard.spec.ts:70 (test)
• Dashboard component (implementation)

[traycerai]

Plan

Observations

The Quality Gates Panel infrastructure is already in place with a fully functional QualityGateStatus component integrated into TaskTreeView. However, the Dashboard-level panel is commented out (lines 431-438 in file:web-ui/src/components/Dashboard.tsx) because it requires task selection. The E2E test expects a dedicated panel with individual gate status indicators for all 5 gate types (tests, coverage, type-check, lint, review), but there's a naming mismatch between E2E expectations and backend types (type-check vs type_check, lint vs linting, review vs code_review).

Approach

Create a new QualityGatesPanel component that wraps the existing QualityGateStatus component and adds task selection capability. The panel will display individual gate status indicators with proper test IDs matching E2E expectations. Integrate this panel into the Dashboard's Overview tab, uncomment the existing placeholder, and ensure proper mapping between E2E naming conventions and backend gate types. This approach leverages existing components while adding the missing Dashboard-level integration and task selection UI.

Implementation Steps

1. Create QualityGatesPanel Component

Create file:web-ui/src/components/quality-gates/QualityGatesPanel.tsx:

Component Structure:

• Accept projectId as prop
• Maintain internal state for selected task ID
• Fetch available tasks from project (completed or in_progress tasks)
• Render task selector dropdown
• Display QualityGateStatus component when task is selected
• Add individual gate status indicators with proper test IDs

Key Features:

• Task selector dropdown showing task number and title
• Empty state when no tasks available
• Loading state while fetching tasks
• Individual gate status badges for all 5 gate types
• Map gate types: tests→tests, coverage→coverage, type-check→type_check, lint→linting, review→code_review
• Use data-testid="gate-{gateType}" for each gate indicator (using E2E naming: tests, coverage, type-check, lint, review)

Gate Status Indicators:

• Extract gate-specific status from QualityGateStatus failures array
• Display icon and status badge for each gate type
• Color coding: green (passed), red (failed), yellow (running), gray (pending/unknown)
• Icons: 🧪 tests, 📊 coverage, 📝 type-check, ✨ lint, 🔍 review

Layout:

• Panel header with title "Quality Gates"
• Task selector at top
• Grid of 5 gate status cards below selector
• Full QualityGateStatus component below gate cards for detailed view

2. Update Dashboard Component

In file:web-ui/src/components/Dashboard.tsx:

Remove Commented Code:

• Delete lines 431-438 (commented Quality Gates Panel section)

Add Quality Gates Panel:

• Import QualityGatesPanel component
• Add panel in Overview tab after Review Findings Panel (around line 430)
• Use data-testid="quality-gates-panel" on panel container
• Pass projectId prop to QualityGatesPanel

Integration Point:

After line 429 (Review Findings Panel), add:

<!-- Quality Gates Panel (Sprint 10) -->
<div className="mb-6" data-testid="quality-gates-panel">
  <div className="bg-white rounded-lg shadow p-6">
    <h2 className="text-lg font-semibold mb-4">✅ Quality Gates</h2>
    <QualityGatesPanel projectId={projectId} />
  </div>
</div>

3. Create Gate Status Indicator Component

Create file:web-ui/src/components/quality-gates/GateStatusIndicator.tsx:

Purpose:

• Reusable component for individual gate status display
• Shows gate icon, name, and status badge
• Accepts gate type and status as props

Props:

• gateType: E2E naming (tests, coverage, type-check, lint, review)
• status: passed | failed | running | pending | unknown
• testId: data-testid value

Visual Design:

• Card layout with border
• Icon at top
• Gate name below icon
• Status badge at bottom
• Responsive grid layout (5 columns on desktop, 2-3 on mobile)

4. Update E2E Test

In file:tests/e2e/test_dashboard.spec.ts:

Remove Skip Decorator:

• Line 70: Remove test.skip and change to test
• Remove comment on lines 71-72 about skipping

Test Adjustments:

• Ensure test waits for panel to load
• May need to select a task first if no default task is selected
• Verify all 5 gate indicators are present with correct test IDs

5. Add Type Definitions

In file:web-ui/src/types/qualityGates.ts:

Add Helper Types:

• GateTypeE2E: Union type for E2E naming (tests, coverage, type-check, lint, review)
• GateTypeBackend: Union type for backend naming (tests, coverage, type_check, linting, code_review)
• Mapping function mapE2EToBackend(gateType: GateTypeE2E): GateTypeBackend
• Mapping function mapBackendToE2E(gateType: GateTypeBackend): GateTypeE2E

6. Fetch Tasks API Integration

In file:web-ui/src/api/qualityGates.ts or create new file file:web-ui/src/api/tasks.ts:

Add Function:

• fetchProjectTasks(projectId: number): Promise<Task[]>
• Fetch tasks from /api/projects/{projectId}/tasks or use existing issues endpoint
• Filter for completed or in_progress tasks
• Return task list for selector

Alternative:

• Reuse existing issuesData from Dashboard's SWR hook
• Extract tasks from issues structure
• Pass tasks as prop to QualityGatesPanel

Component Interaction Flow

sequenceDiagram
    participant Dashboard
    participant QualityGatesPanel
    participant TaskSelector
    participant QualityGateStatus
    participant GateIndicators
    participant API

    Dashboard->>QualityGatesPanel: Render with projectId
    QualityGatesPanel->>API: Fetch project tasks
    API-->>QualityGatesPanel: Return tasks list
    QualityGatesPanel->>TaskSelector: Render with tasks
    User->>TaskSelector: Select task
    TaskSelector->>QualityGatesPanel: Update selectedTaskId
    QualityGatesPanel->>QualityGateStatus: Render with taskId
    QualityGateStatus->>API: Fetch quality gate status
    API-->>QualityGateStatus: Return gate status
    QualityGateStatus-->>QualityGatesPanel: Status data
    QualityGatesPanel->>GateIndicators: Render 5 gate cards
    GateIndicators-->>User: Display gate statuses

Loading

File Structure

web-ui/src/components/quality-gates/
├── QualityGatesPanel.tsx          (NEW - Main panel component)
├── GateStatusIndicator.tsx        (NEW - Individual gate card)
├── QualityGateStatus.tsx          (EXISTING - Detailed status view)
└── index.ts                       (NEW - Export barrel file)

web-ui/src/types/
└── qualityGates.ts                (UPDATE - Add mapping types)

web-ui/src/api/
└── qualityGates.ts                (UPDATE - Add task fetching if needed)

web-ui/src/components/
└── Dashboard.tsx                  (UPDATE - Integrate panel)

tests/e2e/
└── test_dashboard.spec.ts         (UPDATE - Remove skip decorator)

Testing Checklist

Test Case	Expected Result
Panel visibility	data-testid="quality-gates-panel" is visible in Dashboard
Task selector	Dropdown shows available tasks
Gate indicators	All 5 gates (tests, coverage, type-check, lint, review) are displayed
Gate test IDs	Each gate has data-testid="gate-{type}"
Status colors	Gates show correct color based on status
No tasks state	Shows appropriate message when no tasks available
Task selection	Selecting task loads quality gate status
E2E test passes	test_dashboard.spec.ts:70 passes without skip

Dependencies

• Existing QualityGateStatus component (file:web-ui/src/components/quality-gates/QualityGateStatus.tsx)
• Existing quality gates API (file:web-ui/src/api/qualityGates.ts)
• Existing quality gates types (file:web-ui/src/types/qualityGates.ts)
• Task data from Dashboard's issuesData or separate API call
• React hooks: useState, useEffect, useMemo
• SWR for data fetching (optional, can reuse Dashboard's data)

Import In IDE

🤖 Prompt for AI Agents

## Observations

The Quality Gates Panel infrastructure is already in place with a fully functional `QualityGateStatus` component integrated into `TaskTreeView`. However, the Dashboard-level panel is commented out (lines 431-438 in `file:web-ui/src/components/Dashboard.tsx`) because it requires task selection. The E2E test expects a dedicated panel with individual gate status indicators for all 5 gate types (tests, coverage, type-check, lint, review), but there's a naming mismatch between E2E expectations and backend types (type-check vs type_check, lint vs linting, review vs code_review).

## Approach

Create a new `QualityGatesPanel` component that wraps the existing `QualityGateStatus` component and adds task selection capability. The panel will display individual gate status indicators with proper test IDs matching E2E expectations. Integrate this panel into the Dashboard's Overview tab, uncomment the existing placeholder, and ensure proper mapping between E2E naming conventions and backend gate types. This approach leverages existing components while adding the missing Dashboard-level integration and task selection UI.

## Implementation Steps

### 1. Create QualityGatesPanel Component

Create `file:web-ui/src/components/quality-gates/QualityGatesPanel.tsx`:

**Component Structure:**
- Accept `projectId` as prop
- Maintain internal state for selected task ID
- Fetch available tasks from project (completed or in_progress tasks)
- Render task selector dropdown
- Display `QualityGateStatus` component when task is selected
- Add individual gate status indicators with proper test IDs

**Key Features:**
- Task selector dropdown showing task number and title
- Empty state when no tasks available
- Loading state while fetching tasks
- Individual gate status badges for all 5 gate types
- Map gate types: tests→tests, coverage→coverage, type-check→type_check, lint→linting, review→code_review
- Use `data-testid="gate-{gateType}"` for each gate indicator (using E2E naming: tests, coverage, type-check, lint, review)

**Gate Status Indicators:**
- Extract gate-specific status from `QualityGateStatus` failures array
- Display icon and status badge for each gate type
- Color coding: green (passed), red (failed), yellow (running), gray (pending/unknown)
- Icons: 🧪 tests, 📊 coverage, 📝 type-check, ✨ lint, 🔍 review

**Layout:**
- Panel header with title "Quality Gates"
- Task selector at top
- Grid of 5 gate status cards below selector
- Full `QualityGateStatus` component below gate cards for detailed view

### 2. Update Dashboard Component

In `file:web-ui/src/components/Dashboard.tsx`:

**Remove Commented Code:**
- Delete lines 431-438 (commented Quality Gates Panel section)

**Add Quality Gates Panel:**
- Import `QualityGatesPanel` component
- Add panel in Overview tab after Review Findings Panel (around line 430)
- Use `data-testid="quality-gates-panel"` on panel container
- Pass `projectId` prop to `QualityGatesPanel`

**Integration Point:**
```
After line 429 (Review Findings Panel), add:

<!-- Quality Gates Panel (Sprint 10) -->
<div className="mb-6" data-testid="quality-gates-panel">
  <div className="bg-white rounded-lg shadow p-6">
    <h2 className="text-lg font-semibold mb-4">✅ Quality Gates</h2>
    <QualityGatesPanel projectId={projectId} />
  </div>
</div>
```

### 3. Create Gate Status Indicator Component

Create `file:web-ui/src/components/quality-gates/GateStatusIndicator.tsx`:

**Purpose:**
- Reusable component for individual gate status display
- Shows gate icon, name, and status badge
- Accepts gate type and status as props

**Props:**
- `gateType`: E2E naming (tests, coverage, type-check, lint, review)
- `status`: passed | failed | running | pending | unknown
- `testId`: data-testid value

**Visual Design:**
- Card layout with border
- Icon at top
- Gate name below icon
- Status badge at bottom
- Responsive grid layout (5 columns on desktop, 2-3 on mobile)

### 4. Update E2E Test

In `file:tests/e2e/test_dashboard.spec.ts`:

**Remove Skip Decorator:**
- Line 70: Remove `test.skip` and change to `test`
- Remove comment on lines 71-72 about skipping

**Test Adjustments:**
- Ensure test waits for panel to load
- May need to select a task first if no default task is selected
- Verify all 5 gate indicators are present with correct test IDs

### 5. Add Type Definitions

In `file:web-ui/src/types/qualityGates.ts`:

**Add Helper Types:**
- `GateTypeE2E`: Union type for E2E naming (tests, coverage, type-check, lint, review)
- `GateTypeBackend`: Union type for backend naming (tests, coverage, type_check, linting, code_review)
- Mapping function `mapE2EToBackend(gateType: GateTypeE2E): GateTypeBackend`
- Mapping function `mapBackendToE2E(gateType: GateTypeBackend): GateTypeE2E`

### 6. Fetch Tasks API Integration

In `file:web-ui/src/api/qualityGates.ts` or create new file `file:web-ui/src/api/tasks.ts`:

**Add Function:**
- `fetchProjectTasks(projectId: number): Promise<Task[]>`
- Fetch tasks from `/api/projects/{projectId}/tasks` or use existing issues endpoint
- Filter for completed or in_progress tasks
- Return task list for selector

**Alternative:**
- Reuse existing `issuesData` from Dashboard's SWR hook
- Extract tasks from issues structure
- Pass tasks as prop to `QualityGatesPanel`

## Component Interaction Flow

```mermaid
sequenceDiagram
    participant Dashboard
    participant QualityGatesPanel
    participant TaskSelector
    participant QualityGateStatus
    participant GateIndicators
    participant API

    Dashboard->>QualityGatesPanel: Render with projectId
    QualityGatesPanel->>API: Fetch project tasks
    API-->>QualityGatesPanel: Return tasks list
    QualityGatesPanel->>TaskSelector: Render with tasks
    User->>TaskSelector: Select task
    TaskSelector->>QualityGatesPanel: Update selectedTaskId
    QualityGatesPanel->>QualityGateStatus: Render with taskId
    QualityGateStatus->>API: Fetch quality gate status
    API-->>QualityGateStatus: Return gate status
    QualityGateStatus-->>QualityGatesPanel: Status data
    QualityGatesPanel->>GateIndicators: Render 5 gate cards
    GateIndicators-->>User: Display gate statuses
```

## File Structure

```
web-ui/src/components/quality-gates/
├── QualityGatesPanel.tsx          (NEW - Main panel component)
├── GateStatusIndicator.tsx        (NEW - Individual gate card)
├── QualityGateStatus.tsx          (EXISTING - Detailed status view)
└── index.ts                       (NEW - Export barrel file)

web-ui/src/types/
└── qualityGates.ts                (UPDATE - Add mapping types)

web-ui/src/api/
└── qualityGates.ts                (UPDATE - Add task fetching if needed)

web-ui/src/components/
└── Dashboard.tsx                  (UPDATE - Integrate panel)

tests/e2e/
└── test_dashboard.spec.ts         (UPDATE - Remove skip decorator)
```

## Testing Checklist

| Test Case | Expected Result |
|-----------|----------------|
| Panel visibility | `data-testid="quality-gates-panel"` is visible in Dashboard |
| Task selector | Dropdown shows available tasks |
| Gate indicators | All 5 gates (tests, coverage, type-check, lint, review) are displayed |
| Gate test IDs | Each gate has `data-testid="gate-{type}"` |
| Status colors | Gates show correct color based on status |
| No tasks state | Shows appropriate message when no tasks available |
| Task selection | Selecting task loads quality gate status |
| E2E test passes | `test_dashboard.spec.ts:70` passes without skip |

## Dependencies

- Existing `QualityGateStatus` component (`file:web-ui/src/components/quality-gates/QualityGateStatus.tsx`)
- Existing quality gates API (`file:web-ui/src/api/qualityGates.ts`)
- Existing quality gates types (`file:web-ui/src/types/qualityGates.ts`)
- Task data from Dashboard's `issuesData` or separate API call
- React hooks: `useState`, `useEffect`, `useMemo`
- SWR for data fetching (optional, can reuse Dashboard's data)

---

Execution Information

Branch: main
Commit: dbd2813

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[frankbria]

✅ Quality Gates Panel successfully implemented and integrated into Dashboard.

Completed:

• Panel displays all 5 gate types (tests, coverage, type-check, lint, review)
• Task selection dropdown for quality gate context
• Individual gate status indicators with icons and color-coded badges
• E2E test updated (skip removed)
• Build passes with no TypeScript errors

Implementation Details:

• Created QualityGatesPanel component with task selection
• Created GateStatusIndicator component for individual gate cards
• Added E2E ↔ Backend type mappings for gate type naming conventions
• Integrated panel into Dashboard Overview tab
• Removed test skip decorator from test_dashboard.spec.ts:70

Files Created:

• web-ui/src/components/quality-gates/QualityGatesPanel.tsx
• web-ui/src/components/quality-gates/GateStatusIndicator.tsx
• web-ui/src/components/quality-gates/index.ts

Files Modified:

• web-ui/src/types/qualityGates.ts
• web-ui/src/components/Dashboard.tsx
• tests/e2e/test_dashboard.spec.ts

Ready for: Integration testing with Playwright E2E suite in CI/CD environment.