@sentry/junior-dashboard 0.233.0 → 0.235.0

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

@@ -0,0 +1,343 @@
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import {
+  CalendarClock,
+  LockKeyhole,
+  MoreHorizontal,
+  Trash2,
+  Zap,
+} from "lucide-react";
+import { type ReactNode, 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, peoplePath } from "../../format";
+import {
+  automationEventConditions,
+  automationEventNames,
+  automationScheduleLabel,
+  formatAutomationRunTime,
+} from "./automationFormat";
+
+/**
+ * Show one automation as a compact card: what it is, where it posts, who owns
+ * it, and when it runs. Instructions, timezones, and event conditions stay in
+ * the details drawer.
+ */
+export function AutomationRow(props: {
+  deleting: boolean;
+  onDelete(): void;
+  onSelect(): void;
+  selected: boolean;
+  automation: AutomationSummary;
+}) {
+  const { automation } = props;
+  const location = useLocation();
+  const status = automationStatus(automation);
+  const creator = (
+    <>
+      <ActorAvatar
+        imageUrl={automation.createdByAvatarUrl}
+        name={automation.createdBy}
+        size="list"
+      />
+      <span className="truncate">{automation.createdBy}</span>
+    </>
+  );
+  return (
+    <article
+      className="min-w-0 rounded-lg border border-dashboard-border-subtle bg-dashboard-fill-faint"
+      role="listitem"
+    >
+      <SelectableRow
+        className="flex items-start gap-3 rounded-lg px-4 py-3.5"
+        onSelect={props.onSelect}
+        selected={props.selected}
+      >
+        <div className="min-w-0 flex-1">
+          <button
+            aria-expanded={props.selected}
+            aria-label={`View automation details: ${automation.title}`}
+            className="block w-full 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"
+            onClick={props.onSelect}
+            type="button"
+          >
+            <span className="flex min-w-0 items-center gap-2">
+              <span
+                className="truncate font-display text-base font-medium text-dashboard-text"
+                title={automation.title}
+              >
+                {automation.title}
+              </span>
+              {status ? (
+                <StatusChip
+                  className="shrink-0"
+                  size="compact"
+                  tone={
+                    status === "completed" || status === "paused"
+                      ? "neutral"
+                      : "warning"
+                  }
+                >
+                  {status}
+                </StatusChip>
+              ) : null}
+            </span>
+            <AutomationSummaryLine automation={automation} />
+          </button>
+          <div className="mt-2.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-dashboard-text-muted">
+            {automation.createdByEmail ? (
+              <Link
+                className="inline-flex min-w-0 max-w-full items-center gap-2 rounded 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 min-w-0 max-w-full items-center gap-2 text-dashboard-text"
+                title={automation.createdBy}
+              >
+                {creator}
+              </span>
+            )}
+            <AutomationTiming automation={automation} />
+          </div>
+        </div>
+        {automation.ownedByViewer ? (
+          <div className="-mr-2 -mt-1.5 shrink-0">
+            <AutomationActions
+              editPath={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/edit${location.search}`}
+              deleting={props.deleting}
+              onDelete={props.onDelete}
+              title={automation.title}
+            />
+          </div>
+        ) : null}
+      </SelectableRow>
+    </article>
+  );
+}
+
+/** Return the one state worth flagging in the list, if the automation is not simply active. */
+function automationStatus(automation: AutomationSummary): string | undefined {
+  if (automation.kind === "scheduled") {
+    return automation.status === "active" ? undefined : automation.status;
+  }
+  if (automation.status === "paused") return "paused";
+  return automation.triggerAvailable ? undefined : "Trigger unavailable";
+}
+
+/** Combine the trigger and Destination into one muted line under the title. */
+function AutomationSummaryLine({
+  automation,
+}: {
+  automation: AutomationSummary;
+}) {
+  const scheduled = automation.kind === "scheduled";
+  const Icon = scheduled ? CalendarClock : Zap;
+  const trigger =
+    automation.kind === "scheduled"
+      ? automation.schedule
+      : `${automation.resource} · ${automationEventNames(automation)}`;
+  const conditions =
+    automation.kind === "event" ? automationEventConditions(automation) : "";
+  const triggerDetail =
+    automation.kind === "scheduled"
+      ? automationScheduleLabel(automation)
+      : conditions
+        ? `${trigger} · ${conditions}`
+        : trigger;
+  return (
+    <span className="mt-1 flex min-w-0 items-center gap-1.5 text-xs text-dashboard-text-muted">
+      <Icon
+        aria-label={
+          scheduled
+            ? "Scheduled automation"
+            : `${automation.source} event automation`
+        }
+        className="shrink-0"
+        role="img"
+        size={13}
+      />
+      <span className="min-w-0 truncate" title={triggerDetail}>
+        {trigger}
+      </span>
+      <span aria-hidden="true" className="shrink-0 opacity-45">
+        ·
+      </span>
+      {automation.destination.visibility === "private" ? (
+        <LockKeyhole
+          aria-label="Private destination"
+          className="shrink-0"
+          role="img"
+          size={12}
+        />
+      ) : null}
+      <span
+        className="min-w-0 max-w-[45%] truncate"
+        title={automation.destination.label}
+      >
+        {automation.destination.label}
+      </span>
+    </span>
+  );
+}
+
+/** Show next and last run as short relative times after the creator. */
+function AutomationTiming({ automation }: { automation: AutomationSummary }) {
+  const nextRunAt =
+    automation.kind === "scheduled" && automation.status === "active"
+      ? automation.nextRunAt
+      : undefined;
+  const lastRunTitle = automation.lastRunAt
+    ? formatAutomationRunTime(automation.lastRunAt)
+    : undefined;
+  const lastRunFailed =
+    automation.lastRunStatus === "failed" ||
+    automation.lastRunStatus === "blocked";
+  return (
+    <>
+      {nextRunAt ? (
+        <MetaItem title={formatAutomationRunTime(nextRunAt)}>
+          Next run {formatRelativeTime(nextRunAt)}
+        </MetaItem>
+      ) : null}
+      <MetaItem title={lastRunTitle}>
+        {lastRunFailed ? (
+          <Link
+            className="text-amber-300 underline"
+            to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
+          >
+            Last run {automation.lastRunStatus}
+            {automation.lastRunAt
+              ? ` ${formatRelativeTime(automation.lastRunAt)}`
+              : null}
+          </Link>
+        ) : automation.lastRunAt ? (
+          `Last run ${formatRelativeTime(automation.lastRunAt)}`
+        ) : (
+          "Never run"
+        )}
+      </MetaItem>
+    </>
+  );
+}
+
+/** Keep each separator with the item after it so wrapped lines never end in a dot. */
+function MetaItem(props: { children: ReactNode; title?: string }) {
+  return (
+    <span className="whitespace-nowrap" title={props.title}>
+      <span aria-hidden="true" className="mr-2 opacity-45">
+        ·
+      </span>
+      {props.children}
+    </span>
+  );
+}
+
+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}
+    </>
+  );
+}