@sentry/junior-dashboard 0.233.0 → 0.234.0

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

@@ -0,0 +1,264 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  automationEventCatalogSchema,
+  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 { FormNotice } from "../../components/FormNotice";
+import { fetchDashboardJson } from "../../http";
+
+type Trigger = Extract<AutomationEdit, { kind: "event" }>["trigger"];
+
+/** Render registered Event choices without discarding unsupported saved selectors. */
+export function AutomationEventFields(props: {
+  value: Trigger;
+  original: Trigger;
+  onChange(value: Trigger): void;
+}) {
+  const catalog = useQuery({
+    queryKey: ["dashboard", "automation-event-catalog"],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationEventCatalogSchema,
+        "/api/automations/event-catalog",
+        signal,
+      ),
+    retry: false,
+  });
+  const resource = catalog.data?.find(
+    (item) =>
+      item.namespace === props.value.namespace &&
+      item.type === props.value.resourceType,
+  );
+  const unsupported =
+    !resource ||
+    props.value.events.some(
+      (event) => !resource.supportedEvents.includes(event),
+    ) ||
+    Object.entries(props.value.match ?? {}).some(([key, value]) => {
+      const field = resource.matchFields?.[key];
+      if (!field) return true;
+      return (Array.isArray(value) ? value : [value]).some(
+        (item) =>
+          typeof item !== field.kind ||
+          (field.enum && !field.enum.includes(String(item))),
+      );
+    });
+  const setMatch = (
+    key: string,
+    value: NonNullable<Trigger["match"]>[string] | undefined,
+  ) => {
+    const match = { ...props.value.match };
+    if (value === undefined) delete match[key];
+    else match[key] = value;
+    props.onChange({ ...props.value, match });
+  };
+  return (
+    <>
+      {catalog.error ? (
+        <FormNotice title="Event choices could not be loaded.">
+          Saved values are kept.{" "}
+          <Button onClick={() => void catalog.refetch()}>Try again</Button>
+        </FormNotice>
+      ) : catalog.isPending ? (
+        <p role="status">Loading event choices…</p>
+      ) : null}
+      {unsupported && catalog.data ? (
+        <FormNotice title="Saved trigger · Kept unchanged">
+          Some saved values are not in the current catalog. You can edit other
+          fields, or select a new resource type to replace the trigger.
+          <pre className="whitespace-pre-wrap break-all text-xs">
+            {JSON.stringify(props.value, null, 2)}
+          </pre>
+        </FormNotice>
+      ) : null}
+      <Field
+        label={unsupported ? "Replace trigger" : "Resource type"}
+        htmlFor="trigger-resource"
+      >
+        <Select
+          id="trigger-resource"
+          value={
+            unsupported
+              ? ""
+              : `${props.value.namespace}:${props.value.resourceType}`
+          }
+          onChange={(e) => {
+            const next = catalog.data?.find(
+              (item) => `${item.namespace}:${item.type}` === e.target.value,
+            );
+            if (!next) return;
+            if (
+              !window.confirm(
+                "Replace the saved trigger? Its resource, events, and conditions will be cleared.",
+              )
+            )
+              return;
+            props.onChange({
+              namespace: next.namespace,
+              resourceType: next.type,
+              identifier: "",
+              label: "",
+              events: [],
+            });
+          }}
+        >
+          <option value="" disabled>
+            Keep saved trigger
+          </option>
+          {catalog.data?.map((item) => (
+            <option
+              key={`${item.namespace}:${item.type}`}
+              value={`${item.namespace}:${item.type}`}
+            >
+              {item.namespace} · {item.type.replaceAll("_", " ")}
+            </option>
+          ))}
+        </Select>
+      </Field>
+      {!unsupported && resource ? (
+        <>
+          <Field label="Resource name" htmlFor="trigger-label">
+            <TextInput
+              size="comfortable"
+              id="trigger-label"
+              value={props.value.label}
+              onChange={(e) =>
+                props.onChange({ ...props.value, label: e.target.value })
+              }
+            />
+          </Field>
+          <Field
+            label="Resource identifier"
+            htmlFor="trigger-identifier"
+            help="Use the exact provider resource identifier, not its display name."
+          >
+            <TextInput
+              size="comfortable"
+              id="trigger-identifier"
+              value={props.value.identifier}
+              onChange={(e) =>
+                props.onChange({ ...props.value, identifier: e.target.value })
+              }
+            />
+          </Field>
+          <fieldset>
+            <legend className="mb-2 text-sm font-semibold">
+              Run on these events
+            </legend>
+            <div className="divide-y divide-dashboard-border-subtle rounded-md border border-dashboard-border-emphasis">
+              {resource.supportedEvents.map((event) => (
+                <label
+                  key={event}
+                  className="flex min-h-11 cursor-pointer items-start gap-3 px-3 py-3 text-sm"
+                >
+                  <input
+                    type="checkbox"
+                    className="mt-0.5 size-4 shrink-0 accent-dashboard-focus"
+                    checked={props.value.events.includes(event)}
+                    onChange={() =>
+                      props.onChange({
+                        ...props.value,
+                        events: props.value.events.includes(event)
+                          ? props.value.events.filter((v) => v !== event)
+                          : [...props.value.events, event],
+                      })
+                    }
+                  />
+                  <span className="min-w-0 break-words">
+                    {event.replaceAll("_", " ").replaceAll(".", " · ")}
+                    {resource.guidance?.[event] ? (
+                      <span className="mt-1 block text-xs leading-relaxed text-dashboard-text-muted">
+                        {resource.guidance[event]}
+                      </span>
+                    ) : null}
+                  </span>
+                </label>
+              ))}
+            </div>
+          </fieldset>
+          {Object.keys(resource.matchFields ?? {}).length ? (
+            <fieldset className="grid gap-4">
+              <legend className="mb-3 text-sm font-semibold">Only when</legend>
+              <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
+                All conditions must match. Leave a field blank to match any
+                value. Existing lists match any one listed value.
+              </p>
+              {Object.entries(resource.matchFields ?? {}).map(
+                ([key, field]) => {
+                  const value = props.value.match?.[key];
+                  return (
+                    <Field
+                      key={key}
+                      label={key}
+                      htmlFor={`match-${key}`}
+                      help={field.description}
+                    >
+                      {Array.isArray(value) ? (
+                        <div className="text-sm">
+                          <span className="break-all">{value.join(", ")}</span>{" "}
+                          <Button onClick={() => setMatch(key, undefined)}>
+                            Remove condition
+                          </Button>
+                        </div>
+                      ) : field.kind === "boolean" || field.enum ? (
+                        <Select
+                          id={`match-${key}`}
+                          value={value === undefined ? "" : String(value)}
+                          onChange={(e) =>
+                            setMatch(
+                              key,
+                              e.target.value === ""
+                                ? undefined
+                                : field.kind === "boolean"
+                                  ? e.target.value === "true"
+                                  : e.target.value,
+                            )
+                          }
+                        >
+                          <option value="">Any value</option>
+                          {(field.enum ?? ["true", "false"]).map((v) => (
+                            <option key={v}>{v}</option>
+                          ))}
+                        </Select>
+                      ) : (
+                        <TextInput
+                          size="comfortable"
+                          id={`match-${key}`}
+                          type={field.kind === "number" ? "number" : "text"}
+                          step="any"
+                          value={value === undefined ? "" : String(value)}
+                          onChange={(e) =>
+                            setMatch(
+                              key,
+                              e.target.value === ""
+                                ? undefined
+                                : field.kind === "number"
+                                  ? e.target.valueAsNumber
+                                  : e.target.value,
+                            )
+                          }
+                        />
+                      )}
+                    </Field>
+                  );
+                },
+              )}
+            </fieldset>
+          ) : null}
+        </>
+      ) : null}
+      {JSON.stringify(props.value) !== JSON.stringify(props.original) ? (
+        <Button
+          className="w-fit"
+          onClick={() => props.onChange(props.original)}
+        >
+          Keep saved trigger
+        </Button>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,171 @@
+import { useId, useState } from "react";
+import { SlidersHorizontal } from "lucide-react";
+import { cn } from "../../styles";
+import type {
+  AutomationList,
+  AutomationListQuery,
+} from "@sentry/junior/api/schema";
+import { Button, ToggleButton } from "../../components/Button";
+import { FilterGroup } from "../../components/FilterBar";
+import { SearchInput } from "../../components/SearchInput";
+
+/** Keep collection controls visible while a filtered page loads. */
+export function AutomationFilters(props: {
+  filters: AutomationListQuery;
+  data: AutomationList | undefined;
+  onChange(key: string, value: string): void;
+  searchText: string;
+  onSearch(value: string): void;
+}) {
+  const { filters, data, onChange } = props;
+  const [expanded, setExpanded] = useState(false);
+  const controlsId = useId();
+  const activeCount = [
+    filters.type !== "all",
+    Boolean(filters.creator),
+    Boolean(filters.destination),
+    filters.state !== "all",
+    filters.sort !== "newest",
+  ].filter(Boolean).length;
+  return (
+    <div className="grid gap-3">
+      <div className="grid gap-2 lg:grid-cols-[auto_minmax(16rem,1fr)] lg:items-center lg:gap-4">
+        <div aria-label="Scope" role="group" className="flex flex-wrap gap-2">
+          {(
+            [
+              ["all", "All"],
+              ["mine", "Mine"],
+              ["public", "Public"],
+              ["attention", "Needs attention"],
+            ] as const
+          ).map(([value, label]) => (
+            <ToggleButton
+              className="min-h-11 font-sans! normal-case! lg:min-h-9"
+              key={value}
+              onClick={() => onChange("scope", value)}
+              pressed={filters.scope === value}
+              variant="pill"
+            >
+              {label}
+              {data && value !== "attention" ? (
+                <span className="ml-1.5 opacity-65">{data.counts[value]}</span>
+              ) : null}
+            </ToggleButton>
+          ))}
+        </div>
+        <div className="flex items-center gap-2">
+          <SearchInput
+            className="flex-1"
+            size="default"
+            label="Search automations"
+            placeholder="Search automations"
+            value={props.searchText}
+            onChange={props.onSearch}
+          />
+          <Button
+            className="h-11 shrink-0"
+            aria-expanded={expanded}
+            aria-controls={controlsId}
+            onClick={() => setExpanded(!expanded)}
+          >
+            <SlidersHorizontal aria-hidden="true" size={14} /> Filters
+            {activeCount ? ` (${activeCount})` : ""}
+          </Button>
+        </div>
+      </div>
+      <div
+        id={controlsId}
+        className={cn(
+          "grid-cols-2 items-end gap-3 lg:grid-cols-4 xl:grid-cols-[auto_repeat(4,minmax(0,1fr))]",
+          expanded ? "grid" : "hidden",
+        )}
+      >
+        <FilterGroup
+          className="col-span-2 lg:col-span-4 xl:col-span-1"
+          label="Type"
+        >
+          {(["all", "scheduled", "event"] as const).map((value) => (
+            <ToggleButton
+              className="min-h-9"
+              key={value}
+              onClick={() => onChange("type", value)}
+              pressed={filters.type === value}
+              variant="pill"
+            >
+              {value}
+            </ToggleButton>
+          ))}
+        </FilterGroup>
+        <AutomationFilterSelect
+          label="Creator"
+          emptyLabel="All"
+          value={filters.creator ?? ""}
+          options={data?.creators ?? []}
+          onChange={(value) => onChange("creator", value)}
+        />
+        <AutomationFilterSelect
+          label="Destination"
+          emptyLabel="All"
+          value={filters.destination ?? ""}
+          options={data?.destinations ?? []}
+          onChange={(value) => onChange("destination", value)}
+        />
+        <AutomationFilterSelect
+          label="State"
+          emptyLabel="All"
+          value={filters.state === "all" ? "" : filters.state}
+          options={[
+            { value: "active", label: "Active" },
+            { value: "blocked", label: "Blocked" },
+            { value: "paused", label: "Paused" },
+            { value: "unavailable", label: "Trigger unavailable" },
+            { value: "completed", label: "Completed" },
+          ]}
+          onChange={(value) => onChange("state", value)}
+        />
+        <AutomationFilterSelect
+          label="Sort"
+          ariaLabel="Sort automations"
+          value={filters.sort}
+          onChange={(value) => onChange("sort", value)}
+          options={[
+            { value: "newest", label: "Newest first" },
+            { value: "oldest", label: "Oldest first" },
+            { value: "title", label: "Title" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+function AutomationFilterSelect(props: {
+  label: string;
+  ariaLabel?: string;
+  emptyLabel?: string;
+  value: string;
+  options: Array<{ value: string; label: string }>;
+  onChange(value: string): void;
+}) {
+  return (
+    <FilterGroup label={props.label}>
+      <select
+        aria-label={props.ariaLabel ?? `Filter by ${props.label.toLowerCase()}`}
+        className="h-9 w-full min-w-0 rounded-lg border border-dashboard-border-emphasis bg-dashboard-control px-2 text-sm text-dashboard-text transition-colors hover:border-dashboard-border-interactive focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25 [color-scheme:var(--dashboard-color-scheme,dark)]"
+        value={props.value}
+        onChange={(event) => props.onChange(event.currentTarget.value)}
+      >
+        {props.emptyLabel ? <option value="">{props.emptyLabel}</option> : null}
+        {props.value &&
+        !props.options.some((option) => option.value === props.value) ? (
+          <option value={props.value}>{props.value}</option>
+        ) : null}
+        {props.options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </FilterGroup>
+  );
+}

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+/** Keep section headings and fields aligned without nested form cards. */
+export function AutomationFormSection(props: {
+  title: string;
+  detail?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="grid min-w-0 gap-5 border-t border-dashboard-border-emphasis py-8 md:grid-cols-[12rem_minmax(0,1fr)] md:gap-10">
+      <div>
+        <h2 className="m-0 font-display text-lg font-medium">{props.title}</h2>
+        {props.detail ? (
+          <p className="mt-2 mb-0 text-sm leading-relaxed text-dashboard-text-muted">
+            {props.detail}
+          </p>
+        ) : null}
+      </div>
+      <div className="grid min-w-0 content-start gap-5">{props.children}</div>
+    </section>
+  );
+}

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

@@ -0,0 +1,146 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  automationEditSchema,
+  type AutomationSummary,
+} from "@sentry/junior/api/schema";
+import { Link } from "react-router";
+import { Button, ButtonLink } from "../../components/Button";
+import { StatusChip } from "../../components/StatusChip";
+import { FormNotice } from "../../components/FormNotice";
+import { DashboardApiError, fetchDashboardJson, post } from "../../http";
+
+/** Explain lifecycle separately from the last execution and offer creator-only actions. */
+export function AutomationLifecycle({
+  automation,
+  editPath,
+}: {
+  automation: AutomationSummary;
+  editPath: string;
+}) {
+  const queryClient = useQueryClient();
+  const completed = automation.status === "completed";
+  const paused = automation.status === "paused";
+  const blocked = automation.status === "blocked";
+  const unavailable =
+    automation.kind === "event" && !automation.triggerAvailable;
+  const canEdit = automation.ownedByViewer && !completed;
+  const blockReason =
+    automation.kind === "scheduled" ? automation.statusReason : undefined;
+  const action = paused || blocked ? "resume" : "pause";
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const path = `/api/automations/${automation.kind}/${encodeURIComponent(automation.id)}`;
+      const current = await fetchDashboardJson(
+        automationEditSchema,
+        `${path}/edit`,
+      );
+      // 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.",
+        );
+      }
+      return post(automationEditSchema, `${path}/lifecycle`, {
+        action,
+        revision: current.revision,
+      });
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["dashboard", "automations"],
+      });
+    },
+  });
+  const status =
+    automation.status === "active" && unavailable
+      ? "Trigger unavailable"
+      : automation.status;
+  const failed =
+    automation.lastRunStatus === "failed" ||
+    automation.lastRunStatus === "blocked";
+  return (
+    <div className="grid gap-3 text-sm">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div role="status" aria-live="polite">
+          <StatusChip
+            tone={
+              paused || completed
+                ? "neutral"
+                : blocked || unavailable
+                  ? "warning"
+                  : "success"
+            }
+          >
+            {status}
+          </StatusChip>
+        </div>
+        <div className="flex items-center gap-2">
+          <ButtonLink className="min-h-11" to={editPath}>
+            {canEdit ? "Edit automation" : "View settings"}
+          </ButtonLink>
+          {canEdit ? (
+            <Button
+              className="min-h-11"
+              disabled={mutation.isPending}
+              onClick={() => mutation.mutate()}
+            >
+              {mutation.isPending
+                ? "Updating…"
+                : action === "pause"
+                  ? "Pause"
+                  : "Resume"}
+            </Button>
+          ) : null}
+        </div>
+      </div>
+      {blocked || blockReason ? (
+        <p className="m-0 break-words text-dashboard-text-muted">
+          {blockReason ?? "Check the last run to see what needs fixing."}{" "}
+          {paused ? "Fix this before resuming." : "Fix this, then resume."}
+        </p>
+      ) : null}
+      {unavailable ? (
+        <p className="m-0 text-dashboard-text-muted">
+          This event source is unavailable. Enable its plugin or choose another
+          event.
+        </p>
+      ) : null}
+      {failed ? (
+        <p className="m-0 text-dashboard-text-muted">
+          Last run {automation.lastRunStatus}.
+          {automation.status === "active" && !unavailable
+            ? " Future runs are still on."
+            : ""}{" "}
+          <Link
+            className="text-dashboard-text underline underline-offset-2"
+            to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
+          >
+            View run history
+          </Link>
+        </p>
+      ) : null}
+      {canEdit ? (
+        <details className="text-dashboard-text-muted">
+          <summary className="w-fit cursor-pointer py-2 text-xs hover:text-dashboard-text focus-visible:outline focus-visible:outline-dashboard-focus">
+            About pausing
+          </summary>
+          <p className="mt-1 mb-0 leading-relaxed">
+            Pausing stops new runs. Work already queued or running may finish.
+            Resuming skips missed runs and waits for the next scheduled time or
+            new event.
+            {paused && blockReason
+              ? " Removing the pause keeps the block until you fix it and resume again."
+              : ""}
+          </p>
+        </details>
+      ) : null}
+      {mutation.error ? (
+        <FormNotice tone="error" title="Could not update this automation.">
+          {mutation.error instanceof DashboardApiError
+            ? (mutation.error.apiError ?? "Try again.")
+            : mutation.error.message}
+        </FormNotice>
+      ) : null}
+    </div>
+  );
+}