ConnectionDetailsModal.jsx•11.3 kB
import { useEffect } from 'react';
import { motion } from 'framer-motion';
import { EnvironmentBadge } from './ui/StatusBadge';
import { DatabaseTypeBadge } from './ui';
import { detectDatabaseType, getDatabaseTypeDisplayName } from '../utils/databaseTypes';
const ConnectionDetailsModal = ({ isOpen, onClose, connection }) => {
useEffect(() => {
if (!isOpen) return;
const onKeyDown = (e) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', onKeyDown);
return () => window.removeEventListener('keydown', onKeyDown);
}, [isOpen, onClose]);
if (!isOpen || !connection) return null;
// Detect database type from connection data
const databaseType = detectDatabaseType(connection.env || {});
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-4xl max-h-[90vh] overflow-hidden"
>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-3">
<div className="h-10 w-10 bg-blue-50 rounded-full flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
</svg>
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900">{connection.name}</h2>
<p className="text-sm text-gray-500">Database Connection Details</p>
</div>
</div>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 transition-colors"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{/* Connection Status */}
<div className="mb-4">
<div className="flex items-center justify-between p-4 bg-green-50 rounded-lg border border-green-200">
<div className="flex items-center space-x-3">
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
<div>
<p className="text-sm font-medium text-green-800">Connected to Claude Desktop</p>
<p className="text-xs text-green-600">Active and available for use</p>
</div>
</div>
<EnvironmentBadge
environment={connection.env?.ENVIRONMENT || connection.environment || 'Development'}
active={true}
size="sm"
/>
</div>
</div>
{/* Database Type Information */}
<div className="mb-4">
<div className="flex items-center justify-between p-4 bg-blue-50 rounded-lg border border-blue-200">
<div className="flex items-center space-x-3">
<DatabaseTypeBadge type={databaseType} size="md" />
<div>
<p className="text-sm font-medium text-blue-800">Database Type</p>
<p className="text-xs text-blue-600">{getDatabaseTypeDisplayName(databaseType)}</p>
</div>
</div>
</div>
</div>
{/* Connection Configuration */}
<div className="space-y-4">
{/* Basic Connection Settings */}
<div>
<h3 className="text-lg font-medium text-gray-900 mb-3">Connection Configuration</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">Host</label>
<p className="text-sm text-gray-900 font-mono break-all">
{connection.env?.HANA_HOST || 'Not configured'}
</p>
</div>
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">Port</label>
<p className="text-sm text-gray-900 font-mono">
{connection.env?.HANA_PORT || '443'}
</p>
</div>
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">User</label>
<p className="text-sm text-gray-900 font-mono break-all">
{connection.env?.HANA_USER || 'Not set'}
</p>
</div>
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">Schema</label>
<p className="text-sm text-gray-900 font-mono break-all">
{connection.env?.HANA_SCHEMA || 'Not set'}
</p>
</div>
</div>
{/* MDC-specific fields - show conditionally */}
{(databaseType === 'mdc_tenant' || databaseType === 'mdc_system') && (
<div className="mt-4">
<h4 className="text-md font-medium text-gray-800 mb-3">MDC Configuration</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{databaseType === 'mdc_tenant' && connection.env?.HANA_DATABASE_NAME && (
<div className="p-3 bg-amber-50 rounded-lg border border-amber-200">
<label className="block text-sm font-medium text-amber-800 mb-1">Database Name</label>
<p className="text-sm text-amber-900 font-mono break-all">
{connection.env.HANA_DATABASE_NAME}
</p>
</div>
)}
{connection.env?.HANA_INSTANCE_NUMBER && (
<div className="p-3 bg-amber-50 rounded-lg border border-amber-200">
<label className="block text-sm font-medium text-amber-800 mb-1">Instance Number</label>
<p className="text-sm text-amber-900 font-mono">
{connection.env.HANA_INSTANCE_NUMBER}
</p>
</div>
)}
</div>
</div>
)}
</div>
{/* Security & SSL Configuration */}
<div>
<h3 className="text-lg font-medium text-gray-900 mb-3">Security & SSL Configuration</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">SSL Enabled</label>
<div className="flex items-center space-x-2">
<div className={`w-3 h-3 rounded-full ${
connection.env?.HANA_SSL === 'true' ? 'bg-green-500' : 'bg-red-500'
}`}></div>
<p className="text-sm text-gray-900">
{connection.env?.HANA_SSL === 'true' ? 'Enabled' : 'Disabled'}
</p>
</div>
</div>
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">Encryption</label>
<div className="flex items-center space-x-2">
<div className={`w-3 h-3 rounded-full ${
connection.env?.HANA_ENCRYPT === 'true' ? 'bg-green-500' : 'bg-red-500'
}`}></div>
<p className="text-sm text-gray-900">
{connection.env?.HANA_ENCRYPT === 'true' ? 'Enabled' : 'Disabled'}
</p>
</div>
</div>
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">Certificate Validation</label>
<div className="flex items-center space-x-2">
<div className={`w-3 h-3 rounded-full ${
connection.env?.HANA_VALIDATE_CERT === 'true' ? 'bg-green-500' : 'bg-yellow-500'
}`}></div>
<p className="text-sm text-gray-900">
{connection.env?.HANA_VALIDATE_CERT === 'true' ? 'Enabled' : 'Disabled'}
</p>
</div>
</div>
</div>
</div>
{/* Logging Configuration */}
<div>
<h3 className="text-lg font-medium text-gray-900 mb-3">Logging Configuration</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">Log Level</label>
<p className="text-sm text-gray-900 font-semibold uppercase">
{connection.env?.LOG_LEVEL || 'info'}
</p>
</div>
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">File Logging</label>
<div className="flex items-center space-x-2">
<div className={`w-3 h-3 rounded-full ${
connection.env?.ENABLE_FILE_LOGGING === 'true' ? 'bg-green-500' : 'bg-red-500'
}`}></div>
<p className="text-sm text-gray-900">
{connection.env?.ENABLE_FILE_LOGGING === 'true' ? 'Enabled' : 'Disabled'}
</p>
</div>
</div>
<div className="p-3 bg-gray-50 rounded-lg">
<label className="block text-sm font-medium text-gray-700 mb-1">Console Logging</label>
<div className="flex items-center space-x-2">
<div className={`w-3 h-3 rounded-full ${
connection.env?.ENABLE_CONSOLE_LOGGING === 'true' ? 'bg-green-500' : 'bg-red-500'
}`}></div>
<p className="text-sm text-gray-900">
{connection.env?.ENABLE_CONSOLE_LOGGING === 'true' ? 'Enabled' : 'Disabled'}
</p>
</div>
</div>
</div>
</div>
</div>
{/* Action Buttons */}
<div className="flex justify-end space-x-3 mt-4 pt-4 border-t border-gray-200">
<button
onClick={onClose}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
>
Close
</button>
</div>
</motion.div>
</div>
);
};
export default ConnectionDetailsModal;