@sentry/junior-dashboard 0.233.0 → 0.235.0

package/src/client/components/layout/SecondaryNavigation.tsx

@@ -1,6 +1,10 @@
-import { Link, NavLink, useLocation } from "react-router";
+import type { ReactNode } from "react";
 
-import { pathWithSearch } from "../../searchParams";
+import {
+  SegmentedNav,
+  SiblingPageLink,
+  type SegmentedNavItem,
+} from "../SegmentedNav";
 import {
   cn,
   dashboardContainerClass,
@@ -8,62 +12,20 @@ import {
 } from "../../styles";
 import { SecondaryNavigationPortal } from "./DashboardChrome";
 
-export type SecondaryNavigationItem = {
-  end?: boolean;
-  /** Override default NavLink matching when a path family should stay active. */
-  isActive?: (pathname: string) => boolean;
-  label: string;
-  to: string;
-};
-
-type LinkClassState = { isActive: boolean };
-
-function SecondaryNavItem(props: {
-  className: (state: LinkClassState) => string;
-  item: SecondaryNavigationItem;
-  pathname: string;
-  search: string;
-}) {
-  const { className, item, pathname, search } = props;
-  // Keep page filters (range, scope, q) when moving across secondary sections.
-  const to = pathWithSearch(item.to, search);
-  if (item.isActive) {
-    const isActive = item.isActive(pathname);
-    return (
-      <Link
-        aria-current={isActive ? "page" : undefined}
-        className={className({ isActive })}
-        to={to}
-      >
-        {item.label}
-      </Link>
-    );
-  }
-
-  return (
-    <NavLink className={className} end={item.end} to={to}>
-      {item.label}
-    </NavLink>
-  );
-}
+export type SecondaryNavigationItem = SegmentedNavItem;
 
-/** Render page navigation in the desktop chrome and mobile drawer. */
+/**
+ * Render page navigation above the page, in the desktop chrome, and in the
+ * mobile menu. On mobile the links sit at the top of the page and scroll with
+ * it. Pass the page as children so the links and the page share one layout
+ * row.
+ */
 export function SecondaryNavigation(props: {
   ariaLabel: string;
+  children: ReactNode;
   items: SecondaryNavigationItem[];
 }) {
-  const location = useLocation();
-  const desktopLinkClass = ({ isActive }: LinkClassState) =>
-    cn(
-      "relative flex h-12 shrink-0 items-center px-3 font-display text-xs font-medium no-underline transition-colors after:absolute after:inset-x-3 after:bottom-0 after:h-0.5 after:transition-colors sm:text-sm",
-      isActive
-        ? "text-dashboard-text after:bg-cyan-300"
-        : cn(
-            "after:bg-transparent hover:bg-white/[0.025]",
-            dashboardInteractiveTextClass,
-          ),
-    );
-  const mobileLinkClass = ({ isActive }: LinkClassState) =>
+  const menuLinkClass = ({ isActive }: { isActive: boolean }) =>
     cn(
       "rounded-lg px-3 py-3 pl-6 font-mono text-sm font-medium no-underline transition-colors",
       isActive
@@ -72,44 +34,39 @@ export function SecondaryNavigation(props: {
     );
 
   return (
-    <SecondaryNavigationPortal
-      desktop={
-        <div className="border-b border-white/[0.06] bg-white/[0.018]">
+    <div className="min-w-0">
+      <SecondaryNavigationPortal
+        desktop={
+          <div className="border-b border-white/[0.06] bg-white/[0.018]">
+            <div
+              className={cn(
+                dashboardContainerClass,
+                "min-w-0 px-4 py-2 md:px-8",
+              )}
+            >
+              <SegmentedNav ariaLabel={props.ariaLabel} items={props.items} />
+            </div>
+          </div>
+        }
+        mobile={
           <nav
             aria-label={props.ariaLabel}
-            className={cn(
-              dashboardContainerClass,
-              "flex min-w-0 gap-1 overflow-x-auto px-4 [scrollbar-width:none] md:px-8 [&::-webkit-scrollbar]:hidden",
-            )}
+            className="mt-3 grid gap-1 border-t border-white/[0.07] pt-3"
           >
             {props.items.map((item) => (
-              <SecondaryNavItem
-                className={desktopLinkClass}
+              <SiblingPageLink
+                className={menuLinkClass}
                 item={item}
                 key={item.to}
-                pathname={location.pathname}
-                search={location.search}
               />
             ))}
           </nav>
-        </div>
-      }
-      mobile={
-        <nav
-          aria-label={props.ariaLabel}
-          className="mt-3 grid gap-1 border-t border-white/[0.07] pt-3"
-        >
-          {props.items.map((item) => (
-            <SecondaryNavItem
-              className={mobileLinkClass}
-              item={item}
-              key={item.to}
-              pathname={location.pathname}
-              search={location.search}
-            />
-          ))}
-        </nav>
-      }
-    />
+        }
+      />
+      <div className="px-4 pt-4 sm:px-8 md:hidden">
+        <SegmentedNav ariaLabel={props.ariaLabel} fill items={props.items} />
+      </div>
+      {props.children}
+    </div>
   );
 }

package/src/client/http.ts

@@ -4,11 +4,20 @@ import { recordDashboardServerVersion } from "./dashboard-version";
 /** An authenticated dashboard request rejected by the product API. */
 export class DashboardApiError extends Error {
   readonly status: number;
+  readonly fields?: Record<string, string[]>;
+  readonly code?: string;
   readonly apiError?: string;
 
-  constructor(path: string, status: number, apiError?: string) {
+  constructor(
+    path: string,
+    status: number,
+    apiError?: string,
+    detail?: { fields?: Record<string, string[]>; code?: string },
+  ) {
     super(`${path} returned ${status}`);
     this.status = status;
+    this.fields = detail?.fields;
+    this.code = detail?.code;
     if (apiError?.trim()) this.apiError = apiError.trim();
   }
 }
@@ -18,13 +27,32 @@ async function throwDashboardApiError(
   response: Response,
 ): Promise<never> {
   let apiError: string | undefined;
+  let fields: Record<string, string[]> | undefined;
+  let code: string | undefined;
   try {
-    const body = (await response.json()) as { error?: unknown };
+    const body = (await response.json()) as {
+      error?: unknown;
+      code?: unknown;
+      fields?: unknown;
+    };
     if (typeof body.error === "string") apiError = body.error;
+    if (typeof body.code === "string") code = body.code;
+    if (body.fields && typeof body.fields === "object") {
+      fields = Object.fromEntries(
+        Object.entries(body.fields).filter(
+          (entry): entry is [string, string[]] =>
+            Array.isArray(entry[1]) &&
+            entry[1].every((value) => typeof value === "string"),
+        ),
+      );
+    }
   } catch {
     // Keep the status-only fallback when the body is not JSON.
   }
-  throw new DashboardApiError(path, response.status, apiError);
+  throw new DashboardApiError(path, response.status, apiError, {
+    fields,
+    code,
+  });
 }
 
 function restartDashboardSignIn(): void {

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

@@ -1,6 +1,13 @@
+import { AutomationLifecycle } from "./AutomationLifecycle";
+import { automationOutcomeLabel } from "./automationOutcomes";
+import {
+  automationEventConditions,
+  automationEventNames,
+  automationScheduleLabel,
+  formatAutomationRunTime,
+} from "./automationFormat";
 import type { AutomationSummary } from "@sentry/junior/api/schema";
-import { Link } from "react-router";
-import { MapPin } from "lucide-react";
+import { Link, useLocation } from "react-router";
 import { Detail, DetailList } from "../../components/DetailList";
 import { Drawer } from "../../components/Drawer";
 import {
@@ -17,6 +24,7 @@ export function AutomationDetailsDrawer(props: {
   range: TimeRangeDays;
   automation: AutomationSummary | undefined;
 }) {
+  const location = useLocation();
   if (!props.automation) return null;
 
   const { automation } = props;
@@ -32,28 +40,25 @@ export function AutomationDetailsDrawer(props: {
   ) : (
     automation.createdBy
   );
+  const conditions =
+    automation.kind === "event" ? automationEventConditions(automation) : "";
   const details =
     automation.kind === "scheduled"
       ? [
-          { label: "Schedule", value: automation.schedule },
+          { label: "Schedule", value: automationScheduleLabel(automation) },
           {
             label: "Next run",
-            value: automation.nextRunAt
-              ? formatRunDate(automation.nextRunAt)
-              : "None",
+            value:
+              automation.status === "active" && automation.nextRunAt
+                ? formatAutomationRunTime(automation.nextRunAt)
+                : "None",
           },
         ]
       : [
-          { label: "Resource", value: automation.resource },
-          { label: "Events", value: automation.events.join(", ") },
+          { label: "Watching", value: automation.resource },
+          { label: "Events", value: automationEventNames(automation) },
+          ...(conditions ? [{ label: "Conditions", value: conditions }] : []),
         ];
-  const statusLabel =
-    automation.kind === "scheduled"
-      ? automation.status
-      : automation.triggerAvailable
-        ? "ready"
-        : "unavailable";
-
   const titleId = "automation-details-drawer-title";
 
   return (
@@ -68,9 +73,8 @@ export function AutomationDetailsDrawer(props: {
           >
             {automation.title}
           </h2>
-          <div className="mt-1 break-words font-mono text-xs leading-snug text-dashboard-text-muted capitalize">
-            {automation.kind} automation · {statusLabel} ·{" "}
-            {formatDate(automation.createdAt)}
+          <div className="mt-1 break-words text-sm text-dashboard-text-muted">
+            Created by {createdBy} · {automation.destination.label}
           </div>
         </>
       }
@@ -80,53 +84,70 @@ export function AutomationDetailsDrawer(props: {
     >
       <section className="grid gap-5">
         <div>
-          <div className="mb-2 font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
-            Instruction
-          </div>
+          <h3 className="mt-0 mb-2 text-sm font-medium text-dashboard-text-muted">
+            What to do
+          </h3>
           <TranscriptText text={automation.instruction} />
         </div>
+        <AutomationLifecycle
+          key={`${automation.kind}:${automation.id}`}
+          automation={automation}
+          editPath={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/edit${location.search}`}
+        />
         <DetailList>
           {details.map((detail) => (
             <Detail key={detail.label} label={detail.label}>
               {detail.value}
             </Detail>
           ))}
-          <Detail label="Outcomes">
-            {automation.outcomes.length === 0
-              ? "None"
-              : `${automation.outcomes.length} message${automation.outcomes.length === 1 ? "" : "s"}`}
-          </Detail>
-          <Detail label="Destination">
-            <span className="inline-flex items-center gap-1.5">
-              <MapPin
-                aria-hidden="true"
-                className="text-cyan-300/70"
-                size={13}
-              />
-              {automation.destination.label} ·{" "}
-              {automation.destination.visibility}
-            </span>
-          </Detail>
-          <Detail label="Created">
-            {createdBy} · {formatDate(automation.createdAt)}
-          </Detail>
-          <Detail label="Executions">
-            <AutomationExecutionSummary
-              range={props.range}
-              automation={automation}
-            />
+          <Detail label="On success">
+            {automation.outcomes.length === 0 ? (
+              "No message on success"
+            ) : (
+              <ol className="m-0 pl-4">
+                {automation.outcomes.map((outcome, index) => (
+                  <li key={index}>
+                    {automationOutcomeLabel(outcome, automation.destination)}
+                  </li>
+                ))}
+              </ol>
+            )}
           </Detail>
         </DetailList>
-        {automation.totalRuns > 0 ? (
-          <div className="pt-1">
-            <Link
-              className="inline-flex items-center justify-center rounded border border-white/12 bg-white/[0.03] px-3 py-2 font-mono text-xs font-medium text-dashboard-text no-underline transition-colors hover:border-white/25 hover:bg-white/[0.06]"
-              to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
-            >
-              View all executions
-            </Link>
-          </div>
+        {automation.totalRuns > 0 &&
+        automation.lastRunStatus !== "failed" &&
+        automation.lastRunStatus !== "blocked" ? (
+          <Link
+            className="w-fit py-2 text-sm text-dashboard-text underline underline-offset-2"
+            to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
+          >
+            View all runs
+          </Link>
         ) : null}
+        <details>
+          <summary className="cursor-pointer py-3 text-sm text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline focus-visible:outline-dashboard-focus">
+            More details
+          </summary>
+          <DetailList>
+            <Detail label="Connected accounts">
+              {automation.credentialMode === "creator" ? (
+                <>
+                  Uses accounts connected by{" "}
+                  {automation.ownedByViewer ? "you" : automation.createdBy}.
+                </>
+              ) : (
+                "Junior’s accounts only"
+              )}
+            </Detail>
+            <Detail label="Created">{formatDate(automation.createdAt)}</Detail>
+            <Detail label="Run history">
+              <AutomationExecutionSummary
+                range={props.range}
+                automation={automation}
+              />
+            </Detail>
+          </DetailList>
+        </details>
       </section>
     </Drawer>
   );
@@ -169,16 +190,16 @@ function AutomationExecutionSummary(props: {
         ) : (
           <>{automation.totalRuns} total</>
         )}
-        {automation.lastRunAt ? " · Last execution " : " · Never run"}
+        {automation.lastRunAt ? " · Last run " : " · Never run"}
         {automation.lastRunAt && automation.lastConversationId ? (
           <Link
             className="text-dashboard-text underline decoration-white/20 underline-offset-2 hover:decoration-white/60"
             to={conversationPath(automation.lastConversationId)}
           >
-            {formatRunDate(automation.lastRunAt)}
+            {formatAutomationRunTime(automation.lastRunAt)}
           </Link>
         ) : automation.lastRunAt ? (
-          formatRunDate(automation.lastRunAt)
+          formatAutomationRunTime(automation.lastRunAt)
         ) : null}
       </span>
     </div>
@@ -191,14 +212,3 @@ function formatDate(value: string): string {
     timeStyle: "short",
   });
 }
-
-function formatRunDate(value: string): string {
-  return formatTime(value, {
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    timeZoneName: "short",
-    year: "numeric",
-  });
-}

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

@@ -0,0 +1,171 @@
+import { Link, useLocation, useParams } from "react-router";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowLeft } from "lucide-react";
+import {
+  automationEditSchema,
+  type AutomationSummary,
+} from "@sentry/junior/api/schema";
+import { useAutomationData } from "../../api";
+import { fetchDashboardJson } from "../../http";
+import { Button } from "../../components/Button";
+import { FormNotice } from "../../components/FormNotice";
+import { StatusChip } from "../../components/StatusChip";
+import { AutomationsNavigation } from "./AutomationsPageLayout";
+import { AutomationEditor } from "./AutomationEditor";
+import { AutomationEditorLoading } from "./AutomationEditorLoading";
+import { AutomationFormSection } from "./AutomationFormSection";
+import { automationOutcomeLabel } from "./automationOutcomes";
+
+/** Load a linkable editor, with readable public values for non-creators. */
+export function AutomationEditPage(props: { enabled: boolean }) {
+  const { kind, automationId } = useParams();
+  const location = useLocation();
+  const summary = useAutomationData(props.enabled, automationId);
+  const canEdit =
+    summary.data?.ownedByViewer &&
+    !(summary.data.kind === "scheduled" && summary.data.status === "completed");
+  const edit = useQuery({
+    queryKey: ["dashboard", "automations", "edit", kind, automationId],
+    enabled: props.enabled && Boolean(canEdit) && summary.data?.kind === kind,
+    retry: false,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationEditSchema,
+        `/api/automations/${kind}/${encodeURIComponent(automationId!)}/edit`,
+        signal,
+      ),
+  });
+  const returnPath = `/automations/list${location.search}`;
+  const value = summary.data;
+  const status =
+    value?.kind === "event"
+      ? value.status === "paused"
+        ? "paused"
+        : value.triggerAvailable
+          ? "active"
+          : "unavailable"
+      : value?.status;
+  const statusTone =
+    status === "active"
+      ? "success"
+      : status === "blocked" || status === "unavailable"
+        ? "warning"
+        : "neutral";
+  return (
+    <AutomationsNavigation>
+      <div className="mx-auto w-full min-w-0 max-w-5xl px-4 pt-7 sm:px-8 sm:pt-9">
+        <Link
+          to={returnPath}
+          className="inline-flex min-h-8 items-center gap-2 text-sm text-dashboard-text-muted no-underline hover:text-dashboard-text"
+        >
+          <ArrowLeft aria-hidden size={15} />
+          All automations
+        </Link>
+        <div className="mt-4 mb-8 flex flex-wrap items-start justify-between gap-4">
+          <div className="min-w-0">
+            <h1 className="m-0 break-words font-display text-3xl font-light tracking-tight">
+              {value && !canEdit ? value.title : "Edit automation"}
+            </h1>
+            {value ? (
+              <p className="mt-2 mb-0 text-sm text-dashboard-text-muted">
+                Created by {value.ownedByViewer ? "you" : value.createdBy} ·{" "}
+                {value.destination.label}
+              </p>
+            ) : null}
+          </div>
+          {value ? (
+            <StatusChip tone={statusTone}>
+              {status === "unavailable" ? "Trigger unavailable" : status}
+            </StatusChip>
+          ) : null}
+        </div>
+        {(!value && summary.error) ||
+        (!edit.data && edit.error) ||
+        (value && value.kind !== kind) ? (
+          <FormNotice tone="error" title="Automation could not be loaded.">
+            It may no longer be available, or you may not have access.{" "}
+            <Button
+              onClick={() => {
+                void summary.refetch();
+                if (canEdit) void edit.refetch();
+              }}
+            >
+              Try again
+            </Button>
+          </FormNotice>
+        ) : !value || (canEdit && !edit.data) ? (
+          <AutomationEditorLoading />
+        ) : canEdit && edit.data ? (
+          <AutomationEditor
+            key={`${kind}:${automationId}`}
+            automation={edit.data}
+            summary={value}
+            returnPath={returnPath}
+          />
+        ) : (
+          <AutomationReadOnly automation={value} />
+        )}
+      </div>
+    </AutomationsNavigation>
+  );
+}
+
+function AutomationReadOnly({ automation }: { automation: AutomationSummary }) {
+  return (
+    <>
+      <p className="mb-6 text-sm text-dashboard-text-muted">
+        {automation.ownedByViewer
+          ? "This automation has completed and cannot be edited. It will not run again."
+          : `Only ${automation.createdBy} can edit this automation.`}
+      </p>
+      <AutomationFormSection title="What to do" detail="The saved instruction.">
+        <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed">
+          {automation.instruction}
+        </p>
+      </AutomationFormSection>
+      <AutomationFormSection title="When to run" detail="The saved trigger.">
+        {automation.kind === "scheduled" ? (
+          <p className="m-0 text-sm">
+            {automation.schedule} · {automation.timezone}
+          </p>
+        ) : (
+          <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}
+          </div>
+        )}
+      </AutomationFormSection>
+      <AutomationFormSection
+        title="Where results go"
+        detail="Messages after successful work."
+      >
+        {automation.outcomes.length ? (
+          <ol className="m-0 grid gap-2 pl-5 text-sm">
+            {automation.outcomes.map((outcome, index) => (
+              <li key={index}>
+                {automationOutcomeLabel(outcome, automation.destination)}
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <p className="m-0 text-sm">No success message</p>
+        )}
+      </AutomationFormSection>
+      <AutomationFormSection
+        title="Credentials"
+        detail="The accounts Junior can use."
+      >
+        <p className="m-0 text-sm">
+          {automation.credentialMode === "creator"
+            ? `Uses ${automation.ownedByViewer ? "your" : `${automation.createdBy}’s`} connected accounts.`
+            : "System credentials only."}
+        </p>
+      </AutomationFormSection>
+    </>
+  );
+}