@sentry/junior-dashboard 0.264.0 → 0.266.0

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

@@ -1,17 +1,43 @@
-import { useId, useState } from "react";
-import { SlidersHorizontal } from "lucide-react";
-import { cn } from "../../styles";
+import { useState, useSyncExternalStore } from "react";
+import { SlidersHorizontal, X } from "lucide-react";
 import type {
   AutomationList,
   AutomationListQuery,
 } from "@sentry/junior/api/schema";
-import { Button, ToggleButton } from "../../components/Button";
+import { BottomSheet } from "../../components/BottomSheet";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTitle,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { Button } from "../../components/ui/button";
 import { DirectorySortSelect } from "../../components/controls/DirectorySortSelect";
 import { FilterGroup } from "../../components/FilterBar";
 import { SearchInput } from "../../components/SearchInput";
-import { Select } from "../../components/Select";
+import { NativeSelect } from "../../components/ui/native-select";
+import { ToggleGroup, ToggleGroupItem } from "../../components/ui/toggle-group";
 
-/** Keep collection controls visible while a filtered page loads. */
+const filterMediaQuery = "(min-width: 768px)";
+const stateOptions = [
+  { value: "active", label: "Active" },
+  { value: "blocked", label: "Blocked" },
+  { value: "paused", label: "Paused" },
+  { value: "unavailable", label: "Trigger unavailable" },
+  { value: "completed", label: "Completed" },
+];
+
+function subscribeToFilterLayout(onChange: () => void) {
+  const media = window.matchMedia(filterMediaQuery);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function filtersFitPopover() {
+  return window.matchMedia(filterMediaQuery).matches;
+}
+
+/** Keep URL filters visible while editing them in a popover or mobile sheet. */
 export function AutomationFilters(props: {
   filters: AutomationListQuery;
   data: AutomationList | undefined;
@@ -21,17 +47,68 @@ export function AutomationFilters(props: {
 }) {
   const { filters, data, onChange } = props;
   const [expanded, setExpanded] = useState(false);
-  const controlsId = useId();
-  const activeCount = [
-    filters.type !== "all",
-    Boolean(filters.creator),
-    Boolean(filters.destination),
-    filters.state !== "all",
-  ].filter(Boolean).length;
+  const desktop = useSyncExternalStore(
+    subscribeToFilterLayout,
+    filtersFitPopover,
+    () => false,
+  );
+  const activeFilters = [
+    {
+      key: "type",
+      label: "Type",
+      value: filters.type === "all" ? "" : filters.type,
+      text: filters.type === "scheduled" ? "Scheduled" : "Event",
+    },
+    {
+      key: "creator",
+      label: "Creator",
+      value: filters.creator,
+      text:
+        data?.creators.find((option) => option.value === filters.creator)
+          ?.label ?? filters.creator,
+    },
+    {
+      key: "destination",
+      label: "Destination",
+      value: filters.destination,
+      text:
+        data?.destinations.find(
+          (option) => option.value === filters.destination,
+        )?.label ?? filters.destination,
+    },
+    {
+      key: "state",
+      label: "State",
+      value: filters.state === "all" ? "" : filters.state,
+      text: stateOptions.find((option) => option.value === filters.state)
+        ?.label,
+    },
+  ].filter((filter) => filter.value);
+  const trigger = (
+    <Button
+      className="h-11 shrink-0"
+      aria-expanded={expanded}
+      aria-haspopup="dialog"
+      onClick={desktop ? undefined : () => setExpanded(true)}
+    >
+      <SlidersHorizontal aria-hidden="true" size={14} /> Filters
+      {activeFilters.length ? ` (${activeFilters.length})` : ""}
+    </Button>
+  );
+  const controls = (
+    <AutomationFilterFields filters={filters} data={data} onChange={onChange} />
+  );
   return (
     <div className="grid gap-3">
       <div className="grid gap-2 lg:grid-cols-[auto_minmax(16rem,1fr)] lg:items-center lg:gap-4">
-        <div aria-label="Scope" role="group" className="flex flex-wrap gap-2">
+        <ToggleGroup
+          aria-label="Scope"
+          className="flex-wrap gap-2"
+          onValueChange={([next]) => {
+            if (next) onChange("scope", next);
+          }}
+          value={[filters.scope]}
+        >
           {(
             [
               ["all", "All"],
@@ -40,20 +117,19 @@ export function AutomationFilters(props: {
               ["attention", "Needs attention"],
             ] as const
           ).map(([value, label]) => (
-            <ToggleButton
-              className="min-h-11 font-sans! normal-case! lg:min-h-9"
+            <ToggleGroupItem
+              className="min-h-11 lg:min-h-9"
               key={value}
-              onClick={() => onChange("scope", value)}
-              pressed={filters.scope === value}
+              value={value}
               variant="pill"
             >
               {label}
               {data && value !== "attention" ? (
                 <span className="ml-1.5 opacity-65">{data.counts[value]}</span>
               ) : null}
-            </ToggleButton>
+            </ToggleGroupItem>
           ))}
-        </div>
+        </ToggleGroup>
         <div className="flex items-center gap-2">
           <SearchInput
             className="flex-1"
@@ -63,68 +139,107 @@ export function AutomationFilters(props: {
             value={props.searchText}
             onChange={props.onSearch}
           />
-          <Button
-            className="h-11 shrink-0"
-            aria-expanded={expanded}
-            aria-controls={controlsId}
-            onClick={() => setExpanded(!expanded)}
-          >
-            <SlidersHorizontal aria-hidden="true" size={14} /> Filters
-            {activeCount ? ` (${activeCount})` : ""}
-          </Button>
+          {desktop ? (
+            <Popover open={expanded} onOpenChange={setExpanded}>
+              <PopoverTrigger render={trigger} />
+              <PopoverContent align="end" className="w-80">
+                <PopoverTitle>Filters</PopoverTitle>
+                <div className="mt-4">{controls}</div>
+              </PopoverContent>
+            </Popover>
+          ) : (
+            trigger
+          )}
         </div>
       </div>
-      <div
-        id={controlsId}
-        className={cn(
-          "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-3 xl:col-span-1"
-          label="Type"
+      {activeFilters.length > 0 ? (
+        <div
+          aria-label="Active filters"
+          role="group"
+          className="flex min-w-0 flex-wrap gap-2"
+        >
+          {activeFilters.map((filter) => (
+            <Button
+              key={filter.key}
+              aria-label={`Remove ${filter.key} filter`}
+              className="min-h-9 max-w-full text-xs"
+              title={`${filter.label}: ${filter.text}`}
+              onClick={() => onChange(filter.key, "")}
+            >
+              <span className="truncate">
+                {filter.label}: {filter.text}
+              </span>
+              <X aria-hidden="true" className="shrink-0" size={12} />
+            </Button>
+          ))}
+        </div>
+      ) : null}
+      {!desktop && expanded ? (
+        <BottomSheet
+          label="Filters"
+          size="content"
+          onClose={() => setExpanded(false)}
+        >
+          <div className="p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+            {controls}
+          </div>
+        </BottomSheet>
+      ) : null}
+    </div>
+  );
+}
+
+function AutomationFilterFields({
+  filters,
+  data,
+  onChange,
+}: Pick<
+  Parameters<typeof AutomationFilters>[0],
+  "filters" | "data" | "onChange"
+>) {
+  return (
+    <div className="grid gap-4">
+      <FilterGroup label="Type">
+        <ToggleGroup
+          className="flex-wrap gap-2"
+          onValueChange={([next]) => {
+            if (next) onChange("type", next);
+          }}
+          value={[filters.type]}
         >
           {(["all", "scheduled", "event"] as const).map((value) => (
-            <ToggleButton
+            <ToggleGroupItem
               className="min-h-9"
               key={value}
-              onClick={() => onChange("type", value)}
-              pressed={filters.type === value}
+              value={value}
               variant="pill"
             >
               {value}
-            </ToggleButton>
+            </ToggleGroupItem>
           ))}
-        </FilterGroup>
-        <AutomationFilterSelect
-          label="Creator"
-          emptyLabel="All"
-          value={filters.creator ?? ""}
-          options={data?.creators ?? []}
-          onChange={(value) => onChange("creator", value)}
-        />
-        <AutomationFilterSelect
-          label="Destination"
-          emptyLabel="All"
-          value={filters.destination ?? ""}
-          options={data?.destinations ?? []}
-          onChange={(value) => onChange("destination", value)}
-        />
-        <AutomationFilterSelect
-          label="State"
-          emptyLabel="All"
-          value={filters.state === "all" ? "" : filters.state}
-          options={[
-            { value: "active", label: "Active" },
-            { value: "blocked", label: "Blocked" },
-            { value: "paused", label: "Paused" },
-            { value: "unavailable", label: "Trigger unavailable" },
-            { value: "completed", label: "Completed" },
-          ]}
-          onChange={(value) => onChange("state", value)}
-        />
-      </div>
+        </ToggleGroup>
+      </FilterGroup>
+      <AutomationFilterSelect
+        label="Creator"
+        emptyLabel="All"
+        value={filters.creator ?? ""}
+        options={data?.creators ?? []}
+        onChange={(value) => onChange("creator", value)}
+      />
+      <AutomationFilterSelect
+        label="Destination"
+        emptyLabel="All"
+        value={filters.destination ?? ""}
+        options={data?.destinations ?? []}
+        onChange={(value) => onChange("destination", value)}
+      />
+      <AutomationFilterSelect
+        label="State"
+        emptyLabel="All"
+        value={filters.state === "all" ? "" : filters.state}
+        options={stateOptions}
+        onChange={(value) => onChange("state", value)}
+      />
     </div>
   );
 }
@@ -158,7 +273,7 @@ function AutomationFilterSelect(props: {
 }) {
   return (
     <FilterGroup label={props.label}>
-      <Select
+      <NativeSelect
         aria-label={props.ariaLabel ?? `Filter by ${props.label.toLowerCase()}`}
         variant="filter"
         value={props.value}
@@ -174,7 +289,7 @@ function AutomationFilterSelect(props: {
             {option.label}
           </option>
         ))}
-      </Select>
+      </NativeSelect>
     </FilterGroup>
   );
 }

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

@@ -1,32 +1,44 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverDescription,
+} from "../../components/ui/popover";
+import { useToastManager } from "../../components/ui/toast";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { Link } from "react-router";
+import { CircleHelp, Pencil, Settings2, Trash2 } from "lucide-react";
 import {
   automationEditSchema,
   type AutomationSummary,
 } from "@sentry/junior/api/schema";
-import { Link } from "react-router";
-import { Button, ButtonLink } from "../../components/Button";
-import { StatusChip } from "../../components/StatusChip";
+import { Button } from "../../components/ui/button";
 import { FormNotice } from "../../components/FormNotice";
 import { DashboardApiError, fetchDashboardJson, post } from "../../http";
 
-/** Explain lifecycle separately from the last execution. Pause and resume are creator-only. */
+/** Keep revision-checked lifecycle actions available in the fixed details footer. */
 export function AutomationLifecycle({
   automation,
   editPath,
+  onDelete,
 }: {
   automation: AutomationSummary;
   editPath: string;
+  onDelete(source: HTMLButtonElement): void;
 }) {
+  const toast = useToastManager();
   const queryClient = useQueryClient();
   const completed = automation.status === "completed";
   const paused = automation.status === "paused";
   const blocked = automation.status === "blocked";
-  const unavailable =
-    automation.kind === "event" && !automation.triggerAvailable;
   // Public readers can edit settings, but only the creator controls lifecycle.
   const canEdit = !completed;
   const canPause = automation.ownedByViewer && !completed;
-  const blockReason = automation.statusReason;
   const action = paused || blocked ? "resume" : "pause";
   const mutation = useMutation({
     mutationFn: async () => {
@@ -46,40 +58,77 @@ export function AutomationLifecycle({
         revision: current.revision,
       });
     },
-    onSuccess: async () => {
+    onSuccess: async (updated) => {
       await queryClient.invalidateQueries({
         queryKey: ["dashboard", "automations"],
       });
+      toast.add({
+        title:
+          updated.status === "blocked"
+            ? "Automation is still blocked"
+            : action === "pause"
+              ? "Automation paused"
+              : "Automation resumed",
+        description:
+          updated.status === "blocked"
+            ? "Fix the reported requirement before resuming again."
+            : action === "pause"
+              ? "Work already queued or running may finish."
+              : "Future triggers are enabled.",
+        type: updated.status === "blocked" ? "warning" : "success",
+      });
     },
   });
-  const status =
-    automation.status === "active" && unavailable
-      ? "Trigger unavailable"
-      : automation.status;
-  const failed =
-    automation.lastRunStatus === "failed" ||
-    automation.lastRunStatus === "blocked";
   return (
-    <div className="grid gap-3 text-sm">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div role="status" aria-live="polite">
-          <StatusChip
-            tone={
-              paused || completed
-                ? "neutral"
-                : blocked || unavailable
-                  ? "warning"
-                  : "success"
-            }
-          >
-            {status}
-          </StatusChip>
+    <footer
+      aria-label="Automation actions"
+      className="grid gap-3 border-t border-dashboard-border bg-dashboard-bg-elevated p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+    >
+      <div className="flex items-center gap-2">
+        <div className="mr-auto flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Link
+                  aria-label={canEdit ? "Edit automation" : "View settings"}
+                  className="grid size-11 place-items-center rounded-md text-dashboard-text-muted no-underline hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+                  to={editPath}
+                >
+                  {canEdit ? (
+                    <Pencil aria-hidden="true" size={16} />
+                  ) : (
+                    <Settings2 aria-hidden="true" size={16} />
+                  )}
+                </Link>
+              }
+            />
+            <TooltipContent size="compact">
+              {canEdit ? "Edit automation" : "View settings"}
+            </TooltipContent>
+          </Tooltip>
+          {automation.ownedByViewer ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    focusableWhenDisabled
+                    aria-label="Delete automation"
+                    className="min-h-11 min-w-11"
+                    size="icon"
+                    variant="danger"
+                    onClick={(event) => onDelete(event.currentTarget)}
+                    disabled={mutation.isPending}
+                  >
+                    <Trash2 aria-hidden="true" size={16} />
+                  </Button>
+                }
+              />
+              <TooltipContent size="compact">Delete automation</TooltipContent>
+            </Tooltip>
+          ) : null}
         </div>
-        <div className="flex items-center gap-2">
-          <ButtonLink className="min-h-11" to={editPath}>
-            {canEdit ? "Edit automation" : "View settings"}
-          </ButtonLink>
-          {canPause ? (
+        {canPause ? (
+          <>
             <Button
               className="min-h-11"
               disabled={mutation.isPending}
@@ -91,50 +140,32 @@ export function AutomationLifecycle({
                   ? "Pause"
                   : "Resume"}
             </Button>
-          ) : null}
-        </div>
+            <Popover>
+              <PopoverTrigger
+                render={
+                  <Button
+                    aria-label="About pausing"
+                    className="min-h-11 min-w-11"
+                    size="icon"
+                  />
+                }
+              >
+                <CircleHelp aria-hidden="true" size={16} />
+              </PopoverTrigger>
+              <PopoverContent side="top" align="end" aria-label="About pausing">
+                <PopoverDescription>
+                  Pausing stops new runs. Work already queued or running may
+                  finish. Resuming skips missed runs and waits for the next
+                  scheduled time or new event.
+                  {paused && automation.statusReason
+                    ? " Removing the pause keeps the block until you fix it and resume again."
+                    : ""}
+                </PopoverDescription>
+              </PopoverContent>
+            </Popover>
+          </>
+        ) : null}
       </div>
-      {blocked || blockReason ? (
-        <p className="m-0 break-words text-dashboard-text-muted">
-          {blockReason ?? "Check the last run to see what needs fixing."}{" "}
-          {paused ? "Fix this before resuming." : "Fix this, then resume."}
-        </p>
-      ) : null}
-      {unavailable ? (
-        <p className="m-0 text-dashboard-text-muted">
-          This event source is unavailable. Enable its plugin or choose another
-          event.
-        </p>
-      ) : null}
-      {failed ? (
-        <p className="m-0 text-dashboard-text-muted">
-          Last run {automation.lastRunStatus}.
-          {automation.status === "active" && !unavailable
-            ? " Future runs are still on."
-            : ""}{" "}
-          <Link
-            className="text-dashboard-text underline underline-offset-2"
-            to={`/automations/${encodeURIComponent(automation.id)}/executions`}
-          >
-            View run history
-          </Link>
-        </p>
-      ) : null}
-      {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
-          </summary>
-          <p className="mt-1 mb-0 leading-relaxed">
-            Pausing stops new runs. Work already queued or running may finish.
-            Resuming skips missed runs and waits for the next scheduled time or
-            new event.
-            {paused && blockReason
-              ? " Removing the pause keeps the block until you fix it and resume again."
-              : ""}
-          </p>
-        </details>
-      ) : null}
       {mutation.error ? (
         <FormNotice tone="error" title="Could not update this automation.">
           {mutation.error instanceof DashboardApiError
@@ -142,6 +173,6 @@ export function AutomationLifecycle({
             : mutation.error.message}
         </FormNotice>
       ) : null}
-    </div>
+    </footer>
   );
 }

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

@@ -3,8 +3,9 @@ import type {
   AutomationEdit,
   AutomationSummary,
 } from "@sentry/junior/api/schema";
-import { Button } from "../../components/Button";
-import { Select } from "../../components/Select";
+import { Button } from "../../components/ui/button";
+import { NativeSelect } from "../../components/ui/native-select";
+import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
 import { cn } from "../../styles";
 import type { AutomationDraft } from "./automationDraft";
 import { automationOutcomeLabel } from "./automationOutcomes";
@@ -32,6 +33,8 @@ export function AutomationOutcomeFields(props: {
   value: AutomationDraft["outcomes"];
   original: AutomationEdit["outcomes"];
   destination: AutomationSummary["destination"];
+  /** Base UI radios do not inherit a native fieldset's disabled state. */
+  disabled?: boolean;
   onChange(value: AutomationDraft["outcomes"]): void;
 }) {
   const defaultOutcomes: AutomationDraft["outcomes"] = props.original.length
@@ -65,26 +68,25 @@ export function AutomationOutcomeFields(props: {
   ];
   return (
     <>
-      <fieldset>
-        <legend className="sr-only">Success messages</legend>
-        <div className="flex flex-wrap gap-x-6 gap-y-3">
-          {[true, false].map((send) => (
-            <label
-              key={String(send)}
-              className="inline-flex min-h-8 cursor-pointer items-center gap-2 text-sm"
-            >
-              <input
-                type="radio"
-                name="messages"
-                className="size-4 accent-dashboard-focus"
-                checked={Boolean(props.value.length) === send}
-                onChange={() => props.onChange(send ? defaultOutcomes : [])}
-              />
-              {send ? "Send a message" : "No success message"}
-            </label>
-          ))}
-        </div>
-      </fieldset>
+      <RadioGroup
+        aria-label="Success messages"
+        disabled={props.disabled}
+        className="flex flex-wrap gap-x-6 gap-y-3"
+        onValueChange={(send: boolean) =>
+          props.onChange(send ? defaultOutcomes : [])
+        }
+        value={props.value.length > 0}
+      >
+        {[true, false].map((send) => (
+          <label
+            key={String(send)}
+            className="inline-flex min-h-8 cursor-pointer items-center gap-2 text-sm"
+          >
+            <RadioGroupItem value={send} />
+            {send ? "Send a message" : "No success message"}
+          </label>
+        ))}
+      </RadioGroup>
       {props.value.length ? (
         <div className="grid gap-4 sm:gap-2">
           {props.value.map((outcome, index) => {
@@ -106,7 +108,7 @@ export function AutomationOutcomeFields(props: {
                       "order-last basis-full sm:order-none sm:basis-auto",
                   )}
                 >
-                  <Select
+                  <NativeSelect
                     aria-label={`Message ${index + 1} destination`}
                     value={
                       typeof outcome.destination === "string"
@@ -130,7 +132,7 @@ export function AutomationOutcomeFields(props: {
                         {option.label}
                       </option>
                     ))}
-                  </Select>
+                  </NativeSelect>
                 </div>
                 {props.value.length > 1 ? (
                   <>