514 lines
19 KiB
TypeScript
514 lines
19 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useMemo, useRef } from 'react'
|
||
import { ConfigType, Environment } from '@/types'
|
||
import { cn, typeColor } from '@/lib/utils'
|
||
import {
|
||
FileText, Upload, Sparkles, AlertCircle, Check,
|
||
X, Trash2, ArrowRight, Loader2, Key, Database, RefreshCw
|
||
} from 'lucide-react'
|
||
|
||
interface BulkImportModalProps {
|
||
environmentId: string
|
||
environment: Environment
|
||
appId: string
|
||
existingKeys: string[]
|
||
onClose: () => void
|
||
onSaved: () => void
|
||
}
|
||
|
||
interface ParsedEntry {
|
||
id: string
|
||
key: string
|
||
value: string
|
||
type: ConfigType
|
||
description?: string
|
||
isConflict: boolean
|
||
}
|
||
|
||
// Smart type detector
|
||
function detectType(key: string, value: string): ConfigType {
|
||
const upperKey = key.toUpperCase()
|
||
const lowerVal = value.toLowerCase().trim()
|
||
|
||
if (
|
||
upperKey.includes('SECRET') ||
|
||
upperKey.includes('KEY') ||
|
||
upperKey.includes('TOKEN') ||
|
||
upperKey.includes('PASSWORD') ||
|
||
upperKey.includes('AUTH') ||
|
||
upperKey.includes('PRIVATE') ||
|
||
upperKey.includes('CERT') ||
|
||
upperKey.includes('SIGNING')
|
||
) {
|
||
return 'secret'
|
||
}
|
||
|
||
if (lowerVal.startsWith('http://') || lowerVal.startsWith('https://')) {
|
||
return 'url'
|
||
}
|
||
|
||
if (lowerVal === 'true' || lowerVal === 'false') {
|
||
return 'boolean'
|
||
}
|
||
|
||
if (/^-?\d+(\.\d+)?$/.test(lowerVal) && !lowerVal.startsWith('0') && lowerVal.length < 15) {
|
||
return 'number'
|
||
}
|
||
|
||
if (
|
||
(lowerVal.startsWith('{') && lowerVal.endsWith('}')) ||
|
||
(lowerVal.startsWith('[') && lowerVal.endsWith(']'))
|
||
) {
|
||
try {
|
||
JSON.parse(value)
|
||
return 'json'
|
||
} catch {
|
||
// not valid JSON
|
||
}
|
||
}
|
||
|
||
return 'text'
|
||
}
|
||
|
||
export function BulkImportModal({
|
||
environmentId,
|
||
environment,
|
||
appId,
|
||
existingKeys,
|
||
onClose,
|
||
onSaved,
|
||
}: BulkImportModalProps) {
|
||
const [rawText, setRawText] = useState('')
|
||
const [overwrite, setOverwrite] = useState(true)
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const [customParsed, setCustomParsed] = useState<ParsedEntry[] | null>(null)
|
||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
const existingKeysSet = useMemo(() => new Set(existingKeys.map(k => k.toUpperCase())), [existingKeys])
|
||
|
||
// Parse raw text into structured entries
|
||
const parsedEntries = useMemo(() => {
|
||
if (customParsed !== null) return customParsed
|
||
|
||
if (!rawText.trim()) return []
|
||
|
||
const text = rawText.trim()
|
||
|
||
// 1. Try JSON parsing
|
||
if (text.startsWith('{') && text.endsWith('}')) {
|
||
try {
|
||
const obj = JSON.parse(text)
|
||
if (typeof obj === 'object' && obj !== null) {
|
||
const list: ParsedEntry[] = []
|
||
Object.entries(obj).forEach(([k, v], idx) => {
|
||
const strVal = typeof v === 'object' ? JSON.stringify(v) : String(v)
|
||
const cleanKey = k.trim().toUpperCase().replace(/\s+/g, '_')
|
||
list.push({
|
||
id: `json-${idx}-${cleanKey}`,
|
||
key: cleanKey,
|
||
value: strVal,
|
||
type: detectType(cleanKey, strVal),
|
||
isConflict: existingKeysSet.has(cleanKey),
|
||
})
|
||
})
|
||
return list
|
||
}
|
||
} catch {
|
||
// Fallback to line by line .env parsing
|
||
}
|
||
}
|
||
|
||
// 2. Line by line .env format parsing
|
||
const lines = text.split(/\r?\n/)
|
||
const list: ParsedEntry[] = []
|
||
let pendingComment = ''
|
||
|
||
lines.forEach((line, idx) => {
|
||
const trimmed = line.trim()
|
||
if (!trimmed) {
|
||
pendingComment = ''
|
||
return
|
||
}
|
||
|
||
// Comment line
|
||
if (trimmed.startsWith('#')) {
|
||
pendingComment = trimmed.replace(/^#+\s*/, '')
|
||
return
|
||
}
|
||
|
||
// Check if export PREFIX exists (e.g. export KEY=VALUE)
|
||
let lineToParse = trimmed
|
||
if (lineToParse.startsWith('export ')) {
|
||
lineToParse = lineToParse.slice(7).trim()
|
||
}
|
||
|
||
// Split at first `=`
|
||
const eqIdx = lineToParse.indexOf('=')
|
||
if (eqIdx !== -1) {
|
||
const k = lineToParse.slice(0, eqIdx).trim()
|
||
let v = lineToParse.slice(eqIdx + 1).trim()
|
||
|
||
// Strip surrounding quotes if matching: "value" or 'value'
|
||
if (
|
||
(v.startsWith('"') && v.endsWith('"') && v.length >= 2) ||
|
||
(v.startsWith("'") && v.endsWith("'") && v.length >= 2)
|
||
) {
|
||
v = v.slice(1, -1)
|
||
}
|
||
|
||
const cleanKey = k.toUpperCase().replace(/\s+/g, '_')
|
||
if (cleanKey) {
|
||
list.push({
|
||
id: `line-${idx}-${cleanKey}`,
|
||
key: cleanKey,
|
||
value: v,
|
||
type: detectType(cleanKey, v),
|
||
description: pendingComment || undefined,
|
||
isConflict: existingKeysSet.has(cleanKey),
|
||
})
|
||
pendingComment = ''
|
||
}
|
||
}
|
||
})
|
||
|
||
return list
|
||
}, [rawText, customParsed, existingKeysSet])
|
||
|
||
function handleTypeChange(id: string, newType: ConfigType) {
|
||
const updated = parsedEntries.map(e => e.id === id ? { ...e, type: newType } : e)
|
||
setCustomParsed(updated)
|
||
}
|
||
|
||
function handleKeyChange(id: string, newKey: string) {
|
||
const cleanKey = newKey.toUpperCase().replace(/\s+/g, '_')
|
||
const updated = parsedEntries.map(e => e.id === id ? { ...e, key: cleanKey, isConflict: existingKeysSet.has(cleanKey) } : e)
|
||
setCustomParsed(updated)
|
||
}
|
||
|
||
function handleValueChange(id: string, newVal: string) {
|
||
const updated = parsedEntries.map(e => e.id === id ? { ...e, value: newVal } : e)
|
||
setCustomParsed(updated)
|
||
}
|
||
|
||
function handleRemove(id: string) {
|
||
const updated = parsedEntries.filter(e => e.id !== id)
|
||
setCustomParsed(updated)
|
||
}
|
||
|
||
function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
|
||
const file = e.target.files?.[0]
|
||
if (!file) return
|
||
|
||
const reader = new FileReader()
|
||
reader.onload = () => {
|
||
if (typeof reader.result === 'string') {
|
||
setCustomParsed(null)
|
||
setRawText(reader.result)
|
||
}
|
||
}
|
||
reader.readAsText(file)
|
||
}
|
||
|
||
async function handleImport() {
|
||
if (parsedEntries.length === 0) return
|
||
|
||
setLoading(true)
|
||
setError('')
|
||
|
||
try {
|
||
const res = await fetch(`/api/apps/${appId}/config/bulk`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
environment_id: environmentId,
|
||
environment,
|
||
overwrite,
|
||
entries: parsedEntries.map(e => ({
|
||
key: e.key,
|
||
value: e.value,
|
||
type: e.type,
|
||
description: e.description,
|
||
})),
|
||
}),
|
||
})
|
||
|
||
const data = await res.json()
|
||
setLoading(false)
|
||
|
||
if (!res.ok) {
|
||
setError(data.error || 'İçe aktarma sırasında bir hata oluştu.')
|
||
return
|
||
}
|
||
|
||
onSaved()
|
||
} catch {
|
||
setLoading(false)
|
||
setError('Ağ hatası oluştu. Lütfen tekrar deneyin.')
|
||
}
|
||
}
|
||
|
||
const conflictsCount = parsedEntries.filter(e => e.isConflict).length
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/75 backdrop-blur-md animate-fade-in">
|
||
<div className="glass-panel w-full max-w-3xl rounded-3xl p-6 sm:p-8 shadow-2xl border border-slate-700/80 relative overflow-hidden flex flex-col max-h-[90vh]">
|
||
{/* Top glow accent */}
|
||
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-emerald-500/60 to-transparent" />
|
||
|
||
{/* Modal Header */}
|
||
<div className="flex items-start justify-between pb-4 border-b border-slate-800 flex-shrink-0">
|
||
<div>
|
||
<h3 className="text-xl font-bold text-white flex items-center gap-2">
|
||
<FileText className="w-5 h-5 text-emerald-400" />
|
||
<span>Toplu Config & Secret Yapıştır / İçe Aktar</span>
|
||
</h3>
|
||
<p className="text-slate-400 text-xs mt-1">
|
||
Hedef Ortam: <span className="text-emerald-400 font-semibold uppercase">{environment}</span> •
|
||
.env veya JSON formatında doğrudan yapıştırabilirsiniz.
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="p-1.5 rounded-xl bg-slate-900 text-slate-400 hover:text-white border border-slate-800 transition-colors"
|
||
>
|
||
<X className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Modal Body */}
|
||
<div className="flex-1 overflow-y-auto py-5 space-y-5">
|
||
{/* Paste Input Area */}
|
||
<div>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<label className="text-xs font-semibold text-slate-300 uppercase tracking-wider flex items-center gap-1.5">
|
||
<span>.env veya JSON İçeriğini Buraya Yapıştırın</span>
|
||
</label>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
type="file"
|
||
ref={fileInputRef}
|
||
onChange={handleFileUpload}
|
||
accept=".env,.env.*,.txt,.json"
|
||
className="hidden"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
className="text-xs text-emerald-400 hover:text-emerald-300 flex items-center gap-1 px-2.5 py-1 rounded-lg bg-emerald-500/10 border border-emerald-500/20 hover:bg-emerald-500/20 transition-colors"
|
||
>
|
||
<Upload className="w-3.5 h-3.5" />
|
||
<span>Dosyadan Yükle (.env / JSON)</span>
|
||
</button>
|
||
|
||
{rawText && (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setRawText('')
|
||
setCustomParsed(null)
|
||
}}
|
||
className="text-xs text-slate-400 hover:text-white"
|
||
>
|
||
Temizle
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<textarea
|
||
value={rawText}
|
||
onChange={e => {
|
||
setCustomParsed(null)
|
||
setRawText(e.target.value)
|
||
}}
|
||
placeholder={`Örnek .env formatı:
|
||
# Supabase bağlantısı
|
||
SUPABASE_URL=https://xyz.supabase.co
|
||
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsIn...
|
||
API_ENDPOINT=https://api.myapp.com
|
||
ENABLE_DARK_MODE=true
|
||
TIMEOUT_MS=5000`}
|
||
rows={5}
|
||
className="w-full glass-input rounded-2xl p-4 text-xs sm:text-sm font-mono text-emerald-300 placeholder-slate-600 focus:outline-none resize-none leading-relaxed"
|
||
/>
|
||
</div>
|
||
|
||
{/* Parsed Preview Table */}
|
||
{parsedEntries.length > 0 && (
|
||
<div className="space-y-3 animate-fade-in">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs font-semibold text-slate-300 uppercase tracking-wider">
|
||
Ayrıştırılan Değişkenler
|
||
</span>
|
||
<span className="px-2 py-0.5 rounded-full text-xs font-bold bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">
|
||
{parsedEntries.length} Değişken Bulundu
|
||
</span>
|
||
</div>
|
||
|
||
{conflictsCount > 0 && (
|
||
<span className="text-xs text-amber-400 flex items-center gap-1">
|
||
<AlertCircle className="w-3.5 h-3.5" />
|
||
<span>{conflictsCount} değişken zaten mevcut</span>
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Table */}
|
||
<div className="glass-panel rounded-2xl overflow-hidden border border-slate-800 max-h-60 overflow-y-auto">
|
||
<table className="w-full text-left text-xs">
|
||
<thead className="bg-slate-900/90 border-b border-slate-800 text-[10px] font-semibold text-slate-400 uppercase tracking-wider sticky top-0 z-10">
|
||
<tr>
|
||
<th className="px-4 py-2.5">Anahtar (Key)</th>
|
||
<th className="px-3 py-2.5">Tip</th>
|
||
<th className="px-4 py-2.5">Değer (Value)</th>
|
||
<th className="px-3 py-2.5 text-right">Sil</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-800/50">
|
||
{parsedEntries.map((entry) => (
|
||
<tr key={entry.id} className="hover:bg-slate-800/30 transition-colors">
|
||
{/* Key */}
|
||
<td className="px-4 py-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<input
|
||
value={entry.key}
|
||
onChange={e => handleKeyChange(entry.id, e.target.value)}
|
||
className="bg-transparent text-white font-mono font-bold text-xs focus:bg-slate-900 px-1 py-0.5 rounded focus:outline-none border border-transparent focus:border-slate-700 w-full"
|
||
/>
|
||
{entry.isConflict && (
|
||
<span
|
||
className="text-[10px] px-1.5 py-0.2 rounded bg-amber-500/10 text-amber-400 border border-amber-500/20 whitespace-nowrap"
|
||
title="Bu anahtar zaten mevcut"
|
||
>
|
||
Mevcut
|
||
</span>
|
||
)}
|
||
</div>
|
||
{entry.description && (
|
||
<span className="text-[10px] text-slate-500 block truncate pl-1">
|
||
# {entry.description}
|
||
</span>
|
||
)}
|
||
</td>
|
||
|
||
{/* Type */}
|
||
<td className="px-3 py-2">
|
||
<select
|
||
value={entry.type}
|
||
onChange={e => handleTypeChange(entry.id, e.target.value as ConfigType)}
|
||
className="bg-slate-900 border border-slate-700/80 rounded-lg px-2 py-1 text-[11px] text-slate-200 focus:outline-none"
|
||
>
|
||
<option value="text">text</option>
|
||
<option value="secret">secret</option>
|
||
<option value="url">url</option>
|
||
<option value="json">json</option>
|
||
<option value="boolean">boolean</option>
|
||
<option value="number">number</option>
|
||
</select>
|
||
</td>
|
||
|
||
{/* Value */}
|
||
<td className="px-4 py-2 max-w-xs truncate">
|
||
<input
|
||
value={entry.value}
|
||
onChange={e => handleValueChange(entry.id, e.target.value)}
|
||
className="bg-transparent text-emerald-300 font-mono text-xs focus:bg-slate-900 px-1 py-0.5 rounded focus:outline-none border border-transparent focus:border-slate-700 w-full truncate"
|
||
/>
|
||
</td>
|
||
|
||
{/* Actions */}
|
||
<td className="px-3 py-2 text-right">
|
||
<button
|
||
type="button"
|
||
onClick={() => handleRemove(entry.id)}
|
||
className="text-slate-500 hover:text-rose-400 p-1 rounded transition-colors"
|
||
title="Bu satırı kaldır"
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Conflict Mode Selection */}
|
||
{conflictsCount > 0 && (
|
||
<div className="p-3.5 rounded-2xl bg-amber-500/5 border border-amber-500/20 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
|
||
<span className="text-amber-300 font-medium">
|
||
Çakışan ({conflictsCount}) anahtar bulundu. Ne yapılsın?
|
||
</span>
|
||
<div className="flex items-center gap-3">
|
||
<label className="inline-flex items-center gap-1.5 cursor-pointer text-slate-300 hover:text-white">
|
||
<input
|
||
type="radio"
|
||
name="conflict"
|
||
checked={overwrite}
|
||
onChange={() => setOverwrite(true)}
|
||
className="text-emerald-500 focus:ring-emerald-500"
|
||
/>
|
||
<span>Mevcut Olanları Güncelle</span>
|
||
</label>
|
||
|
||
<label className="inline-flex items-center gap-1.5 cursor-pointer text-slate-300 hover:text-white">
|
||
<input
|
||
type="radio"
|
||
name="conflict"
|
||
checked={!overwrite}
|
||
onChange={() => setOverwrite(false)}
|
||
className="text-emerald-500 focus:ring-emerald-500"
|
||
/>
|
||
<span>Mevcut Olanları Atla</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{error && (
|
||
<div className="bg-rose-500/10 border border-rose-500/30 rounded-2xl p-3.5 text-rose-300 text-xs flex items-center gap-2">
|
||
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
||
<span>{error}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Modal Footer */}
|
||
<div className="flex items-center gap-3 pt-4 border-t border-slate-800 flex-shrink-0">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 font-semibold text-xs sm:text-sm py-3 rounded-xl transition-colors"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleImport}
|
||
disabled={loading || parsedEntries.length === 0}
|
||
className="flex-1 bg-emerald-500 hover:bg-emerald-400 active:bg-emerald-600 disabled:opacity-50 disabled:cursor-not-allowed text-slate-950 font-bold text-xs sm:text-sm py-3 rounded-xl transition-all shadow-lg shadow-emerald-500/25 flex items-center justify-center gap-2"
|
||
>
|
||
{loading ? (
|
||
<>
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
<span>İçe Aktarılıyor...</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<span>{parsedEntries.length > 0 ? `${parsedEntries.length} Değişkeni İçe Aktar` : 'İçe Aktar'}</span>
|
||
<ArrowRight className="w-4 h-4 stroke-[2.5]" />
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|