@sentry/junior-dashboard 0.233.0 → 0.235.0

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

@@ -11,7 +11,11 @@ import { SecondaryNavigation } from "../../components/layout/SecondaryNavigation
 const RESERVED_TASK_SEGMENTS = new Set(["list", "runs"]);
 
 function isTasksListPath(pathname: string): boolean {
-  if (pathname === "/automations/list") return true;
+  if (
+    pathname === "/automations/list" ||
+    /^\/automations\/(scheduled|event)\/[^/]+\/edit$/.test(pathname)
+  )
+    return true;
   const match = pathname.match(/^\/automations\/([^/]+)$/);
   return Boolean(match?.[1] && !RESERVED_TASK_SEGMENTS.has(match[1]));
 }
@@ -22,16 +26,24 @@ const taskNavigationItems = [
   { label: "Runs", to: "/automations/runs" },
 ];
 
+/** Keep Automation navigation consistent across lists, details, and editing. */
+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 (
-    <>
-      <SecondaryNavigation
-        ariaLabel="Automations navigation"
-        items={taskNavigationItems}
-      />
+    <AutomationsNavigation>
       <PageLayout>{props.children}</PageLayout>
-    </>
+    </AutomationsNavigation>
   );
 }
 

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

@@ -0,0 +1,19 @@
+# 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.
+
+The editor sends only changed fields. Keep unsupported triggers and stored
+Destinations intact unless the user replaces them. Outcomes keep their order.
+New messages can target only the current Destination or the creator.
+
+Query refreshes must not replace an unsaved draft. After a stale save, the user
+can keep their changed fields or load the latest saved version. Unchanged fields
+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.
+
+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/automationDraft.ts

@@ -0,0 +1,110 @@
+import type {
+  AutomationEdit,
+  AutomationScheduleIntent,
+  AutomationUpdate,
+} from "@sentry/junior/api/schema";
+
+export const weekdays = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+] as const;
+export type AutomationScheduleDraft =
+  | Extract<AutomationScheduleIntent, { kind: "recurring" }>
+  | {
+      kind: "one_off";
+      timezone: string;
+      timing: { type: "at"; date: string; time: string };
+    };
+
+export type AutomationDraft = {
+  title: string;
+  instruction: string;
+  credentialMode: AutomationEdit["credentialMode"];
+  outcomes: NonNullable<AutomationUpdate["outcomes"]>;
+  schedule?: AutomationScheduleDraft;
+  trigger?: Extract<AutomationEdit, { kind: "event" }>["trigger"];
+};
+
+/** Keep stored values intact until a user edits that field. */
+export function createAutomationDraft(value: AutomationEdit): AutomationDraft {
+  return {
+    title: value.title ?? "",
+    instruction: value.instruction,
+    credentialMode: value.credentialMode,
+    outcomes: value.outcomes,
+    trigger: value.kind === "event" ? value.trigger : undefined,
+  };
+}
+
+/** Populate calendar controls without changing the saved start date. */
+export function scheduleDraft(
+  value: Extract<AutomationEdit, { kind: "scheduled" }>,
+): AutomationScheduleDraft {
+  const recurrence = value.schedule.recurrence;
+  if (value.schedule.kind === "recurring" && recurrence) {
+    const { time, weekdays: days, ...fields } = recurrence;
+    return {
+      kind: "recurring",
+      ...fields,
+      timezone: value.schedule.timezone,
+      time: `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`,
+      weekdays: days?.map((day) => weekdays[day]),
+    };
+  }
+  if (value.nextRunAtMs) {
+    const parts = new Intl.DateTimeFormat("en-CA", {
+      timeZone: value.schedule.timezone,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hourCycle: "h23",
+    }).formatToParts(value.nextRunAtMs);
+    const part = (name: string) =>
+      parts.find((p) => p.type === name)?.value ?? "";
+    return {
+      kind: "one_off",
+      timezone: value.schedule.timezone,
+      timing: {
+        type: "at",
+        date: `${part("year")}-${part("month")}-${part("day")}`,
+        time: `${part("hour")}:${part("minute")}`,
+      },
+    };
+  }
+  return {
+    kind: "recurring",
+    frequency: "daily",
+    time: "09:00",
+    timezone: value.schedule.timezone,
+  };
+}
+
+/** Keep metadata edits from replacing unchanged triggers or outcomes. */
+export function automationDraftChanges(
+  original: AutomationEdit,
+  draft: AutomationDraft,
+): Partial<AutomationDraft> {
+  const changes: Partial<AutomationDraft> = {};
+  if (draft.title !== (original.title ?? "")) changes.title = draft.title;
+  if (draft.instruction !== original.instruction)
+    changes.instruction = draft.instruction;
+  if (draft.credentialMode !== original.credentialMode)
+    changes.credentialMode = draft.credentialMode;
+  if (JSON.stringify(draft.outcomes) !== JSON.stringify(original.outcomes))
+    changes.outcomes = draft.outcomes;
+  if (original.kind === "scheduled" && draft.schedule)
+    changes.schedule = draft.schedule;
+  if (
+    original.kind === "event" &&
+    JSON.stringify(draft.trigger) !== JSON.stringify(original.trigger)
+  )
+    changes.trigger = draft.trigger;
+  return changes;
+}

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/automations/automationOutcomes.ts

