@sentry/junior-dashboard 0.235.0 → 0.237.0

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

@@ -114,16 +114,24 @@ export function AutomationDetailsDrawer(props: {
             )}
           </Detail>
         </DetailList>
-        {automation.totalRuns > 0 &&
-        automation.lastRunStatus !== "failed" &&
-        automation.lastRunStatus !== "blocked" ? (
+        <div className="flex flex-wrap gap-x-5">
+          {automation.totalRuns > 0 &&
+          automation.lastRunStatus !== "failed" &&
+          automation.lastRunStatus !== "blocked" ? (
+            <Link
+              className="w-fit py-2 text-sm text-dashboard-text underline underline-offset-2"
+              to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
+            >
+              View all runs
+            </Link>
+          ) : null}
           <Link
             className="w-fit py-2 text-sm text-dashboard-text underline underline-offset-2"
-            to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
+            to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/versions${location.search}`}
           >
-            View all runs
+            Version history
           </Link>
-        ) : null}
+        </div>
         <details>
           <summary className="cursor-pointer py-3 text-sm text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline focus-visible:outline-dashboard-focus">
             More details

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

@@ -14,15 +14,15 @@ import { AutomationsNavigation } from "./AutomationsPageLayout";
 import { AutomationEditor } from "./AutomationEditor";
 import { AutomationEditorLoading } from "./AutomationEditorLoading";
 import { AutomationFormSection } from "./AutomationFormSection";
-import { automationOutcomeLabel } from "./automationOutcomes";
+import { AutomationOutcomeList } from "./AutomationOutcomeFields";
 
-/** Load a linkable editor, with readable public values for non-creators. */
+/** Load a linkable editor. Owners and public readers can edit until work completes. */
 export function AutomationEditPage(props: { enabled: boolean }) {
   const { kind, automationId } = useParams();
   const location = useLocation();
   const summary = useAutomationData(props.enabled, automationId);
   const canEdit =
-    summary.data?.ownedByViewer &&
+    summary.data &&
     !(summary.data.kind === "scheduled" && summary.data.status === "completed");
   const edit = useQuery({
     queryKey: ["dashboard", "automations", "edit", kind, automationId],
@@ -74,9 +74,17 @@ export function AutomationEditPage(props: { enabled: boolean }) {
             ) : null}
           </div>
           {value ? (
-            <StatusChip tone={statusTone}>
-              {status === "unavailable" ? "Trigger unavailable" : status}
-            </StatusChip>
+            <div className="flex items-center gap-4">
+              <Link
+                to={`/automations/${value.kind}/${encodeURIComponent(value.id)}/versions${location.search}`}
+                className="text-sm text-dashboard-text-muted underline underline-offset-2 hover:text-dashboard-text"
+              >
+                Version history
+              </Link>
+              <StatusChip tone={statusTone}>
+                {status === "unavailable" ? "Trigger unavailable" : status}
+              </StatusChip>
+            </div>
           ) : null}
         </div>
         {(!value && summary.error) ||
@@ -114,9 +122,8 @@ function AutomationReadOnly({ automation }: { automation: AutomationSummary }) {
   return (
     <>
       <p className="mb-6 text-sm text-dashboard-text-muted">
-        {automation.ownedByViewer
-          ? "This automation has completed and cannot be edited. It will not run again."
-          : `Only ${automation.createdBy} can edit this automation.`}
+        This automation has completed and cannot be edited. It will not run
+        again.
       </p>
       <AutomationFormSection title="What to do" detail="The saved instruction.">
         <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed">
@@ -144,17 +151,10 @@ function AutomationReadOnly({ automation }: { automation: AutomationSummary }) {
         title="Where results go"
         detail="Messages after successful work."
       >
-        {automation.outcomes.length ? (
-          <ol className="m-0 grid gap-2 pl-5 text-sm">
-            {automation.outcomes.map((outcome, index) => (
-              <li key={index}>
-                {automationOutcomeLabel(outcome, automation.destination)}
-              </li>
-            ))}
-          </ol>
-        ) : (
-          <p className="m-0 text-sm">No success message</p>
-        )}
+        <AutomationOutcomeList
+          outcomes={automation.outcomes}
+          destination={automation.destination}
+        />
       </AutomationFormSection>
       <AutomationFormSection
         title="Credentials"

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

@@ -16,7 +16,10 @@ import { DashboardApiError, fetchDashboardJson, patch } from "../../http";
 import { AutomationFormSection } from "./AutomationFormSection";
 import { AutomationScheduleFields } from "./AutomationScheduleFields";
 import { AutomationEventFields } from "./AutomationEventFields";
-import { AutomationOutcomeFields } from "./AutomationOutcomeFields";
+import {
+  AutomationOutcomeFields,
+  AutomationOutcomeList,
+} from "./AutomationOutcomeFields";
 import {
   automationDraftChanges,
   createAutomationDraft,
@@ -110,6 +113,14 @@ export function AutomationEditor(props: {
       .flatMap(([, messages]) => messages)
       .join(" ") || undefined;
   const triggerField = original.kind === "scheduled" ? "schedule" : "trigger";
+  const owned = original.ownedByViewer;
+  const creator = props.summary.createdBy;
+  // Core switches a non-creator's execution change to system credentials.
+  const dropsCreatorCredentials =
+    !owned &&
+    original.credentialMode === "creator" &&
+    (changes.instruction !== undefined ||
+      (original.kind === "event" && changes.trigger !== undefined));
   const triggerError = fieldError(triggerField);
   const inputState = (key: string) => ({
     "aria-invalid": Boolean(fieldError(key)) || undefined,
@@ -223,6 +234,13 @@ export function AutomationEditor(props: {
           </FormNotice>
         </div>
       ) : null}
+      {owned ? null : (
+        <p className="mt-0 mb-6 max-w-2xl text-sm leading-relaxed text-dashboard-text-muted">
+          {creator} created this automation. You can edit it because it is in a
+          public channel. Only {creator} can change where results go or turn on
+          their connected accounts. Version history keeps every saved change.
+        </p>
+      )}
       <fieldset disabled={save.isPending} className="min-w-0">
         <AutomationFormSection
           title="What to do"
@@ -300,12 +318,24 @@ export function AutomationEditor(props: {
               {fieldError("outcomes")}
             </p>
           ) : null}
-          <AutomationOutcomeFields
-            value={draft.outcomes}
-            original={original.outcomes}
-            destination={props.summary.destination}
-            onChange={(outcomes) => change({ outcomes })}
-          />
+          {owned ? (
+            <AutomationOutcomeFields
+              value={draft.outcomes}
+              original={original.outcomes}
+              destination={props.summary.destination}
+              onChange={(outcomes) => change({ outcomes })}
+            />
+          ) : (
+            <>
+              <AutomationOutcomeList
+                outcomes={original.outcomes}
+                destination={props.summary.destination}
+              />
+              <p className="m-0 text-xs text-dashboard-text-muted">
+                Only {creator} can change where results go.
+              </p>
+            </>
+          )}
         </AutomationFormSection>
         <AutomationFormSection
           title="Credentials"
@@ -317,25 +347,41 @@ export function AutomationEditor(props: {
               [
                 [
                   "creator",
-                  "Your connected accounts",
-                  "Uses accounts connected by you, the creator.",
+                  owned
+                    ? "Your connected accounts"
+                    : `${creator}’s connected accounts`,
+                  owned
+                    ? "Uses accounts connected by you, the creator."
+                    : `Uses accounts connected by ${creator}. Only ${creator} can turn this on.`,
                 ],
                 [
                   "system",
                   "System credentials only",
-                  "Does not use your connected accounts. Some work may not be possible.",
+                  owned
+                    ? "Does not use your connected accounts. Some work may not be possible."
+                    : "Does not use anyone’s connected accounts. Some work may not be possible.",
                 ],
               ] as const
             ).map(([value, label, detail]) => (
               <label
                 key={value}
-                className="flex cursor-pointer items-start gap-3 px-4 py-4 has-checked:bg-dashboard-fill-soft"
+                className="flex cursor-pointer items-start gap-3 px-4 py-4 has-checked:bg-dashboard-fill-soft has-disabled:cursor-not-allowed has-disabled:opacity-60"
               >
                 <input
                   type="radio"
                   name="credentials"
                   className="mt-0.5 size-4 shrink-0 accent-dashboard-focus"
-                  checked={draft.credentialMode === value}
+                  checked={
+                    dropsCreatorCredentials
+                      ? value === "system"
+                      : draft.credentialMode === value
+                  }
+                  disabled={
+                    value === "creator" &&
+                    !owned &&
+                    (original.credentialMode !== "creator" ||
+                      dropsCreatorCredentials)
+                  }
                   onChange={() => change({ credentialMode: value })}
                 />
                 <span>
@@ -347,6 +393,13 @@ export function AutomationEditor(props: {
               </label>
             ))}
           </fieldset>
+          {dropsCreatorCredentials ? (
+            <FormNotice title="Saving switches this automation to system credentials.">
+              Only {creator} can let a changed instruction
+              {original.kind === "event" ? " or trigger" : ""} use their
+              connected accounts.
+            </FormNotice>
+          ) : null}
           {fieldError("credentialMode") ? (
             <p role="alert">{fieldError("credentialMode")}</p>
           ) : null}

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

@@ -9,7 +9,7 @@ import { StatusChip } from "../../components/StatusChip";
 import { FormNotice } from "../../components/FormNotice";
 import { DashboardApiError, fetchDashboardJson, post } from "../../http";
 
-/** Explain lifecycle separately from the last execution and offer creator-only actions. */
+/** Explain lifecycle separately from the last execution. Pause and resume are creator-only. */
 export function AutomationLifecycle({
   automation,
   editPath,
@@ -23,7 +23,9 @@ export function AutomationLifecycle({
   const blocked = automation.status === "blocked";
   const unavailable =
     automation.kind === "event" && !automation.triggerAvailable;
-  const canEdit = automation.ownedByViewer && !completed;
+  // Public readers can edit settings, but only the creator controls lifecycle.
+  const canEdit = !completed;
+  const canPause = automation.ownedByViewer && !completed;
   const blockReason =
     automation.kind === "scheduled" ? automation.statusReason : undefined;
   const action = paused || blocked ? "resume" : "pause";
@@ -78,7 +80,7 @@ export function AutomationLifecycle({
           <ButtonLink className="min-h-11" to={editPath}>
             {canEdit ? "Edit automation" : "View settings"}
           </ButtonLink>
-          {canEdit ? (
+          {canPause ? (
             <Button
               className="min-h-11"
               disabled={mutation.isPending}
@@ -119,7 +121,7 @@ export function AutomationLifecycle({
           </Link>
         </p>
       ) : null}
-      {canEdit ? (
+      {canPause ? (
         <details className="text-dashboard-text-muted">
           <summary className="w-fit cursor-pointer py-2 text-xs hover:text-dashboard-text focus-visible:outline focus-visible:outline-dashboard-focus">
             About pausing

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

@@ -9,6 +9,24 @@ import { cn } from "../../styles";
 import type { AutomationDraft } from "./automationDraft";
 import { automationOutcomeLabel } from "./automationOutcomes";
 
+/** Show saved outcomes in order for a reader who cannot change them. */
+export function AutomationOutcomeList(props: {
+  outcomes: AutomationEdit["outcomes"];
+  destination: AutomationSummary["destination"];
+}) {
+  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">
+      {props.outcomes.map((outcome, index) => (
+        <li key={index}>
+          {automationOutcomeLabel(outcome, props.destination)}
+        </li>
+      ))}
+    </ol>
+  );
+}
+
 /** Keep outcome order and offer only supported message Destinations. */
 export function AutomationOutcomeFields(props: {
   value: AutomationDraft["outcomes"];

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