@sentry/junior-dashboard 0.234.0 → 0.236.0

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

@@ -0,0 +1,356 @@
+/** Version history for one Automation. Making a version active saves it again. */
+import { useState } from "react";
+import { ArrowLeft } 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,
+} from "@sentry/junior/api/schema";
+import { useAutomationData, useAutomationVersionsData } from "../../api";
+import { Button } from "../../components/Button";
+import { Detail, DetailList } from "../../components/DetailList";
+import { FormNotice } from "../../components/FormNotice";
+import { InlineError } from "../../components/InlineError";
+import { PageContentSkeleton } from "../../components/PageContentSkeleton";
+import { StatusChip } from "../../components/StatusChip";
+import { Card } from "../../components/layout/Card";
+import { PageHeader } from "../../components/layout/PageHeader";
+import { automationPath } from "../../format";
+import { DashboardApiError, fetchDashboardJson, post } from "../../http";
+import { pathWithSearch } from "../../searchParams";
+import { formatAutomationRunTime } from "./automationFormat";
+import { automationOutcomeLabel } from "./automationOutcomes";
+
+const DESCRIPTION = "Saved settings for this automation, newest first.";
+
+/** Load one Automation's versions with its summary for labels and access. */
+export function AutomationVersionsPage(props: { enabled: boolean }) {
+  const { automationId, kind } = useParams();
+  const [searchParams] = useSearchParams();
+  const taskKind = kind === "scheduled" || kind === "event" ? kind : undefined;
+  const enabled = props.enabled && Boolean(automationId && taskKind);
+  const summary = useAutomationData(enabled, automationId);
+  const versions = useAutomationVersionsData(enabled, taskKind, automationId);
+  if (!automationId || !taskKind) {
+    return <Navigate replace to="/automations" />;
+  }
+  const backTo = pathWithSearch(automationPath(automationId), searchParams);
+  const error = summary.error ?? versions.error;
+  const notFound =
+    (error instanceof DashboardApiError && error.status === 404) ||
+    (summary.data && summary.data.kind !== taskKind);
+  if (error || notFound) {
+    return (
+      <>
+        <PageHeader description={DESCRIPTION} title="Version history" />
+        <Card padding="md">
+          <InlineError>
+            {notFound
+              ? "This automation was not found or is not visible to you."
+              : "Version history could not be loaded. Try again."}
+          </InlineError>
+          <BackLink to={backTo} />
+        </Card>
+      </>
+    );
+  }
+  if (!summary.data || !versions.data) {
+    return (
+      <>
+        <PageHeader description={DESCRIPTION} title="Version history" />
+        <PageContentSkeleton label="Loading version history" variant="list" />
+      </>
+    );
+  }
+  return (
+    <AutomationVersionsView
+      automation={summary.data}
+      backTo={backTo}
+      data={versions.data}
+    />
+  );
+}
+
+function BackLink(props: { to: string }) {
+  return (
+    <Link
+      className="mb-3 inline-flex items-center gap-2 font-mono text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
+      to={props.to}
+    >
+      <ArrowLeft aria-hidden="true" size={14} />
+      Back to automation
+    </Link>
+  );
+}
+
+function AutomationVersionsView(props: {
+  automation: AutomationSummary;
+  backTo: string;
+  data: AutomationVersionList;
+}) {
+  const { automation, data } = props;
+  const queryClient = useQueryClient();
+  const [activated, setActivated] = useState<number>();
+  const canActivate = !(
+    automation.kind === "scheduled" && automation.status === "completed"
+  );
+  const path = `/api/automations/${automation.kind}/${encodeURIComponent(automation.id)}`;
+  const activate = useMutation({
+    mutationFn: async (version: number) => {
+      // The user chose an exact saved version, so the latest revision is safe here.
+      const current = await fetchDashboardJson(
+        automationEditSchema,
+        `${path}/edit`,
+      );
+      return post(
+        automationEditSchema,
+        `${path}/versions/${version}/activate`,
+        { revision: current.revision },
+      );
+    },
+    onMutate: () => setActivated(undefined),
+    onSuccess: async (_, version) => {
+      setActivated(version);
+      await queryClient.invalidateQueries({
+        queryKey: ["dashboard", "automations"],
+      });
+    },
+  });
+  return (
+    <>
+      <div>
+        <BackLink to={props.backTo} />
+        <PageHeader
+          description={`${automation.kind} automation · ${automation.destination.label} · ${data.versions.length} ${data.versions.length === 1 ? "version" : "versions"}`}
+          title={automation.title}
+        />
+      </div>
+      <p className="m-0 max-w-2xl text-sm leading-relaxed text-dashboard-text-muted">
+        {canActivate
+          ? "Making a version active saves its settings as a new version. Earlier versions stay in this list. It does not run the automation."
+          : "This automation has completed. Its versions are read-only."}
+      </p>
+      {activated !== undefined ? (
+        <p role="status" className="m-0 text-sm text-emerald-300">
+          Version {activated} is active again. It was saved as a new version.
+        </p>
+      ) : null}
+      {data.versions.length === 0 ? (
+        <Card padding="md">
+          <p className="m-0 text-sm text-dashboard-text-muted">
+            No versions are saved yet. Junior saves a version each time the
+            settings change.
+          </p>
+        </Card>
+      ) : (
+        <Card>
+          <ol className="m-0 list-none divide-y divide-dashboard-border-subtle p-0">
+            {data.versions.map((version, index) => (
+              <VersionRow
+                key={version.version}
+                active={version.version === data.activeVersion}
+                automation={automation}
+                canActivate={canActivate}
+                error={
+                  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);
+                }}
+                pending={
+                  activate.isPending && activate.variables === version.version
+                }
+                previous={data.versions[index + 1]}
+                truncated={data.truncated}
+                version={version}
+              />
+            ))}
+          </ol>
+        </Card>
+      )}
+      {data.truncated ? (
+        <p className="m-0 text-center text-xs text-dashboard-text-muted">
+          Showing the 100 most recent versions.
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+function VersionRow(props: {
+  active: boolean;
+  automation: AutomationSummary;
+  canActivate: boolean;
+  error: Error | null;
+  onActivate(): void;
+  pending: boolean;
+  previous: AutomationVersion | undefined;
+  truncated: boolean;
+  version: AutomationVersion;
+}) {
+  const { automation, version } = props;
+  const editor = version.editedBy
+    ? (version.editedBy.fullName ??
+      version.editedBy.userName ??
+      version.editedBy.slackUserId)
+    : "Editor unknown";
+  const changes = props.previous
+    ? changedFields(props.previous, version)
+    : undefined;
+  const changeText = changes
+    ? changes.length
+      ? `Changed ${changes.join(", ")}`
+      : "No setting changes"
+    : version.version === 1 || !props.truncated
+      ? "First saved version"
+      : undefined;
+  const titleId = `automation-version-${version.version}`;
+  return (
+    <li aria-labelledby={titleId} className="grid gap-3 px-4 py-4 sm:px-5">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex flex-wrap items-center gap-3">
+            <h3 id={titleId} className="m-0 text-sm font-medium">
+              Version {version.version}
+            </h3>
+            {props.active ? (
+              <StatusChip size="compact" tone="success">
+                Active
+              </StatusChip>
+            ) : null}
+          </div>
+          <p className="mt-1 mb-0 text-xs text-dashboard-text-muted">
+            {editor} · {formatAutomationRunTime(version.createdAt)}
+          </p>
+          {changeText ? (
+            <p className="mt-1 mb-0 text-xs text-dashboard-text-muted">
+              {changeText}
+            </p>
+          ) : null}
+        </div>
+        {props.canActivate && !props.active ? (
+          <Button
+            aria-label={`Make version ${version.version} active`}
+            disabled={props.pending}
+            onClick={props.onActivate}
+          >
+            {props.pending ? "Saving…" : "Make active"}
+          </Button>
+        ) : null}
+      </div>
+      {props.error ? (
+        <FormNotice tone="error" title="This version could not be made active.">
+          {props.error instanceof DashboardApiError
+            ? props.error.code === "conflict"
+              ? "The automation changed. Try again."
+              : (props.error.apiError ?? "Try again.")
+            : "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">
+          Show settings
+        </summary>
+        <VersionSettings automation={automation} version={version} />
+      </details>
+    </li>
+  );
+}
+
+function VersionSettings(props: {
+  automation: AutomationSummary;
+  version: AutomationVersion;
+}) {
+  const { automation, version } = props;
+  const { definition } = version;
+  const destination =
+    definition.destination.channelId === automation.destination.channelId &&
+    definition.destination.teamId === automation.destination.teamId
+      ? automation.destination.label
+      : `Another destination · ${definition.destination.channelId}`;
+  return (
+    <DetailList className="mt-2">
+      <Detail label="Title">
+        {definition.title ?? "First line of the instruction"}
+      </Detail>
+      <Detail label="What to do" valueClassName="whitespace-pre-wrap">
+        {definition.instruction}
+      </Detail>
+      <Detail label="When to run">
+        {version.kind === "scheduled" ? (
+          version.definition.schedule.description.includes(
+            version.definition.schedule.timezone,
+          ) ? (
+            version.definition.schedule.description
+          ) : (
+            `${version.definition.schedule.description} (${version.definition.schedule.timezone})`
+          )
+        ) : (
+          <>
+            {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}
+          </>
+        )}
+      </Detail>
+      <Detail label="Destination">{destination}</Detail>
+      <Detail label="On success">
+        {definition.outcomes.length ? (
+          <ol className="m-0 grid gap-1 p-0">
+            {definition.outcomes.map((outcome, index) => (
+              <li key={index}>
+                {automationOutcomeLabel(outcome, automation.destination)}
+              </li>
+            ))}
+          </ol>
+        ) : (
+          "No message on success"
+        )}
+      </Detail>
+      <Detail label="Connected accounts">
+        {definition.credentialMode === "creator"
+          ? `Uses accounts connected by ${automation.ownedByViewer ? "you" : automation.createdBy}.`
+          : "System credentials only"}
+      </Detail>
+    </DetailList>
+  );
+}
+
+/** Name the settings that differ from the previous version. */
+function changedFields(
+  previous: AutomationVersion,
+  version: AutomationVersion,
+): string[] {
+  const before: Record<string, unknown> = previous.definition;
+  const after: Record<string, unknown> = version.definition;
+  return (
+    [
+      ["title", "title"],
+      ["instruction", "instruction"],
+      ["schedule", "schedule"],
+      ["trigger", "trigger"],
+      ["destination", "destination"],
+      ["outcomes", "success messages"],
+      ["credentialMode", "connected accounts"],
+    ] as const
+  ).flatMap(([key, label]) =>
+    JSON.stringify(before[key]) === JSON.stringify(after[key]) ? [] : [label],
+  );
+}

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

@@ -13,7 +13,7 @@ import {
 import { Globe2, ListChecks, LockKeyhole, UserRound } from "lucide-react";
 import { useAutomationsData, useAutomationData } from "../../api";
 import { Button } from "../../components/Button";
-import { AutomationFilters } from "./AutomationFilters";
+import { AutomationFilters, AutomationSort } from "./AutomationFilters";
 import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
 import { pageCount, PagePagination } from "../../components/Pagination";
@@ -32,7 +32,7 @@ import {
   useDebouncedSearchParam,
   useSearchParamEnum,
 } from "../../searchParams";
-import { AutomationRow, AutomationListHeader } from "./AutomationRow";
+import { AutomationRow } from "./AutomationRow";
 import { AutomationCostChart } from "./AutomationCostChart";
 import { AutomationDetailsDrawer } from "./AutomationDetailsDrawer";
 import { AutomationExecutionChart } from "./AutomationExecutionChart";
@@ -274,16 +274,20 @@ export function AutomationsPage(props: {
       ) : null}
       {query.data && props.view === "list" ? (
         <>
-          <div className="flex flex-wrap items-baseline justify-between gap-x-5 gap-y-1">
+          <div className="flex flex-wrap items-center justify-between gap-x-5 gap-y-2">
             <p className="m-0 text-xs text-dashboard-text-muted">
               {visibleTaskCount}{" "}
               {visibleTaskCount === 1 ? "automation" : "automations"}
-            </p>
-            <p className="m-0 text-xs text-dashboard-text-muted">
               {query.isFetching ? (
-                <span role="status">Updating results…</span>
+                <span className="ml-3" role="status">
+                  Updating results…
+                </span>
               ) : null}
             </p>
+            <AutomationSort
+              value={filters.sort}
+              onChange={(value) => setFilter("sort", value)}
+            />
           </div>
           {!query.error && visibleTaskCount === 0 ? (
             <Card padding="md">
@@ -292,44 +296,38 @@ export function AutomationsPage(props: {
               </p>
             </Card>
           ) : (
-            <Card className="overflow-visible">
-              <AutomationListHeader />
-              <div
-                className="divide-y divide-dashboard-border-subtle"
-                role="list"
-              >
-                {automations.map((automation) => {
-                  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
-                            ? tasksPath(listPath)
-                            : selectedTaskPath(automation.id),
+            <div className="grid grid-cols-[minmax(0,1fr)] gap-2" role="list">
+              {automations.map((automation) => {
+                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);
                       }
-                      selected={automationId === automation.id}
-                      automation={automation}
-                    />
-                  );
-                })}
-              </div>
-            </Card>
+                    }}
+                    onSelect={() =>
+                      navigate(
+                        automationId === automation.id
+                          ? tasksPath(listPath)
+                          : selectedTaskPath(automation.id),
+                      )
+                    }
+                    selected={automationId === automation.id}
+                    automation={automation}
+                  />
+                );
+              })}
+            </div>
           )}
           <PagePagination
             onPageChange={setPage}

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

@@ -27,22 +27,23 @@ const taskNavigationItems = [
 ];
 
 /** Keep Automation navigation consistent across lists, details, and editing. */
-export function AutomationsNavigation() {
+export function AutomationsNavigation(props: { children: ReactNode }) {
   return (
     <SecondaryNavigation
       ariaLabel="Automations navigation"
       items={taskNavigationItems}
-    />
+    >
+      {props.children}
+    </SecondaryNavigation>
   );
 }
 
 /** Place the shared secondary navigation above one Automations page. */
 export function AutomationsPageLayout(props: { children: ReactNode }) {
   return (
-    <>
-      <AutomationsNavigation />
+    <AutomationsNavigation>
       <PageLayout>{props.children}</PageLayout>
-    </>
+    </AutomationsNavigation>
   );
 }
 

package/src/client/pages/automations/README.md

@@ -1,8 +1,13 @@
 # Automation editor
 
-Core owns validation, creator access, revision checks, Schedule previews, and
-the Event catalog. Preview requests cannot save or run work. Completed scheduled
-Automations remain read-only.
+Core owns validation, edit access, creator-only rules, revision checks,
+Schedule previews, and the Event catalog. Preview requests cannot save or run
+work. Completed scheduled Automations remain read-only.
+
+Owners and public Destination readers can edit. For a public reader, the
+editor shows outcomes as read-only and blocks turning on creator credential
+use. It warns that an instruction or event selector change switches to system
+credentials. Pause and resume stay creator-only.
 
 The editor sends only changed fields. Keep unsupported triggers and stored
 Destinations intact unless the user replaces them. Outcomes keep their order.
@@ -15,5 +20,11 @@ come from that version; core checks its revision again on save.
 The data router blocks navigation with unsaved changes. Browser unload uses the
 native prompt. Save and Cancel keep the list query string.
 
+Version history lists saved versions, newest first, and marks the active
+version. "Make active" uses the native confirm dialog, like delete. It then
+reads the latest revision and asks core to save that version again as a new
+version. Core applies the same edit rules, so the page
+shows its error when a public reader cannot make a version active.
+
 Browser behavior lives in `e2e/automation-editor.spec.ts`. API and persistence
 coverage lives in core's `tests/integration/api/automation-edits.test.ts`.

package/src/client/pages/automations/automationFormat.ts

@@ -0,0 +1,43 @@
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import { formatTime } from "../../format";
+
+type ScheduledAutomation = Extract<AutomationSummary, { kind: "scheduled" }>;
+type EventAutomation = Extract<AutomationSummary, { kind: "event" }>;
+
+/** Show the schedule with its timezone unless the schedule text already names it. */
+export function automationScheduleLabel(
+  automation: ScheduledAutomation,
+): string {
+  return automation.schedule.includes(automation.timezone)
+    ? automation.schedule
+    : `${automation.schedule} (${automation.timezone})`;
+}
+
+/** Name event triggers in readable words. */
+export function automationEventNames(automation: EventAutomation): string {
+  return automation.events
+    .map((event) => event.replaceAll(/[._]/g, " "))
+    .join(", ");
+}
+
+/** Summarize event match conditions as one readable line. */
+export function automationEventConditions(automation: EventAutomation): string {
+  return Object.entries(automation.match ?? {})
+    .map(
+      ([field, value]) =>
+        `${field}: ${Array.isArray(value) ? value.join(" or ") : String(value)}`,
+    )
+    .join(" · ");
+}
+
+/** Format a run time with date, time, and zone for details and tooltips. */
+export function formatAutomationRunTime(value: string): string {
+  return formatTime(value, {
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    month: "short",
+    timeZoneName: "short",
+    year: "numeric",
+  });
+}

package/src/client/pages/code/CodeChangeRow.tsx

@@ -0,0 +1,41 @@
+import type { CodeChangeSummaryReport } from "@sentry/junior/api/schema";
+
+import { StatusChip } from "../../components/StatusChip";
+
+function stateTone(state: CodeChangeSummaryReport["state"]) {
+  if (state === "merged") return "success" as const;
+  if (state === "open") return "info" as const;
+  return "neutral" as const;
+}
+
+/** Show one code change with its title, repository reference, and state. */
+export function CodeChangeRow(props: { change: CodeChangeSummaryReport }) {
+  const change = props.change;
+  const title = change.title ?? `${change.repository} #${change.number}`;
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-4 border-b border-dashboard-border-subtle px-4 py-3 last:border-b-0">
+      <div className="min-w-0">
+        <div className="truncate font-display text-sm text-dashboard-text">
+          {change.url ? (
+            <a
+              className="text-inherit no-underline hover:text-cyan-100"
+              href={change.url}
+              rel="noreferrer"
+              target="_blank"
+            >
+              {title}
+            </a>
+          ) : (
+            title
+          )}
+        </div>
+        <div className="mt-1 truncate font-mono text-xs text-dashboard-text-muted">
+          {change.repository} #{change.number}
+        </div>
+      </div>
+      <StatusChip size="compact" tone={stateTone(change.state)}>
+        {change.state}
+      </StatusChip>
+    </div>
+  );
+}