[codex] Polish routine layout follow-ups (#7858)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - Routines are the recurring-work surface that lets a company keep operating without a human manually kicking off every task > - The base routine detail Variation C shell already landed in #7848, but the follow-up branch still had polish work for scheduling, section ergonomics, and the list layout > - Operators need routine edit screens to explain trigger behavior clearly, keep long detail pages usable on mobile/touch devices, and make grouped routine lists easier to scan > - This pull request rebases the remaining branch work onto current `master`, drops the duplicate commits already merged through #7848, and keeps only the new routine UI follow-ups > - The benefit is a cleaner routines workflow without reopening the already-merged shell work or carrying unrelated lockfile, workflow, or screenshot changes ## Linked Issues or Issue Description Refs #7848 Feature follow-up: polish the routines UI after the Variation C routine-detail shell landed. Problem / motivation: - Routine trigger configuration needs clearer previews for manual, schedule, API, and webhook execution modes. - Routine detail sections need better responsive spacing and touch ergonomics. - The routines list grouping should scan like grouped records instead of a table with heavy row dividers. - The routine tests need a React 19-compatible render helper so the focused routine suite can run in this workspace. Proposed solution: - Add cron-fire preview helpers and routine-run display helpers with focused tests. - Expand the routine editable and operate sections with richer trigger, variable, run, activity, and history presentation. - Adjust the routine detail shell and sub-sidebar spacing for mobile/touch layout. - Update grouped routine list presentation to use bordered group headers with borderless rows. - Switch affected routine tests to the repo's `flushSync` render-helper pattern. Alternatives considered: - Leaving the duplicate pre-#7848 commits in the branch would recreate conflicts and make the PR review much larger than the remaining change. - Keeping grouped routine rows inside one bordered table was simpler, but made the grouping hierarchy less legible. Roadmap alignment: - ROADMAP.md lists Scheduled Routines as a core shipped capability and Output/Enforced Outcomes as ongoing priorities. This is polish on that existing routines capability, not a new roadmap-level feature. ## What Changed - Added routine scheduling preview helpers and tests for cron/manual/API/webhook fire-policy display. - Added routine run display helpers and tests for deduped trigger labels and run-row subtitles. - Polished routine detail sections, including trigger summaries, operate views, and env/variable editing ergonomics. - Adjusted routine detail page and sub-sidebar spacing so the title/header area is less pinned and touch layouts center better. - Reworked the routines list grouped layout so group headers are bordered cards and routine rows are borderless inside each group. - Added Storybook coverage for the routines list grouped layout and updated the existing routine detail story. - Repaired routine tests to use `flushSync` helpers compatible with the installed React 19 runtime. ## Verification - `pnpm exec vitest run ui/src/lib/cron-fires.test.ts ui/src/lib/routine-run-display.test.ts ui/src/pages/Routines.test.tsx ui/src/components/RoutineSubSidebar.test.tsx ui/src/components/RoutineSaveBar.test.tsx` - Result: 5 test files passed, 37 tests passed. - Confirmed the rebased PR diff does not include `pnpm-lock.yaml`, `.github/workflows/*`, or committed screenshots. - Confirmed `origin/master` is an ancestor of the pushed branch head after rebase. ## Risks - Medium UI risk: this touches the routine detail and routine list surfaces, so visual regressions are possible in edge cases not covered by the focused tests. - Low data risk: no schema, migration, server API, or lockfile changes are included. - Review note: the branch intentionally force-pushed after rebasing because the original first three commits were already merged through #7848. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used OpenAI Codex, GPT-5-based coding agent runtime, with repository shell/tool access. Exact hosted runtime model identifier and context-window size were not exposed in the execution environment. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Dotta
@@ -1,4 +1,4 @@
|
||||
import { useMemo } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
ArrowRight,
|
||||
Braces,
|
||||
@@ -6,6 +6,8 @@ import {
|
||||
Edit3,
|
||||
KeyRound,
|
||||
Play,
|
||||
Plus,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -20,6 +22,8 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { RadioCardGroup } from "@/components/ui/radio-card";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { nextCronFires, previewFirePolicies } from "../../lib/cron-fires";
|
||||
import { timeAgo } from "../../lib/timeAgo";
|
||||
import { EmptyState } from "../EmptyState";
|
||||
import { InlineEntitySelector } from "../InlineEntitySelector";
|
||||
@@ -30,7 +34,7 @@ import { RoutineVariablesEditor, RoutineVariablesHint } from "../RoutineVariable
|
||||
import { RoutineTriggerCard } from "../RoutineTriggerCard";
|
||||
import { EnvVarEditor } from "../EnvVarEditor";
|
||||
import { useRoutineDetail } from "./context";
|
||||
import type { EnvBinding } from "@paperclipai/shared";
|
||||
import type { EnvBinding, RoutineDetail as RoutineDetailType } from "@paperclipai/shared";
|
||||
|
||||
const concurrencyPolicyOptions = [
|
||||
{
|
||||
@@ -336,10 +340,39 @@ function SummaryCard({
|
||||
export function TriggersSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { routine, newTrigger, setNewTrigger, createTrigger, updateTrigger, deleteTrigger, rotateTrigger } = ctx;
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Add trigger form */}
|
||||
{/* Add-trigger drawer header (§3.2) */}
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
{routine.triggers.length === 0
|
||||
? "No triggers yet"
|
||||
: `${routine.triggers.length} trigger${routine.triggers.length === 1 ? "" : "s"}`}
|
||||
</p>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={addOpen ? "secondary" : "default"}
|
||||
onClick={() => setAddOpen((open) => !open)}
|
||||
aria-expanded={addOpen}
|
||||
>
|
||||
{addOpen ? (
|
||||
<>
|
||||
<X className="mr-1.5 h-3.5 w-3.5" />
|
||||
Cancel
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="mr-1.5 h-3.5 w-3.5" />
|
||||
New trigger
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Add trigger form — expand-on-click drawer */}
|
||||
{addOpen ? (
|
||||
<div className="space-y-3 rounded-lg border border-border p-4">
|
||||
<p className="text-sm font-medium">Add trigger</p>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
@@ -412,16 +445,29 @@ export function TriggersSection() {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-end">
|
||||
<Button size="sm" onClick={() => createTrigger.mutate()} disabled={createTrigger.isPending}>
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button size="sm" variant="ghost" onClick={() => setAddOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => createTrigger.mutate(undefined, { onSuccess: () => setAddOpen(false) })}
|
||||
disabled={createTrigger.isPending}
|
||||
>
|
||||
{createTrigger.isPending ? "Adding..." : "Add trigger"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Existing triggers */}
|
||||
{routine.triggers.length === 0 ? (
|
||||
<EmptyState icon={Clock3} message="No triggers yet." />
|
||||
<EmptyState
|
||||
icon={Clock3}
|
||||
message="No triggers yet."
|
||||
action="Add a schedule"
|
||||
onAction={() => setAddOpen(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{routine.triggers.map((trigger) => (
|
||||
@@ -481,6 +527,21 @@ export function SecretsSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { editDraft, setEditDraft, availableSecrets, createSecret, secretMessage, copySecretValue } = ctx;
|
||||
|
||||
// Project/company-scoped secrets that already see real usage, surfaced as
|
||||
// quick-bind chips (§3.4). Ranked by reference count then recency.
|
||||
const recentlyUsedSecrets = useMemo(
|
||||
() =>
|
||||
[...availableSecrets]
|
||||
.filter((secret) => secret.status === "active")
|
||||
.sort((a, b) => {
|
||||
const refDelta = (b.referenceCount ?? 0) - (a.referenceCount ?? 0);
|
||||
if (refDelta !== 0) return refDelta;
|
||||
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
|
||||
})
|
||||
.slice(0, 8),
|
||||
[availableSecrets],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md border border-border bg-muted/20 px-4 py-3 text-xs text-muted-foreground">
|
||||
@@ -520,6 +581,7 @@ export function SecretsSection() {
|
||||
<EnvVarEditor
|
||||
value={(editDraft.env ?? {}) as Record<string, EnvBinding>}
|
||||
secrets={availableSecrets}
|
||||
recentlyUsedSecrets={recentlyUsedSecrets}
|
||||
onCreateSecret={async (name, value) => createSecret.mutateAsync({ name, value })}
|
||||
onChange={(env) => setEditDraft((current) => ({ ...current, env: env ?? null }))}
|
||||
/>
|
||||
@@ -529,7 +591,7 @@ export function SecretsSection() {
|
||||
|
||||
export function DeliverySection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { editDraft, setEditDraft } = ctx;
|
||||
const { editDraft, setEditDraft, routine } = ctx;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -559,6 +621,102 @@ export function DeliverySection() {
|
||||
options={catchUpPolicyOptions}
|
||||
/>
|
||||
</div>
|
||||
<NextFiresPreview
|
||||
triggers={routine.triggers}
|
||||
concurrencyPolicy={editDraft.concurrencyPolicy}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const dispositionToneClass: Record<string, string> = {
|
||||
queued: "text-emerald-600 dark:text-emerald-400",
|
||||
coalesced: "text-amber-600 dark:text-amber-400",
|
||||
skipped: "text-muted-foreground",
|
||||
};
|
||||
|
||||
/**
|
||||
* "Next 5 fires" preview (§3.5) — the strongest "what does this policy mean?"
|
||||
* surface. Picks the soonest-firing schedule trigger, computes its next fires
|
||||
* client-side, and annotates each with how the chosen concurrency policy would
|
||||
* treat it.
|
||||
*/
|
||||
function NextFiresPreview({
|
||||
triggers,
|
||||
concurrencyPolicy,
|
||||
}: {
|
||||
triggers: RoutineDetailType["triggers"];
|
||||
concurrencyPolicy: string;
|
||||
}) {
|
||||
const preview = useMemo(() => {
|
||||
const schedule = triggers
|
||||
.filter((trigger) => trigger.kind === "schedule" && trigger.enabled && trigger.cronExpression)
|
||||
.map((trigger) => {
|
||||
const fires = nextCronFires(trigger.cronExpression, 5, {
|
||||
timeZone: trigger.timezone ?? "UTC",
|
||||
});
|
||||
return { trigger, fires };
|
||||
})
|
||||
.filter((entry) => entry.fires.length > 0)
|
||||
.sort((a, b) => a.fires[0]!.getTime() - b.fires[0]!.getTime())[0];
|
||||
if (!schedule) return null;
|
||||
return {
|
||||
timeZone: schedule.trigger.timezone ?? "UTC",
|
||||
entries: previewFirePolicies(schedule.fires, concurrencyPolicy),
|
||||
};
|
||||
}, [triggers, concurrencyPolicy]);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Next 5 fires
|
||||
</p>
|
||||
{preview ? (
|
||||
<>
|
||||
<div className="space-y-1.5 rounded-lg border border-border p-3 font-mono text-xs">
|
||||
{preview.entries.map((entry, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<span className="text-muted-foreground/40">·</span>
|
||||
<span className="tabular-nums">{formatFireTime(entry.at, preview.timeZone)}</span>
|
||||
<ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground/50" />
|
||||
<span className={cn("font-medium", dispositionToneClass[entry.disposition])}>
|
||||
{entry.label}
|
||||
</span>
|
||||
{entry.note ? (
|
||||
<span className="truncate text-muted-foreground/60">({entry.note})</span>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground/60">
|
||||
Preview assumes the previous run is still in flight when the next fires. Times shown in{" "}
|
||||
{preview.timeZone}.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="rounded-lg border border-dashed border-border p-3 text-xs text-muted-foreground">
|
||||
No enabled schedule trigger to preview. Add a schedule in Triggers to see how this policy
|
||||
treats upcoming fires.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatFireTime(date: Date, timeZone: string): string {
|
||||
try {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
timeZone,
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hourCycle: "h23",
|
||||
})
|
||||
.format(date)
|
||||
.replace(",", "");
|
||||
} catch {
|
||||
return date.toISOString();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,90 @@
|
||||
import { useMemo } from "react";
|
||||
import { Activity as ActivityIcon, Play } from "lucide-react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Activity as ActivityIcon, Play, SlidersHorizontal } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { timeAgo } from "../../lib/timeAgo";
|
||||
import { runRowSubtitle, dedupedTriggerLabel } from "../../lib/routine-run-display";
|
||||
import { EmptyState } from "../EmptyState";
|
||||
import { EntityRow } from "../EntityRow";
|
||||
import { FilterBar, type FilterValue } from "../FilterBar";
|
||||
import { LiveRunWidget } from "../LiveRunWidget";
|
||||
import { RoutineHistoryTab } from "../RoutineHistoryTab";
|
||||
import { RoutineActivityRow } from "../RoutineActivityRow";
|
||||
import { useRoutineDetail } from "./context";
|
||||
|
||||
const DATE_WINDOW_OPTIONS: { value: string; label: string; ms: number | null }[] = [
|
||||
{ value: "any", label: "Any time", ms: null },
|
||||
{ value: "24h", label: "Last 24h", ms: 24 * 60 * 60 * 1000 },
|
||||
{ value: "7d", label: "Last 7d", ms: 7 * 24 * 60 * 60 * 1000 },
|
||||
{ value: "30d", label: "Last 30d", ms: 30 * 24 * 60 * 60 * 1000 },
|
||||
];
|
||||
|
||||
export function RunsSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { routine, routineRuns, hasLiveRun, activeIssueId, onOpenRunDialog } = ctx;
|
||||
const runs = routineRuns ?? [];
|
||||
const runs = useMemo(() => routineRuns ?? [], [routineRuns]);
|
||||
|
||||
const [sourceFilter, setSourceFilter] = useState("any");
|
||||
const [statusFilter, setStatusFilter] = useState("any");
|
||||
const [dateFilter, setDateFilter] = useState("any");
|
||||
|
||||
const sourceOptions = useMemo(
|
||||
() => [...new Set(runs.map((run) => run.source))].sort(),
|
||||
[runs],
|
||||
);
|
||||
const statusOptions = useMemo(
|
||||
() => [...new Set(runs.map((run) => run.status))].sort(),
|
||||
[runs],
|
||||
);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const windowMs = DATE_WINDOW_OPTIONS.find((option) => option.value === dateFilter)?.ms ?? null;
|
||||
const cutoff = windowMs == null ? null : Date.now() - windowMs;
|
||||
return runs.filter((run) => {
|
||||
if (sourceFilter !== "any" && run.source !== sourceFilter) return false;
|
||||
if (statusFilter !== "any" && run.status !== statusFilter) return false;
|
||||
if (cutoff != null && new Date(run.triggeredAt).getTime() < cutoff) return false;
|
||||
return true;
|
||||
});
|
||||
}, [runs, sourceFilter, statusFilter, dateFilter]);
|
||||
|
||||
const activeFilters = useMemo<FilterValue[]>(() => {
|
||||
const list: FilterValue[] = [];
|
||||
if (sourceFilter !== "any") list.push({ key: "source", label: "Source", value: sourceFilter });
|
||||
if (statusFilter !== "any") {
|
||||
list.push({ key: "status", label: "Status", value: statusFilter.replaceAll("_", " ") });
|
||||
}
|
||||
if (dateFilter !== "any") {
|
||||
const label = DATE_WINDOW_OPTIONS.find((option) => option.value === dateFilter)?.label ?? dateFilter;
|
||||
list.push({ key: "date", label: "Date", value: label });
|
||||
}
|
||||
return list;
|
||||
}, [sourceFilter, statusFilter, dateFilter]);
|
||||
|
||||
function clearFilters() {
|
||||
setSourceFilter("any");
|
||||
setStatusFilter("any");
|
||||
setDateFilter("any");
|
||||
}
|
||||
|
||||
function removeFilter(key: string) {
|
||||
if (key === "source") setSourceFilter("any");
|
||||
if (key === "status") setStatusFilter("any");
|
||||
if (key === "date") setDateFilter("any");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{hasLiveRun && activeIssueId ? (
|
||||
<LiveRunWidget issueId={activeIssueId} companyId={routine.companyId} />
|
||||
) : null}
|
||||
|
||||
{runs.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={Play}
|
||||
@@ -27,39 +93,105 @@ export function RunsSection() {
|
||||
onAction={onOpenRunDialog}
|
||||
/>
|
||||
) : (
|
||||
<div className="divide-y divide-border rounded-lg border border-border">
|
||||
{runs.map((run) => (
|
||||
<div key={run.id} className="flex items-center justify-between px-3 py-2 text-sm">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<Badge variant="outline" className="shrink-0">
|
||||
{run.source}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={run.status === "failed" ? "destructive" : "secondary"}
|
||||
className="shrink-0"
|
||||
>
|
||||
{run.status.replaceAll("_", " ")}
|
||||
</Badge>
|
||||
{run.trigger ? (
|
||||
<span className="truncate text-muted-foreground">
|
||||
{run.trigger.label ?? run.trigger.kind}
|
||||
</span>
|
||||
) : null}
|
||||
{run.linkedIssue ? (
|
||||
<Link
|
||||
to={`/issues/${run.linkedIssue.identifier ?? run.linkedIssue.id}`}
|
||||
className="truncate text-muted-foreground hover:underline"
|
||||
>
|
||||
{run.linkedIssue.identifier ?? run.linkedIssue.id.slice(0, 8)}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
<span className="ml-2 shrink-0 text-xs text-muted-foreground">
|
||||
{timeAgo(run.triggeredAt)}
|
||||
</span>
|
||||
<>
|
||||
{/* Filter chips row (§3.6) */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Select value={sourceFilter} onValueChange={setSourceFilter}>
|
||||
<SelectTrigger size="sm" className="h-8 w-auto gap-1.5 text-xs" aria-label="Filter by source">
|
||||
<span className="text-muted-foreground">Source:</span>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="any">any</SelectItem>
|
||||
{sourceOptions.map((source) => (
|
||||
<SelectItem key={source} value={source}>
|
||||
{source}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger size="sm" className="h-8 w-auto gap-1.5 text-xs" aria-label="Filter by status">
|
||||
<span className="text-muted-foreground">Status:</span>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="any">any</SelectItem>
|
||||
{statusOptions.map((status) => (
|
||||
<SelectItem key={status} value={status}>
|
||||
{status.replaceAll("_", " ")}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={dateFilter} onValueChange={setDateFilter}>
|
||||
<SelectTrigger size="sm" className="h-8 w-auto gap-1.5 text-xs" aria-label="Filter by date">
|
||||
<span className="text-muted-foreground">Date:</span>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{DATE_WINDOW_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<FilterBar filters={activeFilters} onRemove={removeFilter} onClear={clearFilters} />
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={SlidersHorizontal}
|
||||
message="No runs match these filters."
|
||||
action="Clear filters"
|
||||
onAction={clearFilters}
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-lg border border-border">
|
||||
{filtered.map((run) => {
|
||||
const label = dedupedTriggerLabel(run.trigger);
|
||||
const title = run.linkedIssue?.title ?? label ?? "Run";
|
||||
return (
|
||||
<EntityRow
|
||||
key={run.id}
|
||||
leading={
|
||||
<>
|
||||
<Badge variant="outline" className="shrink-0">
|
||||
{run.source}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={run.status === "failed" ? "destructive" : "secondary"}
|
||||
className="shrink-0"
|
||||
>
|
||||
{run.status.replaceAll("_", " ")}
|
||||
</Badge>
|
||||
</>
|
||||
}
|
||||
identifier={
|
||||
run.linkedIssue
|
||||
? run.linkedIssue.identifier ?? run.linkedIssue.id.slice(0, 8)
|
||||
: undefined
|
||||
}
|
||||
title={title}
|
||||
subtitle={runRowSubtitle(run, routine.variables)}
|
||||
reserveSubtitleSpace
|
||||
trailing={
|
||||
<span className="text-xs text-muted-foreground">{timeAgo(run.triggeredAt)}</span>
|
||||
}
|
||||
to={
|
||||
run.linkedIssue
|
||||
? `/issues/${run.linkedIssue.identifier ?? run.linkedIssue.id}`
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user