@@ -0,0 +1,23 @@
+import type {
+  AutomationSummary,
+  AutomationUpdate,
+} from "@sentry/junior/api/schema";
+
+type Outcome = NonNullable<AutomationUpdate["outcomes"]>[number];
+
+/** Describe a retained Destination without guessing a recipient from a private id. */
+export function automationOutcomeLabel(
+  outcome: Outcome,
+  destination: AutomationSummary["destination"],
+): string {
+  if (typeof outcome.destination === "string")
+    return outcome.destination === "task_creator"
+      ? "Creator · Direct message"
+      : `${destination.label} · ${destination.visibility}`;
+  if (
+    outcome.destination.channelId === destination.channelId &&
+    outcome.destination.teamId === destination.teamId
+  )
+    return `${destination.label} · ${destination.visibility}`;
+  return `Saved destination · ${outcome.destination.channelId}`;
+}

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

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

@@ -1,11 +1,9 @@
 import { useState } from "react";
 import type { CodeOverviewReport } from "@sentry/junior/api/schema";
-import { Coins, GitPullRequest, LibraryBig, Timer } from "lucide-react";
+import { Link } from "react-router";
 import { useCodeOverviewData } from "../../api";
-import { formatDuration } from "../../components/Duration";
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
 import { PageRouteLoading } from "../../components/PageRouteLoading";
