@sentry/junior-dashboard 0.266.0 → 0.267.0

package/src/client/format.ts

@@ -796,9 +796,16 @@ export function workspacePath(workspaceId: string): string {
   return `/system/workspaces/${encodeURIComponent(workspaceId)}`;
 }
 
-/** Build the canonical automation detail route for an automation id. */
-export function automationPath(automationId: string): string {
-  return `/automations/${encodeURIComponent(automationId)}`;
+/** Automation page tabs. Overview is the bare Automation path. */
+export type AutomationTab = "overview" | "runs" | "versions" | "edit";
+
+/** Build the route for one Automation page tab, or its edit mode. */
+export function automationPath(
+  automationId: string,
+  tab: AutomationTab = "overview",
+): string {
+  const base = `/automations/${encodeURIComponent(automationId)}`;
+  return tab === "overview" ? base : `${base}/${tab}`;
 }
 
 function normalizeLanguage(language: string | undefined): BundledLanguage {

package/src/client/pages/automations/{AutomationLifecycle.tsx → AutomationActions.tsx}

@@ -12,23 +12,30 @@ import {
   TooltipTrigger,
 } from "../../components/ui/tooltip";
 import { Link } from "react-router";
-import { CircleHelp, Pencil, Settings2, Trash2 } from "lucide-react";
+import { CircleHelp, Pencil, Trash2 } from "lucide-react";
 import {
   automationEditSchema,
   type AutomationSummary,
 } from "@sentry/junior/api/schema";
-import { Button } from "../../components/ui/button";
+import { Button, buttonVariants } from "../../components/ui/button";
 import { FormNotice } from "../../components/FormNotice";
 import { DashboardApiError, fetchDashboardJson, post } from "../../http";
 
-/** Keep revision-checked lifecycle actions available in the fixed details footer. */
-export function AutomationLifecycle({
+/**
+ * Header actions for one Automation: Edit, then creator-only Pause or Resume
+ * and Delete. Public readers can edit settings, but only the creator controls
+ * lifecycle. Lifecycle actions re-read the revision before they apply.
+ */
+export function AutomationActions({
   automation,
   editPath,
+  editVariant,
   onDelete,
 }: {
   automation: AutomationSummary;
   editPath: string;
+  /** Use "default" when a notice on the page owns the main action. */
+  editVariant: "default" | "primary";
   onDelete(source: HTMLButtonElement): void;
 }) {
   const toast = useToastManager();
@@ -36,8 +43,6 @@ export function AutomationLifecycle({
   const completed = automation.status === "completed";
   const paused = automation.status === "paused";
   const blocked = automation.status === "blocked";
-  // Public readers can edit settings, but only the creator controls lifecycle.
-  const canEdit = !completed;
   const canPause = automation.ownedByViewer && !completed;
   const action = paused || blocked ? "resume" : "pause";
   const mutation = useMutation({
@@ -50,7 +55,7 @@ export function AutomationLifecycle({
       // Do not apply the opposite action if another surface changed lifecycle.
       if (current.status !== automation.status) {
         throw new Error(
-          "The Automation changed. Close and reopen its details before trying again.",
+          "The Automation changed. Reload the page before trying again.",
         );
       }
       return post(automationEditSchema, `${path}/lifecycle`, {
@@ -80,57 +85,24 @@ export function AutomationLifecycle({
     },
   });
   return (
-    <footer
-      aria-label="Automation actions"
-      className="grid gap-3 border-t border-dashboard-border bg-dashboard-bg-elevated p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]"
-    >
-      <div className="flex items-center gap-2">
-        <div className="mr-auto flex items-center gap-1">
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Link
-                  aria-label={canEdit ? "Edit automation" : "View settings"}
-                  className="grid size-11 place-items-center rounded-md text-dashboard-text-muted no-underline hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-dashboard-focus"
-                  to={editPath}
-                >
-                  {canEdit ? (
-                    <Pencil aria-hidden="true" size={16} />
-                  ) : (
-                    <Settings2 aria-hidden="true" size={16} />
-                  )}
-                </Link>
-              }
-            />
-            <TooltipContent size="compact">
-              {canEdit ? "Edit automation" : "View settings"}
-            </TooltipContent>
-          </Tooltip>
-          {automation.ownedByViewer ? (
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button
-                    focusableWhenDisabled
-                    aria-label="Delete automation"
-                    className="min-h-11 min-w-11"
-                    size="icon"
-                    variant="danger"
-                    onClick={(event) => onDelete(event.currentTarget)}
-                    disabled={mutation.isPending}
-                  >
-                    <Trash2 aria-hidden="true" size={16} />
-                  </Button>
-                }
-              />
-              <TooltipContent size="compact">Delete automation</TooltipContent>
-            </Tooltip>
-          ) : null}
-        </div>
+    <div className="grid min-w-0 justify-items-stretch gap-3 md:justify-items-end">
+      <div
+        aria-label="Automation actions"
+        className="flex flex-wrap items-center gap-2"
+        role="group"
+      >
+        {completed ? null : (
+          <Link
+            className={buttonVariants({ variant: editVariant })}
+            to={editPath}
+          >
+            <Pencil aria-hidden="true" size={14} />
+            Edit automation
+          </Link>
+        )}
         {canPause ? (
           <>
             <Button
-              className="min-h-11"
               disabled={mutation.isPending}
               onClick={() => mutation.mutate()}
             >
@@ -142,17 +114,15 @@ export function AutomationLifecycle({
             </Button>
             <Popover>
               <PopoverTrigger
-                render={
-                  <Button
-                    aria-label="About pausing"
-                    className="min-h-11 min-w-11"
-                    size="icon"
-                  />
-                }
+                render={<Button aria-label="About pausing" size="icon" />}
               >
                 <CircleHelp aria-hidden="true" size={16} />
               </PopoverTrigger>
-              <PopoverContent side="top" align="end" aria-label="About pausing">
+              <PopoverContent
+                side="bottom"
+                align="end"
+                aria-label="About pausing"
+              >
                 <PopoverDescription>
                   Pausing stops new runs. Work already queued or running may
                   finish. Resuming skips missed runs and waits for the next
@@ -165,14 +135,35 @@ export function AutomationLifecycle({
             </Popover>
           </>
         ) : null}
+        {automation.ownedByViewer ? (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  focusableWhenDisabled
+                  aria-label="Delete automation"
+                  size="icon"
+                  variant="danger"
+                  onClick={(event) => onDelete(event.currentTarget)}
+                  disabled={mutation.isPending}
+                >
+                  <Trash2 aria-hidden="true" size={16} />
+                </Button>
+              }
+            />
+            <TooltipContent size="compact">Delete automation</TooltipContent>
+          </Tooltip>
+        ) : null}
       </div>
       {mutation.error ? (
-        <FormNotice tone="error" title="Could not update this automation.">
-          {mutation.error instanceof DashboardApiError
-            ? (mutation.error.apiError ?? "Try again.")
-            : mutation.error.message}
-        </FormNotice>
+        <div className="max-w-sm">
+          <FormNotice tone="error" title="Could not update this automation.">
+            {mutation.error instanceof DashboardApiError
+              ? (mutation.error.apiError ?? "Try again.")
+              : mutation.error.message}
+          </FormNotice>
+        </div>
       ) : null}
-    </footer>
+    </div>
   );
 }

package/src/client/pages/automations/AutomationDraftChanges.tsx

@@ -0,0 +1,171 @@
+import type {
+  AutomationEdit,
+  AutomationSummary,
+} from "@sentry/junior/api/schema";
+import { Button } from "../../components/ui/button";
+import { Card } from "../../components/layout/Card";
+import { cn } from "../../styles";
+import { automationOutcomeLabel } from "./automationOutcomes";
+import {
+  createAutomationDraft,
+  scheduleDraft,
+  type AutomationDraft,
+  type AutomationScheduleDraft,
+} from "./automationDraft";
+
+/** In form order, so the list reads top to bottom like the form. */
+const CHANGE_LABELS: Record<keyof AutomationDraft, string> = {
+  title: "Title",
+  instruction: "Instruction",
+  schedule: "Schedule",
+  trigger: "Trigger",
+  outcomes: "Where results go",
+  credentialMode: "Credentials",
+};
+
+/**
+ * List unsaved fields with the saved value, the new value, and an Undo.
+ * It sits beside the form on wide screens and below it on small screens.
+ */
+export function AutomationDraftChanges(props: {
+  changes: Partial<AutomationDraft>;
+  disabled: boolean;
+  onUndo(key: keyof AutomationDraft): void;
+  original: AutomationEdit;
+  summary: AutomationSummary;
+}) {
+  const keys = (Object.keys(CHANGE_LABELS) as (keyof AutomationDraft)[]).filter(
+    (key) => props.changes[key] !== undefined,
+  );
+  const saved = savedDraft(props.original);
+  const label = (draft: Partial<AutomationDraft>, key: keyof AutomationDraft) =>
+    draftValueLabel(draft, key, props.summary);
+  return (
+    <aside
+      aria-label="Your changes"
+      className={cn(
+        "min-w-0 lg:sticky lg:top-4 lg:self-start",
+        keys.length === 0 && "max-lg:hidden",
+      )}
+    >
+      <Card padding="sm">
+        <h2 className="m-0 mb-3 font-sans text-xs font-medium text-dashboard-text-muted">
+          Your changes
+        </h2>
+        {keys.length === 0 ? (
+          <p className="m-0 text-sm text-dashboard-text-muted">
+            No changes yet. Edit a section to see it here.
+          </p>
+        ) : (
+          <ul className="m-0 grid list-none gap-3 p-0">
+            {keys.map((key) => (
+              <li className="grid min-w-0 gap-1 text-sm" key={key}>
+                <div className="flex items-center justify-between gap-3">
+                  <span className="font-medium">{CHANGE_LABELS[key]}</span>
+                  <Button
+                    aria-label={`Undo ${CHANGE_LABELS[key].toLowerCase()} change`}
+                    disabled={props.disabled}
+                    onClick={() => props.onUndo(key)}
+                  >
+                    Undo
+                  </Button>
+                </div>
+                <p className="m-0 line-clamp-3 break-words whitespace-pre-wrap text-xs text-dashboard-text-muted line-through decoration-dashboard-text-muted/50">
+                  <span className="sr-only">Saved: </span>
+                  {label(saved, key)}
+                </p>
+                <p className="m-0 line-clamp-3 break-words whitespace-pre-wrap text-xs">
+                  <span className="sr-only">New: </span>
+                  {label(props.changes, key)}
+                </p>
+              </li>
+            ))}
+          </ul>
+        )}
+        <p className="mt-3 mb-0 text-xs leading-relaxed text-dashboard-text-muted">
+          Saving creates a new version. It does not run this automation.
+        </p>
+      </Card>
+    </aside>
+  );
+}
+
+/** The saved values in draft form, including the saved schedule. */
+function savedDraft(original: AutomationEdit): AutomationDraft {
+  const draft = createAutomationDraft(original);
+  return original.kind === "scheduled"
+    ? { ...draft, schedule: scheduleDraft(original) }
+    : draft;
+}
+
+function draftValueLabel(
+  draft: Partial<AutomationDraft>,
+  key: keyof AutomationDraft,
+  summary: AutomationSummary,
+): string {
+  switch (key) {
+    case "title":
+      return draft.title || "First line of the instruction";
+    case "instruction":
+      return draft.instruction || "Empty";
+    case "credentialMode":
+      return draft.credentialMode === "creator"
+        ? summary.ownedByViewer
+          ? "Your connected accounts"
+          : `${summary.createdBy}'s connected accounts`
+        : "System credentials only";
+    case "outcomes":
+      return draft.outcomes?.length
+        ? draft.outcomes
+            .map((outcome) =>
+              automationOutcomeLabel(outcome, summary.destination),
+            )
+            .join(", ")
+        : "No success message";
+    case "schedule":
+      return draft.schedule ? scheduleDraftLabel(draft.schedule) : "Not set";
+    case "trigger": {
+      const trigger = draft.trigger;
+      if (!trigger) return "Not set";
+      const resource = trigger.identifier
+        ? `${trigger.label} · ${trigger.identifier}`
+        : `Any ${trigger.label}`;
+      const filters = Object.keys(trigger.match ?? {}).length;
+      return [
+        resource,
+        trigger.events.join(", "),
+        filters ? `${filters} ${filters === 1 ? "filter" : "filters"}` : "",
+      ]
+        .filter(Boolean)
+        .join(" · ");
+    }
+  }
+}
+
+const FREQUENCY_UNITS = {
+  daily: "day",
+  weekly: "week",
+  monthly: "month",
+  yearly: "year",
+} as const;
+
+/** Describe a schedule draft. Saved and new values use the same words. */
+function scheduleDraftLabel(schedule: AutomationScheduleDraft): string {
+  if (schedule.kind === "one_off") {
+    return `Once on ${schedule.timing.date} at ${schedule.timing.time} (${schedule.timezone})`;
+  }
+  const interval = schedule.interval ?? 1;
+  const unit = FREQUENCY_UNITS[schedule.frequency];
+  const cadence = interval === 1 ? unit : `${interval} ${unit}s`;
+  const detail =
+    schedule.frequency === "weekly" && schedule.weekdays?.length
+      ? ` on ${schedule.weekdays.map((day) => day.slice(0, 1).toUpperCase() + day.slice(1, 3)).join(", ")}`
+      : schedule.frequency === "monthly" && schedule.dayOfMonth
+        ? ` on day ${schedule.dayOfMonth}`
+        : schedule.frequency === "yearly" &&
+            schedule.month &&
+            schedule.dayOfMonth
+          ? ` on ${String(schedule.month).padStart(2, "0")}-${String(schedule.dayOfMonth).padStart(2, "0")}`
+          : "";
+  return `Every ${cadence}${detail} at ${schedule.time} (${schedule.timezone})`;
+}