@sentry/junior-dashboard 0.234.0 → 0.236.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>
   );
 }