Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import React, {useEffect, useState} from 'react';
import type {ICommanderViewerProps} from './registry.js';
function isObject(value: unknown): value is Record<string, unknown> {
return typeof value === 'object' && value !== null && !Array.isArray(value);
}
function formatValue(value: unknown): string {
if (value === null || value === undefined) return '';
if (typeof value === 'object') {
try {
return JSON.stringify(value);
} catch {
return String(value);
}
}
return String(value);
}
/**
* KeyValueViewer — generic read-only key/value table.
* Base for secret fields, message headers and other flat leaf payloads.
*/
export function KeyValueViewer({node, fetch, data, className}: ICommanderViewerProps) {
const [fetched, setFetched] = useState<unknown>(undefined);
useEffect(() => {
if (!fetch || data !== undefined) return;
let cancelled = false;
void fetch().then(result => {
if (!cancelled) setFetched(result);
});
return () => {
cancelled = true;
};
}, [data, fetch]);
const content = data !== undefined ? data : (fetched ?? node);
const rows = isObject(content) ? content : {};
return (
<div
className={`blong-viewer blong-viewer-keyvalue ${className ?? ''}`}
style={{padding: '0.75rem'}}
>
{Object.entries(rows).map(([key, value]) => (
<div
key={key}
style={{
display: 'flex',
gap: '0.5rem',
padding: '0.25rem 0',
borderBottom: '1px solid var(--surface-border)',
}}
>
<span
style={{
fontWeight: 600,
minWidth: '10rem',
color: 'var(--text-color-secondary)',
}}
>
{key}
</span>
<span style={{wordBreak: 'break-all'}}>{formatValue(value)}</span>
</div>
))}
</div>
);
}
|