feat: gitLab Integration Implementation / github refactor / overal improvements (#1963)
* Add GitLab integration components Introduced PushToGitLabDialog and GitlabConnection components to handle GitLab project connections and push functionality. Includes user authentication, project handling, and UI for seamless integration with GitLab. * Add components for GitLab connection and push dialog Introduce `GitlabConnection` and `PushToGitLabDialog` components to handle GitLab integration. These components allow users to connect their GitLab account, manage recent projects, and push code to a GitLab repository with detailed configurations and feedback. * Fix GitLab personal access tokens link to use correct URL * Update GitHub push call to use new pushToRepository method * Enhance GitLab integration with performance improvements - Add comprehensive caching system for repositories and user data - Implement pagination and search/filter functionality with debouncing - Add skeleton loaders and improved loading states - Implement retry logic for API calls with exponential backoff - Add background refresh capabilities - Improve error handling and user feedback - Optimize API calls to reduce loading times * feat: implement GitLab integration with connection management and repository handling - Add GitLab connection UI components - Implement GitLab API service for repository operations - Add GitLab connection store for state management - Update existing connection components (Vercel, Netlify) - Add repository listing and statistics display - Refactor GitLab components into organized folder structure * fix: resolve GitLab deployment issues and improve user experience - Fix DialogTitle accessibility warnings for screen readers - Remove CORS-problematic attributes from avatar images to prevent loading errors - Enhance GitLab API error handling with detailed error messages - Fix project creation settings to prevent initial commit conflicts - Add automatic GitLab connection state initialization on app startup - Improve deployment dialog UI with better error handling and user feedback - Add GitLab deployment source type to action runner system - Clean up deprecated push dialog files and consolidate deployment components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: implement GitHub clone repository dialog functionality This commit fixes the missing GitHub repository selection dialog in the "Clone a repo" feature by implementing the same elegant interface pattern used by GitLab. Key Changes: - Added onCloneRepository prop support to GitHubConnection component - Updated RepositoryCard to generate proper GitHub clone URLs (https://github.com/{full_name}.git) - Implemented full GitHub repository selection dialog in GitCloneButton.tsx - Added proper dialog close handling after successful clone operations - Maintained existing GitHub connection settings page functionality Technical Details: - Follows same component patterns as GitLab implementation - Uses proper TypeScript interfaces for clone URL handling - Includes professional dialog styling with loading states - Supports repository search, pagination, and authentication flow The GitHub clone experience now matches GitLab's functionality, providing users with a unified and intuitive repository selection interface across both providers. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Clean up unused connection components - Remove ConnectionForm.tsx (unused GitHub form component) - Remove CreateBranchDialog.tsx (unused branch creation dialog) - Remove RepositoryDialogContext.tsx (unused context provider) - Remove empty components/ directory These files were not referenced anywhere in the codebase and were leftover from development. * Remove environment variables info section from ConnectionsTab - Remove collapsible environment variables section - Clean up unused state and imports - Simplify the connections tab UI * Reorganize connections folder structure - Create netlify/ folder and move NetlifyConnection.tsx - Create vercel/ folder and move VercelConnection.tsx - Add index.ts files for both netlify and vercel folders - Update imports in ConnectionsTab.tsx to use new folder structure - All connection components now follow consistent folder organization --------- Co-authored-by: Hayat Bourgi <hayat.bourgi@montyholding.com> Co-authored-by: Hayat55 <53140162+Hayat55@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Stijnus
@@ -1,13 +1,11 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import React, { Suspense, useState } from 'react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import ConnectionDiagnostics from './ConnectionDiagnostics';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import VercelConnection from './VercelConnection';
|
||||
import React, { Suspense } from 'react';
|
||||
|
||||
// Use React.lazy for dynamic imports
|
||||
const GitHubConnection = React.lazy(() => import('./GithubConnection'));
|
||||
const NetlifyConnection = React.lazy(() => import('./NetlifyConnection'));
|
||||
const GitHubConnection = React.lazy(() => import('./github/GitHubConnection'));
|
||||
const GitlabConnection = React.lazy(() => import('./gitlab/GitLabConnection'));
|
||||
const NetlifyConnection = React.lazy(() => import('./netlify/NetlifyConnection'));
|
||||
const VercelConnection = React.lazy(() => import('./vercel/VercelConnection'));
|
||||
|
||||
// Loading fallback component
|
||||
const LoadingFallback = () => (
|
||||
@@ -20,139 +18,31 @@ const LoadingFallback = () => (
|
||||
);
|
||||
|
||||
export default function ConnectionsTab() {
|
||||
const [isEnvVarsExpanded, setIsEnvVarsExpanded] = useState(false);
|
||||
const [showDiagnostics, setShowDiagnostics] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
className="flex items-center justify-between gap-2"
|
||||
className="flex items-center gap-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:plugs-connected w-5 h-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
|
||||
<h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
|
||||
Connection Settings
|
||||
</h2>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setShowDiagnostics(!showDiagnostics)}
|
||||
variant="outline"
|
||||
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
|
||||
>
|
||||
{showDiagnostics ? (
|
||||
<>
|
||||
<div className="i-ph:eye-slash w-4 h-4" />
|
||||
Hide Diagnostics
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:wrench w-4 h-4" />
|
||||
Troubleshoot Connections
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<div className="i-ph:plugs-connected w-5 h-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
|
||||
<h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
|
||||
Connection Settings
|
||||
</h2>
|
||||
</motion.div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
|
||||
Manage your external service connections and integrations
|
||||
</p>
|
||||
|
||||
{/* Diagnostics Tool - Conditionally rendered */}
|
||||
{showDiagnostics && <ConnectionDiagnostics />}
|
||||
|
||||
{/* Environment Variables Info - Collapsible */}
|
||||
<motion.div
|
||||
className="bg-bolt-elements-background dark:bg-bolt-elements-background rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<div className="p-6">
|
||||
<button
|
||||
onClick={() => setIsEnvVarsExpanded(!isEnvVarsExpanded)}
|
||||
className={classNames(
|
||||
'w-full bg-transparent flex items-center justify-between',
|
||||
'hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary',
|
||||
'dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary',
|
||||
'rounded-md p-2 -m-2 transition-colors',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:info w-5 h-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
|
||||
<h3 className="text-base font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
|
||||
Environment Variables
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary transition-transform',
|
||||
isEnvVarsExpanded ? 'rotate-180' : '',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{isEnvVarsExpanded && (
|
||||
<div className="mt-4">
|
||||
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
|
||||
You can configure connections using environment variables in your{' '}
|
||||
<code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
|
||||
.env.local
|
||||
</code>{' '}
|
||||
file:
|
||||
</p>
|
||||
<div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 p-3 rounded-md text-xs font-mono overflow-x-auto">
|
||||
<div className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
|
||||
# GitHub Authentication
|
||||
</div>
|
||||
<div className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
|
||||
VITE_GITHUB_ACCESS_TOKEN=your_token_here
|
||||
</div>
|
||||
<div className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
|
||||
# Optional: Specify token type (defaults to 'classic' if not specified)
|
||||
</div>
|
||||
<div className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
|
||||
VITE_GITHUB_TOKEN_TYPE=classic|fine-grained
|
||||
</div>
|
||||
<div className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2">
|
||||
# Netlify Authentication
|
||||
</div>
|
||||
<div className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
|
||||
VITE_NETLIFY_ACCESS_TOKEN=your_token_here
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary space-y-1">
|
||||
<p>
|
||||
<span className="font-medium">Token types:</span>
|
||||
</p>
|
||||
<ul className="list-disc list-inside pl-2 space-y-1">
|
||||
<li>
|
||||
<span className="font-medium">classic</span> - Personal Access Token with{' '}
|
||||
<code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
|
||||
repo, read:org, read:user
|
||||
</code>{' '}
|
||||
scopes
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-medium">fine-grained</span> - Fine-grained token with Repository and
|
||||
Organization access
|
||||
</li>
|
||||
</ul>
|
||||
<p className="mt-2">
|
||||
When set, these variables will be used automatically without requiring manual connection.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
<GitHubConnection />
|
||||
</Suspense>
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
<GitlabConnection />
|
||||
</Suspense>
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
<NetlifyConnection />
|
||||
</Suspense>
|
||||
@@ -168,8 +58,7 @@ export default function ConnectionsTab() {
|
||||
<span className="font-medium">Troubleshooting Tip:</span>
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
If you're having trouble with connections, try using the troubleshooting tool at the top of this page. It can
|
||||
help diagnose and fix common connection issues.
|
||||
If you're having trouble with connections, here are some troubleshooting tips to help resolve common issues.
|
||||
</p>
|
||||
<p>For persistent issues:</p>
|
||||
<ol className="list-decimal list-inside pl-4 mt-1">
|
||||
|
||||
Reference in New Issue
Block a user