taDuc
90 lines
3.7 KiB
TypeScript
90 lines
3.7 KiB
TypeScript
import { Panel } from "./Panel";
|
|
|
|
type Commit = {
|
|
id: string;
|
|
created_at?: string;
|
|
edit_summary: string;
|
|
user_id: string;
|
|
};
|
|
|
|
type CommitHistoryPanelProps = {
|
|
commits: Commit[];
|
|
headCommitId: string | null;
|
|
onRestoreCommit: (commitId: string) => void;
|
|
isSaving: boolean;
|
|
isSubmitting: boolean;
|
|
};
|
|
|
|
export function CommitHistoryPanel({
|
|
commits,
|
|
headCommitId,
|
|
onRestoreCommit,
|
|
isSaving,
|
|
isSubmitting,
|
|
}: CommitHistoryPanelProps) {
|
|
const formatCommitTitle = (commit: Commit) =>
|
|
commit.edit_summary?.trim() || `Commit ${commit.id.slice(0, 8)}`;
|
|
|
|
return (
|
|
<Panel title="Commit History" badge={String(commits.length)} defaultOpen={false}>
|
|
{commits.length === 0 ? (
|
|
<div style={{ color: "#64748b", fontSize: 12 }}>Chưa có commit</div>
|
|
) : (
|
|
<ul style={{ listStyle: "none", margin: 0, padding: 0, fontSize: 12 }}>
|
|
{commits.slice(0, 8).map((commit) => {
|
|
const isHead = Boolean(headCommitId && commit.id === headCommitId);
|
|
return (
|
|
<li
|
|
key={commit.id}
|
|
style={{
|
|
padding: "8px 0",
|
|
borderBottom: "1px solid #1f2937",
|
|
color: "#e2e8f0",
|
|
display: "flex",
|
|
flexDirection: "row"
|
|
}}
|
|
>
|
|
<div style={{flex:1}}>
|
|
<div
|
|
title={formatCommitTitle(commit)}
|
|
style={{
|
|
fontWeight: 750,
|
|
color: "#f8fafc",
|
|
overflowWrap: "anywhere",
|
|
}}
|
|
>
|
|
{formatCommitTitle(commit)}
|
|
</div>
|
|
<div style={{ marginTop: 3, color: "#94a3b8" }}>
|
|
{commit.created_at ? new Date(commit.created_at).toLocaleString() : ""}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
style={{
|
|
marginTop: 6,
|
|
padding: "6px 8px",
|
|
borderRadius: 6,
|
|
border: "1px solid #334155",
|
|
background: isHead ? "#0b1220" : "#334155",
|
|
color: "white",
|
|
cursor: isSaving || isSubmitting || isHead ? "not-allowed" : "pointer",
|
|
opacity: isHead ? 0.65 : 1,
|
|
fontWeight: 800,
|
|
fontSize: 12,
|
|
}}
|
|
onClick={() => onRestoreCommit(commit.id)}
|
|
disabled={isSaving || isSubmitting || isHead}
|
|
title={isHead ? "Đang là head commit" : "Restore snapshot từ commit này (FE-only)"}
|
|
>
|
|
Restore
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</Panel>
|
|
);
|
|
}
|