@sentry/junior-dashboard 0.232.0 → 0.234.0

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

@@ -0,0 +1,358 @@
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import {
+  CalendarClock,
+  LockKeyhole,
+  MoreHorizontal,
+  Trash2,
+  Zap,
+} from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { Link, useLocation } from "react-router";
+import { ActorAvatar } from "../../components/ActorAvatar";
+import { SelectableRow } from "../../components/SelectableRow";
+import { StatusChip } from "../../components/StatusChip";
+import { formatRelativeTime, formatTime, peoplePath } from "../../format";
+import { cn } from "../../styles";
+
+const desktopColumns =
+  "xl:grid-cols-[minmax(0,1fr)_9rem_16rem_10rem_7rem_2.75rem]";
+
+/** Keep the management headings aligned with the row fields. */
+export function AutomationListHeader() {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "hidden items-center gap-4 border-b border-dashboard-border-subtle px-4 py-2.5 text-xs text-dashboard-text-muted xl:grid",
+        desktopColumns,
+      )}
+    >
+      <span>Automation</span>
+      <span>Creator</span>
+      <span>Trigger</span>
+      <span>Destination</span>
+      <span>Last run</span>
+      <span className="sr-only">Actions</span>
+    </div>
+  );
+}
+
+/** Show purpose, ownership, and trigger state without opening the details. */
+export function AutomationRow(props: {
+  deleting: boolean;
+  onDelete(): void;
+  onSelect(): void;
+  selected: boolean;
+  automation: AutomationSummary;
+}) {
+  const { automation } = props;
+  const location = useLocation();
+  const creator = (
+    <>
+      <ActorAvatar
+        imageUrl={automation.createdByAvatarUrl}
+        name={automation.createdBy}
+        size="list"
+      />
+      <span className="truncate">{automation.createdBy}</span>
+    </>
+  );
+  return (
+    <article role="listitem">
+      <SelectableRow
+        className={cn(
+          "relative grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] items-center gap-x-3 gap-y-2 px-4 py-3 xl:gap-x-4",
+          desktopColumns,
+        )}
+        onSelect={props.onSelect}
+        selected={props.selected}
+      >
+        <button
+          aria-expanded={props.selected}
+          aria-label={`View automation details: ${automation.title}`}
+          className="col-span-2 pr-11 xl:pr-0 min-w-0 cursor-pointer rounded border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus xl:col-span-1"
+          onClick={props.onSelect}
+          type="button"
+        >
+          <span
+            className="block truncate font-display text-base font-medium text-dashboard-text"
+            title={automation.title}
+          >
+            {automation.title}
+          </span>
+          <span
+            className="mt-1 block truncate text-xs text-dashboard-text-muted"
+            title={automation.instruction}
+          >
+            {automation.instruction}
+          </span>
+        </button>
+        <div className="row-start-2 min-w-0 xl:row-auto">
+          {automation.createdByEmail ? (
+            <Link
+              className="inline-flex max-w-full items-center gap-2 rounded text-sm text-dashboard-text no-underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+              title={automation.createdBy}
+              to={peoplePath(automation.createdByEmail)}
+            >
+              {creator}
+            </Link>
+          ) : (
+            <span
+              className="inline-flex max-w-full items-center gap-2 text-sm text-dashboard-text"
+              title={automation.createdBy}
+            >
+              {creator}
+            </span>
+          )}
+        </div>
+        <div className="col-span-2 row-start-3 min-w-0 xl:col-span-1 xl:row-auto">
+          <AutomationTrigger automation={automation} />
+        </div>
+        <div className="col-start-2 row-start-2 min-w-0 text-right xl:col-auto xl:row-auto xl:text-left">
+          <span className="inline-flex max-w-full items-center gap-1 text-xs text-dashboard-text-muted xl:text-sm xl:text-dashboard-text">
+            {automation.destination.visibility === "private" ? (
+              <LockKeyhole
+                aria-label="Private destination"
+                role="img"
+                size={12}
+                className="shrink-0"
+              />
+            ) : null}
+            <span className="truncate">{automation.destination.label}</span>
+          </span>
+        </div>
+        <div className="col-span-2 min-w-0 xl:col-span-1">
+          <span className="text-xs text-dashboard-text-muted xl:hidden">
+            Last run{" "}
+          </span>
+          <span
+            className="text-xs text-dashboard-text-muted xl:text-sm xl:text-dashboard-text"
+            title={
+              automation.lastRunAt
+                ? formatTime(automation.lastRunAt, {
+                    dateStyle: "medium",
+                    timeStyle: "short",
+                  })
+                : undefined
+            }
+          >
+            {automation.lastRunAt
+              ? formatRelativeTime(automation.lastRunAt)
+              : "Never"}
+          </span>
+          {automation.lastRunStatus === "failed" ||
+          automation.lastRunStatus === "blocked" ? (
+            <Link
+              className="block text-xs text-amber-300 underline"
+              to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
+            >
+              Last run {automation.lastRunStatus}
+            </Link>
+          ) : null}
+        </div>
+        <div className="absolute right-3 top-3 xl:static">
+          {automation.ownedByViewer ? (
+            <AutomationActions
+              editPath={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/edit${location.search}`}
+              deleting={props.deleting}
+              onDelete={props.onDelete}
+              title={automation.title}
+            />
+          ) : null}
+        </div>
+      </SelectableRow>
+    </article>
+  );
+}
+
+function AutomationTrigger({ automation }: { automation: AutomationSummary }) {
+  const scheduled = automation.kind === "scheduled";
+  const Icon = scheduled ? CalendarClock : Zap;
+  let summary: string;
+  let detail: string;
+  let status: string | undefined;
+  let conditions: string | undefined;
+
+  if (automation.kind === "scheduled") {
+    summary = automation.schedule.includes(automation.timezone)
+      ? automation.schedule
+      : `${automation.schedule} (${automation.timezone})`;
+    status = automation.status === "active" ? undefined : automation.status;
+    detail = "No next run";
+    if (automation.status === "blocked") {
+      detail = "Future runs are blocked";
+    } else if (automation.status === "paused") {
+      detail = "Future triggers will not start work";
+    } else if (automation.status === "active" && automation.nextRunAt) {
+      const nextRun = new Date(automation.nextRunAt).toLocaleString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        timeZone: automation.timezone,
+        timeZoneName: "short",
+      });
+      detail = `Next ${nextRun}`;
+    }
+  } else {
+    summary = automation.resource;
+    detail = automation.events
+      .map((event) => event.replaceAll(/[._]/g, " "))
+      .join(", ");
+    status =
+      automation.status === "paused"
+        ? "paused"
+        : automation.triggerAvailable
+          ? undefined
+          : "Trigger unavailable";
+    conditions = Object.entries(automation.match ?? {})
+      .map(
+        ([field, value]) =>
+          `${field}: ${Array.isArray(value) ? value.join(" or ") : String(value)}`,
+      )
+      .join(" · ");
+  }
+  return (
+    <div className="flex items-start gap-2">
+      <Icon
+        aria-label={
+          scheduled
+            ? "Scheduled automation"
+            : `${automation.source} event automation`
+        }
+        className="mt-0.5 shrink-0 text-dashboard-text-muted"
+        role="img"
+        size={16}
+      />
+      <div className="min-w-0">
+        <div className="break-words text-sm text-dashboard-text">{summary}</div>
+        <div className="mt-1 break-words text-xs text-dashboard-text-muted">
+          {detail}
+        </div>
+        {conditions ? (
+          <div className="mt-1 break-words text-xs text-dashboard-text-muted">
+            {conditions}
+          </div>
+        ) : null}
+        {status ? (
+          <StatusChip
+            className="mt-1 xl:mt-2"
+            size="compact"
+            tone={
+              status === "completed" || status === "paused"
+                ? "neutral"
+                : "warning"
+            }
+          >
+            {status}
+          </StatusChip>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function AutomationActions(props: {
+  editPath: string;
+  deleting: boolean;
+  onDelete(): void;
+  title: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  const item = useRef<HTMLButtonElement>(null);
+  const menuId = useId();
+
+  useEffect(() => {
+    if (!open) return;
+    item.current?.focus();
+    function closeOutside(event: PointerEvent) {
+      if (!root.current?.contains(event.target as Node)) setOpen(false);
+    }
+    document.addEventListener("pointerdown", closeOutside);
+    return () => document.removeEventListener("pointerdown", closeOutside);
+  }, [open]);
+
+  function close() {
+    setOpen(false);
+    trigger.current?.focus();
+  }
+
+  return (
+    <div
+      className="relative"
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          close();
+        } else if (
+          ["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)
+        ) {
+          event.preventDefault();
+          setOpen(true);
+          const items = Array.from(
+            root.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ??
+              [],
+          );
+          const index = items.indexOf(document.activeElement as HTMLElement);
+          const next =
+            event.key === "Home"
+              ? 0
+              : event.key === "End"
+                ? items.length - 1
+                : (index + (event.key === "ArrowUp" ? -1 : 1) + items.length) %
+                  items.length;
+          items[next]?.focus();
+        }
+      }}
+      ref={root}
+    >
+      <button
+        aria-controls={open ? menuId : undefined}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-label={`Actions: ${props.title}`}
+        className="grid size-11 cursor-pointer place-items-center rounded-md border-0 bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus disabled:cursor-not-allowed disabled:opacity-50 xl:size-9"
+        disabled={props.deleting}
+        onClick={() => setOpen(!open)}
+        ref={trigger}
+        type="button"
+      >
+        <MoreHorizontal aria-hidden="true" size={18} />
+      </button>
+      {open ? (
+        <div
+          aria-label={`Actions: ${props.title}`}
+          className="absolute right-0 top-full z-20 min-w-36 rounded-md border border-dashboard-border bg-dashboard-surface-raised p-1 shadow-lg"
+          id={menuId}
+          onClick={(event) => event.stopPropagation()}
+          role="menu"
+        >
+          <Link
+            role="menuitem"
+            to={props.editPath}
+            className="flex min-h-11 items-center rounded px-3 text-sm text-dashboard-text no-underline hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-dashboard-focus"
+          >
+            Edit automation
+          </Link>
+          <button
+            className="flex min-h-11 w-full cursor-pointer items-center gap-2 rounded border-0 bg-transparent px-3 text-sm text-rose-300 hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+            onClick={() => {
+              close();
+              props.onDelete();
+            }}
+            ref={item}
+            role="menuitem"
+            type="button"
+          >
+            <Trash2 aria-hidden="true" size={15} /> Delete
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,328 @@
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { CalendarClock } from "lucide-react";
+import {
+  automationScheduleIntentSchema,
+  automationSchedulePreviewSchema,
+  type AutomationEdit,
+} from "@sentry/junior/api/schema";
+import { Field } from "../../components/Field";
+import { Select } from "../../components/Select";
+import { TextInput } from "../../components/TextInput";
+import { Button } from "../../components/Button";
+import { post, DashboardApiError } from "../../http";
+import { cn } from "../../styles";
+import {
+  scheduleDraft,
+  weekdays,
+  type AutomationScheduleDraft,
+} from "./automationDraft";
+
+/** Edit calendar fields and preview the next run without saving. */
+export function AutomationScheduleFields(props: {
+  automation: Extract<AutomationEdit, { kind: "scheduled" }>;
+  value?: AutomationScheduleDraft;
+  onChange(value: AutomationScheduleDraft | undefined): void;
+}) {
+  const value = props.value ?? scheduleDraft(props.automation);
+  const [previewValue, setPreviewValue] = useState(props.value);
+  useEffect(() => {
+    const timer = setTimeout(() => setPreviewValue(props.value), 300);
+    return () => clearTimeout(timer);
+  }, [props.value]);
+  const parsed = automationScheduleIntentSchema.safeParse(previewValue);
+  const preview = useQuery({
+    queryKey: [
+      "dashboard",
+      "automation-schedule-preview",
+      props.automation.id,
+      previewValue,
+    ],
+    enabled: Boolean(previewValue) && parsed.success,
+    retry: false,
+    queryFn: () =>
+      post(
+        automationSchedulePreviewSchema,
+        `/api/automations/scheduled/${encodeURIComponent(props.automation.id)}/preview`,
+        previewValue,
+      ),
+  });
+  const frequency = value.kind === "recurring" ? value.frequency : "once";
+  const time = value.kind === "recurring" ? value.time : value.timing.time;
+  const nextRun = props.value
+    ? preview.data?.nextRunAtMs
+    : props.automation.nextRunAtMs;
+  const waiting = props.value !== previewValue || preview.isFetching;
+  const issue =
+    preview.error instanceof DashboardApiError
+      ? preview.error.apiError
+      : preview.error
+        ? "Schedule preview could not be loaded. Try again."
+        : props.value && !parsed.success && !waiting
+          ? parsed.error.issues[0]?.message
+          : undefined;
+  return (
+    <>
+      <div className="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
+        <Field label="Repeat" htmlFor="schedule-frequency">
+          <Select
+            id="schedule-frequency"
+            value={frequency}
+            onChange={(e) => {
+              const frequency = e.target.value;
+              if (
+                frequency !== "once" &&
+                frequency !== "daily" &&
+                frequency !== "weekly" &&
+                frequency !== "monthly" &&
+                frequency !== "yearly"
+              )
+                return;
+              props.onChange(
+                frequency === "once"
+                  ? {
+                      kind: "one_off",
+                      timezone:
+                        value.timezone ?? props.automation.schedule.timezone,
+                      timing: { type: "at", date: "", time },
+                    }
+                  : {
+                      kind: "recurring",
+                      timezone: value.timezone,
+                      time,
+                      frequency,
+                      interval: 1,
+                      weekdays: frequency === "weekly" ? ["monday"] : undefined,
+                      dayOfMonth: ["monthly", "yearly"].includes(frequency)
+                        ? 1
+                        : undefined,
+                      month: frequency === "yearly" ? 1 : undefined,
+                    },
+              );
+            }}
+          >
+            <option value="once">Once</option>
+            <option value="daily">Every day</option>
+            <option value="weekly">Every week</option>
+            <option value="monthly">Every month</option>
+            <option value="yearly">Every year</option>
+          </Select>
+        </Field>
+        <Field label="Time" htmlFor="schedule-time">
+          <TextInput
+            size="comfortable"
+            id="schedule-time"
+            type="time"
+            value={time}
+            onChange={(e) =>
+              props.onChange(
+                value.kind === "recurring"
+                  ? { ...value, time: e.target.value }
+                  : {
+                      ...value,
+                      timing: {
+                        type: "at",
+                        date: value.timing.date,
+                        time: e.target.value,
+                      },
+                    },
+              )
+            }
+          />
+        </Field>
+      </div>
+      {value.kind === "recurring" ? (
+        <>
+          {value.frequency === "weekly" ? (
+            <fieldset>
+              <legend className="mb-2 text-sm font-semibold">On</legend>
+              <div className="grid grid-cols-7 gap-1.5">
+                {[...weekdays.slice(1), weekdays[0]].map((day) => (
+                  <button
+                    type="button"
+                    key={day}
+                    aria-label={day}
+                    aria-pressed={value.weekdays?.includes(day) ?? false}
+                    onClick={() =>
+                      props.onChange({
+                        ...value,
+                        weekdays: value.weekdays?.includes(day)
+                          ? value.weekdays.filter((d) => d !== day)
+                          : [...(value.weekdays ?? []), day],
+                      })
+                    }
+                    className={cn(
+                      "min-h-11 cursor-pointer rounded border px-1 text-xs font-medium capitalize focus-visible:outline-2 focus-visible:outline-dashboard-focus sm:min-h-10 sm:text-sm",
+                      value.weekdays?.includes(day)
+                        ? "border-dashboard-focus/50 bg-dashboard-focus/10 text-dashboard-focus"
+                        : "border-dashboard-border-emphasis text-dashboard-text-muted hover:bg-dashboard-fill-hover",
+                    )}
+                  >
+                    {day.slice(0, 3)}
+                  </button>
+                ))}
+              </div>
+            </fieldset>
+          ) : null}
+          <div className="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
+            <Field
+              label="Interval"
+              htmlFor="schedule-interval"
+              help="Number of calendar periods between runs."
+            >
+              <TextInput
+                size="comfortable"
+                id="schedule-interval"
+                type="number"
+                min={1}
+                max={365}
+                value={value.interval ?? 1}
+                onChange={(e) =>
+                  props.onChange({ ...value, interval: e.target.valueAsNumber })
+                }
+              />
+            </Field>
+            <Field label="Start date" htmlFor="schedule-start">
+              <TextInput
+                size="comfortable"
+                id="schedule-start"
+                type="date"
+                value={value.startDate ?? ""}
+                onChange={(e) =>
+                  props.onChange({
+                    ...value,
+                    startDate: e.target.value || undefined,
+                  })
+                }
+              />
+            </Field>
+          </div>
+          {value.frequency === "monthly" || value.frequency === "yearly" ? (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <Field label="Day of month" htmlFor="schedule-day">
+                <TextInput
+                  size="comfortable"
+                  id="schedule-day"
+                  type="number"
+                  min={1}
+                  max={31}
+                  value={value.dayOfMonth ?? 1}
+                  onChange={(e) =>
+                    props.onChange({
+                      ...value,
+                      dayOfMonth: e.target.valueAsNumber,
+                    })
+                  }
+                />
+              </Field>
+              {value.frequency === "yearly" ? (
+                <Field label="Month" htmlFor="schedule-month">
+                  <Select
+                    id="schedule-month"
+                    value={value.month ?? 1}
+                    onChange={(e) =>
+                      props.onChange({
+                        ...value,
+                        month: Number(e.target.value),
+                      })
+                    }
+                  >
+                    {Array.from({ length: 12 }, (_, index) => (
+                      <option key={index} value={index + 1}>
+                        {new Intl.DateTimeFormat("en", {
+                          month: "long",
+                          timeZone: "UTC",
+                        }).format(new Date(Date.UTC(2026, index, 1)))}
+                      </option>
+                    ))}
+                  </Select>
+                </Field>
+              ) : null}
+            </div>
+          ) : null}
+        </>
+      ) : (
+        <Field label="Date" htmlFor="schedule-date">
+          <TextInput
+            size="comfortable"
+            id="schedule-date"
+            type="date"
+            value={value.timing.date}
+            onChange={(e) =>
+              props.onChange({
+                ...value,
+                timing: { type: "at", time, date: e.target.value },
+              })
+            }
+          />
+        </Field>
+      )}
+      <Field
+        label="Timezone"
+        htmlFor="schedule-timezone"
+        help="Use an IANA timezone. The schedule follows local time, including daylight saving time."
+      >
+        <TextInput
+          size="comfortable"
+          id="schedule-timezone"
+          list="automation-timezones"
+          value={value.timezone ?? ""}
+          onChange={(e) =>
+            props.onChange({ ...value, timezone: e.target.value })
+          }
+        />
+        <datalist id="automation-timezones">
+          {["UTC", ...Intl.supportedValuesOf("timeZone")].map((zone) => (
+            <option key={zone}>{zone}</option>
+          ))}
+        </datalist>
+      </Field>
+      <div
+        role="status"
+        className="flex gap-3 rounded-md bg-dashboard-fill-soft p-3 text-sm leading-relaxed"
+      >
+        <CalendarClock
+          aria-hidden
+          size={17}
+          className="mt-0.5 shrink-0 text-dashboard-text-muted"
+        />
+        <div>
+          {waiting ? (
+            "Checking schedule…"
+          ) : issue ? (
+            <>
+              <span className="text-rose-300">{issue}</span>
+              {preview.error ? (
+                <Button onClick={() => void preview.refetch()}>
+                  Try again
+                </Button>
+              ) : null}
+            </>
+          ) : nextRun ? (
+            <>
+              Next run{" "}
+              {new Intl.DateTimeFormat(undefined, {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+                hour: "numeric",
+                minute: "2-digit",
+                timeZoneName: "short",
+                timeZone: props.value
+                  ? (preview.data?.schedule.timezone ?? "UTC")
+                  : props.automation.schedule.timezone,
+              }).format(nextRun)}
+            </>
+          ) : (
+            "No next run."
+          )}
+        </div>
+      </div>
+      {props.value ? (
+        <Button className="w-fit" onClick={() => props.onChange(undefined)}>
+          Keep saved schedule
+        </Button>
+      ) : null}
+    </>
+  );
+}