feat: github fix and ui improvements (#1685)

* feat: Add reusable UI components and fix GitHub repository display

* style: Fix linting issues in UI components

* fix: Add close icon to GitHub Connection Required dialog

* fix: Add CloseButton component to fix white background issue in dialog close icons

* Fix close button styling in dialog components to address ghost white issue in dark mode

* fix: update icon color to tertiary for consistency

The icon color was changed from `text-bolt-elements-icon-info` to `text-bolt-elements-icon-tertiary`

* fix: improve repository selection dialog tab styling for dark mode

- Update tab menu styling to prevent white background in dark mode
- Use explicit color values for better dark/light mode compatibility
- Improve hover and active states for better visual hierarchy
- Remove unused Tabs imports

---------

Co-authored-by: KevIsDev <zennerd404@gmail.com>
This commit is contained in:
Stijnus
2025-05-09 15:23:20 +02:00
committed by GitHub
parent 9a5076d8c6
commit 870bfc58ee
28 changed files with 2868 additions and 689 deletions

View File

@@ -43,9 +43,9 @@ export function useGit() {
}, []);
const gitClone = useCallback(
async (url: string) => {
async (url: string, retryCount = 0) => {
if (!webcontainer || !fs || !ready) {
throw 'Webcontainer not initialized';
throw new Error('Webcontainer not initialized. Please try again later.');
}
fileData.current = {};
@@ -68,6 +68,12 @@ export function useGit() {
}
try {
// Add a small delay before retrying to allow for network recovery
if (retryCount > 0) {
await new Promise((resolve) => setTimeout(resolve, 1000 * retryCount));
console.log(`Retrying git clone (attempt ${retryCount + 1})...`);
}
await git.clone({
fs,
http,
@@ -90,10 +96,10 @@ export function useGit() {
console.log('Repository requires authentication:', url);
if (confirm('This repo is password protected. Ready to enter a username & password?')) {
if (confirm('This repository requires authentication. Would you like to enter your GitHub credentials?')) {
auth = {
username: prompt('Enter username') || '',
password: prompt('Enter password') || '',
password: prompt('Enter password or personal access token') || '',
};
return auth;
} else {
@@ -102,8 +108,10 @@ export function useGit() {
},
onAuthFailure: (url, _auth) => {
console.error(`Authentication failed for ${url}`);
toast.error(`Error Authenticating with ${url.split('/')[2]}`);
throw `Error Authenticating with ${url.split('/')[2]}`;
toast.error(`Authentication failed for ${url.split('/')[2]}. Please check your credentials and try again.`);
throw new Error(
`Authentication failed for ${url.split('/')[2]}. Please check your credentials and try again.`,
);
},
onAuthSuccess: (url, auth) => {
console.log(`Authentication successful for ${url}`);
@@ -121,8 +129,40 @@ export function useGit() {
} catch (error) {
console.error('Git clone error:', error);
// toast.error(`Git clone error ${(error as any).message||""}`);
throw error;
// Handle specific error types
const errorMessage = error instanceof Error ? error.message : String(error);
// Check for common error patterns
if (errorMessage.includes('Authentication failed')) {
toast.error(`Authentication failed. Please check your GitHub credentials and try again.`);
throw error;
} else if (
errorMessage.includes('ENOTFOUND') ||
errorMessage.includes('ETIMEDOUT') ||
errorMessage.includes('ECONNREFUSED')
) {
toast.error(`Network error while connecting to repository. Please check your internet connection.`);
// Retry for network errors, up to 3 times
if (retryCount < 3) {
return gitClone(url, retryCount + 1);
}
throw new Error(
`Failed to connect to repository after multiple attempts. Please check your internet connection.`,
);
} else if (errorMessage.includes('404')) {
toast.error(`Repository not found. Please check the URL and make sure the repository exists.`);
throw new Error(`Repository not found. Please check the URL and make sure the repository exists.`);
} else if (errorMessage.includes('401')) {
toast.error(`Unauthorized access to repository. Please connect your GitHub account with proper permissions.`);
throw new Error(
`Unauthorized access to repository. Please connect your GitHub account with proper permissions.`,
);
} else {
toast.error(`Failed to clone repository: ${errorMessage}`);
throw error;
}
}
},
[webcontainer, fs, ready],