Back to Guides

PR Browser & Pretty Diff Features

Overview

Added two major enhancements:

PR Browser - Browse and select any PR (open, merged, declined)
Pretty Diff Viewer - GitHub-style formatted diff with syntax highlighting

Feature 1: PR Browser

What It Does:

Browse all PRs in a repository, including merged/declined PRs, without needing the URL.

UI Location:

Home page → "Browse PRs" button below URL input

How It Works:

Step 1: Open Browser

┌────────────────────────────────────┐
│ PR URL Input                       │
│ [Or browse recent PRs]  [Browse]   │  ← Click here
└────────────────────────────────────┘

Step 2: Select Repository & State

┌────────────────────────────────────┐
│ Repository: my-repo      [Load]    │
│ ○ Open  ● Merged  ○ Declined  ○ All│
└────────────────────────────────────┘

Step 3: Select PR from List

┌────────────────────────────────────┐
│ #123  Fix critical bug             │
│ john.doe | feature → main          │
│ Updated: Dec 10                    │
├────────────────────────────────────┤
│ #122  Add new feature              │
│ jane.smith | develop → main        │
│ Updated: Dec 9                     │
└────────────────────────────────────┘

Step 4: Auto-Fetch

Clicking a PR fills in the form
Automatically fetches the PR
Modal closes
Review begins!

States Supported:

✅ OPEN - Currently open PRs
✅ MERGED - Already merged (this is KEY for testing!)
✅ DECLINED - Rejected PRs
✅ ALL - Everything

API Endpoint:

GET /api/pr/{repository}/list?workspace={workspace}&state={state}

Example:

GET /api/pr/my-repo/list?state=MERGED

Response:

[
  {
    "id": 123,
    "title": "Fix critical bug",
    "state": "MERGED",
    "author": "John Doe",
    "sourceBranch": "feature/fix",
    "destinationBranch": "main",
    "createdOn": "2024-12-01T10:00:00Z",
    "updatedOn": "2024-12-10T15:30:00Z"
  }
]

Feature 2: Pretty Diff Viewer

What It Does:

Displays diff in a beautiful, GitHub-style format with:

Color-coded additions/deletions
Line numbers (old & new)
Syntax highlighting
Easy to read layout

Before (Raw):

diff --git a/file.cs b/file.cs
index 123..456 789
--- a/file.cs
+++ b/file.cs
@@ -10,5 +10,6 @@
 var x = 1;
-var y = 2;
+var y = 3;
+var z = 4;

After (Pretty):

┌───────────────────────────────────────┐
│ file.cs                               │
├──────┬──────┬─────────────────────────┤
│      │      │ var x = 1;              │
│  10  │      │ var y = 2;              │ ← Red background
│      │  11  │ var y = 3;              │ ← Green background
│      │  12  │ var z = 4;              │ ← Green background
└──────┴──────┴─────────────────────────┘

Features:

Color Coding:

🟢 Green - Added lines
🔴 Red - Removed lines
⚪ White - Context lines

Line Numbers:

Left column: Old file line numbers
Right column: New file line numbers
Empty for added/removed lines

Toggle View:

Click "Pretty View" / "Raw View" button
Switches between formatted and raw diff
Raw view for copy/paste
Pretty view for reading

UI:

┌─────────────────────────────────────────┐
│ Diff Viewer                [Pretty][Copy]│
├─────────────────────────────────────────┤
│ ┌─────────────────────────────────────┐ │
│ │ file1.cs                            │ │
│ │ ├─────────────────────────────────┤ │ │
│ │ │ @@ -10,5 +10,6 @@               │ │ │
│ │ │ 10  11  var x = 1;              │ │ │
│ │ │ 11      var y = 2;              │ │ │ ← Removed
│ │ │     12  var y = 3;              │ │ │ ← Added
│ │ └─────────────────────────────────┘ │ │
│ └─────────────────────────────────────┘ │
│                                         │
│ ┌─────────────────────────────────────┐ │
│ │ file2.cs                            │ │
│ │ ...                                 │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

Code Changes

1. Views/Home/Index.cshtml

Added:

"Browse PRs" button
PR Browser modal with filters
Pretty/Raw diff toggle
Two-pane diff viewer

2. Controllers/PRController.cs

Added:

ListPullRequests() endpoint
State filtering

3. Services/BitBucketService.cs

Added:

ListPullRequestsAsync() method
PullRequestSummary model

4. wwwroot/js/pr-viewer.js

Added:

PR browser functions
Pretty diff formatter
Toggle view handler

5. wwwroot/css/site.css

Added:

.diff-file styles
.diff-line styles
Color coding
GitHub-like appearance

Usage Examples

Example 1: Review Merged PR

Problem: "I don't have pending PRs to test"

Solution:

Click "Browse PRs"
Enter your repository name
Select "Merged" radio button
Click "Load PRs"
Click any merged PR from the list
Review it with AST analysis!

Example 2: Compare States

Browse Open PRs:

State: Open → See current work in progress

Browse Merged PRs:

State: Merged → See what's already in production

Browse All:

State: All → See complete PR history

Example 3: Pretty Diff Navigation

Reading Large Diffs:

