feat: refine TFS scheduler and user-specific configurations
- 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.
This commit is contained in:
Julien Froidefond
370
src/components/tfs/TfsSync.tsx
Normal file
370
src/components/tfs/TfsSync.tsx
Normal file
@@ -0,0 +1,370 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user