OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-002C-github-clone-and-connect/CHANGELOG.md

TASK-002C: GitHub Clone & Connect - Changelog

2025-01-17 - Subtask A: Clone from GitHub ✅ COMPLETE

Implemented Features

1. GitHub Tab in Launcher

• New "GitHub" tab added to the launcher navigation
• Shows user's GitHub avatar when connected
• Only available when authenticated

2. Noodl Project Detection

• Scans all repos for project.json at root
• Shows scanning progress: "Scanning X repositories for project.json..."
• Only displays repos that are confirmed Noodl projects
• Caches detection results for 1 minute

3. Repository Organization

• Groups repos by source: Personal vs Organization
• Collapsible organization sections with project counts
• Shows repo details: name, privacy status, description, last updated

4. Clone Functionality

• Clone button on each Noodl project card
• User selects destination folder via native dialog
• Progress indicator during clone
• Legacy project detection: After cloning, detects React 17 projects and shows:
  • Migrate - Opens migration wizard
  • Read-Only - Opens in read-only mode
  • Cancel - Adds to projects list without opening

5. OAuth Improvements

• Fixed cache bug: null values now properly handled (undefined vs null)
• Fixed scope: Token now has proper permissions for private repo access
• Connection status persists across sessions

Files Modified

Editor (noodl-editor):

• src/editor/src/pages/ProjectsPage/ProjectsPage.tsx - Added handleCloneRepo with legacy detection
• src/editor/src/services/github/GitHubClient.ts - Fixed cache, simplified isNoodlProject
• src/editor/src/services/GitHubOAuthService.ts - Fixed token persistence

Core UI (noodl-core-ui):

• src/preview/launcher/Launcher/views/GitHubRepos.tsx - New GitHub repos view
• src/preview/launcher/Launcher/hooks/useGitHubRepos.ts - Hook for fetching/detecting repos
• src/preview/launcher/Launcher/Launcher.tsx - Added GitHub tab
• src/preview/launcher/Launcher/LauncherContext.tsx - Added GitHub context props

Bug Fixes

• Fixed cache returning stale null values (404 results)
• Removed premature nodegx.project.json check
• Fixed OAuth flow to properly complete on macOS

Known Limitations

• Only checks default branch for project.json
• API rate limit: ~5000 requests/hour (sufficient for most users)
• Large organizations may take time to scan all repos

---

2025-01-17 - Subtask B: Connect Project to GitHub ✅ COMPLETE

Implemented Features

1. Enhanced Git State Detection

• Extended useGitHubRepository hook to return detailed git state:
  • no-git - No .git folder, project not under version control
  • git-no-remote - Has .git but no remote configured
  • remote-not-github - Has remote but not github.com
  • github-connected - Connected to GitHub

2. Connect to GitHub Flow

• ConnectToGitHubView - Main view showing state-appropriate options
• State-specific messaging:
  • No git: "Initialize Git Repository"
  • No remote: "Connect to GitHub"
  • Not GitHub: Shows current remote URL with explanation

3. Create New Repository

• CreateRepoModal - Full modal for creating new GitHub repos
• Features:
  • Repository name with validation (GitHub naming rules)
  • Optional description
  • Visibility toggle (Private/Public, defaults to Private)
  • Organization picker (lists user's organizations)
• After creation:
  • Initializes git if needed
  • Adds remote origin
  • Creates initial commit
  • Pushes to remote

4. Connect to Existing Repository

• SelectRepoModal - Browse and select from user's repos
• Features:
  • Lists all user repos + organization repos
  • Search/filter by name or description
  • Grouped by owner (Personal vs Organization)
  • Shows privacy status and last updated
• After connecting:
  • Initializes git if needed
  • Sets remote URL
  • Fetches from remote if repo has commits
  • Attempts to merge remote changes

Files Added

ConnectToGitHub Components:

• components/ConnectToGitHub/ConnectToGitHubView.tsx - Main view component
• components/ConnectToGitHub/CreateRepoModal.tsx - Create repo modal
• components/ConnectToGitHub/SelectRepoModal.tsx - Select existing repo modal
• components/ConnectToGitHub/ConnectToGitHub.module.scss - Styles
• components/ConnectToGitHub/index.ts - Exports

Files Modified

• hooks/useGitHubRepository.ts - Enhanced with ProjectGitState type and refetch function
• services/github/GitHubTypes.ts - Added CreateRepositoryOptions interface
• services/github/GitHubClient.ts - Added createRepository method
• GitHubPanel.tsx - Integrated ConnectToGitHubView for unconnected states

---

2025-01-17 - Subtask C: Push/Pull from GitHub Panel ✅ COMPLETE

Implemented Features

1. Git Sync Status Hook

• useGitSyncStatus - Monitors git sync status in real-time
• Tracks:
  • ahead - Number of commits ahead of remote
  • behind - Number of commits behind remote
  • hasUncommittedChanges - Whether there are local changes
• Provides:
  • push() - Push to remote (auto-commits if uncommitted changes)
  • pull() - Pull from remote (stashes changes, merges, pops stash)
  • refresh() - Manually refresh sync status
• Auto-refreshes on project save and remote changes

2. Sync Toolbar

• SyncToolbar - Toolbar displayed at top of GitHubPanel when connected
• Shows:
  • Repository name (owner/repo)
  • Sync status (uncommitted changes, up to date)
• Buttons:
  • Pull - Pull from remote, shows badge with behind count
  • Push - Push to remote, shows badge with ahead count or "!" for uncommitted
  • Refresh - Manually refresh sync status (spinning animation while loading)
• Visual feedback:
  • Highlighted buttons when there are changes to push/pull
  • Error bar for operation failures

3. Push Operation

• Checks for uncommitted changes
• Auto-commits with "Auto-commit before push" message
• Pushes to remote
• Refreshes sync status

4. Pull Operation

• Stashes local changes if present
• Fetches from remote
• Merges remote branch into current branch
• Pops stash to restore local changes
• Notifies project to refresh

Files Added

SyncToolbar Component:

• components/SyncToolbar/SyncToolbar.tsx - Toolbar with push/pull buttons
• components/SyncToolbar/SyncToolbar.module.scss - Styles
• components/SyncToolbar/index.ts - Exports

Hooks:

• hooks/useGitSyncStatus.ts - Git sync status monitoring

Files Modified

• GitHubPanel.tsx - Added SyncToolbar to connected state view

---

Summary

All Subtasks Complete ✅

Subtask	Status	Description
A: Clone from GitHub	Complete	Clone Noodl projects from GitHub in launcher
B: Connect Project to GitHub	Complete	Initialize git, create/connect repo from editor
C: Push/Pull from GitHub Panel	Complete	Push/pull with sync status in GitHubPanel

Files Created (New)

packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
├── components/
│   ├── ConnectToGitHub/
│   │   ├── ConnectToGitHub.module.scss
│   │   ├── ConnectToGitHubView.tsx
│   │   ├── CreateRepoModal.tsx
│   │   ├── SelectRepoModal.tsx
│   │   └── index.ts
│   └── SyncToolbar/
│       ├── SyncToolbar.module.scss
│       ├── SyncToolbar.tsx
│       └── index.ts
└── hooks/
    └── useGitSyncStatus.ts

Files Modified

packages/noodl-editor/src/editor/src/
├── services/github/
│   ├── GitHubClient.ts         (added createRepository)
│   └── GitHubTypes.ts          (added CreateRepositoryOptions)
└── views/panels/GitHubPanel/
    ├── GitHubPanel.tsx         (integrated new components)
    └── hooks/
        └── useGitHubRepository.ts (enhanced state detection)

---

Completed: January 2025