apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-29 19:35:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(web): polish automations detail view

Browse source
This commit is contained in:
CREDO23 2026-05-28 15:40:18 +02:00
parent b90bed2dbd
commit 2d8d42bd9c
12 changed files with 65 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

24
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/automation-detail-content.tsx
View file

@ -72,16 +72,20 @@ export function AutomationDetailContent({
canDelete={perms.canDelete}
/>
<AutomationDefinitionSection definition={automation.definition} />
<AutomationTriggersSection
triggers={automation.triggers}
automationId={automation.id}
canUpdate={perms.canUpdate}
canDelete={perms.canDelete}
/>
<AutomationRunsSection automationId={automation.id} />
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
<div className="space-y-6 min-w-0 lg:col-span-2">
<AutomationDefinitionSection definition={automation.definition} />
<AutomationRunsSection automationId={automation.id} />
</div>
<div className="space-y-6 min-w-0">
<AutomationTriggersSection
triggers={automation.triggers}
automationId={automation.id}
canUpdate={perms.canUpdate}
canDelete={perms.canDelete}
/>
</div>
</div>
</>
);
}

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx
View file

@ -24,7 +24,7 @@ export function AutomationDefinitionSection({ definition }: AutomationDefinition
const hasInputs = !!definition.inputs;
return (
<Card>
<Card className="border-border/60 bg-accent">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
<CardTitle className="text-base font-semibold">Definition</CardTitle>
<span className="text-xs font-mono text-muted-foreground border border-border/60 rounded px-1.5 py-0.5">

60
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-loading.tsx
View file

@ -3,12 +3,13 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
/**
* Skeleton for the detail page. Same shell as the loaded view (header +
* two stacked cards) so the layout doesn't jump on data arrival.
* Skeleton for the detail page. Mirrors the loaded view's main/sidebar
* grid (Definition + Runs on the left, Triggers on the right) so layout
* doesn't reflow when data arrives.
*/
export function AutomationDetailLoading() {
return (
<div className="space-y-6">
<>
<div className="space-y-3">
<Skeleton className="h-4 w-32" />
<div className="flex items-center gap-3">
@ -18,25 +19,38 @@ export function AutomationDetailLoading() {
<Skeleton className="h-4 w-96" />
</div>
<Card>
<CardHeader>
<Skeleton className="h-5 w-32" />
</CardHeader>
<CardContent className="space-y-4">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
<Skeleton className="h-24 w-full" />
</CardContent>
</Card>
<Card>
<CardHeader>
<Skeleton className="h-5 w-24" />
</CardHeader>
<CardContent>
<Skeleton className="h-20 w-full" />
</CardContent>
</Card>
</div>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
<div className="space-y-6 min-w-0 lg:col-span-2">
<Card className="border-border/60 bg-accent">
<CardHeader>
<Skeleton className="h-5 w-32" />
</CardHeader>
<CardContent className="space-y-4">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
<Skeleton className="h-24 w-full" />
</CardContent>
</Card>
<Card className="border-border/60 bg-accent">
<CardHeader>
<Skeleton className="h-5 w-32" />
</CardHeader>
<CardContent>
<Skeleton className="h-20 w-full" />
</CardContent>
</Card>
</div>
<div className="space-y-6 min-w-0">
<Card className="border-border/60 bg-accent">
<CardHeader>
<Skeleton className="h-5 w-24" />
</CardHeader>
<CardContent>
<Skeleton className="h-20 w-full" />
</CardContent>
</Card>
</div>
</div>
</>
);
}

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-runs-section.tsx
View file

@ -23,7 +23,7 @@ export function AutomationRunsSection({ automationId }: AutomationRunsSectionPro
const runs = data?.items ?? [];
return (
<Card>
<Card className="border-border/60 bg-accent">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
<div className="space-y-1">
<CardTitle className="text-base font-semibold inline-flex items-center gap-2">

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-triggers-section.tsx
View file

@ -23,7 +23,7 @@ export function AutomationTriggersSection({
canDelete,
}: AutomationTriggersSectionProps) {
return (
<Card>
<Card className="border-border/60 bg-accent">
<CardHeader className="pb-4">
<CardTitle className="text-base font-semibold">Triggers</CardTitle>
<p className="text-xs text-muted-foreground">

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/plan-step-card.tsx
View file

@ -15,7 +15,7 @@ interface PlanStepCardProps {
*/
export function PlanStepCard({ step, index }: PlanStepCardProps) {
return (
<div className="rounded-md border border-border/60 bg-background overflow-hidden">
<div className="rounded-md border border-border/60 overflow-hidden">
<div className="flex items-center gap-2 px-4 py-2 border-b border-border/60 bg-muted/30">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
{index + 1}

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx
View file

@ -109,7 +109,7 @@ function Section({
function JsonBlock({ value }: { value: unknown }) {
return (
<pre className="rounded-md bg-background/60 px-3 py-2 text-[11px] font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-64">
<pre className="rounded-md bg-muted/40 px-3 py-2 text-[11px] font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-64">
{JSON.stringify(value, null, 2)}
</pre>
);

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-row.tsx
View file

@ -24,7 +24,7 @@ export function RunRow({ run, automationId }: RunRowProps) {
: formatRelativeDate(run.created_at);
return (
<div className="rounded-md border border-border/60 bg-background overflow-hidden">
<div className="rounded-md border border-border/60 overflow-hidden">
<button
type="button"
onClick={() => setOpen((value) => !value)}

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/runs-loading.tsx
View file

@ -9,7 +9,7 @@ export function RunsLoading() {
{ROW_KEYS.map((key) => (
<div
key={key}
className="flex items-center justify-between gap-4 rounded-md border border-border/60 bg-background/50 px-4 py-3"
className="flex items-center justify-between gap-4 rounded-md border border-border/60 px-4 py-3"
>
<div className="flex items-center gap-3">
<Skeleton className="h-5 w-20 rounded-md" />

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
View file

@ -48,7 +48,7 @@ export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: Tri
return (
<>
<div className="rounded-md border border-border/60 bg-background overflow-hidden">
<div className="rounded-md border border-border/60 overflow-hidden">
<div className="flex items-center justify-between gap-4 px-4 py-3 border-b border-border/60">
<div className="flex items-center gap-3 min-w-0">
<CalendarClock className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />

2
surfsense_web/app/dashboard/[search_space_id]/automations/new/components/automation-json-form.tsx
View file

@ -75,7 +75,7 @@ export function AutomationJsonForm({ searchSpaceId }: AutomationJsonFormProps) {
const hasIssues = issues.length > 0;
return (
<Card>
<Card className="border-border/60 bg-accent">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
<CardTitle className="text-base font-semibold inline-flex items-center gap-2">
<FileJson className="h-4 w-4 text-muted-foreground" aria-hidden />