413 lines
15 KiB
TypeScript
413 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
|
|
import { ExternalLink, Loader2, MessageSquarePlus, Pencil, XCircle } from "lucide-react";
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Markdown } from "@/components/atoms/Markdown";
|
|
import {
|
|
getForgejoIssue,
|
|
type ForgejoIssue,
|
|
type ForgejoIssueDetail,
|
|
} from "@/lib/api-forgejo";
|
|
import { CloseForgejoIssueDialog } from "@/components/git/CloseForgejoIssueDialog";
|
|
import { EditForgejoIssueDialog } from "@/components/git/EditForgejoIssueDialog";
|
|
import { PostForgejoCommentDialog } from "@/components/git/PostForgejoCommentDialog";
|
|
|
|
type ForgejoIssueDetailDialogProps = {
|
|
issue: ForgejoIssue | null;
|
|
repositoryName: string;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
onRefresh?: () => void;
|
|
canClose?: boolean;
|
|
};
|
|
|
|
const formatDateTime = (value: string | null | undefined): string => {
|
|
if (!value) return "—";
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return value;
|
|
return date.toLocaleString(undefined, {
|
|
dateStyle: "medium",
|
|
timeStyle: "short",
|
|
});
|
|
};
|
|
|
|
const objectList = (value: unknown): Record<string, unknown>[] => {
|
|
if (!Array.isArray(value)) return [];
|
|
return value.filter(
|
|
(item): item is Record<string, unknown> =>
|
|
typeof item === "object" && item !== null,
|
|
);
|
|
};
|
|
|
|
const asString = (value: unknown): string | null =>
|
|
typeof value === "string" && value.trim() ? value : null;
|
|
|
|
export function ForgejoIssueDetailDialog({
|
|
issue,
|
|
repositoryName,
|
|
open,
|
|
onOpenChange,
|
|
onRefresh,
|
|
canClose = false,
|
|
}: ForgejoIssueDetailDialogProps) {
|
|
const [detail, setDetail] = useState<ForgejoIssueDetail | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [activeTab, setActiveTab] = useState("overview");
|
|
|
|
const [isCommentDialogOpen, setIsCommentDialogOpen] = useState(false);
|
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
|
const [isCloseIssueDialogOpen, setIsCloseIssueDialogOpen] = useState(false);
|
|
|
|
const loadDetail = (id: string) => {
|
|
let cancelled = false;
|
|
setIsLoading(true);
|
|
setError(null);
|
|
(async () => {
|
|
try {
|
|
const result = await getForgejoIssue(id);
|
|
if (!cancelled) setDetail(result);
|
|
} catch (err) {
|
|
if (!cancelled)
|
|
setError(
|
|
err instanceof Error
|
|
? err.message
|
|
: "Could not load issue details from Pipeline.",
|
|
);
|
|
} finally {
|
|
if (!cancelled) setIsLoading(false);
|
|
}
|
|
})();
|
|
return () => { cancelled = true; };
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!open || !issue) return;
|
|
return loadDetail(issue.id);
|
|
}, [issue, open]);
|
|
|
|
const comments = useMemo(
|
|
() => objectList(detail?.forgejo_comments_payload),
|
|
[detail?.forgejo_comments_payload],
|
|
);
|
|
const timeline = useMemo(
|
|
() => objectList(detail?.forgejo_timeline_payload),
|
|
[detail?.forgejo_timeline_payload],
|
|
);
|
|
const reactions = useMemo(
|
|
() => objectList(detail?.forgejo_reactions_payload),
|
|
[detail?.forgejo_reactions_payload],
|
|
);
|
|
|
|
if (!issue) return null;
|
|
|
|
const active = detail ?? issue;
|
|
const body = detail?.body ?? issue.body ?? issue.body_preview ?? "";
|
|
const stateVariant = active.state === "open" ? "success" : "default";
|
|
|
|
const handleCloseIssueSuccess = () => {
|
|
if (detail) setDetail({ ...detail, state: "closed" });
|
|
if (issue) loadDetail(issue.id);
|
|
onRefresh?.();
|
|
};
|
|
|
|
const handleCommentSuccess = () => {
|
|
if (issue) loadDetail(issue.id);
|
|
onRefresh?.();
|
|
};
|
|
|
|
const handleEditSuccess = (updated: {
|
|
title: string;
|
|
body: string | null;
|
|
state: string;
|
|
}) => {
|
|
if (detail) {
|
|
setDetail({
|
|
...detail,
|
|
title: updated.title,
|
|
body: updated.body,
|
|
state: updated.state,
|
|
});
|
|
}
|
|
if (issue) loadDetail(issue.id);
|
|
onRefresh?.();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-4xl">
|
|
<DialogHeader>
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="space-y-2">
|
|
<DialogTitle className="break-words text-base sm:text-lg">
|
|
{active.title}
|
|
</DialogTitle>
|
|
<DialogDescription className="flex flex-wrap items-center gap-2 text-xs sm:text-sm">
|
|
<span className="font-medium text-strong">
|
|
{repositoryName}
|
|
</span>
|
|
<span className="font-mono">
|
|
#{active.forgejo_issue_number}
|
|
</span>
|
|
<Badge variant={stateVariant}>{active.state}</Badge>
|
|
<span>Opened {formatDateTime(active.forgejo_created_at)}</span>
|
|
<span>Updated {formatDateTime(active.forgejo_updated_at)}</span>
|
|
</DialogDescription>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
|
|
onClick={() => setIsEditDialogOpen(true)}
|
|
>
|
|
<Pencil className="h-3.5 w-3.5" />
|
|
Edit
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-9 gap-2 rounded-xl px-3 text-xs font-semibold"
|
|
onClick={() => {
|
|
setActiveTab("comments");
|
|
setIsCommentDialogOpen(true);
|
|
}}
|
|
>
|
|
<MessageSquarePlus className="h-3.5 w-3.5" />
|
|
Comment
|
|
</Button>
|
|
{canClose && active.state === "open" ? (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-9 gap-2 rounded-xl border-[color:rgba(248,113,113,0.45)] px-3 text-xs font-semibold text-[color:var(--danger)] hover:bg-[color:rgba(248,113,113,0.08)]"
|
|
onClick={() => setIsCloseIssueDialogOpen(true)}
|
|
>
|
|
<XCircle className="h-3.5 w-3.5" />
|
|
Close Issue
|
|
</Button>
|
|
) : null}
|
|
<a
|
|
href={active.html_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex h-9 items-center gap-2 rounded-xl border border-[color:var(--border)] px-3 text-xs font-semibold text-muted transition hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]"
|
|
>
|
|
Open in Forgejo
|
|
<ExternalLink className="h-3.5 w-3.5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
{isLoading ? (
|
|
<div className="flex items-center gap-2 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-sm text-muted">
|
|
<Loader2 className="h-4 w-4 animate-spin text-[color:var(--accent)]" />
|
|
Loading issue details…
|
|
</div>
|
|
) : null}
|
|
|
|
{error ? (
|
|
<div className="rounded-xl border border-[color:rgba(248,113,113,0.35)] bg-[color:rgba(248,113,113,0.08)] p-3 text-sm text-[color:var(--danger)]">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList>
|
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
|
<TabsTrigger value="comments">
|
|
Comments ({comments.length})
|
|
</TabsTrigger>
|
|
<TabsTrigger value="timeline">
|
|
Timeline ({timeline.length})
|
|
</TabsTrigger>
|
|
<TabsTrigger value="reactions">
|
|
Reactions ({reactions.length})
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="overview">
|
|
<div className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4">
|
|
{body ? (
|
|
<Markdown content={body} variant="comment" />
|
|
) : (
|
|
<p className="text-sm text-muted">No issue body provided.</p>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="comments">
|
|
<div className="space-y-3">
|
|
{comments.length === 0 ? (
|
|
<div className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-sm text-muted">
|
|
No comments yet.{" "}
|
|
<button
|
|
type="button"
|
|
className="text-[color:var(--accent)] underline-offset-2 hover:underline"
|
|
onClick={() => setIsCommentDialogOpen(true)}
|
|
>
|
|
Post the first one.
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{comments.map((comment, idx) => {
|
|
const login =
|
|
asString(
|
|
comment.user &&
|
|
(comment.user as Record<string, unknown>).login,
|
|
) ?? "Unknown";
|
|
const bodyText = asString(comment.body) ?? "";
|
|
return (
|
|
<article
|
|
key={String(comment.id ?? idx)}
|
|
className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4"
|
|
>
|
|
<div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-muted">
|
|
<span className="font-medium text-strong">
|
|
{login}
|
|
</span>
|
|
<span>
|
|
{formatDateTime(asString(comment.created_at))}
|
|
</span>
|
|
</div>
|
|
{bodyText ? (
|
|
<Markdown content={bodyText} variant="comment" />
|
|
) : (
|
|
<p className="text-sm text-muted">
|
|
No comment text.
|
|
</p>
|
|
)}
|
|
</article>
|
|
);
|
|
})}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full gap-2"
|
|
onClick={() => setIsCommentDialogOpen(true)}
|
|
>
|
|
<MessageSquarePlus className="h-4 w-4" />
|
|
Post a comment
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="timeline">
|
|
<div className="space-y-2">
|
|
{timeline.length === 0 ? (
|
|
<div className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-sm text-muted">
|
|
No timeline events found.
|
|
</div>
|
|
) : (
|
|
timeline.map((event, idx) => {
|
|
const label =
|
|
asString(event.type) ??
|
|
asString(event.action) ??
|
|
asString(event.event) ??
|
|
"event";
|
|
const actor =
|
|
asString(
|
|
event.user &&
|
|
(event.user as Record<string, unknown>).login,
|
|
) ?? "system";
|
|
return (
|
|
<div
|
|
key={String(event.id ?? idx)}
|
|
className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] px-3 py-2 text-sm"
|
|
>
|
|
<span className="font-medium text-strong">{label}</span>{" "}
|
|
<span className="text-muted">by {actor}</span>
|
|
<span className="ml-2 text-xs text-muted">
|
|
{formatDateTime(asString(event.created_at))}
|
|
</span>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="reactions">
|
|
<div className="space-y-2">
|
|
{reactions.length === 0 ? (
|
|
<div className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-sm text-muted">
|
|
No reactions on this issue.
|
|
</div>
|
|
) : (
|
|
reactions.map((reaction, idx) => {
|
|
const content =
|
|
asString(reaction.content) ?? "reaction";
|
|
const login =
|
|
asString(
|
|
reaction.user &&
|
|
(reaction.user as Record<string, unknown>).login,
|
|
) ?? "Unknown";
|
|
return (
|
|
<div
|
|
key={String(reaction.id ?? idx)}
|
|
className="flex items-center justify-between rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] px-3 py-2 text-sm"
|
|
>
|
|
<span className="font-medium text-strong">
|
|
{content}
|
|
</span>
|
|
<span className="text-xs text-muted">{login}</span>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
<div className="flex justify-end">
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
|
Dismiss
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<CloseForgejoIssueDialog
|
|
issue={issue}
|
|
repositoryName={repositoryName}
|
|
open={isCloseIssueDialogOpen}
|
|
onOpenChange={setIsCloseIssueDialogOpen}
|
|
onCloseSuccess={handleCloseIssueSuccess}
|
|
/>
|
|
|
|
<PostForgejoCommentDialog
|
|
issue={issue}
|
|
repositoryName={repositoryName}
|
|
open={isCommentDialogOpen}
|
|
onOpenChange={setIsCommentDialogOpen}
|
|
onSuccess={handleCommentSuccess}
|
|
/>
|
|
|
|
<EditForgejoIssueDialog
|
|
issue={detail ?? issue}
|
|
repositoryName={repositoryName}
|
|
open={isEditDialogOpen}
|
|
onOpenChange={setIsEditDialogOpen}
|
|
onSuccess={handleEditSuccess}
|
|
/>
|
|
</>
|
|
);
|
|
}
|