85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
import { CircleDot, ExternalLink, FolderGit2, GitBranch } from "lucide-react";
|
|
import { Link } from "@/lib/router";
|
|
import type { WorkReference } from "../lib/pipeline-references";
|
|
|
|
/**
|
|
* Renders a case's typed work references — workspace folders, external URLs,
|
|
* linked tasks — as real links/chips on the case detail panel.
|
|
*/
|
|
export function PipelineWorkReferences({ references }: { references: WorkReference[] }) {
|
|
if (references.length === 0) {
|
|
return <p className="py-3 text-sm text-muted-foreground">No linked work yet.</p>;
|
|
}
|
|
return (
|
|
<ul className="min-w-0 space-y-2">
|
|
{references.map((reference) => (
|
|
<li key={`${reference.kind}-${reference.id}`}>
|
|
<WorkReferenceRow reference={reference} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
function WorkReferenceRow({ reference }: { reference: WorkReference }) {
|
|
if (reference.kind === "url") {
|
|
return (
|
|
<a
|
|
href={reference.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="group flex items-start gap-2 text-sm text-foreground"
|
|
>
|
|
<ExternalLink className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
|
<span className="min-w-0 [overflow-wrap:anywhere]">
|
|
<span className="font-medium underline-offset-2 group-hover:underline">{reference.label}</span>
|
|
<span className="block text-xs text-muted-foreground [overflow-wrap:anywhere]">{reference.url}</span>
|
|
</span>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
if (reference.kind === "issue") {
|
|
const inner = (
|
|
<>
|
|
<CircleDot className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
|
<span className="min-w-0 [overflow-wrap:anywhere]">
|
|
<span className="font-medium underline-offset-2 group-hover:underline">{reference.label}</span>
|
|
{reference.identifier ? (
|
|
<span className="ml-1.5 rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground">
|
|
{reference.identifier}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
</>
|
|
);
|
|
return reference.issueId ? (
|
|
<Link to={`/issues/${reference.issueId}`} className="group flex items-start gap-2 text-sm text-foreground">
|
|
{inner}
|
|
</Link>
|
|
) : (
|
|
<span className="flex items-start gap-2 text-sm text-foreground">{inner}</span>
|
|
);
|
|
}
|
|
|
|
// workspace
|
|
return (
|
|
<div className="flex items-start gap-2 text-sm text-foreground">
|
|
<FolderGit2 className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
|
<span className="min-w-0 [overflow-wrap:anywhere]">
|
|
<span className="block text-xs text-muted-foreground">Folder</span>
|
|
<span className="font-normal">{reference.label}</span>
|
|
{reference.path ? (
|
|
<span className="block font-mono text-xs text-muted-foreground [overflow-wrap:anywhere]">{reference.path}</span>
|
|
) : null}
|
|
{reference.branch ? (
|
|
<span className="mt-0.5 inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
|
|
<GitBranch className="h-3 w-3" />
|
|
{reference.branch}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|