mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-07 23:17:37 +00:00
refactor(wizard): rebuild project creation flow as modular TypeScript components
Replace the monolithic `ProjectCreationWizard.jsx` with a feature-based TS
implementation under `src/components/project-creation-wizard`, while preserving
existing behavior and improving readability, maintainability, and state isolation.
Why:
- The previous wizard mixed API logic, flow state, folder browsing, and UI in one file.
- Refactoring and testing were difficult due to tightly coupled concerns.
- We needed stronger type safety and localized component state.
What changed:
- Deleted:
- `src/components/ProjectCreationWizard.jsx`
- Added new modular structure:
- `src/components/project-creation-wizard/index.ts`
- `src/components/project-creation-wizard/ProjectCreationWizard.tsx`
- `src/components/project-creation-wizard/types.ts`
- `src/components/project-creation-wizard/data/workspaceApi.ts`
- `src/components/project-creation-wizard/hooks/useGithubTokens.ts`
- `src/components/project-creation-wizard/utils/pathUtils.ts`
- `src/components/project-creation-wizard/components/*`
- `WizardProgress`, `WizardFooter`, `ErrorBanner`
- `StepTypeSelection`, `StepConfiguration`, `StepReview`
- `WorkspacePathField`, `GithubAuthenticationCard`, `FolderBrowserModal`
- Updated import usage:
- `src/components/sidebar/view/subcomponents/SidebarModals.tsx`
now imports from `../../../project-creation-wizard`.
Implementation details:
- Migrated wizard logic to TypeScript using `type` aliases only.
- Kept component prop types colocated in each component file.
- Split responsibilities by feature:
- container/orchestration in `ProjectCreationWizard.tsx`
- API/SSE and request parsing in `data/workspaceApi.ts`
- GitHub token loading/caching behavior in `useGithubTokens`
- path/URL helpers in `utils/pathUtils.ts`
- Localized UI-only state to child components:
- folder browser modal state (current path, hidden folders, create-folder input)
- path suggestion dropdown state with debounced lookup
- Preserved existing UX flows:
- step navigation and validation
- existing/new workspace modes
- optional GitHub clone + auth modes
- clone progress via SSE
- folder browsing + folder creation
- Added focused comments for non-obvious logic (debounce, SSE auth constraint, path edge cases).
This commit is contained in:
Haileyesus
@@ -1,874 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader2, AlertCircle, FolderOpen, Eye, EyeOff, Plus } from 'lucide-react';
|
||||
import { Button, Input } from '../shared/view/ui';
|
||||
import { api } from '../utils/api';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
|
||||
const { t } = useTranslation();
|
||||
// Wizard state
|
||||
const [step, setStep] = useState(1); // 1: Choose type, 2: Configure, 3: Confirm
|
||||
const [workspaceType, setWorkspaceType] = useState('existing'); // 'existing' or 'new' - default to 'existing'
|
||||
|
||||
// Form state
|
||||
const [workspacePath, setWorkspacePath] = useState('');
|
||||
const [githubUrl, setGithubUrl] = useState('');
|
||||
const [selectedGithubToken, setSelectedGithubToken] = useState('');
|
||||
const [tokenMode, setTokenMode] = useState('stored'); // 'stored' | 'new' | 'none'
|
||||
const [newGithubToken, setNewGithubToken] = useState('');
|
||||
|
||||
// UI state
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [availableTokens, setAvailableTokens] = useState([]);
|
||||
const [loadingTokens, setLoadingTokens] = useState(false);
|
||||
const [pathSuggestions, setPathSuggestions] = useState([]);
|
||||
const [showPathDropdown, setShowPathDropdown] = useState(false);
|
||||
const [showFolderBrowser, setShowFolderBrowser] = useState(false);
|
||||
const [browserCurrentPath, setBrowserCurrentPath] = useState('~');
|
||||
const [browserFolders, setBrowserFolders] = useState([]);
|
||||
const [loadingFolders, setLoadingFolders] = useState(false);
|
||||
const [showHiddenFolders, setShowHiddenFolders] = useState(false);
|
||||
const [showNewFolderInput, setShowNewFolderInput] = useState(false);
|
||||
const [newFolderName, setNewFolderName] = useState('');
|
||||
const [creatingFolder, setCreatingFolder] = useState(false);
|
||||
const [cloneProgress, setCloneProgress] = useState('');
|
||||
|
||||
// Load available GitHub tokens when needed
|
||||
useEffect(() => {
|
||||
if (step === 2 && workspaceType === 'new' && githubUrl) {
|
||||
loadGithubTokens();
|
||||
}
|
||||
}, [step, workspaceType, githubUrl]);
|
||||
|
||||
// Load path suggestions
|
||||
useEffect(() => {
|
||||
if (workspacePath.length > 2) {
|
||||
loadPathSuggestions(workspacePath);
|
||||
} else {
|
||||
setPathSuggestions([]);
|
||||
setShowPathDropdown(false);
|
||||
}
|
||||
}, [workspacePath]);
|
||||
|
||||
const loadGithubTokens = async () => {
|
||||
try {
|
||||
setLoadingTokens(true);
|
||||
const response = await api.get('/settings/credentials?type=github_token');
|
||||
const data = await response.json();
|
||||
|
||||
const activeTokens = (data.credentials || []).filter(t => t.is_active);
|
||||
setAvailableTokens(activeTokens);
|
||||
|
||||
// Auto-select first token if available
|
||||
if (activeTokens.length > 0 && !selectedGithubToken) {
|
||||
setSelectedGithubToken(activeTokens[0].id.toString());
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading GitHub tokens:', error);
|
||||
} finally {
|
||||
setLoadingTokens(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadPathSuggestions = async (inputPath) => {
|
||||
try {
|
||||
// Extract the directory to browse (parent of input)
|
||||
const lastSlash = inputPath.lastIndexOf('/');
|
||||
const dirPath = lastSlash > 0 ? inputPath.substring(0, lastSlash) : '~';
|
||||
|
||||
const response = await api.browseFilesystem(dirPath);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.suggestions) {
|
||||
// Filter suggestions based on the input, excluding exact match
|
||||
const filtered = data.suggestions.filter(s =>
|
||||
s.path.toLowerCase().startsWith(inputPath.toLowerCase()) &&
|
||||
s.path.toLowerCase() !== inputPath.toLowerCase()
|
||||
);
|
||||
setPathSuggestions(filtered.slice(0, 5));
|
||||
setShowPathDropdown(filtered.length > 0);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading path suggestions:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
setError(null);
|
||||
|
||||
if (step === 1) {
|
||||
if (!workspaceType) {
|
||||
setError(t('projectWizard.errors.selectType'));
|
||||
return;
|
||||
}
|
||||
setStep(2);
|
||||
} else if (step === 2) {
|
||||
if (!workspacePath.trim()) {
|
||||
setError(t('projectWizard.errors.providePath'));
|
||||
return;
|
||||
}
|
||||
|
||||
// No validation for GitHub token - it's optional (only needed for private repos)
|
||||
setStep(3);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
setError(null);
|
||||
setStep(step - 1);
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
setIsCreating(true);
|
||||
setError(null);
|
||||
setCloneProgress('');
|
||||
|
||||
try {
|
||||
if (workspaceType === 'new' && githubUrl) {
|
||||
const params = new URLSearchParams({
|
||||
path: workspacePath.trim(),
|
||||
githubUrl: githubUrl.trim(),
|
||||
});
|
||||
|
||||
if (tokenMode === 'stored' && selectedGithubToken) {
|
||||
params.append('githubTokenId', selectedGithubToken);
|
||||
} else if (tokenMode === 'new' && newGithubToken) {
|
||||
params.append('newGithubToken', newGithubToken.trim());
|
||||
}
|
||||
|
||||
const token = localStorage.getItem('auth-token');
|
||||
const url = `/api/projects/clone-progress?${params}${token ? `&token=${token}` : ''}`;
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
const eventSource = new EventSource(url);
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (data.type === 'progress') {
|
||||
setCloneProgress(data.message);
|
||||
} else if (data.type === 'complete') {
|
||||
eventSource.close();
|
||||
if (onProjectCreated) {
|
||||
onProjectCreated(data.project);
|
||||
}
|
||||
onClose();
|
||||
resolve();
|
||||
} else if (data.type === 'error') {
|
||||
eventSource.close();
|
||||
reject(new Error(data.message));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error parsing SSE event:', e);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = () => {
|
||||
eventSource.close();
|
||||
reject(new Error('Connection lost during clone'));
|
||||
};
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
workspaceType,
|
||||
path: workspacePath.trim(),
|
||||
};
|
||||
|
||||
const response = await api.createWorkspace(payload);
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.details || data.error || t('projectWizard.errors.failedToCreate'));
|
||||
}
|
||||
|
||||
if (onProjectCreated) {
|
||||
onProjectCreated(data.project);
|
||||
}
|
||||
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Error creating workspace:', error);
|
||||
setError(error.message || t('projectWizard.errors.failedToCreate'));
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectPathSuggestion = (suggestion) => {
|
||||
setWorkspacePath(suggestion.path);
|
||||
setShowPathDropdown(false);
|
||||
};
|
||||
|
||||
const openFolderBrowser = async () => {
|
||||
setShowFolderBrowser(true);
|
||||
await loadBrowserFolders('~');
|
||||
};
|
||||
|
||||
const loadBrowserFolders = async (path) => {
|
||||
try {
|
||||
setLoadingFolders(true);
|
||||
const response = await api.browseFilesystem(path);
|
||||
const data = await response.json();
|
||||
setBrowserCurrentPath(data.path || path);
|
||||
setBrowserFolders(data.suggestions || []);
|
||||
} catch (error) {
|
||||
console.error('Error loading folders:', error);
|
||||
} finally {
|
||||
setLoadingFolders(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectFolder = (folderPath, advanceToConfirm = false) => {
|
||||
setWorkspacePath(folderPath);
|
||||
setShowFolderBrowser(false);
|
||||
if (advanceToConfirm) {
|
||||
setStep(3);
|
||||
}
|
||||
};
|
||||
|
||||
const navigateToFolder = async (folderPath) => {
|
||||
await loadBrowserFolders(folderPath);
|
||||
};
|
||||
|
||||
const createNewFolder = async () => {
|
||||
if (!newFolderName.trim()) return;
|
||||
setCreatingFolder(true);
|
||||
setError(null);
|
||||
try {
|
||||
const separator = browserCurrentPath.includes('\\') ? '\\' : '/';
|
||||
const folderPath = `${browserCurrentPath}${separator}${newFolderName.trim()}`;
|
||||
const response = await api.createFolder(folderPath);
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || t('projectWizard.errors.failedToCreateFolder', 'Failed to create folder'));
|
||||
}
|
||||
setNewFolderName('');
|
||||
setShowNewFolderInput(false);
|
||||
await loadBrowserFolders(data.path || folderPath);
|
||||
} catch (error) {
|
||||
console.error('Error creating folder:', error);
|
||||
setError(error.message || t('projectWizard.errors.failedToCreateFolder', 'Failed to create folder'));
|
||||
} finally {
|
||||
setCreatingFolder(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-0 sm:p-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-none sm:rounded-lg shadow-xl w-full h-full sm:h-auto sm:max-w-2xl border-0 sm:border border-gray-200 dark:border-gray-700 overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
|
||||
<FolderPlus className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{t('projectWizard.title')}
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
disabled={isCreating}
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress Indicator */}
|
||||
<div className="px-6 pt-4 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
{[1, 2, 3].map((s) => (
|
||||
<React.Fragment key={s}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center font-medium text-sm ${
|
||||
s < step
|
||||
? 'bg-green-500 text-white'
|
||||
: s === step
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{s < step ? <Check className="w-4 h-4" /> : s}
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
|
||||
{s === 1 ? t('projectWizard.steps.type') : s === 2 ? t('projectWizard.steps.configure') : t('projectWizard.steps.confirm')}
|
||||
</span>
|
||||
</div>
|
||||
{s < 3 && (
|
||||
<div
|
||||
className={`flex-1 h-1 mx-2 rounded ${
|
||||
s < step ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-6 min-h-[300px]">
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-red-800 dark:text-red-200">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 1: Choose workspace type */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
{t('projectWizard.step1.question')}
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Existing Workspace */}
|
||||
<button
|
||||
onClick={() => setWorkspaceType('existing')}
|
||||
className={`p-4 border-2 rounded-lg text-left transition-all ${
|
||||
workspaceType === 'existing'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<FolderPlus className="w-5 h-5 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h5 className="font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{t('projectWizard.step1.existing.title')}
|
||||
</h5>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{t('projectWizard.step1.existing.description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* New Workspace */}
|
||||
<button
|
||||
onClick={() => setWorkspaceType('new')}
|
||||
className={`p-4 border-2 rounded-lg text-left transition-all ${
|
||||
workspaceType === 'new'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<GitBranch className="w-5 h-5 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h5 className="font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{t('projectWizard.step1.new.title')}
|
||||
</h5>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{t('projectWizard.step1.new.description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Configure workspace */}
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
{/* Workspace Path */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{workspaceType === 'existing' ? t('projectWizard.step2.existingPath') : t('projectWizard.step2.newPath')}
|
||||
</label>
|
||||
<div className="relative flex gap-2">
|
||||
<div className="flex-1 relative">
|
||||
<Input
|
||||
type="text"
|
||||
value={workspacePath}
|
||||
onChange={(e) => setWorkspacePath(e.target.value)}
|
||||
placeholder={workspaceType === 'existing' ? '/path/to/existing/workspace' : '/path/to/new/workspace'}
|
||||
className="w-full"
|
||||
/>
|
||||
{showPathDropdown && pathSuggestions.length > 0 && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||
{pathSuggestions.map((suggestion, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => selectPathSuggestion(suggestion)}
|
||||
className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
|
||||
>
|
||||
<div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={openFolderBrowser}
|
||||
className="px-3"
|
||||
title="Browse folders"
|
||||
>
|
||||
<FolderOpen className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{workspaceType === 'existing'
|
||||
? t('projectWizard.step2.existingHelp')
|
||||
: t('projectWizard.step2.newHelp')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* GitHub URL (only for new workspace) */}
|
||||
{workspaceType === 'new' && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('projectWizard.step2.githubUrl')}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={githubUrl}
|
||||
onChange={(e) => setGithubUrl(e.target.value)}
|
||||
placeholder="https://github.com/username/repository"
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{t('projectWizard.step2.githubHelp')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* GitHub Token (only for HTTPS URLs - SSH uses SSH keys) */}
|
||||
{githubUrl && !githubUrl.startsWith('git@') && !githubUrl.startsWith('ssh://') && (
|
||||
<div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<Key className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h5 className="font-medium text-gray-900 dark:text-white mb-1">
|
||||
{t('projectWizard.step2.githubAuth')}
|
||||
</h5>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{t('projectWizard.step2.githubAuthHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loadingTokens ? (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
{t('projectWizard.step2.loadingTokens')}
|
||||
</div>
|
||||
) : availableTokens.length > 0 ? (
|
||||
<>
|
||||
{/* Token Selection Tabs */}
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
<button
|
||||
onClick={() => setTokenMode('stored')}
|
||||
className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
|
||||
tokenMode === 'stored'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{t('projectWizard.step2.storedToken')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTokenMode('new')}
|
||||
className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
|
||||
tokenMode === 'new'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{t('projectWizard.step2.newToken')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setTokenMode('none');
|
||||
setSelectedGithubToken('');
|
||||
setNewGithubToken('');
|
||||
}}
|
||||
className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
|
||||
tokenMode === 'none'
|
||||
? 'bg-green-500 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{t('projectWizard.step2.nonePublic')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{tokenMode === 'stored' ? (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('projectWizard.step2.selectToken')}
|
||||
</label>
|
||||
<select
|
||||
value={selectedGithubToken}
|
||||
onChange={(e) => setSelectedGithubToken(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm"
|
||||
>
|
||||
<option value="">{t('projectWizard.step2.selectTokenPlaceholder')}</option>
|
||||
{availableTokens.map((token) => (
|
||||
<option key={token.id} value={token.id}>
|
||||
{token.credential_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
) : tokenMode === 'new' ? (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('projectWizard.step2.newToken')}
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
value={newGithubToken}
|
||||
onChange={(e) => setNewGithubToken(e.target.value)}
|
||||
placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{t('projectWizard.step2.tokenHelp')}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 border border-blue-200 dark:border-blue-800">
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
{t('projectWizard.step2.publicRepoInfo')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('projectWizard.step2.optionalTokenPublic')}
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
value={newGithubToken}
|
||||
onChange={(e) => setNewGithubToken(e.target.value)}
|
||||
placeholder={t('projectWizard.step2.tokenPublicPlaceholder')}
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{t('projectWizard.step2.noTokensHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Confirm */}
|
||||
{step === 3 && (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
||||
{t('projectWizard.step3.reviewConfig')}
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.workspaceType')}</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{workspaceType === 'existing' ? t('projectWizard.step3.existingWorkspace') : t('projectWizard.step3.newWorkspace')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.path')}</span>
|
||||
<span className="font-mono text-xs text-gray-900 dark:text-white break-all">
|
||||
{workspacePath}
|
||||
</span>
|
||||
</div>
|
||||
{workspaceType === 'new' && githubUrl && (
|
||||
<>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.cloneFrom')}</span>
|
||||
<span className="font-mono text-xs text-gray-900 dark:text-white break-all">
|
||||
{githubUrl}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.authentication')}</span>
|
||||
<span className="text-xs text-gray-900 dark:text-white">
|
||||
{tokenMode === 'stored' && selectedGithubToken
|
||||
? `${t('projectWizard.step3.usingStoredToken')} ${availableTokens.find(t => t.id.toString() === selectedGithubToken)?.credential_name || 'Unknown'}`
|
||||
: tokenMode === 'new' && newGithubToken
|
||||
? t('projectWizard.step3.usingProvidedToken')
|
||||
: (githubUrl.startsWith('git@') || githubUrl.startsWith('ssh://'))
|
||||
? t('projectWizard.step3.sshKey', 'SSH Key')
|
||||
: t('projectWizard.step3.noAuthentication')}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
|
||||
{isCreating && cloneProgress ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-blue-800 dark:text-blue-200">{t('projectWizard.step3.cloningRepository', 'Cloning repository...')}</p>
|
||||
<code className="block text-xs font-mono text-blue-700 dark:text-blue-300 whitespace-pre-wrap break-all">
|
||||
{cloneProgress}
|
||||
</code>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
{workspaceType === 'existing'
|
||||
? t('projectWizard.step3.existingInfo')
|
||||
: githubUrl
|
||||
? t('projectWizard.step3.newWithClone')
|
||||
: t('projectWizard.step3.newEmpty')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={step === 1 ? onClose : handleBack}
|
||||
disabled={isCreating}
|
||||
>
|
||||
{step === 1 ? (
|
||||
t('projectWizard.buttons.cancel')
|
||||
) : (
|
||||
<>
|
||||
<ChevronLeft className="w-4 h-4 mr-1" />
|
||||
{t('projectWizard.buttons.back')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={step === 3 ? handleCreate : handleNext}
|
||||
disabled={isCreating || (step === 1 && !workspaceType)}
|
||||
>
|
||||
{isCreating ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
{githubUrl ? t('projectWizard.buttons.cloning', 'Cloning...') : t('projectWizard.buttons.creating')}
|
||||
</>
|
||||
) : step === 3 ? (
|
||||
<>
|
||||
<Check className="w-4 h-4 mr-1" />
|
||||
{t('projectWizard.buttons.createProject')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t('projectWizard.buttons.next')}
|
||||
<ChevronRight className="w-4 h-4 ml-1" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Folder Browser Modal */}
|
||||
{showFolderBrowser && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[70] p-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] border border-gray-200 dark:border-gray-700 flex flex-col">
|
||||
{/* Browser Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
|
||||
<FolderOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Select Folder
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowHiddenFolders(!showHiddenFolders)}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
showHiddenFolders
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
|
||||
: 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
title={showHiddenFolders ? 'Hide hidden folders' : 'Show hidden folders'}
|
||||
>
|
||||
{showHiddenFolders ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNewFolderInput(!showNewFolderInput)}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
showNewFolderInput
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
|
||||
: 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
title="Create new folder"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowFolderBrowser(false)}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Folder Input */}
|
||||
{showNewFolderInput && (
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="text"
|
||||
value={newFolderName}
|
||||
onChange={(e) => setNewFolderName(e.target.value)}
|
||||
placeholder="New folder name"
|
||||
className="flex-1"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') createNewFolder();
|
||||
if (e.key === 'Escape') {
|
||||
setShowNewFolderInput(false);
|
||||
setNewFolderName('');
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={createNewFolder}
|
||||
disabled={!newFolderName.trim() || creatingFolder}
|
||||
>
|
||||
{creatingFolder ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Create'}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setShowNewFolderInput(false);
|
||||
setNewFolderName('');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Folder List */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{loadingFolders ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-gray-400" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{/* Parent Directory - check for Windows root (e.g., C:\) and Unix root */}
|
||||
{browserCurrentPath !== '~' && browserCurrentPath !== '/' && !/^[A-Za-z]:\\?$/.test(browserCurrentPath) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
const lastSlash = Math.max(browserCurrentPath.lastIndexOf('/'), browserCurrentPath.lastIndexOf('\\'));
|
||||
let parentPath;
|
||||
if (lastSlash <= 0) {
|
||||
parentPath = '/';
|
||||
} else if (lastSlash === 2 && /^[A-Za-z]:/.test(browserCurrentPath)) {
|
||||
parentPath = browserCurrentPath.substring(0, 3);
|
||||
} else {
|
||||
parentPath = browserCurrentPath.substring(0, lastSlash);
|
||||
}
|
||||
navigateToFolder(parentPath);
|
||||
}}
|
||||
className="w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
|
||||
>
|
||||
<FolderOpen className="w-5 h-5 text-gray-400" />
|
||||
<span className="font-medium text-gray-700 dark:text-gray-300">..</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Folders */}
|
||||
{browserFolders.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
No subfolders found
|
||||
</div>
|
||||
) : (
|
||||
browserFolders
|
||||
.filter(folder => showHiddenFolders || !folder.name.startsWith('.'))
|
||||
.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
|
||||
.map((folder, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => navigateToFolder(folder.path)}
|
||||
className="flex-1 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
|
||||
>
|
||||
<FolderPlus className="w-5 h-5 text-blue-500" />
|
||||
<span className="font-medium text-gray-900 dark:text-white">{folder.name}</span>
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => selectFolder(folder.path, workspaceType === 'existing')}
|
||||
className="text-xs px-3"
|
||||
>
|
||||
Select
|
||||
</Button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Browser Footer with Current Path */}
|
||||
<div className="border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="px-4 py-3 bg-gray-50 dark:bg-gray-900/50 flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Path:</span>
|
||||
<code className="text-sm font-mono text-gray-900 dark:text-white flex-1 truncate">
|
||||
{browserCurrentPath}
|
||||
</code>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 p-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowFolderBrowser(false);
|
||||
setShowNewFolderInput(false);
|
||||
setNewFolderName('');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => selectFolder(browserCurrentPath, workspaceType === 'existing')}
|
||||
>
|
||||
Use this folder
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectCreationWizard;
|
||||
229
src/components/project-creation-wizard/ProjectCreationWizard.tsx
Normal file
229
src/components/project-creation-wizard/ProjectCreationWizard.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { FolderPlus, X } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ErrorBanner from './components/ErrorBanner';
|
||||
import StepConfiguration from './components/StepConfiguration';
|
||||
import StepReview from './components/StepReview';
|
||||
import StepTypeSelection from './components/StepTypeSelection';
|
||||
import WizardFooter from './components/WizardFooter';
|
||||
import WizardProgress from './components/WizardProgress';
|
||||
import { useGithubTokens } from './hooks/useGithubTokens';
|
||||
import { cloneWorkspaceWithProgress, createWorkspaceRequest } from './data/workspaceApi';
|
||||
import { isCloneWorkflow, shouldShowGithubAuthentication } from './utils/pathUtils';
|
||||
import type { TokenMode, WizardFormState, WizardStep, WorkspaceType } from './types';
|
||||
|
||||
type ProjectCreationWizardProps = {
|
||||
onClose: () => void;
|
||||
onProjectCreated?: (project?: Record<string, unknown>) => void;
|
||||
};
|
||||
|
||||
const initialFormState: WizardFormState = {
|
||||
workspaceType: 'existing',
|
||||
workspacePath: '',
|
||||
githubUrl: '',
|
||||
tokenMode: 'stored',
|
||||
selectedGithubToken: '',
|
||||
newGithubToken: '',
|
||||
};
|
||||
|
||||
export default function ProjectCreationWizard({
|
||||
onClose,
|
||||
onProjectCreated,
|
||||
}: ProjectCreationWizardProps) {
|
||||
const { t } = useTranslation();
|
||||
const [step, setStep] = useState<WizardStep>(1);
|
||||
const [formState, setFormState] = useState<WizardFormState>(initialFormState);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [cloneProgress, setCloneProgress] = useState('');
|
||||
|
||||
const shouldLoadTokens =
|
||||
step === 2 && shouldShowGithubAuthentication(formState.workspaceType, formState.githubUrl);
|
||||
|
||||
const autoSelectToken = useCallback((tokenId: string) => {
|
||||
setFormState((previous) => ({ ...previous, selectedGithubToken: tokenId }));
|
||||
}, []);
|
||||
|
||||
const {
|
||||
tokens: availableTokens,
|
||||
loading: loadingTokens,
|
||||
loadError: tokenLoadError,
|
||||
selectedTokenName,
|
||||
} = useGithubTokens({
|
||||
shouldLoad: shouldLoadTokens,
|
||||
selectedTokenId: formState.selectedGithubToken,
|
||||
onAutoSelectToken: autoSelectToken,
|
||||
});
|
||||
|
||||
// Keep cross-step values in this component; local UI state lives in child components.
|
||||
const updateField = useCallback(<K extends keyof WizardFormState>(key: K, value: WizardFormState[K]) => {
|
||||
setFormState((previous) => ({ ...previous, [key]: value }));
|
||||
}, []);
|
||||
|
||||
const updateWorkspaceType = useCallback(
|
||||
(workspaceType: WorkspaceType) => updateField('workspaceType', workspaceType),
|
||||
[updateField],
|
||||
);
|
||||
|
||||
const updateTokenMode = useCallback(
|
||||
(tokenMode: TokenMode) => updateField('tokenMode', tokenMode),
|
||||
[updateField],
|
||||
);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
setError(null);
|
||||
|
||||
if (step === 1) {
|
||||
if (!formState.workspaceType) {
|
||||
setError(t('projectWizard.errors.selectType'));
|
||||
return;
|
||||
}
|
||||
setStep(2);
|
||||
return;
|
||||
}
|
||||
|
||||
if (step === 2) {
|
||||
if (!formState.workspacePath.trim()) {
|
||||
setError(t('projectWizard.errors.providePath'));
|
||||
return;
|
||||
}
|
||||
setStep(3);
|
||||
}
|
||||
}, [formState.workspacePath, formState.workspaceType, step, t]);
|
||||
|
||||
const handleBack = useCallback(() => {
|
||||
setError(null);
|
||||
setStep((previousStep) => (previousStep > 1 ? ((previousStep - 1) as WizardStep) : previousStep));
|
||||
}, []);
|
||||
|
||||
const handleCreate = useCallback(async () => {
|
||||
setIsCreating(true);
|
||||
setError(null);
|
||||
setCloneProgress('');
|
||||
|
||||
try {
|
||||
const shouldCloneRepository = isCloneWorkflow(formState.workspaceType, formState.githubUrl);
|
||||
|
||||
if (shouldCloneRepository) {
|
||||
const project = await cloneWorkspaceWithProgress(
|
||||
{
|
||||
workspacePath: formState.workspacePath,
|
||||
githubUrl: formState.githubUrl,
|
||||
tokenMode: formState.tokenMode,
|
||||
selectedGithubToken: formState.selectedGithubToken,
|
||||
newGithubToken: formState.newGithubToken,
|
||||
},
|
||||
{
|
||||
onProgress: setCloneProgress,
|
||||
},
|
||||
);
|
||||
|
||||
onProjectCreated?.(project);
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
const project = await createWorkspaceRequest({
|
||||
workspaceType: formState.workspaceType,
|
||||
path: formState.workspacePath.trim(),
|
||||
});
|
||||
|
||||
onProjectCreated?.(project);
|
||||
onClose();
|
||||
} catch (createError) {
|
||||
const errorMessage =
|
||||
createError instanceof Error
|
||||
? createError.message
|
||||
: t('projectWizard.errors.failedToCreate');
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
}, [formState, onClose, onProjectCreated, t]);
|
||||
|
||||
const shouldCloneRepository = useMemo(
|
||||
() => isCloneWorkflow(formState.workspaceType, formState.githubUrl),
|
||||
[formState.githubUrl, formState.workspaceType],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-0 sm:p-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-none sm:rounded-lg shadow-xl w-full h-full sm:h-auto sm:max-w-2xl border-0 sm:border border-gray-200 dark:border-gray-700 overflow-y-auto">
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
|
||||
<FolderPlus className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{t('projectWizard.title')}
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
disabled={isCreating}
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<WizardProgress step={step} />
|
||||
|
||||
<div className="p-6 space-y-6 min-h-[300px]">
|
||||
{error && <ErrorBanner message={error} />}
|
||||
|
||||
{step === 1 && (
|
||||
<StepTypeSelection
|
||||
workspaceType={formState.workspaceType}
|
||||
onWorkspaceTypeChange={updateWorkspaceType}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<StepConfiguration
|
||||
workspaceType={formState.workspaceType}
|
||||
workspacePath={formState.workspacePath}
|
||||
githubUrl={formState.githubUrl}
|
||||
tokenMode={formState.tokenMode}
|
||||
selectedGithubToken={formState.selectedGithubToken}
|
||||
newGithubToken={formState.newGithubToken}
|
||||
availableTokens={availableTokens}
|
||||
loadingTokens={loadingTokens}
|
||||
tokenLoadError={tokenLoadError}
|
||||
isCreating={isCreating}
|
||||
onWorkspacePathChange={(workspacePath) => updateField('workspacePath', workspacePath)}
|
||||
onGithubUrlChange={(githubUrl) => updateField('githubUrl', githubUrl)}
|
||||
onTokenModeChange={updateTokenMode}
|
||||
onSelectedGithubTokenChange={(selectedGithubToken) =>
|
||||
updateField('selectedGithubToken', selectedGithubToken)
|
||||
}
|
||||
onNewGithubTokenChange={(newGithubToken) =>
|
||||
updateField('newGithubToken', newGithubToken)
|
||||
}
|
||||
onAdvanceToConfirm={() => setStep(3)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<StepReview
|
||||
formState={formState}
|
||||
selectedTokenName={selectedTokenName}
|
||||
isCreating={isCreating}
|
||||
cloneProgress={cloneProgress}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<WizardFooter
|
||||
step={step}
|
||||
isCreating={isCreating}
|
||||
isCloneWorkflow={shouldCloneRepository}
|
||||
onClose={onClose}
|
||||
onBack={handleBack}
|
||||
onNext={handleNext}
|
||||
onCreate={handleCreate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
|
||||
type ErrorBannerProps = {
|
||||
message: string;
|
||||
};
|
||||
|
||||
export default function ErrorBanner({ message }: ErrorBannerProps) {
|
||||
return (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-800 dark:text-red-200">{message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Eye, EyeOff, FolderOpen, FolderPlus, Loader2, Plus, X } from 'lucide-react';
|
||||
import { Button, Input } from '../../../shared/view/ui';
|
||||
import { browseFilesystemFolders, createFolderInFilesystem } from '../data/workspaceApi';
|
||||
import { getParentPath, joinFolderPath } from '../utils/pathUtils';
|
||||
import type { FolderSuggestion } from '../types';
|
||||
|
||||
type FolderBrowserModalProps = {
|
||||
isOpen: boolean;
|
||||
autoAdvanceOnSelect: boolean;
|
||||
onClose: () => void;
|
||||
onFolderSelected: (folderPath: string, advanceToConfirm: boolean) => void;
|
||||
};
|
||||
|
||||
export default function FolderBrowserModal({
|
||||
isOpen,
|
||||
autoAdvanceOnSelect,
|
||||
onClose,
|
||||
onFolderSelected,
|
||||
}: FolderBrowserModalProps) {
|
||||
const [currentPath, setCurrentPath] = useState('~');
|
||||
const [folders, setFolders] = useState<FolderSuggestion[]>([]);
|
||||
const [loadingFolders, setLoadingFolders] = useState(false);
|
||||
const [showHiddenFolders, setShowHiddenFolders] = useState(false);
|
||||
const [showNewFolderInput, setShowNewFolderInput] = useState(false);
|
||||
const [newFolderName, setNewFolderName] = useState('');
|
||||
const [creatingFolder, setCreatingFolder] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadFolders = useCallback(async (pathToLoad: string) => {
|
||||
setLoadingFolders(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await browseFilesystemFolders(pathToLoad);
|
||||
setCurrentPath(result.path);
|
||||
setFolders(result.suggestions);
|
||||
} catch (loadError) {
|
||||
setError(loadError instanceof Error ? loadError.message : 'Failed to load folders');
|
||||
} finally {
|
||||
setLoadingFolders(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
return;
|
||||
}
|
||||
loadFolders('~');
|
||||
}, [isOpen, loadFolders]);
|
||||
|
||||
const visibleFolders = useMemo(
|
||||
() =>
|
||||
folders
|
||||
.filter((folder) => showHiddenFolders || !folder.name.startsWith('.'))
|
||||
.sort((firstFolder, secondFolder) =>
|
||||
firstFolder.name.toLowerCase().localeCompare(secondFolder.name.toLowerCase()),
|
||||
),
|
||||
[folders, showHiddenFolders],
|
||||
);
|
||||
|
||||
const resetNewFolderState = () => {
|
||||
setShowNewFolderInput(false);
|
||||
setNewFolderName('');
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setError(null);
|
||||
resetNewFolderState();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleCreateFolder = useCallback(async () => {
|
||||
if (!newFolderName.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCreatingFolder(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const folderPath = joinFolderPath(currentPath, newFolderName);
|
||||
const createdPath = await createFolderInFilesystem(folderPath);
|
||||
resetNewFolderState();
|
||||
await loadFolders(createdPath);
|
||||
} catch (createError) {
|
||||
setError(createError instanceof Error ? createError.message : 'Failed to create folder');
|
||||
} finally {
|
||||
setCreatingFolder(false);
|
||||
}
|
||||
}, [currentPath, loadFolders, newFolderName]);
|
||||
|
||||
const parentPath = getParentPath(currentPath);
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[70] p-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] border border-gray-200 dark:border-gray-700 flex flex-col">
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
|
||||
<FolderOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Select Folder</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowHiddenFolders((previous) => !previous)}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
showHiddenFolders
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
|
||||
: 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
title={showHiddenFolders ? 'Hide hidden folders' : 'Show hidden folders'}
|
||||
>
|
||||
{showHiddenFolders ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNewFolderInput((previous) => !previous)}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
showNewFolderInput
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
|
||||
: 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
title="Create new folder"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showNewFolderInput && (
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="text"
|
||||
value={newFolderName}
|
||||
onChange={(event) => setNewFolderName(event.target.value)}
|
||||
placeholder="New folder name"
|
||||
className="flex-1"
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleCreateFolder();
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
resetNewFolderState();
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleCreateFolder}
|
||||
disabled={!newFolderName.trim() || creatingFolder}
|
||||
>
|
||||
{creatingFolder ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Create'}
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={resetNewFolderState}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="px-4 pt-3">
|
||||
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{loadingFolders ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-gray-400" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{parentPath && (
|
||||
<button
|
||||
onClick={() => loadFolders(parentPath)}
|
||||
className="w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
|
||||
>
|
||||
<FolderOpen className="w-5 h-5 text-gray-400" />
|
||||
<span className="font-medium text-gray-700 dark:text-gray-300">..</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{visibleFolders.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
No subfolders found
|
||||
</div>
|
||||
) : (
|
||||
visibleFolders.map((folder) => (
|
||||
<div key={folder.path} className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => loadFolders(folder.path)}
|
||||
className="flex-1 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
|
||||
>
|
||||
<FolderPlus className="w-5 h-5 text-blue-500" />
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{folder.name}
|
||||
</span>
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onFolderSelected(folder.path, autoAdvanceOnSelect)}
|
||||
className="text-xs px-3"
|
||||
>
|
||||
Select
|
||||
</Button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="px-4 py-3 bg-gray-50 dark:bg-gray-900/50 flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Path:</span>
|
||||
<code className="text-sm font-mono text-gray-900 dark:text-white flex-1 truncate">
|
||||
{currentPath}
|
||||
</code>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 p-4">
|
||||
<Button variant="outline" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onFolderSelected(currentPath, autoAdvanceOnSelect)}
|
||||
>
|
||||
Use this folder
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
import { Key, Loader2 } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Input } from '../../../shared/view/ui';
|
||||
import type { GithubTokenCredential, TokenMode } from '../types';
|
||||
|
||||
type GithubAuthenticationCardProps = {
|
||||
tokenMode: TokenMode;
|
||||
selectedGithubToken: string;
|
||||
newGithubToken: string;
|
||||
availableTokens: GithubTokenCredential[];
|
||||
loadingTokens: boolean;
|
||||
tokenLoadError: string | null;
|
||||
onTokenModeChange: (tokenMode: TokenMode) => void;
|
||||
onSelectedGithubTokenChange: (tokenId: string) => void;
|
||||
onNewGithubTokenChange: (tokenValue: string) => void;
|
||||
};
|
||||
|
||||
const getModeClassName = (mode: TokenMode, selectedMode: TokenMode) =>
|
||||
`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
|
||||
mode === selectedMode
|
||||
? mode === 'none'
|
||||
? 'bg-green-500 text-white'
|
||||
: 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||||
}`;
|
||||
|
||||
export default function GithubAuthenticationCard({
|
||||
tokenMode,
|
||||
selectedGithubToken,
|
||||
newGithubToken,
|
||||
availableTokens,
|
||||
loadingTokens,
|
||||
tokenLoadError,
|
||||
onTokenModeChange,
|
||||
onSelectedGithubTokenChange,
|
||||
onNewGithubTokenChange,
|
||||
}: GithubAuthenticationCardProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<Key className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h5 className="font-medium text-gray-900 dark:text-white mb-1">
|
||||
{t('projectWizard.step2.githubAuth')}
|
||||
</h5>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{t('projectWizard.step2.githubAuthHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loadingTokens && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
{t('projectWizard.step2.loadingTokens')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loadingTokens && tokenLoadError && (
|
||||
<p className="text-sm text-red-600 dark:text-red-400 mb-3">{tokenLoadError}</p>
|
||||
)}
|
||||
|
||||
{!loadingTokens && availableTokens.length > 0 && (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
<button
|
||||
onClick={() => onTokenModeChange('stored')}
|
||||
className={getModeClassName(tokenMode, 'stored')}
|
||||
>
|
||||
{t('projectWizard.step2.storedToken')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onTokenModeChange('new')}
|
||||
className={getModeClassName(tokenMode, 'new')}
|
||||
>
|
||||
{t('projectWizard.step2.newToken')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onTokenModeChange('none');
|
||||
onSelectedGithubTokenChange('');
|
||||
onNewGithubTokenChange('');
|
||||
}}
|
||||
className={getModeClassName(tokenMode, 'none')}
|
||||
>
|
||||
{t('projectWizard.step2.nonePublic')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{tokenMode === 'stored' ? (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('projectWizard.step2.selectToken')}
|
||||
</label>
|
||||
<select
|
||||
value={selectedGithubToken}
|
||||
onChange={(event) => onSelectedGithubTokenChange(event.target.value)}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm"
|
||||
>
|
||||
<option value="">{t('projectWizard.step2.selectTokenPlaceholder')}</option>
|
||||
{availableTokens.map((token) => (
|
||||
<option key={token.id} value={String(token.id)}>
|
||||
{token.credential_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
) : tokenMode === 'new' ? (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('projectWizard.step2.newToken')}
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
value={newGithubToken}
|
||||
onChange={(event) => onNewGithubTokenChange(event.target.value)}
|
||||
placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{t('projectWizard.step2.tokenHelp')}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!loadingTokens && availableTokens.length === 0 && (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 border border-blue-200 dark:border-blue-800">
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
{t('projectWizard.step2.publicRepoInfo')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('projectWizard.step2.optionalTokenPublic')}
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
value={newGithubToken}
|
||||
onChange={(event) => {
|
||||
const tokenValue = event.target.value;
|
||||
onNewGithubTokenChange(tokenValue);
|
||||
onTokenModeChange(tokenValue.trim() ? 'new' : 'none');
|
||||
}}
|
||||
placeholder={t('projectWizard.step2.tokenPublicPlaceholder')}
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{t('projectWizard.step2.noTokensHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Input } from '../../../shared/view/ui';
|
||||
import GithubAuthenticationCard from './GithubAuthenticationCard';
|
||||
import WorkspacePathField from './WorkspacePathField';
|
||||
import { shouldShowGithubAuthentication } from '../utils/pathUtils';
|
||||
import type { GithubTokenCredential, TokenMode, WorkspaceType } from '../types';
|
||||
|
||||
type StepConfigurationProps = {
|
||||
workspaceType: WorkspaceType;
|
||||
workspacePath: string;
|
||||
githubUrl: string;
|
||||
tokenMode: TokenMode;
|
||||
selectedGithubToken: string;
|
||||
newGithubToken: string;
|
||||
availableTokens: GithubTokenCredential[];
|
||||
loadingTokens: boolean;
|
||||
tokenLoadError: string | null;
|
||||
isCreating: boolean;
|
||||
onWorkspacePathChange: (workspacePath: string) => void;
|
||||
onGithubUrlChange: (githubUrl: string) => void;
|
||||
onTokenModeChange: (tokenMode: TokenMode) => void;
|
||||
onSelectedGithubTokenChange: (tokenId: string) => void;
|
||||
onNewGithubTokenChange: (tokenValue: string) => void;
|
||||
onAdvanceToConfirm: () => void;
|
||||
};
|
||||
|
||||
export default function StepConfiguration({
|
||||
workspaceType,
|
||||
workspacePath,
|
||||
githubUrl,
|
||||
tokenMode,
|
||||
selectedGithubToken,
|
||||
newGithubToken,
|
||||
availableTokens,
|
||||
loadingTokens,
|
||||
tokenLoadError,
|
||||
isCreating,
|
||||
onWorkspacePathChange,
|
||||
onGithubUrlChange,
|
||||
onTokenModeChange,
|
||||
onSelectedGithubTokenChange,
|
||||
onNewGithubTokenChange,
|
||||
onAdvanceToConfirm,
|
||||
}: StepConfigurationProps) {
|
||||
const { t } = useTranslation();
|
||||
const showGithubAuth = shouldShowGithubAuthentication(workspaceType, githubUrl);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{workspaceType === 'existing'
|
||||
? t('projectWizard.step2.existingPath')
|
||||
: t('projectWizard.step2.newPath')}
|
||||
</label>
|
||||
|
||||
<WorkspacePathField
|
||||
workspaceType={workspaceType}
|
||||
value={workspacePath}
|
||||
disabled={isCreating}
|
||||
onChange={onWorkspacePathChange}
|
||||
onAdvanceToConfirm={onAdvanceToConfirm}
|
||||
/>
|
||||
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{workspaceType === 'existing'
|
||||
? t('projectWizard.step2.existingHelp')
|
||||
: t('projectWizard.step2.newHelp')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{workspaceType === 'new' && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('projectWizard.step2.githubUrl')}
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={githubUrl}
|
||||
onChange={(event) => onGithubUrlChange(event.target.value)}
|
||||
placeholder="https://github.com/username/repository"
|
||||
className="w-full"
|
||||
disabled={isCreating}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{t('projectWizard.step2.githubHelp')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{showGithubAuth && (
|
||||
<GithubAuthenticationCard
|
||||
tokenMode={tokenMode}
|
||||
selectedGithubToken={selectedGithubToken}
|
||||
newGithubToken={newGithubToken}
|
||||
availableTokens={availableTokens}
|
||||
loadingTokens={loadingTokens}
|
||||
tokenLoadError={tokenLoadError}
|
||||
onTokenModeChange={onTokenModeChange}
|
||||
onSelectedGithubTokenChange={onSelectedGithubTokenChange}
|
||||
onNewGithubTokenChange={onNewGithubTokenChange}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
107
src/components/project-creation-wizard/components/StepReview.tsx
Normal file
107
src/components/project-creation-wizard/components/StepReview.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { isSshGitUrl } from '../utils/pathUtils';
|
||||
import type { WizardFormState } from '../types';
|
||||
|
||||
type StepReviewProps = {
|
||||
formState: WizardFormState;
|
||||
selectedTokenName: string | null;
|
||||
isCreating: boolean;
|
||||
cloneProgress: string;
|
||||
};
|
||||
|
||||
export default function StepReview({
|
||||
formState,
|
||||
selectedTokenName,
|
||||
isCreating,
|
||||
cloneProgress,
|
||||
}: StepReviewProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const authenticationLabel = useMemo(() => {
|
||||
if (formState.tokenMode === 'stored' && formState.selectedGithubToken) {
|
||||
return `${t('projectWizard.step3.usingStoredToken')} ${selectedTokenName || 'Unknown'}`;
|
||||
}
|
||||
|
||||
if (formState.tokenMode === 'new' && formState.newGithubToken.trim()) {
|
||||
return t('projectWizard.step3.usingProvidedToken');
|
||||
}
|
||||
|
||||
if (isSshGitUrl(formState.githubUrl)) {
|
||||
return t('projectWizard.step3.sshKey', { defaultValue: 'SSH Key' });
|
||||
}
|
||||
|
||||
return t('projectWizard.step3.noAuthentication');
|
||||
}, [formState, selectedTokenName, t]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
||||
{t('projectWizard.step3.reviewConfig')}
|
||||
</h4>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
{t('projectWizard.step3.workspaceType')}
|
||||
</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{formState.workspaceType === 'existing'
|
||||
? t('projectWizard.step3.existingWorkspace')
|
||||
: t('projectWizard.step3.newWorkspace')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.path')}</span>
|
||||
<span className="font-mono text-xs text-gray-900 dark:text-white break-all">
|
||||
{formState.workspacePath}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{formState.workspaceType === 'new' && formState.githubUrl && (
|
||||
<>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
{t('projectWizard.step3.cloneFrom')}
|
||||
</span>
|
||||
<span className="font-mono text-xs text-gray-900 dark:text-white break-all">
|
||||
{formState.githubUrl}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
{t('projectWizard.step3.authentication')}
|
||||
</span>
|
||||
<span className="text-xs text-gray-900 dark:text-white">{authenticationLabel}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
|
||||
{isCreating && cloneProgress ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-blue-800 dark:text-blue-200">
|
||||
{t('projectWizard.step3.cloningRepository', { defaultValue: 'Cloning repository...' })}
|
||||
</p>
|
||||
<code className="block text-xs font-mono text-blue-700 dark:text-blue-300 whitespace-pre-wrap break-all">
|
||||
{cloneProgress}
|
||||
</code>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
{formState.workspaceType === 'existing'
|
||||
? t('projectWizard.step3.existingInfo')
|
||||
: formState.githubUrl
|
||||
? t('projectWizard.step3.newWithClone')
|
||||
: t('projectWizard.step3.newEmpty')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { FolderPlus, GitBranch } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { WorkspaceType } from '../types';
|
||||
|
||||
type StepTypeSelectionProps = {
|
||||
workspaceType: WorkspaceType;
|
||||
onWorkspaceTypeChange: (workspaceType: WorkspaceType) => void;
|
||||
};
|
||||
|
||||
export default function StepTypeSelection({
|
||||
workspaceType,
|
||||
onWorkspaceTypeChange,
|
||||
}: StepTypeSelectionProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
{t('projectWizard.step1.question')}
|
||||
</h4>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button
|
||||
onClick={() => onWorkspaceTypeChange('existing')}
|
||||
className={`p-4 border-2 rounded-lg text-left transition-all ${
|
||||
workspaceType === 'existing'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<FolderPlus className="w-5 h-5 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h5 className="font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{t('projectWizard.step1.existing.title')}
|
||||
</h5>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{t('projectWizard.step1.existing.description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onWorkspaceTypeChange('new')}
|
||||
className={`p-4 border-2 rounded-lg text-left transition-all ${
|
||||
workspaceType === 'new'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<GitBranch className="w-5 h-5 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h5 className="font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{t('projectWizard.step1.new.title')}
|
||||
</h5>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{t('projectWizard.step1.new.description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Check, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '../../../shared/view/ui';
|
||||
import type { WizardStep } from '../types';
|
||||
|
||||
type WizardFooterProps = {
|
||||
step: WizardStep;
|
||||
isCreating: boolean;
|
||||
isCloneWorkflow: boolean;
|
||||
onClose: () => void;
|
||||
onBack: () => void;
|
||||
onNext: () => void;
|
||||
onCreate: () => void;
|
||||
};
|
||||
|
||||
export default function WizardFooter({
|
||||
step,
|
||||
isCreating,
|
||||
isCloneWorkflow,
|
||||
onClose,
|
||||
onBack,
|
||||
onNext,
|
||||
onCreate,
|
||||
}: WizardFooterProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<Button variant="outline" onClick={step === 1 ? onClose : onBack} disabled={isCreating}>
|
||||
{step === 1 ? (
|
||||
t('projectWizard.buttons.cancel')
|
||||
) : (
|
||||
<>
|
||||
<ChevronLeft className="w-4 h-4 mr-1" />
|
||||
{t('projectWizard.buttons.back')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button onClick={step === 3 ? onCreate : onNext} disabled={isCreating}>
|
||||
{isCreating ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
{isCloneWorkflow
|
||||
? t('projectWizard.buttons.cloning', { defaultValue: 'Cloning...' })
|
||||
: t('projectWizard.buttons.creating')}
|
||||
</>
|
||||
) : step === 3 ? (
|
||||
<>
|
||||
<Check className="w-4 h-4 mr-1" />
|
||||
{t('projectWizard.buttons.createProject')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t('projectWizard.buttons.next')}
|
||||
<ChevronRight className="w-4 h-4 ml-1" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Fragment } from 'react';
|
||||
import { Check } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { WizardStep } from '../types';
|
||||
|
||||
type WizardProgressProps = {
|
||||
step: WizardStep;
|
||||
};
|
||||
|
||||
export default function WizardProgress({ step }: WizardProgressProps) {
|
||||
const { t } = useTranslation();
|
||||
const steps: WizardStep[] = [1, 2, 3];
|
||||
|
||||
return (
|
||||
<div className="px-6 pt-4 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
{steps.map((currentStep) => (
|
||||
<Fragment key={currentStep}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center font-medium text-sm ${
|
||||
currentStep < step
|
||||
? 'bg-green-500 text-white'
|
||||
: currentStep === step
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{currentStep < step ? <Check className="w-4 h-4" /> : currentStep}
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
|
||||
{currentStep === 1
|
||||
? t('projectWizard.steps.type')
|
||||
: currentStep === 2
|
||||
? t('projectWizard.steps.configure')
|
||||
: t('projectWizard.steps.confirm')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{currentStep < 3 && (
|
||||
<div
|
||||
className={`flex-1 h-1 mx-2 rounded ${
|
||||
currentStep < step ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { FolderOpen } from 'lucide-react';
|
||||
import { Button, Input } from '../../../shared/view/ui';
|
||||
import FolderBrowserModal from './FolderBrowserModal';
|
||||
import { browseFilesystemFolders } from '../data/workspaceApi';
|
||||
import { getSuggestionRootPath } from '../utils/pathUtils';
|
||||
import type { FolderSuggestion, WorkspaceType } from '../types';
|
||||
|
||||
type WorkspacePathFieldProps = {
|
||||
workspaceType: WorkspaceType;
|
||||
value: string;
|
||||
disabled?: boolean;
|
||||
onChange: (path: string) => void;
|
||||
onAdvanceToConfirm: () => void;
|
||||
};
|
||||
|
||||
export default function WorkspacePathField({
|
||||
workspaceType,
|
||||
value,
|
||||
disabled = false,
|
||||
onChange,
|
||||
onAdvanceToConfirm,
|
||||
}: WorkspacePathFieldProps) {
|
||||
const [pathSuggestions, setPathSuggestions] = useState<FolderSuggestion[]>([]);
|
||||
const [showPathDropdown, setShowPathDropdown] = useState(false);
|
||||
const [showFolderBrowser, setShowFolderBrowser] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (value.trim().length <= 2) {
|
||||
setPathSuggestions([]);
|
||||
setShowPathDropdown(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Debounce path lookup to avoid firing a request for every keystroke.
|
||||
const timerId = window.setTimeout(async () => {
|
||||
try {
|
||||
const directoryPath = getSuggestionRootPath(value);
|
||||
const result = await browseFilesystemFolders(directoryPath);
|
||||
const normalizedInput = value.toLowerCase();
|
||||
|
||||
const matchingSuggestions = result.suggestions
|
||||
.filter((suggestion) => {
|
||||
const normalizedSuggestion = suggestion.path.toLowerCase();
|
||||
return (
|
||||
normalizedSuggestion.startsWith(normalizedInput) &&
|
||||
normalizedSuggestion !== normalizedInput
|
||||
);
|
||||
})
|
||||
.slice(0, 5);
|
||||
|
||||
setPathSuggestions(matchingSuggestions);
|
||||
setShowPathDropdown(matchingSuggestions.length > 0);
|
||||
} catch (error) {
|
||||
console.error('Failed to load path suggestions:', error);
|
||||
}
|
||||
}, 200);
|
||||
|
||||
return () => {
|
||||
window.clearTimeout(timerId);
|
||||
};
|
||||
}, [value]);
|
||||
|
||||
const handleSuggestionSelect = useCallback(
|
||||
(suggestion: FolderSuggestion) => {
|
||||
onChange(suggestion.path);
|
||||
setShowPathDropdown(false);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const handleFolderSelected = useCallback(
|
||||
(selectedPath: string, advanceToConfirm: boolean) => {
|
||||
onChange(selectedPath);
|
||||
setShowFolderBrowser(false);
|
||||
if (advanceToConfirm) {
|
||||
onAdvanceToConfirm();
|
||||
}
|
||||
},
|
||||
[onAdvanceToConfirm, onChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative flex gap-2">
|
||||
<div className="flex-1 relative">
|
||||
<Input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder={
|
||||
workspaceType === 'existing'
|
||||
? '/path/to/existing/workspace'
|
||||
: '/path/to/new/workspace'
|
||||
}
|
||||
className="w-full"
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
{showPathDropdown && pathSuggestions.length > 0 && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||
{pathSuggestions.map((suggestion) => (
|
||||
<button
|
||||
key={suggestion.path}
|
||||
onClick={() => handleSuggestionSelect(suggestion)}
|
||||
className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
|
||||
>
|
||||
<div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowFolderBrowser(true)}
|
||||
className="px-3"
|
||||
title="Browse folders"
|
||||
disabled={disabled}
|
||||
>
|
||||
<FolderOpen className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FolderBrowserModal
|
||||
isOpen={showFolderBrowser}
|
||||
autoAdvanceOnSelect={workspaceType === 'existing'}
|
||||
onClose={() => setShowFolderBrowser(false)}
|
||||
onFolderSelected={handleFolderSelected}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
150
src/components/project-creation-wizard/data/workspaceApi.ts
Normal file
150
src/components/project-creation-wizard/data/workspaceApi.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
import { api } from '../../../utils/api';
|
||||
import type {
|
||||
BrowseFilesystemResponse,
|
||||
CloneProgressEvent,
|
||||
CreateFolderResponse,
|
||||
CreateWorkspacePayload,
|
||||
CreateWorkspaceResponse,
|
||||
CredentialsResponse,
|
||||
FolderSuggestion,
|
||||
TokenMode,
|
||||
} from '../types';
|
||||
|
||||
type CloneWorkspaceParams = {
|
||||
workspacePath: string;
|
||||
githubUrl: string;
|
||||
tokenMode: TokenMode;
|
||||
selectedGithubToken: string;
|
||||
newGithubToken: string;
|
||||
};
|
||||
|
||||
type CloneProgressHandlers = {
|
||||
onProgress: (message: string) => void;
|
||||
};
|
||||
|
||||
const parseJson = async <T>(response: Response): Promise<T> => {
|
||||
const data = (await response.json()) as T;
|
||||
return data;
|
||||
};
|
||||
|
||||
export const fetchGithubTokenCredentials = async () => {
|
||||
const response = await api.get('/settings/credentials?type=github_token');
|
||||
const data = await parseJson<CredentialsResponse>(response);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Failed to load GitHub tokens');
|
||||
}
|
||||
|
||||
return (data.credentials || []).filter((credential) => credential.is_active);
|
||||
};
|
||||
|
||||
export const browseFilesystemFolders = async (pathToBrowse: string) => {
|
||||
const endpoint = `/browse-filesystem?path=${encodeURIComponent(pathToBrowse)}`;
|
||||
const response = await api.get(endpoint);
|
||||
const data = await parseJson<BrowseFilesystemResponse>(response);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Failed to browse filesystem');
|
||||
}
|
||||
|
||||
return {
|
||||
path: data.path || pathToBrowse,
|
||||
suggestions: (data.suggestions || []) as FolderSuggestion[],
|
||||
};
|
||||
};
|
||||
|
||||
export const createFolderInFilesystem = async (folderPath: string) => {
|
||||
const response = await api.createFolder(folderPath);
|
||||
const data = await parseJson<CreateFolderResponse>(response);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Failed to create folder');
|
||||
}
|
||||
|
||||
return data.path || folderPath;
|
||||
};
|
||||
|
||||
export const createWorkspaceRequest = async (payload: CreateWorkspacePayload) => {
|
||||
const response = await api.createWorkspace(payload);
|
||||
const data = await parseJson<CreateWorkspaceResponse>(response);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.details || data.error || 'Failed to create workspace');
|
||||
}
|
||||
|
||||
return data.project;
|
||||
};
|
||||
|
||||
const buildCloneProgressQuery = ({
|
||||
workspacePath,
|
||||
githubUrl,
|
||||
tokenMode,
|
||||
selectedGithubToken,
|
||||
newGithubToken,
|
||||
}: CloneWorkspaceParams) => {
|
||||
const query = new URLSearchParams({
|
||||
path: workspacePath.trim(),
|
||||
githubUrl: githubUrl.trim(),
|
||||
});
|
||||
|
||||
if (tokenMode === 'stored' && selectedGithubToken) {
|
||||
query.set('githubTokenId', selectedGithubToken);
|
||||
}
|
||||
|
||||
if (tokenMode === 'new' && newGithubToken.trim()) {
|
||||
query.set('newGithubToken', newGithubToken.trim());
|
||||
}
|
||||
|
||||
// EventSource cannot send custom headers, so the auth token is passed as query.
|
||||
const authToken = localStorage.getItem('auth-token');
|
||||
if (authToken) {
|
||||
query.set('token', authToken);
|
||||
}
|
||||
|
||||
return query.toString();
|
||||
};
|
||||
|
||||
export const cloneWorkspaceWithProgress = (
|
||||
params: CloneWorkspaceParams,
|
||||
handlers: CloneProgressHandlers,
|
||||
) =>
|
||||
new Promise<Record<string, unknown> | undefined>((resolve, reject) => {
|
||||
const query = buildCloneProgressQuery(params);
|
||||
const eventSource = new EventSource(`/api/projects/clone-progress?${query}`);
|
||||
let settled = false;
|
||||
|
||||
const settle = (callback: () => void) => {
|
||||
if (settled) {
|
||||
return;
|
||||
}
|
||||
settled = true;
|
||||
eventSource.close();
|
||||
callback();
|
||||
};
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const payload = JSON.parse(event.data) as CloneProgressEvent;
|
||||
|
||||
if (payload.type === 'progress' && payload.message) {
|
||||
handlers.onProgress(payload.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (payload.type === 'complete') {
|
||||
settle(() => resolve(payload.project));
|
||||
return;
|
||||
}
|
||||
|
||||
if (payload.type === 'error') {
|
||||
settle(() => reject(new Error(payload.message || 'Failed to clone repository')));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing clone progress event:', error);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = () => {
|
||||
settle(() => reject(new Error('Connection lost during clone')));
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,73 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { fetchGithubTokenCredentials } from '../data/workspaceApi';
|
||||
import type { GithubTokenCredential } from '../types';
|
||||
|
||||
type UseGithubTokensParams = {
|
||||
shouldLoad: boolean;
|
||||
selectedTokenId: string;
|
||||
onAutoSelectToken: (tokenId: string) => void;
|
||||
};
|
||||
|
||||
export const useGithubTokens = ({
|
||||
shouldLoad,
|
||||
selectedTokenId,
|
||||
onAutoSelectToken,
|
||||
}: UseGithubTokensParams) => {
|
||||
const [tokens, setTokens] = useState<GithubTokenCredential[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const hasLoadedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldLoad || hasLoadedRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
let isDisposed = false;
|
||||
|
||||
const loadTokens = async () => {
|
||||
setLoading(true);
|
||||
setLoadError(null);
|
||||
|
||||
try {
|
||||
const activeTokens = await fetchGithubTokenCredentials();
|
||||
if (isDisposed) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTokens(activeTokens);
|
||||
hasLoadedRef.current = true;
|
||||
|
||||
if (activeTokens.length > 0 && !selectedTokenId) {
|
||||
onAutoSelectToken(String(activeTokens[0].id));
|
||||
}
|
||||
} catch (error) {
|
||||
if (!isDisposed) {
|
||||
setLoadError(error instanceof Error ? error.message : 'Failed to load GitHub tokens');
|
||||
}
|
||||
} finally {
|
||||
if (!isDisposed) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadTokens();
|
||||
|
||||
return () => {
|
||||
isDisposed = true;
|
||||
};
|
||||
}, [onAutoSelectToken, selectedTokenId, shouldLoad]);
|
||||
|
||||
const selectedTokenName = useMemo(
|
||||
() => tokens.find((token) => String(token.id) === selectedTokenId)?.credential_name || null,
|
||||
[selectedTokenId, tokens],
|
||||
);
|
||||
|
||||
return {
|
||||
tokens,
|
||||
loading,
|
||||
loadError,
|
||||
selectedTokenName,
|
||||
};
|
||||
};
|
||||
1
src/components/project-creation-wizard/index.ts
Normal file
1
src/components/project-creation-wizard/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './ProjectCreationWizard';
|
||||
62
src/components/project-creation-wizard/types.ts
Normal file
62
src/components/project-creation-wizard/types.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
export type WizardStep = 1 | 2 | 3;
|
||||
|
||||
export type WorkspaceType = 'existing' | 'new';
|
||||
|
||||
export type TokenMode = 'stored' | 'new' | 'none';
|
||||
|
||||
export type FolderSuggestion = {
|
||||
name: string;
|
||||
path: string;
|
||||
type?: string;
|
||||
};
|
||||
|
||||
export type GithubTokenCredential = {
|
||||
id: number;
|
||||
credential_name: string;
|
||||
is_active: boolean;
|
||||
};
|
||||
|
||||
export type CredentialsResponse = {
|
||||
credentials?: GithubTokenCredential[];
|
||||
error?: string;
|
||||
};
|
||||
|
||||
export type BrowseFilesystemResponse = {
|
||||
path?: string;
|
||||
suggestions?: FolderSuggestion[];
|
||||
error?: string;
|
||||
};
|
||||
|
||||
export type CreateFolderResponse = {
|
||||
success?: boolean;
|
||||
path?: string;
|
||||
error?: string;
|
||||
details?: string;
|
||||
};
|
||||
|
||||
export type CreateWorkspacePayload = {
|
||||
workspaceType: WorkspaceType;
|
||||
path: string;
|
||||
};
|
||||
|
||||
export type CreateWorkspaceResponse = {
|
||||
success?: boolean;
|
||||
project?: Record<string, unknown>;
|
||||
error?: string;
|
||||
details?: string;
|
||||
};
|
||||
|
||||
export type CloneProgressEvent = {
|
||||
type?: string;
|
||||
message?: string;
|
||||
project?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export type WizardFormState = {
|
||||
workspaceType: WorkspaceType;
|
||||
workspacePath: string;
|
||||
githubUrl: string;
|
||||
tokenMode: TokenMode;
|
||||
selectedGithubToken: string;
|
||||
newGithubToken: string;
|
||||
};
|
||||
52
src/components/project-creation-wizard/utils/pathUtils.ts
Normal file
52
src/components/project-creation-wizard/utils/pathUtils.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import type { WorkspaceType } from '../types';
|
||||
|
||||
const SSH_PREFIXES = ['git@', 'ssh://'];
|
||||
const WINDOWS_DRIVE_PATTERN = /^[A-Za-z]:\\?$/;
|
||||
|
||||
export const isSshGitUrl = (url: string): boolean => {
|
||||
const trimmedUrl = url.trim();
|
||||
return SSH_PREFIXES.some((prefix) => trimmedUrl.startsWith(prefix));
|
||||
};
|
||||
|
||||
export const shouldShowGithubAuthentication = (
|
||||
workspaceType: WorkspaceType,
|
||||
githubUrl: string,
|
||||
): boolean => workspaceType === 'new' && githubUrl.trim().length > 0 && !isSshGitUrl(githubUrl);
|
||||
|
||||
export const isCloneWorkflow = (workspaceType: WorkspaceType, githubUrl: string): boolean =>
|
||||
workspaceType === 'new' && githubUrl.trim().length > 0;
|
||||
|
||||
export const getSuggestionRootPath = (inputPath: string): string => {
|
||||
const trimmedPath = inputPath.trim();
|
||||
const lastSeparatorIndex = Math.max(trimmedPath.lastIndexOf('/'), trimmedPath.lastIndexOf('\\'));
|
||||
if (lastSeparatorIndex === 2 && /^[A-Za-z]:/.test(trimmedPath)) {
|
||||
return `${trimmedPath.slice(0, 2)}\\`;
|
||||
}
|
||||
|
||||
return lastSeparatorIndex > 0 ? trimmedPath.slice(0, lastSeparatorIndex) : '~';
|
||||
};
|
||||
|
||||
// Handles root edge cases for Unix-like and Windows paths.
|
||||
export const getParentPath = (currentPath: string): string | null => {
|
||||
if (currentPath === '~' || currentPath === '/' || WINDOWS_DRIVE_PATTERN.test(currentPath)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const lastSeparatorIndex = Math.max(currentPath.lastIndexOf('/'), currentPath.lastIndexOf('\\'));
|
||||
if (lastSeparatorIndex <= 0) {
|
||||
return '/';
|
||||
}
|
||||
|
||||
if (lastSeparatorIndex === 2 && /^[A-Za-z]:/.test(currentPath)) {
|
||||
return `${currentPath.slice(0, 2)}\\`;
|
||||
}
|
||||
|
||||
return currentPath.slice(0, lastSeparatorIndex);
|
||||
};
|
||||
|
||||
export const joinFolderPath = (basePath: string, folderName: string): string => {
|
||||
const normalizedBasePath = basePath.trim().replace(/[\\/]+$/, '');
|
||||
const separator =
|
||||
normalizedBasePath.includes('\\') && !normalizedBasePath.includes('/') ? '\\' : '/';
|
||||
return `${normalizedBasePath}${separator}${folderName.trim()}`;
|
||||
};
|
||||
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
|
||||
import { AlertTriangle, Trash2 } from 'lucide-react';
|
||||
import type { TFunction } from 'i18next';
|
||||
import { Button } from '../../../../shared/view/ui';
|
||||
import ProjectCreationWizard from '../../../ProjectCreationWizard';
|
||||
|
||||
import Settings from '../../../settings/view/Settings';
|
||||
import VersionUpgradeModal from '../../../version-upgrade/view';
|
||||
import type { Project } from '../../../../types/app';
|
||||
@@ -11,6 +11,7 @@ import type { ReleaseInfo } from '../../../../types/sharedTypes';
|
||||
import type { InstallMode } from '../../../../hooks/useVersionCheck';
|
||||
import { normalizeProjectForSettings } from '../../utils/utils';
|
||||
import type { DeleteProjectConfirmation, SessionDeleteConfirmation, SettingsProject } from '../../types/types';
|
||||
import ProjectCreationWizard from '../../../project-creation-wizard';
|
||||
|
||||
type SidebarModalsProps = {
|
||||
projects: Project[];
|
||||
|
||||
Reference in New Issue
Block a user