mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 10:03:31 +01:00
293 lines
9.8 KiB
Markdown
293 lines
9.8 KiB
Markdown
# 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:
|
|
|
|
```typescript
|
|
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:
|
|
|
|
```typescript
|
|
// 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:
|
|
|
|
```typescript
|
|
// 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:
|
|
|
|
```typescript
|
|
// 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.
|