@sentry/junior-dashboard 0.234.0 → 0.236.0

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],
@@ -52,9 +52,8 @@ export function AutomationEditPage(props: { enabled: boolean }) {
         ? "warning"
         : "neutral";
   return (
-    <>
-      <AutomationsNavigation />
-      <div className="mx-auto w-full min-w-0 max-w-5xl px-5 pt-7 sm:px-8 sm:pt-9">
+    <AutomationsNavigation>
+      <div className="mx-auto w-full min-w-0 max-w-5xl px-4 pt-7 sm:px-8 sm:pt-9">
         <Link
           to={returnPath}
           className="inline-flex min-h-8 items-center gap-2 text-sm text-dashboard-text-muted no-underline hover:text-dashboard-text"
@@ -75,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) ||
@@ -107,7 +114,7 @@ export function AutomationEditPage(props: { enabled: boolean }) {
           <AutomationReadOnly automation={value} />
         )}
       </div>
-    </>
+    </AutomationsNavigation>
   );
 }
 
@@ -115,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">
@@ -145,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}
@@ -355,7 +408,7 @@ export function AutomationEditor(props: {
       <p className="mb-5 text-xs leading-relaxed text-dashboard-text-muted sm:hidden">
         Changes apply to future work. Saving does not run this automation.
       </p>
-      <div className="sticky bottom-0 z-20 -mx-5 border-t border-dashboard-border-emphasis bg-dashboard-bg px-5 py-4 sm:-mx-8 sm:px-8">
+      <div className="sticky bottom-0 z-20 -mx-4 border-t border-dashboard-border-emphasis bg-dashboard-bg px-4 py-4 sm:-mx-8 sm:px-8">
         <div className="flex items-center justify-between gap-3">
           <div className="min-w-0 flex-1" role="status">
             <p className="m-0 text-xs font-medium sm:text-sm">

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

@@ -6,6 +6,7 @@ import type {
   AutomationListQuery,
 } from "@sentry/junior/api/schema";
 import { Button, ToggleButton } from "../../components/Button";
+import { DirectorySortSelect } from "../../components/controls/DirectorySortSelect";
 import { FilterGroup } from "../../components/FilterBar";
 import { SearchInput } from "../../components/SearchInput";
 
@@ -25,7 +26,6 @@ export function AutomationFilters(props: {
     Boolean(filters.creator),
     Boolean(filters.destination),
     filters.state !== "all",
-    filters.sort !== "newest",
   ].filter(Boolean).length;
   return (
     <div className="grid gap-3">
@@ -76,12 +76,12 @@ export function AutomationFilters(props: {
       <div
         id={controlsId}
         className={cn(
-          "grid-cols-2 items-end gap-3 lg:grid-cols-4 xl:grid-cols-[auto_repeat(4,minmax(0,1fr))]",
+          "grid-cols-2 items-end gap-3 lg:grid-cols-3 xl:grid-cols-[auto_repeat(3,minmax(0,1fr))]",
           expanded ? "grid" : "hidden",
         )}
       >
         <FilterGroup
-          className="col-span-2 lg:col-span-4 xl:col-span-1"
+          className="col-span-2 lg:col-span-3 xl:col-span-1"
           label="Type"
         >
           {(["all", "scheduled", "event"] as const).map((value) => (
@@ -123,22 +123,30 @@ export function AutomationFilters(props: {
           ]}
           onChange={(value) => onChange("state", value)}
         />
-        <AutomationFilterSelect
-          label="Sort"
-          ariaLabel="Sort automations"
-          value={filters.sort}
-          onChange={(value) => onChange("sort", value)}
-          options={[
-            { value: "newest", label: "Newest first" },
-            { value: "oldest", label: "Oldest first" },
-            { value: "title", label: "Title" },
-          ]}
-        />
       </div>
     </div>
   );
 }
 
+/** Keep list order visible beside the result count instead of inside Filters. */
+export function AutomationSort(props: {
+  value: AutomationListQuery["sort"];
+  onChange(value: string): void;
+}) {
+  return (
+    <DirectorySortSelect
+      ariaLabel="Sort automations"
+      onChange={props.onChange}
+      options={[
+        { value: "newest", label: "Recently created" },
+        { value: "oldest", label: "Oldest created" },
+        { value: "title", label: "Title A–Z" },
+      ]}
+      value={props.value}
+    />
+  );
+}
+
 function AutomationFilterSelect(props: {
   label: string;
   ariaLabel?: string;

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"];