@sentry/junior-dashboard 0.264.0 → 0.266.0

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

@@ -8,10 +8,13 @@ import {
   type AutomationEdit,
   type AutomationSummary,
 } from "@sentry/junior/api/schema";
-import { Field } from "../../components/Field";
-import { TextArea, TextInput } from "../../components/TextInput";
-import { Button } from "../../components/Button";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Textarea } from "../../components/ui/textarea";
+import { Field, FieldError, FieldLabel } from "../../components/ui/field";
+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 { AutomationFormSection } from "./AutomationFormSection";
 import { AutomationScheduleFields } from "./AutomationScheduleFields";
@@ -33,6 +36,7 @@ export function AutomationEditor(props: {
   summary: AutomationSummary;
   returnPath: string;
 }) {
+  const toast = useToastManager();
   const [original, setOriginal] = useState(props.automation);
   const [draft, setDraft] = useState(() =>
     createAutomationDraft(props.automation),
@@ -80,7 +84,12 @@ export function AutomationEditor(props: {
       await queryClient.invalidateQueries({
         queryKey: ["dashboard", "automations"],
       });
-      navigate(props.returnPath, { state: { automationSaved: true } });
+      toast.add({
+        title: "Automation saved",
+        description: "Changes apply to future work.",
+        type: "success",
+      });
+      navigate(props.returnPath);
     },
     onError: (error) => {
       setFields(error instanceof DashboardApiError ? (error.fields ?? {}) : {});
@@ -246,8 +255,9 @@ export function AutomationEditor(props: {
           title="What to do"
           detail="Give Junior a clear instruction and a name you can find later."
         >
-          <Field label="Title" htmlFor="title" error={fieldError("title")}>
-            <TextInput
+          <Field>
+            <FieldLabel htmlFor="title">Title</FieldLabel>
+            <Input
               size="comfortable"
               id="title"
               value={draft.title}
@@ -255,24 +265,24 @@ export function AutomationEditor(props: {
               onChange={(e) => change({ title: e.target.value })}
               {...inputState("title")}
             />
+            <FieldError id="title-error">{fieldError("title")}</FieldError>
           </Field>
-          <Field
-            label="Instruction"
-            htmlFor="instruction"
-            error={fieldError("instruction")}
-          >
-            <TextArea
-              prose
+          <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 sm:text-sm"
+              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
@@ -304,6 +314,7 @@ export function AutomationEditor(props: {
               <AutomationEventFields
                 value={draft.trigger ?? original.trigger}
                 original={original.trigger}
+                disabled={save.isPending}
                 onChange={(trigger) => change({ trigger })}
               />
             )}
@@ -323,6 +334,7 @@ export function AutomationEditor(props: {
               value={draft.outcomes}
               original={original.outcomes}
               destination={props.summary.destination}
+              disabled={save.isPending}
               onChange={(outcomes) => change({ outcomes })}
             />
           ) : (
@@ -341,8 +353,15 @@ export function AutomationEditor(props: {
           title="Credentials"
           detail="Choose which connected accounts Junior can use."
         >
-          <fieldset className="divide-y divide-dashboard-border-subtle rounded-md border border-dashboard-border-emphasis">
-            <legend className="sr-only">Credential mode</legend>
+          <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}
+          >
             {(
               [
                 [
@@ -365,24 +384,17 @@ export function AutomationEditor(props: {
             ).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 has-disabled:cursor-not-allowed has-disabled:opacity-60"
+                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"
               >
-                <input
-                  type="radio"
-                  name="credentials"
-                  className="mt-0.5 size-4 shrink-0 accent-dashboard-focus"
-                  checked={
-                    dropsCreatorCredentials
-                      ? value === "system"
-                      : draft.credentialMode === value
-                  }
+                <RadioGroupItem
+                  className="mt-0.5"
+                  value={value}
                   disabled={
                     value === "creator" &&
                     !owned &&
                     (original.credentialMode !== "creator" ||
                       dropsCreatorCredentials)
                   }
-                  onChange={() => change({ credentialMode: value })}
                 />
                 <span>
                   <span className="block text-sm font-medium">{label}</span>
@@ -392,7 +404,7 @@ export function AutomationEditor(props: {
                 </span>
               </label>
             ))}
-          </fieldset>
+          </RadioGroup>
           {dropsCreatorCredentials ? (
             <FormNotice title="Saving switches this automation to system credentials.">
               Only {creator} can let a changed instruction
@@ -431,7 +443,7 @@ export function AutomationEditor(props: {
             </Link>
             <Button
               type="submit"
-              tone="primary"
+              variant="primary"
               className="min-h-11 sm:min-h-9"
               disabled={!dirty || save.isPending || conflict}
             >

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

@@ -1,4 +1,4 @@
-import { Skeleton } from "../../components/Skeleton";
+import { Skeleton } from "../../components/ui/skeleton";
 import { AutomationFormSection } from "./AutomationFormSection";
 
 /** Keep the editor's field columns stable while exact values load. */

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

@@ -1,13 +1,37 @@
+import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
+import {
+  describeEventTrigger,
+  eventMatchFilterText,
+  eventTriggerProblems,
+  eventTypeText,
+  eventsWithoutMatchField,
+} from "@sentry/junior-plugin-api";
 import {
   automationEventCatalogSchema,
   type AutomationEdit,
 } from "@sentry/junior/api/schema";
-import { Field } from "../../components/Field";
-import { Select } from "../../components/Select";
-import { TextInput } from "../../components/TextInput";
-import { Button } from "../../components/Button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+} from "../../components/ui/alert-dialog";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "../../components/ui/field";
+import { NativeSelect } from "../../components/ui/native-select";
 import { FormNotice } from "../../components/FormNotice";
+import { TriggerFilters } from "./TriggerFilters";
+import { Checkbox } from "../../components/ui/checkbox";
 import { fetchDashboardJson } from "../../http";
 
 type Trigger = Extract<AutomationEdit, { kind: "event" }>["trigger"];
@@ -16,8 +40,11 @@ type Trigger = Extract<AutomationEdit, { kind: "event" }>["trigger"];
 export function AutomationEventFields(props: {
   value: Trigger;
   original: Trigger;
+  /** Base UI checkboxes do not inherit a native fieldset's disabled state. */
+  disabled?: boolean;
   onChange(value: Trigger): void;
 }) {
+  const [replacement, setReplacement] = useState<Trigger>();
   const catalog = useQuery({
     queryKey: ["dashboard", "automation-event-catalog"],
     queryFn: ({ signal }) =>
@@ -28,25 +55,25 @@ export function AutomationEventFields(props: {
       ),
     retry: false,
   });
-  const resource = catalog.data?.find(
-    (item) =>
-      item.namespace === props.value.namespace &&
-      item.type === props.value.resourceType,
+  const sourceResourceTypes =
+    catalog.data?.filter((item) => item.namespace === props.value.namespace) ??
+    [];
+  const resource = sourceResourceTypes.find(
+    (item) => item.type === props.value.resourceType,
   );
+  const problems = catalog.data
+    ? eventTriggerProblems(sourceResourceTypes, 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.
   const unsupported =
-    !resource ||
-    props.value.events.some(
-      (event) => !resource.supportedEvents.includes(event),
-    ) ||
-    Object.entries(props.value.match ?? {}).some(([key, value]) => {
-      const field = resource.matchFields?.[key];
-      if (!field) return true;
-      return (Array.isArray(value) ? value : [value]).some(
-        (item) =>
-          typeof item !== field.kind ||
-          (field.enum && !field.enum.includes(String(item))),
-      );
-    });
+    !resource || problems.some((problem) => problem.reason !== "field_not_set");
+  const matchFields = Object.entries(resource?.matchFields ?? {});
+  const shownMatchFields = matchFields.filter(
+    ([key, field]) =>
+      props.value.match?.[key] !== undefined ||
+      eventsWithoutMatchField(field, props.value.events).length === 0,
+  );
   const setMatch = (
     key: string,
     value: NonNullable<Trigger["match"]>[string] | undefined,
@@ -70,16 +97,17 @@ export function AutomationEventFields(props: {
         <FormNotice title="Saved trigger · Kept unchanged">
           Some saved values are not in the current catalog. You can edit other
           fields, or select a new resource type to replace the trigger.
-          <pre className="whitespace-pre-wrap break-all text-xs">
-            {JSON.stringify(props.value, null, 2)}
-          </pre>
+          <SavedTrigger
+            resourceTypes={sourceResourceTypes}
+            trigger={props.value}
+          />
         </FormNotice>
       ) : null}
-      <Field
-        label={unsupported ? "Replace trigger" : "Resource type"}
-        htmlFor="trigger-resource"
-      >
-        <Select
+      <Field>
+        <FieldLabel htmlFor="trigger-resource">
+          {unsupported ? "Replace trigger" : "Resource type"}
+        </FieldLabel>
+        <NativeSelect
           id="trigger-resource"
           value={
             unsupported
@@ -91,13 +119,7 @@ export function AutomationEventFields(props: {
               (item) => `${item.namespace}:${item.type}` === e.target.value,
             );
             if (!next) return;
-            if (
-              !window.confirm(
-                "Replace the saved trigger? Its resource, events, and conditions will be cleared.",
-              )
-            )
-              return;
-            props.onChange({
+            setReplacement({
               namespace: next.namespace,
               resourceType: next.type,
               identifier: "",
@@ -117,12 +139,38 @@ export function AutomationEventFields(props: {
               {item.namespace} · {item.type.replaceAll("_", " ")}
             </option>
           ))}
-        </Select>
+        </NativeSelect>
       </Field>
+      <AlertDialog
+        onOpenChange={(open) => {
+          if (!open) setReplacement(undefined);
+        }}
+        open={replacement !== undefined}
+      >
+        <AlertDialogContent>
+          <AlertDialogTitle>Replace the saved trigger?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Its resource, events, and filters will be cleared.
+          </AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (replacement) props.onChange(replacement);
+                setReplacement(undefined);
+              }}
+              variant="primary"
+            >
+              Replace trigger
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
       {!unsupported && resource ? (
         <>
-          <Field label="Resource name" htmlFor="trigger-label">
-            <TextInput
+          <Field>
+            <FieldLabel htmlFor="trigger-label">Resource name</FieldLabel>
+            <Input
               size="comfortable"
               id="trigger-label"
               value={props.value.label}
@@ -131,12 +179,11 @@ export function AutomationEventFields(props: {
               }
             />
           </Field>
-          <Field
-            label="Resource identifier"
-            htmlFor="trigger-identifier"
-            help="Use the exact provider resource identifier, not its display name."
-          >
-            <TextInput
+          <Field>
+            <FieldLabel htmlFor="trigger-identifier">
+              Resource identifier
+            </FieldLabel>
+            <Input
               size="comfortable"
               id="trigger-identifier"
               value={props.value.identifier}
@@ -144,6 +191,9 @@ export function AutomationEventFields(props: {
                 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">
@@ -155,11 +205,11 @@ export function AutomationEventFields(props: {
                   key={event}
                   className="flex min-h-11 cursor-pointer items-start gap-3 px-3 py-3 text-sm"
                 >
-                  <input
-                    type="checkbox"
-                    className="mt-0.5 size-4 shrink-0 accent-dashboard-focus"
+                  <Checkbox
+                    className="mt-0.5"
                     checked={props.value.events.includes(event)}
-                    onChange={() =>
+                    disabled={props.disabled}
+                    onCheckedChange={() =>
                       props.onChange({
                         ...props.value,
                         events: props.value.events.includes(event)
@@ -169,84 +219,89 @@ export function AutomationEventFields(props: {
                     }
                   />
                   <span className="min-w-0 break-words">
-                    {event.replaceAll("_", " ").replaceAll(".", " · ")}
-                    {resource.guidance?.[event] ? (
-                      <span className="mt-1 block text-xs leading-relaxed text-dashboard-text-muted">
-                        {resource.guidance[event]}
-                      </span>
-                    ) : null}
+                    {eventTypeText(event)}
                   </span>
                 </label>
               ))}
             </div>
           </fieldset>
-          {Object.keys(resource.matchFields ?? {}).length ? (
+          {matchFields.length ? (
             <fieldset className="grid gap-4">
-              <legend className="mb-3 text-sm font-semibold">Only when</legend>
+              <legend className="mb-3 text-sm font-semibold">Filters</legend>
               <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
-                All conditions must match. Leave a field blank to match any
-                value. Existing lists match any one listed value.
+                Every filter must match. Leave a filter blank to match any
+                value.
+                {shownMatchFields.length < matchFields.length
+                  ? " Filters that a selected event does not set are hidden."
+                  : null}
               </p>
-              {Object.entries(resource.matchFields ?? {}).map(
-                ([key, field]) => {
-                  const value = props.value.match?.[key];
-                  return (
-                    <Field
-                      key={key}
-                      label={key}
-                      htmlFor={`match-${key}`}
-                      help={field.description}
-                    >
-                      {Array.isArray(value) ? (
-                        <div className="text-sm">
-                          <span className="break-all">{value.join(", ")}</span>{" "}
-                          <Button onClick={() => setMatch(key, undefined)}>
-                            Remove condition
-                          </Button>
-                        </div>
-                      ) : field.kind === "boolean" || field.enum ? (
-                        <Select
-                          id={`match-${key}`}
-                          value={value === undefined ? "" : String(value)}
-                          onChange={(e) =>
-                            setMatch(
-                              key,
-                              e.target.value === ""
-                                ? undefined
-                                : field.kind === "boolean"
-                                  ? e.target.value === "true"
-                                  : e.target.value,
-                            )
-                          }
-                        >
-                          <option value="">Any value</option>
-                          {(field.enum ?? ["true", "false"]).map((v) => (
-                            <option key={v}>{v}</option>
-                          ))}
-                        </Select>
-                      ) : (
-                        <TextInput
-                          size="comfortable"
-                          id={`match-${key}`}
-                          type={field.kind === "number" ? "number" : "text"}
-                          step="any"
-                          value={value === undefined ? "" : String(value)}
-                          onChange={(e) =>
-                            setMatch(
-                              key,
-                              e.target.value === ""
-                                ? undefined
-                                : field.kind === "number"
-                                  ? e.target.valueAsNumber
-                                  : e.target.value,
-                            )
-                          }
-                        />
-                      )}
-                    </Field>
-                  );
-                },
-              )}
+              {shownMatchFields.map(([key, field]) => {
+                const value = props.value.match?.[key];
+                const problem = problems.find(
+                  (candidate) => candidate.field === key,
+                );
+                return (
+                  <Field key={key}>
+                    <FieldLabel htmlFor={`match-${key}`}>{key}</FieldLabel>
+                    {Array.isArray(value) ? (
+                      <div className="text-sm">
+                        <span className="break-all">
+                          {eventMatchFilterText(key, field, value)}
+                        </span>{" "}
+                        <Button onClick={() => setMatch(key, undefined)}>
+                          Remove filter
+                        </Button>
+                      </div>
+                    ) : field.kind === "boolean" || field.enum ? (
+                      <NativeSelect
+                        id={`match-${key}`}
+                        value={value === undefined ? "" : String(value)}
+                        onChange={(e) =>
+                          setMatch(
+                            key,
+                            e.target.value === ""
+                              ? undefined
+                              : field.kind === "boolean"
+                                ? e.target.value === "true"
+                                : e.target.value,
+                          )
+                        }
+                      >
+                        <option value="">Any value</option>
+                        {(field.enum ?? ["true", "false"]).map((v) => (
+                          <option key={v}>{v}</option>
+                        ))}
+                      </NativeSelect>
+                    ) : (
+                      <Input
+                        size="comfortable"
+                        id={`match-${key}`}
+                        type={field.kind === "number" ? "number" : "text"}
+                        step="any"
+                        value={value === undefined ? "" : String(value)}
+                        onChange={(e) =>
+                          setMatch(
+                            key,
+                            e.target.value === ""
+                              ? undefined
+                              : field.kind === "number"
+                                ? e.target.valueAsNumber
+                                : e.target.value,
+                          )
+                        }
+                      />
+                    )}
+                    {field.description ? (
+                      <FieldDescription id={`match-${key}-help`}>
+                        {field.description}
+                      </FieldDescription>
+                    ) : null}
+                    {problem ? (
+                      <FieldError>{problem.message}</FieldError>
+                    ) : null}
+                  </Field>
+                );
+              })}
             </fieldset>
           ) : null}
         </>
@@ -262,3 +317,31 @@ 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];
+  trigger: Trigger;
+}) {
+  const description = describeEventTrigger(props.resourceTypes, props.trigger);
+  return (
+    <>
+      <ul className="my-2 list-disc pl-5">
+        {description.problems.map((problem) => (
+          <li key={problem}>{problem}</li>
+        ))}
+      </ul>
+      <div className="text-xs">
+        <p className="m-0 break-words">
+          {props.trigger.namespace} ·{" "}
+          {props.trigger.resourceType.replaceAll("_", " ")} ·{" "}
+          {props.trigger.identifier}
+        </p>
+        <p className="m-0 mt-1 break-words text-dashboard-text-muted">
+          {description.events.join(", ")}
+        </p>
+        <TriggerFilters filters={description.filters} />
+      </div>
+    </>
+  );
+}