All files / core/blong-browser/src/viewers SecretViewer.tsx

100% Statements 7/7
86.66% Branches 13/15
100% Functions 4/4
100% Lines 6/6

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                      2x 2x   2x       2x                   1x       2x                    
import React, {useState} from 'react';
import {Button} from '../primereact/index.js';
import type {ICommanderViewerProps} from './registry.js';
import {useViewerContent, viewerLabelStyle, viewerRowStyle, viewerValueStyle} from './util.js';
 
/**
 * SecretViewer — Vault secret leaf viewer.
 * Renders key/value pairs with values masked by default; "Reveal" shows them.
 * Read-only by design — editors are deferred to a later phase.
 */
export function SecretViewer({node, fetch, data, className}: ICommanderViewerProps) {
    const [revealed, setRevealed] = useState(false);
    const content = useViewerContent(node, fetch, data);
    const secret =
        content && typeof content === 'object' && !Array.isArray(content)
            ? (content as Record<string, unknown>)
            : {};
 
    return (
        <div
            className={`blong-viewer blong-viewer-secret ${className ?? ''}`}
            style={{padding: '0.75rem'}}
        >
            <div style={{marginBottom: '0.5rem'}}>
                <Button
                    label={revealed ? 'Hide values' : 'Reveal values'}
                    icon={revealed ? 'pi pi-eye-slash' : 'pi pi-eye'}
                    className="p-button-text p-button-sm"
                    onClick={() => setRevealed(value => !value)}
                />
            </div>
            {Object.entries(secret).map(([key, value]) => (
                <div key={key} style={viewerRowStyle}>
                    <span style={viewerLabelStyle}>{key}</span>
                    <span style={viewerValueStyle}>
                        {revealed ? String(value ?? '') : '••••••••'}
                    </span>
                </div>
            ))}
        </div>
    );
}