RunRow.tsx

import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "@tanstack/react-router";
import { type MouseEvent } from "react";

import type { PipelineRunResponse } from "@/api/types.gen";
import { CopyText } from "@/components/shared/CopyText/CopyText";
import { FavoriteToggle } from "@/components/shared/FavoriteToggle";
import { StatusBar, StatusIcon } from "@/components/shared/Status";
import { TagList } from "@/components/shared/Tags/TagList";
import { Button } from "@/components/ui/button";
import { InlineStack } from "@/components/ui/layout";
import { TableCell, TableRow } from "@/components/ui/table";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import useToastNotification from "@/hooks/useToastNotification";
import { useBackend } from "@/providers/BackendProvider";
import { APP_ROUTES } from "@/routes/router";
import { fetchRunAnnotations } from "@/services/pipelineRunService";
import { getPipelineTagsFromAnnotations } from "@/utils/annotations";
import { TWENTY_FOUR_HOURS_IN_MS } from "@/utils/constants";
import { formatDate } from "@/utils/date";
import { getOverallExecutionStatusFromStats } from "@/utils/executionStatus";

const RunRow = ({ run }: { run: PipelineRunResponse }) => {
  const navigate = useNavigate();
  const notify = useToastNotification();
  const { backendUrl } = useBackend();

  const runId = `${run.id}`;

  const { data: annotations } = useQuery({
    queryKey: ["pipeline-run-annotations", runId],
    queryFn: () => fetchRunAnnotations(runId, backendUrl),
    enabled: !!runId,
    refetchOnWindowFocus: false,
    staleTime: TWENTY_FOUR_HOURS_IN_MS,
  });

  const name = run.pipeline_name ?? "Unknown pipeline";
  const tags = getPipelineTagsFromAnnotations(annotations);

  const createdBy = run.created_by ?? "Unknown user";
  const truncatedCreatedBy = truncateMiddle(createdBy);
  const isTruncated = createdBy !== truncatedCreatedBy;

  const handleCopy = (e: MouseEvent) => {
    e.stopPropagation();
    navigator.clipboard.writeText(createdBy);
    notify(`"${createdBy}" copied to clipboard`, "success");
  };

  const overallStatus = getOverallExecutionStatusFromStats(
    run.execution_status_stats ?? undefined,
  );

  const clickThroughUrl = `${APP_ROUTES.RUNS}/${runId}`;

  const handleRowClick = (e: MouseEvent<HTMLElement>) => {
    if (e.target instanceof HTMLElement && e.target.closest("button")) {
      return;
    }

    if (e.ctrlKey || e.metaKey) {
      window.open(clickThroughUrl, "_blank");
      return;
    }

    navigate({ to: clickThroughUrl });
  };

  const createdByButton = (
    <Button
      className="truncate underline"
      onClick={handleCopy}
      tabIndex={0}
      variant="ghost"
    >
      {truncatedCreatedBy}
    </Button>
  );

  const createdByButtonWithTooltip = (
    <Tooltip>
      <TooltipTrigger asChild>{createdByButton}</TooltipTrigger>
      <TooltipContent>
        <span>{createdBy}</span>
      </TooltipContent>
    </Tooltip>
  );

  return (
    <TableRow
      onClick={handleRowClick}
      className="cursor-pointer text-gray-500 text-xs h-10"
    >
      <TableCell>
        <InlineStack gap="2" blockAlign="center" wrap="nowrap">
          <StatusIcon status={overallStatus} />
          <span
            className="truncate max-w-100 text-sm text-foreground"
            title={name}
          >
            {name}
          </span>
          <div
            onClick={(e) => e.stopPropagation()}
            className="flex items-center text-sm"
          >
            #
            <CopyText size="sm" className="text-muted-foreground">
              {runId}
            </CopyText>
          </div>
        </InlineStack>
      </TableCell>
      <TableCell>
        <div className="w-2/3">
          <StatusBar executionStatusStats={run.execution_status_stats} />
        </div>
      </TableCell>
      <TableCell>
        {run.created_at ? formatDate(run.created_at) : "Data not found..."}
      </TableCell>
      <TableCell>
        {isTruncated ? createdByButtonWithTooltip : createdByButton}
      </TableCell>
      <TableCell className="max-w-64">
        {tags && tags.length > 0 && <TagList tags={tags} />}
      </TableCell>
      <TableCell className="w-0">
        <FavoriteToggle type="run" id={runId} name={name} />
      </TableCell>
    </TableRow>
  );
};

export default RunRow;

function truncateMiddle(str: string, maxLength = 28) {
  if (!str || str.length <= maxLength) return str;
  const keep = Math.floor((maxLength - 3) / 2);
  return str.slice(0, keep) + "..." + str.slice(-keep);
}