Zakaria
778 lines
31 KiB
TypeScript
778 lines
31 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react'
|
|
import { useQueryClient } from '@tanstack/react-query'
|
|
import {
|
|
Check,
|
|
Copy,
|
|
Eye,
|
|
EyeOff,
|
|
Info,
|
|
KeyRound,
|
|
Loader2,
|
|
Plus,
|
|
RefreshCw,
|
|
Save,
|
|
Search,
|
|
Trash2,
|
|
X,
|
|
} from 'lucide-react'
|
|
import { EmptyState } from '@/components/EmptyState'
|
|
import { ServiceIcon } from '@/components/serviceIcons'
|
|
import type { SecretSummary } from '@/api/aws/secretsmanager.api'
|
|
import {
|
|
secretsManagerQueryKeys,
|
|
useSecretDetailQuery,
|
|
useSecretsQuery,
|
|
useSecretValueQuery,
|
|
} from '@/api/aws/secretsmanager.queries'
|
|
import {
|
|
useCreateSecretMutation,
|
|
useDeleteSecretMutation,
|
|
usePutSecretValueMutation,
|
|
} from '@/api/aws/secretsmanager.mutations'
|
|
import { timeAgo } from '@/lib/utils'
|
|
import { clientId } from '@/lib/clientId'
|
|
|
|
type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }
|
|
type JsonValueKind = 'string' | 'number' | 'boolean' | 'null' | 'json'
|
|
|
|
type SecretKeyValueEntry = {
|
|
id: string
|
|
key: string
|
|
value: string
|
|
kind: JsonValueKind
|
|
}
|
|
|
|
type SerializedKeyValueEntries =
|
|
| { secretString: string }
|
|
| { error: string }
|
|
|
|
function valueKind(value: JsonValue): JsonValueKind {
|
|
if (value === null) return 'null'
|
|
if (Array.isArray(value) || typeof value === 'object') return 'json'
|
|
if (typeof value === 'number') return 'number'
|
|
if (typeof value === 'boolean') return 'boolean'
|
|
return 'string'
|
|
}
|
|
|
|
function valueText(value: JsonValue): string {
|
|
return typeof value === 'string' ? value : JSON.stringify(value)
|
|
}
|
|
|
|
function parseKeyValueEntries(secretString: string): SecretKeyValueEntry[] | null {
|
|
try {
|
|
const parsed: unknown = JSON.parse(secretString)
|
|
if (parsed === null || Array.isArray(parsed) || typeof parsed !== 'object') return null
|
|
|
|
return Object.entries(parsed as Record<string, JsonValue>).map(([key, value], index) => ({
|
|
id: `${index}-${key}`,
|
|
key,
|
|
value: valueText(value),
|
|
kind: valueKind(value),
|
|
}))
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
function parseEntryValue(entry: SecretKeyValueEntry): JsonValue | undefined {
|
|
if (entry.kind === 'string') return entry.value
|
|
|
|
if (entry.kind === 'number') {
|
|
const value = Number(entry.value)
|
|
return Number.isFinite(value) ? value : undefined
|
|
}
|
|
|
|
if (entry.kind === 'boolean') {
|
|
if (entry.value === 'true') return true
|
|
if (entry.value === 'false') return false
|
|
return undefined
|
|
}
|
|
|
|
try {
|
|
const value: unknown = JSON.parse(entry.value)
|
|
if (entry.kind === 'null') return value === null ? null : undefined
|
|
return value as JsonValue
|
|
} catch {
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
function serializeKeyValueEntries(entries: SecretKeyValueEntry[]): SerializedKeyValueEntries {
|
|
const output: Record<string, JsonValue> = Object.create(null) as Record<string, JsonValue>
|
|
|
|
for (const entry of entries) {
|
|
const key = entry.key
|
|
if (!key) return { error: 'Every entry needs a key.' }
|
|
if (Object.prototype.hasOwnProperty.call(output, key)) return { error: `Duplicate key: ${key}` }
|
|
|
|
const value = parseEntryValue(entry)
|
|
if (value === undefined) {
|
|
return { error: `Invalid ${entry.kind} value for ${key}.` }
|
|
}
|
|
output[key] = value
|
|
}
|
|
|
|
return { secretString: JSON.stringify(output, null, 2) }
|
|
}
|
|
|
|
// ─── Create secret form ─────────────────────────────────────────────────────────
|
|
|
|
function CreateSecretForm({ onClose }: { onClose: () => void }) {
|
|
const qc = useQueryClient()
|
|
const [name, setName] = useState('')
|
|
const [description, setDescription] = useState('')
|
|
const [secretString, setSecretString] = useState('')
|
|
const [err, setErr] = useState('')
|
|
|
|
const createMut = useCreateSecretMutation({
|
|
onSuccess: () => {
|
|
void qc.invalidateQueries({ queryKey: ['resources', 'secretsmanager'] })
|
|
onClose()
|
|
},
|
|
onError: (e) => setErr(e instanceof Error ? e.message : 'Create failed'),
|
|
})
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
if (!name.trim()) return setErr('Secret name is required')
|
|
if (!secretString) return setErr('Secret value is required')
|
|
setErr('')
|
|
createMut.mutate({ name: name.trim(), secretString, description: description.trim() || undefined })
|
|
}
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 14, background: 'var(--raised)', border: '1px solid var(--border)', borderRadius: 8, marginBottom: 12 }}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<KeyRound size={14} style={{ color: 'var(--accent)' }} />
|
|
<strong style={{ fontSize: 13 }}>Create secret</strong>
|
|
<button type="button" className="icon-btn" style={{ marginLeft: 'auto' }} onClick={onClose} aria-label="Close" title="Close">
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
<input
|
|
className="input"
|
|
placeholder="Secret name (e.g. prod/db/password)"
|
|
value={name}
|
|
onChange={(e) => { setName(e.target.value); setErr('') }}
|
|
autoFocus
|
|
/>
|
|
<input
|
|
className="input"
|
|
placeholder="Description (optional)"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
/>
|
|
<textarea
|
|
className="json-editor"
|
|
style={{ minHeight: 100 }}
|
|
placeholder={'Secret value — plaintext or JSON, e.g.\n{\n "username": "admin",\n "password": "…"\n}'}
|
|
value={secretString}
|
|
onChange={(e) => { setSecretString(e.target.value); setErr('') }}
|
|
spellCheck={false}
|
|
/>
|
|
{err && <span style={{ fontSize: 12, color: 'var(--status-error)' }}>{err}</span>}
|
|
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
|
|
<button type="button" className="button" onClick={onClose}>Cancel</button>
|
|
<button type="submit" className="button primary" disabled={createMut.isPending}>
|
|
{createMut.isPending ? <Loader2 size={13} className="spin" /> : <Plus size={13} />}
|
|
Create
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
// ─── Secret detail drawer ─────────────────────────────────────────────────────────
|
|
|
|
function SecretDrawer({
|
|
secretId,
|
|
onClose,
|
|
onDeleted,
|
|
}: {
|
|
secretId: string | null
|
|
onClose: () => void
|
|
onDeleted: () => void
|
|
}) {
|
|
const qc = useQueryClient()
|
|
const [tab, setTab] = useState<'details' | 'value'>('details')
|
|
const [revealed, setRevealed] = useState(false)
|
|
const [editing, setEditing] = useState(false)
|
|
const [draftValue, setDraftValue] = useState('')
|
|
const [valueViewMode, setValueViewMode] = useState<'key-value' | 'raw'>('raw')
|
|
const [editorMode, setEditorMode] = useState<'key-value' | 'raw'>('raw')
|
|
const [keyValueEntries, setKeyValueEntries] = useState<SecretKeyValueEntry[]>([])
|
|
const [editorError, setEditorError] = useState('')
|
|
const [copied, setCopied] = useState(false)
|
|
const [deleteConfirm, setDeleteConfirm] = useState(false)
|
|
const [forceDelete, setForceDelete] = useState(false)
|
|
|
|
// Reset transient state when the selected secret changes (via key prop), and
|
|
// evict any fetched plaintext from the cache so it never outlives this view.
|
|
useEffect(() => {
|
|
setTab('details')
|
|
setRevealed(false)
|
|
setEditing(false)
|
|
setDraftValue('')
|
|
setValueViewMode('raw')
|
|
setEditorMode('raw')
|
|
setKeyValueEntries([])
|
|
setEditorError('')
|
|
setCopied(false)
|
|
setDeleteConfirm(false)
|
|
setForceDelete(false)
|
|
return () => {
|
|
qc.removeQueries({ queryKey: secretsManagerQueryKeys.value(secretId) })
|
|
}
|
|
}, [secretId, qc])
|
|
|
|
// Auto-hide when the user leaves the Value tab. Flipping `revealed` is not
|
|
// enough — the fetched plaintext stays in the React Query cache (readable via
|
|
// DevTools/other components) until its entry is evicted, so drop it here and
|
|
// discard any in-progress edit as well.
|
|
useEffect(() => {
|
|
if (tab === 'value') return
|
|
setRevealed(false)
|
|
setEditing(false)
|
|
setDraftValue('')
|
|
setValueViewMode('raw')
|
|
setEditorMode('raw')
|
|
setKeyValueEntries([])
|
|
setEditorError('')
|
|
qc.removeQueries({ queryKey: secretsManagerQueryKeys.value(secretId) })
|
|
}, [tab, secretId, qc])
|
|
|
|
const detailQuery = useSecretDetailQuery(secretId)
|
|
|
|
// The plaintext value is only fetched once the user explicitly reveals it.
|
|
const valueQuery = useSecretValueQuery(secretId, revealed && tab === 'value')
|
|
|
|
const putMut = usePutSecretValueMutation({
|
|
onSuccess: () => {
|
|
setEditing(false)
|
|
setDraftValue('')
|
|
},
|
|
onError: (e) => alert(`Update failed: ${e instanceof Error ? e.message : e}`),
|
|
})
|
|
|
|
const deleteMut = useDeleteSecretMutation({
|
|
onSuccess: () => {
|
|
void qc.invalidateQueries({ queryKey: ['resources', 'secretsmanager'] })
|
|
onDeleted()
|
|
},
|
|
onError: (e) => alert(`Delete failed: ${e instanceof Error ? e.message : e}`),
|
|
})
|
|
|
|
const detail = detailQuery.data
|
|
const value = valueQuery.data
|
|
// A binary secret has no SecretString. The API only writes SecretString, so
|
|
// editing one here would overwrite the binary value with text — block it.
|
|
const isBinary = Boolean(value && value.secretString === undefined && value.secretBinary !== undefined)
|
|
const valueEntries = value?.secretString === undefined ? null : parseKeyValueEntries(value.secretString)
|
|
|
|
useEffect(() => {
|
|
if (!revealed || tab !== 'value' || editing) return
|
|
setValueViewMode(parseKeyValueEntries(value?.secretString ?? '') ? 'key-value' : 'raw')
|
|
}, [editing, revealed, tab, value?.secretString])
|
|
|
|
// Hiding must evict the fetched plaintext from the cache, not merely flip the
|
|
// reveal flag — otherwise the value lingers in memory (DevTools, extensions,
|
|
// other components) after the user hides it.
|
|
function hideValue() {
|
|
setRevealed(false)
|
|
qc.removeQueries({ queryKey: secretsManagerQueryKeys.value(secretId) })
|
|
}
|
|
|
|
function cancelEditing() {
|
|
setEditing(false)
|
|
setDraftValue('')
|
|
setEditorMode('raw')
|
|
setKeyValueEntries([])
|
|
setEditorError('')
|
|
}
|
|
|
|
function startEditing() {
|
|
if (isBinary) return
|
|
const secretString = value?.secretString ?? ''
|
|
const entries = parseKeyValueEntries(secretString)
|
|
setDraftValue(secretString)
|
|
setKeyValueEntries(entries ?? [])
|
|
setEditorMode(valueViewMode === 'key-value' && entries ? 'key-value' : 'raw')
|
|
setEditorError('')
|
|
setEditing(true)
|
|
}
|
|
|
|
function switchEditorMode(mode: 'key-value' | 'raw') {
|
|
if (mode === editorMode) return
|
|
|
|
if (mode === 'key-value') {
|
|
const entries = parseKeyValueEntries(draftValue)
|
|
if (!entries) {
|
|
setEditorError('Key-value editing is available only for a JSON object.')
|
|
return
|
|
}
|
|
setKeyValueEntries(entries)
|
|
setEditorError('')
|
|
setEditorMode('key-value')
|
|
return
|
|
}
|
|
|
|
const serialized = serializeKeyValueEntries(keyValueEntries)
|
|
if ('error' in serialized) {
|
|
setEditorError(serialized.error)
|
|
return
|
|
}
|
|
setDraftValue(serialized.secretString)
|
|
setEditorError('')
|
|
setEditorMode('raw')
|
|
}
|
|
|
|
function updateKeyValueEntry(id: string, field: 'key' | 'value', nextValue: string) {
|
|
setKeyValueEntries((entries) => entries.map((entry) => (
|
|
entry.id === id ? { ...entry, [field]: nextValue } : entry
|
|
)))
|
|
setEditorError('')
|
|
}
|
|
|
|
function addKeyValueEntry() {
|
|
setKeyValueEntries((entries) => [
|
|
...entries,
|
|
{ id: clientId(), key: '', value: '', kind: 'string' },
|
|
])
|
|
setEditorError('')
|
|
}
|
|
|
|
function removeKeyValueEntry(id: string) {
|
|
setKeyValueEntries((entries) => entries.filter((entry) => entry.id !== id))
|
|
setEditorError('')
|
|
}
|
|
|
|
function saveValue() {
|
|
let secretString = draftValue
|
|
|
|
if (editorMode === 'key-value') {
|
|
const serialized = serializeKeyValueEntries(keyValueEntries)
|
|
if ('error' in serialized) {
|
|
setEditorError(serialized.error)
|
|
return
|
|
}
|
|
secretString = serialized.secretString
|
|
}
|
|
|
|
if (!secretString) {
|
|
setEditorError('Secret value is required.')
|
|
return
|
|
}
|
|
|
|
putMut.mutate({ id: secretId!, secretString })
|
|
}
|
|
|
|
async function copyValue() {
|
|
const text = value?.secretString ?? value?.secretBinary
|
|
if (text === undefined || text === null) return
|
|
try {
|
|
await navigator.clipboard.writeText(text)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 1500)
|
|
} catch {
|
|
// Clipboard access can be denied; silently ignore.
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={`tag-drawer ${secretId ? 'open' : ''}`} style={{ width: 440 }}>
|
|
<div className="tag-drawer-header">
|
|
<KeyRound size={14} style={{ color: 'var(--accent)' }} />
|
|
<h3 title={detail?.name ?? secretId ?? ''}>{detail?.name ?? secretId}</h3>
|
|
<button className="icon-btn" onClick={onClose} aria-label="Close" title="Close"><X size={14} aria-hidden="true" /></button>
|
|
</div>
|
|
|
|
<div className="drawer-tabs">
|
|
<button className={`drawer-tab ${tab === 'details' ? 'active' : ''}`} onClick={() => setTab('details')}>
|
|
Details
|
|
</button>
|
|
<button className={`drawer-tab ${tab === 'value' ? 'active' : ''}`} onClick={() => setTab('value')}>
|
|
Value
|
|
</button>
|
|
</div>
|
|
|
|
<div className="tag-drawer-body">
|
|
{/* ── Details tab ── */}
|
|
{tab === 'details' && (
|
|
detailQuery.isLoading ? (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-3)', fontSize: 13 }}>
|
|
<Loader2 size={14} className="spin" /> Loading details…
|
|
</div>
|
|
) : detailQuery.isError ? (
|
|
<p style={{ color: 'var(--status-error)', fontSize: 13 }}>Failed to load secret details.</p>
|
|
) : detail ? (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
|
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
|
|
<span className="badge" style={{ background: 'rgba(34,197,94,0.14)', color: 'var(--status-ok)' }}>
|
|
{detail.rotationEnabled ? 'Rotation enabled' : 'Active'}
|
|
</span>
|
|
{detail.versionIds.length > 0 && (
|
|
<span className="badge" style={{ background: 'rgba(107,114,128,0.14)', color: 'var(--text-3)' }}>
|
|
{detail.versionIds.length} version{detail.versionIds.length !== 1 ? 's' : ''}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="meta-grid">
|
|
{detail.arn && (
|
|
<div className="meta-row">
|
|
<span className="meta-label">ARN</span>
|
|
<span className="meta-value" style={{ fontSize: 11 }}>{detail.arn}</span>
|
|
</div>
|
|
)}
|
|
{detail.description && (
|
|
<div className="meta-row">
|
|
<span className="meta-label">Description</span>
|
|
<span className="meta-value" style={{ fontFamily: 'inherit', color: 'var(--text-3)' }}>{detail.description}</span>
|
|
</div>
|
|
)}
|
|
{detail.kmsKeyId && (
|
|
<div className="meta-row">
|
|
<span className="meta-label">KMS key</span>
|
|
<span className="meta-value" style={{ fontSize: 11 }}>{detail.kmsKeyId}</span>
|
|
</div>
|
|
)}
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
|
|
{detail.createdDate && (
|
|
<div className="meta-row">
|
|
<span className="meta-label">Created</span>
|
|
<span className="meta-value" style={{ color: 'var(--text-3)' }}>{timeAgo(detail.createdDate)}</span>
|
|
</div>
|
|
)}
|
|
{detail.lastChangedDate && (
|
|
<div className="meta-row">
|
|
<span className="meta-label">Last changed</span>
|
|
<span className="meta-value" style={{ color: 'var(--text-3)' }}>{timeAgo(detail.lastChangedDate)}</span>
|
|
</div>
|
|
)}
|
|
{detail.lastAccessedDate && (
|
|
<div className="meta-row">
|
|
<span className="meta-label">Last accessed</span>
|
|
<span className="meta-value" style={{ color: 'var(--text-3)' }}>{timeAgo(detail.lastAccessedDate)}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
{detail.tags.length > 0 && (
|
|
<div>
|
|
<p style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', margin: '0 0 6px' }}>
|
|
Tags ({detail.tags.length})
|
|
</p>
|
|
<div style={{ border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
|
|
{detail.tags.map((tag, i) => (
|
|
<div
|
|
key={tag.key}
|
|
style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: i < detail.tags.length - 1 ? '1px solid var(--border)' : undefined }}
|
|
>
|
|
<div style={{ padding: '6px 8px', borderRight: '1px solid var(--border)', fontSize: 12, fontFamily: 'monospace', color: 'var(--status-warn)' }}>{tag.key}</div>
|
|
<div style={{ padding: '6px 8px', fontSize: 12, fontFamily: 'monospace', color: 'var(--text-2)' }} title={tag.value}>{tag.value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : null
|
|
)}
|
|
|
|
{/* ── Value tab ── */}
|
|
{tab === 'value' && (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
{!revealed && !editing ? (
|
|
<button className="button" onClick={() => setRevealed(true)} style={{ alignSelf: 'flex-start' }}>
|
|
<Eye size={13} />
|
|
Reveal secret value
|
|
</button>
|
|
) : editing ? (
|
|
<>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<p style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', margin: 0 }}>
|
|
New secret value
|
|
</p>
|
|
<div className="drawer-tabs" style={{ marginLeft: 'auto' }}>
|
|
<button
|
|
className={`drawer-tab ${editorMode === 'key-value' ? 'active' : ''}`}
|
|
onClick={() => switchEditorMode('key-value')}
|
|
>
|
|
Key-value
|
|
</button>
|
|
<button
|
|
className={`drawer-tab ${editorMode === 'raw' ? 'active' : ''}`}
|
|
onClick={() => switchEditorMode('raw')}
|
|
>
|
|
Plain text
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{editorMode === 'key-value' ? (
|
|
<div style={{ border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 32px', gap: 6, padding: '7px 8px', borderBottom: '1px solid var(--border)', color: 'var(--text-3)', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
|
|
<span>Key</span>
|
|
<span>Value</span>
|
|
<span />
|
|
</div>
|
|
{keyValueEntries.map((entry) => (
|
|
<div key={entry.id} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 32px', gap: 6, padding: 8, borderBottom: '1px solid var(--border)' }}>
|
|
<input
|
|
className="input"
|
|
aria-label="Secret key"
|
|
value={entry.key}
|
|
onChange={(e) => updateKeyValueEntry(entry.id, 'key', e.target.value)}
|
|
placeholder="Key"
|
|
/>
|
|
<input
|
|
className="input"
|
|
aria-label={`Value for ${entry.key || 'new key'}`}
|
|
value={entry.value}
|
|
onChange={(e) => updateKeyValueEntry(entry.id, 'value', e.target.value)}
|
|
placeholder="Value"
|
|
/>
|
|
<button className="icon-btn" title="Delete entry" aria-label={`Delete ${entry.key || 'entry'}`} onClick={() => removeKeyValueEntry(entry.id)}>
|
|
<Trash2 size={13} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
<div style={{ padding: 8 }}>
|
|
<button className="button" onClick={addKeyValueEntry}>
|
|
<Plus size={13} />
|
|
Add key-value pair
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<textarea
|
|
className="json-editor"
|
|
style={{ minHeight: 180 }}
|
|
value={draftValue}
|
|
onChange={(e) => { setDraftValue(e.target.value); setEditorError('') }}
|
|
spellCheck={false}
|
|
/>
|
|
)}
|
|
{editorError && <span style={{ fontSize: 12, color: 'var(--status-error)' }}>{editorError}</span>}
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<button className="button primary" disabled={putMut.isPending} onClick={saveValue}>
|
|
{putMut.isPending ? <Loader2 size={13} className="spin" /> : <Save size={13} />}
|
|
Save new version
|
|
</button>
|
|
<button className="button" onClick={cancelEditing}>Cancel</button>
|
|
</div>
|
|
</>
|
|
) : valueQuery.isLoading ? (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-3)', fontSize: 13 }}>
|
|
<Loader2 size={14} className="spin" /> Loading value…
|
|
</div>
|
|
) : valueQuery.isError ? (
|
|
<p style={{ color: 'var(--status-error)', fontSize: 13 }}>Failed to load secret value.</p>
|
|
) : (
|
|
<>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<span style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
|
|
{value?.secretBinary ? 'Binary value (base64)' : 'Secret value'}
|
|
</span>
|
|
<button className="icon-btn" style={{ marginLeft: 'auto' }} title="Hide" onClick={hideValue}>
|
|
<EyeOff size={13} />
|
|
</button>
|
|
<button className="icon-btn" title="Copy" onClick={copyValue}>
|
|
{copied ? <Check size={13} color="var(--status-ok)" /> : <Copy size={13} />}
|
|
</button>
|
|
</div>
|
|
{!isBinary && valueEntries && (
|
|
<div className="drawer-tabs" style={{ alignSelf: 'flex-start' }}>
|
|
<button className={`drawer-tab ${valueViewMode === 'key-value' ? 'active' : ''}`} onClick={() => setValueViewMode('key-value')}>
|
|
Key-value
|
|
</button>
|
|
<button className={`drawer-tab ${valueViewMode === 'raw' ? 'active' : ''}`} onClick={() => setValueViewMode('raw')}>
|
|
Plain text
|
|
</button>
|
|
</div>
|
|
)}
|
|
{valueViewMode === 'key-value' && valueEntries ? (
|
|
<div style={{ border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, padding: '7px 8px', borderBottom: '1px solid var(--border)', color: 'var(--text-3)', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
|
|
<span>Key</span>
|
|
<span>Value</span>
|
|
</div>
|
|
{valueEntries.length === 0 ? (
|
|
<p style={{ margin: 0, padding: 10, color: 'var(--text-3)', fontSize: 12 }}>Empty JSON object</p>
|
|
) : valueEntries.map((entry, index) => (
|
|
<div key={entry.id} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, padding: 8, borderBottom: index < valueEntries.length - 1 ? '1px solid var(--border)' : undefined }}>
|
|
<span className="mono" style={{ color: 'var(--status-warn)', fontSize: 12, overflowWrap: 'anywhere' }}>{entry.key}</span>
|
|
<span className="mono" style={{ color: 'var(--text-2)', fontSize: 12, overflowWrap: 'anywhere' }}>{entry.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<pre className="json-editor" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all', margin: 0 }}>
|
|
{value?.secretString ?? value?.secretBinary ?? '(empty)'}
|
|
</pre>
|
|
)}
|
|
{value?.versionId && (
|
|
<span style={{ fontSize: 11, color: 'var(--text-3)' }}>Version: {value.versionId}</span>
|
|
)}
|
|
{isBinary ? (
|
|
<span style={{ fontSize: 12, color: 'var(--text-3)' }}>
|
|
Binary secrets are read-only here; editing would overwrite the binary value with text.
|
|
</span>
|
|
) : (
|
|
<button className="button" onClick={startEditing} style={{ alignSelf: 'flex-start' }}>
|
|
<Save size={13} />
|
|
Edit value
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="tag-drawer-footer">
|
|
{deleteConfirm ? (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%', padding: '8px', background: 'rgba(239,68,68,0.08)', borderRadius: 4, border: '1px solid rgba(239,68,68,0.3)' }}>
|
|
<span style={{ fontSize: 12, color: 'var(--status-error)' }}>Delete this secret?</span>
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-2)' }}>
|
|
<input type="checkbox" checked={forceDelete} onChange={(e) => setForceDelete(e.target.checked)} />
|
|
Force delete (no 7-day recovery window)
|
|
</label>
|
|
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
|
|
<button className="button danger" onClick={() => deleteMut.mutate({ id: secretId!, force: forceDelete })} disabled={deleteMut.isPending}>
|
|
{deleteMut.isPending ? <Loader2 size={12} className="spin" /> : 'Yes, delete'}
|
|
</button>
|
|
<button className="button" onClick={() => setDeleteConfirm(false)}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button className="button danger" style={{ marginLeft: 'auto' }} onClick={() => setDeleteConfirm(true)}>
|
|
<Trash2 size={13} />
|
|
Delete
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Page ─────────────────────────────────────────────────────────────────────
|
|
|
|
export function SecretsManagerPage() {
|
|
const [search, setSearch] = useState('')
|
|
const [selected, setSelected] = useState<string | null>(null)
|
|
const [creating, setCreating] = useState(false)
|
|
|
|
const query = useSecretsQuery()
|
|
|
|
const secrets = useMemo(() => {
|
|
const all = query.data ?? []
|
|
if (!search) return all
|
|
const q = search.toLowerCase()
|
|
return all.filter((s) => s.name.toLowerCase().includes(q) || s.description?.toLowerCase().includes(q))
|
|
}, [query.data, search])
|
|
|
|
function selectionId(secret: SecretSummary): string {
|
|
return secret.arn ?? secret.name
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SecretDrawer
|
|
key={selected}
|
|
secretId={selected}
|
|
onClose={() => setSelected(null)}
|
|
onDeleted={() => setSelected(null)}
|
|
/>
|
|
|
|
<div className="page-header">
|
|
<div className="page-title">
|
|
<ServiceIcon cloud="aws" iconKey="secrets" size={32} />
|
|
<h1>Secrets Manager</h1>
|
|
<span className="info-link">
|
|
<Info size={11} />
|
|
{query.data ? `${query.data.length} secrets` : 'Encrypted secrets'}
|
|
</span>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<button className="button" onClick={() => void query.refetch()}>
|
|
<RefreshCw size={13} />
|
|
Refresh
|
|
</button>
|
|
<button className="button primary" onClick={() => setCreating((v) => !v)}>
|
|
<Plus size={13} />
|
|
Create secret
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="input-row">
|
|
<Search size={14} color="var(--text-3)" />
|
|
<input
|
|
className="input"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder="Search by name or description…"
|
|
/>
|
|
</div>
|
|
|
|
<div className="content">
|
|
{creating && <CreateSecretForm onClose={() => setCreating(false)} />}
|
|
|
|
<div className="table-panel">
|
|
<div className="widget-header">
|
|
<h3>Secrets</h3>
|
|
</div>
|
|
{query.isError ? (
|
|
<EmptyState icon={KeyRound} title="Cannot load secrets" description="Secrets Manager did not respond from the Floci endpoint." />
|
|
) : query.isLoading ? (
|
|
<div className="empty"><p>Loading secrets…</p></div>
|
|
) : secrets.length === 0 ? (
|
|
<EmptyState
|
|
icon={KeyRound}
|
|
title={search ? 'No secrets match your search' : 'No secrets'}
|
|
description={search ? 'Try a different name or description filter.' : 'Create a secret to get started.'}
|
|
/>
|
|
) : (
|
|
<table className="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Description</th>
|
|
<th>Last changed</th>
|
|
<th>Tags</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{secrets.map((secret) => {
|
|
const id = selectionId(secret)
|
|
return (
|
|
<tr
|
|
key={id}
|
|
style={{ cursor: 'pointer', background: selected === id ? 'var(--raised)' : undefined }}
|
|
onClick={() => setSelected(selected === id ? null : id)}
|
|
>
|
|
<td className="mono" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<ServiceIcon cloud="aws" iconKey="secrets" size={18} />
|
|
{secret.name}
|
|
</td>
|
|
<td style={{ color: 'var(--text-3)' }}>{secret.description ?? '—'}</td>
|
|
<td style={{ color: 'var(--text-3)' }}>{secret.lastChangedDate ? timeAgo(secret.lastChangedDate) : '—'}</td>
|
|
<td>{secret.tags.length || '—'}</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|