@sentry/junior-dashboard 0.265.0 → 0.267.0

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

@@ -16,6 +16,7 @@ import { useToastManager } from "../../components/ui/toast";
 import { FormNotice } from "../../components/FormNotice";
 import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
 import { DashboardApiError, fetchDashboardJson, patch } from "../../http";
+import { AutomationDraftChanges } from "./AutomationDraftChanges";
 import { AutomationFormSection } from "./AutomationFormSection";
 import { AutomationScheduleFields } from "./AutomationScheduleFields";
 import { AutomationEventFields } from "./AutomationEventFields";
@@ -43,6 +44,8 @@ export function AutomationEditor(props: {
   );
   const [fields, setFields] = useState<Record<string, string[]>>({});
   const [latest, setLatest] = useState<AutomationEdit>();
+  // Undo remounts the fields, so fields with local state show the saved value.
+  const [undoCount, setUndoCount] = useState(0);
   const form = useRef<HTMLFormElement>(null);
   const allowLeave = useRef(false);
   const navigate = useNavigate();
@@ -116,6 +119,10 @@ export function AutomationEditor(props: {
     save.error instanceof DashboardApiError && save.error.code === "conflict";
   const change = (value: Partial<AutomationDraft>) =>
     setDraft((current) => ({ ...current, ...value }));
+  const undo = (key: keyof AutomationDraft) => {
+    change({ [key]: createAutomationDraft(original)[key] });
+    setUndoCount((count) => count + 1);
+  };
   const fieldError = (key: string) =>
     Object.entries(fields)
       .filter(([name]) => name === key || name.startsWith(`${key}.`))
@@ -250,173 +257,192 @@ export function AutomationEditor(props: {
           their connected accounts. Version history keeps every saved change.
         </p>
       )}
-      <fieldset disabled={save.isPending} className="min-w-0">
-        <AutomationFormSection
-          title="What to do"
-          detail="Give Junior a clear instruction and a name you can find later."
-        >
-          <Field>
-            <FieldLabel htmlFor="title">Title</FieldLabel>
-            <Input
-              size="comfortable"
-              id="title"
-              value={draft.title}
-              placeholder={props.summary.title}
-              onChange={(e) => change({ title: e.target.value })}
-              {...inputState("title")}
-            />
-            <FieldError id="title-error">{fieldError("title")}</FieldError>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="instruction">Instruction</FieldLabel>
-            <Textarea
-              id="instruction"
-              rows={8}
-              value={draft.instruction}
-              onChange={(e) => change({ instruction: e.target.value })}
-              {...inputState("instruction")}
-              className="resize-y text-base leading-relaxed sm:text-sm"
-            />
-            <p className="m-0 text-right text-xs text-dashboard-text-muted">
-              {draft.instruction.length.toLocaleString()} / 4,000
-            </p>
-            <FieldError id="instruction-error">
-              {fieldError("instruction")}
-            </FieldError>
-          </Field>
-        </AutomationFormSection>
-        <AutomationFormSection
-          title="When to run"
-          detail={
-            original.kind === "scheduled"
-              ? "Choose a schedule in a specific timezone."
-              : "Run when a matching event occurs."
-          }
+      <div className="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_18rem] lg:gap-10">
+        <fieldset
+          key={undoCount}
+          disabled={save.isPending}
+          className="min-w-0 [&>section:first-of-type]:border-t-0 [&>section:first-of-type]:pt-0"
         >
-          <div
-            id={`${triggerField}-error`}
-            tabIndex={-1}
-            aria-invalid={Boolean(triggerError) || undefined}
-            className="grid min-w-0 gap-5 outline-none"
+          <AutomationFormSection
+            changed={
+              changes.title !== undefined || changes.instruction !== undefined
+            }
+            title="What to do"
+            detail="Give Junior a clear instruction and a name you can find later."
+          >
+            <Field>
+              <FieldLabel htmlFor="title">Title</FieldLabel>
+              <Input
+                size="comfortable"
+                id="title"
+                value={draft.title}
+                placeholder={props.summary.title}
+                onChange={(e) => change({ title: e.target.value })}
+                {...inputState("title")}
+              />
+              <FieldError id="title-error">{fieldError("title")}</FieldError>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="instruction">Instruction</FieldLabel>
+              <Textarea
+                id="instruction"
+                rows={8}
+                value={draft.instruction}
+                onChange={(e) => change({ instruction: e.target.value })}
+                {...inputState("instruction")}
+                className="resize-y text-base leading-relaxed sm:text-sm"
+              />
+              <p className="m-0 text-right text-xs text-dashboard-text-muted">
+                {draft.instruction.length.toLocaleString()} / 4,000
+              </p>
+              <FieldError id="instruction-error">
+                {fieldError("instruction")}
+              </FieldError>
+            </Field>
+          </AutomationFormSection>
+          <AutomationFormSection
+            changed={changes[triggerField] !== undefined}
+            title="When to run"
+            detail={
+              original.kind === "scheduled"
+                ? "Choose a schedule in a specific timezone."
+                : "Run when a matching event occurs."
+            }
           >
-            {triggerError ? (
+            <div
+              id={`${triggerField}-error`}
+              tabIndex={-1}
+              aria-invalid={Boolean(triggerError) || undefined}
+              className="grid min-w-0 gap-5 outline-none"
+            >
+              {triggerError ? (
+                <p role="alert" className="m-0 text-sm text-rose-300">
+                  {triggerError}
+                </p>
+              ) : null}
+              {original.kind === "scheduled" ? (
+                <AutomationScheduleFields
+                  automation={original}
+                  value={draft.schedule}
+                  onChange={(schedule) => change({ schedule })}
+                />
+              ) : (
+                <AutomationEventFields
+                  value={draft.trigger ?? original.trigger}
+                  original={original.trigger}
+                  disabled={save.isPending}
+                  onChange={(trigger) => change({ trigger })}
+                />
+              )}
+            </div>
+          </AutomationFormSection>
+          <AutomationFormSection
+            changed={changes.outcomes !== undefined}
+            title="Where results go"
+            detail="Choose who gets a message after successful work."
+          >
+            {fieldError("outcomes") ? (
               <p role="alert" className="m-0 text-sm text-rose-300">
-                {triggerError}
+                {fieldError("outcomes")}
               </p>
             ) : null}
-            {original.kind === "scheduled" ? (
-              <AutomationScheduleFields
-                automation={original}
-                value={draft.schedule}
-                onChange={(schedule) => change({ schedule })}
-              />
-            ) : (
-              <AutomationEventFields
-                value={draft.trigger ?? original.trigger}
-                original={original.trigger}
+            {owned ? (
+              <AutomationOutcomeFields
+                value={draft.outcomes}
+                original={original.outcomes}
+                destination={props.summary.destination}
                 disabled={save.isPending}
-                onChange={(trigger) => change({ trigger })}
+                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>
+              </>
             )}
-          </div>
-        </AutomationFormSection>
-        <AutomationFormSection
-          title="Where results go"
-          detail="Choose who gets a message after successful work."
-        >
-          {fieldError("outcomes") ? (
-            <p role="alert" className="m-0 text-sm text-rose-300">
-              {fieldError("outcomes")}
-            </p>
-          ) : null}
-          {owned ? (
-            <AutomationOutcomeFields
-              value={draft.outcomes}
-              original={original.outcomes}
-              destination={props.summary.destination}
-              disabled={save.isPending}
-              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"
-          detail="Choose which connected accounts Junior can use."
-        >
-          <RadioGroup
-            aria-label="Credential mode"
-            disabled={save.isPending}
-            className="divide-y divide-dashboard-border-subtle rounded-md border border-dashboard-border-emphasis"
-            onValueChange={(credentialMode: "creator" | "system") =>
-              change({ credentialMode })
-            }
-            value={dropsCreatorCredentials ? "system" : draft.credentialMode}
+          </AutomationFormSection>
+          <AutomationFormSection
+            changed={changes.credentialMode !== undefined}
+            title="Credentials"
+            detail="Choose which connected accounts Junior can use."
           >
-            {(
-              [
-                [
-                  "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.`,
-                ],
+            <RadioGroup
+              aria-label="Credential mode"
+              disabled={save.isPending}
+              className="divide-y divide-dashboard-border-subtle rounded-md border border-dashboard-border-emphasis"
+              onValueChange={(credentialMode: "creator" | "system") =>
+                change({ credentialMode })
+              }
+              value={dropsCreatorCredentials ? "system" : draft.credentialMode}
+            >
+              {(
                 [
-                  "system",
-                  "System credentials only",
-                  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-data-checked:bg-dashboard-fill-soft has-data-disabled:cursor-not-allowed has-data-disabled:opacity-60"
-              >
-                <RadioGroupItem
-                  className="mt-0.5"
-                  value={value}
-                  disabled={
-                    value === "creator" &&
-                    !owned &&
-                    (original.credentialMode !== "creator" ||
-                      dropsCreatorCredentials)
-                  }
-                />
-                <span>
-                  <span className="block text-sm font-medium">{label}</span>
-                  <span className="mt-1 block text-xs leading-relaxed text-dashboard-text-muted">
-                    {detail}
+                  [
+                    "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",
+                    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-data-checked:bg-dashboard-fill-soft has-data-disabled:cursor-not-allowed has-data-disabled:opacity-60"
+                >
+                  <RadioGroupItem
+                    className="mt-0.5"
+                    value={value}
+                    disabled={
+                      value === "creator" &&
+                      !owned &&
+                      (original.credentialMode !== "creator" ||
+                        dropsCreatorCredentials)
+                    }
+                  />
+                  <span>
+                    <span className="block text-sm font-medium">{label}</span>
+                    <span className="mt-1 block text-xs leading-relaxed text-dashboard-text-muted">
+                      {detail}
+                    </span>
                   </span>
-                </span>
-              </label>
-            ))}
-          </RadioGroup>
-          {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}
-        </AutomationFormSection>
-      </fieldset>
+                </label>
+              ))}
+            </RadioGroup>
+            {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}
+          </AutomationFormSection>
+        </fieldset>
+        <AutomationDraftChanges
+          changes={changes}
+          disabled={save.isPending}
+          onUndo={undo}
+          original={original}
+          summary={props.summary}
+        />
+      </div>
       <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>

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

@@ -1,11 +1,14 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import {
+  anyResourceEvents,
   describeEventTrigger,
+  eventTriggerChoices,
   eventMatchFilterText,
   eventTriggerProblems,
   eventTypeText,
   eventsWithoutMatchField,
+  type EventTriggerSource,
 } from "@sentry/junior-plugin-api";
 import {
   automationEventCatalogSchema,
@@ -36,6 +39,33 @@ import { fetchDashboardJson } from "../../http";
 
 type Trigger = Extract<AutomationEdit, { kind: "event" }>["trigger"];
 
+// Select value for a trigger with no identifier, which runs for any resource.
+const ANY_RESOURCE = "*";
+
+const NO_SOURCE: EventTriggerSource = {
+  resourceTypes: [],
+  events: {},
+  anyResourceFields: {},
+};
+
+/**
+ * Say which filter an event needs when a trigger has no identifier, with the
+ * filter descriptions, such as "needs a filter: lowercase repository".
+ */
+function reachText(
+  source: EventTriggerSource,
+  eventType: string,
+): string | undefined {
+  const reach = source.events[eventType]?.reach;
+  if (typeof reach !== "object") return undefined;
+  const filters = reach.anyOf.map(
+    (key) => source.anyResourceFields[key]?.description ?? key,
+  );
+  return filters.length === 1
+    ? `needs a filter: ${filters[0]}`
+    : `needs one of these filters: ${filters.join("; or ")}`;
+}
+
 /** Render registered Event choices without discarding unsupported saved selectors. */
 export function AutomationEventFields(props: {
   value: Trigger;
@@ -55,20 +85,29 @@ export function AutomationEventFields(props: {
       ),
     retry: false,
   });
-  const sourceResourceTypes =
-    catalog.data?.filter((item) => item.namespace === props.value.namespace) ??
-    [];
-  const resource = sourceResourceTypes.find(
-    (item) => item.type === props.value.resourceType,
+  const entry = catalog.data?.find(
+    (item) => item.namespace === props.value.namespace,
   );
+  const source: EventTriggerSource = entry ?? NO_SOURCE;
+  const displayName = entry?.displayName ?? props.value.namespace;
+  const anyResource = props.value.resourceType === undefined;
+  const choices = eventTriggerChoices(source, props.value);
   const problems = catalog.data
-    ? eventTriggerProblems(sourceResourceTypes, props.value)
+    ? eventTriggerProblems(source, props.value)
     : [];
-  // A filter that a selected event does not set is fixable here. Other
-  // problems mean the catalog changed after the trigger was saved.
+  // A filter that a selected event does not set, or a filter that an event
+  // needs, is fixable here. Other problems mean the catalog changed after the
+  // trigger was saved.
   const unsupported =
-    !resource || problems.some((problem) => problem.reason !== "field_not_set");
-  const matchFields = Object.entries(resource?.matchFields ?? {});
+    !choices ||
+    problems.some(
+      (problem) =>
+        problem.reason !== "field_not_set" &&
+        problem.reason !== "filter_required",
+    );
+  const anyResourceSources =
+    catalog.data?.filter((item) => anyResourceEvents(item).length > 0) ?? [];
+  const matchFields = Object.entries(choices?.fields ?? {});
   const shownMatchFields = matchFields.filter(
     ([key, field]) =>
       props.value.match?.[key] !== undefined ||
@@ -98,7 +137,8 @@ export function AutomationEventFields(props: {
           Some saved values are not in the current catalog. You can edit other
           fields, or select a new resource type to replace the trigger.
           <SavedTrigger
-            resourceTypes={sourceResourceTypes}
+            displayName={displayName}
+            source={source}
             trigger={props.value}
           />
         </FormNotice>
@@ -112,15 +152,20 @@ export function AutomationEventFields(props: {
           value={
             unsupported
               ? ""
-              : `${props.value.namespace}:${props.value.resourceType}`
+              : `${props.value.namespace}:${props.value.resourceType ?? ANY_RESOURCE}`
           }
           onChange={(e) => {
-            const next = catalog.data?.find(
-              (item) => `${item.namespace}:${item.type}` === e.target.value,
-            );
-            if (!next) return;
+            const [namespace, type] = e.target.value.split(":");
+            if (type === ANY_RESOURCE && namespace) {
+              setReplacement({ namespace, label: "", events: [] });
+              return;
+            }
+            const next = catalog.data
+              ?.find((item) => item.namespace === namespace)
+              ?.resourceTypes.find((item) => item.type === type);
+            if (!namespace || !next) return;
             setReplacement({
-              namespace: next.namespace,
+              namespace,
               resourceType: next.type,
               identifier: "",
               label: "",
@@ -131,14 +176,24 @@ export function AutomationEventFields(props: {
           <option value="" disabled>
             Keep saved trigger
           </option>
-          {catalog.data?.map((item) => (
+          {anyResourceSources.map((item) => (
             <option
-              key={`${item.namespace}:${item.type}`}
-              value={`${item.namespace}:${item.type}`}
+              key={`${item.namespace}:${ANY_RESOURCE}`}
+              value={`${item.namespace}:${ANY_RESOURCE}`}
             >
-              {item.namespace} · {item.type.replaceAll("_", " ")}
+              {item.displayName} · any resource
             </option>
           ))}
+          {catalog.data?.flatMap((item) =>
+            item.resourceTypes.map((resourceType) => (
+              <option
+                key={`${item.namespace}:${resourceType.type}`}
+                value={`${item.namespace}:${resourceType.type}`}
+              >
+                {item.displayName} · {resourceType.type.replaceAll("_", " ")}
+              </option>
+            )),
+          )}
         </NativeSelect>
       </Field>
       <AlertDialog
@@ -166,10 +221,12 @@ export function AutomationEventFields(props: {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-      {!unsupported && resource ? (
+      {!unsupported && choices ? (
         <>
           <Field>
-            <FieldLabel htmlFor="trigger-label">Resource name</FieldLabel>
+            <FieldLabel htmlFor="trigger-label">
+              {anyResource ? "Trigger name" : "Resource name"}
+            </FieldLabel>
             <Input
               size="comfortable"
               id="trigger-label"
@@ -179,28 +236,38 @@ export function AutomationEventFields(props: {
               }
             />
           </Field>
-          <Field>
-            <FieldLabel htmlFor="trigger-identifier">
-              Resource identifier
-            </FieldLabel>
-            <Input
-              size="comfortable"
-              id="trigger-identifier"
-              value={props.value.identifier}
-              onChange={(e) =>
-                props.onChange({ ...props.value, identifier: e.target.value })
-              }
-            />
-            <FieldDescription id="trigger-identifier-help">
-              Use the exact provider resource identifier, not its display name.
-            </FieldDescription>
-          </Field>
+          {anyResource ? (
+            <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
+              Runs for every resource that the filters match.
+            </p>
+          ) : (
+            <Field>
+              <FieldLabel htmlFor="trigger-identifier">
+                Resource identifier
+              </FieldLabel>
+              <Input
+                size="comfortable"
+                id="trigger-identifier"
+                value={props.value.identifier ?? ""}
+                onChange={(e) =>
+                  props.onChange({
+                    ...props.value,
+                    identifier: e.target.value,
+                  })
+                }
+              />
+              <FieldDescription id="trigger-identifier-help">
+                Use the exact provider resource identifier, not its display
+                name.
+              </FieldDescription>
+            </Field>
+          )}
           <fieldset>
             <legend className="mb-2 text-sm font-semibold">
               Run on these events
             </legend>
             <div className="divide-y divide-dashboard-border-subtle rounded-md border border-dashboard-border-emphasis">
-              {resource.supportedEvents.map((event) => (
+              {choices.events.map((event) => (
                 <label
                   key={event}
                   className="flex min-h-11 cursor-pointer items-start gap-3 px-3 py-3 text-sm"
@@ -220,6 +287,12 @@ export function AutomationEventFields(props: {
                   />
                   <span className="min-w-0 break-words">
                     {eventTypeText(event)}
+                    {anyResource && reachText(source, event) ? (
+                      <span className="text-dashboard-text-muted">
+                        {" "}
+                        · {reachText(source, event)}
+                      </span>
+                    ) : null}
                   </span>
                 </label>
               ))}
@@ -320,10 +393,11 @@ export function AutomationEventFields(props: {
 
 /** Show the saved trigger and its problems in the same words as the details. */
 function SavedTrigger(props: {
-  resourceTypes: Parameters<typeof describeEventTrigger>[0];
+  displayName: string;
+  source: EventTriggerSource;
   trigger: Trigger;
 }) {
-  const description = describeEventTrigger(props.resourceTypes, props.trigger);
+  const description = describeEventTrigger(props.source, props.trigger);
   return (
     <>
       <ul className="my-2 list-disc pl-5">
@@ -333,9 +407,9 @@ function SavedTrigger(props: {
       </ul>
       <div className="text-xs">
         <p className="m-0 break-words">
-          {props.trigger.namespace} ·{" "}
-          {props.trigger.resourceType.replaceAll("_", " ")} ·{" "}
-          {props.trigger.identifier}
+          {props.displayName} ·{" "}
+          {props.trigger.resourceType?.replaceAll("_", " ") ?? "any resource"}
+          {props.trigger.identifier ? ` · ${props.trigger.identifier}` : null}
         </p>
         <p className="m-0 mt-1 break-words text-dashboard-text-muted">
           {description.events.join(", ")}

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

@@ -42,7 +42,7 @@ export function AutomationExecutionStatusChart(props: {
     <Card className="min-h-[15rem] p-4 sm:p-5">
       <div>
         <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
-          Executions over time
+          Runs over time
         </h2>
         <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {bucketUnit === "hour"