Skip to content

Commit 4ca535b

Browse files
Stijnusclaude
andauthored
feat: comprehensive service integration refactor with enhanced tabs architecture (#1978)
* feat: add service tabs refactor with GitHub, GitLab, Supabase, Vercel, and Netlify integration This commit introduces a comprehensive refactor of the connections system, replacing the single connections tab with dedicated service integration tabs: ✨ New Service Tabs: - GitHub Tab: Complete integration with repository management, stats, and API - GitLab Tab: GitLab project integration and management - Supabase Tab: Database project management with comprehensive analytics - Vercel Tab: Project deployment management and monitoring - Netlify Tab: Site deployment and build management 🔧 Supporting Infrastructure: - Enhanced store management for each service with auto-connect via env vars - API routes for secure server-side token handling and data fetching - Updated TypeScript types with missing properties and interfaces - Comprehensive hooks for service connections and state management - Security utilities for API endpoint validation 🎨 UI/UX Improvements: - Individual service tabs with tailored functionality - Motion animations and improved loading states - Connection testing and health monitoring - Advanced analytics dashboards for each service - Consistent design patterns across all service tabs 🛠️ Technical Changes: - Removed legacy connection tab in favor of individual service tabs - Updated tab configuration and routing system - Added comprehensive error handling and loading states - Enhanced type safety with extended interfaces - Implemented environment variable auto-connection features Note: Some TypeScript errors remain and will need to be resolved in follow-up commits. The dev server runs successfully and the service tabs are functional. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * feat: comprehensive service integration refactor with enhanced tabs architecture Major architectural improvements to service integrations: **Service Integration Refactor:** - Complete restructure of service connection tabs (GitHub, GitLab, Vercel, Netlify, Supabase) - Migrated from centralized ConnectionsTab to dedicated service-specific tabs - Added shared service integration components for consistent UX - Implemented auto-connection feature using environment variables **New Components & Architecture:** - ServiceIntegrationLayout for consistent service tab structure - ConnectionStatus, ServiceCard components for reusable UI patterns - BranchSelector component for repository branch management - Enhanced authentication dialogs with improved error handling **API & Backend Enhancements:** - New API endpoints: github-branches, gitlab-branches, gitlab-projects, vercel-user - Enhanced GitLab API service with comprehensive project management - Improved connection testing hooks (useConnectionTest) - Better error handling and rate limiting across all services **Configuration & Environment:** - Updated .env.example with comprehensive service integration guides - Added auto-connection support for all major services - Improved development and production environment configurations - Enhanced tab management with proper service icons **Code Quality & TypeScript:** - Fixed all TypeScript errors across service integration components - Enhanced type definitions for Vercel, Supabase, and other service integrations - Improved type safety with proper optional chaining and type assertions - Better separation of concerns between UI and business logic **Removed Legacy Code:** - Removed redundant connection components and consolidated into service tabs - Cleaned up unused imports and deprecated connection patterns - Streamlined authentication flows across all services This refactor provides a more maintainable, scalable architecture for service integrations while significantly improving the user experience for managing external connections. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * refactor: clean up dead code and consolidate utilities - Remove legacy .eslintrc.json (replaced by flat config) - Remove duplicate app/utils/types.ts (unused type definitions) - Remove app/utils/cn.ts and consolidate with classNames utility - Clean up unused ServiceErrorHandler class implementation - Enhance classNames utility to support boolean values - Update GlowingEffect.tsx to use consolidated classNames utility Removes ~150+ lines of unused code while maintaining all functionality. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * Simplify terminal health checks and improve project setup Removed aggressive health checking and reconnection logic from TerminalManager to prevent issues with terminal responsiveness. Updated TerminalTabs to remove onReconnect handlers. Enhanced projectCommands utility to generate non-interactive setup commands and detect shadcn projects, improving automation and reliability of project setup. * fix: resolve GitLab deployment issues and enhance GitHub deployment reliability GitLab Deployment Fixes: - Fix COEP header issue for avatar images by adding crossOrigin and referrerPolicy attributes - Implement repository name sanitization to handle special characters and ensure GitLab compliance - Enhance error handling with detailed validation error parsing and user-friendly messages - Add explicit path field and description to project creation requests - Improve URL encoding and project path resolution for proper API calls - Add graceful file commit handling with timeout and error recovery GitHub Deployment Enhancements: - Add comprehensive repository name validation and sanitization - Implement real-time feedback for invalid characters in repository name input - Enhance error handling with specific error types and retry suggestions - Improve user experience with better error messages and validation feedback - Add repository name length limits and character restrictions - Show sanitized name preview to users before submission General Improvements: - Add GitLabAuthDialog component for improved authentication flow - Enhance logging and debugging capabilities for deployment operations - Improve accessibility with proper dialog titles and descriptions - Add better user notifications for name sanitization and validation issues 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> --------- Co-authored-by: Claude <[email protected]>
1 parent 2fde6f8 commit 4ca535b

File tree

94 files changed

+12178
-2963
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+12178
-2963
lines changed

.env.example

Lines changed: 43 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ VITE_GITHUB_TOKEN_TYPE=classic
136136
# - api (for full API access including project creation and commits)
137137
# - read_repository (to clone/import repositories)
138138
# - write_repository (to push commits and update branches)
139-
VITE_GITLAB_ACCESS_TOKEN=
139+
VITE_GITLAB_ACCESS_TOKEN=your_gitlab_personal_access_token_here
140140

141141
# Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
142142
VITE_GITLAB_URL=https://gitlab.com
@@ -145,110 +145,65 @@ VITE_GITLAB_URL=https://gitlab.com
145145
VITE_GITLAB_TOKEN_TYPE=personal-access-token
146146

147147
# ======================================
148-
# DEVELOPMENT SETTINGS
148+
# VERCEL INTEGRATION
149149
# ======================================
150150

151+
# Vercel Access Token
152+
# Get your access token from: https://vercel.com/account/tokens
153+
# This token is used for:
154+
# 1. Deploying projects to Vercel
155+
# 2. Managing Vercel projects and deployments
156+
# 3. Accessing project analytics and logs
157+
VITE_VERCEL_ACCESS_TOKEN=your_vercel_access_token_here
158+
151159
# ======================================
152-
# DEVELOPMENT SETTINGS
160+
# NETLIFY INTEGRATION
153161
# ======================================
154162

155-
# Development Mode
156-
NODE_ENV=development
157-
158-
# Application Port (optional, defaults to 3000)
159-
PORT=3000
160-
161-
# Logging Level (debug, info, warn, error)
162-
VITE_LOG_LEVEL=debug
163-
164-
# Default Context Window Size (for local models)
165-
DEFAULT_NUM_CTX=32768
163+
# Netlify Access Token
164+
# Get your access token from: https://app.netlify.com/user/applications
165+
# This token is used for:
166+
# 1. Deploying sites to Netlify
167+
# 2. Managing Netlify sites and deployments
168+
# 3. Accessing build logs and analytics
169+
VITE_NETLIFY_ACCESS_TOKEN=your_netlify_access_token_here
166170

167171
# ======================================
168-
# INSTRUCTIONS
172+
# SUPABASE INTEGRATION
169173
# ======================================
170-
# 1. Copy this file to .env.local: cp .env.example .env.local
171-
# 2. Fill in the API keys you want to use
172-
# 3. Restart your development server: npm run dev
173-
# 4. Go to Settings > Providers to enable/configure providers
174-
# ======================================
175-
# GITLAB INTEGRATION
176-
# ======================================
177-
178-
# GitLab Personal Access Token
179-
# Get your GitLab Personal Access Token here:
180-
# https://gitlab.com/-/profile/personal_access_tokens
181-
#
182-
# This token is used for:
183-
# 1. Importing/cloning GitLab repositories
184-
# 2. Accessing private projects
185-
# 3. Creating/updating branches
186-
# 4. Creating/updating commits and pushing code
187-
# 5. Creating new GitLab projects via the API
188-
#
189-
# Make sure your token has the following scopes:
190-
# - api (for full API access including project creation and commits)
191-
# - read_repository (to clone/import repositories)
192-
# - write_repository (to push commits and update branches)
193-
VITE_GITLAB_ACCESS_TOKEN=
194174

195-
# Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
196-
VITE_GITLAB_URL=https://gitlab.com
175+
# Supabase Project Configuration
176+
# Get your project details from: https://supabase.com/dashboard
177+
# Select your project → Settings → API
178+
VITE_SUPABASE_URL=your_supabase_project_url_here
179+
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here
197180

198-
# GitLab token type should be 'personal-access-token'
199-
VITE_GITLAB_TOKEN_TYPE=personal-access-token
181+
# Supabase Access Token (for management operations)
182+
# Generate from: https://supabase.com/dashboard/account/tokens
183+
VITE_SUPABASE_ACCESS_TOKEN=your_supabase_access_token_here
200184

201185
# ======================================
202-
# GITLAB INTEGRATION
186+
# DEVELOPMENT SETTINGS
203187
# ======================================
204188

205-
# GitLab Personal Access Token
206-
# Get your GitLab Personal Access Token here:
207-
# https://gitlab.com/-/profile/personal_access_tokens
208-
#
209-
# This token is used for:
210-
# 1. Importing/cloning GitLab repositories
211-
# 2. Accessing private projects
212-
# 3. Creating/updating branches
213-
# 4. Creating/updating commits and pushing code
214-
# 5. Creating new GitLab projects via the API
215-
#
216-
# Make sure your token has the following scopes:
217-
# - api (for full API access including project creation and commits)
218-
# - read_repository (to clone/import repositories)
219-
# - write_repository (to push commits and update branches)
220-
VITE_GITLAB_ACCESS_TOKEN=
189+
# Development Mode
190+
NODE_ENV=development
221191

222-
# Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
223-
VITE_GITLAB_URL=https://gitlab.com
192+
# Application Port (optional, defaults to 5173 for development)
193+
PORT=5173
224194

225-
# GitLab token type should be 'personal-access-token'
226-
VITE_GITLAB_TOKEN_TYPE=personal-access-token
195+
# Logging Level (debug, info, warn, error)
196+
VITE_LOG_LEVEL=debug
227197

198+
# Default Context Window Size (for local models)
199+
DEFAULT_NUM_CTX=32768
228200

229201
# ======================================
230-
# GITLAB INTEGRATION
202+
# SETUP INSTRUCTIONS
231203
# ======================================
232-
233-
# GitLab Personal Access Token
234-
# Get your GitLab Personal Access Token here:
235-
# https://gitlab.com/-/profile/personal_access_tokens
236-
#
237-
# This token is used for:
238-
# 1. Importing/cloning GitLab repositories
239-
# 2. Accessing private projects
240-
# 3. Creating/updating branches
241-
# 4. Creating/updating commits and pushing code
242-
# 5. Creating new GitLab projects via the API
243-
#
244-
# Make sure your token has the following scopes:
245-
# - api (for full API access including project creation and commits)
246-
# - read_repository (to clone/import repositories)
247-
# - write_repository (to push commits and update branches)
248-
VITE_GITLAB_ACCESS_TOKEN=
249-
250-
# Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
251-
VITE_GITLAB_URL=https://gitlab.com
252-
253-
# GitLab token type should be 'personal-access-token'
254-
VITE_GITLAB_TOKEN_TYPE=personal-access-token
204+
# 1. Copy this file to .env.local: cp .env.example .env.local
205+
# 2. Fill in the API keys for the services you want to use
206+
# 3. All service integration keys use VITE_ prefix for auto-connection
207+
# 4. Restart your development server: pnpm run dev
208+
# 5. Services will auto-connect on startup if tokens are provided
209+
# 6. Go to Settings > Service tabs to manage connections manually if needed

.env.production

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,36 @@ VITE_GITHUB_ACCESS_TOKEN=
103103
# Classic tokens are recommended for broader access
104104
VITE_GITHUB_TOKEN_TYPE=
105105

106-
# Netlify Authentication
106+
# ======================================
107+
# SERVICE INTEGRATIONS
108+
# ======================================
109+
110+
# GitLab Personal Access Token
111+
# Get your GitLab Personal Access Token here:
112+
# https://gitlab.com/-/profile/personal_access_tokens
113+
# Required scopes: api, read_repository, write_repository
114+
VITE_GITLAB_ACCESS_TOKEN=
115+
116+
# GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
117+
VITE_GITLAB_URL=https://gitlab.com
118+
119+
# GitLab token type
120+
VITE_GITLAB_TOKEN_TYPE=personal-access-token
121+
122+
# Vercel Access Token
123+
# Get your access token from: https://vercel.com/account/tokens
124+
VITE_VERCEL_ACCESS_TOKEN=
125+
126+
# Netlify Access Token
127+
# Get your access token from: https://app.netlify.com/user/applications
107128
VITE_NETLIFY_ACCESS_TOKEN=
108129

130+
# Supabase Configuration
131+
# Get your project details from: https://supabase.com/dashboard
132+
VITE_SUPABASE_URL=
133+
VITE_SUPABASE_ANON_KEY=
134+
VITE_SUPABASE_ACCESS_TOKEN=
135+
109136
# Example Context Values for qwen2.5-coder:32b
110137
#
111138
# DEFAULT_NUM_CTX=32768 # Consumes 36GB of VRAM

.eslintrc.json

Lines changed: 0 additions & 15 deletions
This file was deleted.

app/components/@settings/core/ControlPanel.tsx

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ import NotificationsTab from '~/components/@settings/tabs/notifications/Notifica
2121
import FeaturesTab from '~/components/@settings/tabs/features/FeaturesTab';
2222
import { DataTab } from '~/components/@settings/tabs/data/DataTab';
2323
import { EventLogsTab } from '~/components/@settings/tabs/event-logs/EventLogsTab';
24-
import ConnectionsTab from '~/components/@settings/tabs/connections/ConnectionsTab';
24+
import GitHubTab from '~/components/@settings/tabs/github/GitHubTab';
25+
import GitLabTab from '~/components/@settings/tabs/gitlab/GitLabTab';
26+
import SupabaseTab from '~/components/@settings/tabs/supabase/SupabaseTab';
27+
import VercelTab from '~/components/@settings/tabs/vercel/VercelTab';
28+
import NetlifyTab from '~/components/@settings/tabs/netlify/NetlifyTab';
2529
import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/CloudProvidersTab';
2630
import LocalProvidersTab from '~/components/@settings/tabs/providers/local/LocalProvidersTab';
2731
import McpTab from '~/components/@settings/tabs/mcp/McpTab';
@@ -133,8 +137,16 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
133137
return <CloudProvidersTab />;
134138
case 'local-providers':
135139
return <LocalProvidersTab />;
136-
case 'connection':
137-
return <ConnectionsTab />;
140+
case 'github':
141+
return <GitHubTab />;
142+
case 'gitlab':
143+
return <GitLabTab />;
144+
case 'supabase':
145+
return <SupabaseTab />;
146+
case 'vercel':
147+
return <VercelTab />;
148+
case 'netlify':
149+
return <NetlifyTab />;
138150
case 'event-logs':
139151
return <EventLogsTab />;
140152
case 'mcp':
@@ -151,7 +163,11 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
151163
return hasNewFeatures;
152164
case 'notifications':
153165
return hasUnreadNotifications;
154-
case 'connection':
166+
case 'github':
167+
case 'gitlab':
168+
case 'supabase':
169+
case 'vercel':
170+
case 'netlify':
155171
return hasConnectionIssues;
156172
default:
157173
return false;
@@ -164,7 +180,11 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
164180
return `${unviewedFeatures.length} new feature${unviewedFeatures.length === 1 ? '' : 's'} to explore`;
165181
case 'notifications':
166182
return `${unreadNotifications.length} unread notification${unreadNotifications.length === 1 ? '' : 's'}`;
167-
case 'connection':
183+
case 'github':
184+
case 'gitlab':
185+
case 'supabase':
186+
case 'vercel':
187+
case 'netlify':
168188
return currentIssue === 'disconnected'
169189
? 'Connection lost'
170190
: currentIssue === 'high-latency'
@@ -188,7 +208,11 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
188208
case 'notifications':
189209
markAllAsRead();
190210
break;
191-
case 'connection':
211+
case 'github':
212+
case 'gitlab':
213+
case 'supabase':
214+
case 'vercel':
215+
case 'netlify':
192216
acknowledgeIssue();
193217
break;
194218
}

app/components/@settings/core/constants.ts

Lines changed: 0 additions & 57 deletions
This file was deleted.

0 commit comments

Comments
 (0)