You've already forked AstralRinth
forked from didirus/AstralRinth
Technical review queue (#4775)
* chore: fix typo in status message * feat(labrinth): overhaul malware scanner report storage and routes * chore: address some review comments * feat: add Delphi to Docker Compose `with-delphi` profile * chore: fix unused import Clippy lint * feat(labrinth/delphi): use PAT token authorization with project read scopes * chore: expose file IDs in version queries * fix: accept null decompiled source payloads from Delphi * tweak(labrinth): expose base62 file IDs more consistently for Delphi * feat(labrinth/delphi): support new Delphi report severity field * chore(labrinth): run `cargo sqlx prepare` to fix Docker build errors * tweak: add route for fetching Delphi issue type schema, abstract Labrinth away from issue types * chore: run `cargo sqlx prepare` * chore: fix typo on frontend generated state file message * feat: update to use new Delphi issue schema * wip: tech review endpoints * wip: add ToSchema for dependent types * wip: report issues return * wip * wip: returning more data * wip * Fix up db query * Delphi configuration to talk to Labrinth * Get Delphi working with Labrinth * Add Delphi dummy fixture * Better Delphi logging * Improve utoipa for tech review routes * Add more sorting options for tech review queue * Oops join * New routes for fetching issues and reports * Fix which kind of ID is returned in tech review endpoints * Deduplicate tech review report rows * Reduce info sent for projects * Fetch more thread info * Address PR comments * fix ci * fix postgres version mismatch * fix version creation * Implement routes * fix up tech review * Allow adding a moderation comment to Delphi rejections * fix up rebase * exclude rejected projects from tech review * add status change msg to tech review thread * cargo sqlx prepare * also ignore withheld projects * More filtering on issue search * wip: report routes * Fix up for build * cargo sqlx prepare * fix thread message privacy * New tech review search route * submit route * details have statuses now * add default to drid status * dedup issue details * fix sqlx query on empty files * fixes * Dedupe issue detail statuses and message on entering tech rev * Fix qa issues * Fix qa issues * fix review comments * typos * fix ci * feat: tech review frontend (#4781) * chore: fix typo in status message * feat(labrinth): overhaul malware scanner report storage and routes * chore: address some review comments * feat: add Delphi to Docker Compose `with-delphi` profile * chore: fix unused import Clippy lint * feat(labrinth/delphi): use PAT token authorization with project read scopes * chore: expose file IDs in version queries * fix: accept null decompiled source payloads from Delphi * tweak(labrinth): expose base62 file IDs more consistently for Delphi * feat(labrinth/delphi): support new Delphi report severity field * chore(labrinth): run `cargo sqlx prepare` to fix Docker build errors * tweak: add route for fetching Delphi issue type schema, abstract Labrinth away from issue types * chore: run `cargo sqlx prepare` * chore: fix typo on frontend generated state file message * feat: update to use new Delphi issue schema * wip: tech review endpoints * wip: add ToSchema for dependent types * wip: report issues return * wip * wip: returning more data * wip * Fix up db query * Delphi configuration to talk to Labrinth * Get Delphi working with Labrinth * Add Delphi dummy fixture * Better Delphi logging * Improve utoipa for tech review routes * Add more sorting options for tech review queue * Oops join * New routes for fetching issues and reports * Fix which kind of ID is returned in tech review endpoints * Deduplicate tech review report rows * Reduce info sent for projects * Fetch more thread info * Address PR comments * fix ci * fix ci * fix postgres version mismatch * fix version creation * Implement routes * feat: batch scan alert * feat: layout * feat: introduce surface variables * fix: theme selector * feat: rough draft of tech review card * feat: tab switcher * feat: batch scan btn * feat: api-client module for tech review * draft: impl * feat: auto icons * fix: layout issues * feat: fixes to code blocks + flag labels * feat: temp remove mock data * fix: search sort types * fix: intl & lint * chore: re-enable mock data * fix: flag badges + auto open first issue in file tab * feat: update for new routes * fix: more qa issues * feat: lazy load sources * fix: re-enable auth middleware * feat: impl threads * fix: lint & severity * feat: download btn + switch to using NavTabs with new local mode option * feat: re-add toplevel btns * feat: reports page consistency * fix: consistency on project queue * fix: icons + sizing * fix: colors and gaps * fix: impl endpoints * feat: load all flags on file tab * feat: thread generics changes * feat: more qa * feat: fix collapse * fix: qa * feat: msg modal * fix: ISO import * feat: qa fixes * fix: empty state basic * fix: collapsible region * fix: collapse thread by default * feat: rough draft of new process/flow * fix labrinth build * fix thread message privacy * New tech review search route * feat: qa fixes * feat: QA changes * fix: verdict on detail not whole issue * fix: lint + intl * fix: lint * fix: thread message for tech rev verdict * feat: use anim frames * fix: exports + typecheck * polish: qa changes * feat: qa * feat: qa polish * feat: fix malic modal * fix: lint * fix: qa + lint * fix: pagination * fix: lint * fix: qa * intl extract * fix ci --------- Signed-off-by: Calum H. <contact@cal.engineer> Co-authored-by: Alejandro González <me@alegon.dev> Co-authored-by: aecsocket <aecsocket@tutanota.com> --------- Signed-off-by: Calum H. <contact@cal.engineer> Co-authored-by: Alejandro González <me@alegon.dev> Co-authored-by: Calum H. <contact@cal.engineer>
This commit is contained in:
aecsocket
@@ -17,6 +17,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FolderIcon, ReportIcon, ShieldCheckIcon } from '@modrinth/assets'
|
||||
import { Chips } from '@modrinth/ui'
|
||||
import { defineMessages, useVIntl } from '@vintl/vintl'
|
||||
|
||||
@@ -46,9 +47,13 @@ const messages = defineMessages({
|
||||
})
|
||||
|
||||
const moderationLinks = [
|
||||
{ label: formatMessage(messages.projectsTitle), href: '/moderation' },
|
||||
{ label: formatMessage(messages.technicalReviewTitle), href: '/moderation/technical-review' },
|
||||
{ label: formatMessage(messages.reportsTitle), href: '/moderation/reports' },
|
||||
{ label: formatMessage(messages.projectsTitle), href: '/moderation', icon: FolderIcon },
|
||||
{
|
||||
label: formatMessage(messages.technicalReviewTitle),
|
||||
href: '/moderation/technical-review',
|
||||
icon: ShieldCheckIcon,
|
||||
},
|
||||
{ label: formatMessage(messages.reportsTitle), href: '/moderation/reports', icon: ReportIcon },
|
||||
]
|
||||
|
||||
const mobileNavOptions = [
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col justify-between gap-3 lg:flex-row">
|
||||
<div class="iconified-input flex-1 lg:max-w-md">
|
||||
<SearchIcon aria-hidden="true" class="text-lg" />
|
||||
@@ -24,34 +24,41 @@
|
||||
|
||||
<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
|
||||
<div class="flex flex-col gap-2 sm:flex-row">
|
||||
<DropdownSelect
|
||||
v-slot="{ selected }"
|
||||
<Combobox
|
||||
v-model="currentFilterType"
|
||||
class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
|
||||
:name="formatMessage(messages.filterBy)"
|
||||
:options="filterTypes as unknown[]"
|
||||
@change="goToPage(1)"
|
||||
:options="filterTypes"
|
||||
:placeholder="formatMessage(messages.filterBy)"
|
||||
@select="goToPage(1)"
|
||||
>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
|
||||
<FilterIcon class="size-4 flex-shrink-0" />
|
||||
<span class="truncate">{{ selected }} ({{ filteredProjects.length }})</span>
|
||||
</span>
|
||||
</DropdownSelect>
|
||||
<template #selected>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold">
|
||||
<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
|
||||
<span class="truncate text-contrast"
|
||||
>{{ currentFilterType }} ({{ filteredProjects.length }})</span
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</Combobox>
|
||||
|
||||
<DropdownSelect
|
||||
v-slot="{ selected }"
|
||||
<Combobox
|
||||
v-model="currentSortType"
|
||||
class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
|
||||
:name="formatMessage(messages.sortBy)"
|
||||
:options="sortTypes as unknown[]"
|
||||
@change="goToPage(1)"
|
||||
:options="sortTypes"
|
||||
:placeholder="formatMessage(messages.sortBy)"
|
||||
@select="goToPage(1)"
|
||||
>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
|
||||
<SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
|
||||
<SortDescIcon v-else class="size-4 flex-shrink-0" />
|
||||
<span class="truncate">{{ selected }}</span>
|
||||
</span>
|
||||
</DropdownSelect>
|
||||
<template #selected>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold">
|
||||
<SortAscIcon
|
||||
v-if="currentSortType === 'Oldest'"
|
||||
class="size-5 flex-shrink-0 text-secondary"
|
||||
/>
|
||||
<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
|
||||
<span class="truncate text-contrast">{{ currentSortType }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</Combobox>
|
||||
</div>
|
||||
|
||||
<ButtonStyled color="orange" class="w-full sm:w-auto">
|
||||
@@ -59,7 +66,7 @@
|
||||
class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
|
||||
@click="moderateAllInFilter()"
|
||||
>
|
||||
<ScaleIcon class="size-4 flex-shrink-0" />
|
||||
<ScaleIcon class="flex-shrink-0" />
|
||||
<span class="hidden sm:inline">{{ formatMessage(messages.moderate) }}</span>
|
||||
<span class="sm:hidden">Moderate</span>
|
||||
</button>
|
||||
@@ -72,7 +79,7 @@
|
||||
<ConfettiExplosion v-if="visible" />
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div v-if="paginatedProjects.length === 0" class="universal-card h-24 animate-pulse"></div>
|
||||
<ModerationQueueCard
|
||||
v-for="item in paginatedProjects"
|
||||
@@ -91,14 +98,14 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
FilterIcon,
|
||||
ListFilterIcon,
|
||||
ScaleIcon,
|
||||
SearchIcon,
|
||||
SortAscIcon,
|
||||
SortDescIcon,
|
||||
XIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { Button, ButtonStyled, DropdownSelect, Pagination } from '@modrinth/ui'
|
||||
import { Button, ButtonStyled, Combobox, type ComboboxOption, Pagination } from '@modrinth/ui'
|
||||
import { defineMessages, useVIntl } from '@vintl/vintl'
|
||||
import Fuse from 'fuse.js'
|
||||
import ConfettiExplosion from 'vue-confetti-explosion'
|
||||
@@ -215,18 +222,21 @@ watch(
|
||||
)
|
||||
|
||||
const currentFilterType = ref('All projects')
|
||||
const filterTypes: readonly string[] = readonly([
|
||||
'All projects',
|
||||
'Modpacks',
|
||||
'Mods',
|
||||
'Resource Packs',
|
||||
'Data Packs',
|
||||
'Plugins',
|
||||
'Shaders',
|
||||
])
|
||||
const filterTypes: ComboboxOption<string>[] = [
|
||||
{ value: 'All projects', label: 'All projects' },
|
||||
{ value: 'Modpacks', label: 'Modpacks' },
|
||||
{ value: 'Mods', label: 'Mods' },
|
||||
{ value: 'Resource Packs', label: 'Resource Packs' },
|
||||
{ value: 'Data Packs', label: 'Data Packs' },
|
||||
{ value: 'Plugins', label: 'Plugins' },
|
||||
{ value: 'Shaders', label: 'Shaders' },
|
||||
]
|
||||
|
||||
const currentSortType = ref('Oldest')
|
||||
const sortTypes: readonly string[] = readonly(['Oldest', 'Newest'])
|
||||
const sortTypes: ComboboxOption<string>[] = [
|
||||
{ value: 'Oldest', label: 'Oldest' },
|
||||
{ value: 'Newest', label: 'Newest' },
|
||||
]
|
||||
|
||||
const currentPage = ref(1)
|
||||
const itemsPerPage = 15
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col justify-between gap-3 lg:flex-row">
|
||||
<div class="iconified-input flex-1 lg:max-w-md">
|
||||
<SearchIcon aria-hidden="true" class="text-lg" />
|
||||
@@ -22,34 +22,41 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
|
||||
<DropdownSelect
|
||||
v-slot="{ selected }"
|
||||
<Combobox
|
||||
v-model="currentFilterType"
|
||||
class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
|
||||
:name="formatMessage(messages.filterBy)"
|
||||
:options="filterTypes as unknown[]"
|
||||
@change="goToPage(1)"
|
||||
:options="filterTypes"
|
||||
:placeholder="formatMessage(messages.filterBy)"
|
||||
@select="goToPage(1)"
|
||||
>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
|
||||
<FilterIcon class="size-4 flex-shrink-0" />
|
||||
<span class="truncate">{{ selected }} ({{ filteredReports.length }})</span>
|
||||
</span>
|
||||
</DropdownSelect>
|
||||
<template #selected>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold">
|
||||
<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
|
||||
<span class="truncate text-contrast"
|
||||
>{{ currentFilterType }} ({{ filteredReports.length }})</span
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</Combobox>
|
||||
|
||||
<DropdownSelect
|
||||
v-slot="{ selected }"
|
||||
<Combobox
|
||||
v-model="currentSortType"
|
||||
class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
|
||||
:name="formatMessage(messages.sortBy)"
|
||||
:options="sortTypes as unknown[]"
|
||||
@change="goToPage(1)"
|
||||
:options="sortTypes"
|
||||
:placeholder="formatMessage(messages.sortBy)"
|
||||
@select="goToPage(1)"
|
||||
>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
|
||||
<SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
|
||||
<SortDescIcon v-else class="size-4 flex-shrink-0" />
|
||||
<span class="truncate">{{ selected }}</span>
|
||||
</span>
|
||||
</DropdownSelect>
|
||||
<template #selected>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold">
|
||||
<SortAscIcon
|
||||
v-if="currentSortType === 'Oldest'"
|
||||
class="size-5 flex-shrink-0 text-secondary"
|
||||
/>
|
||||
<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
|
||||
<span class="truncate text-contrast">{{ currentSortType }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</Combobox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -57,7 +64,7 @@
|
||||
<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div v-if="paginatedReports.length === 0" class="universal-card h-24 animate-pulse"></div>
|
||||
<ReportCard v-for="report in paginatedReports" v-else :key="report.id" :report="report" />
|
||||
</div>
|
||||
@@ -69,9 +76,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
|
||||
import { ListFilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
|
||||
import type { ExtendedReport } from '@modrinth/moderation'
|
||||
import { Button, DropdownSelect, Pagination } from '@modrinth/ui'
|
||||
import { Button, Combobox, type ComboboxOption, Pagination } from '@modrinth/ui'
|
||||
import type { Report } from '@modrinth/utils'
|
||||
import { defineMessages, useVIntl } from '@vintl/vintl'
|
||||
import Fuse from 'fuse.js'
|
||||
@@ -169,10 +176,17 @@ watch(
|
||||
)
|
||||
|
||||
const currentFilterType = ref('All')
|
||||
const filterTypes: readonly string[] = readonly(['All', 'Unread', 'Read'])
|
||||
const filterTypes: ComboboxOption<string>[] = [
|
||||
{ value: 'All', label: 'All' },
|
||||
{ value: 'Unread', label: 'Unread' },
|
||||
{ value: 'Read', label: 'Read' },
|
||||
]
|
||||
|
||||
const currentSortType = ref('Oldest')
|
||||
const sortTypes: readonly string[] = readonly(['Oldest', 'Newest'])
|
||||
const sortTypes: ComboboxOption<string>[] = [
|
||||
{ value: 'Oldest', label: 'Oldest' },
|
||||
{ value: 'Newest', label: 'Newest' },
|
||||
]
|
||||
|
||||
const currentPage = ref(1)
|
||||
const itemsPerPage = 15
|
||||
|
||||
@@ -1,387 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-col justify-between gap-3 lg:flex-row">
|
||||
<div class="iconified-input flex-1 lg:max-w-md">
|
||||
<SearchIcon aria-hidden="true" class="text-lg" />
|
||||
<input
|
||||
v-model="query"
|
||||
class="h-[40px]"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
type="text"
|
||||
:placeholder="formatMessage(messages.searchPlaceholder)"
|
||||
@input="updateSearchResults()"
|
||||
/>
|
||||
<Button v-if="query" class="r-btn" @click="() => (query = '')">
|
||||
<XIcon />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
|
||||
<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
|
||||
<DropdownSelect
|
||||
v-slot="{ selected }"
|
||||
v-model="currentFilterType"
|
||||
class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
|
||||
:name="formatMessage(messages.filterBy)"
|
||||
:options="filterTypes as unknown[]"
|
||||
@change="updateSearchResults()"
|
||||
>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
|
||||
<FilterIcon class="size-4 flex-shrink-0" />
|
||||
<span class="truncate">{{ selected }} ({{ filteredReports.length }})</span>
|
||||
</span>
|
||||
</DropdownSelect>
|
||||
|
||||
<DropdownSelect
|
||||
v-slot="{ selected }"
|
||||
v-model="currentSortType"
|
||||
class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
|
||||
:name="formatMessage(messages.sortBy)"
|
||||
:options="sortTypes as unknown[]"
|
||||
@change="updateSearchResults()"
|
||||
>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold text-secondary">
|
||||
<SortAscIcon v-if="selected === 'Oldest'" class="size-4 flex-shrink-0" />
|
||||
<SortDescIcon v-else class="size-4 flex-shrink-0" />
|
||||
<span class="truncate">{{ selected }}</span>
|
||||
</span>
|
||||
</DropdownSelect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="totalPages > 1" class="flex justify-center lg:hidden">
|
||||
<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-col gap-2">
|
||||
<DelphiReportCard
|
||||
v-for="report in paginatedReports"
|
||||
:key="report.version.id"
|
||||
:report="report"
|
||||
/>
|
||||
<div
|
||||
v-if="!paginatedReports || paginatedReports.length === 0"
|
||||
class="universal-card h-24 animate-pulse"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div v-if="totalPages > 1" class="mt-4 flex justify-center">
|
||||
<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
|
||||
import type { ExtendedDelphiReport, OwnershipTarget } from '@modrinth/moderation'
|
||||
import { Button, DropdownSelect, Pagination } from '@modrinth/ui'
|
||||
import type { DelphiReport, Organization, Project, TeamMember, Version } from '@modrinth/utils'
|
||||
import { defineMessages, useVIntl } from '@vintl/vintl'
|
||||
import { useLocalStorage } from '@vueuse/core'
|
||||
import Fuse from 'fuse.js'
|
||||
|
||||
import DelphiReportCard from '~/components/ui/moderation/ModerationDelphiReportCard.vue'
|
||||
import { asEncodedJsonArray, fetchSegmented } from '~/utils/fetch-helpers.ts'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const messages = defineMessages({
|
||||
searchPlaceholder: {
|
||||
id: 'moderation.technical.search.placeholder',
|
||||
defaultMessage: 'Search tech reviews...',
|
||||
},
|
||||
filterBy: {
|
||||
id: 'moderation.filter.by',
|
||||
defaultMessage: 'Filter by',
|
||||
},
|
||||
sortBy: {
|
||||
id: 'moderation.sort.by',
|
||||
defaultMessage: 'Sort by',
|
||||
},
|
||||
})
|
||||
|
||||
async function getProjectQuicklyForMock(projectId: string): Promise<Project> {
|
||||
return (await useBaseFetch(`project/${projectId}`)) as Project
|
||||
}
|
||||
|
||||
async function getVersionQuicklyForMock(versionId: string): Promise<Version> {
|
||||
return (await useBaseFetch(`version/${versionId}`)) as Version
|
||||
}
|
||||
|
||||
const mockDelphiReports: DelphiReport[] = [
|
||||
{
|
||||
project: await getProjectQuicklyForMock('7MoE34WK'),
|
||||
version: await getVersionQuicklyForMock('cTkKLWgA'),
|
||||
trace_type: 'url_usage',
|
||||
file_path: 'me/decce/gnetum/ASMEventHandlerHelper.java',
|
||||
priority_score: 29,
|
||||
status: 'pending',
|
||||
detected_at: '2025-04-01T12:00:00Z',
|
||||
} as DelphiReport,
|
||||
{
|
||||
project: await getProjectQuicklyForMock('7MoE34WK'),
|
||||
version: await getVersionQuicklyForMock('cTkKLWgA'),
|
||||
trace_type: 'url_usage',
|
||||
file_path: 'me/decce/gnetum/SomeOtherFile.java',
|
||||
priority_score: 48,
|
||||
status: 'rejected',
|
||||
detected_at: '2025-03-02T12:00:00Z',
|
||||
} as DelphiReport,
|
||||
{
|
||||
project: await getProjectQuicklyForMock('7MoE34WK'),
|
||||
version: await getVersionQuicklyForMock('cTkKLWgA'),
|
||||
trace_type: 'url_usage',
|
||||
file_path: 'me/decce/gnetum/YetAnotherFile.java',
|
||||
priority_score: 15,
|
||||
status: 'approved',
|
||||
detected_at: '2025-02-03T12:00:00Z',
|
||||
} as DelphiReport,
|
||||
]
|
||||
|
||||
const { data: allReports } = await useAsyncData('moderation-tech-reviews', async () => {
|
||||
// TODO: replace with actual API call
|
||||
const delphiReports = mockDelphiReports
|
||||
|
||||
if (delphiReports.length === 0) {
|
||||
return []
|
||||
}
|
||||
|
||||
const teamIds = [...new Set(delphiReports.map((report) => report.project.team).filter(Boolean))]
|
||||
const orgIds = [
|
||||
...new Set(delphiReports.map((report) => report.project.organization).filter(Boolean)),
|
||||
]
|
||||
|
||||
const [teamsData, orgsData]: [TeamMember[][], Organization[]] = await Promise.all([
|
||||
teamIds.length > 0
|
||||
? fetchSegmented(teamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`)
|
||||
: Promise.resolve([]),
|
||||
orgIds.length > 0
|
||||
? fetchSegmented(orgIds, (ids) => `organizations?ids=${asEncodedJsonArray(ids)}`, {
|
||||
apiVersion: 3,
|
||||
})
|
||||
: Promise.resolve([]),
|
||||
])
|
||||
|
||||
const orgTeamIds = orgsData.map((org) => org.team_id).filter(Boolean)
|
||||
const orgTeamsData: TeamMember[][] =
|
||||
orgTeamIds.length > 0
|
||||
? await fetchSegmented(orgTeamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`)
|
||||
: []
|
||||
|
||||
const teamMap = new Map<string, TeamMember[]>()
|
||||
const orgMap = new Map<string, Organization>()
|
||||
|
||||
teamsData.forEach((team) => {
|
||||
let teamId = null
|
||||
for (const member of team) {
|
||||
teamId = member.team_id
|
||||
if (!teamMap.has(teamId)) {
|
||||
teamMap.set(teamId, team)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
orgTeamsData.forEach((team) => {
|
||||
let teamId = null
|
||||
for (const member of team) {
|
||||
teamId = member.team_id
|
||||
if (!teamMap.has(teamId)) {
|
||||
teamMap.set(teamId, team)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
orgsData.forEach((org: Organization) => {
|
||||
orgMap.set(org.id, org)
|
||||
})
|
||||
|
||||
const extendedReports: ExtendedDelphiReport[] = delphiReports.map((report) => {
|
||||
let target: OwnershipTarget | undefined
|
||||
const project = report.project
|
||||
|
||||
if (project) {
|
||||
let owner: TeamMember | null = null
|
||||
let org: Organization | null = null
|
||||
|
||||
if (project.team) {
|
||||
const teamMembers = teamMap.get(project.team)
|
||||
if (teamMembers) {
|
||||
owner = teamMembers.find((member) => member.role === 'Owner') || null
|
||||
}
|
||||
}
|
||||
|
||||
if (project.organization) {
|
||||
org = orgMap.get(project.organization) || null
|
||||
}
|
||||
|
||||
if (org) {
|
||||
target = {
|
||||
name: org.name,
|
||||
avatar_url: org.icon_url,
|
||||
type: 'organization',
|
||||
slug: org.slug,
|
||||
}
|
||||
} else if (owner) {
|
||||
target = {
|
||||
name: owner.user.username,
|
||||
avatar_url: owner.user.avatar_url,
|
||||
type: 'user',
|
||||
slug: owner.user.username,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...report,
|
||||
target,
|
||||
}
|
||||
})
|
||||
|
||||
extendedReports.sort((a, b) => b.priority_score - a.priority_score)
|
||||
|
||||
return extendedReports
|
||||
})
|
||||
|
||||
const query = ref(route.query.q?.toString() || '')
|
||||
watch(
|
||||
query,
|
||||
(newQuery) => {
|
||||
const currentQuery = { ...route.query }
|
||||
if (newQuery) {
|
||||
currentQuery.q = newQuery
|
||||
} else {
|
||||
delete currentQuery.q
|
||||
}
|
||||
|
||||
router.replace({
|
||||
path: route.path,
|
||||
query: currentQuery,
|
||||
})
|
||||
},
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
watch(
|
||||
() => route.query.q,
|
||||
(newQueryParam) => {
|
||||
const newValue = newQueryParam?.toString() || ''
|
||||
if (query.value !== newValue) {
|
||||
query.value = newValue
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const currentFilterType = useLocalStorage('moderation-tech-reviews-filter-type', () => 'Pending')
|
||||
const filterTypes: readonly string[] = readonly(['All', 'Pending', 'Approved', 'Rejected'])
|
||||
|
||||
const currentSortType = useLocalStorage('moderation-tech-reviews-sort-type', () => 'Priority')
|
||||
const sortTypes: readonly string[] = readonly(['Priority', 'Oldest', 'Newest'])
|
||||
|
||||
const currentPage = ref(1)
|
||||
const itemsPerPage = 15
|
||||
const totalPages = computed(() => Math.ceil((filteredReports.value?.length || 0) / itemsPerPage))
|
||||
|
||||
const fuse = computed(() => {
|
||||
if (!allReports.value || allReports.value.length === 0) return null
|
||||
return new Fuse(allReports.value, {
|
||||
keys: [
|
||||
{
|
||||
name: 'version.id',
|
||||
weight: 3,
|
||||
},
|
||||
{
|
||||
name: 'version.version_number',
|
||||
weight: 3,
|
||||
},
|
||||
{
|
||||
name: 'project.title',
|
||||
weight: 3,
|
||||
},
|
||||
{
|
||||
name: 'project.slug',
|
||||
weight: 3,
|
||||
},
|
||||
{
|
||||
name: 'version.files.filename',
|
||||
weight: 2,
|
||||
},
|
||||
{
|
||||
name: 'trace_type',
|
||||
weight: 2,
|
||||
},
|
||||
{
|
||||
name: 'content',
|
||||
weight: 0.5,
|
||||
},
|
||||
'file_path',
|
||||
'project.id',
|
||||
'target.name',
|
||||
'target.slug',
|
||||
],
|
||||
includeScore: true,
|
||||
threshold: 0.4,
|
||||
})
|
||||
})
|
||||
|
||||
const filteredReports = computed(() => {
|
||||
if (!allReports.value) return []
|
||||
|
||||
let filtered
|
||||
|
||||
if (query.value && fuse.value) {
|
||||
const results = fuse.value.search(query.value)
|
||||
filtered = results.map((result) => result.item)
|
||||
} else {
|
||||
filtered = [...allReports.value]
|
||||
}
|
||||
|
||||
if (currentFilterType.value === 'Pending') {
|
||||
filtered = filtered.filter((report) => report.status === 'pending')
|
||||
} else if (currentFilterType.value === 'Approved') {
|
||||
filtered = filtered.filter((report) => report.status === 'approved')
|
||||
} else if (currentFilterType.value === 'Rejected') {
|
||||
filtered = filtered.filter((report) => report.status === 'rejected')
|
||||
}
|
||||
|
||||
if (currentSortType.value === 'Priority') {
|
||||
filtered.sort((a, b) => b.priority_score - a.priority_score)
|
||||
} else if (currentSortType.value === 'Oldest') {
|
||||
filtered.sort((a, b) => {
|
||||
const dateA = new Date(a.detected_at).getTime()
|
||||
const dateB = new Date(b.detected_at).getTime()
|
||||
return dateA - dateB
|
||||
})
|
||||
} else {
|
||||
filtered.sort((a, b) => {
|
||||
const dateA = new Date(a.detected_at).getTime()
|
||||
const dateB = new Date(b.detected_at).getTime()
|
||||
return dateB - dateA
|
||||
})
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
const paginatedReports = computed(() => {
|
||||
if (!filteredReports.value) return []
|
||||
const start = (currentPage.value - 1) * itemsPerPage
|
||||
const end = start + itemsPerPage
|
||||
return filteredReports.value.slice(start, end)
|
||||
})
|
||||
|
||||
function updateSearchResults() {
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
function goToPage(page: number) {
|
||||
currentPage.value = page
|
||||
}
|
||||
</script>
|
||||
@@ -1,3 +1,572 @@
|
||||
<script setup lang="ts">
|
||||
import type { Labrinth } from '@modrinth/api-client'
|
||||
import { ListFilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
|
||||
import {
|
||||
Button,
|
||||
Combobox,
|
||||
type ComboboxOption,
|
||||
injectModrinthClient,
|
||||
Pagination,
|
||||
} from '@modrinth/ui'
|
||||
import { useInfiniteQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import { defineMessages, useVIntl } from '@vintl/vintl'
|
||||
import Fuse from 'fuse.js'
|
||||
|
||||
import MaliciousSummaryModal, {
|
||||
type UnsafeFile,
|
||||
} from '~/components/ui/moderation/MaliciousSummaryModal.vue'
|
||||
import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
|
||||
|
||||
const client = injectModrinthClient()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const currentPage = ref(1)
|
||||
const API_PAGE_SIZE = 50
|
||||
const UI_PAGE_SIZE = 4
|
||||
const { formatMessage } = useVIntl()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const CACHE_TTL = 24 * 60 * 60 * 1000
|
||||
const CACHE_KEY_PREFIX = 'tech_review_source_'
|
||||
|
||||
type CachedSource = {
|
||||
source: string
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
function getCachedSource(detailId: string): string | null {
|
||||
try {
|
||||
const cached = localStorage.getItem(`${CACHE_KEY_PREFIX}${detailId}`)
|
||||
if (!cached) return null
|
||||
|
||||
const data: CachedSource = JSON.parse(cached)
|
||||
const now = Date.now()
|
||||
|
||||
if (now - data.timestamp > CACHE_TTL) {
|
||||
localStorage.removeItem(`${CACHE_KEY_PREFIX}${detailId}`)
|
||||
return null
|
||||
}
|
||||
|
||||
return data.source
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function setCachedSource(detailId: string, source: string): void {
|
||||
try {
|
||||
const data: CachedSource = {
|
||||
source,
|
||||
timestamp: Date.now(),
|
||||
}
|
||||
localStorage.setItem(`${CACHE_KEY_PREFIX}${detailId}`, JSON.stringify(data))
|
||||
} catch (error) {
|
||||
console.error('Failed to cache source:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function clearExpiredCache(): void {
|
||||
try {
|
||||
const now = Date.now()
|
||||
const keys = Object.keys(localStorage)
|
||||
|
||||
for (const key of keys) {
|
||||
if (key.startsWith(CACHE_KEY_PREFIX)) {
|
||||
const cached = localStorage.getItem(key)
|
||||
if (cached) {
|
||||
const data: CachedSource = JSON.parse(cached)
|
||||
if (now - data.timestamp > CACHE_TTL) {
|
||||
localStorage.removeItem(key)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to clear expired cache:', error)
|
||||
}
|
||||
}
|
||||
|
||||
clearExpiredCache()
|
||||
|
||||
const loadingIssues = ref<Set<string>>(new Set())
|
||||
const decompiledSources = ref<Map<string, string>>(new Map())
|
||||
|
||||
async function loadIssueSource(issueId: string): Promise<void> {
|
||||
if (loadingIssues.value.has(issueId)) return
|
||||
|
||||
loadingIssues.value.add(issueId)
|
||||
|
||||
try {
|
||||
const issueData = await client.labrinth.tech_review_internal.getIssue(issueId)
|
||||
|
||||
for (const detail of issueData.details) {
|
||||
if (detail.decompiled_source) {
|
||||
decompiledSources.value.set(detail.id, detail.decompiled_source)
|
||||
setCachedSource(detail.id, detail.decompiled_source)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load issue source:', error)
|
||||
} finally {
|
||||
loadingIssues.value.delete(issueId)
|
||||
}
|
||||
}
|
||||
|
||||
function tryLoadCachedSourcesForFile(reportId: string): void {
|
||||
for (const review of reviewItems.value) {
|
||||
const report = review.reports.find((r) => r.id === reportId)
|
||||
if (report) {
|
||||
for (const issue of report.issues) {
|
||||
for (const detail of issue.details) {
|
||||
if (!decompiledSources.value.has(detail.id)) {
|
||||
const cached = getCachedSource(detail.id)
|
||||
if (cached) {
|
||||
decompiledSources.value.set(detail.id, cached)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleLoadFileSources(reportId: string): void {
|
||||
tryLoadCachedSourcesForFile(reportId)
|
||||
|
||||
for (const review of reviewItems.value) {
|
||||
const report = review.reports.find((r) => r.id === reportId)
|
||||
if (report) {
|
||||
for (const issue of report.issues) {
|
||||
const hasUncached = issue.details.some((d) => !decompiledSources.value.has(d.id))
|
||||
if (hasUncached) {
|
||||
loadIssueSource(issue.id)
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
searchPlaceholder: {
|
||||
id: 'moderation.search.placeholder',
|
||||
defaultMessage: 'Search...',
|
||||
},
|
||||
filterBy: {
|
||||
id: 'moderation.filter.by',
|
||||
defaultMessage: 'Filter by',
|
||||
},
|
||||
sortBy: {
|
||||
id: 'moderation.sort.by',
|
||||
defaultMessage: 'Sort by',
|
||||
},
|
||||
})
|
||||
|
||||
const query = ref(route.query.q?.toString() || '')
|
||||
|
||||
watch(
|
||||
query,
|
||||
(newQuery) => {
|
||||
const currentQuery = { ...route.query }
|
||||
if (newQuery) {
|
||||
currentQuery.q = newQuery
|
||||
} else {
|
||||
delete currentQuery.q
|
||||
}
|
||||
|
||||
router.replace({
|
||||
path: route.path,
|
||||
query: currentQuery,
|
||||
})
|
||||
goToPage(1)
|
||||
},
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
watch(
|
||||
() => route.query.q,
|
||||
(newQueryParam) => {
|
||||
const newValue = newQueryParam?.toString() || ''
|
||||
if (query.value !== newValue) {
|
||||
query.value = newValue
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const currentFilterType = ref('All issues')
|
||||
|
||||
const filterTypes = computed<ComboboxOption<string>[]>(() => {
|
||||
const base: ComboboxOption<string>[] = [{ value: 'All issues', label: 'All issues' }]
|
||||
if (!reviewItems.value) return base
|
||||
|
||||
const issueTypes = new Set(
|
||||
reviewItems.value
|
||||
.flatMap((review) => review.reports)
|
||||
.flatMap((report) => report.issues)
|
||||
.map((issue) => issue.issue_type),
|
||||
)
|
||||
|
||||
const sortedTypes = Array.from(issueTypes).sort()
|
||||
return [...base, ...sortedTypes.map((type) => ({ value: type, label: type }))]
|
||||
})
|
||||
|
||||
const currentSortType = ref('Severe first')
|
||||
const sortTypes: ComboboxOption<string>[] = [
|
||||
{ value: 'Oldest', label: 'Oldest' },
|
||||
{ value: 'Newest', label: 'Newest' },
|
||||
{ value: 'Severe first', label: 'Severe first' },
|
||||
{ value: 'Severe last', label: 'Severe last' },
|
||||
]
|
||||
|
||||
const fuse = computed(() => {
|
||||
if (!reviewItems.value || reviewItems.value.length === 0) return null
|
||||
return new Fuse(reviewItems.value, {
|
||||
keys: [
|
||||
{ name: 'project.title', weight: 4 },
|
||||
{ name: 'project.slug', weight: 3 },
|
||||
{ name: 'reports.file_name', weight: 2 },
|
||||
{ name: 'reports.issues.issue_type', weight: 3 },
|
||||
{ name: 'project_owner.name', weight: 2 },
|
||||
],
|
||||
includeScore: true,
|
||||
threshold: 0.4,
|
||||
})
|
||||
})
|
||||
|
||||
const searchResults = computed(() => {
|
||||
if (!query.value || !fuse.value) return null
|
||||
return fuse.value.search(query.value).map((result) => result.item)
|
||||
})
|
||||
|
||||
const baseFiltered = computed(() => {
|
||||
if (!reviewItems.value) return []
|
||||
return query.value && searchResults.value ? searchResults.value : [...reviewItems.value]
|
||||
})
|
||||
|
||||
const typeFiltered = computed(() => {
|
||||
if (currentFilterType.value === 'All issues') return baseFiltered.value
|
||||
const type = currentFilterType.value
|
||||
|
||||
return baseFiltered.value.filter((review) => {
|
||||
return review.reports.some((report: Labrinth.TechReview.Internal.FileReport) =>
|
||||
report.issues.some(
|
||||
(issue: Labrinth.TechReview.Internal.FileIssue) => issue.issue_type === type,
|
||||
),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
const filteredItems = computed(() => typeFiltered.value)
|
||||
|
||||
const filteredIssuesCount = computed(() => {
|
||||
return filteredItems.value.reduce((total, review) => {
|
||||
if (currentFilterType.value === 'All issues') {
|
||||
return total + review.reports.reduce((sum, report) => sum + report.issues.length, 0)
|
||||
} else {
|
||||
return (
|
||||
total +
|
||||
review.reports.reduce((sum, report) => {
|
||||
return (
|
||||
sum +
|
||||
report.issues.filter((issue) => issue.issue_type === currentFilterType.value).length
|
||||
)
|
||||
}, 0)
|
||||
)
|
||||
}
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const totalPages = computed(() => Math.ceil((filteredItems.value?.length || 0) / UI_PAGE_SIZE))
|
||||
const paginatedItems = computed(() => {
|
||||
if (!filteredItems.value) return []
|
||||
const start = (currentPage.value - 1) * UI_PAGE_SIZE
|
||||
const end = start + UI_PAGE_SIZE
|
||||
return filteredItems.value.slice(start, end)
|
||||
})
|
||||
function goToPage(page: number, top = false) {
|
||||
currentPage.value = page
|
||||
|
||||
if (top && window) {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function toApiSort(label: string): Labrinth.TechReview.Internal.SearchProjectsSort {
|
||||
switch (label) {
|
||||
case 'Oldest':
|
||||
return 'created_asc'
|
||||
case 'Newest':
|
||||
return 'created_desc'
|
||||
case 'Severe first':
|
||||
return 'severity_desc'
|
||||
case 'Severe last':
|
||||
return 'severity_asc'
|
||||
default:
|
||||
return 'severity_desc'
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
data: infiniteData,
|
||||
isLoading,
|
||||
isFetchingNextPage,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
refetch,
|
||||
} = useInfiniteQuery({
|
||||
queryKey: ['tech-reviews', currentSortType],
|
||||
queryFn: async ({ pageParam = 0 }) => {
|
||||
return await client.labrinth.tech_review_internal.searchProjects({
|
||||
limit: API_PAGE_SIZE,
|
||||
page: pageParam,
|
||||
sort_by: toApiSort(currentSortType.value),
|
||||
})
|
||||
},
|
||||
getNextPageParam: (lastPage, allPages) => {
|
||||
// If we got a full page, there's probably more
|
||||
return lastPage.project_reports.length >= API_PAGE_SIZE ? allPages.length : undefined
|
||||
},
|
||||
initialPageParam: 0,
|
||||
})
|
||||
|
||||
watch(
|
||||
[() => infiniteData.value, hasNextPage],
|
||||
() => {
|
||||
if (hasNextPage.value && !isFetchingNextPage.value) {
|
||||
fetchNextPage()
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const mergedSearchResponse = computed(() => {
|
||||
if (!infiniteData.value?.pages?.length) return null
|
||||
|
||||
return infiniteData.value.pages.reduce(
|
||||
(merged, page) => ({
|
||||
project_reports: [...merged.project_reports, ...page.project_reports],
|
||||
projects: { ...merged.projects, ...page.projects },
|
||||
threads: { ...merged.threads, ...page.threads },
|
||||
ownership: { ...merged.ownership, ...page.ownership },
|
||||
}),
|
||||
{
|
||||
project_reports: [] as Labrinth.TechReview.Internal.ProjectReport[],
|
||||
projects: {} as Record<string, Labrinth.TechReview.Internal.ProjectModerationInfo>,
|
||||
threads: {} as Record<string, Labrinth.TechReview.Internal.Thread>,
|
||||
ownership: {} as Record<string, Labrinth.TechReview.Internal.Ownership>,
|
||||
},
|
||||
)
|
||||
})
|
||||
|
||||
type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
|
||||
id: string
|
||||
version_id: string
|
||||
}
|
||||
|
||||
const reviewItems = computed(() => {
|
||||
if (!mergedSearchResponse.value?.project_reports?.length) {
|
||||
return []
|
||||
}
|
||||
|
||||
const response = mergedSearchResponse.value
|
||||
|
||||
return response.project_reports
|
||||
.map((projectReport) => {
|
||||
const project = response.projects[projectReport.project_id]
|
||||
const thread = project?.thread_id ? response.threads[project.thread_id] : undefined
|
||||
|
||||
if (!thread) return null
|
||||
|
||||
const reports: FlattenedFileReport[] = projectReport.versions.flatMap((version) =>
|
||||
version.files.map((file) => ({
|
||||
...file,
|
||||
id: file.report_id,
|
||||
version_id: version.version_id,
|
||||
})),
|
||||
)
|
||||
|
||||
return {
|
||||
project,
|
||||
project_owner: response.ownership[projectReport.project_id],
|
||||
thread,
|
||||
reports,
|
||||
}
|
||||
})
|
||||
.filter(
|
||||
(
|
||||
item,
|
||||
): item is {
|
||||
project: Labrinth.TechReview.Internal.ProjectModerationInfo
|
||||
project_owner: Labrinth.TechReview.Internal.Ownership
|
||||
thread: Labrinth.TechReview.Internal.Thread
|
||||
reports: FlattenedFileReport[]
|
||||
} => item !== null,
|
||||
)
|
||||
})
|
||||
|
||||
function handleMarkComplete(projectId: string) {
|
||||
queryClient.setQueryData(
|
||||
['tech-reviews', currentSortType],
|
||||
(
|
||||
oldData:
|
||||
| {
|
||||
pages: Labrinth.TechReview.Internal.SearchResponse[]
|
||||
pageParams: number[]
|
||||
}
|
||||
| undefined,
|
||||
) => {
|
||||
if (!oldData) return oldData
|
||||
|
||||
return {
|
||||
...oldData,
|
||||
pages: oldData.pages.map((page) => ({
|
||||
...page,
|
||||
project_reports: page.project_reports.filter((pr) => pr.project_id !== projectId),
|
||||
projects: Object.fromEntries(
|
||||
Object.entries(page.projects).filter(([id]) => id !== projectId),
|
||||
),
|
||||
ownership: Object.fromEntries(
|
||||
Object.entries(page.ownership).filter(([id]) => id !== projectId),
|
||||
),
|
||||
})),
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const maliciousSummaryModalRef = ref<InstanceType<typeof MaliciousSummaryModal>>()
|
||||
const currentUnsafeFiles = ref<UnsafeFile[]>([])
|
||||
|
||||
function handleShowMaliciousSummary(unsafeFiles: UnsafeFile[]) {
|
||||
currentUnsafeFiles.value = unsafeFiles
|
||||
maliciousSummaryModalRef.value?.show()
|
||||
}
|
||||
|
||||
watch(currentSortType, () => {
|
||||
goToPage(1)
|
||||
})
|
||||
|
||||
// TODO: Reimpl when backend is available
|
||||
// const batchScanProgressInformation = computed<BatchScanProgress | undefined>(() => {
|
||||
// return {
|
||||
// total: 58,
|
||||
// complete: 20,
|
||||
// }
|
||||
// })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p>Not yet implemented.</p>
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- TODO: Reimpl when backend is available -->
|
||||
<!-- <BatchScanProgressAlert
|
||||
v-if="batchScanProgressInformation"
|
||||
:progress="batchScanProgressInformation"
|
||||
/> -->
|
||||
|
||||
<div class="flex flex-col justify-between gap-2 lg:flex-row">
|
||||
<div class="iconified-input flex-1 lg:max-w-md">
|
||||
<SearchIcon aria-hidden="true" class="text-lg" />
|
||||
<input
|
||||
v-model="query"
|
||||
class="!h-10"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
type="text"
|
||||
:placeholder="formatMessage(messages.searchPlaceholder)"
|
||||
@input="goToPage(1)"
|
||||
/>
|
||||
<Button v-if="query" class="r-btn" @click="() => (query = '')">
|
||||
<XIcon />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
|
||||
<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-end gap-2 sm:flex-row lg:flex-shrink-0">
|
||||
<Combobox
|
||||
v-model="currentFilterType"
|
||||
class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
|
||||
:options="filterTypes"
|
||||
:placeholder="formatMessage(messages.filterBy)"
|
||||
searchable
|
||||
@select="goToPage(1)"
|
||||
>
|
||||
<template #selected>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold">
|
||||
<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
|
||||
<span class="truncate text-contrast"
|
||||
>{{ currentFilterType }} ({{ filteredIssuesCount }})</span
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</Combobox>
|
||||
|
||||
<Combobox
|
||||
v-model="currentSortType"
|
||||
class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[175px]"
|
||||
:options="sortTypes"
|
||||
:placeholder="formatMessage(messages.sortBy)"
|
||||
@select="goToPage(1)"
|
||||
>
|
||||
<template #selected>
|
||||
<span class="flex flex-row gap-2 align-middle font-semibold">
|
||||
<SortAscIcon
|
||||
v-if="currentSortType === 'Oldest'"
|
||||
class="size-5 flex-shrink-0 text-secondary"
|
||||
/>
|
||||
<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
|
||||
<span class="truncate text-contrast">{{ currentSortType }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</Combobox>
|
||||
|
||||
<!-- <ButtonStyled color="orange">
|
||||
<button class="!h-10"><ShieldAlertIcon /> Batch scan</button>
|
||||
</ButtonStyled> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="totalPages > 1" class="flex justify-center lg:hidden">
|
||||
<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div v-if="isLoading || isFetchingNextPage" class="universal-card h-24 animate-pulse"></div>
|
||||
<div
|
||||
v-else-if="paginatedItems.length === 0"
|
||||
class="universal-card flex h-24 items-center justify-center text-secondary"
|
||||
>
|
||||
No projects in queue.
|
||||
</div>
|
||||
<div v-for="(item, idx) in paginatedItems" :key="item.project.id ?? idx">
|
||||
<ModerationTechRevCard
|
||||
:item="item"
|
||||
:loading-issues="loadingIssues"
|
||||
:decompiled-sources="decompiledSources"
|
||||
@refetch="refetch"
|
||||
@load-file-sources="handleLoadFileSources"
|
||||
@mark-complete="handleMarkComplete"
|
||||
@show-malicious-summary="handleShowMaliciousSummary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="totalPages > 1" class="mt-4 flex justify-center">
|
||||
<Pagination
|
||||
:page="currentPage"
|
||||
:count="totalPages"
|
||||
@switch-page="(num) => goToPage(num, true)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MaliciousSummaryModal ref="maliciousSummaryModalRef" :unsafe-files="currentUnsafeFiles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -510,9 +510,7 @@
|
||||
class="universal-card recessed !mb-0 flex items-center justify-between"
|
||||
>
|
||||
<div class="flex gap-2">
|
||||
<CardIcon v-if="method.type === 'card'" class="h-8 w-8" />
|
||||
<CurrencyIcon v-else-if="method.type === 'cashapp'" class="h-8 w-8" />
|
||||
<PayPalIcon v-else-if="method.type === 'paypal'" class="h-8 w-8" />
|
||||
<component :is="getPaymentMethodIcon(method.type)" class="h-8 w-8" />
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="font-bold text-contrast">
|
||||
@@ -599,14 +597,11 @@
|
||||
<script setup>
|
||||
import {
|
||||
ArrowBigUpDashIcon,
|
||||
CardIcon,
|
||||
CheckCircleIcon,
|
||||
CurrencyIcon,
|
||||
EditIcon,
|
||||
HistoryIcon,
|
||||
ModrinthPlusIcon,
|
||||
MoreVerticalIcon,
|
||||
PayPalIcon,
|
||||
PlusIcon,
|
||||
RightArrowIcon,
|
||||
SpinnerIcon,
|
||||
@@ -622,6 +617,7 @@ import {
|
||||
commonMessages,
|
||||
ConfirmModal,
|
||||
CopyCode,
|
||||
getPaymentMethodIcon,
|
||||
injectNotificationManager,
|
||||
OverflowMenu,
|
||||
PurchaseModal,
|
||||
|
||||
Reference in New Issue
Block a user