Use Pretty View for easy reading
Scroll through files
See exactly what changed
Line numbers show context

Copying Diff:

Click "Raw View" button
Select text
Copy entire diff
Paste into email/ticket

Testing AST Analysis

Perfect Use Case:

1. Find a Merged C# PR:

Browse PRs → State: Merged
Look for PRs with .cs files
Select one with complex code

2. Review It:

AST analysis runs automatically
See cyclomatic complexity
Check for null references
Validate method lengths

3. Compare Results:

Pattern rules: ~10-20 violations
AST rules: ~5-10 deeper issues
Combined: Comprehensive review

Good Test PRs:

Look for PRs with:

Controllers (API endpoints)
Services (business logic)
Complex methods (>50 lines)
Multiple decision points

Example PR characteristics:

Title: "Refactor user authentication service"
Files: AuthService.cs (200 lines)
Changes: +150, -80
Perfect for: AST complexity analysis

API Integration

List PRs Endpoint:

Request:

GET /api/pr/my-repo/list?state=MERGED HTTP/1.1

Response:

[
  {
    "id": 456,
    "title": "Add authentication",
    "state": "MERGED",
    "author": "Jane Smith",
    "sourceBranch": "feature/auth",
    "destinationBranch": "main",
    "createdOn": "2024-12-01T10:00:00Z",
    "updatedOn": "2024-12-05T14:20:00Z"
  }
]

Review Merged PR:

Request:

GET /api/pr/my-repo/456 HTTP/1.1

Works exactly the same as open PRs!

Benefits

For Testing:

✅ No need for pending PRs ✅ Review real production code ✅ Test with complex examples ✅ Validate AST analysis accuracy

For Daily Use:

✅ Quick access to any PR ✅ Review merged changes ✅ Audit declined PRs ✅ Beautiful, readable diffs

For Code Quality:

✅ Learn from merged code ✅ Study patterns used ✅ Review team's work ✅ Maintain consistency

Deployment

Files Changed (5):

Views/Home/Index.cshtml
- PR browser modal
- Pretty diff viewer
Controllers/PRController.cs
- ListPullRequests endpoint
Services/BitBucketService.cs
- ListPullRequestsAsync method
- PullRequestSummary model
wwwroot/js/pr-viewer.js
- PR browser logic
- Pretty diff formatter
wwwroot/css/site.css
- Diff styling

Installation:

# 1. Update files
cp new_files/* your_project/

# 2. Build
dotnet build

# 3. Run
dotnet run

# 4. Test
# - Browse to home page
# - Click "Browse PRs"
# - Select MERGED
# - Review any merged PR!

Screenshots

PR Browser:

┌─────────────────────────────────────────┐
│  Browse Pull Requests            [×]    │
├─────────────────────────────────────────┤
│  Repository: [my-repo]        [Load]    │
│  ○ Open  ● Merged  ○ Declined  ○ All   │
├─────────────────────────────────────────┤
│  ┌───────────────────────────────────┐  │
│  │ #123  Fix authentication bug      │  │
│  │ john | feature → main   Dec 10    │  │
│  ├───────────────────────────────────┤  │
│  │ #122  Add user profile API        │  │
│  │ jane | develop → main   Dec 9     │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

Pretty Diff:

┌─────────────────────────────────────────┐
│  file.cs                                │
├──────┬──────┬───────────────────────────┤
│  10  │  10  │  var x = 1;              │ Context
│  11  │      │  var y = 2;              │ 🔴 Removed
│      │  11  │  var y = 3;              │ 🟢 Added
│      │  12  │  var z = 4;              │ 🟢 Added
│  12  │  13  │  return result;          │ Context
└──────┴──────┴───────────────────────────┘

Summary

✅ PR Browser - Access any PR (open/merged/declined) ✅ Pretty Diff - GitHub-style formatted view ✅ Toggle View - Switch between pretty and raw ✅ Perfect for Testing - Review merged PRs to test AST ✅ Production Ready - Works with existing BitBucket API

Now you can test AST analysis on real merged code! 🚀

Quick Start

Open app → Click "Browse PRs"
Enter repo → Select "Merged"
Pick any PR → Click to load
See AST magic → C# files get deep analysis
Enjoy pretty diff → Easy to read changes

Problem solved! 🎉

Back to Guides

Table of Contents

PR Browser & Pretty Diff Features

Overview

Feature 1: PR Browser

What It Does:

UI Location:

How It Works:

States Supported:

API Endpoint:

Feature 2: Pretty Diff Viewer

What It Does:

Before (Raw):

After (Pretty):

Features:

UI:

Code Changes

1. Views/Home/Index.cshtml

2. Controllers/PRController.cs

3. Services/BitBucketService.cs

4. wwwroot/js/pr-viewer.js

5. wwwroot/css/site.css

Usage Examples

Example 1: Review Merged PR

Example 2: Compare States

Example 3: Pretty Diff Navigation

Testing AST Analysis

Perfect Use Case:

Good Test PRs:

API Integration

List PRs Endpoint:

Review Merged PR:

Benefits

For Testing:

For Daily Use:

For Code Quality:

Deployment

Files Changed (5):

Installation:

Screenshots

PR Browser:

Pretty Diff:

Summary

Quick Start