@sentry/junior-dashboard 0.234.0 → 0.235.0

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

@@ -6,38 +6,24 @@ import {
   Trash2,
   Zap,
 } from "lucide-react";
-import { useEffect, useId, useRef, useState } from "react";
+import { type ReactNode, useEffect, useId, useRef, useState } from "react";
 import { Link, useLocation } from "react-router";
 import { ActorAvatar } from "../../components/ActorAvatar";
 import { SelectableRow } from "../../components/SelectableRow";
 import { StatusChip } from "../../components/StatusChip";
-import { formatRelativeTime, formatTime, peoplePath } from "../../format";
-import { cn } from "../../styles";
-
-const desktopColumns =
-  "xl:grid-cols-[minmax(0,1fr)_9rem_16rem_10rem_7rem_2.75rem]";
-
-/** Keep the management headings aligned with the row fields. */
-export function AutomationListHeader() {
-  return (
-    <div
-      aria-hidden="true"
-      className={cn(
-        "hidden items-center gap-4 border-b border-dashboard-border-subtle px-4 py-2.5 text-xs text-dashboard-text-muted xl:grid",
-        desktopColumns,
-      )}
-    >
-      <span>Automation</span>
-      <span>Creator</span>
-      <span>Trigger</span>
-      <span>Destination</span>
-      <span>Last run</span>
-      <span className="sr-only">Actions</span>
-    </div>
-  );
-}
+import { formatRelativeTime, peoplePath } from "../../format";
+import {
+  automationEventConditions,
+  automationEventNames,
+  automationScheduleLabel,
+  formatAutomationRunTime,
+} from "./automationFormat";
 
