2137da2ac2
- Enhanced TFS scheduler logic to better manage user-specific settings and preferences. - Updated API routes for improved handling of user-specific configurations in TFS operations. - Cleaned up related components to streamline user interactions and ensure accurate task synchronization.
370 lines
14 KiB
TypeScript
370 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { Button } from '@/components/ui/Button';
|
||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||
import { Badge } from '@/components/ui/Badge';
|
||
import { getToday } from '@/lib/date-utils';
|
||
import { Modal } from '@/components/ui/Modal';
|
||
import { TfsSyncResult, TfsSyncAction } from '@/services/integrations/tfs';
|
||
|
||
interface TfsSyncProps {
|
||
onSyncComplete?: () => void;
|
||
className?: string;
|
||
}
|
||
|
||
export function TfsSync({ onSyncComplete, className = "" }: TfsSyncProps) {
|
||
const [isConnected, setIsConnected] = useState<boolean | null>(null);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [isSyncing, setIsSyncing] = useState(false);
|
||
const [lastSyncResult, setLastSyncResult] = useState<TfsSyncResult | null>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [showDetails, setShowDetails] = useState(false);
|
||
|
||
const testConnection = async () => {
|
||
setIsLoading(true);
|
||
setError(null);
|
||
|
||
try {
|
||
const response = await fetch('/api/tfs/test');
|
||
const result = await response.json();
|
||
setIsConnected(result.connected);
|
||
if (!result.connected) {
|
||
setError(result.error || result.message);
|
||
}
|
||
} catch (err) {
|
||
setIsConnected(false);
|
||
setError(err instanceof Error ? err.message : 'Erreur de connexion');
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
const startSync = async () => {
|
||
setIsSyncing(true);
|
||
setError(null);
|
||
|
||
try {
|
||
const response = await fetch('/api/tfs/sync', { method: 'POST' });
|
||
const result = await response.json();
|
||
|
||
console.log('TFS Sync API Response:', result);
|
||
|
||
// L'API retourne { message: '...', data: result } ou { error: '...', data: result }
|
||
const syncResult = result.data || result;
|
||
console.log('TFS Sync Result:', syncResult);
|
||
|
||
setLastSyncResult(syncResult);
|
||
|
||
// Considérer comme succès si on a une réponse (même avec status 207)
|
||
if (response.ok || response.status === 207) {
|
||
onSyncComplete?.();
|
||
}
|
||
} catch (err) {
|
||
console.error('TFS Sync Error:', err);
|
||
setError(err instanceof Error ? err.message : 'Erreur de synchronisation');
|
||
} finally {
|
||
setIsSyncing(false);
|
||
}
|
||
};
|
||
|
||
const getConnectionStatus = () => {
|
||
if (isConnected === null) return null;
|
||
return isConnected ? (
|
||
<Badge variant="success" size="sm">✓ Connecté</Badge>
|
||
) : (
|
||
<Badge variant="danger" size="sm">✗ Déconnecté</Badge>
|
||
);
|
||
};
|
||
|
||
const getSyncStatus = () => {
|
||
if (!lastSyncResult) return null;
|
||
|
||
const {
|
||
success,
|
||
totalPullRequests = 0,
|
||
pullRequestsCreated = 0,
|
||
pullRequestsUpdated = 0,
|
||
pullRequestsSkipped = 0,
|
||
pullRequestsDeleted = 0,
|
||
errors = [],
|
||
actions = []
|
||
} = lastSyncResult;
|
||
|
||
return (
|
||
<div className="space-y-3 text-sm">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant={
|
||
success ? "success" :
|
||
(errors.length > 0 ? "danger" :
|
||
(totalPullRequests > 0 ? "warning" : "success"))
|
||
} size="sm">
|
||
{success ? "✓ Succès" :
|
||
(errors.length > 0 ? "⚠ Erreurs" :
|
||
(totalPullRequests > 0 ? "✓ À jour" : "✓ Synchronisé"))}
|
||
</Badge>
|
||
<span className="text-[var(--muted-foreground)] text-xs">
|
||
{getToday().toLocaleTimeString()}
|
||
</span>
|
||
</div>
|
||
<div className="text-xs text-[var(--muted-foreground)]">
|
||
{totalPullRequests > 0
|
||
? `${totalPullRequests} PR${totalPullRequests > 1 ? 's' : ''} trouvée${totalPullRequests > 1 ? 's' : ''}`
|
||
: 'Aucune PR trouvée'
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||
<div className="text-center p-2 bg-[var(--card)] rounded">
|
||
<div className="font-mono font-bold text-emerald-400">{pullRequestsCreated}</div>
|
||
<div className="text-[var(--muted-foreground)]">Créées</div>
|
||
</div>
|
||
<div className="text-center p-2 bg-[var(--card)] rounded">
|
||
<div className="font-mono font-bold text-blue-400">{pullRequestsUpdated}</div>
|
||
<div className="text-[var(--muted-foreground)]">Mises à jour</div>
|
||
</div>
|
||
<div className="text-center p-2 bg-[var(--card)] rounded">
|
||
<div className="font-mono font-bold text-orange-400">{pullRequestsSkipped}</div>
|
||
<div className="text-[var(--muted-foreground)]">Ignorées</div>
|
||
</div>
|
||
<div className="text-center p-2 bg-[var(--card)] rounded">
|
||
<div className="font-mono font-bold text-red-400">{pullRequestsDeleted}</div>
|
||
<div className="text-[var(--muted-foreground)]">Supprimées</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Résumé textuel avec bouton détails */}
|
||
<div className="p-2 bg-[var(--muted)]/5 rounded text-xs">
|
||
<div className="flex items-center justify-between mb-1">
|
||
<div className="font-medium text-[var(--muted-foreground)]">Résumé:</div>
|
||
{actions && actions.length > 0 && (
|
||
<Button
|
||
onClick={() => setShowDetails(true)}
|
||
variant="secondary"
|
||
size="sm"
|
||
className="text-xs px-2 py-1 h-auto"
|
||
>
|
||
Voir détails ({actions.length})
|
||
</Button>
|
||
)}
|
||
</div>
|
||
<div className="text-[var(--muted-foreground)]">
|
||
{pullRequestsCreated > 0 && `${pullRequestsCreated} nouvelle${pullRequestsCreated > 1 ? 's' : ''} • `}
|
||
{pullRequestsUpdated > 0 && `${pullRequestsUpdated} mise${pullRequestsUpdated > 1 ? 's' : ''} à jour • `}
|
||
{pullRequestsDeleted > 0 && `${pullRequestsDeleted} supprimée${pullRequestsDeleted > 1 ? 's' : ''} (fermées) • `}
|
||
{pullRequestsSkipped > 0 && `${pullRequestsSkipped} déjà synchronisée${pullRequestsSkipped > 1 ? 's' : ''} • `}
|
||
{(pullRequestsCreated + pullRequestsUpdated + pullRequestsDeleted + pullRequestsSkipped) === 0 && 'Aucune PR trouvée'}
|
||
</div>
|
||
</div>
|
||
|
||
{errors && errors.length > 0 && (
|
||
<div className="p-2 bg-[var(--destructive)]/10 border border-[var(--destructive)]/20 rounded text-xs">
|
||
<div className="font-semibold text-[var(--destructive)] mb-1">Erreurs ({errors.length}):</div>
|
||
<div className="space-y-1 max-h-20 overflow-y-auto">
|
||
{errors.map((err, i) => (
|
||
<div key={i} className="text-[var(--destructive)] font-mono text-xs">{err}</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Card className={`${className}`}>
|
||
<CardHeader className="pb-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-2 h-2 rounded-full animate-pulse" style={{ backgroundColor: 'var(--purple)' }}></div>
|
||
<h3 className="font-mono text-sm font-bold text-purple-400 uppercase tracking-wider">
|
||
TFS SYNC
|
||
</h3>
|
||
</div>
|
||
{getConnectionStatus()}
|
||
</div>
|
||
</CardHeader>
|
||
|
||
<CardContent className="space-y-4">
|
||
{/* Test de connexion */}
|
||
<div className="flex gap-2">
|
||
<Button
|
||
onClick={testConnection}
|
||
disabled={isLoading}
|
||
variant="secondary"
|
||
size="sm"
|
||
className="flex-1"
|
||
>
|
||
{isLoading ? (
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 border border-[var(--muted-foreground)] border-t-transparent rounded-full animate-spin"></div>
|
||
Test...
|
||
</div>
|
||
) : (
|
||
'Tester connexion'
|
||
)}
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={startSync}
|
||
disabled={isSyncing || isConnected === false}
|
||
variant="primary"
|
||
size="sm"
|
||
className="flex-1"
|
||
>
|
||
{isSyncing ? (
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 border border-white border-t-transparent rounded-full animate-spin"></div>
|
||
Sync...
|
||
</div>
|
||
) : (
|
||
'🔄 Synchroniser'
|
||
)}
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Messages d'erreur */}
|
||
{error && (
|
||
<div className="p-3 bg-[var(--destructive)]/10 border border-[var(--destructive)]/20 rounded text-sm text-[var(--destructive)]">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
{/* Résultats de sync */}
|
||
{getSyncStatus()}
|
||
|
||
{/* Info */}
|
||
<div className="text-xs text-[var(--muted-foreground)] space-y-1">
|
||
<div>• Synchronisation unidirectionnelle (TFS → TowerControl)</div>
|
||
<div>• Les modifications locales sont préservées</div>
|
||
<div>• Seules les Pull Requests assignées sont synchronisées</div>
|
||
<div>• Les PRs fermées sont automatiquement supprimées</div>
|
||
</div>
|
||
</CardContent>
|
||
|
||
{/* Modal détails de synchronisation */}
|
||
{lastSyncResult && (
|
||
<Modal
|
||
isOpen={showDetails}
|
||
onClose={() => setShowDetails(false)}
|
||
title="📋 DÉTAILS DE SYNCHRONISATION"
|
||
size="xl"
|
||
>
|
||
<div className="space-y-4">
|
||
<p className="text-sm text-[var(--muted-foreground)]">
|
||
{(lastSyncResult.actions || []).length} action{(lastSyncResult.actions || []).length > 1 ? 's' : ''} effectuée{(lastSyncResult.actions || []).length > 1 ? 's' : ''}
|
||
</p>
|
||
|
||
<div className="max-h-[60vh] overflow-y-auto">
|
||
{(lastSyncResult.actions || []).length > 0 ? (
|
||
<SyncActionsList actions={lastSyncResult.actions || []} />
|
||
) : (
|
||
<div className="text-center py-8 text-[var(--muted-foreground)]">
|
||
<div className="text-2xl mb-2">📝</div>
|
||
<div>Aucun détail disponible pour cette synchronisation</div>
|
||
<div className="text-sm mt-1">Les détails sont disponibles pour les nouvelles synchronisations</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
)}
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
// Composant pour afficher la liste des actions
|
||
function SyncActionsList({ actions }: { actions: TfsSyncAction[] }) {
|
||
const getActionIcon = (type: TfsSyncAction['type']) => {
|
||
switch (type) {
|
||
case 'created': return '➕';
|
||
case 'updated': return '🔄';
|
||
case 'skipped': return '⏭️';
|
||
case 'deleted': return '🗑️';
|
||
default: return '❓';
|
||
}
|
||
};
|
||
|
||
const getActionColor = (type: TfsSyncAction['type']) => {
|
||
switch (type) {
|
||
case 'created': return 'text-emerald-400';
|
||
case 'updated': return 'text-blue-400';
|
||
case 'skipped': return 'text-orange-400';
|
||
case 'deleted': return 'text-red-400';
|
||
default: return 'text-gray-400';
|
||
}
|
||
};
|
||
|
||
const getActionLabel = (type: TfsSyncAction['type']) => {
|
||
switch (type) {
|
||
case 'created': return 'Créée';
|
||
case 'updated': return 'Mise à jour';
|
||
case 'skipped': return 'Ignorée';
|
||
case 'deleted': return 'Supprimée';
|
||
default: return 'Inconnue';
|
||
}
|
||
};
|
||
|
||
// Grouper les actions par type
|
||
const groupedActions = actions.reduce((acc, action) => {
|
||
if (!acc[action.type]) acc[action.type] = [];
|
||
acc[action.type].push(action);
|
||
return acc;
|
||
}, {} as Record<string, TfsSyncAction[]>);
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{Object.entries(groupedActions).map(([type, typeActions]) => (
|
||
<div key={type} className="space-y-3">
|
||
<h4 className={`font-bold text-sm flex items-center gap-2 ${getActionColor(type as TfsSyncAction['type'])}`}>
|
||
{getActionIcon(type as TfsSyncAction['type'])}
|
||
{getActionLabel(type as TfsSyncAction['type'])} ({typeActions.length})
|
||
</h4>
|
||
|
||
<div className="space-y-2">
|
||
{typeActions.map((action, index) => (
|
||
<div key={index} className="p-2 bg-[var(--muted)]/10 rounded border border-[var(--border)]">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-baseline gap-2">
|
||
<span className="font-mono text-sm font-bold text-[var(--foreground)] shrink-0">
|
||
PR #{action.pullRequestId}
|
||
</span>
|
||
<span className="text-sm text-[var(--muted-foreground)] truncate">
|
||
{action.prTitle}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<Badge variant="outline" size="sm" className="shrink-0">
|
||
{getActionLabel(action.type)}
|
||
</Badge>
|
||
</div>
|
||
|
||
{action.reason && (
|
||
<div className="mt-1 text-xs text-[var(--muted-foreground)] italic">
|
||
💡 {action.reason}
|
||
</div>
|
||
)}
|
||
|
||
{action.changes && action.changes.length > 0 && (
|
||
<div className="mt-1 space-y-0.5">
|
||
<div className="text-xs font-medium text-[var(--muted-foreground)]">
|
||
Modifications:
|
||
</div>
|
||
{action.changes.map((change, changeIndex) => (
|
||
<div key={changeIndex} className="text-xs font-mono text-[var(--foreground)] pl-2 border-l-2 border-purple-400/30">
|
||
{change}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
} |