@sentry/junior-dashboard 0.264.0 → 0.266.0

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

@@ -1,21 +1,16 @@
-import { useMemo, useState } from "react";
+import { useMemo, useState, type KeyboardEvent } from "react";
 import { ArrowLeft } from "lucide-react";
-import {
-  Link,
-  Navigate,
-  useNavigate,
-  useParams,
-  useSearchParams,
-} from "react-router";
+import { Link, Navigate, useParams, useSearchParams } from "react-router";
 import type {
   AutomationExecution,
   AutomationExecutionList,
+  AutomationRun,
 } from "@sentry/junior/api/schema";
 
 import { useAutomationExecutionsData } from "../../api";
 import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
-import type { StatusChipTone } from "../../components/StatusChip";
+import { SelectableRow } from "../../components/SelectableRow";
 import { StatusDot } from "../../components/StatusDot";
 import {
   selectTimeSeries,
@@ -24,83 +19,130 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
-import { conversationPath } from "../../conversations/conversationRoutes";
 import {
   formatCompactNumber,
   formatCostSummary,
   formatRuntime,
-  formatTime,
   automationPath,
 } from "../../format";
 import { DashboardApiError } from "../../http";
 import { pathWithSearch } from "../../searchParams";
 import { cn } from "../../styles";
 import { AutomationExecutionStatusChart } from "./AutomationExecutionStatusChart";
+import {
+  AUTOMATION_RUN_PARAM,
+  AutomationRunDetails,
+  AutomationRunsFrame,
+  RunConversationLink,
+  useAutomationRunSelection,
+} from "./AutomationRunDetails";
+import {
+  automationRunStatusTone,
+  automationRunTitle,
+  formatAutomationRunTime,
+} from "./automationFormat";
 
 /** Leading conversation column flexes; metric columns stay equal fixed widths. */
-const EXECUTION_GRID = "grid-cols-[minmax(0,1fr)_5.5rem_5.5rem_5.5rem_auto]";
+const EXECUTION_GRID =
+  "grid-cols-[minmax(0,1fr)_5.5rem_5.5rem_5.5rem_auto_2rem]";
 
-/** Render one automation's terminal executions as a conversation-style list. */
+/** Render one automation's terminal executions beside the selected run. */
 export function AutomationExecutionsPage(props: { enabled: boolean }) {
   const { automationId } = useParams();
   const [searchParams] = useSearchParams();
   const query = useAutomationExecutionsData(props.enabled, automationId);
+  const backSearch = new URLSearchParams(searchParams);
+  backSearch.delete(AUTOMATION_RUN_PARAM);
   const backTo = pathWithSearch(
     automationId ? automationPath(automationId) : "/automations/list",
-    searchParams,
+    backSearch,
+  );
+  const runs = useMemo(
+    () =>
+      query.data
+        ? query.data.executions.map(
+            (execution): AutomationRun => ({
+              ...execution,
+              automationId: query.data.automation.id,
+              automationTitle: query.data.automation.title,
+              kind: query.data.automation.kind,
+            }),
+          )
+        : [],
+    [query.data],
+  );
+  const selection = useAutomationRunSelection(
+    runs.map((run) => run.executionId),
   );
 
   if (!automationId) {
     return <Navigate replace to="/automations" />;
   }
-  if (!query.data && !query.error) {
-    return (
-      <>
-        <PageHeader
-          description="Terminal runs for one scheduled or event automation."
-          title="Automation executions"
-        />
-        <PageContentSkeleton
-          label="Loading automation executions"
-          variant="list"
-        />
-      </>
-    );
-  }
-  if (query.error || !query.data) {
-    return (
-      <>
-        <PageHeader
-          description="Terminal runs for one scheduled or event automation."
-          title="Automation executions"
+  const loading = !query.data && !query.error;
+  return (
+    <AutomationRunsFrame
+      details={
+        selection.runId ? (
+          <AutomationRunDetails
+            key={selection.runId}
+            loading={loading}
+            onClose={selection.close}
+            run={runs.find((run) => run.executionId === selection.runId)}
+            showAutomation={false}
+          />
+        ) : null
+      }
+      label="Executions list"
+      listRef={selection.listRef}
+    >
+      {query.data ? (
+        <AutomationExecutionsView
+          backTo={backTo}
+          data={query.data}
+          onRowsKeyDown={selection.onRowsKeyDown}
+          onSelect={selection.toggle}
+          selectedRunId={selection.runId}
         />
-        <Card padding="md">
-          <InlineError>
-            {query.error instanceof DashboardApiError &&
-            query.error.status === 404
-              ? "This automation was not found or is not visible to you."
-              : "Automation executions could not be loaded. Try again."}
-          </InlineError>
-          <Link
-            className="mt-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
-            to={
-              automationId ? automationPath(automationId) : "/automations/list"
-            }
-          >
-            <ArrowLeft aria-hidden="true" size={14} />
-            Back to automations
-          </Link>
-        </Card>
-      </>
-    );
-  }
-
-  return <AutomationExecutionsView backTo={backTo} data={query.data} />;
+      ) : (
+        <>
+          <PageHeader
+            description="Terminal runs for one scheduled or event automation."
+            title="Automation executions"
+          />
+          {loading ? (
+            <PageContentSkeleton
+              label="Loading automation executions"
+              variant="list"
+            />
+          ) : (
+            <Card padding="md">
+              <InlineError>
+                {query.error instanceof DashboardApiError &&
+                query.error.status === 404
+                  ? "This automation was not found or is not visible to you."
+                  : "Automation executions could not be loaded. Try again."}
+              </InlineError>
+              <Link
+                className="mt-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
+                to={automationPath(automationId)}
+              >
+                <ArrowLeft aria-hidden="true" size={14} />
+                Back to automations
+              </Link>
+            </Card>
+          )}
+        </>
+      )}
+    </AutomationRunsFrame>
+  );
 }
 
 function AutomationExecutionsView(props: {
   backTo: string;
   data: AutomationExecutionList;
+  onRowsKeyDown(event: KeyboardEvent<HTMLElement>): void;
+  onSelect(executionId: string): void;
+  selectedRunId: string | undefined;
 }) {
   const { data } = props;
   const [range, setRange] = useState<TimeRangeDays>(30);
@@ -171,24 +213,29 @@ function AutomationExecutionsView(props: {
           <div className="min-w-0 overflow-x-auto">
             <div className="min-w-[36rem]">
               <div
+                aria-hidden="true"
                 className={cn(
                   "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-sans font-medium text-xs text-dashboard-text-muted md:grid",
                   EXECUTION_GRID,
                 )}
-                role="row"
               >
-                <div>Conversation</div>
+                <div>Run</div>
                 <div>Duration</div>
                 <div>Tokens</div>
                 <div>Cost</div>
-                <div className="sr-only">Status</div>
               </div>
-              <div className="min-w-0" role="table">
+              <div
+                className="min-w-0"
+                onKeyDown={props.onRowsKeyDown}
+                role="list"
+              >
                 {data.executions.map((execution) => (
                   <ExecutionRow
                     execution={execution}
                     fallbackTitle={data.automation.title}
                     key={execution.executionId}
+                    onSelect={() => props.onSelect(execution.executionId)}
+                    selected={props.selectedRunId === execution.executionId}
                   />
                 ))}
               </div>
@@ -209,12 +256,10 @@ function AutomationExecutionsView(props: {
 function ExecutionRow(props: {
   execution: AutomationExecution;
   fallbackTitle: string;
+  onSelect(): void;
+  selected: boolean;
 }) {
-  const { execution, fallbackTitle } = props;
-  const navigate = useNavigate();
-  const title =
-    execution.title?.trim() ||
-    (execution.conversationId ? fallbackTitle : "No conversation");
+  const { execution } = props;
   const costLabel =
     formatCostSummary(
       execution.costUsd === undefined
@@ -226,56 +271,52 @@ function ExecutionRow(props: {
     execution.totalTokens === undefined
       ? "—"
       : formatCompactNumber(execution.totalTokens);
-  const openConversation = () => {
-    if (!execution.conversationId) return;
-    navigate(conversationPath(execution.conversationId));
-  };
+  const tone = automationRunStatusTone(execution.status);
 
   return (
     <div
-      aria-disabled={!execution.conversationId}
-      className={cn(
-        "group grid min-w-0 items-center gap-4 overflow-hidden border-b border-dashboard-border-subtle px-4 py-3 text-left text-inherit transition-colors last:border-b-0 max-md:grid-cols-1 max-md:gap-y-2 max-md:px-4 max-md:py-3.5 md:grid",
-        EXECUTION_GRID,
-        execution.conversationId
-          ? "cursor-pointer hover:bg-dashboard-fill-soft"
-          : "cursor-default opacity-80",
-      )}
-      onClick={openConversation}
-      onKeyDown={(event) => {
-        if (!execution.conversationId) return;
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          openConversation();
-        }
-      }}
-      role={execution.conversationId ? "link" : "row"}
-      tabIndex={execution.conversationId ? 0 : undefined}
+      className="border-b border-dashboard-border-subtle last:border-b-0"
+      data-run-id={execution.executionId}
+      role="listitem"
     >
-      <div className="min-w-0 overflow-hidden">
-        <div className="flex min-w-0 items-center gap-2 overflow-hidden">
-          <StatusDot
-            className="md:hidden"
-            label={execution.status}
-            tone={runStatusTone(execution.status)}
-          />
-          <div className="min-w-0 truncate text-sm font-medium leading-snug text-dashboard-text">
-            {title}
-          </div>
+      <SelectableRow
+        className={cn(
+          "grid min-w-0 items-center gap-4 overflow-hidden px-4 py-3 max-md:grid-cols-1 max-md:gap-y-2 max-md:py-3.5",
+          EXECUTION_GRID,
+        )}
+        onSelect={props.onSelect}
+        selected={props.selected}
+      >
+        <button
+          aria-expanded={props.selected}
+          className="block min-w-0 cursor-pointer rounded-md 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 overflow-hidden">
+            <StatusDot
+              className="md:hidden"
+              label={execution.status}
+              tone={tone}
+            />
+            <span className="min-w-0 truncate text-sm font-medium leading-snug text-dashboard-text">
+              {automationRunTitle(execution, props.fallbackTitle)}
+            </span>
+          </span>
+          <span className="mt-1 block truncate text-xs leading-relaxed text-dashboard-text-muted">
+            {formatAutomationRunTime(execution.executedAt)}
+          </span>
+        </button>
+        <MetricCell label="Duration" value={durationLabel} />
+        <MetricCell label="Tokens" value={tokensLabel} />
+        <MetricCell label="Cost" value={costLabel} />
+        <div className="hidden justify-self-center md:block">
+          <StatusDot label={execution.status} tone={tone} />
         </div>
-        <div className="mt-1 truncate text-xs leading-relaxed text-dashboard-text-muted">
-          {formatRunDate(execution.executedAt)}
+        <div className="max-md:hidden">
+          <RunConversationLink conversationId={execution.conversationId} />
         </div>
-      </div>
-      <MetricCell label="Duration" value={durationLabel} />
-      <MetricCell label="Tokens" value={tokensLabel} />
-      <MetricCell label="Cost" value={costLabel} />
-      <div className="hidden justify-self-center md:block">
-        <StatusDot
-          label={execution.status}
-          tone={runStatusTone(execution.status)}
-        />
-      </div>
+      </SelectableRow>
     </div>
   );
 }
@@ -297,12 +338,6 @@ function MetricCell(props: { label: string; value: string }) {
   );
 }
 
-function runStatusTone(status: AutomationExecution["status"]): StatusChipTone {
-  if (status === "failed") return "danger";
-  if (status === "blocked") return "warning";
-  return "success";
-}
-
 function countByStatus(executions: AutomationExecution[]) {
   return executions.reduce(
     (counts, execution) => {
@@ -312,14 +347,3 @@ function countByStatus(executions: AutomationExecution[]) {
     { blocked: 0, completed: 0, failed: 0 },
   );
 }
-
-function formatRunDate(value: string): string {
-  return formatTime(value, {
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    timeZoneName: "short",
-    year: "numeric",
-  });
-}