@sentry/junior-dashboard 0.263.0 → 0.265.0

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

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

@@ -4,21 +4,23 @@ import {
   type TimeRangeDays,
 } from "../../components/controls/TimeRangeSelector";
 import type { AutomationExecutionDay } from "@sentry/junior/api/schema";
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 
 import { Card } from "../../components/layout/Card";
 import { formatActivityChartAverage } from "../../format";
 
-const EXECUTION_COLOR = "var(--color-amber-400)";
+const chartConfig = {
+  total: { color: "var(--color-amber-400)", label: "Executions" },
+};
 
 /** Render completed automation executions over a trailing window. */
 export function AutomationExecutionChart(props: {
@@ -29,12 +31,11 @@ export function AutomationExecutionChart(props: {
 }) {
   const bucketUnit = props.bucketUnit ?? "day";
 
-  const days = props.days;
-  const layout = createActivityChartLayout(200);
-  const step =
-    days.length > 0 ? layout.plotWidth / days.length : layout.plotWidth;
-  const barWidth = Math.max(2, Math.min(13, step * 0.68));
-  const totals = days.map((day) => day.scheduled + day.event);
+  const days = props.days.map((day) => ({
+    date: day.date,
+    total: day.scheduled + day.event,
+  }));
+  const totals = days.map((day) => day.total);
   const maximum = Math.max(1, ...totals);
   const average = activityChartAverage(totals);
   const hasExecutions = totals.some((total) => total > 0);
@@ -51,58 +52,44 @@ export function AutomationExecutionChart(props: {
       </div>
 
       <div className="relative mt-5 overflow-hidden">
-        <ChartSvg
-          aria-label={`Automation executions during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
-          className="min-h-40"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-50 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid layout={layout} maximum={maximum} />
-          {days.map((day, dayIndex) => {
-            const x = layout.left + dayIndex * step + (step - barWidth) / 2;
-            const total = totals[dayIndex] ?? 0;
-            const height = (total / maximum) * layout.plotHeight;
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={<ActivityTooltipRows rows={[["executions", total]]} />}
-                date={day.date}
-                summary={`${total} executions`}
-              >
-                <g tabIndex={0}>
-                  <rect
-                    fill={EXECUTION_COLOR}
-                    height={height}
-                    opacity={0.82}
-                    rx="1"
-                    width={barWidth}
-                    x={x}
-                    y={layout.top + layout.plotHeight - height}
-                  />
-                  <rect
-                    fill="transparent"
-                    height={layout.plotHeight}
-                    width={Math.max(barWidth, 8)}
-                    x={x - (Math.max(barWidth, 8) - barWidth) / 2}
-                    y={layout.top}
-                  />
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            unit={timeRangeBucketAverageUnit(bucketUnit)}
-            average={average}
-            format={formatActivityChartAverage}
-            layout={layout}
-            maximum={maximum}
-            stroke="var(--color-slate-200)"
-          />
-          <ActivityChartDateLabels
-            dates={days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Automation executions during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
+            data={days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis maximum={maximum} />
+            <ActivityChartXAxis keys={days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: (typeof days)[number]) => [
+                    ["executions", day.total],
+                  ]}
+                />
+              }
+            />
+            <Bar
+              dataKey="total"
+              fill="var(--color-total)"
+              fillOpacity={0.82}
+              isAnimationActive={false}
+              maxBarSize={13}
+              radius={1}
+            />
+            <ActivityChartAverageLine
+              unit={timeRangeBucketAverageUnit(bucketUnit)}
+              average={average}
+              format={formatActivityChartAverage}
+              stroke="var(--color-slate-200)"
+            />
+          </BarChart>
+        </ChartContainer>
         {!hasExecutions ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No automation executions in this period.