@sentry/junior-dashboard 0.233.0 → 0.235.0

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

@@ -0,0 +1,179 @@
+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 { DirectorySortSelect } from "../../components/controls/DirectorySortSelect";
+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",
+  ].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-3 xl:grid-cols-[auto_repeat(3,minmax(0,1fr))]",
+          expanded ? "grid" : "hidden",
+        )}
+      >
+        <FilterGroup
+          className="col-span-2 lg:col-span-3 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)}
+        />
+      </div>
+    </div>
+  );
+}
+
+/** Keep list order visible beside the result count instead of inside Filters. */
+export function AutomationSort(props: {
+  value: AutomationListQuery["sort"];
+  onChange(value: string): void;
+}) {
+  return (
+    <DirectorySortSelect
+      ariaLabel="Sort automations"
+      onChange={props.onChange}
+      options={[
+        { value: "newest", label: "Recently created" },
+        { value: "oldest", label: "Oldest created" },
+        { value: "title", label: "Title A–Z" },
+      ]}
+      value={props.value}
+    />
+  );
+}
+
+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>
+  );
+}

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

@@ -0,0 +1,177 @@
+import { ArrowUp, Trash2, Plus } from "lucide-react";
+import type {
+  AutomationEdit,
+  AutomationSummary,
+} from "@sentry/junior/api/schema";
+import { Button } from "../../components/Button";
+import { Select } from "../../components/Select";
+import { cn } from "../../styles";
+import type { AutomationDraft } from "./automationDraft";
+import { automationOutcomeLabel } from "./automationOutcomes";
+
+/** Keep outcome order and offer only supported message Destinations. */
+export function AutomationOutcomeFields(props: {
+  value: AutomationDraft["outcomes"];
+  original: AutomationEdit["outcomes"];
+  destination: AutomationSummary["destination"];
+  onChange(value: AutomationDraft["outcomes"]): void;
+}) {
+  const defaultOutcomes: AutomationDraft["outcomes"] = props.original.length
+    ? props.original
+    : [{ action: "send_message", destination: "current_conversation" }];
+  const options = [
+    ...props.original.flatMap((outcome, index) =>
+      typeof outcome.destination === "string"
+        ? []
+        : [
+            {
+              value: `saved:${index}`,
+              label: automationOutcomeLabel(outcome, props.destination),
+              outcome,
+            },
+          ],
+    ),
+    {
+      value: "current_conversation",
+      label: `${props.destination.label} · ${props.destination.visibility}`,
+      outcome: {
+        action: "send_message",
+        destination: "current_conversation",
+      } as const,
+    },
+    {
+      value: "task_creator",
+      label: "Creator · Direct message",
+      outcome: { action: "send_message", destination: "task_creator" } as const,
+    },
+  ];
+  return (
+    <>
+      <fieldset>
+        <legend className="sr-only">Success messages</legend>
+        <div className="flex flex-wrap gap-x-6 gap-y-3">
+          {[true, false].map((send) => (
+            <label
+              key={String(send)}
+              className="inline-flex min-h-8 cursor-pointer items-center gap-2 text-sm"
+            >
+              <input
+                type="radio"
+                name="messages"
+                className="size-4 accent-dashboard-focus"
+                checked={Boolean(props.value.length) === send}
+                onChange={() => props.onChange(send ? defaultOutcomes : [])}
+              />
+              {send ? "Send a message" : "No success message"}
+            </label>
+          ))}
+        </div>
+      </fieldset>
+      {props.value.length ? (
+        <div className="grid gap-4 sm:gap-2">
+          {props.value.map((outcome, index) => {
+            const retainedIndex = props.original.findIndex(
+              (item) => JSON.stringify(item) === JSON.stringify(outcome),
+            );
+            return (
+              <div
+                key={index}
+                className="flex min-w-0 flex-wrap items-center gap-2"
+              >
+                <span className="w-4 text-xs text-dashboard-text-muted">
+                  {index + 1}.
+                </span>
+                <div
+                  className={cn(
+                    "min-w-0 flex-1",
+                    props.value.length > 1 &&
+                      "order-last basis-full sm:order-none sm:basis-auto",
+                  )}
+                >
+                  <Select
+                    aria-label={`Message ${index + 1} destination`}
+                    value={
+                      typeof outcome.destination === "string"
+                        ? outcome.destination
+                        : `saved:${retainedIndex}`
+                    }
+                    onChange={(e) => {
+                      const selected = options.find(
+                        (option) => option.value === e.target.value,
+                      );
+                      if (selected)
+                        props.onChange(
+                          props.value.map((item, i) =>
+                            i === index ? selected.outcome : item,
+                          ),
+                        );
+                    }}
+                  >
+                    {options.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </Select>
+                </div>
+                {props.value.length > 1 ? (
+                  <>
+                    <Button
+                      size="icon"
+                      className="ml-auto sm:ml-0"
+                      aria-label={`Move message ${index + 1} up`}
+                      disabled={index === 0}
+                      onClick={() => {
+                        const next = [...props.value];
+                        [next[index - 1], next[index]] = [
+                          next[index],
+                          next[index - 1],
+                        ];
+                        props.onChange(next);
+                      }}
+                    >
+                      <ArrowUp size={16} />
+                    </Button>
+                    <Button
+                      size="icon"
+                      aria-label={`Remove message ${index + 1}`}
+                      onClick={() =>
+                        props.onChange(
+                          props.value.filter((_, i) => i !== index),
+                        )
+                      }
+                    >
+                      <Trash2 size={16} />
+                    </Button>
+                  </>
+                ) : null}
+              </div>
+            );
+          })}
+          {props.value.length < 5 ? (
+            <Button
+              className="w-fit"
+              onClick={() =>
+                props.onChange([
+                  ...props.value,
+                  { action: "send_message", destination: "task_creator" },
+                ])
+              }
+            >
+              <Plus size={15} />
+              Add message
+            </Button>
+          ) : null}
+        </div>
+      ) : (
+        <p className="m-0 text-sm leading-relaxed text-dashboard-text-muted">
+          Junior still does the work. No message is sent after success.
+        </p>
+      )}
+      <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
+        {props.value.length ? "Messages are sent in this order. " : ""}This does
+        not limit actions in the instruction.
+      </p>
+    </>
+  );
+}