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
2025-12-20 11:43:04 +00:00
committed by GitHub
parent 1e9e13aebb
commit 39f2b0ecb6
109 changed files with 6281 additions and 2017 deletions

View File

@@ -8,7 +8,10 @@
<div :class="['flex gap-2 items-start', (header || $slots.header) && 'flex-col']">
<div class="flex gap-2 items-start" :class="header || $slots.header ? 'w-full' : 'contents'">
<slot name="icon" :icon-class="['h-6 w-6 flex-none', iconClasses[type]]">
<component :is="icons[type]" :class="['h-6 w-6 flex-none', iconClasses[type]]" />
<component
:is="getSeverityIcon(type)"
:class="['h-6 w-6 flex-none', iconClasses[type]]"
/>
</slot>
<div v-if="header || $slots.header" class="font-semibold text-base">
<slot name="header">{{ header }}</slot>
@@ -25,7 +28,7 @@
</template>
<script setup lang="ts">
import { InfoIcon, IssuesIcon, XCircleIcon } from '@modrinth/assets'
import { getSeverityIcon } from '../../utils'
withDefaults(
defineProps<{
@@ -53,10 +56,4 @@ const iconClasses = {
warning: 'text-brand-orange',
critical: 'text-brand-red',
}
const icons = {
info: InfoIcon,
warning: IssuesIcon,
critical: XCircleIcon,
}
</script>

View File

@@ -69,6 +69,14 @@
<XIcon aria-hidden="true" /> {{ formatMessage(messages.closedLabel) }}
</template>
<!-- Technical review verdicts -->
<template v-else-if="type === 'safe'">
<ShieldCheckIcon aria-hidden="true" /> {{ formatMessage(messages.safeLabel) }}
</template>
<template v-else-if="type === 'unsafe'">
<BugIcon aria-hidden="true" /> {{ formatMessage(messages.unsafeLabel) }}
</template>
<!-- Other -->
<template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
</span>
@@ -78,6 +86,7 @@
import {
ArchiveIcon,
BoxIcon,
BugIcon,
CalendarIcon,
CheckIcon,
EyeOffIcon,
@@ -86,6 +95,7 @@ import {
LockIcon,
ModrinthIcon,
ScaleIcon,
ShieldCheckIcon,
UpdatedIcon,
XIcon,
} from '@modrinth/assets'
@@ -153,6 +163,10 @@ const messages = defineMessages({
id: 'omorphia.component.badge.label.returned',
defaultMessage: 'Returned',
},
safeLabel: {
id: 'omorphia.component.badge.label.safe',
defaultMessage: 'Pass',
},
scheduledLabel: {
id: 'omorphia.component.badge.label.scheduled',
defaultMessage: 'Scheduled',
@@ -165,6 +179,10 @@ const messages = defineMessages({
id: 'omorphia.component.badge.label.unlisted',
defaultMessage: 'Unlisted',
},
unsafeLabel: {
id: 'omorphia.component.badge.label.unsafe',
defaultMessage: 'Fail',
},
withheldLabel: {
id: 'omorphia.component.badge.label.withheld',
defaultMessage: 'Withheld',
@@ -204,6 +222,7 @@ defineProps<{
&.type--rejected,
&.type--returned,
&.type--failed,
&.type--unsafe,
&.red {
--badge-color: var(--color-red);
}
@@ -220,6 +239,7 @@ defineProps<{
&.type--admin,
&.type--processed,
&.type--approved-general,
&.type--safe,
&.green {
--badge-color: var(--color-green);
}

View File

@@ -1,29 +1,27 @@
<template>
<div
class="relative overflow-hidden rounded-xl border-[2px] border-solid border-divider shadow-lg"
:class="{ 'max-h-32': isCollapsed }"
>
<div class="relative overflow-hidden">
<div
class="px-4 pt-4"
:class="{
'content-disabled pb-16': isCollapsed,
'pb-4': !isCollapsed,
}"
class="collapsible-region-content"
:class="{ open: !collapsed }"
:style="{ '--collapsed-height': collapsedHeight }"
>
<slot />
<div :class="{ 'pointer-events-none select-none pb-16': collapsed }">
<slot />
</div>
</div>
<div
v-if="isCollapsed"
class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-button-bg"
></div>
v-if="collapsed"
class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent"
:class="gradientTo"
/>
<div class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
<ButtonStyled circular type="transparent">
<button class="flex items-center gap-1 text-xs" @click="toggleCollapsed">
<ExpandIcon v-if="isCollapsed" />
<button class="flex items-center gap-1 text-xs" @click="collapsed = !collapsed">
<ExpandIcon v-if="collapsed" />
<CollapseIcon v-else />
{{ isCollapsed ? expandText : collapseText }}
{{ collapsed ? expandText : collapseText }}
</button>
</ButtonStyled>
</div>
@@ -32,67 +30,51 @@
<script setup lang="ts">
import { CollapseIcon, ExpandIcon } from '@modrinth/assets'
import { ref } from 'vue'
import ButtonStyled from './ButtonStyled.vue'
const props = withDefaults(
withDefaults(
defineProps<{
initiallyCollapsed?: boolean
expandText?: string
collapseText?: string
collapsedHeight?: string
gradientTo?: string
}>(),
{
initiallyCollapsed: true,
expandText: 'Expand',
collapseText: 'Collapse',
collapsedHeight: '8rem',
gradientTo: 'to-surface-2',
},
)
const isCollapsed = ref(props.initiallyCollapsed)
function toggleCollapsed() {
isCollapsed.value = !isCollapsed.value
}
function setCollapsed(value: boolean) {
isCollapsed.value = value
}
defineExpose({
isCollapsed,
setCollapsed,
toggleCollapsed,
})
const collapsed = defineModel<boolean>('collapsed', { default: true })
</script>
<style lang="scss" scoped>
.content-disabled {
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
<style scoped>
.collapsible-region-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s linear;
}
:deep(*) {
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
:deep(button),
:deep(input),
:deep(textarea),
:deep(select),
:deep(a),
:deep([tabindex]) {
tabindex: -1 !important;
}
:deep(*:focus) {
outline: none !important;
@media (prefers-reduced-motion) {
.collapsible-region-content {
transition: none !important;
}
}
.collapsible-region-content.open {
grid-template-rows: 1fr;
}
.collapsible-region-content > div {
overflow: hidden;
min-height: var(--collapsed-height);
transition: min-height 0.3s linear;
}
.collapsible-region-content.open > div {
min-height: 0;
}
</style>

View File

@@ -4,7 +4,7 @@
ref="triggerRef"
role="button"
tabindex="0"
class="max-h-[36px] relative cursor-pointer flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left transition-all duration-200 text-button-text hover:bg-button-bgHover active:bg-button-bgActive"
class="relative cursor-pointer flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left transition-all duration-200 text-button-text hover:bg-button-bgHover active:bg-button-bgActive"
:class="[
triggerClasses,
{
@@ -129,7 +129,7 @@ import {
watch,
} from 'vue'
export interface DropdownOption<T> {
export interface ComboboxOption<T> {
value: T
label: string
icon?: Component
@@ -145,19 +145,19 @@ const DROPDOWN_VIEWPORT_MARGIN = 8
const DEFAULT_MAX_HEIGHT = 300
function isDropdownOption<T>(
opt: DropdownOption<T> | { type: 'divider' },
): opt is DropdownOption<T> {
opt: ComboboxOption<T> | { type: 'divider' },
): opt is ComboboxOption<T> {
return 'value' in opt
}
function isDivider<T>(opt: DropdownOption<T> | { type: 'divider' }): opt is { type: 'divider' } {
function isDivider<T>(opt: ComboboxOption<T> | { type: 'divider' }): opt is { type: 'divider' } {
return opt.type === 'divider'
}
const props = withDefaults(
defineProps<{
modelValue?: T
options: (DropdownOption<T> | { type: 'divider' })[]
options: (ComboboxOption<T> | { type: 'divider' })[]
placeholder?: string
disabled?: boolean
searchable?: boolean
@@ -187,7 +187,7 @@ const props = withDefaults(
const emit = defineEmits<{
'update:modelValue': [value: T]
select: [option: DropdownOption<T>]
select: [option: ComboboxOption<T>]
open: []
close: []
searchInput: [query: string]
@@ -204,6 +204,7 @@ const dropdownRef = ref<HTMLElement>()
const searchInputRef = ref<HTMLInputElement>()
const optionsContainerRef = ref<HTMLElement>()
const optionRefs = ref<(HTMLElement | null)[]>([])
const rafId = ref<number | null>(null)
const dropdownStyle = ref({
top: '0px',
@@ -225,9 +226,9 @@ const triggerClasses = computed(() => {
return classes
})
const selectedOption = computed<DropdownOption<T> | undefined>(() => {
const selectedOption = computed<ComboboxOption<T> | undefined>(() => {
return props.options.find(
(opt): opt is DropdownOption<T> => isDropdownOption(opt) && opt.value === props.modelValue,
(opt): opt is ComboboxOption<T> => isDropdownOption(opt) && opt.value === props.modelValue,
)
})
@@ -259,7 +260,7 @@ const filteredOptions = computed(() => {
const shouldRoundBottomCorners = computed(() => isOpen.value && openDirection.value === 'down')
const shouldRoundTopCorners = computed(() => isOpen.value && openDirection.value === 'up')
function getOptionClasses(item: DropdownOption<T> & { key: string }, index: number) {
function getOptionClasses(item: ComboboxOption<T> & { key: string }, index: number) {
return [
item.class,
{
@@ -368,11 +369,13 @@ async function openDropdown() {
setInitialFocus()
focusSearchInput()
startPositionTracking()
}
function closeDropdown() {
if (!isOpen.value) return
stopPositionTracking()
isOpen.value = false
searchQuery.value = ''
focusedIndex.value = -1
@@ -391,7 +394,7 @@ function handleTriggerClick() {
}
}
function handleOptionClick(option: DropdownOption<T>, index: number) {
function handleOptionClick(option: ComboboxOption<T>, index: number) {
if (option.disabled || option.type === 'divider') return
focusedIndex.value = index
@@ -514,6 +517,21 @@ function handleWindowResize() {
}
}
function startPositionTracking() {
function track() {
updateDropdownPosition()
rafId.value = requestAnimationFrame(track)
}
rafId.value = requestAnimationFrame(track)
}
function stopPositionTracking() {
if (rafId.value !== null) {
cancelAnimationFrame(rafId.value)
rafId.value = null
}
}
onClickOutside(
dropdownRef,
() => {
@@ -528,6 +546,7 @@ onMounted(() => {
onUnmounted(() => {
window.removeEventListener('resize', handleWindowResize)
stopPositionTracking()
})
watch(isOpen, (value) => {

View File

@@ -13,6 +13,7 @@ export { default as Checkbox } from './Checkbox.vue'
export { default as Chips } from './Chips.vue'
export { default as Collapsible } from './Collapsible.vue'
export { default as CollapsibleRegion } from './CollapsibleRegion.vue'
export type { ComboboxOption } from './Combobox.vue'
export { default as Combobox } from './Combobox.vue'
export { default as ContentPageHeader } from './ContentPageHeader.vue'
export { default as CopyCode } from './CopyCode.vue'

View File

@@ -1,9 +1,8 @@
<script setup lang="ts">
import { CardIcon, CurrencyIcon, PayPalIcon, UnknownIcon } from '@modrinth/assets'
import { useVIntl } from '@vintl/vintl'
import type Stripe from 'stripe'
import { commonMessages, paymentMethodMessages } from '../../utils'
import { commonMessages, getPaymentMethodIcon, paymentMethodMessages } from '../../utils'
const { formatMessage } = useVIntl()
defineProps<{
@@ -13,10 +12,7 @@ defineProps<{
<template>
<template v-if="'type' in method">
<CardIcon v-if="method.type === 'card'" class="size-[1.5em]" />
<CurrencyIcon v-else-if="method.type === 'cashapp'" class="size-[1.5em]" />
<PayPalIcon v-else-if="method.type === 'paypal'" class="size-[1.5em]" />
<UnknownIcon v-else class="size-[1.5em]" />
<component :is="getPaymentMethodIcon(method.type)" class="size-[1.5em]" />
<span v-if="method.type === 'card' && 'card' in method && method.card">
{{
formatMessage(commonMessages.paymentMethodCardDisplay, {

View File

@@ -8,12 +8,7 @@
iconClasses[variant],
]"
>
<IssuesIcon
v-if="variant === 'warning' || variant === 'error'"
aria-hidden="true"
class="w-6 h-6 flex-shrink-0"
/>
<InfoIcon v-if="variant === 'info'" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
<component :is="getSeverityIcon(variant)" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
<slot name="title" />
</div>
@@ -32,7 +27,7 @@
</template>
<script lang="ts" setup>
import { InfoIcon, IssuesIcon } from '@modrinth/assets'
import { getSeverityIcon } from '../../utils'
defineProps<{
variant: 'error' | 'warning' | 'info'

View File

@@ -3,22 +3,11 @@
</template>
<script setup lang="ts">
import {
ArchiveIcon,
CalendarIcon,
FileTextIcon,
GlobeIcon,
LinkIcon,
LockIcon,
UnknownIcon,
UpdatedIcon,
XIcon,
} from '@modrinth/assets'
import type { ProjectStatus } from '@modrinth/utils'
import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
import type { Component } from 'vue'
import { computed } from 'vue'
import { PROJECT_STATUS_ICONS } from '../../utils'
import Badge from '../base/SimpleBadge.vue'
const props = defineProps<{
@@ -28,76 +17,66 @@ const props = defineProps<{
const { formatMessage } = useVIntl()
const metadata = computed(() => ({
icon: statusMetadata[props.status]?.icon ?? statusMetadata.unknown.icon,
icon: PROJECT_STATUS_ICONS[props.status] ?? PROJECT_STATUS_ICONS.unknown,
formattedName: formatMessage(statusMetadata[props.status]?.message ?? props.status),
}))
const statusMetadata: Record<ProjectStatus, { icon?: Component; message: MessageDescriptor }> = {
const statusMetadata: Record<ProjectStatus, { message: MessageDescriptor }> = {
approved: {
icon: GlobeIcon,
message: defineMessage({
id: 'project.visibility.public',
defaultMessage: 'Public',
}),
},
unlisted: {
icon: LinkIcon,
message: defineMessage({
id: 'project.visibility.unlisted',
defaultMessage: 'Unlisted',
}),
},
withheld: {
icon: LinkIcon,
message: defineMessage({
id: 'project.visibility.unlisted-by-staff',
defaultMessage: 'Unlisted by staff',
}),
},
private: {
icon: LockIcon,
message: defineMessage({
id: 'project.visibility.private',
defaultMessage: 'Private',
}),
},
scheduled: {
icon: CalendarIcon,
message: defineMessage({
id: 'project.visibility.scheduled',
defaultMessage: 'Scheduled',
}),
},
draft: {
icon: FileTextIcon,
message: defineMessage({
id: 'project.visibility.draft',
defaultMessage: 'Draft',
}),
},
archived: {
icon: ArchiveIcon,
message: defineMessage({
id: 'project.visibility.archived',
defaultMessage: 'Archived',
}),
},
rejected: {
icon: XIcon,
message: defineMessage({
id: 'project.visibility.rejected',
defaultMessage: 'Rejected',
}),
},
processing: {
icon: UpdatedIcon,
message: defineMessage({
id: 'project.visibility.under-review',
defaultMessage: 'Under review',
}),
},
unknown: {
icon: UnknownIcon,
message: defineMessage({
id: 'project.visibility.unknown',
defaultMessage: 'Unknown',