sarif-explorer/dist/components/ViolationList.js

A modern SARIF report viewer that converts SARIF files into interactive, shareable HTML reports with file explorer, collapsible issue lists, and code snippets.

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { CodeSnippet } from './CodeSnippet.js';
export const ViolationList = ({ file, violations }) => {
    const [expandedViolations, setExpandedViolations] = useState(new Set());
    const toggleViolation = (index) => {
        const newExpanded = new Set(expandedViolations);
        if (newExpanded.has(index)) {
            newExpanded.delete(index);
        }
        else {
            newExpanded.add(index);
        }
        setExpandedViolations(newExpanded);
    };
    const getLevelTagColor = (level) => {
        switch (level) {
            case 'error': return 'bg-red-100 text-red-700';
            case 'warning': return 'bg-orange-100 text-orange-700';
            case 'info': return 'bg-blue-100 text-blue-700';
            case 'note': return 'bg-green-100 text-green-700';
            default: return 'bg-gray-100 text-gray-700';
        }
    };
    if (violations.length === 0) {
        return (_jsx("div", { id: "violation-list", className: "flex-1", children: _jsx("div", { className: "flex items-center justify-center p-16", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4", children: _jsx("svg", { className: "w-8 h-8 text-green-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "No Violations Found" }), _jsx("p", { className: "text-gray-500", children: "This file is compliant with all rules!" })] }) }) }));
    }
    return (_jsx("div", { id: "violation-list", className: "flex-1", children: _jsx("div", { className: "bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden", children: _jsx("div", { id: "violations-container", children: violations.map((violation, index) => (_jsxs("div", { id: `violation-item-${index}`, className: `violation-item group ${index < violations.length - 1 ? 'border-b border-gray-100' : ''}`, children: [_jsxs("div", { className: "violation-header px-8 py-6 cursor-pointer hover:bg-gray-50 transition-all duration-300 flex items-start gap-6", onClick: () => toggleViolation(index), children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-3 mb-3", children: [_jsx("span", { className: `px-2 py-1 rounded-full text-xs font-medium ${getLevelTagColor(violation.level)}`, children: violation.level.toUpperCase() }), _jsx("span", { className: "text-sm text-gray-500 font-mono", children: violation.ruleId })] }), _jsx("div", { className: "violation-message font-medium text-gray-900 mb-3 leading-relaxed text-lg", children: violation.message }), _jsx("div", { className: "flex gap-4 text-sm text-gray-500 flex-wrap", children: _jsxs("span", { className: "location-info flex items-center gap-1", children: ["Line ", violation.line, ", Column ", violation.column] }) })] }), _jsx("div", { className: "violation-toggle flex-shrink-0", children: expandedViolations.has(index) ? '−' : '+' })] }), _jsx("div", { id: `violation-content-${index}`, className: "violation-content px-8 pb-6 bg-gray-50", style: { display: expandedViolations.has(index) ? 'block' : 'none' }, children: violation.snippet && (_jsx(CodeSnippet, { code: violation.snippet, language: "text", highlightLine: violation.line })) })] }, index))) }) }) }));
};
//# sourceMappingURL=ViolationList.js.map