main
import {
Alert,
ErrorPanel,
Modal,
modalInputClass,
modalLabelClass,
modalTextareaClass,
PanelNote,
} from '@app/components'
import { listSpaceMembers } from '@app/domains/issues/model'
import type { MergeMethod, Pull, PullGate, PullRef, ReviewerState } from '@app/domains/pulls/model'
import {
addAssignee,
attachLabel,
closePull,
deletePull,
detachLabel,
getPull,
getPullGate,
listAssignees,
listPullLabelOptions,
listPullLabels,
listRequestedReviewers,
lockPull,
mergePull,
pullPatchUrl,
refreshPullSummary,
removeAssignee,
removeRequestedReviewer,
reopenPull,
requestReviewers,
unlockPull,
updateBranchPull,
updatePull,
} from '@app/domains/pulls/model'
import { fetchConflictDetail } from '@app/domains/repo/model'
import type { MessageKey } from '@app/i18n'
import { t as tr, useT } from '@app/i18n'
import { fmtRelative, fmtTime, repoKey, useAsync } from '@app/lib'
import { Button } from '@app/ui'
import {
IconDownload as Download,
IconFileCode2 as FileCode2,
IconGitMerge as GitMerge,
IconListCheck as ListChecks,
IconLoader2 as Loader2,
IconMessages as MessagesSquare,
IconPencil as Pencil,
IconRotate as RotateCcw,
IconShieldCheck as ShieldCheck,
IconLockOpen as Unlock,
IconX as X,
} from '@tabler/icons-react'
import { useState } from 'react'
import { MERGE_METHOD_LABEL, MERGE_METHODS, REVIEWER_STATE_LABEL, TONE, userName } from '../model/meta'
import { ChecksTab } from './checks-tab'
import { CommitsTab } from './commits-tab'
import { Conversation } from './conversation'
import { FilesTab } from './files-tab'
import { Avatar, MergeableChip, PullStateBadge, SearchSelect, SideSection } from './parts'
export type PullSubTab = 'conversation' | 'files' | 'commits' | 'checks'
export interface PullDetailProps {
space: string
repo: string
pullRef: string
/** Repo write access (space owner / repo collaborator server-side). */
canWrite: boolean
ptab: PullSubTab
onPtabChange: (next: PullSubTab) => void
onBackToList: () => void
onOpenCommit: (sha: string) => void
}
const SUB_TABS: Array<{ id: PullSubTab; icon: typeof MessagesSquare }> = [
{ id: 'conversation', icon: MessagesSquare },
{ id: 'files', icon: FileCode2 },
{ id: 'commits', icon: GitMerge },
{ id: 'checks', icon: ListChecks },
]
const SUB_TAB_KEYS: Record<PullSubTab, MessageKey> = {
conversation: 'pull.detail.tab.conversation',
files: 'pull.tabs.files',
commits: 'pull.tabs.commits',
checks: 'pull.detail.tab.checks',
}
/** PR 详情页：头部/操作 + 子页签 + 侧栏。 */
export function PullDetail({
space,
repo,
pullRef,
canWrite,
ptab,
onPtabChange,
onBackToList,
onOpenCommit,
}: PullDetailProps) {
const { t } = useT()
const [tick, setTick] = useState(0)
const [focusFile, setFocusFile] = useState('')
/** 从文件变更跳转过来时要高亮的行号（0 表示不高亮）。 */
const [focusLine] = useState(0)
const [notice, setNotice] = useState<string | null>(null)
const [error, setError] = useState<string | null>(null)
const refObj: PullRef = { space, repo, pull: pullRef }
const pullState = useAsync(() => getPull(refObj), [space, repo, pullRef, tick], {
cacheKey: repoKey(space, repo, `pull:${pullRef}:${tick}`),
})
const gateState = useAsync(() => getPullGate(refObj), [space, repo, pullRef, tick])
const pull = pullState.data
const gate = gateState.data
const failure = pullState.error as { code?: number; message?: string } | undefined
const refresh = () => setTick((t) => t + 1)
async function run(label: string, fn: () => Promise<unknown>) {
setNotice(null)
setError(null)
try {
await fn()
setNotice(t('pull.detail.complete', { label }))
refresh()
} catch (f) {
setError(
t('pull.detail.actionFailed', { label, reason: f instanceof Error ? f.message : t('common.state.unknown') }),
)
}
}
if (pullState.loading && !pull) return <PanelNote text={t('pull.detail.loading')} />
if (!pull) {
return failure ? (
<ErrorPanel
status={failure.code ?? 0}
what={t('pull.detail.errorPull')}
note={failure.message}
onRetry={refresh}
/>
) : (
<PanelNote text={t('pull.detail.notFound')} />
)
}
return (
<div className="flex flex-col gap-4 lg:flex-row lg:items-start">
<div className="min-w-0 flex-1">
<div className="mb-2 flex flex-wrap items-center gap-2 text-[12.5px] text-shell-ink-muted">
<button type="button" onClick={onBackToList} className="hover:underline">
{t('pull.detail.crumb')}
</button>
<span aria-hidden>/</span>
<span className="font-mono">#{pull.number}</span>
</div>
<div className="mb-2 flex flex-wrap items-start gap-3">
<h2 className="min-w-0 flex-1 text-[20px] font-semibold leading-7 break-words">{pull.title}</h2>
<PullStateBadge pull={pull} />
</div>
<p className="mb-3 text-[12.5px] text-shell-ink-muted">
<span className="font-medium text-shell-ink">{userName(pull.author)}</span>{' '}
<code className="rounded bg-shell-active/70 px-1 py-0.5 font-mono text-[11.5px]">
{t('pull.detail.requestsMerge', { head: pull.head.branch, base: pull.base.branch })}
</code>
<span className="mx-1.5">·</span>
{t('pull.detail.updatedAt', { time: fmtRelative(pull.updated_at ?? pull.created_at) })}
<MergeableChip state={pull.mergeable_state} />
{pull.locked ? (
<span className={`ml-2 rounded px-1.5 py-0.5 text-[11.5px] ${TONE.amber}`}>{t('pull.detail.locked')}</span>
) : null}
{pull.auto_merge ? (
<span className={`ml-2 rounded px-1.5 py-0.5 text-[11.5px] ${TONE.green}`}>
{t('pull.detail.autoMergeOn')}
</span>
) : null}
</p>
{notice ? <Alert tone="success">{notice}</Alert> : null}
{error ? <Alert tone="error">{error}</Alert> : null}
<div className="mb-3 flex flex-wrap items-center gap-1.5 border-b border-shell-hairline pb-3">
{SUB_TABS.map((tab) => {
const Icon = tab.icon
return (
<button
key={tab.id}
type="button"
aria-current={ptab === tab.id ? 'page' : undefined}
onClick={() => onPtabChange(tab.id)}
className={`inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-[13px] transition-colors ${
ptab === tab.id
? 'bg-shell-active font-semibold text-shell-ink'
: 'text-shell-ink-muted hover:text-shell-ink'
}`}
>
<Icon className="h-3.5 w-3.5" aria-hidden />
{t(SUB_TAB_KEYS[tab.id])}
{tab.id === 'files' && pull.files_changed ? ` (${pull.files_changed})` : ''}
{tab.id === 'commits' && pull.commits_ahead ? ` (${pull.commits_ahead})` : ''}
</button>
)
})}
</div>
{ptab === 'conversation' ? (
<Conversation
refObj={refObj}
pull={pull}
onChanged={refresh}
beforeComposer={
pull.state === 'open' && canWrite ? (
<MergeBox
refObj={refObj}
pull={pull}
gate={gate}
analyzing={gateState.loading && !gateState.data}
onChanged={refresh}
onError={setError}
/>
) : null
}
onOpenFile={(path) => {
setFocusFile(path)
onPtabChange('files')
}}
/>
) : null}
{ptab === 'files' ? (
<FilesTab
key={`${pull.head.sha}:${focusFile}:${focusLine}`}
refObj={refObj}
headSha={pull.head.sha}
focusPath={focusFile}
focusLine={focusLine}
onChanged={refresh}
/>
) : null}
{ptab === 'commits' ? <CommitsTab refObj={refObj} onOpenCommit={onOpenCommit} /> : null}
{ptab === 'checks' ? <ChecksTab refObj={refObj} headSha={pull.head.sha} /> : null}
</div>
<div className="w-full shrink-0 space-y-3 lg:w-[300px]">
{canWrite ? (
<SideSection title={t('pull.detail.actions')}>
<div className="flex flex-wrap gap-1.5">
{canWrite && pull.state === 'open' ? (
<Button
variant="secondary"
className="h-7 gap-1 text-[12px]"
onClick={() => void run(t('pull.detail.close'), () => closePull(refObj))}
>
<X className="h-3 w-3" aria-hidden />
{t('pull.detail.close')}
</Button>
) : canWrite && pull.state === 'closed' ? (
<Button
variant="secondary"
className="h-7 gap-1 text-[12px]"
onClick={() => void run(t('pull.detail.reopen'), () => reopenPull(refObj))}
>
<RotateCcw className="h-3 w-3" aria-hidden />
{t('pull.detail.reopen')}
</Button>
) : null}
{canWrite ? <EditButton refObj={refObj} pull={pull} onChanged={refresh} onError={setError} /> : null}
{canWrite ? (
<Button
variant="secondary"
className="h-7 gap-1 text-[12px]"
onClick={() =>
void run(pull.locked ? t('pull.detail.unlock') : t('pull.detail.lock'), () =>
pull.locked ? unlockPull(refObj) : lockPull(refObj),
)
}
>
{pull.locked ? (
<Unlock className="h-3 w-3" aria-hidden />
) : (
<ShieldCheck className="h-3 w-3" aria-hidden />
)}
{pull.locked ? t('pull.detail.unlockDiscussion') : t('pull.detail.lockDiscussion')}
</Button>
) : null}
{canWrite ? (
<Button
variant="secondary"
className="h-7 gap-1 text-[12px]"
onClick={() => void run(t('pull.detail.refreshSummary'), () => refreshPullSummary(refObj))}
>
<RotateCcw className="h-3 w-3" aria-hidden />
{t('pull.detail.refreshSummary')}
</Button>
) : null}
<Button
variant="secondary"
className="h-7 gap-1 text-[12px]"
onClick={() => window.open(pullPatchUrl(refObj), '_blank', 'noopener')}
>
<Download className="h-3 w-3" aria-hidden />
{t('pull.detail.patch')}
</Button>
{canWrite ? (
<Button
variant="ghost"
className="h-7 text-[12px] text-[#b42318]"
onClick={() => {
if (!window.confirm(t('pull.detail.deleteConfirm', { number: pull.number }))) return
void (async () => {
try {
await deletePull(refObj)
onBackToList()
} catch (f) {
setError(
t('pull.detail.deleteFailed', {
reason: f instanceof Error ? f.message : t('common.state.unknown'),
}),
)
}
})()
}}
>
{t('common.action.delete')}
</Button>
) : null}
</div>
</SideSection>
) : null}
<ReviewersPanel refObj={refObj} pull={pull} tick={tick} onChanged={refresh} onError={setError} />
<AssigneesPanel refObj={refObj} pull={pull} tick={tick} onChanged={refresh} onError={setError} />
<LabelsPanel refObj={refObj} tick={tick} onChanged={refresh} onError={setError} />
<SideSection title={t('pull.detail.stats')}>
<dl className="space-y-1 text-[12.5px] text-shell-ink-muted">
<div className="flex justify-between">
<dt>{t('pull.detail.aheadBehind')}</dt>
<dd className="font-mono text-shell-ink">
{pull.commits_ahead ?? '—'} / {pull.commits_behind ?? '—'}
</dd>
</div>
<div className="flex justify-between">
<dt>{t('pull.detail.filesChanged')}</dt>
<dd className="font-mono text-shell-ink">{pull.files_changed}</dd>
</div>
<div className="flex justify-between">
<dt>{t('pull.detail.lines')}</dt>
<dd className="font-mono">
<span className="text-[#1a7f37]">+{pull.additions}</span>{' '}
<span className="text-[#b42318]">−{pull.deletions}</span>
</dd>
</div>
<div className="flex justify-between">
<dt>{t('pull.detail.created')}</dt>
<dd title={fmtTime(pull.created_at)}>{fmtRelative(pull.created_at)}</dd>
</div>
{pull.merged_at ? (
<div className="flex justify-between">
<dt>{t('pull.detail.mergedAt')}</dt>
<dd>{fmtRelative(pull.merged_at)}</dd>
</div>
) : null}
{pull.merged_commit_sha ? (
<div className="flex justify-between">
<dt>{t('pull.detail.mergeCommit')}</dt>
<dd className="font-mono">{pull.merged_commit_sha.slice(0, 10)}</dd>
</div>
) : null}
</dl>
</SideSection>
</div>
</div>
)
}
/* ------------------------------------------------------------ merge box */
function MergeBox({
refObj,
pull,
gate,
analyzing,
onChanged,
onError,
}: {
refObj: PullRef
pull: Pull
gate: PullGate | null | undefined
/** 合并冲突分析尚未完成：先显示“分析中”，不提前给出可合并结论。 */
analyzing: boolean
onChanged: () => void
onError: (message: string) => void
}) {
const { t } = useT()
const [method, setMethod] = useState<MergeMethod>(pull.merge_method || 'merge')
const [title, setTitle] = useState('')
const [message, setMessage] = useState('')
const [deleteAfter, setDeleteAfter] = useState(false)
const [busy, setBusy] = useState(false)
const g = gate?.gate
const conflicts = gate?.conflicts ?? pull.conflicts ?? []
const blocked = !g?.allowed && g !== null && g !== undefined
const stale = (pull.commits_behind ?? 0) > 0
async function merge() {
setBusy(true)
try {
const outcome = await mergePull(refObj, {
method,
title: title.trim() || null,
message: message.trim() || null,
delete_branch_after_merge: deleteAfter,
expect_head_sha: pull.head.sha,
})
onChanged()
window.alert(t('pull.detail.mergeSucceeded', { sha: outcome.result.new_sha.slice(0, 10) }))
} catch (f) {
onError(t('pull.detail.mergeFailed', { reason: f instanceof Error ? f.message : t('common.state.unknown') }))
} finally {
setBusy(false)
}
}
return (
<section className="rounded-xl border border-shell-hairline bg-shell-surface p-4">
<h4 className="mb-2 text-[13px] font-semibold text-shell-ink">{t('pull.detail.merge')}</h4>
{analyzing ? (
<p className="flex items-center gap-1.5 text-[12.5px] text-shell-ink-muted">
<Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
{t('pull.detail.analyzingMerge')}
</p>
) : pull.is_draft ? (
<p className="text-[12.5px] text-[#8a6100]">{t('pull.detail.draftMergeHint')}</p>
) : conflicts.length ? (
<div className="text-[12.5px] text-[#b42318]">
{t('pull.detail.conflicts', { count: conflicts.length })}
<ul className="mt-1 max-h-32 space-y-0.5 overflow-y-auto">
{conflicts.map((path) => (
<li key={path}>
<ConflictFileButton
space={refObj.space}
repo={refObj.repo}
base={pull.base.branch}
head={pull.head.branch}
path={path}
/>
</li>
))}
</ul>
</div>
) : g && !g.allowed ? (
<p className="text-[12.5px] text-[#8a6100]">
{t('pull.detail.blockedByRules', {
reasons:
g.reasons.join('; ') ||
t('pull.detail.needsApprovals', { required: g.required_approvals, current: g.approvals }),
})}
{g.bypassed ? t('pull.detail.canBypass') : ''}
</p>
) : stale ? (
<p className="text-[12.5px] text-[#8a6100]">
{t('pull.detail.staleBranch', { count: pull.commits_behind ?? 0 })}
</p>
) : (
<p className="text-[12.5px] text-[#1a7f37]">
{t('pull.detail.readyToMerge')}
{g ? t('pull.detail.approvals', { current: g.approvals, required: g.required_approvals }) : ''}
</p>
)}
{g?.outdated && stale ? (
<Button
variant="secondary"
className="mt-2 h-7 w-full text-[12px]"
disabled={busy}
onClick={() => {
void (async () => {
try {
await updateBranchPull(refObj)
onChanged()
} catch (f) {
onError(
t('pull.detail.syncFailed', { reason: f instanceof Error ? f.message : t('common.state.unknown') }),
)
}
})()
}}
>
{t('pull.detail.syncBranch')}
</Button>
) : null}
<div className="mt-2 space-y-2">
<label className="block">
<span className={modalLabelClass}>{t('pull.mergeMethod')}</span>
<select
className={modalInputClass}
value={method}
onChange={(event) => setMethod(event.target.value as MergeMethod)}
>
{MERGE_METHODS.map((value) => (
<option key={value} value={value}>
{MERGE_METHOD_LABEL[value]}
</option>
))}
</select>
</label>
<input
className={modalInputClass}
placeholder={t('pull.detail.mergeTitlePlaceholder')}
value={title}
onChange={(event) => setTitle(event.target.value)}
/>
<textarea
className={modalTextareaClass}
rows={2}
placeholder={t('pull.detail.mergeMessagePlaceholder')}
value={message}
onChange={(event) => setMessage(event.target.value)}
/>
<label className="flex items-center gap-2 text-[12.5px]">
<input type="checkbox" checked={deleteAfter} onChange={(event) => setDeleteAfter(event.target.checked)} />
{t('pull.detail.deleteBranchAfter')}
</label>
<Button
className="h-8 w-full gap-1 text-[13px]"
disabled={busy || analyzing || pull.is_draft || conflicts.length > 0 || blocked || stale}
onClick={() => void merge()}
>
<GitMerge className="h-3.5 w-3.5" aria-hidden />
{busy ? t('pull.detail.merging') : t('pull.detail.merge')}
</Button>
<label className="flex items-center gap-2 text-[12.5px] text-shell-ink-muted">
<input
type="checkbox"
checked={pull.auto_merge}
onChange={(event) => {
void (async () => {
try {
await updatePull(refObj, { auto_merge: event.target.checked })
onChanged()
} catch (f) {
onError(
t('pull.detail.autoMergeFailed', {
reason: f instanceof Error ? f.message : t('common.state.unknown'),
}),
)
}
})()
}}
/>
{t('pull.detail.autoMerge')}
</label>
</div>
</section>
)
}
function ConflictFileButton({
space,
repo,
base,
head,
path,
}: {
space: string
repo: string
base: string
head: string
path: string
}) {
const [detail, setDetail] = useState<string | null | 'loading'>(null)
return (
<>
<button
type="button"
className="block max-w-full truncate text-left font-mono text-[12px] underline underline-offset-2 hover:brightness-125"
title={tr('pull.detail.viewConflict')}
onClick={() => {
setDetail('loading')
void fetchConflictDetail(space, repo, base, head, path)
.then((d) => setDetail(d.content ?? tr('pull.detail.noConflictText')))
.catch(() => setDetail(null))
}}
>
{path}
</button>
{detail === null ? null : (
<Modal
title={tr('pull.detail.conflictContent', { path })}
open
width="max-w-[760px]"
onClose={() => setDetail(null)}
footer={
<Button variant="ghost" onClick={() => setDetail(null)}>
{tr('common.action.close')}
</Button>
}
>
{detail === 'loading' ? (
<p className="text-[12.5px] text-shell-ink-muted">{tr('pull.detail.loadingConflict')}</p>
) : (
<pre className="max-h-[60vh] overflow-auto rounded-lg border border-shell-hairline bg-shell-field p-3 font-mono text-[11.5px] leading-5">
{detail}
</pre>
)}
</Modal>
)}
</>
)
}
/* ---------------------------------------------------------- edit dialog */
function EditButton({
refObj,
pull,
onChanged,
onError,
}: {
refObj: PullRef
pull: Pull
onChanged: () => void
onError: (m: string) => void
}) {
const { t } = useT()
const [open, setOpen] = useState(false)
const [title, setTitle] = useState(pull.title)
const [body, setBody] = useState(pull.body)
const [draft, setDraft] = useState(pull.is_draft)
const [busy, setBusy] = useState(false)
async function save() {
setBusy(true)
try {
await updatePull(refObj, { title: title.trim() || undefined, body, draft })
setOpen(false)
onChanged()
} catch (f) {
onError(t('pull.detail.updateFailed', { reason: f instanceof Error ? f.message : t('common.state.unknown') }))
} finally {
setBusy(false)
}
}
return (
<>
<Button
variant="secondary"
className="h-7 gap-1 text-[12px]"
onClick={() => {
setTitle(pull.title)
setBody(pull.body)
setDraft(pull.is_draft)
setOpen(true)
}}
>
<Pencil className="h-3 w-3" aria-hidden />
{t('issue.board.edit')}
</Button>
{open ? (
<Modal
title={t('pull.detail.editNumber', { number: pull.number })}
open
onClose={() => setOpen(false)}
footer={
<>
<Button variant="ghost" onClick={() => setOpen(false)}>
{t('common.action.cancel')}
</Button>
<Button disabled={busy} onClick={() => void save()}>
{t('common.action.save')}
</Button>
</>
}
>
<label className="block">
<span className={modalLabelClass}>{t('issue.board.form.title')}</span>
<input className={modalInputClass} value={title} onChange={(event) => setTitle(event.target.value)} />
</label>
<label className="block">
<span className={modalLabelClass}>{t('pull.description')}</span>
<textarea
className={modalTextareaClass}
rows={7}
value={body}
onChange={(event) => setBody(event.target.value)}
/>
</label>
<label className="flex items-center gap-2 text-[13px]">
<input type="checkbox" checked={draft} onChange={(event) => setDraft(event.target.checked)} />
{t('pull.detail.draftCheckbox')}
</label>
</Modal>
) : null}
</>
)
}
/* ------------------------------------------------------------ side panels */
function ReviewersPanel({
refObj,
pull,
tick,
onChanged,
onError,
}: {
refObj: PullRef
pull: Pull
tick: number
onChanged: () => void
onError: (m: string) => void
}) {
const { t } = useT()
const [required, setRequired] = useState(true)
const reviewers = useAsync(() => listRequestedReviewers(refObj), [refObj.space, refObj.repo, refObj.pull, tick])
const rows = reviewers.data ?? []
const members = useAsync(() => listSpaceMembers(refObj.space), [refObj.space])
const memberOptions = (members.data?.items ?? [])
.map((row) => row.user)
.filter((user): user is NonNullable<typeof user> => Boolean(user))
.filter((user) => !rows.some((reviewer) => reviewer.user?.username === user.username))
.map((user) => ({
value: user.username,
label: user.display_name || user.username,
hint: `@${user.username}`,
icon: <Avatar user={user} size={16} />,
}))
async function add(name: string) {
try {
await requestReviewers(refObj, [name], required)
onChanged()
} catch (f) {
onError(
t('pull.detail.requestReviewFailed', { reason: f instanceof Error ? f.message : t('common.state.unknown') }),
)
throw f
}
}
return (
<SideSection
title={`${t('pull.detail.reviewers')}${rows.length ? ` (${rows.length})` : ''}`}
action={
<label className="flex items-center gap-1 text-[11.5px] text-shell-ink-muted">
<input type="checkbox" checked={required} onChange={(event) => setRequired(event.target.checked)} />
{t('pull.detail.required')}
</label>
}
>
{rows.length ? (
<ul className="space-y-1.5">
{rows.map((row) => (
<li key={row.id} className="flex items-center gap-2 text-[13px]">
<Avatar user={row.user} size={20} />
<span className="min-w-0 flex-1 truncate">{userName(row.user)}</span>
<span className="text-[11.5px] text-shell-ink-muted">{reviewerStateLabel(row.state)}</span>
{row.state === 'requested' && pull.state === 'open' ? (
row.user ? (
<button
type="button"
aria-label={t('pull.detail.remove', { name: userName(row.user) })}
className="text-shell-ink-muted hover:text-[#b42318]"
onClick={() =>
void removeRequestedReviewer(refObj, row.user?.user_id ?? 0)
.then(onChanged)
.catch(() => undefined)
}
>
×
</button>
) : null
) : null}
</li>
))}
</ul>
) : (
<p className="text-[12.5px] text-shell-ink-muted">{t('pull.detail.noReviewers')}</p>
)}
{pull.state === 'open' ? (
<SearchSelect
placeholder={t('pull.detail.reviewRequestPlaceholder')}
options={memberOptions}
emptyText={t('pull.detail.pickNoMatch')}
onSelect={(value) => void add(value).catch(() => undefined)}
/>
) : null}
</SideSection>
)
}
function reviewerStateLabel(state: ReviewerState | string): string {
return REVIEWER_STATE_LABEL[state as ReviewerState] ?? state
}
function AssigneesPanel({
refObj,
pull,
tick,
onChanged,
onError,
}: {
refObj: PullRef
pull: Pull
tick: number
onChanged: () => void
onError: (m: string) => void
}) {
const { t } = useT()
const assignees = useAsync(() => listAssignees(refObj), [refObj.space, refObj.repo, refObj.pull, tick])
const rows = assignees.data ?? []
const members = useAsync(() => listSpaceMembers(refObj.space), [refObj.space])
const memberOptions = (members.data?.items ?? [])
.map((row) => row.user)
.filter((user): user is NonNullable<typeof user> => Boolean(user))
.filter((user) => !rows.some((assignee) => assignee.user?.username === user.username))
.map((user) => ({
value: user.username,
label: user.display_name || user.username,
hint: `@${user.username}`,
icon: <Avatar user={user} size={16} />,
}))
return (
<SideSection title={`${t('pull.detail.assignees')}${rows.length ? ` (${rows.length})` : ''}`}>
{rows.length ? (
<ul className="space-y-1.5">
{rows.map((row) => (
<li key={row.id} className="flex items-center gap-2 text-[13px]">
<Avatar user={row.user} size={20} />
<span className="min-w-0 flex-1 truncate">{userName(row.user)}</span>
{pull.state === 'open' ? (
<button
type="button"
aria-label={t('pull.detail.remove', { name: userName(row.user) })}
className="text-shell-ink-muted hover:text-[#b42318]"
onClick={() =>
void removeAssignee(refObj, row.user?.username ?? String(row.user?.user_id ?? ''))
.then(onChanged)
.catch(() => undefined)
}
>
×
</button>
) : null}
</li>
))}
</ul>
) : (
<p className="text-[12.5px] text-shell-ink-muted">{t('pull.detail.noAssignees')}</p>
)}
{pull.state === 'open' ? (
<SearchSelect
placeholder={t('pull.detail.assigneePlaceholder')}
options={memberOptions}
emptyText={t('pull.detail.pickNoMatch')}
onSelect={(value) =>
void (async () => {
try {
await addAssignee(refObj, value)
onChanged()
} catch (f) {
onError(
t('pull.detail.addAssigneeFailed', {
reason: f instanceof Error ? f.message : t('common.state.unknown'),
}),
)
}
})()
}
/>
) : null}
</SideSection>
)
}
function LabelsPanel({
refObj,
tick,
onChanged,
onError,
}: {
refObj: PullRef
tick: number
onChanged: () => void
onError: (m: string) => void
}) {
const { t } = useT()
const labels = useAsync(() => listPullLabels(refObj), [refObj.space, refObj.repo, refObj.pull, tick])
const rows = labels.data ?? []
const candidates = useAsync(() => listPullLabelOptions(refObj.space, refObj.repo), [refObj.space, refObj.repo, tick])
const labelOptions = (candidates.data ?? [])
.filter((label) => !rows.some((bound) => bound.id === label.id))
.map((label) => ({ value: label.id, label: label.name, color: label.color }))
return (
<SideSection title={t('issue.board.labelsField')}>
{rows.length ? (
<div className="flex flex-wrap gap-1.5">
{rows.map((label) => (
<LabelPillInline
key={label.id}
name={label.name}
color={label.color}
onRemove={() =>
void detachLabel(refObj, label.id)
.then(onChanged)
.catch(() => undefined)
}
/>
))}
</div>
) : (
<p className="text-[12.5px] text-shell-ink-muted">{t('pull.detail.noLabels')}</p>
)}
<SearchSelect
placeholder={t('pull.detail.labelPlaceholder')}
options={labelOptions}
emptyText={t('pull.detail.pickNoMatch')}
onSelect={(value) =>
void (async () => {
try {
await attachLabel(refObj, value)
onChanged()
} catch (f) {
onError(
t('pull.detail.attachLabelFailed', {
reason: f instanceof Error ? f.message : t('common.state.unknown'),
}),
)
}
})()
}
/>
</SideSection>
)
}
function LabelPillInline({ name, color, onRemove }: { name: string; color?: string | null; onRemove: () => void }) {
const { t } = useT()
return (
<span
className="inline-flex items-center gap-1 rounded-full border border-shell-hairline px-2 py-0.5 text-[11.5px]"
style={color ? { backgroundColor: `${color}22`, borderColor: color } : undefined}
>
{name}
<button
type="button"
aria-label={t('issue.board.removeLabel', { name })}
onClick={onRemove}
className="text-shell-ink-muted hover:text-shell-ink"
>
×
</button>
</span>
)
}