-import { StatusChip } from "../../components/StatusChip";
 import {
   selectTimeSeries,
   timeRangeBucketUnit,
@@ -14,29 +12,14 @@ import {
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { PageLayout } from "../../components/layout/PageLayout";
-import { StatCard } from "../../components/metrics/StatCard";
-import { formatCompactNumber, formatCostSummary } from "../../format";
 import { CodeActivityChart } from "./CodeActivityChart";
-
-function mergeRate(value: number | undefined): string {
-  return value === undefined ? "—" : `${Math.round(value * 100)}%`;
-}
-
-function medianMergeTime(value: number | undefined): string {
-  return formatDuration(value) || "—";
-}
-
-function costUsd(value: number | undefined): string {
-  return (
-    formatCostSummary(value === undefined ? undefined : { total: value }) || "—"
-  );
-}
-
-function stateTone(state: "closed" | "merged" | "open") {
-  if (state === "merged") return "success" as const;
-  if (state === "open") return "info" as const;
-  return "neutral" as const;
-}
+import { CodeChangeRow } from "./CodeChangeRow";
+import {
+  CodeSummaryCards,
+  formatCodeCost,
+  formatMergeRate,
+} from "./CodeSummaryCards";
+import { codeRepositoryPath } from "./codeRepositoryRoutes";
 
 /** Render code analytics and recent code changes. */
 export function CodePage() {
@@ -77,32 +60,7 @@ function CodeOverview(props: {
   const data = props.data;
   return (
     <>
-      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-        <StatCard
-          detail="In the last 30 days"
-          icon={GitPullRequest}
-          label="Created"
-          value={formatCompactNumber(data.summary.created)}
-        />
-        <StatCard
-          detail="Share of completed changes that merged"
-          icon={LibraryBig}
-          label="Merge rate"
-          value={mergeRate(data.summary.mergeRate)}
-        />
-        <StatCard
-          detail="Median time from open to merge in the last 30 days"
-          icon={Timer}
-          label="Median merge time"
-          value={medianMergeTime(data.summary.medianMergeTimeMs)}
-        />
-        <StatCard
-          detail="Conversation cost for changes opened in the last 30 days"
-          icon={Coins}
-          label="Cost"
-          value={costUsd(data.summary.costUsd)}
-        />
-      </div>
+      <CodeSummaryCards summary={data.summary} />
       <CodeActivityChart
         bucketUnit={timeRangeBucketUnit(props.range)}
         days={selectTimeSeries({
@@ -160,18 +118,12 @@ function CodeOverview(props: {
                   >
                     <td className="min-w-0 px-4 py-3">
                       <div className="truncate font-display text-sm text-dashboard-text">
-                        {repository.url ? (
-                          <a
-                            className="text-inherit no-underline hover:text-cyan-100"
-                            href={repository.url}
-                            rel="noreferrer"
-                            target="_blank"
-                          >
-                            {repository.name}
-                          </a>
-                        ) : (
-                          repository.name
-                        )}
+                        <Link
+                          className="text-inherit no-underline hover:text-cyan-100"
+                          to={codeRepositoryPath(repository.id)}
+                        >
+                          {repository.name}
+                        </Link>
                       </div>
                       <div className="mt-1 truncate font-mono text-xs text-dashboard-text-muted">
                         {repository.provider}
@@ -181,10 +133,10 @@ function CodeOverview(props: {
                       {repository.created}
                     </td>
                     <td className="px-4 py-3 text-right font-mono text-sm whitespace-nowrap text-dashboard-text">
-                      {mergeRate(repository.mergeRate)}
+                      {formatMergeRate(repository.mergeRate)}
                     </td>
                     <td className="px-4 py-3 text-right font-mono text-sm whitespace-nowrap text-dashboard-text">
-                      {costUsd(repository.medianCostUsd)}
+                      {formatCodeCost(repository.medianCostUsd)}
                     </td>
                   </tr>
                 ))}
@@ -200,34 +152,7 @@ function CodeOverview(props: {
           </div>
           <div>
             {data.changes.map((change) => (
-              <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"
-                key={change.id}
-              >
-                <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"
-                      >
-                        {change.title ??
-                          `${change.repository} #${change.number}`}
-                      </a>
-                    ) : (
-                      (change.title ?? `${change.repository} #${change.number}`)
-                    )}
-                  </div>
-                  <div className="mt-1 truncate font-mono text-xs text-dashboard-text-muted">
-                    {change.repository} #{change.number} · {change.provider}
-                  </div>
-                </div>
-                <StatusChip size="compact" tone={stateTone(change.state)}>
-                  {change.state}
-                </StatusChip>
-              </div>
+              <CodeChangeRow change={change} key={change.id} />
             ))}
           </div>
         </Card>

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

@@ -0,0 +1,53 @@
+import type { CodeOverviewReport } from "@sentry/junior/api/schema";
+import { Coins, GitPullRequest, LibraryBig, Timer } from "lucide-react";
+
+import { formatDuration } from "../../components/Duration";
+import { StatCard } from "../../components/metrics/StatCard";
+import { formatCompactNumber, formatCostSummary } from "../../format";
+
+/** Format a merge rate, or a dash when no change has finished. */
+export function formatMergeRate(value: number | undefined): string {
+  return value === undefined ? "—" : `${Math.round(value * 100)}%`;
+}
+
+/** Format a code cost, or a dash when no cost is recorded. */
+export function formatCodeCost(value: number | undefined): string {
+  return (
+    formatCostSummary(value === undefined ? undefined : { total: value }) || "—"
+  );
+}
+
+/** Show the 30-day code change summary cards. */
+export function CodeSummaryCards(props: {
+  summary: CodeOverviewReport["summary"];
+}) {
+  const summary = props.summary;
+  return (
+    <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+      <StatCard
+        detail="In the last 30 days"
+        icon={GitPullRequest}
+        label="Created"
+        value={formatCompactNumber(summary.created)}
+      />
+      <StatCard
+        detail="Share of completed changes that merged"
+        icon={LibraryBig}
+        label="Merge rate"
+        value={formatMergeRate(summary.mergeRate)}
+      />
+      <StatCard
+        detail="Median time from open to merge in the last 30 days"
+        icon={Timer}
+        label="Median merge time"
+        value={formatDuration(summary.medianMergeTimeMs) || "—"}
+      />
+      <StatCard
+        detail="Conversation cost for changes opened in the last 30 days"
+        icon={Coins}
+        label="Cost"
+        value={formatCodeCost(summary.costUsd)}
+      />
+    </div>
+  );
+}