mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 15:22:55 +01:00
9.1 KiB
9.1 KiB
GIT-004C: Pull Requests Panel - Read & Display
Overview
Add a Pull Requests tab to the GitHub Panel, enabling teams to monitor PR status, review states, and CI checks without leaving the Nodegex editor. This integrates with DEPLOY-001 to show preview deployment URLs.
Phase: 3 (Dashboard UX & Collaboration)
Priority: HIGH (team collaboration essential)
Effort: 10-14 hours
Risk: Low (read-only, well-documented APIs)
Depends on: GIT-004A (OAuth & GitHubClient), GIT-004B (Panel structure)
Goals
- PRs Tab in existing GitHub Panel
- PR List with status indicators
- Review Status display (approvals, changes requested)
- CI Checks status display
- Preview URL integration (for DEPLOY-001)
User Experience
PRs Tab Layout
┌─────────────────────────────────────────┐
│ GitHub [⚙️] │
├─────────────────────────────────────────┤
│ [Issues] [PRs] [Deployments] │
├─────────────────────────────────────────┤
│ ┌─────────────────────────────────────┐ │
│ │ ● Open (3) ○ Merged ○ Closed │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ #45 Add user dashboard │
│ 📝 Draft • @johndoe • 2 hours ago │
│ ⏳ Checks running... │
├─────────────────────────────────────────┤
│ #44 Fix login validation │
│ 🟢 Ready • @janedoe • 1 day ago │
│ ✅ Checks passed • 👍 2 approvals │
├─────────────────────────────────────────┤
│ #43 Update dependencies │
│ 🟡 Changes requested • @bot • 2 days │
│ ✅ Checks passed • 🔄 1 change request │
└─────────────────────────────────────────┘
PR Detail View
┌─────────────────────────────────────────┐
│ ← Back [Open in GH] │
├─────────────────────────────────────────┤
│ #44 Fix login validation │
│ ─────────────────────────────────────── │
│ 🟢 Open main ← feature/login-fix │
│ Author: @janedoe │
├─────────────────────────────────────────┤
│ ## Description │
│ │
│ Fixes the validation bug reported in │
│ issue #42. Changes include... │
├─────────────────────────────────────────┤
│ ✅ Checks (3/3 passed) │
│ ├─ ✅ Build │
│ ├─ ✅ Tests │
│ └─ ✅ Lint │
├─────────────────────────────────────────┤
│ 👥 Reviews │
│ ├─ 👍 @reviewer1 approved │
│ ├─ 👍 @reviewer2 approved │
│ └─ ⏳ @reviewer3 pending │
├─────────────────────────────────────────┤
│ 🌐 Preview Deploy │
│ https://pr-44-preview.vercel.app │
│ [Open Preview] │
├─────────────────────────────────────────┤
│ 📝 Commits (3) │
│ ├─ abc123 Fix email validation │
│ ├─ def456 Add unit tests │
│ └─ ghi789 Update error messages │
└─────────────────────────────────────────┘
Architecture
Component Structure
packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
├── components/
│ └── PullRequestsTab/
│ ├── PullRequestsTab.tsx # Tab container
│ ├── PRsList.tsx # List of PRs
│ ├── PRItem.tsx # Single PR row
│ ├── PRDetail.tsx # Full PR view
│ ├── PRStatusBadge.tsx # Draft/Ready/Merged badge
│ ├── PRChecksStatus.tsx # CI checks display
│ ├── PRReviewStatus.tsx # Review approvals
│ ├── PRPreviewUrl.tsx # Deploy preview link
│ └── PRCommitsList.tsx # Commits in PR
├── hooks/
│ ├── usePullRequests.ts # PRs list fetching
│ └── usePRDetail.ts # Single PR fetching
Implementation Phases
Phase 1: PRs Tab Structure (2-3 hours)
Files to Create:
PullRequestsTab.tsxPRsList.tsxPRItem.tsxhooks/usePullRequests.ts
Tasks:
- Create PRs tab in GitHub Panel
- Implement usePullRequests hook
- Create PRsList component
- Create PRItem with basic info
Success Criteria:
- PRs tab shows in panel
- PR list loads
- Basic PR info displays
Phase 2: PR Status Indicators (3-4 hours)
Files to Create:
PRStatusBadge.tsxPRChecksStatus.tsxPRReviewStatus.tsx
Tasks:
- Create status badge (Draft, Ready, Changes Requested)
- Fetch and display CI check status
- Fetch and display review status
- Add merge conflict indicator
Success Criteria:
- Draft PRs show draft badge
- CI status shows pass/fail/running
- Review count shows
- Merge conflicts indicated
Phase 3: PR Detail View (3-4 hours)
Files to Create:
PRDetail.tsxPRCommitsList.tsxhooks/usePRDetail.ts
Tasks:
- Create PR detail view
- Fetch full PR data
- Display description (markdown)
- List commits
- Show full checks list
- Show full reviewers list
Success Criteria:
- Detail view shows all info
- Commits list displays
- Checks expand to full list
- Reviewers show status
Phase 4: Preview URL & Polish (2-3 hours)
Files to Create:
PRPreviewUrl.tsx
Tasks:
- Extract preview URL from deployment status
- Display preview URL in PR detail
- Add "Open Preview" button
- Add filters (open/merged/closed)
- Add search
- Polish UI
Success Criteria:
- Preview URL shows when available
- Filters work
- Search works
- UI polished
Files Summary
Create (New)
packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
├── components/
│ └── PullRequestsTab/
│ ├── PullRequestsTab.tsx
│ ├── PRsList.tsx
│ ├── PRItem.tsx
│ ├── PRDetail.tsx
│ ├── PRStatusBadge.tsx
│ ├── PRChecksStatus.tsx
│ ├── PRReviewStatus.tsx
│ ├── PRPreviewUrl.tsx
│ └── PRCommitsList.tsx
├── hooks/
│ ├── usePullRequests.ts
│ └── usePRDetail.ts
API Endpoints Used
// List PRs
octokit.pulls.list({ owner, repo, state: 'open' })
// Get single PR
octokit.pulls.get({ owner, repo, pull_number })
// Get PR reviews
octokit.pulls.listReviews({ owner, repo, pull_number })
// Get PR commits
octokit.pulls.listCommits({ owner, repo, pull_number })
// Get check runs for PR
octokit.checks.listForRef({ owner, repo, ref: pr.head.sha })
Testing Checklist
- PRs tab loads
- All open PRs display
- Draft PRs marked correctly
- CI status accurate
- Review status accurate
- Merge conflicts shown
- Detail view works
- Preview URL displays (when available)
- Filters work
- Search works
- Empty state displays
Progress Tracking
| Phase | Status | Started | Completed | Hours |
|---|---|---|---|---|
| Phase 1: Tab Structure | Not Started | - | - | - |
| Phase 2: Status Indicators | Not Started | - | - | - |
| Phase 3: Detail View | Not Started | - | - | - |
| Phase 4: Preview & Polish | Not Started | - | - | - |
Estimated Total: 10-14 hours
Actual Total: - hours