@sentry/junior-dashboard 0.264.0 → 0.266.0

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

@@ -0,0 +1,201 @@
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import { Link } from "react-router";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../components/ui/accordion";
+import { FormNotice } from "../../components/FormNotice";
+import { StatusChip } from "../../components/StatusChip";
+import { conversationPath } from "../../conversations/conversationRoutes";
+import { formatRelativeTime } from "../../format";
+import { dashboardInlineLinkClass } from "../../styles";
+import { formatAutomationRunTime } from "./automationFormat";
+
+/** Separate the Automation's lifecycle, next trigger, and last execution result. */
+export function AutomationStatus({
+  automation,
+}: {
+  automation: AutomationSummary;
+}) {
+  const paused = automation.status === "paused";
+  const blocked = automation.status === "blocked";
+  const completed = automation.status === "completed";
+  const triggerProblems =
+    automation.kind === "event" ? automation.trigger.problems : [];
+  const unavailable = triggerProblems.length > 0;
+  const failed =
+    automation.lastRunStatus === "failed" ||
+    automation.lastRunStatus === "blocked";
+  const needsFix = blocked || (paused && Boolean(automation.statusReason));
+  const showAttention = needsFix || unavailable || failed;
+  const lastResult = automation.lastRunStatus
+    ? `Last run ${automation.lastRunStatus}`
+    : "Last run";
+  return (
+    <div className="grid gap-3">
+      <div className="grid gap-1.5">
+        <div aria-label="Automation state" aria-live="polite" role="status">
+          <StatusChip
+            tone={
+              paused || completed
+                ? "neutral"
+                : blocked || unavailable
+                  ? "warning"
+                  : "success"
+            }
+          >
+            {automation.status === "active" && unavailable
+              ? "Trigger unavailable"
+              : automation.status}
+          </StatusChip>
+        </div>
+        <AutomationNextTrigger automation={automation} />
+        <p className="m-0 text-xs text-dashboard-text-muted">
+          {automation.lastRunAt ? (
+            <>
+              {lastResult} ·{" "}
+              <time
+                dateTime={automation.lastRunAt}
+                title={formatAutomationRunTime(automation.lastRunAt)}
+              >
+                {formatRelativeTime(automation.lastRunAt)}
+              </time>
+            </>
+          ) : automation.lastRunStatus ? (
+            `${lastResult} · time not recorded`
+          ) : automation.totalRuns === 0 ? (
+            "No runs yet"
+          ) : (
+            "Last run time not recorded"
+          )}
+        </p>
+      </div>
+      {showAttention ? (
+        <FormNotice
+          title={
+            needsFix
+              ? "Fix this before resuming"
+              : unavailable
+                ? "Trigger unavailable"
+                : "Check the last run"
+          }
+        >
+          {needsFix ? (
+            <p className="m-0 break-words">
+              {automation.statusReason ??
+                "Check the last run to see what needs fixing."}{" "}
+              {!automation.ownedByViewer
+                ? `Ask ${automation.createdBy} to resume after this is fixed.`
+                : null}
+            </p>
+          ) : null}
+          {unavailable ? (
+            <>
+              <ul className="my-1 list-disc pl-5">
+                {triggerProblems.map((problem) => (
+                  <li className="break-words" key={problem}>
+                    {problem}
+                  </li>
+                ))}
+              </ul>
+              <p className="m-0">
+                Edit the trigger, or enable its plugin again.
+              </p>
+            </>
+          ) : null}
+          {failed && !needsFix && !unavailable ? (
+            <p className="m-0">
+              {automation.status === "active"
+                ? "Future runs are still on."
+                : paused
+                  ? "Review the last result before resuming."
+                  : "Review the last result for details."}
+            </p>
+          ) : null}
+          {automation.lastConversationId ? (
+            <Link
+              className={`${dashboardInlineLinkClass} mt-2 inline-block`}
+              to={conversationPath(automation.lastConversationId)}
+            >
+              Open last run
+            </Link>
+          ) : automation.totalRuns > 0 ? (
+            <Link
+              className={`${dashboardInlineLinkClass} mt-2 inline-block`}
+              to={`/automations/${encodeURIComponent(automation.id)}/executions`}
+            >
+              View run history
+            </Link>
+          ) : null}
+        </FormNotice>
+      ) : null}
+    </div>
+  );
+}
+
+function AutomationNextTrigger({
+  automation,
+}: {
+  automation: AutomationSummary;
+}) {
+  let description: string;
+  if (automation.status === "completed") description = "No future runs";
+  else if (automation.status === "paused")
+    description = "No new runs while paused";
+  else if (automation.status === "blocked")
+    description = "New runs are blocked until this is fixed";
+  else if (automation.kind === "event")
+    description =
+      automation.trigger.problems.length === 0
+        ? "Waiting for a matching event"
+        : "Waiting for a trigger fix";
+  else if (automation.nextRunAt) {
+    const browserZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const scheduleTime = formatAutomationRunTime(
+      automation.nextRunAt,
+      automation.timezone,
+    );
+    const localTime = formatAutomationRunTime(
+      automation.nextRunAt,
+      browserZone,
+    );
+    const timingLabel =
+      Date.parse(automation.nextRunAt) <= Date.now()
+        ? "Run was due"
+        : "Next run";
+    return (
+      <Accordion>
+        <AccordionItem value="next-run">
+          <AccordionTrigger className="py-1 text-sm font-normal">
+            <span>
+              {timingLabel}{" "}
+              <time dateTime={automation.nextRunAt}>
+                {formatRelativeTime(automation.nextRunAt)}
+              </time>
+            </span>
+          </AccordionTrigger>
+          <AccordionContent>
+            <dl className="m-0 mt-1 grid gap-1 border-l border-dashboard-border pl-3 text-xs leading-relaxed">
+              <dt className="text-dashboard-text-muted">Schedule time</dt>
+              <dd className="m-0">
+                <time dateTime={automation.nextRunAt}>{scheduleTime}</time>
+              </dd>
+              {localTime !== scheduleTime ? (
+                <>
+                  <dt className="mt-1 text-dashboard-text-muted">Your time</dt>
+                  <dd className="m-0">
+                    <time dateTime={automation.nextRunAt}>{localTime}</time>
+                  </dd>
+                </>
+              ) : null}
+            </dl>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+  } else description = "Next run not scheduled";
+  return <p className="m-0 text-sm text-dashboard-text">{description}</p>;
+}

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

@@ -1,16 +1,31 @@
 /** Version history for one Automation. Making a version active saves it again. */
 import { useState } from "react";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, ChevronRight } from "lucide-react";
 import { Link, Navigate, useParams, useSearchParams } from "react-router";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   automationEditSchema,
   type AutomationSummary,
