@sentry/junior-dashboard 0.266.0 → 0.268.0

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

@@ -1,15 +1,33 @@
 import type { ReactNode } from "react";
 
-/** Keep section headings and fields aligned without nested form cards. */
+import { cn } from "../../styles";
+
+/**
+ * Keep section headings and fields aligned without nested form cards. The
+ * read view and the editor use the same sections, so editing stays in place.
+ */
 export function AutomationFormSection(props: {
   title: string;
   detail?: string;
+  /** Mark a section with unsaved edits. */
+  changed?: boolean;
   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">
+    <section
+      className={cn(
+        "grid min-w-0 gap-5 border-t border-dashboard-border-emphasis py-8 md:grid-cols-[12rem_minmax(0,1fr)] md:gap-10",
+        props.changed &&
+          "-ml-4 pl-4 shadow-[inset_2px_0_0_var(--color-dashboard-accent)] sm:-ml-5 sm:pl-5",
+      )}
+    >
       <div>
         <h2 className="m-0 font-display text-lg font-medium">{props.title}</h2>
+        {props.changed ? (
+          <p className="mt-1 mb-0 text-xs text-dashboard-accent-text">
+            Unsaved changes
+          </p>
+        ) : null}
         {props.detail ? (
           <p className="mt-2 mb-0 text-sm leading-relaxed text-dashboard-text-muted">
             {props.detail}

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

@@ -18,7 +18,7 @@ export function AutomationOutcomeList(props: {
   if (!props.outcomes.length)
     return <p className="m-0 text-sm">No success message</p>;
   return (
-    <ol className="m-0 grid gap-2 pl-5 text-sm">
+    <ol className="m-0 grid list-decimal gap-2 pl-5 text-sm">
       {props.outcomes.map((outcome, index) => (
         <li key={index}>
           {automationOutcomeLabel(outcome, props.destination)}

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

@@ -0,0 +1,238 @@
+/**
+ * Read view of one Automation. The sections match the editor, so edit mode
+ * changes the same rows in place. The side column holds status and activity.
+ */
+import type { ReactNode } from "react";
+import { Link, useLocation } from "react-router";
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+
+import {
+  useAutomationExecutionsData,
+  useAutomationVersionsData,
+} from "../../api";
+import {
+  selectTimeSeries,
+  type TimeRangeDays,
+} from "../../components/controls/TimeRangeSelector";
+import { Card } from "../../components/layout/Card";
+import { TranscriptText } from "../../conversations/TranscriptText";
+import { automationPath, formatCostSummary, peoplePath } from "../../format";
+import { pathWithSearch } from "../../searchParams";
+import { dashboardInlineLinkClass } from "../../styles";
+import { AutomationFormSection } from "./AutomationFormSection";
+import { AutomationOutcomeList } from "./AutomationOutcomeFields";
+import { AutomationRecentRuns } from "./AutomationRecentRuns";
+import { AutomationAttention, AutomationStatus } from "./AutomationStatus";
+import { TriggerFilters } from "./TriggerFilters";
+import {
+  automationScheduleLabel,
+  formatAutomationRunTime,
+} from "./automationFormat";
+
+/** Settings on the left; status, activity, and ownership on the right. */
+export function AutomationOverview(props: {
+  automation: AutomationSummary;
+  editPath: string;
+  range: TimeRangeDays;
+}) {
+  const { automation } = props;
+  return (
+    <div className="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_18rem] lg:gap-10">
+      <div className="grid min-w-0 content-start gap-6">
+        <AutomationAttention
+          automation={automation}
+          editPath={props.editPath}
+        />
+        <AutomationSettings automation={automation} />
+        <Card padding="sm">
+          <AutomationRecentRuns automation={automation} />
+        </Card>
+        {/* On small screens, status leads and About follows the settings. */}
+        <div className="lg:hidden">
+          <AutomationAbout automation={automation} />
+        </div>
+      </div>
+      <aside
+        aria-label="Automation status"
+        className="grid min-w-0 content-start gap-3 max-lg:row-start-1"
+      >
+        <RailCard title="Status">
+          <AutomationStatus automation={automation} />
+        </RailCard>
+        <AutomationActivity automation={automation} range={props.range} />
+        <div className="max-lg:hidden">
+          <AutomationAbout automation={automation} />
+        </div>
+      </aside>
+    </div>
+  );
+}
+
+/** Saved settings, in the same sections and order as the editor. */
+function AutomationSettings(props: { automation: AutomationSummary }) {
+  const { automation } = props;
+  const creator = automation.ownedByViewer ? "you" : automation.createdBy;
+  return (
+    <div className="min-w-0 [&>section:first-child]:border-t-0 [&>section:first-child]:pt-0">
+      <AutomationFormSection title="What to do">
+        <div className="text-base leading-relaxed [overflow-wrap:anywhere]">
+          <TranscriptText
+            mentions={automation.mentions ?? []}
+            text={automation.instruction}
+          />
+        </div>
+      </AutomationFormSection>
+      <AutomationFormSection title="When to run">
+        {automation.kind === "scheduled" ? (
+          <p className="m-0 text-sm">{automationScheduleLabel(automation)}</p>
+        ) : (
+          <div className="grid gap-1 text-sm">
+            <p className="m-0 break-words">{automation.resource}</p>
+            <p className="m-0 break-words text-dashboard-text-muted">
+              {automation.trigger.events.join(", ")}
+            </p>
+            <TriggerFilters filters={automation.trigger.filters} />
+          </div>
+        )}
+      </AutomationFormSection>
+      <AutomationFormSection title="Where results go">
+        <AutomationOutcomeList
+          outcomes={automation.outcomes}
+          destination={automation.destination}
+        />
+      </AutomationFormSection>
+      <AutomationFormSection title="Credentials">
+        <p className="m-0 text-sm">
+          {automation.credentialMode === "creator"
+            ? `Uses accounts connected by ${creator}.`
+            : "System credentials only. Junior does not use anyone’s connected accounts."}
+        </p>
+      </AutomationFormSection>
+    </div>
+  );
+}
+
+/** Runs, problems, and spend in the selected range. */
+function AutomationActivity(props: {
+  automation: AutomationSummary;
+  range: TimeRangeDays;
+}) {
+  const { automation, range } = props;
+  // AutomationRecentRuns reads the same query, so this adds no request.
+  const executions = useAutomationExecutionsData(true, automation.id);
+  const problems = executions.data
+    ? selectTimeSeries({
+        days: executions.data.executionDays,
+        hours: executions.data.executionHours,
+        sixHours: executions.data.executionSixHours,
+        range,
+      }).reduce(
+        (total, bucket) => ({
+          blocked: total.blocked + bucket.blocked,
+          failed: total.failed + bucket.failed,
+        }),
+        { blocked: 0, failed: 0 },
+      )
+    : undefined;
+  return (
+    <RailCard title={range === 1 ? "Last 24 hours" : `Last ${range} days`}>
+      <dl className="m-0 grid grid-cols-2 gap-x-4 gap-y-3">
+        <RailMetric label="Runs" value={automation.runs[range]} />
+        <RailMetric
+          label="Spend"
+          value={formatCostSummary({ total: automation.costUsd[range] })}
+        />
+        <RailMetric label="Failed" value={problems?.failed ?? "—"} />
+        <RailMetric label="Blocked" value={problems?.blocked ?? "—"} />
+      </dl>
+    </RailCard>
+  );
+}
+
+/** Who owns the Automation, where it lives, and which version is active. */
+function AutomationAbout(props: { automation: AutomationSummary }) {
+  const { automation } = props;
+  const location = useLocation();
+  const versions = useAutomationVersionsData(true, automation.id);
+  const activeVersion = versions.data?.activeVersion;
+  return (
+    <RailCard title="About">
+      <dl className="m-0 grid gap-3 text-sm">
+        <RailFact label="Created by">
+          {automation.createdByEmail ? (
+            <Link
+              className={dashboardInlineLinkClass}
+              to={peoplePath(automation.createdByEmail)}
+            >
+              {automation.ownedByViewer ? "You" : automation.createdBy}
+            </Link>
+          ) : automation.ownedByViewer ? (
+            "You"
+          ) : (
+            automation.createdBy
+          )}
+        </RailFact>
+        <RailFact label="Created">
+          {formatAutomationRunTime(automation.createdAt)}
+        </RailFact>
+        <RailFact label="Destination">
+          {automation.destination.label} ·{" "}
+          {automation.destination.visibility === "private"
+            ? "private"
+            : "public"}
+        </RailFact>
+        <RailFact label="Version">
+          <Link
+            className={dashboardInlineLinkClass}
+            to={pathWithSearch(
+              automationPath(automation.id, "versions"),
+              location.search,
+            )}
+          >
+            {activeVersion ? `Version ${activeVersion}` : "Version history"}
+          </Link>
+        </RailFact>
+      </dl>
+      {automation.ownedByViewer ? null : (
+        <p className="mt-3 mb-0 text-xs leading-relaxed text-dashboard-text-muted">
+          {automation.destination.visibility === "private"
+            ? null
+            : "You can edit its settings because it is in a public channel. "}
+          Only {automation.createdBy} can pause, resume, or delete it, change
+          where results go, or turn on their connected accounts.
+        </p>
+      )}
+    </RailCard>
+  );
+}
+
+function RailCard(props: { children: ReactNode; title: string }) {
+  return (
+    <Card as="section" padding="sm">
+      <h2 className="m-0 mb-3 font-sans text-xs font-medium text-dashboard-text-muted">
+        {props.title}
+      </h2>
+      {props.children}
+    </Card>
+  );
+}
+
+function RailMetric(props: { label: string; value: ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-xs text-dashboard-text-muted">{props.label}</dt>
+      <dd className="m-0 mt-0.5 font-display text-xl font-light tabular-nums text-dashboard-text">
+        {props.value}
+      </dd>
+    </div>
+  );
+}
+
+function RailFact(props: { children: ReactNode; label: string }) {
+  return (
+    <div className="grid min-w-0 gap-0.5">
+      <dt className="text-xs text-dashboard-text-muted">{props.label}</dt>
+      <dd className="m-0 min-w-0 break-words">{props.children}</dd>
+    </div>
+  );
+}

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

@@ -0,0 +1,343 @@
+/**
+ * One Automation page. Overview, Runs, and Versions are tabs under one header.
+ * Edit mode replaces the Overview read view in place.
+ */
+import { useRef, useState, type ReactNode } from "react";
+import { ArrowLeft } from "lucide-react";
+import {
+  Link,
+  matchPath,
+  Navigate,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router";
+import { useQuery } from "@tanstack/react-query";
+import {
+  automationEditSchema,
+  type AutomationSummary,
+} from "@sentry/junior/api/schema";
+import { eventTriggerText } from "@sentry/junior-plugin-api";
+
+import { useAutomationData } from "../../api";
+import { Button } from "../../components/ui/button";
+import { FormNotice } from "../../components/FormNotice";
+import { PageContentSkeleton } from "../../components/PageContentSkeleton";
+import {
+  TimeRangeSelector,
+  type TimeRangeDays,
+} from "../../components/controls/TimeRangeSelector";
+import { PageHeader } from "../../components/layout/PageHeader";
+import { PageLayout } from "../../components/layout/PageLayout";
+import { SecondaryNavigation } from "../../components/layout/SecondaryNavigation";
+import { automationPath, type AutomationTab } from "../../format";
+import { DashboardApiError, fetchDashboardJson } from "../../http";
+import { pathWithSearch, useSearchParamEnum } from "../../searchParams";
+import { cn } from "../../styles";
+import { AutomationActions } from "./AutomationActions";
+import { AutomationDeleteDialog } from "./AutomationDeleteDialog";
+import { AutomationEditor } from "./AutomationEditor";
+import { AutomationEditorLoading } from "./AutomationEditorLoading";
+import { AutomationOverview } from "./AutomationOverview";
+import { AUTOMATION_RUN_PARAM } from "./AutomationRunDetails";
+import {
+  AutomationRunsTab,
+  AUTOMATION_RESULT_PARAM,
+} from "./AutomationRunsTab";
+import {
+  AutomationStateChip,
+  automationNeedsAttention,
+} from "./AutomationStatus";
+import {
+  AUTOMATION_VERSION_PARAM,
+  AutomationVersionsTab,
+} from "./AutomationVersionsTab";
+
+const RANGE_OPTIONS = ["1", "7", "30", "90"] as const;
+
+/** Search params that belong to one tab. The list link drops them. */
+const PAGE_PARAMS = [
+  AUTOMATION_RESULT_PARAM,
+  AUTOMATION_RUN_PARAM,
+  AUTOMATION_VERSION_PARAM,
+];
+
+const TAB_LABELS: Record<AutomationTab, string> = {
+  edit: "Edit",
+  overview: "Overview",
+  runs: "Runs",
+  versions: "Versions",
+};
+
+/** Render one Automation tab, or edit mode, under the shared header and tabs. */
+export function AutomationPage(props: {
+  enabled: boolean;
+  tab: AutomationTab;
+}) {
+  const { automationId } = useParams();
+  const location = useLocation();
+  const summary = useAutomationData(props.enabled, automationId);
+  const [rangeParam, setRangeParam] = useSearchParamEnum(
+    "range",
+    "30",
+    RANGE_OPTIONS,
+  );
+  const range = Number(rangeParam) as TimeRangeDays;
+  if (!automationId) return <Navigate replace to="/automations/list" />;
+  const listSearch = new URLSearchParams(location.search);
+  for (const param of PAGE_PARAMS) listSearch.delete(param);
+  const listPath = pathWithSearch("/automations/list", listSearch);
+  const automation = summary.data;
+  const tabs = (["overview", "runs", "versions"] as const).map((tab) => ({
+    label: TAB_LABELS[tab],
+    to: automationPath(automationId, tab),
+    // Edit mode is part of Overview.
+    isActive: (pathname: string) =>
+      tab === "overview"
+        ? Boolean(
+            matchPath("/automations/:automationId", pathname) ||
+            matchPath("/automations/:automationId/edit", pathname),
+          )
+        : Boolean(matchPath(`/automations/:automationId/${tab}`, pathname)),
+  }));
+  const runsFrame = props.tab === "runs" && Boolean(automation);
+  return (
+    <SecondaryNavigation
+      ariaLabel="Automation navigation"
+      className={
+        runsFrame
+          ? "grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] md:grid-rows-[minmax(0,1fr)]"
+          : undefined
+      }
+      items={tabs}
+    >
+      {automation ? (
+        <AutomationPageContent
+          automation={automation}
+          listPath={listPath}
+          onRangeChange={(value) =>
+            setRangeParam(String(value) as (typeof RANGE_OPTIONS)[number])
+          }
+          range={range}
+          tab={props.tab}
+        />
+      ) : (
+        <PageLayout>
+          <BackLink to={listPath} />
+          <PageHeader
+            description="Settings, runs, and versions for one automation."
+            title="Automation"
+          />
+          {summary.error ? (
+            <FormNotice tone="error" title="Automation could not be loaded.">
+              {summary.error instanceof DashboardApiError &&
+              summary.error.status === 404
+                ? "This automation was not found or is not visible to you."
+                : "Try again."}{" "}
+              <Button onClick={() => void summary.refetch()}>Try again</Button>
+            </FormNotice>
+          ) : (
+            <PageContentSkeleton label="Loading automation" variant="list" />
+          )}
+        </PageLayout>
+      )}
+    </SecondaryNavigation>
+  );
+}
+
+function AutomationPageContent(props: {
+  automation: AutomationSummary;
+  listPath: string;
+  onRangeChange(value: TimeRangeDays): void;
+  range: TimeRangeDays;
+  tab: AutomationTab;
+}) {
+  const { automation, tab } = props;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [deleting, setDeleting] = useState(false);
+  const deleteSource = useRef<HTMLButtonElement | null>(null);
+  const completed = automation.status === "completed";
+  // Completed Automations cannot change, so edit mode shows the read view.
+  if (tab === "edit" && completed) {
+    return (
+      <Navigate
+        replace
+        to={pathWithSearch(automationPath(automation.id), location.search)}
+      />
+    );
+  }
+  const editPath = pathWithSearch(
+    automationPath(automation.id, "edit"),
+    location.search,
+  );
+  const header = (
+    <>
+      <BackLink to={props.listPath} />
+      <PageHeader
+        actions={
+          tab === "edit" ? undefined : (
+            <div className="flex flex-wrap items-start gap-2 md:justify-end">
+              {tab === "overview" || tab === "runs" ? (
+                <TimeRangeSelector
+                  onChange={props.onRangeChange}
+                  value={props.range}
+                />
+              ) : null}
+              <AutomationActions
+                automation={automation}
+                editPath={editPath}
+                editVariant={
+                  tab === "overview" && automationNeedsAttention(automation)
+                    ? "default"
+                    : "primary"
+                }
+                onDelete={(source) => {
+                  deleteSource.current = source;
+                  setDeleting(true);
+                }}
+              />
+            </div>
+          )
+        }
+        description={<AutomationHeaderLine automation={automation} />}
+        documentTitle={
+          tab === "overview"
+            ? automation.title
+            : `${automation.title} · ${TAB_LABELS[tab]}`
+        }
+        title={automation.title}
+      />
+    </>
+  );
+  const dialog = deleting ? (
+    <AutomationDeleteDialog
+      automation={automation}
+      onClose={() => setDeleting(false)}
+      onDeleted={() => {
+        deleteSource.current = null;
+        navigate(props.listPath);
+      }}
+      returnFocus={() =>
+        deleteSource.current?.isConnected ? deleteSource.current : false
+      }
+    />
+  ) : null;
+  if (tab === "runs") {
+    return (
+      <>
+        <AutomationRunsTab
+          automation={automation}
+          header={header}
+          range={props.range}
+        />
+        {dialog}
+      </>
+    );
+  }
+  return (
+    <PageLayout>
+      {header}
+      {tab === "overview" ? (
+        <AutomationOverview
+          automation={automation}
+          editPath={editPath}
+          range={props.range}
+        />
+      ) : null}
+      {tab === "edit" ? <AutomationEditMode automation={automation} /> : null}
+      {tab === "versions" ? (
+        <AutomationVersionsTab automation={automation} />
+      ) : null}
+      {dialog}
+    </PageLayout>
+  );
+}
+
+/** Load exact editable values, then edit the Overview sections in place. */
+function AutomationEditMode(props: { automation: AutomationSummary }) {
+  const { automation } = props;
+  const location = useLocation();
+  const edit = useQuery({
+    queryKey: ["dashboard", "automations", "edit", automation.id],
+    retry: false,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationEditSchema,
+        `/api/automations/${encodeURIComponent(automation.id)}/edit`,
+        signal,
+      ),
+  });
+  if (edit.error && !edit.data) {
+    return (
+      <FormNotice tone="error" title="Automation could not be loaded.">
+        It may no longer be available, or you may not have access.{" "}
+        <Button onClick={() => void edit.refetch()}>Try again</Button>
+      </FormNotice>
+    );
+  }
+  if (!edit.data) return <AutomationEditorLoading />;
+  return (
+    <AutomationEditor
+      key={automation.id}
+      automation={edit.data}
+      summary={automation}
+      returnPath={pathWithSearch(
+        automationPath(automation.id),
+        location.search,
+      )}
+    />
+  );
+}
+
+/** State, trigger, Destination, and creator in one line under the title. */
+function AutomationHeaderLine(props: { automation: AutomationSummary }) {
+  const { automation } = props;
+  const trigger =
+    automation.kind === "scheduled"
+      ? automation.schedule
+      : eventTriggerText(automation.resource, automation.trigger);
+  const parts: ReactNode[] = [
+    trigger,
+    automation.destination.label,
+    `Created by ${automation.ownedByViewer ? "you" : automation.createdBy}`,
+  ];
+  // Each part starts with its separator. The negative margin and the clip
+  // hide the separator of any part that starts a line.
+  return (
+    <span className="block min-w-0 overflow-hidden">
+      <span className="-ml-4 flex min-w-0 flex-wrap items-center gap-y-1">
+        <span className="flex items-center">
+          <span aria-hidden="true" className="inline-block w-4" />
+          <AutomationStateChip automation={automation} />
+        </span>
+        {parts.map((part, index) => (
+          <span className="min-w-0 break-words" key={index}>
+            <span
+              aria-hidden="true"
+              className={cn(
+                "inline-block w-4 text-center opacity-45",
+                index === 0 && "invisible",
+              )}
+            >
+              ·
+            </span>
+            {part}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
+function BackLink(props: { to: string }) {
+  return (
+    <Link
+      className="flex w-fit items-center gap-2 font-display text-sm font-medium text-dashboard-text-muted no-underline transition-colors hover:text-dashboard-text"
+      to={props.to}
+    >
+      <ArrowLeft aria-hidden="true" size={15} strokeWidth={1.8} />
+      All automations
+    </Link>
+  );
+}

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

@@ -8,6 +8,7 @@ import { Skeleton } from "../../components/ui/skeleton";
 import { StatusChip } from "../../components/StatusChip";
 import { conversationPath } from "../../conversations/conversationRoutes";
 import {
+  automationPath,
   formatCostSummary,
   formatRelativeTime,
   formatRuntime,
@@ -15,7 +16,7 @@ import {
 import { dashboardInlineLinkClass } from "../../styles";
 import { formatAutomationRunTime } from "./automationFormat";
 
-/** Preview the newest terminal runs without leaving the Automation list. */
+/** Preview the newest terminal runs on the Automation overview. */
 export function AutomationRecentRuns({
   automation,
 }: {
@@ -32,7 +33,7 @@ export function AutomationRecentRuns({
         {automation.totalRuns > 0 || runs.length > 0 ? (
           <Link
             className={`${dashboardInlineLinkClass} text-xs`}
-            to={`/automations/${encodeURIComponent(automation.id)}/executions`}
+            to={automationPath(automation.id, "runs")}
           >
             View all runs
           </Link>