-/** Show purpose, ownership, and trigger state without opening the details. */
+/**
+ * Show one automation as a compact card: what it is, where it posts, who owns
+ * it, and when it runs. Instructions, timezones, and event conditions stay in
+ * the details drawer.
+ */
 export function AutomationRow(props: {
   deleting: boolean;
   onDelete(): void;
@@ -47,6 +33,7 @@ export function AutomationRow(props: {
 }) {
   const { automation } = props;
   const location = useLocation();
+  const status = automationStatus(automation);
   const creator = (
     <>
       <ActorAvatar
@@ -58,197 +45,195 @@ export function AutomationRow(props: {
     </>
   );
   return (
-    <article role="listitem">
+    <article
+      className="min-w-0 rounded-lg border border-dashboard-border-subtle bg-dashboard-fill-faint"
+      role="listitem"
+    >
       <SelectableRow
-        className={cn(
-          "relative grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] items-center gap-x-3 gap-y-2 px-4 py-3 xl:gap-x-4",
-          desktopColumns,
-        )}
+        className="flex items-start gap-3 rounded-lg px-4 py-3.5"
         onSelect={props.onSelect}
         selected={props.selected}
       >
-        <button
-          aria-expanded={props.selected}
-          aria-label={`View automation details: ${automation.title}`}
-          className="col-span-2 pr-11 xl:pr-0 min-w-0 cursor-pointer rounded border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus xl:col-span-1"
-          onClick={props.onSelect}
-          type="button"
-        >
-          <span
-            className="block truncate font-display text-base font-medium text-dashboard-text"
-            title={automation.title}
-          >
-            {automation.title}
-          </span>
-          <span
-            className="mt-1 block truncate text-xs text-dashboard-text-muted"
-            title={automation.instruction}
+        <div className="min-w-0 flex-1">
+          <button
+            aria-expanded={props.selected}
+            aria-label={`View automation details: ${automation.title}`}
+            className="block w-full min-w-0 cursor-pointer rounded border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+            onClick={props.onSelect}
+            type="button"
           >
-            {automation.instruction}
-          </span>
-        </button>
-        <div className="row-start-2 min-w-0 xl:row-auto">
-          {automation.createdByEmail ? (
-            <Link
-              className="inline-flex max-w-full items-center gap-2 rounded text-sm text-dashboard-text no-underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
-              title={automation.createdBy}
-              to={peoplePath(automation.createdByEmail)}
-            >
-              {creator}
-            </Link>
-          ) : (
-            <span
-              className="inline-flex max-w-full items-center gap-2 text-sm text-dashboard-text"
-              title={automation.createdBy}
-            >
-              {creator}
+            <span className="flex min-w-0 items-center gap-2">
+              <span
+                className="truncate font-display text-base font-medium text-dashboard-text"
+                title={automation.title}
+              >
+                {automation.title}
+              </span>
+              {status ? (
+                <StatusChip
+                  className="shrink-0"
+                  size="compact"
+                  tone={
+                    status === "completed" || status === "paused"
+                      ? "neutral"
+                      : "warning"
+                  }
+                >
+                  {status}
+                </StatusChip>
+              ) : null}
             </span>
-          )}
-        </div>
-        <div className="col-span-2 row-start-3 min-w-0 xl:col-span-1 xl:row-auto">
-          <AutomationTrigger automation={automation} />
-        </div>
-        <div className="col-start-2 row-start-2 min-w-0 text-right xl:col-auto xl:row-auto xl:text-left">
-          <span className="inline-flex max-w-full items-center gap-1 text-xs text-dashboard-text-muted xl:text-sm xl:text-dashboard-text">
-            {automation.destination.visibility === "private" ? (
-              <LockKeyhole
-                aria-label="Private destination"
-                role="img"
-                size={12}
-                className="shrink-0"
-              />
-            ) : null}
-            <span className="truncate">{automation.destination.label}</span>
-          </span>
-        </div>
-        <div className="col-span-2 min-w-0 xl:col-span-1">
-          <span className="text-xs text-dashboard-text-muted xl:hidden">
-            Last run{" "}
-          </span>
-          <span
-            className="text-xs text-dashboard-text-muted xl:text-sm xl:text-dashboard-text"
-            title={
-              automation.lastRunAt
-                ? formatTime(automation.lastRunAt, {
-                    dateStyle: "medium",
-                    timeStyle: "short",
-                  })
-                : undefined
-            }
-          >
-            {automation.lastRunAt
-              ? formatRelativeTime(automation.lastRunAt)
-              : "Never"}
-          </span>
-          {automation.lastRunStatus === "failed" ||
-          automation.lastRunStatus === "blocked" ? (
-            <Link
-              className="block text-xs text-amber-300 underline"
-              to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
-            >
-              Last run {automation.lastRunStatus}
-            </Link>
-          ) : null}
+            <AutomationSummaryLine automation={automation} />
+          </button>
+          <div className="mt-2.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-dashboard-text-muted">
+            {automation.createdByEmail ? (
+              <Link
+                className="inline-flex min-w-0 max-w-full items-center gap-2 rounded text-dashboard-text no-underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+                title={automation.createdBy}
+                to={peoplePath(automation.createdByEmail)}
+              >
+                {creator}
+              </Link>
+            ) : (
+              <span
+                className="inline-flex min-w-0 max-w-full items-center gap-2 text-dashboard-text"
+                title={automation.createdBy}
+              >
+                {creator}
+              </span>
+            )}
+            <AutomationTiming automation={automation} />
+          </div>
         </div>
-        <div className="absolute right-3 top-3 xl:static">
-          {automation.ownedByViewer ? (
+        {automation.ownedByViewer ? (
+          <div className="-mr-2 -mt-1.5 shrink-0">
             <AutomationActions
               editPath={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/edit${location.search}`}
               deleting={props.deleting}
               onDelete={props.onDelete}
               title={automation.title}
             />
-          ) : null}
-        </div>
+          </div>
+        ) : null}
       </SelectableRow>
     </article>
   );
 }
 
-function AutomationTrigger({ automation }: { automation: AutomationSummary }) {
+/** Return the one state worth flagging in the list, if the automation is not simply active. */
+function automationStatus(automation: AutomationSummary): string | undefined {
+  if (automation.kind === "scheduled") {
+    return automation.status === "active" ? undefined : automation.status;
+  }
+  if (automation.status === "paused") return "paused";
+  return automation.triggerAvailable ? undefined : "Trigger unavailable";
+}
+
+/** Combine the trigger and Destination into one muted line under the title. */
+function AutomationSummaryLine({
+  automation,
+}: {
+  automation: AutomationSummary;
+}) {
   const scheduled = automation.kind === "scheduled";
   const Icon = scheduled ? CalendarClock : Zap;
-  let summary: string;
-  let detail: string;
-  let status: string | undefined;
-  let conditions: string | undefined;
-
-  if (automation.kind === "scheduled") {
-    summary = automation.schedule.includes(automation.timezone)
+  const trigger =
+    automation.kind === "scheduled"
       ? automation.schedule
-      : `${automation.schedule} (${automation.timezone})`;
-    status = automation.status === "active" ? undefined : automation.status;
-    detail = "No next run";
-    if (automation.status === "blocked") {
-      detail = "Future runs are blocked";
-    } else if (automation.status === "paused") {
-      detail = "Future triggers will not start work";
-    } else if (automation.status === "active" && automation.nextRunAt) {
-      const nextRun = new Date(automation.nextRunAt).toLocaleString(undefined, {
-        month: "short",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-        timeZone: automation.timezone,
-        timeZoneName: "short",
-      });
-      detail = `Next ${nextRun}`;
-    }
-  } else {
-    summary = automation.resource;
-    detail = automation.events
-      .map((event) => event.replaceAll(/[._]/g, " "))
-      .join(", ");
-    status =
-      automation.status === "paused"
-        ? "paused"
-        : automation.triggerAvailable
-          ? undefined
-          : "Trigger unavailable";
-    conditions = Object.entries(automation.match ?? {})
-      .map(
-        ([field, value]) =>
-          `${field}: ${Array.isArray(value) ? value.join(" or ") : String(value)}`,
-      )
-      .join(" · ");
-  }
+      : `${automation.resource} · ${automationEventNames(automation)}`;
+  const conditions =
+    automation.kind === "event" ? automationEventConditions(automation) : "";
+  const triggerDetail =
+    automation.kind === "scheduled"
+      ? automationScheduleLabel(automation)
+      : conditions
+        ? `${trigger} · ${conditions}`
+        : trigger;
   return (
-    <div className="flex items-start gap-2">
+    <span className="mt-1 flex min-w-0 items-center gap-1.5 text-xs text-dashboard-text-muted">
       <Icon
         aria-label={
           scheduled
             ? "Scheduled automation"
             : `${automation.source} event automation`
         }
-        className="mt-0.5 shrink-0 text-dashboard-text-muted"
+        className="shrink-0"
         role="img"
-        size={16}
+        size={13}
       />
-      <div className="min-w-0">
-        <div className="break-words text-sm text-dashboard-text">{summary}</div>
-        <div className="mt-1 break-words text-xs text-dashboard-text-muted">
-          {detail}
-        </div>
-        {conditions ? (
-          <div className="mt-1 break-words text-xs text-dashboard-text-muted">
-            {conditions}
-          </div>
-        ) : null}
-        {status ? (
-          <StatusChip
-            className="mt-1 xl:mt-2"
-            size="compact"
-            tone={
-              status === "completed" || status === "paused"
-                ? "neutral"
-                : "warning"
-            }
+      <span className="min-w-0 truncate" title={triggerDetail}>
+        {trigger}
+      </span>
+      <span aria-hidden="true" className="shrink-0 opacity-45">
+        ·
+      </span>
+      {automation.destination.visibility === "private" ? (
+        <LockKeyhole
+          aria-label="Private destination"
+          className="shrink-0"
+          role="img"
+          size={12}
+        />
+      ) : null}
+      <span
+        className="min-w-0 max-w-[45%] truncate"
+        title={automation.destination.label}
+      >
+        {automation.destination.label}
+      </span>
+    </span>
+  );
+}
+
+/** Show next and last run as short relative times after the creator. */
+function AutomationTiming({ automation }: { automation: AutomationSummary }) {
+  const nextRunAt =
+    automation.kind === "scheduled" && automation.status === "active"
+      ? automation.nextRunAt
+      : undefined;
+  const lastRunTitle = automation.lastRunAt
+    ? formatAutomationRunTime(automation.lastRunAt)
+    : undefined;
+  const lastRunFailed =
+    automation.lastRunStatus === "failed" ||
+    automation.lastRunStatus === "blocked";
+  return (
+    <>
+      {nextRunAt ? (
+        <MetaItem title={formatAutomationRunTime(nextRunAt)}>
+          Next run {formatRelativeTime(nextRunAt)}
+        </MetaItem>
+      ) : null}
+      <MetaItem title={lastRunTitle}>
+        {lastRunFailed ? (
+          <Link
+            className="text-amber-300 underline"
+            to={`/automations/${automation.kind}/${encodeURIComponent(automation.id)}/executions`}
           >
-            {status}
-          </StatusChip>
-        ) : null}
-      </div>
-    </div>
+            Last run {automation.lastRunStatus}
+            {automation.lastRunAt
+              ? ` ${formatRelativeTime(automation.lastRunAt)}`
+              : null}
+          </Link>
+        ) : automation.lastRunAt ? (
+          `Last run ${formatRelativeTime(automation.lastRunAt)}`
+        ) : (
+          "Never run"
+        )}
+      </MetaItem>
+    </>
+  );
+}
+
+/** Keep each separator with the item after it so wrapped lines never end in a dot. */
+function MetaItem(props: { children: ReactNode; title?: string }) {
+  return (
+    <span className="whitespace-nowrap" title={props.title}>
+      <span aria-hidden="true" className="mr-2 opacity-45">
+        ·
+      </span>
+      {props.children}
+    </span>
   );
 }
 

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

@@ -13,7 +13,7 @@ import {
 import { Globe2, ListChecks, LockKeyhole, UserRound } from "lucide-react";
 import { useAutomationsData, useAutomationData } from "../../api";
 import { Button } from "../../components/Button";
-import { AutomationFilters } from "./AutomationFilters";
+import { AutomationFilters, AutomationSort } from "./AutomationFilters";
 import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
 import { pageCount, PagePagination } from "../../components/Pagination";
@@ -32,7 +32,7 @@ import {
   useDebouncedSearchParam,
   useSearchParamEnum,
 } from "../../searchParams";
-import { AutomationRow, AutomationListHeader } from "./AutomationRow";
+import { AutomationRow } from "./AutomationRow";
 import { AutomationCostChart } from "./AutomationCostChart";
 import { AutomationDetailsDrawer } from "./AutomationDetailsDrawer";
 import { AutomationExecutionChart } from "./AutomationExecutionChart";
@@ -274,16 +274,20 @@ export function AutomationsPage(props: {
       ) : null}
       {query.data && props.view === "list" ? (
         <>
-          <div className="flex flex-wrap items-baseline justify-between gap-x-5 gap-y-1">
+          <div className="flex flex-wrap items-center justify-between gap-x-5 gap-y-2">
             <p className="m-0 text-xs text-dashboard-text-muted">
               {visibleTaskCount}{" "}
               {visibleTaskCount === 1 ? "automation" : "automations"}
-            </p>
-            <p className="m-0 text-xs text-dashboard-text-muted">
               {query.isFetching ? (
-                <span role="status">Updating results…</span>
+                <span className="ml-3" role="status">
+                  Updating results…
+                </span>
               ) : null}
             </p>
+            <AutomationSort
+              value={filters.sort}
+              onChange={(value) => setFilter("sort", value)}
+            />
           </div>
           {!query.error && visibleTaskCount === 0 ? (
             <Card padding="md">
@@ -292,44 +296,38 @@ export function AutomationsPage(props: {
               </p>
             </Card>
           ) : (
-            <Card className="overflow-visible">
-              <AutomationListHeader />
-              <div
-                className="divide-y divide-dashboard-border-subtle"
-                role="list"
-              >
-                {automations.map((automation) => {
-                  const key = `${automation.kind}:${automation.id}`;
-                  return (
-                    <AutomationRow
-                      deleting={
-                        deletion.isPending &&
-                        deletion.variables?.id === automation.id
-                      }
-                      key={key}
-                      onDelete={() => {
-                        if (
-                          window.confirm(
-                            `Delete this ${automation.kind} automation?`,
-                          )
-                        ) {
-                          deletion.mutate(automation);
-                        }
-                      }}
-                      onSelect={() =>
-                        navigate(
-                          automationId === automation.id
-                            ? tasksPath(listPath)
-                            : selectedTaskPath(automation.id),
+            <div className="grid grid-cols-[minmax(0,1fr)] gap-2" role="list">
+              {automations.map((automation) => {
+                const key = `${automation.kind}:${automation.id}`;
+                return (
+                  <AutomationRow
+                    deleting={
+                      deletion.isPending &&
+                      deletion.variables?.id === automation.id
+                    }
+                    key={key}
+                    onDelete={() => {
+                      if (
+                        window.confirm(
+                          `Delete this ${automation.kind} automation?`,
                         )
+                      ) {
+                        deletion.mutate(automation);
                       }
-                      selected={automationId === automation.id}
-                      automation={automation}
-                    />
-                  );
-                })}
-              </div>
-            </Card>
+                    }}
+                    onSelect={() =>
+                      navigate(
+                        automationId === automation.id
+                          ? tasksPath(listPath)
+                          : selectedTaskPath(automation.id),
+                      )
+                    }
+                    selected={automationId === automation.id}
+                    automation={automation}
+                  />
+                );
+              })}
+            </div>
           )}
           <PagePagination
             onPageChange={setPage}

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

@@ -27,22 +27,23 @@ const taskNavigationItems = [
 ];
 
 /** Keep Automation navigation consistent across lists, details, and editing. */
-export function AutomationsNavigation() {
+export function AutomationsNavigation(props: { children: ReactNode }) {
   return (
     <SecondaryNavigation
       ariaLabel="Automations navigation"
       items={taskNavigationItems}
-    />
+    >
+      {props.children}
+    </SecondaryNavigation>
   );
 }
 
 /** Place the shared secondary navigation above one Automations page. */
 export function AutomationsPageLayout(props: { children: ReactNode }) {
   return (
-    <>
-      <AutomationsNavigation />
+    <AutomationsNavigation>
       <PageLayout>{props.children}</PageLayout>
-    </>
+    </AutomationsNavigation>
   );
 }
 

package/src/client/pages/automations/automationFormat.ts

@@ -0,0 +1,43 @@
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import { formatTime } from "../../format";
+
+type ScheduledAutomation = Extract<AutomationSummary, { kind: "scheduled" }>;
+type EventAutomation = Extract<AutomationSummary, { kind: "event" }>;
+
+/** Show the schedule with its timezone unless the schedule text already names it. */
+export function automationScheduleLabel(
+  automation: ScheduledAutomation,
+): string {
+  return automation.schedule.includes(automation.timezone)
+    ? automation.schedule
+    : `${automation.schedule} (${automation.timezone})`;
+}
+
+/** Name event triggers in readable words. */
+export function automationEventNames(automation: EventAutomation): string {
+  return automation.events
+    .map((event) => event.replaceAll(/[._]/g, " "))
+    .join(", ");
+}
+
+/** Summarize event match conditions as one readable line. */
+export function automationEventConditions(automation: EventAutomation): string {
+  return Object.entries(automation.match ?? {})
+    .map(
+      ([field, value]) =>
+        `${field}: ${Array.isArray(value) ? value.join(" or ") : String(value)}`,
+    )
+    .join(" · ");
+}
+
+/** Format a run time with date, time, and zone for details and tooltips. */
+export function formatAutomationRunTime(value: string): string {
+  return formatTime(value, {
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    month: "short",
+    timeZoneName: "short",
+    year: "numeric",
+  });
+}

package/src/client/pages/code/CodeChangeRow.tsx

@@ -0,0 +1,41 @@
+import type { CodeChangeSummaryReport } from "@sentry/junior/api/schema";
+
+import { StatusChip } from "../../components/StatusChip";
+
+function stateTone(state: CodeChangeSummaryReport["state"]) {
+  if (state === "merged") return "success" as const;
+  if (state === "open") return "info" as const;
+  return "neutral" as const;
+}
+
+/** Show one code change with its title, repository reference, and state. */
+export function CodeChangeRow(props: { change: CodeChangeSummaryReport }) {
+  const change = props.change;
+  const title = change.title ?? `${change.repository} #${change.number}`;
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-4 border-b border-dashboard-border-subtle px-4 py-3 last:border-b-0">
+      <div className="min-w-0">
+        <div className="truncate font-display text-sm text-dashboard-text">
+          {change.url ? (
+            <a
+              className="text-inherit no-underline hover:text-cyan-100"
+              href={change.url}
+              rel="noreferrer"
+              target="_blank"
+            >
+              {title}
+            </a>
+          ) : (
+            title
+          )}
+        </div>
+        <div className="mt-1 truncate font-mono text-xs text-dashboard-text-muted">
+          {change.repository} #{change.number}
+        </div>
+      </div>
+      <StatusChip size="compact" tone={stateTone(change.state)}>
+        {change.state}
+      </StatusChip>
+    </div>
+  );
+}