-  type AutomationVersion,
   type AutomationVersionList,
+  type ListedAutomationVersion,
 } from "@sentry/junior/api/schema";
 import { useAutomationData, useAutomationVersionsData } from "../../api";
-import { Button } from "../../components/Button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+} from "../../components/ui/alert-dialog";
+import { Button } from "../../components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../components/ui/collapsible";
+import { dashboardDisclosureChevronClass } from "../../styles";
 import { Detail, DetailList } from "../../components/DetailList";
 import { FormNotice } from "../../components/FormNotice";
 import { InlineError } from "../../components/InlineError";
@@ -23,6 +38,7 @@ import { DashboardApiError, fetchDashboardJson, post } from "../../http";
 import { pathWithSearch } from "../../searchParams";
 import { formatAutomationRunTime } from "./automationFormat";
 import { automationOutcomeLabel } from "./automationOutcomes";
+import { TriggerFilters } from "./TriggerFilters";
 
 const DESCRIPTION = "Saved settings for this automation, newest first.";
 
@@ -90,6 +106,9 @@ function AutomationVersionsView(props: {
   const { automation, data } = props;
   const queryClient = useQueryClient();
   const [activated, setActivated] = useState<number>();
+  // Keep the version after close so the closing dialog keeps its text.
+  const [confirming, setConfirming] = useState<number>();
+  const [confirmOpen, setConfirmOpen] = useState(false);
   const canActivate = !(
     automation.kind === "scheduled" && automation.status === "completed"
   );
@@ -155,15 +174,8 @@ function AutomationVersionsView(props: {
                   activate.variables === version.version ? activate.error : null
                 }
                 onActivate={() => {
-                  const creatorOnly = automation.ownedByViewer
-                    ? ""
-                    : ` Only ${automation.createdBy} can turn on their connected accounts or change where results go.`;
-                  if (
-                    window.confirm(
-                      `Make version ${version.version} active? Junior saves these settings as a new version. Future runs use them.${creatorOnly}`,
-                    )
-                  )
-                    activate.mutate(version.version);
+                  setConfirming(version.version);
+                  setConfirmOpen(true);
                 }}
                 pending={
                   activate.isPending && activate.variables === version.version
@@ -176,6 +188,29 @@ function AutomationVersionsView(props: {
           </ol>
         </Card>
       )}
+      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogTitle>Make version {confirming} active?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Junior saves these settings as a new version. Future runs use them.
+            {automation.ownedByViewer
+              ? null
+              : ` Only ${automation.createdBy} can turn on their connected accounts or change where results go.`}
+          </AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (confirming !== undefined) activate.mutate(confirming);
+                setConfirmOpen(false);
+              }}
+              variant="primary"
+            >
+              Make active
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
       {data.truncated ? (
         <p className="m-0 text-center text-xs text-dashboard-text-muted">
           Showing the 100 most recent versions.
@@ -192,9 +227,9 @@ function VersionRow(props: {
   error: Error | null;
   onActivate(): void;
   pending: boolean;
-  previous: AutomationVersion | undefined;
+  previous: ListedAutomationVersion | undefined;
   truncated: boolean;
-  version: AutomationVersion;
+  version: ListedAutomationVersion;
 }) {
   const { automation, version } = props;
   const editor = version.editedBy
@@ -255,19 +290,25 @@ function VersionRow(props: {
             : "Try again."}
         </FormNotice>
       ) : null}
-      <details>
-        <summary className="w-fit cursor-pointer py-1 text-xs text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline focus-visible:outline-dashboard-focus">
+      <Collapsible>
+        <CollapsibleTrigger className="group flex cursor-pointer items-center gap-1 py-1 text-xs text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline focus-visible:outline-dashboard-focus">
+          <ChevronRight
+            aria-hidden="true"
+            className={dashboardDisclosureChevronClass}
+          />
           Show settings
-        </summary>
-        <VersionSettings automation={automation} version={version} />
-      </details>
+        </CollapsibleTrigger>
+        <CollapsibleContent hiddenUntilFound>
+          <VersionSettings automation={automation} version={version} />
+        </CollapsibleContent>
+      </Collapsible>
     </li>
   );
 }
 
 function VersionSettings(props: {
   automation: AutomationSummary;
-  version: AutomationVersion;
+  version: ListedAutomationVersion;
 }) {
   const { automation, version } = props;
   const { definition } = version;
@@ -298,12 +339,8 @@ function VersionSettings(props: {
             {version.definition.trigger.label} ·{" "}
             {version.definition.trigger.identifier}
             <br />
-            {version.definition.trigger.events.join(", ")}
-            {Object.keys(version.definition.trigger.match ?? {}).length ? (
-              <pre className="mt-2 mb-0 whitespace-pre-wrap break-words text-xs">
-                {JSON.stringify(version.definition.trigger.match, null, 2)}
-              </pre>
-            ) : null}
+            {version.trigger.events.join(", ")}
+            <TriggerFilters filters={version.trigger.filters} />
           </>
         )}
       </Detail>
@@ -332,8 +369,8 @@ function VersionSettings(props: {
 
 /** Name the settings that differ from the previous version. */
 function changedFields(
-  previous: AutomationVersion,
-  version: AutomationVersion,
+  previous: ListedAutomationVersion,
+  version: ListedAutomationVersion,
 ): string[] {
   const before: Record<string, unknown> = previous.definition;
   const after: Record<string, unknown> = version.definition;

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

@@ -1,18 +1,17 @@
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   useLocation,
   useNavigate,
   useParams,
   useSearchParams,
 } from "react-router";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   automationListQuerySchema,
   type AutomationSummary,
 } from "@sentry/junior/api/schema";
 import { Globe2, ListChecks, LockKeyhole, UserRound } from "lucide-react";
 import { useAutomationsData, useAutomationData } from "../../api";
-import { Button } from "../../components/Button";
+import { Button } from "../../components/ui/button";
 import { AutomationFilters, AutomationSort } from "./AutomationFilters";
 import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
@@ -25,7 +24,6 @@ import {
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { StatCard } from "../../components/metrics/StatCard";
-import { deleteDashboardResource } from "../../http";
 import { automationPath } from "../../format";
 import { useDocumentTitle } from "../../documentTitle";
 import {
@@ -33,9 +31,12 @@ import {
   useDebouncedSearchParam,
   useSearchParamEnum,
 } from "../../searchParams";
+import { AutomationDeleteDialog } from "./AutomationDeleteDialog";
 import { AutomationRow } from "./AutomationRow";
 import { AutomationCostChart } from "./AutomationCostChart";
-import { AutomationDetailsDrawer } from "./AutomationDetailsDrawer";
+import { AutomationDetails } from "./AutomationDetails";
+import { PageLayout } from "../../components/layout/PageLayout";
+import { cn } from "../../styles";
 import { AutomationExecutionChart } from "./AutomationExecutionChart";
 
 const AUTOMATION_RANGE_OPTIONS = ["1", "7", "30", "90"] as const;
@@ -54,7 +55,9 @@ export function AutomationsPage(props: {
   enabled: boolean;
   view: "list" | "overview";
 }) {
-  const queryClient = useQueryClient();
+  const [deleteTarget, setDeleteTarget] = useState<AutomationSummary>();
+  const deleteSource = useRef<HTMLButtonElement | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
   const location = useLocation();
   const { automationId } = useParams();
@@ -93,17 +96,14 @@ export function AutomationsPage(props: {
     props.view === "list" ? request.toString() : "",
   );
   const detail = useAutomationData(props.enabled, automationId);
-  const setFilter = (key: string, value: string) =>
-    setSearchParams(
-      (current) => {
-        const next = new URLSearchParams(current);
-        next.delete("page");
-        if (value) next.set(key, value);
-        else next.delete(key);
-        return next;
-      },
-      { replace: true },
-    );
+  const setFilter = (key: string, value: string) => {
+    // Consecutive control events can precede the router's next render.
+    const next = new URLSearchParams(window.location.search);
+    next.delete("page");
+    if (value) next.set(key, value);
+    else next.delete(key);
+    setSearchParams(next, { replace: true });
+  };
   const setPage = (page: number) =>
     setSearchParams((current) => {
       const next = new URLSearchParams(current);
@@ -123,6 +123,15 @@ export function AutomationsPage(props: {
   const totalPages = pageCount(visibleTaskCount, filters.pageSize);
   const page = query.data?.page ?? filters.page;
   const selectedTask = detail.data;
+  const closeDetails = () => {
+    const trigger = automationId
+      ? listRef.current?.querySelector<HTMLButtonElement>(
+          `[data-automation-id="${CSS.escape(automationId)}"] button`,
+        )
+      : undefined;
+    navigate(tasksPath(listPath));
+    (trigger ?? listRef.current)?.focus();
+  };
   // Overview names the tab through PageHeader; the list has a plain heading.
   useDocumentTitle(
     props.view === "list"
@@ -155,18 +164,6 @@ export function AutomationsPage(props: {
     query.isPlaceholderData,
     setSearchParams,
   ]);
-  const deletion = useMutation({
-    mutationFn: async (automation: AutomationSummary) => {
-      await deleteDashboardResource(
-        `/api/automations/${encodeURIComponent(automation.id)}`,
-      );
-    },
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: ["dashboard", "automations"],
-      });
-    },
-  });
 
   const loading = !query.data && !query.error;
   const executionSeries = query.data?.executionDays?.length
@@ -185,13 +182,8 @@ export function AutomationsPage(props: {
     : [];
   const showExecutionCharts = executionSeries.length > 0;
 
-  return (
+  const content = (
     <>
-      {location.state?.automationSaved ? (
-        <p role="status" className="m-0 text-sm text-emerald-300">
-          Automation saved. Changes apply to future work.
-        </p>
-      ) : null}
       {props.view === "overview" ? (
         <PageHeader
           description="Scheduled and event-driven work created by users."
@@ -225,16 +217,6 @@ export function AutomationsPage(props: {
           <Button onClick={() => void query.refetch()}>Try again</Button>
         </InlineError>
       ) : null}
-      {automationId && detail.isPending ? (
-        <p role="status">Loading automation details…</p>
-      ) : null}
-      {automationId && detail.error ? (
-        <InlineError>
-          Automation details could not be loaded. It may be unavailable or you
-          may not have access.{" "}
-          <Button onClick={() => void detail.refetch()}>Try again</Button>
-        </InlineError>
-      ) : null}
       {query.data && props.view === "overview" ? (
         <>
           <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
@@ -308,20 +290,7 @@ export function AutomationsPage(props: {
                 const key = `${automation.kind}:${automation.id}`;
                 return (
                   <AutomationRow
-                    deleting={
-                      deletion.isPending &&
-                      deletion.variables?.id === automation.id
-                    }
                     key={key}
-                    onDelete={() => {
-                      if (
-                        window.confirm(
-                          `Delete this ${automation.kind} automation?`,
-                        )
-                      ) {
-                        deletion.mutate(automation);
-                      }
-                    }}
                     onSelect={() =>
                       navigate(
                         automationId === automation.id
@@ -343,18 +312,61 @@ export function AutomationsPage(props: {
             pageSize={filters.pageSize}
             total={visibleTaskCount}
           />
-          {deletion.error ? (
-            <InlineError className="text-center">
-              The automation could not be deleted. Try again.
-            </InlineError>
-          ) : null}
         </>
       ) : null}
-      <AutomationDetailsDrawer
-        onClose={() => navigate(tasksPath(listPath))}
-        range={range}
-        automation={selectedTask}
-      />
     </>
   );
+  if (props.view === "overview") return content;
+
+  return (
+    <div
+      className={cn(
+        "grid h-full min-h-0 min-w-0",
+        automationId && "xl:grid-cols-[minmax(0,1fr)_25rem]",
+      )}
+    >
+      <div
+        aria-label="Automations list"
+        className="min-h-0 overflow-y-auto overscroll-contain outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+        ref={listRef}
+        role="region"
+        tabIndex={0}
+      >
+        <PageLayout>{content}</PageLayout>
+      </div>
+      {automationId ? (
+        <AutomationDetails
+          key={automationId}
+          onClose={closeDetails}
+          onDelete={(source) => {
+            if (!selectedTask?.ownedByViewer) return;
+            deleteSource.current = source;
+            setDeleteTarget(selectedTask);
+          }}
+          onRetry={() => void detail.refetch()}
+          error={Boolean(detail.error)}
+          range={range}
+          automation={selectedTask}
+        />
+      ) : null}
+      {deleteTarget ? (
+        <AutomationDeleteDialog
+          automation={deleteTarget}
+          onClose={() => setDeleteTarget(undefined)}
+          onDeleted={() => {
+            if (automationId !== deleteTarget.id) return;
+            // The details unmount after the route change, which can finish
+            // after the dialog closes. Do not return focus to their button.
+            deleteSource.current = null;
+            navigate(tasksPath(listPath));
+          }}
+          returnFocus={() =>
+            deleteSource.current?.isConnected
+              ? deleteSource.current
+              : (listRef.current ?? false)
+          }
+        />
+      ) : null}
+    </div>
+  );
 }