@sentry/junior-dashboard 0.263.0 → 0.265.0

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

@@ -0,0 +1,193 @@
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import type { ReactNode } from "react";
+import { Link, useLocation } from "react-router";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../components/ui/accordion";
+import { Button } from "../../components/ui/button";
+import { DetailsPanel } from "../../components/DetailsPanel";
+import { InlineError } from "../../components/InlineError";
+import { PageContentSkeleton } from "../../components/PageContentSkeleton";
+import {
+  timeRangeLabel,
+  type TimeRangeDays,
+} from "../../components/controls/TimeRangeSelector";
+import { TranscriptText } from "../../conversations/TranscriptText";
+import { peoplePath } from "../../format";
+import { dashboardInlineLinkClass } from "../../styles";
+import { TriggerFilters } from "./TriggerFilters";
+import { AutomationLifecycle } from "./AutomationLifecycle";
+import { AutomationRecentRuns } from "./AutomationRecentRuns";
+import { AutomationStatus } from "./AutomationStatus";
+import {
+  automationScheduleLabel,
+  formatAutomationRunTime,
+} from "./automationFormat";
+import { automationOutcomeLabel } from "./automationOutcomes";
+
+/** Keep Automation context scrollable above persistent, permission-aware actions. */
+export function AutomationDetails(props: {
+  onClose(): void;
+  onDelete(source: HTMLButtonElement): void;
+  onRetry(): void;
+  error: boolean;
+  range: TimeRangeDays;
+  automation: AutomationSummary | undefined;
+}) {
+  const location = useLocation();
+  const { automation } = props;
+  return (
+    <DetailsPanel
+      label="Automation details"
+      sheetTitle={automation?.title}
+      onClose={props.onClose}
+      title={
+        <h2 className="m-0 break-words font-display text-base font-medium text-dashboard-text">
+          {automation?.title ?? "Automation details"}
+        </h2>
+      }
+    >
+      <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]">
+        <div
+          aria-label="Automation content"
+          role="region"
+          tabIndex={0}
+          className="min-h-0 overflow-y-auto overscroll-contain p-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus [overflow-wrap:anywhere]"
+        >
+          {automation ? (
+            <AutomationDetailsContent
+              automation={automation}
+              range={props.range}
+            />
+          ) : null}
+          {props.error ? (
+            <InlineError>
+              Automation details could not be loaded. It may be unavailable or
+              you may not have access.{" "}
+              <Button onClick={props.onRetry}>Try again</Button>
+            </InlineError>
+          ) : !automation ? (
+            <PageContentSkeleton
+              label="Loading automation details"
+              variant="panel"
+            />
+          ) : null}
+        </div>
+        {automation ? (
+          <AutomationLifecycle
+            automation={automation}
+            onDelete={props.onDelete}
+            editPath={`/automations/${encodeURIComponent(automation.id)}/edit${location.search}`}
+          />
+        ) : null}
+      </div>
+    </DetailsPanel>
+  );
+}
+
+function AutomationDetailsContent({
+  automation,
+  range,
+}: {
+  automation: AutomationSummary;
+  range: TimeRangeDays;
+}) {
+  const location = useLocation();
+  return (
+    <div className="grid min-w-0 gap-5">
+      <AutomationStatus automation={automation} />
+      <section aria-label="Instructions" className="text-sm leading-relaxed">
+        <TranscriptText
+          mentions={automation.mentions ?? []}
+          text={automation.instruction}
+        />
+      </section>
+      <dl className="m-0 grid gap-3 text-xs leading-relaxed">
+        <AutomationFact label="Trigger">
+          {automation.kind === "scheduled" ? (
+            <p className="m-0">{automationScheduleLabel(automation)}</p>
+          ) : (
+            <>
+              <p className="m-0 break-words">{automation.resource}</p>
+              <p className="m-0 mt-1 text-dashboard-text-muted">
+                {automation.trigger.events.join(", ")}
+              </p>
+              <TriggerFilters filters={automation.trigger.filters} />
+            </>
+          )}
+        </AutomationFact>
+        <AutomationFact label="On success">
+          {automation.outcomes.length === 0 ? (
+            <span className="text-dashboard-text-muted">No message</span>
+          ) : (
+            <ol className="m-0 grid list-none gap-2 p-0">
+              {automation.outcomes.map((outcome, index) => (
+                <li key={index}>
+                  Message{" "}
+                  {automationOutcomeLabel(outcome, automation.destination)}
+                </li>
+              ))}
+            </ol>
+          )}
+        </AutomationFact>
+      </dl>
+      <AutomationRecentRuns automation={automation} />
+      <Accordion className="border-t border-dashboard-border pt-1">
+        <AccordionItem value="about">
+          <AccordionTrigger className="min-h-11 text-xs text-dashboard-text-muted">
+            About this Automation
+          </AccordionTrigger>
+          <AccordionContent>
+            <dl className="m-0 grid gap-3 text-xs leading-relaxed">
+              <AutomationFact label="Created by">
+                {automation.createdByEmail ? (
+                  <Link
+                    className={dashboardInlineLinkClass}
+                    to={peoplePath(automation.createdByEmail)}
+                  >
+                    {automation.ownedByViewer ? "you" : automation.createdBy}
+                  </Link>
+                ) : automation.ownedByViewer ? (
+                  "you"
+                ) : (
+                  automation.createdBy
+                )}
+              </AutomationFact>
+              <AutomationFact label="Created">
+                {formatAutomationRunTime(automation.createdAt)}
+              </AutomationFact>
+              <AutomationFact label="Accounts">
+                {automation.credentialMode === "creator"
+                  ? `Uses accounts connected by ${automation.ownedByViewer ? "you" : automation.createdBy}.`
+                  : "Junior’s accounts only"}
+              </AutomationFact>
+              <AutomationFact label="Runs">
+                {automation.runs[range]} runs / {timeRangeLabel(range)} ·{" "}
+                {automation.totalRuns} total
+              </AutomationFact>
+            </dl>
+            <Link
+              className={`${dashboardInlineLinkClass} mt-3 inline-block py-2 text-xs`}
+              to={`/automations/${encodeURIComponent(automation.id)}/versions${location.search}`}
+            >
+              Version history
+            </Link>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+function AutomationFact(props: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid min-w-0 grid-cols-[5.25rem_minmax(0,1fr)] gap-3">
+      <dt className="text-dashboard-text-muted">{props.label}</dt>
+      <dd className="m-0 min-w-0">{props.children}</dd>
+    </div>
+  );
+}

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

@@ -8,10 +8,11 @@ import {
 import { useAutomationData } from "../../api";
 import { useDocumentTitle } from "../../documentTitle";
 import { fetchDashboardJson } from "../../http";
-import { Button } from "../../components/Button";
+import { Button } from "../../components/ui/button";
 import { FormNotice } from "../../components/FormNotice";
 import { StatusChip } from "../../components/StatusChip";
 import { AutomationsNavigation } from "./AutomationsPageLayout";
+import { TriggerFilters } from "./TriggerFilters";
 import { AutomationEditor } from "./AutomationEditor";
 import { AutomationEditorLoading } from "./AutomationEditorLoading";
 import { AutomationFormSection } from "./AutomationFormSection";
@@ -49,7 +50,7 @@ export function AutomationEditPage(props: { enabled: boolean }) {
     value?.kind === "event"
       ? value.status !== "active"
         ? value.status
-        : value.triggerAvailable
+        : value.trigger.problems.length === 0
           ? "active"
           : "unavailable"
       : value?.status;
@@ -144,12 +145,10 @@ function AutomationReadOnly({ automation }: { automation: AutomationSummary }) {
         ) : (
           <div className="grid gap-3 text-sm">
             <p className="m-0 break-words">{automation.resource}</p>
-            <p className="m-0 break-words">{automation.events.join(", ")}</p>
-            {automation.match ? (
-              <pre className="whitespace-pre-wrap break-words text-xs">
-                {JSON.stringify(automation.match, null, 2)}
-              </pre>
-            ) : null}
+            <p className="m-0 break-words">
+              {automation.trigger.events.join(", ")}
+            </p>
+            <TriggerFilters filters={automation.trigger.filters} />
           </div>
         )}
       </AutomationFormSection>

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. */