Carlos Florêncio
52 lines
2.2 KiB
TypeScript
52 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { IconBrandAzure, IconExternalLink } from "@tabler/icons-react";
|
|
import { Button } from "@kandev/ui/button";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
|
|
import { useAppStore } from "@/components/state-provider";
|
|
import { useAzureDevOpsTaskPullRequests } from "@/hooks/domains/azure-devops/use-azure-devops-task-pull-requests";
|
|
import { getAzureDevOpsPullRequestPresentation } from "./azure-devops-status";
|
|
|
|
const TONE_CLASS = {
|
|
success: "border-green-500/40 text-green-700 dark:text-green-300",
|
|
danger: "border-destructive/40 text-destructive",
|
|
warning: "border-amber-500/40 text-amber-700 dark:text-amber-300",
|
|
muted: "text-muted-foreground",
|
|
info: "border-cyan-500/40 text-cyan-700 dark:text-cyan-300",
|
|
};
|
|
|
|
export function AzureDevOpsTaskPullRequestChip({ taskId }: { taskId: string | null }) {
|
|
const workspaceId = useAppStore((state) => state.workspaces.activeId);
|
|
const pullRequests = useAzureDevOpsTaskPullRequests(workspaceId, taskId);
|
|
const first = pullRequests[0];
|
|
if (!first) return null;
|
|
const presentation = getAzureDevOpsPullRequestPresentation(first);
|
|
const suffix = pullRequests.length > 1 ? ` +${pullRequests.length - 1}` : "";
|
|
const label = `Azure PR ${first.pullRequestId}: ${presentation.label}${suffix}`;
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="sm"
|
|
className={`h-7 max-w-56 cursor-pointer gap-1.5 px-2 ${TONE_CLASS[presentation.tone]}`}
|
|
>
|
|
<a href={first.pullRequestUrl} target="_blank" rel="noreferrer" aria-label={label}>
|
|
<IconBrandAzure className="h-3.5 w-3.5 shrink-0" />
|
|
<span className="truncate">PR {first.pullRequestId}</span>
|
|
<span className="hidden truncate sm:inline">{presentation.label}</span>
|
|
{suffix && <span className="shrink-0">{suffix}</span>}
|
|
<IconExternalLink className="h-3 w-3 shrink-0" />
|
|
</a>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="max-w-80">
|
|
<p className="font-medium">{first.title}</p>
|
|
<p>{presentation.label}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|