@sentry/junior-dashboard 0.233.0 → 0.234.0

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>
+    </>
+  );
+}

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>
+  );
+}