File size: 2,936 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import React from "react";
import { useTranslation } from "react-i18next";
import { GitCommit } from "#/api/open-hands.types";
import { I18nKey } from "#/i18n/declaration";
import { formatTimeDelta } from "#/utils/format-time-delta";
import { ChevronDown, ChevronRight } from "lucide-react";
import { useCommitChanges } from "#/hooks/query/use-commit-changes";
import { AccordionPanel } from "./accordion-panel";
import { DiffChangeList } from "./diff-change-list";
import { LoadingSpinner } from "./loading-spinner";
export interface CommitRowProps {
commit: GitCommit;
/** Only shown when the listed commits have more than one author. */
showAuthor: boolean;
isExpanded: boolean;
onToggle: () => void;
}
/**
* One collapsible commit: header row (short SHA, subject, relative time),
* expanding into the files that commit changed as a single-open accordion.
*/
export function CommitRow({
commit,
showAuthor,
isExpanded,
onToggle,
}: CommitRowProps) {
const { t } = useTranslation("openhands");
// Only fetch a commit's file list once the row is expanded.
const {
data: changes,
isLoading,
isSuccess,
} = useCommitChanges(commit.sha, { enabled: isExpanded });
return (
<div data-testid="commit-row" className="w-full flex flex-col">
<button
type="button"
onClick={onToggle}
aria-expanded={isExpanded}
data-testid="commit-row-toggle"
className="w-full flex h-10 items-center gap-2 px-3 border-b border-[var(--oh-border)] text-sm text-content text-left hover:cursor-pointer"
>
<code className="w-[7ch] flex-shrink-0 text-center font-mono text-xs text-[var(--oh-muted)]">
{commit.shortSha}
</code>
<strong className="flex-1 truncate font-medium">
{commit.subject}
</strong>
{showAuthor && (
<span className="text-xs text-[var(--oh-muted)] truncate max-w-32 flex-shrink-0">
{commit.author}
</span>
)}
<span className="text-xs text-[var(--oh-muted)] flex-shrink-0">
{`${formatTimeDelta(commit.timestamp)} ${t(I18nKey.CONVERSATION$AGO)}`}
</span>
{isExpanded ? (
<ChevronDown
className="w-4 h-4 shrink-0 text-[var(--oh-muted)]"
aria-hidden
/>
) : (
<ChevronRight
className="w-4 h-4 shrink-0 text-[var(--oh-muted)]"
aria-hidden
/>
)}
</button>
<AccordionPanel
open={isExpanded}
testId="commit-row-content"
className="w-full flex flex-col pl-6"
>
{isLoading && (
<div className="p-3">
<LoadingSpinner className="w-4 h-4" />
</div>
)}
{isSuccess && changes && changes.length > 0 && (
<DiffChangeList changes={changes} commit={commit.sha} />
)}
</AccordionPanel>
</div>
);
}
|