OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-002B-github-advanced-integration/GIT-INTEGRATION-STRATEGY.md

VersionControlPanel + GitHub Integration Strategy

Overview

This document outlines the strategy for integrating the new GitHub features (Issues, PRs, OAuth) with the existing VersionControlPanel. The goal is to unify rather than duplicate, leveraging the excellent existing git functionality.

---

Key Finding: VersionControlPanel is Already React ✅

The existing VersionControlPanel is 100% React with modern patterns:

• React functional components with hooks
• Context API (VersionControlContext)
• TypeScript throughout
• Uses @noodl-core-ui design system
• No jQuery (except PopupLayer which is a separate system)

This means integration is straightforward - no rewrite needed!

---

What Already Exists

VersionControlPanel (packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/)

Component	Description	Status
LocalChanges.tsx	View uncommitted changes	✅ Working
History.tsx	Browse commits	✅ Working
HistoryCommitDiff.tsx	Click commit → see visual diff	✅ Working
CommitChangesDiff.tsx	Diff logic for commits	✅ Working
DiffList.tsx	Visual diff renderer (green/red nodes)	✅ Working
BranchList.tsx	Manage branches	✅ Working
BranchMerge.tsx	Merge branches	✅ Working
MergeConflicts.tsx	Resolve conflicts	✅ Working
Stashes.tsx	Git stash support	✅ Working
GitProviderPopout.tsx	GitHub/Git credentials	✅ Working
GitStatusButton.tsx	Push/pull status	✅ Working

VersionControlContext

Provides git state to all components:

const {
  git, // Git client instance
  activeTabId, // Current tab
  setActiveTabId, // Tab switcher
  localChangesCount, // Number of uncommitted changes
  branchStatus, // Current branch state
  fetch, // Fetch operations
  updateLocalDiff // Refresh diff
} = useVersionControlContext();

GitHubPanel (New - from GIT-004 work)

Component	Description	Status
GitHubPanel.tsx	Container panel	✅ Working
useIssues.ts	Fetch GitHub issues	✅ Working
usePullRequests.ts	Fetch GitHub PRs	✅ Working
ConnectToGitHub/	GitHub connection flow	✅ Working
SyncToolbar.tsx	Push/pull/sync status	✅ Working
GitHubClient.ts	GitHub API wrapper	✅ Working

---

Integration Strategy

Option A: Extend VersionControlPanel (Recommended) ✅

Add GitHub-specific tabs to the existing panel:

┌──────────────────────────────────────────────────┐
│ Version Control                        [⚙️] [🔗] │
├──────────────────────────────────────────────────┤
│ [GitStatusButton - push/pull status]             │
│ [BranchStatusButton - current branch]            │
├──────────────────────────────────────────────────┤
│ [Changes] [History] [Issues] [PRs]    ← NEW TABS │
├──────────────────────────────────────────────────┤
│ (Tab content - all existing components work)     │
└──────────────────────────────────────────────────┘

Pros:

• Leverages ALL existing functionality
• Single unified panel
• Visual diff system already works
• Less code to maintain
• Familiar UX for existing users

---

Implementation Plan

Phase 1: Add GitHub Context (2-3 hours)

Create a GitHub-specific context that can be used alongside VersionControlContext:

// New: GitHubContext.tsx in VersionControlPanel/context/
interface GitHubContextValue {
  isGitHubConnected: boolean;
  issues: Issue[];
  pullRequests: PullRequest[];
  issuesLoading: boolean;
  prsLoading: boolean;
  refreshIssues: () => void;
  refreshPRs: () => void;
}

export function GitHubProvider({ children, git }) {
  // Use existing hooks from GitHubPanel
  const { issues, loading: issuesLoading, refetch: refreshIssues } = useIssues(repoOwner, repoName);
  const { pullRequests, loading: prsLoading, refetch: refreshPRs } = usePullRequests(repoOwner, repoName);

  return (
    <GitHubContext.Provider value={{...}}>
      {children}
    </GitHubContext.Provider>
  );
}

Phase 2: Add Issues Tab (3-4 hours)

Move/refactor components from GitHubPanel:

VersionControlPanel/
├── components/
│   ├── IssuesTab/                  ← NEW (from GitHubPanel)
│   │   ├── IssuesList.tsx
│   │   ├── IssueItem.tsx
│   │   └── IssueDetail.tsx

