reaarange table
This commit is contained in:
null
parent
bd153b7a87
commit
63fa79b95e
|
|
@ -26,10 +26,11 @@ import {
|
|||
GitBranch,
|
||||
GitCommitHorizontal,
|
||||
GitFork,
|
||||
KeyRound,
|
||||
Loader2,
|
||||
Pencil,
|
||||
RefreshCw,
|
||||
ShieldCheck,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
DataTable,
|
||||
|
|
@ -45,6 +46,11 @@ import type {
|
|||
const repositoryLabel = (repo: ForgejoRepository) =>
|
||||
repo.display_name || `${repo.owner}/${repo.repo}`;
|
||||
|
||||
const formatConnectionUrl = (value?: string | null) => {
|
||||
if (!value) return "No connection";
|
||||
return value.replace(/^https?:\/\//i, "").replace(/\/$/, "");
|
||||
};
|
||||
|
||||
const repositoryTone = (repo: ForgejoRepository) => {
|
||||
if (repo.last_sync_error) return "danger";
|
||||
if (!repo.active || repo.is_archived) return "muted";
|
||||
|
|
@ -143,19 +149,21 @@ export function ForgejoRepositoriesTable({
|
|||
const rowActions: DataTableRowAction<ForgejoRepository>[] = [
|
||||
{
|
||||
key: "edit",
|
||||
label: "Edit",
|
||||
label: <Pencil className="h-4 w-4" />,
|
||||
ariaLabel: "Edit repository",
|
||||
href: (row) => `/git-projects/repositories/${row.id}/edit`,
|
||||
className:
|
||||
"inline-flex h-8 items-center justify-center rounded-lg px-3 text-xs font-semibold text-muted transition hover:bg-[color:var(--surface-muted)] hover:text-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
|
||||
"inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-[color:var(--surface-muted)] hover:text-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
|
||||
},
|
||||
...(onDelete
|
||||
? [
|
||||
{
|
||||
key: "delete",
|
||||
label: "Delete",
|
||||
label: <Trash2 className="h-4 w-4" />,
|
||||
ariaLabel: "Delete repository",
|
||||
onClick: onDelete,
|
||||
className:
|
||||
"h-8 rounded-lg px-3 text-xs font-semibold text-muted transition hover:bg-[color:rgba(248,113,113,0.1)] hover:text-[color:var(--danger)]",
|
||||
"h-8 w-8 rounded-lg p-0 text-muted transition hover:bg-[color:rgba(248,113,113,0.1)] hover:text-[color:var(--danger)]",
|
||||
} satisfies DataTableRowAction<ForgejoRepository>,
|
||||
]
|
||||
: []),
|
||||
|
|
@ -240,6 +248,10 @@ const columns = (
|
|||
<span className="truncate font-semibold text-strong">
|
||||
{repositoryLabel(repo)}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 rounded-full border border-[color:rgba(96,165,250,0.26)] bg-[color:rgba(96,165,250,0.1)] px-2 py-0.5 font-mono text-[11px] text-[color:var(--accent-strong)]">
|
||||
<GitBranch className="h-3 w-3" />
|
||||
Git
|
||||
</span>
|
||||
{repo.default_branch ? (
|
||||
<span className="inline-flex items-center gap-1 rounded-full border border-[color:rgba(96,165,250,0.26)] bg-[color:rgba(96,165,250,0.1)] px-2 py-0.5 font-mono text-[11px] text-[color:var(--accent-strong)]">
|
||||
<GitCommitHorizontal className="h-3 w-3" />
|
||||
|
|
@ -291,11 +303,8 @@ const columns = (
|
|||
const connection = row.original.connection;
|
||||
return (
|
||||
<div className="min-w-[180px]">
|
||||
<span className="block truncate font-medium text-sm text-strong">
|
||||
{connection?.name}
|
||||
</span>
|
||||
<span className="mt-1 inline-flex max-w-[240px] items-center rounded-full border border-[color:var(--border)] bg-[color:var(--surface-muted)] px-2 py-0.5 font-mono text-[11px] text-muted">
|
||||
{connection?.base_url}
|
||||
{formatConnectionUrl(connection?.base_url)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -328,15 +337,9 @@ const columns = (
|
|||
) : null}
|
||||
{repo.has_webhook_secret ? (
|
||||
<Badge variant="success" className="gap-1">
|
||||
<KeyRound className="h-3 w-3" />
|
||||
Webhook
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="warning" className="gap-1">
|
||||
<KeyRound className="h-3 w-3" />
|
||||
No secret
|
||||
</Badge>
|
||||
)}
|
||||
) : null}
|
||||
{repo.last_sync_error ? (
|
||||
<Badge variant="danger" className="gap-1">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
|
|
@ -359,11 +362,11 @@ const columns = (
|
|||
},
|
||||
{
|
||||
accessorKey: "openIssues",
|
||||
header: "Issues",
|
||||
header: () => <span className="block text-center">Issues</span>,
|
||||
cell: ({ row }) => (
|
||||
<div
|
||||
className={cn(
|
||||
"inline-flex min-w-[94px] flex-col rounded-xl border px-3 py-2",
|
||||
"mx-auto inline-flex min-w-[94px] flex-col items-center rounded-xl border px-3 py-2 text-center",
|
||||
row.original.open_issues_count > 0
|
||||
? "border-[color:rgba(251,191,36,0.24)] bg-[color:rgba(251,191,36,0.08)]"
|
||||
: "border-[color:rgba(52,211,153,0.18)] bg-[color:rgba(52,211,153,0.055)]",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ export type DataTableEmptyState = {
|
|||
|
||||
export type DataTableRowAction<TData> = {
|
||||
key: string;
|
||||
label: string;
|
||||
label: ReactNode;
|
||||
ariaLabel?: string;
|
||||
href?: (row: TData) => string | null;
|
||||
onClick?: (row: TData) => void;
|
||||
className?: string;
|
||||
|
|
@ -166,6 +167,12 @@ export function DataTable<TData>({
|
|||
<Link
|
||||
key={action.key}
|
||||
href={href}
|
||||
aria-label={action.ariaLabel}
|
||||
title={
|
||||
typeof action.label === "string"
|
||||
? action.label
|
||||
: action.ariaLabel
|
||||
}
|
||||
className={
|
||||
action.className ??
|
||||
buttonVariants({ variant: "ghost", size: "sm" })
|
||||
|
|
@ -182,6 +189,12 @@ export function DataTable<TData>({
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
className={action.className}
|
||||
aria-label={action.ariaLabel}
|
||||
title={
|
||||
typeof action.label === "string"
|
||||
? action.label
|
||||
: action.ariaLabel
|
||||
}
|
||||
onClick={() => action.onClick?.(row.original)}
|
||||
>
|
||||
{action.label}
|
||||
|
|
|
|||
Loading…
Reference in New Issue