José Almeida
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { IconRefresh } from "@tabler/icons-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Button } from "@kandev/ui/button";
|
|
import { Separator } from "@kandev/ui/separator";
|
|
import { WorkflowSyncDialog } from "@/components/settings/workflow-sync-dialog";
|
|
import { WorkflowSyncStatusCard } from "@/components/settings/workflow-sync-status-banner";
|
|
import { useWorkflowSync } from "@/hooks/domains/settings/use-workflow-sync";
|
|
import { settingsActionClassName } from "@/components/settings/settings-control";
|
|
|
|
// WorkflowSyncButton is the workflow sync entry point (GitHub or GitLab),
|
|
// rendered alongside the other workflow actions (Export / Import / Add). The
|
|
// dialog open state lives with the caller so button and section can sit in
|
|
// different parts of the layout.
|
|
export function WorkflowSyncButton({ onClick }: { onClick: () => void }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onClick}
|
|
className={settingsActionClassName("cursor-pointer")}
|
|
data-testid="workflow-sync-open"
|
|
>
|
|
<IconRefresh className="h-4 w-4 mr-2" />
|
|
{t("workflows:syncTitle")}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
type WorkflowSyncSectionProps = {
|
|
workspaceId: string;
|
|
dialogOpen: boolean;
|
|
onDialogOpenChange: (open: boolean) => void;
|
|
};
|
|
|
|
// WorkflowSyncSection renders the workflow-sync state inside the Workflows
|
|
// settings section: the configuration dialog (opened via WorkflowSyncButton
|
|
// in the section's action row) and — once a sync is configured — a compact
|
|
// status card above the workflow list showing what is syncing and how the
|
|
// last attempt went. Unconfigured workspaces render nothing visible.
|
|
export function WorkflowSyncSection({
|
|
workspaceId,
|
|
dialogOpen,
|
|
onDialogOpenChange,
|
|
}: WorkflowSyncSectionProps) {
|
|
const sync = useWorkflowSync(workspaceId);
|
|
|
|
return (
|
|
<>
|
|
{sync.config && (
|
|
// pl-8 matches the workflow list's drag-handle gutter so the card's
|
|
// left edge lines up with the workflow cards below.
|
|
<div className="mb-4 space-y-4 pl-8" data-testid="workflow-sync-section">
|
|
<WorkflowSyncStatusCard
|
|
config={sync.config}
|
|
syncing={sync.syncing}
|
|
onSyncNow={sync.handleSyncNow}
|
|
/>
|
|
<Separator />
|
|
</div>
|
|
)}
|
|
<WorkflowSyncDialog
|
|
key={workspaceId}
|
|
open={dialogOpen}
|
|
onOpenChange={onDialogOpenChange}
|
|
sync={sync}
|
|
/>
|
|
</>
|
|
);
|
|
}
|