Wire into tabs:

// In VersionControlPanel.tsx
<Tabs
  tabs={[
    { id: 'changes', label: 'Local Changes', content: <LocalChanges /> },
    { id: 'history', label: 'History', content: <History /> },
    // NEW:
    { id: 'issues', label: `Issues (${issues.length})`, content: <IssuesTab />, disabled: !isGitHubConnected },
    { id: 'prs', label: `PRs (${prs.length})`, content: <PullRequestsTab />, disabled: !isGitHubConnected }
  ]}
/>

Phase 3: Add PRs Tab (3-4 hours)

Similar to Issues tab:

VersionControlPanel/
├── components/
│   ├── PullRequestsTab/            ← NEW (from GitHubPanel)
│   │   ├── PRsList.tsx
│   │   ├── PRItem.tsx
│   │   └── PRDetail.tsx

Phase 4: Enhance GitProviderPopout (2-3 hours)

Upgrade existing popout with OAuth flow:

// GitProviderPopout.tsx - enhance with OAuth
import { GitHubOAuthService } from '@noodl-services/GitHubOAuthService';

// Add "Connect with GitHub" button that triggers OAuth
// Show connected status
// Show authenticated user info

Phase 5: Deprecate Separate GitHubPanel (1-2 hours)

• Remove GitHubPanel from sidebar registration
• Keep components for reuse in VersionControlPanel
• Update any references

---

Files to Modify

VersionControlPanel (Main Changes)

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/
├── VersionControlPanel.tsx          # Add new tabs
├── context/
│   ├── index.tsx                    # Add GitHubProvider
│   └── GitHubContext.tsx            # NEW
├── components/
│   ├── IssuesTab/                   # NEW (move from GitHubPanel)
│   ├── PullRequestsTab/             # NEW (move from GitHubPanel)
│   └── GitProviderPopout/
│       └── GitProviderPopout.tsx    # Enhance with OAuth

Move from GitHubPanel

FROM: packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
  components/IssuesTab/ → VersionControlPanel/components/IssuesTab/
  components/PullRequestsTab/ → VersionControlPanel/components/PullRequestsTab/
  hooks/useIssues.ts → VersionControlPanel/hooks/useIssues.ts
  hooks/usePullRequests.ts → VersionControlPanel/hooks/usePullRequests.ts

Services (Keep as-is)

packages/noodl-editor/src/editor/src/services/github/
├── GitHubClient.ts      # Keep - used by hooks
├── GitHubTypes.ts       # Keep - type definitions
├── GitHubOAuthService.ts # Keep - OAuth flow

---

What Stays Separate

GitHubPanel Features That Don't Move

Some features make more sense in their current location:

• Launcher "Clone from GitHub" → Stay in Launcher (TASK-002C)
• Connect/Create Repo flows → Can be triggered from VersionControlPanel but may open modals

---

Visual Diff System - Already Working!

The visual diff magic you mentioned already works perfectly. When clicking a commit in History:

1. History.tsx renders list of commits
2. Click → HistoryCommitDiff.tsx renders
3. CommitChangesDiff.tsx fetches the project.json diff
4. DiffList.tsx renders:
   • "Changed Components" section (click to see visual diff)
   • "Changed Files" section
   • "Changed Settings" section
   • "Changed Styles" section
5. useShowComponentDiffDocument opens the visual node graph diff

This all continues to work unchanged!

---

Benefits of This Approach

1. Single panel for all version control + GitHub
2. Existing visual diffs work unchanged
3. No rewrite - just adding tabs
4. Shared context between git and GitHub features
5. Familiar UX - users already know VersionControlPanel
6. Less code to maintain than two separate panels

---

Estimated Effort

Phase	Task	Hours
1	Add GitHub Context	2-3
2	Add Issues Tab	3-4
3	Add PRs Tab	3-4
4	Enhance GitProviderPopout	2-3
5	Cleanup & Deprecate	1-2
Total		11-16 hours

This is significantly less than maintaining two separate panels!

---

Future: Community Tab

For the GIT-005-011 collaboration features, we might add a third panel:

• VersionControlPanel → Git + GitHub (Issues, PRs)
• CommunityPanel → Communities, Sessions, Components, Notifications

Or integrate Community features as more tabs if it makes sense UX-wise.