3f8fd9cb56
* fix: queue store stability + persistence * fix: lint * feat: set to draft btn * feat: migrate to indexed db rather than local storage for moderation checklist storage (keep session + perms alone) * fix: storage cleanup + lint * fix: invalidation fixes
1497 lines
44 KiB
Vue
1497 lines
44 KiB
Vue
<script setup lang="ts">
|
|
import type { Labrinth } from '@modrinth/api-client'
|
|
import {
|
|
BugIcon,
|
|
CheckCircleIcon,
|
|
CheckIcon,
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
ClipboardCopyIcon,
|
|
CodeIcon,
|
|
CopyIcon,
|
|
DownloadIcon,
|
|
EllipsisVerticalIcon,
|
|
LinkIcon,
|
|
LoaderCircleIcon,
|
|
ShieldCheckIcon,
|
|
TimerIcon,
|
|
TriangleAlertIcon,
|
|
} from '@modrinth/assets'
|
|
import { type TechReviewContext, techReviewQuickReplies } from '@modrinth/moderation'
|
|
import {
|
|
Avatar,
|
|
ButtonStyled,
|
|
Collapsible,
|
|
CollapsibleRegion,
|
|
getProjectTypeIcon,
|
|
injectModrinthClient,
|
|
injectNotificationManager,
|
|
OverflowMenu,
|
|
type OverflowMenuOption,
|
|
useFormatDateTime,
|
|
} from '@modrinth/ui'
|
|
import { NavTabs } from '@modrinth/ui'
|
|
import {
|
|
capitalizeString,
|
|
formatProjectType,
|
|
highlightCodeLines,
|
|
type ThreadMessage,
|
|
type User,
|
|
} from '@modrinth/utils'
|
|
import dayjs from 'dayjs'
|
|
import { computed, reactive, ref, watch } from 'vue'
|
|
|
|
import type { UnsafeFile } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
|
|
import ThreadView from '~/components/ui/thread/ThreadView.vue'
|
|
|
|
const auth = await useAuth()
|
|
const featureFlags = useFeatureFlags()
|
|
|
|
const formatDateTimeUtc = useFormatDateTime({
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
timeZoneName: 'short',
|
|
timeZone: 'UTC',
|
|
})
|
|
|
|
type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
|
|
id: string
|
|
version_id: string
|
|
}
|
|
|
|
interface FileDecisions {
|
|
fileName: string
|
|
fileSize: number
|
|
decisions: Array<{
|
|
filePath: string
|
|
issueType: string
|
|
severity: string
|
|
decision: 'safe' | 'malware'
|
|
}>
|
|
maxSeverity: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
item: {
|
|
project: Labrinth.Projects.v3.Project
|
|
project_owner: Labrinth.TechReview.Internal.Ownership
|
|
thread: Labrinth.TechReview.Internal.Thread
|
|
reports: FlattenedFileReport[]
|
|
}
|
|
loadingIssues: Set<string>
|
|
decompiledSources: Map<string, string>
|
|
}>()
|
|
|
|
const { addNotification } = injectNotificationManager()
|
|
|
|
const emit = defineEmits<{
|
|
refetch: []
|
|
loadIssueSources: [issueIds: string[]]
|
|
markComplete: [projectId: string]
|
|
showMaliciousSummary: [unsafeFiles: UnsafeFile[]]
|
|
}>()
|
|
|
|
const quickActions = computed<OverflowMenuOption[]>(() => {
|
|
const actions: OverflowMenuOption[] = []
|
|
|
|
const sourceUrl = props.item.project.link_urls?.['source']?.url
|
|
if (sourceUrl) {
|
|
actions.push({
|
|
id: 'view-source',
|
|
action: () => {
|
|
window.open(sourceUrl, '_blank', 'noopener,noreferrer')
|
|
},
|
|
})
|
|
}
|
|
|
|
actions.push(
|
|
{
|
|
id: 'copy-link',
|
|
action: () => {
|
|
const base = window.location.origin
|
|
const reportUrl = `${base}/moderation/technical-review/${props.item.project.id}`
|
|
navigator.clipboard.writeText(reportUrl).then(() => {
|
|
addNotification({
|
|
type: 'success',
|
|
title: 'Technical Review link copied',
|
|
text: 'The link to this review has been copied to your clipboard.',
|
|
})
|
|
})
|
|
},
|
|
},
|
|
{
|
|
id: 'copy-id',
|
|
action: () => {
|
|
navigator.clipboard.writeText(props.item.project.id).then(() => {
|
|
addNotification({
|
|
type: 'success',
|
|
title: 'Project ID copied',
|
|
text: 'The ID of this project has been copied to your clipboard.',
|
|
})
|
|
})
|
|
},
|
|
},
|
|
)
|
|
|
|
return actions
|
|
})
|
|
|
|
type Tab = 'Thread' | 'Files' | 'File'
|
|
const tabs: readonly ('Thread' | 'Files')[] = ['Thread', 'Files']
|
|
const currentTab = ref<Tab>('Thread')
|
|
|
|
const isThreadCollapsed = ref(true)
|
|
|
|
const remainingMessageCount = computed(() => {
|
|
if (!props.item.thread?.messages) return 0
|
|
return Math.max(0, props.item.thread.messages.length - 1)
|
|
})
|
|
|
|
const threadExpandText = computed(() => {
|
|
if (remainingMessageCount.value === 0) return 'Expand'
|
|
if (remainingMessageCount.value === 1) return 'Show 1 more message'
|
|
return `Show ${remainingMessageCount.value} more messages`
|
|
})
|
|
|
|
const selectedFileId = ref<string | null>(null)
|
|
|
|
const selectedFile = computed(() => {
|
|
if (!selectedFileId.value) return null
|
|
return props.item.reports.find((r) => r.id === selectedFileId.value) ?? null
|
|
})
|
|
|
|
watch(selectedFile, (newFile) => {
|
|
if (selectedFileId.value && (!newFile || newFile.issues.length === 0)) {
|
|
backToFileList()
|
|
}
|
|
})
|
|
|
|
const client = injectModrinthClient()
|
|
|
|
async function updateIssueDetails(data: { detail_id: string; verdict: 'safe' | 'unsafe' }[]) {
|
|
await client.request('/moderation/tech-review/issue-detail', {
|
|
api: 'labrinth',
|
|
version: 'internal',
|
|
method: 'PATCH',
|
|
body: data,
|
|
})
|
|
}
|
|
|
|
const severityOrder = { severe: 3, high: 2, medium: 1, low: 0 } as Record<string, number>
|
|
|
|
type DetailDecision = 'safe' | 'malware'
|
|
|
|
const detailDecisions = reactive<Map<string, DetailDecision>>(new Map())
|
|
const updatingDetails = reactive<Set<string>>(new Set())
|
|
|
|
function verdictToDecision(verdict: 'safe' | 'unsafe'): DetailDecision {
|
|
return verdict === 'safe' ? 'safe' : 'malware'
|
|
}
|
|
|
|
function getAllDetails(): Labrinth.TechReview.Internal.ReportIssueDetail[] {
|
|
return props.item.reports.flatMap((report) => report.issues.flatMap((issue) => issue.details))
|
|
}
|
|
|
|
function applyDecisionToRelatedDetails(
|
|
detailIds: string[],
|
|
decision: DetailDecision,
|
|
): { otherMatchedCount: number } {
|
|
const allDetails = getAllDetails()
|
|
const selectedDetailIds = new Set(detailIds)
|
|
const updatedDetailIds = new Set<string>()
|
|
|
|
for (const detailId of detailIds) {
|
|
const detail = allDetails.find((candidate) => candidate.id === detailId)
|
|
let matchingDetails: Labrinth.TechReview.Internal.ReportIssueDetail[] = []
|
|
|
|
if (detail?.key) {
|
|
matchingDetails = allDetails.filter((candidate) => candidate.key === detail.key)
|
|
} else if (detail) {
|
|
matchingDetails = [detail]
|
|
}
|
|
|
|
if (matchingDetails.length === 0) {
|
|
detailDecisions.set(detailId, decision)
|
|
updatedDetailIds.add(detailId)
|
|
continue
|
|
}
|
|
|
|
for (const matchingDetail of matchingDetails) {
|
|
detailDecisions.set(matchingDetail.id, decision)
|
|
updatedDetailIds.add(matchingDetail.id)
|
|
}
|
|
}
|
|
|
|
return {
|
|
otherMatchedCount: [...updatedDetailIds].filter((detailId) => !selectedDetailIds.has(detailId))
|
|
.length,
|
|
}
|
|
}
|
|
|
|
function getFileHighestSeverity(
|
|
file: FlattenedFileReport,
|
|
): Labrinth.TechReview.Internal.DelphiSeverity {
|
|
const severities = file.issues
|
|
.flatMap((i) => i.details ?? [])
|
|
.map((d) => d.severity)
|
|
.filter((s): s is Labrinth.TechReview.Internal.DelphiSeverity => !!s)
|
|
|
|
return severities.sort((a, b) => (severityOrder[b] ?? 0) - (severityOrder[a] ?? 0))[0] || 'low'
|
|
}
|
|
|
|
const allFiles = ref<FlattenedFileReport[]>([])
|
|
|
|
watch(
|
|
() => props.item.reports,
|
|
(reports) => {
|
|
allFiles.value = [...reports].sort((a, b) => {
|
|
const aComplete = getFileMarkedCount(a) === getFileDetailCount(a)
|
|
const bComplete = getFileMarkedCount(b) === getFileDetailCount(b)
|
|
if (aComplete !== bComplete) return aComplete ? 1 : -1
|
|
const aSeverity = getFileHighestSeverity(a)
|
|
const bSeverity = getFileHighestSeverity(b)
|
|
return (severityOrder[bSeverity] ?? 0) - (severityOrder[aSeverity] ?? 0)
|
|
})
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
const highestSeverity = computed(() => {
|
|
const severities = props.item.reports
|
|
.flatMap((r) => r.issues ?? [])
|
|
.flatMap((i) => i.details ?? [])
|
|
.map((d) => d.severity)
|
|
.filter((s): s is Labrinth.TechReview.Internal.DelphiSeverity => !!s)
|
|
|
|
return severities.sort((a, b) => (severityOrder[b] ?? 0) - (severityOrder[a] ?? 0))[0] || 'low'
|
|
})
|
|
|
|
const navTabsLinks = computed(() => {
|
|
const links = tabs.map((tab) => ({
|
|
label: tab as string,
|
|
href: tab.toLowerCase(),
|
|
}))
|
|
|
|
if (selectedFile.value) {
|
|
links.push({
|
|
label: selectedFile.value.file_name,
|
|
href: 'file',
|
|
})
|
|
}
|
|
|
|
return links
|
|
})
|
|
|
|
const activeTabIndex = computed(() => {
|
|
if (currentTab.value === 'File' && selectedFile.value) {
|
|
return navTabsLinks.value.length - 1
|
|
}
|
|
const idx = tabs.indexOf(currentTab.value as 'Thread' | 'Files')
|
|
return idx >= 0 ? idx : 0
|
|
})
|
|
|
|
function handleTabClick(index: number) {
|
|
if (index < tabs.length) {
|
|
const newTab = tabs[index]
|
|
currentTab.value = newTab
|
|
|
|
if (newTab === 'Thread') {
|
|
isThreadCollapsed.value = false
|
|
}
|
|
} else if (index === tabs.length && selectedFile.value) {
|
|
// Clicked the file tab
|
|
currentTab.value = 'File' as Tab
|
|
}
|
|
}
|
|
|
|
function getSeverityBadgeColor(severity: Labrinth.TechReview.Internal.DelphiSeverity): string {
|
|
switch (severity) {
|
|
case 'severe':
|
|
return 'border-red/60 border bg-highlight-red text-red'
|
|
case 'high':
|
|
return 'border-orange/60 border bg-highlight-orange text-orange'
|
|
case 'medium':
|
|
return 'border-green/60 border bg-highlight-green text-green'
|
|
case 'low':
|
|
default:
|
|
return 'border-blue/60 border bg-highlight-blue text-blue'
|
|
}
|
|
}
|
|
|
|
function truncateMiddle(str: string, maxLength: number = 120): string {
|
|
if (str.length <= maxLength) return str
|
|
const separator = '...'
|
|
const sepLen = separator.length
|
|
const charsToShow = maxLength - sepLen
|
|
const frontChars = Math.ceil(charsToShow / 3)
|
|
const backChars = Math.floor((charsToShow * 2) / 3)
|
|
return str.slice(0, frontChars) + separator + str.slice(-backChars)
|
|
}
|
|
|
|
const severityColor = computed(() => {
|
|
switch (highestSeverity.value) {
|
|
case 'severe':
|
|
return 'text-red bg-highlight-red border-solid border-[1px] border-red'
|
|
case 'high':
|
|
return 'text-orange bg-highlight-orange border-solid border-[1px] border-orange'
|
|
case 'medium':
|
|
return 'text-green bg-highlight-green border-solid border-[1px] border-green'
|
|
case 'low':
|
|
default:
|
|
return 'text-blue bg-highlight-blue border-solid border-[1px] border-blue'
|
|
}
|
|
})
|
|
|
|
const isProjectApproved = computed(() => {
|
|
const status = props.item.project.status
|
|
return (
|
|
status === 'approved' || status === 'archived' || status === 'unlisted' || status === 'private'
|
|
)
|
|
})
|
|
|
|
const formattedDate = computed(() => {
|
|
const dates = props.item.reports.map((r) => new Date(r.created))
|
|
const earliest = new Date(Math.min(...dates.map((d) => d.getTime())))
|
|
const now = new Date()
|
|
const diffDays = Math.floor((now.getTime() - earliest.getTime()) / (1000 * 60 * 60 * 24))
|
|
if (diffDays === 0) return 'Today'
|
|
if (diffDays === 1) return '1 day ago'
|
|
return `${diffDays} days ago`
|
|
})
|
|
|
|
function formatFileSize(bytes: number): string {
|
|
if (bytes < 1024) return `${bytes} B`
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KiB`
|
|
return `${(bytes / (1024 * 1024)).toFixed(2)} MiB`
|
|
}
|
|
|
|
function viewFileFlags(file: FlattenedFileReport) {
|
|
selectedFileId.value = file.id
|
|
currentTab.value = 'File'
|
|
}
|
|
|
|
function backToFileList() {
|
|
selectedFileId.value = null
|
|
if (currentTab.value === 'File') {
|
|
currentTab.value = 'Files'
|
|
}
|
|
}
|
|
|
|
async function copyToClipboard(code: string, detailId: string) {
|
|
try {
|
|
await navigator.clipboard.writeText(code)
|
|
showCopyFeedback.set(detailId, true)
|
|
setTimeout(() => {
|
|
showCopyFeedback.delete(detailId)
|
|
}, 2000)
|
|
} catch (error) {
|
|
console.error('Failed to copy code:', error)
|
|
}
|
|
}
|
|
|
|
function getDetailDecision(
|
|
detailId: string,
|
|
backendStatus: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
|
|
): 'safe' | 'malware' | 'pending' {
|
|
const localDecision = detailDecisions.get(detailId)
|
|
if (localDecision) return localDecision
|
|
if (backendStatus === 'safe') return 'safe'
|
|
if (backendStatus === 'unsafe') return 'malware'
|
|
return 'pending'
|
|
}
|
|
|
|
function isPreReviewed(
|
|
detailId: string,
|
|
backendStatus: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
|
|
): boolean {
|
|
return (backendStatus === 'safe' || backendStatus === 'unsafe') && !detailDecisions.has(detailId)
|
|
}
|
|
|
|
function getMarkedFlagsCount(flags: ClassGroup['flags']): number {
|
|
return flags.filter((f) => getDetailDecision(f.detail.id, f.detail.status) !== 'pending').length
|
|
}
|
|
|
|
function getFileDetailCount(file: FlattenedFileReport): number {
|
|
return file.issues.reduce((sum, issue) => sum + issue.details.length, 0)
|
|
}
|
|
|
|
function getFileMarkedCount(file: FlattenedFileReport): number {
|
|
let count = 0
|
|
for (const issue of file.issues) {
|
|
for (const detail of issue.details) {
|
|
const detailWithStatus = detail as typeof detail & {
|
|
status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
|
|
}
|
|
if (getDetailDecision(detailWithStatus.id, detailWithStatus.status) !== 'pending') {
|
|
count++
|
|
}
|
|
}
|
|
}
|
|
return count
|
|
}
|
|
|
|
const remainingUnmarkedCount = computed(() => {
|
|
if (!selectedFile.value) return 0
|
|
return getFileDetailCount(selectedFile.value) - getFileMarkedCount(selectedFile.value)
|
|
})
|
|
|
|
const isBatchUpdating = ref(false)
|
|
|
|
async function batchMarkRemaining(verdict: 'safe' | 'unsafe') {
|
|
if (!selectedFile.value || isBatchUpdating.value) return
|
|
|
|
const detailIds: string[] = []
|
|
for (const issue of selectedFile.value.issues) {
|
|
for (const detail of issue.details) {
|
|
const detailWithStatus = detail as typeof detail & {
|
|
status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
|
|
}
|
|
if (getDetailDecision(detailWithStatus.id, detailWithStatus.status) === 'pending') {
|
|
detailIds.push(detail.id)
|
|
}
|
|
}
|
|
}
|
|
|
|
if (detailIds.length === 0) return
|
|
|
|
isBatchUpdating.value = true
|
|
try {
|
|
await updateIssueDetails(detailIds.map((detailId) => ({ detail_id: detailId, verdict })))
|
|
|
|
applyDecisionToRelatedDetails(detailIds, verdictToDecision(verdict))
|
|
|
|
addNotification({
|
|
type: 'success',
|
|
title: `Marked ${detailIds.length} traces as ${verdict}`,
|
|
text: `All remaining traces have been marked as ${verdict === 'safe' ? 'false positives' : 'malicious'}.`,
|
|
})
|
|
|
|
// Jump back to Files tab when all flags in the current file are marked
|
|
if (selectedFile.value) {
|
|
const markedCount = getFileMarkedCount(selectedFile.value)
|
|
const totalCount = getFileDetailCount(selectedFile.value)
|
|
if (markedCount === totalCount) {
|
|
backToFileList()
|
|
}
|
|
}
|
|
|
|
emit('refetch')
|
|
} catch (error) {
|
|
console.error('Failed to batch update:', error)
|
|
addNotification({
|
|
type: 'error',
|
|
title: 'Batch update failed',
|
|
text: 'An error occurred while updating traces.',
|
|
})
|
|
} finally {
|
|
isBatchUpdating.value = false
|
|
}
|
|
}
|
|
|
|
async function updateDetailStatus(detailId: string, verdict: 'safe' | 'unsafe') {
|
|
let priorDecision: 'safe' | 'malware' | 'pending' = 'pending'
|
|
outer: for (const report of props.item.reports) {
|
|
for (const issue of report.issues) {
|
|
const detail = issue.details.find((d) => d.id === detailId)
|
|
if (detail) {
|
|
priorDecision = getDetailDecision(detail.id, detail.status)
|
|
break outer
|
|
}
|
|
}
|
|
}
|
|
|
|
updatingDetails.add(detailId)
|
|
|
|
try {
|
|
await updateIssueDetails([{ detail_id: detailId, verdict }])
|
|
|
|
const { otherMatchedCount } = applyDecisionToRelatedDetails(
|
|
[detailId],
|
|
verdictToDecision(verdict),
|
|
)
|
|
|
|
// Only collapse if the prior state was 'pending' (new decision, not updating existing)
|
|
if (priorDecision === 'pending') {
|
|
for (const classGroup of groupedByClass.value) {
|
|
const hasThisDetail = classGroup.flags.some((f) => f.detail.id === detailId)
|
|
if (hasThisDetail && getMarkedFlagsCount(classGroup.flags) === classGroup.flags.length) {
|
|
expandedClasses.delete(classGroup.key)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
// Jump back to Files tab when all flags in the current file are marked
|
|
if (selectedFile.value) {
|
|
const markedCount = getFileMarkedCount(selectedFile.value)
|
|
const totalCount = getFileDetailCount(selectedFile.value)
|
|
if (markedCount === totalCount) {
|
|
backToFileList()
|
|
}
|
|
}
|
|
|
|
const otherText =
|
|
otherMatchedCount > 0
|
|
? ` (${otherMatchedCount} other trace${otherMatchedCount === 1 ? '' : 's'} also marked)`
|
|
: ''
|
|
|
|
if (verdict === 'safe') {
|
|
addNotification({
|
|
type: 'success',
|
|
title: 'Issue marked as pass',
|
|
text: `This issue has been marked as a false positive.${otherText}`,
|
|
})
|
|
} else {
|
|
addNotification({
|
|
type: 'success',
|
|
title: 'Issue marked as fail',
|
|
text: `This issue has been flagged as malicious.${otherText}`,
|
|
})
|
|
}
|
|
|
|
emit('refetch')
|
|
} catch (error) {
|
|
console.error('Failed to update detail status:', error)
|
|
addNotification({
|
|
type: 'error',
|
|
title: 'Failed to update issue',
|
|
text: 'An error occurred while updating the issue status.',
|
|
})
|
|
} finally {
|
|
updatingDetails.delete(detailId)
|
|
}
|
|
}
|
|
|
|
const expandedClasses = reactive<Set<string>>(new Set())
|
|
const autoExpandedFileIds = reactive<Set<string>>(new Set())
|
|
const showCopyFeedback = reactive<Map<string, boolean>>(new Map())
|
|
const highlightedSourceCache = reactive<Map<string, { source: string; lines: string[] }>>(new Map())
|
|
const LAZY_LOAD_CLASS_SOURCE_MINIMUM = 10
|
|
|
|
interface ClassGroup {
|
|
key: string
|
|
jar: string | null
|
|
filePath: string
|
|
flags: Array<{
|
|
issueId: string
|
|
issueType: string
|
|
detail: Labrinth.TechReview.Internal.ReportIssueDetail & {
|
|
status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
|
|
}
|
|
}>
|
|
}
|
|
|
|
interface JarGroup {
|
|
key: string
|
|
jar: string | null
|
|
segments: string[]
|
|
classes: ClassGroup[]
|
|
}
|
|
|
|
function splitJarSegments(jar: string | null, currentFileName: string | null): string[] {
|
|
if (!jar) return []
|
|
const segments = jar
|
|
.split('#')
|
|
.map((s) => decodeURIComponent(s.trim()))
|
|
.filter((s) => s.length > 0)
|
|
// Skip the first segment if it matches the current file tab (it's already shown in the file list)
|
|
if (segments.length > 0 && currentFileName && segments[0] === currentFileName) {
|
|
return segments.slice(1)
|
|
}
|
|
return segments
|
|
}
|
|
|
|
function isRootJarGroup(jarGroup: JarGroup): boolean {
|
|
return jarGroup.segments.length === 0
|
|
}
|
|
|
|
const groupedByClass = computed<ClassGroup[]>(() => {
|
|
if (!selectedFile.value) return []
|
|
|
|
const classMap = new Map<string, ClassGroup>()
|
|
|
|
for (const issue of selectedFile.value.issues) {
|
|
for (const detail of issue.details) {
|
|
const classKey = `${detail.jar ?? ''}::${detail.file_path}`
|
|
if (!classMap.has(classKey)) {
|
|
classMap.set(classKey, {
|
|
key: classKey,
|
|
jar: detail.jar ?? null,
|
|
filePath: detail.file_path,
|
|
flags: [],
|
|
})
|
|
}
|
|
// Cast detail to include status (backend will provide this field)
|
|
const detailWithStatus = detail as Labrinth.TechReview.Internal.ReportIssueDetail & {
|
|
status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
|
|
}
|
|
classMap.get(classKey)!.flags.push({
|
|
issueId: issue.id,
|
|
issueType: issue.issue_type,
|
|
detail: detailWithStatus,
|
|
})
|
|
}
|
|
}
|
|
|
|
for (const classGroup of classMap.values()) {
|
|
classGroup.flags.sort((a, b) => {
|
|
const aPreReviewed = isPreReviewed(a.detail.id, a.detail.status)
|
|
const bPreReviewed = isPreReviewed(b.detail.id, b.detail.status)
|
|
|
|
if (aPreReviewed !== bPreReviewed) {
|
|
return aPreReviewed ? 1 : -1
|
|
}
|
|
|
|
return (severityOrder[b.detail.severity] ?? 0) - (severityOrder[a.detail.severity] ?? 0)
|
|
})
|
|
}
|
|
|
|
return Array.from(classMap.values()).sort((a, b) => {
|
|
const aSeverity = getHighestSeverityInClass(a.flags)
|
|
const bSeverity = getHighestSeverityInClass(b.flags)
|
|
return (severityOrder[bSeverity] ?? 0) - (severityOrder[aSeverity] ?? 0)
|
|
})
|
|
})
|
|
|
|
const groupedByJar = computed<JarGroup[]>(() => {
|
|
const jarMap = new Map<string, JarGroup>()
|
|
|
|
for (const classItem of groupedByClass.value) {
|
|
const jarKey = classItem.jar ?? ''
|
|
if (!jarMap.has(jarKey)) {
|
|
jarMap.set(jarKey, {
|
|
key: jarKey,
|
|
jar: classItem.jar,
|
|
segments: splitJarSegments(classItem.jar, selectedFile.value?.file_name ?? null),
|
|
classes: [],
|
|
})
|
|
}
|
|
jarMap.get(jarKey)!.classes.push(classItem)
|
|
}
|
|
|
|
return Array.from(jarMap.values()).sort((a, b) => {
|
|
const aRoot = isRootJarGroup(a)
|
|
const bRoot = isRootJarGroup(b)
|
|
if (aRoot !== bRoot) return aRoot ? -1 : 1
|
|
|
|
const aSeverity = getHighestSeverityInClass(a.classes.flatMap((classItem) => classItem.flags))
|
|
const bSeverity = getHighestSeverityInClass(b.classes.flatMap((classItem) => classItem.flags))
|
|
return (severityOrder[bSeverity] ?? 0) - (severityOrder[aSeverity] ?? 0)
|
|
})
|
|
})
|
|
|
|
// Auto-expand/load source for small files; keep larger files lazy.
|
|
watch(
|
|
[selectedFileId, groupedByClass],
|
|
([fileId, classes]) => {
|
|
if (!fileId || classes.length === 0 || autoExpandedFileIds.has(fileId)) return
|
|
|
|
autoExpandedFileIds.add(fileId)
|
|
|
|
if (classes.length < LAZY_LOAD_CLASS_SOURCE_MINIMUM) {
|
|
for (const classItem of classes) {
|
|
expandClass(classItem)
|
|
}
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
function getHighestSeverityInClass(
|
|
flags: ClassGroup['flags'],
|
|
): Labrinth.TechReview.Internal.DelphiSeverity {
|
|
return flags.reduce(
|
|
(highest, flag) =>
|
|
(severityOrder[flag.detail.severity] ?? 0) > (severityOrder[highest] ?? 0)
|
|
? flag.detail.severity
|
|
: highest,
|
|
'low' as Labrinth.TechReview.Internal.DelphiSeverity,
|
|
)
|
|
}
|
|
|
|
function getClassDecompiledSource(classItem: ClassGroup): string | undefined {
|
|
for (const flag of classItem.flags) {
|
|
const source = props.decompiledSources.get(flag.detail.id)
|
|
if (source) return source
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function getHighlightedClassSource(classItem: ClassGroup): string[] {
|
|
const source = getClassDecompiledSource(classItem)
|
|
if (!source) return []
|
|
|
|
const cached = highlightedSourceCache.get(classItem.key)
|
|
if (cached?.source === source) return cached.lines
|
|
|
|
const lines = highlightCodeLines(source, 'java')
|
|
highlightedSourceCache.set(classItem.key, { source, lines })
|
|
return lines
|
|
}
|
|
|
|
function isClassLoadingSource(classItem: ClassGroup): boolean {
|
|
return classItem.flags.some((flag) => props.loadingIssues.has(flag.issueId))
|
|
}
|
|
|
|
function loadClassSources(classItem: ClassGroup) {
|
|
const issueIds = [...new Set(classItem.flags.map((flag) => flag.issueId))]
|
|
if (issueIds.length > 0) {
|
|
emit('loadIssueSources', issueIds)
|
|
}
|
|
}
|
|
|
|
function expandClass(classItem: ClassGroup) {
|
|
if (expandedClasses.has(classItem.key)) return
|
|
expandedClasses.add(classItem.key)
|
|
loadClassSources(classItem)
|
|
}
|
|
|
|
function toggleClass(classItem: ClassGroup) {
|
|
if (expandedClasses.has(classItem.key)) {
|
|
expandedClasses.delete(classItem.key)
|
|
} else {
|
|
expandClass(classItem)
|
|
}
|
|
}
|
|
|
|
function handleThreadUpdate() {
|
|
emit('refetch')
|
|
}
|
|
|
|
const techReviewContext = computed<TechReviewContext>(() => ({
|
|
project: props.item.project,
|
|
project_owner: props.item.project_owner,
|
|
reports: props.item.reports,
|
|
}))
|
|
|
|
const threadViewRef = ref<{
|
|
setReplyContent: (content: string) => void
|
|
getReplyContent: () => string
|
|
} | null>(null)
|
|
|
|
const unsafeFiles = computed<UnsafeFile[]>(() => {
|
|
return props.item.reports
|
|
.filter((report) =>
|
|
report.issues.some((issue) =>
|
|
issue.details.some((detail) => {
|
|
const detailWithStatus = detail as typeof detail & {
|
|
status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
|
|
}
|
|
const decision = getDetailDecision(detailWithStatus.id, detailWithStatus.status)
|
|
return decision === 'malware'
|
|
}),
|
|
),
|
|
)
|
|
.map((report) => ({
|
|
file: report,
|
|
projectName: props.item.project.name,
|
|
projectId: props.item.project.id,
|
|
userId: props.item.project_owner.id,
|
|
username: props.item.project_owner.name,
|
|
}))
|
|
})
|
|
|
|
const reviewSummaryPreview = computed(() => {
|
|
const fileDecisions = new Map<string, FileDecisions>()
|
|
let totalSafe = 0
|
|
let totalUnsafe = 0
|
|
|
|
for (const report of props.item.reports) {
|
|
if (!fileDecisions.has(report.id)) {
|
|
fileDecisions.set(report.id, {
|
|
fileName: report.file_name,
|
|
fileSize: report.file_size,
|
|
decisions: [],
|
|
maxSeverity: 'low',
|
|
})
|
|
}
|
|
const fileData = fileDecisions.get(report.id)!
|
|
|
|
for (const issue of report.issues) {
|
|
for (const detail of issue.details) {
|
|
// TODO: proper types when backend pushes
|
|
const detailWithStatus = detail as typeof detail & {
|
|
status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
|
|
}
|
|
const decision = getDetailDecision(detailWithStatus.id, detailWithStatus.status)
|
|
if (decision === 'pending') continue
|
|
|
|
fileData.decisions.push({
|
|
filePath: detail.file_path,
|
|
issueType: issue.issue_type.replace(/_/g, ' '),
|
|
severity: detail.severity,
|
|
decision,
|
|
})
|
|
|
|
if ((severityOrder[detail.severity] ?? 0) > (severityOrder[fileData.maxSeverity] ?? 0)) {
|
|
fileData.maxSeverity = detail.severity
|
|
}
|
|
|
|
if (decision === 'safe') totalSafe++
|
|
else totalUnsafe++
|
|
}
|
|
}
|
|
}
|
|
|
|
const totalDecisions = totalSafe + totalUnsafe
|
|
if (totalDecisions === 0) return ''
|
|
|
|
const timestamp = formatDateTimeUtc(dayjs().toDate())
|
|
let markdown = `## Tech Review Summary\n*${timestamp}*\n\n`
|
|
markdown += `<details>\n<summary>File Details (${totalSafe} safe, ${totalUnsafe} unsafe)</summary>\n\n`
|
|
|
|
for (const [, fileData] of fileDecisions) {
|
|
if (fileData.decisions.length === 0) continue
|
|
|
|
const fileSafe = fileData.decisions.filter((d) => d.decision === 'safe').length
|
|
const fileUnsafe = fileData.decisions.filter((d) => d.decision === 'malware').length
|
|
const fileVerdict = fileUnsafe > 0 ? 'Unsafe' : 'Safe'
|
|
|
|
markdown += `### ${fileData.fileName}\n`
|
|
markdown += `> ${formatFileSize(fileData.fileSize)} • ${fileData.decisions.length} issues • Max severity: ${fileData.maxSeverity} • **Verdict:** ${fileVerdict}\n\n`
|
|
markdown += `<details>\n<summary>Issues (${fileSafe} safe, ${fileUnsafe} unsafe)</summary>\n\n`
|
|
markdown += `| Class | Issue Type | Severity | Decision |\n`
|
|
markdown += `|-------|------------|----------|----------|\n`
|
|
|
|
for (const d of fileData.decisions) {
|
|
const decisionText = d.decision === 'safe' ? '✅ Safe' : '❌ Unsafe'
|
|
markdown += `| \`${d.filePath}\` | ${d.issueType} | ${capitalizeString(d.severity)} | ${decisionText} |\n`
|
|
}
|
|
|
|
markdown += `\n</details>\n\n`
|
|
}
|
|
|
|
markdown += `</details>\n\n`
|
|
markdown += `---\n\n**Total:** ${totalDecisions} issues reviewed (${totalSafe} safe, ${totalUnsafe} unsafe)\n\n`
|
|
|
|
return markdown
|
|
})
|
|
|
|
const threadWithPreview = computed(() => {
|
|
if (!reviewSummaryPreview.value) return props.item.thread
|
|
|
|
const user = auth.value?.user as User | null
|
|
if (!user) return props.item.thread
|
|
|
|
const previewMessage: ThreadMessage & { preview: true } = {
|
|
id: 'preview-message',
|
|
author_id: user.id,
|
|
body: {
|
|
type: 'text',
|
|
body: reviewSummaryPreview.value,
|
|
private: true,
|
|
replying_to: null,
|
|
associated_images: [],
|
|
},
|
|
created: new Date().toISOString(),
|
|
hide_identity: false,
|
|
preview: true,
|
|
}
|
|
|
|
return {
|
|
...props.item.thread,
|
|
messages: [...props.item.thread.messages, previewMessage],
|
|
members: props.item.thread.members.some((m) => m.id === user.id)
|
|
? props.item.thread.members
|
|
: [...props.item.thread.members, user],
|
|
}
|
|
})
|
|
|
|
const allIssuesResolved = computed(() => {
|
|
for (const report of props.item.reports) {
|
|
for (const issue of report.issues) {
|
|
for (const detail of issue.details) {
|
|
const detailWithStatus = detail as typeof detail & {
|
|
status: Labrinth.TechReview.Internal.DelphiReportIssueStatus
|
|
}
|
|
const decision = getDetailDecision(detailWithStatus.id, detailWithStatus.status)
|
|
if (decision === 'pending') return false
|
|
}
|
|
}
|
|
}
|
|
return true
|
|
})
|
|
|
|
const canSubmitReview = computed(() => {
|
|
const totalIssues = props.item.reports.reduce((sum, r) => sum + r.issues.length, 0)
|
|
if (totalIssues === 0) return true
|
|
return allIssuesResolved.value
|
|
})
|
|
|
|
async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
|
|
const editorContent = threadViewRef.value?.getReplyContent() || ''
|
|
|
|
let message: string | undefined
|
|
if (reviewSummaryPreview.value && editorContent) {
|
|
message = `${reviewSummaryPreview.value}${editorContent}`
|
|
} else if (reviewSummaryPreview.value) {
|
|
message = reviewSummaryPreview.value
|
|
} else if (editorContent) {
|
|
message = editorContent
|
|
}
|
|
|
|
try {
|
|
await client.labrinth.tech_review_internal.submitProject(props.item.project.id, {
|
|
verdict,
|
|
message,
|
|
})
|
|
emit('markComplete', props.item.project.id)
|
|
addNotification({
|
|
type: 'success',
|
|
title: 'Review submitted',
|
|
text: 'Technical review completed successfully.',
|
|
})
|
|
|
|
if (verdict === 'unsafe') {
|
|
emit('showMaliciousSummary', unsafeFiles.value)
|
|
}
|
|
} catch (error: unknown) {
|
|
const err = error as { response?: { data?: { issues?: string[] } } }
|
|
if (err.response?.data?.issues) {
|
|
const missedCount = err.response.data.issues.length
|
|
addNotification({
|
|
type: 'error',
|
|
title: 'Pending issues remain',
|
|
text: `${missedCount} issue(s) still need a verdict before submitting.`,
|
|
})
|
|
} else {
|
|
addNotification({
|
|
type: 'error',
|
|
title: 'Submit failed',
|
|
text: 'Failed to submit review. Please try again.',
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="shadow-card overflow-hidden rounded-2xl border border-surface-5 bg-surface-3">
|
|
<div class="flex flex-col gap-4 bg-surface-3 p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<Avatar
|
|
:src="item.project.icon_url"
|
|
class="rounded-2xl border border-surface-5 bg-surface-4 !shadow-none"
|
|
size="4rem"
|
|
/>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<div class="flex items-center gap-2">
|
|
<NuxtLink
|
|
:to="`/${item.project.project_types[0]}/${item.project.slug ?? item.project.id}`"
|
|
target="_blank"
|
|
class="text-lg font-semibold text-contrast hover:underline"
|
|
>
|
|
{{ item.project.name }}
|
|
</NuxtLink>
|
|
|
|
<div
|
|
class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
|
|
>
|
|
<component
|
|
:is="getProjectTypeIcon(item.project.project_types[0] as any)"
|
|
aria-hidden="true"
|
|
class="h-4 w-4"
|
|
/>
|
|
<span
|
|
v-for="project_type in item.project.project_types"
|
|
:key="project_type + item.project.id"
|
|
class="text-sm font-medium text-secondary"
|
|
>{{ formatProjectType(project_type, true) }}</span
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1"
|
|
:class="
|
|
isProjectApproved
|
|
? 'border-green bg-highlight-green'
|
|
: 'border-orange bg-highlight-orange'
|
|
"
|
|
>
|
|
<CheckIcon v-if="isProjectApproved" aria-hidden="true" class="h-4 w-4 text-green" />
|
|
<TimerIcon v-else aria-hidden="true" class="h-4 w-4 text-orange" />
|
|
<span
|
|
class="text-sm font-medium"
|
|
:class="isProjectApproved ? 'text-green' : 'text-orange'"
|
|
>
|
|
{{ isProjectApproved ? 'Live' : 'In review' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="rounded-full px-2.5 py-1" :class="severityColor">
|
|
<span class="text-sm font-medium">{{
|
|
capitalizeString(highestSeverity.toLowerCase())
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1">
|
|
<Avatar
|
|
:src="item.project_owner.icon_url"
|
|
class="rounded-full border border-surface-5 bg-surface-4 !shadow-none"
|
|
size="1.5rem"
|
|
circle
|
|
/>
|
|
<NuxtLink
|
|
:to="`/${item.project_owner.kind}/${item.project_owner.id}`"
|
|
target="_blank"
|
|
class="text-sm font-medium text-secondary hover:underline"
|
|
>
|
|
{{ item.project_owner.name }}
|
|
</NuxtLink>
|
|
<span class="text-tertiary text-sm">({{ item.project_owner.id }})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-base text-secondary">{{ formattedDate }}</span>
|
|
<ButtonStyled circular>
|
|
<OverflowMenu :options="quickActions" class="!shadow-none">
|
|
<template #default>
|
|
<EllipsisVerticalIcon class="size-4" />
|
|
</template>
|
|
<template #copy-id>
|
|
<ClipboardCopyIcon />
|
|
<span class="hidden sm:inline">Copy ID</span>
|
|
</template>
|
|
<template #copy-link>
|
|
<LinkIcon />
|
|
<span class="hidden sm:inline">Copy link</span>
|
|
</template>
|
|
<template #view-source>
|
|
<CodeIcon />
|
|
<span class="hidden sm:inline">View source</span>
|
|
</template>
|
|
</OverflowMenu>
|
|
</ButtonStyled>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-px w-full bg-surface-5"></div>
|
|
|
|
<NavTabs
|
|
mode="local"
|
|
:links="navTabsLinks"
|
|
:active-index="activeTabIndex"
|
|
@tab-click="handleTabClick"
|
|
/>
|
|
</div>
|
|
|
|
<div class="border-t border-surface-3 bg-surface-2">
|
|
<template v-if="currentTab === 'Thread'">
|
|
<CollapsibleRegion
|
|
v-model:collapsed="isThreadCollapsed"
|
|
:expand-text="threadExpandText"
|
|
collapse-text="Collapse thread"
|
|
class="border-x border-b border-solid border-surface-3"
|
|
>
|
|
<div class="bg-surface-2 p-4 pt-0">
|
|
<!-- DEV-531 -->
|
|
<!-- @vue-expect-error TODO: will convert ThreadView to use api-client types at a later date -->
|
|
<ThreadView
|
|
ref="threadViewRef"
|
|
:thread="threadWithPreview"
|
|
:quick-replies="techReviewQuickReplies"
|
|
:quick-reply-context="techReviewContext"
|
|
@update-thread="handleThreadUpdate"
|
|
>
|
|
<template #additionalActions>
|
|
<ButtonStyled color="brand">
|
|
<button
|
|
v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
|
|
:disabled="!canSubmitReview"
|
|
@click="handleSubmitReview('safe')"
|
|
>
|
|
<ShieldCheckIcon /> Pass
|
|
</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled color="red">
|
|
<button
|
|
v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
|
|
:disabled="!canSubmitReview"
|
|
@click="handleSubmitReview('unsafe')"
|
|
>
|
|
<BugIcon /> Fail
|
|
</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled v-if="featureFlags.developerMode" type="outlined">
|
|
<button @click="emit('showMaliciousSummary', unsafeFiles)">Debug Summary</button>
|
|
</ButtonStyled>
|
|
</template>
|
|
</ThreadView>
|
|
</div>
|
|
</CollapsibleRegion>
|
|
</template>
|
|
|
|
<template v-else-if="currentTab === 'Files'">
|
|
<div
|
|
v-for="(file, idx) in allFiles"
|
|
:key="idx"
|
|
class="flex items-center justify-between border-0 border-x border-b border-solid border-surface-3 bg-surface-2 px-4 py-3"
|
|
:class="{
|
|
'rounded-bl-2xl rounded-br-2xl': idx === allFiles.length - 1,
|
|
'bg-[#E8E8E8] dark:bg-[#1A1C20]': idx % 2 === 1,
|
|
}"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
v-tooltip="file.file_name"
|
|
class="font-medium text-contrast"
|
|
:class="{ 'cursor-pointer hover:underline': getFileDetailCount(file) > 0 }"
|
|
@click="getFileDetailCount(file) > 0 && viewFileFlags(file)"
|
|
>
|
|
{{ truncateMiddle(file.file_name, 50) }}
|
|
</span>
|
|
<div class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1">
|
|
<span class="text-sm font-medium text-secondary">{{
|
|
formatFileSize(file.file_size)
|
|
}}</span>
|
|
</div>
|
|
<div
|
|
v-if="getFileDetailCount(file) > 0"
|
|
class="rounded-full border-solid px-2.5 py-1"
|
|
:class="getSeverityBadgeColor(getFileHighestSeverity(file))"
|
|
>
|
|
<span class="text-sm font-medium">{{
|
|
capitalizeString(getFileHighestSeverity(file))
|
|
}}</span>
|
|
</div>
|
|
<div
|
|
v-if="getFileDetailCount(file) > 0"
|
|
class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1 text-sm"
|
|
:class="
|
|
getFileMarkedCount(file) === getFileDetailCount(file)
|
|
? 'border-green/60 bg-highlight-green text-green'
|
|
: 'border-red/60 bg-highlight-red text-red'
|
|
"
|
|
>
|
|
<CheckIcon
|
|
v-if="getFileMarkedCount(file) === getFileDetailCount(file)"
|
|
class="size-4"
|
|
/>
|
|
{{ getFileMarkedCount(file) }}/{{ getFileDetailCount(file) }} flags
|
|
</div>
|
|
<!-- TODO: remove toString when backend supports it properly -->
|
|
<div
|
|
v-else-if="file.flag_reason.toString() === 'manual'"
|
|
class="border-blue/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-blue px-2.5 py-1 text-sm text-blue"
|
|
>
|
|
Manual review
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="border-green/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-green px-2.5 py-1 text-sm text-green"
|
|
>
|
|
No flags
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<ButtonStyled v-if="getFileDetailCount(file) > 0">
|
|
<button @click="viewFileFlags(file)">Flags</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled type="outlined">
|
|
<a
|
|
:href="file.download_url"
|
|
:title="`Download ${file.file_name}`"
|
|
:download="file.file_name"
|
|
class="!border-px !border-surface-4"
|
|
tabindex="0"
|
|
>
|
|
<DownloadIcon /> Download
|
|
</a>
|
|
</ButtonStyled>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="currentTab === 'File' && selectedFile">
|
|
<div
|
|
v-if="remainingUnmarkedCount > 0"
|
|
class="flex gap-2 border-x border-b border-t-0 border-solid border-surface-3 bg-surface-2 p-4"
|
|
>
|
|
<ButtonStyled color="brand" :disabled="isBatchUpdating">
|
|
<button @click="batchMarkRemaining('safe')">
|
|
<CheckCircleIcon class="size-5" />
|
|
Remaining safe ({{ remainingUnmarkedCount }})
|
|
</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled color="red" :disabled="isBatchUpdating">
|
|
<button @click="batchMarkRemaining('unsafe')">
|
|
<TriangleAlertIcon class="size-5" />
|
|
Remaining malware ({{ remainingUnmarkedCount }})
|
|
</button>
|
|
</ButtonStyled>
|
|
</div>
|
|
<div
|
|
v-for="jarGroup in groupedByJar"
|
|
:key="jarGroup.key"
|
|
class="border-x border-b-0 border-t-0 border-solid border-surface-3 bg-surface-2"
|
|
>
|
|
<div
|
|
v-if="jarGroup.segments.length > 0"
|
|
class="border-b border-solid border-surface-1 px-4 py-3"
|
|
>
|
|
<div class="flex flex-wrap items-center gap-1">
|
|
<template
|
|
v-for="(segment, index) in jarGroup.segments"
|
|
:key="`${jarGroup.key}-${index}`"
|
|
>
|
|
<span
|
|
class="font-mono text-sm"
|
|
:class="
|
|
index === jarGroup.segments.length - 1
|
|
? 'font-semibold text-contrast'
|
|
: 'text-secondary'
|
|
"
|
|
>
|
|
{{ segment }}
|
|
</span>
|
|
<ChevronRightIcon
|
|
v-if="index < jarGroup.segments.length - 1"
|
|
class="size-4 text-secondary"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-for="classItem in jarGroup.classes"
|
|
:key="classItem.key"
|
|
class="border-b border-solid border-surface-1 last:border-b-0"
|
|
>
|
|
<div
|
|
class="flex cursor-pointer items-center justify-between p-4 transition-colors duration-200 hover:bg-surface-4"
|
|
@click="toggleClass(classItem)"
|
|
>
|
|
<div class="my-auto flex items-center gap-2">
|
|
<ButtonStyled type="transparent" circular>
|
|
<button
|
|
class="transition-transform"
|
|
:class="{ 'rotate-180': expandedClasses.has(classItem.key) }"
|
|
>
|
|
<ChevronDownIcon class="h-5 w-5 text-contrast" />
|
|
</button>
|
|
</ButtonStyled>
|
|
|
|
<span v-tooltip="classItem.filePath" class="font-mono font-semibold">{{
|
|
truncateMiddle(classItem.filePath)
|
|
}}</span>
|
|
|
|
<div
|
|
class="rounded-full border-solid px-2.5 py-1"
|
|
:class="getSeverityBadgeColor(getHighestSeverityInClass(classItem.flags))"
|
|
>
|
|
<span class="text-sm font-medium">{{
|
|
capitalizeString(getHighestSeverityInClass(classItem.flags))
|
|
}}</span>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1 text-sm"
|
|
:class="
|
|
getMarkedFlagsCount(classItem.flags) === classItem.flags.length
|
|
? 'border-green/60 bg-highlight-green text-green'
|
|
: 'border-red/60 bg-highlight-red text-red'
|
|
"
|
|
>
|
|
<CheckIcon
|
|
v-if="getMarkedFlagsCount(classItem.flags) === classItem.flags.length"
|
|
class="size-4"
|
|
/>
|
|
{{ getMarkedFlagsCount(classItem.flags) }}/{{ classItem.flags.length }} flags
|
|
</div>
|
|
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="isClassLoadingSource(classItem)"
|
|
class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1"
|
|
>
|
|
<span class="flex items-center gap-1.5 text-sm font-medium text-secondary">
|
|
<LoaderCircleIcon class="size-4 animate-spin" />
|
|
Loading source...
|
|
</span>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
|
|
<Collapsible :collapsed="!expandedClasses.has(classItem.key)">
|
|
<div
|
|
v-if="expandedClasses.has(classItem.key)"
|
|
class="mt-2 flex flex-col gap-2 px-4 pb-4"
|
|
>
|
|
<div
|
|
v-for="flag in classItem.flags"
|
|
:key="`${flag.issueId}-${flag.detail.id}`"
|
|
class="flex flex-col gap-2 rounded-lg border-[1px] border-b border-solid border-surface-5 bg-surface-3 py-2 pl-4 last:border-b-0"
|
|
>
|
|
<div class="grid grid-cols-[1fr_auto] items-center">
|
|
<div
|
|
class="flex items-center gap-2"
|
|
:class="{
|
|
'opacity-50': isPreReviewed(flag.detail.id, flag.detail.status),
|
|
}"
|
|
>
|
|
<span class="text-base font-semibold text-contrast">{{
|
|
flag.issueType.replace(/_/g, ' ')
|
|
}}</span>
|
|
<div
|
|
class="rounded-full border-solid px-2.5 py-1"
|
|
:class="getSeverityBadgeColor(flag.detail.severity)"
|
|
>
|
|
<span class="text-sm font-medium">{{
|
|
capitalizeString(flag.detail.severity)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex w-40 items-center justify-center gap-2">
|
|
<ButtonStyled
|
|
color="brand"
|
|
:type="
|
|
getDetailDecision(flag.detail.id, flag.detail.status) === 'safe'
|
|
? undefined
|
|
: 'outlined'
|
|
"
|
|
>
|
|
<button
|
|
class="!border-[1px]"
|
|
:disabled="updatingDetails.has(flag.detail.id)"
|
|
@click="updateDetailStatus(flag.detail.id, 'safe')"
|
|
>
|
|
Pass
|
|
</button>
|
|
</ButtonStyled>
|
|
|
|
<ButtonStyled
|
|
color="red"
|
|
:type="
|
|
getDetailDecision(flag.detail.id, flag.detail.status) === 'malware'
|
|
? undefined
|
|
: 'outlined'
|
|
"
|
|
>
|
|
<button
|
|
class="!border-[1px]"
|
|
:disabled="updatingDetails.has(flag.detail.id)"
|
|
@click="updateDetailStatus(flag.detail.id, 'unsafe')"
|
|
>
|
|
Fail
|
|
</button>
|
|
</ButtonStyled>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="flag.detail.data && Object.keys(flag.detail.data).length > 0"
|
|
class="flex flex-wrap gap-x-4 gap-y-1 pr-4 text-sm"
|
|
>
|
|
<div
|
|
v-for="[key, value] in Object.entries(flag.detail.data).sort(([a], [b]) =>
|
|
a.localeCompare(b),
|
|
)"
|
|
:key="key"
|
|
class="flex items-center gap-1.5"
|
|
>
|
|
<span class="text-secondary">{{ key }}:</span>
|
|
<a
|
|
v-if="typeof value === 'string' && value.startsWith('http')"
|
|
:href="value"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-brand-blue hover:underline"
|
|
>
|
|
{{ value }}
|
|
</a>
|
|
<span v-else class="font-mono text-contrast">{{ value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="getHighlightedClassSource(classItem).length > 0"
|
|
class="relative inset-0 overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-4"
|
|
>
|
|
<ButtonStyled circular type="transparent">
|
|
<button
|
|
v-tooltip="`Copy code`"
|
|
class="absolute right-2 top-2 border-[1px]"
|
|
@click="copyToClipboard(getClassDecompiledSource(classItem)!, classItem.key)"
|
|
>
|
|
<CopyIcon v-if="!showCopyFeedback.get(classItem.key)" />
|
|
<CheckIcon v-else />
|
|
</button>
|
|
</ButtonStyled>
|
|
|
|
<div class="overflow-x-auto bg-surface-3 py-3">
|
|
<div
|
|
v-for="(line, n) in getHighlightedClassSource(classItem)"
|
|
:key="n"
|
|
class="flex font-mono text-[13px] leading-[1.6]"
|
|
>
|
|
<div
|
|
class="select-none border-0 border-r border-solid border-surface-5 px-4 py-0 text-right text-primary"
|
|
style="min-width: 3.5rem"
|
|
>
|
|
{{ n + 1 }}
|
|
</div>
|
|
<div class="flex-1 px-4 py-0 text-primary">
|
|
<pre v-html="line || ' '"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else-if="isClassLoadingSource(classItem)"
|
|
class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4"
|
|
>
|
|
<p class="flex items-center gap-2 text-sm text-secondary">
|
|
<LoaderCircleIcon class="size-4 animate-spin" />
|
|
Loading source...
|
|
</p>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4"
|
|
>
|
|
<p class="text-sm text-secondary">
|
|
Source code not available or failed to decompile for this file.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Collapsible>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
pre {
|
|
all: unset;
|
|
display: inline;
|
|
white-space: pre;
|
|
}
|
|
|
|
.fade-enter-active {
|
|
transition: opacity 0.3s ease-in;
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
.fade-leave-active {
|
|
transition: opacity 0.15s ease-out;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|