@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/conversations/transcriptMentions.tsx

@@ -43,12 +43,17 @@ export function MentionPeopleProvider(props: {
 
 /** Render one line of display text with the people the API resolved for it. */
 export function MentionText(props: {
+  /**
+   * Link people to their page. Set false inside a button, which cannot hold
+   * a link.
+   */
+  links?: boolean;
   mentions: readonly ActorIdentity[];
   text: string;
 }) {
   return (
     <MentionPeopleProvider mentions={props.mentions}>
-      {renderMentionText(props.text, "mention-text")}
+      {renderMentionText(props.text, "mention-text", props.links)}
     </MentionPeopleProvider>
   );
 }
@@ -57,7 +62,11 @@ export function MentionText(props: {
  * Render text with Slack `<@U123>` and `<#C123|name>` tokens as readable
  * mentions. It reads people from the nearest `MentionPeopleProvider`.
  */
-export function renderMentionText(text: string, keyBase: string): ReactNode[] {
+export function renderMentionText(
+  text: string,
+  keyBase: string,
+  links = true,
+): ReactNode[] {
   const nodes: ReactNode[] = [];
   let cursor = 0;
   for (const mention of findMentions(text)) {
@@ -70,7 +79,11 @@ export function renderMentionText(text: string, keyBase: string): ReactNode[] {
       );
     }
     nodes.push(
-      <MentionView key={`${keyBase}-m-${mention.start}`} mention={mention} />,
+      <MentionView
+        key={`${keyBase}-m-${mention.start}`}
+        links={links}
+        mention={mention}
+      />,
     );
     cursor = mention.end;
   }
@@ -95,13 +108,13 @@ function findMentions(text: string): TranscriptMention[] {
   }));
 }
 
-function MentionView(props: { mention: TranscriptMention }) {
+function MentionView(props: { links: boolean; mention: TranscriptMention }) {
   const people = useContext(TranscriptMentionPeople);
   const { id, label, sigil } = props.mention;
   const person = sigil === "@" ? people.get(id) : undefined;
   const name = person?.fullName ?? person?.slackUserName ?? label ?? id;
   const text = <HighlightText text={`${sigil}${name.replace(/^[@#]/, "")}`} />;
-  if (person?.email) {
+  if (props.links && person?.email) {
     return (
       <Link
         // Previews sit in cards that disable pointer events on their text.

package/src/client/format.ts

@@ -791,6 +791,11 @@ export function locationPath(locationId: string): string {
   return `/system/locations/${encodeURIComponent(locationId)}`;
 }
 
+/** Build the Workspace list route that opens one Workspace's details. */
+export function workspacePath(workspaceId: string): string {
+  return `/system/workspaces/${encodeURIComponent(workspaceId)}`;
+}
+
 /** Build the canonical automation detail route for an automation id. */
 export function automationPath(automationId: string): string {
   return `/automations/${encodeURIComponent(automationId)}`;

package/src/client/pages/ConnectionsPage.tsx

@@ -11,7 +11,7 @@ import { del, fetchDashboardJson, post } from "../http";
 import { dashboardContainerClass } from "../styles";
 import { getDashboardAgentName } from "../agentName";
 import { useDocumentTitle } from "../documentTitle";
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
 import { InlineError } from "../components/InlineError";
 import { Card } from "../components/layout/Card";
 
@@ -168,7 +168,7 @@ export function ConnectionsPage() {
                           connectMutation.reset();
                           disconnectMutation.mutate(connection);
                         }}
-                        tone="danger"
+                        variant="danger"
                       >
                         {pendingProvider === connection.provider
                           ? "Disconnecting…"

package/src/client/pages/PersonalTokensPage.tsx

@@ -10,10 +10,10 @@ import { deleteDashboardResource, fetchDashboardJson, post } from "../http";
 import { dashboardContainerClass } from "../styles";
 import { getDashboardAgentName } from "../agentName";
 import { useDocumentTitle } from "../documentTitle";
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
 import { InlineError } from "../components/InlineError";
 import { Card } from "../components/layout/Card";
-import { TextInput } from "../components/TextInput";
 
 const personalTokensQueryKey = ["dashboard", "personal-tokens"] as const;
 
@@ -129,7 +129,7 @@ export function PersonalTokensPage() {
             </div>
           ) : (
             <div className="mt-5 flex gap-2">
-              <TextInput
+              <Input
                 aria-label="Token name"
                 className="min-w-0 flex-1"
                 maxLength={80}
@@ -189,7 +189,7 @@ export function PersonalTokensPage() {
                       revokeTokenMutation.mutate(token);
                     }}
                     size="icon"
-                    tone="danger"
+                    variant="danger"
                     type="button"
                   >
                     <Trash2 size={16} />

package/src/client/pages/SettingsPage.tsx

@@ -5,11 +5,11 @@ import {
   dashboardIdentitySchema,
   type DashboardIdentity,
 } from "../../api/schema";
-import { Button } from "../components/Button";
-import { Field } from "../components/Field";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Field, FieldDescription, FieldLabel } from "../components/ui/field";
 import { InlineError } from "../components/InlineError";
 import { Card } from "../components/layout/Card";
-import { TextInput } from "../components/TextInput";
 import { useDocumentTitle } from "../documentTitle";
 import { patch } from "../http";
 import { dashboardContainerClass } from "../styles";
@@ -64,13 +64,9 @@ export function SettingsPage({ identity }: SettingsPageProps) {
         <form className="mt-6" onSubmit={submit}>
           <Card className="mb-0" padding="md" variant="raised">
             <h2 className="m-0 text-lg font-bold">Profile</h2>
-            <Field
-              className="mt-5"
-              help="Your display name is shown with your conversations and activity."
-              htmlFor="display-name"
-              label="Display name"
-            >
-              <TextInput
+            <Field className="mt-5">
+              <FieldLabel htmlFor="display-name">Display name</FieldLabel>
+              <Input
                 autoComplete="name"
                 id="display-name"
                 maxLength={80}
@@ -82,6 +78,9 @@ export function SettingsPage({ identity }: SettingsPageProps) {
                 }}
                 value={displayName}
               />
+              <FieldDescription id="display-name-help">
+                Your display name is shown with your conversations and activity.
+              </FieldDescription>
             </Field>
             <div className="mt-5 flex items-center gap-3">
               <Button disabled={!canSave} type="submit">

package/src/client/pages/admin/ServiceAccountsSection.tsx

@@ -13,7 +13,7 @@ import {
   type serviceAccountSchema,
 } from "@sentry/junior/api/schema";
 import { getDashboardAgentName } from "../../agentName";
-import { Button } from "../../components/Button";
+import { Button } from "../../components/ui/button";
 import { InlineError } from "../../components/InlineError";
 import { StatusChip } from "../../components/StatusChip";
 import { Card } from "../../components/layout/Card";
@@ -192,7 +192,7 @@ export function ServiceAccountsSection(props: {
                     connectMutation.reset();
                     disconnectMutation.mutate(account);
                   }}
-                  tone="danger"
+                  variant="danger"
                 >
                   Disconnect
                 </Button>

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

@@ -4,21 +4,27 @@ import {
   type TimeRangeDays,
 } from "../../components/controls/TimeRangeSelector";
 import type { AutomationExecutionDay } from "@sentry/junior/api/schema";
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 
 import { Card } from "../../components/layout/Card";
 import { formatCostSummary } from "../../format";
 
-const COST_COLOR = "var(--color-cyan-300)";
+const chartConfig = {
+  costUsd: { color: "var(--color-cyan-300)", label: "Spend" },
+};
+
+function formatSpend(value: number): string {
+  return formatCostSummary({ total: value });
+}
 
 /** Render linked conversation spend for completed automation executions. */
 export function AutomationCostChart(props: {
@@ -28,11 +34,6 @@ export function AutomationCostChart(props: {
 }) {
   const bucketUnit = props.bucketUnit ?? "day";
   const days = props.days;
-  // Cost charts need a wider left gutter for currency tick labels.
-  const layout = createActivityChartLayout(200, { left: 112 });
-  const step =
-    days.length > 0 ? layout.plotWidth / days.length : layout.plotWidth;
-  const barWidth = Math.max(2, Math.min(13, step * 0.68));
   const totals = days.map((day) => day.costUsd);
   const total = totals.reduce((sum, value) => sum + value, 0);
   const maximum = Math.max(0.01, ...totals);
@@ -51,66 +52,44 @@ export function AutomationCostChart(props: {
       </div>
 
       <div className="relative mt-5 overflow-hidden">
-        <ChartSvg
-          aria-label={`Automation execution spend during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
-          className="min-h-40"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-50 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid
-            format={(value) => formatCostSummary({ total: value })}
-            layout={layout}
-            maximum={maximum}
-          />
-          {days.map((day, dayIndex) => {
-            const x = layout.left + dayIndex * step + (step - barWidth) / 2;
-            const value = totals[dayIndex] ?? 0;
-            const height = (value / maximum) * layout.plotHeight;
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={
-                  <ActivityTooltipRows
-                    rows={[["spend", formatCostSummary({ total: value })]]}
-                  />
-                }
-                date={day.date}
-                summary={`${formatCostSummary({ total: value })}`}
-              >
-                <g tabIndex={0}>
-                  <rect
-                    fill={COST_COLOR}
-                    height={height}
-                    opacity={value > 0 ? 0.82 : 0.1}
-                    rx="1"
-                    width={barWidth}
-                    x={x}
-                    y={layout.top + layout.plotHeight - height}
-                  />
-                  <rect
-                    fill="transparent"
-                    height={layout.plotHeight}
-                    width={Math.max(barWidth, 8)}
-                    x={x - (Math.max(barWidth, 8) - barWidth) / 2}
-                    y={layout.top}
-                  />
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            unit={timeRangeBucketAverageUnit(bucketUnit)}
-            average={average}
-            format={(value) => formatCostSummary({ total: value })}
-            layout={layout}
-            maximum={maximum}
-            stroke="var(--color-slate-200)"
-          />
-          <ActivityChartDateLabels
-            dates={days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Automation execution spend during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
+            data={days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis format={formatSpend} maximum={maximum} />
+            <ActivityChartXAxis keys={days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: AutomationExecutionDay) => [
+                    ["spend", formatSpend(day.costUsd)],
+                  ]}
+                />
+              }
+            />
+            <Bar
+              dataKey="costUsd"
+              fill="var(--color-costUsd)"
+              fillOpacity={0.82}
+              isAnimationActive={false}
+              maxBarSize={13}
+              radius={1}
+            />
+            <ActivityChartAverageLine
+              unit={timeRangeBucketAverageUnit(bucketUnit)}
+              average={average}
+              format={formatSpend}
+              stroke="var(--color-slate-200)"
+            />
+          </BarChart>
+        </ChartContainer>
         {!hasCost ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No linked spend in this period.

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

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "../../components/ui/alert-dialog";
+import { FormNotice } from "../../components/FormNotice";
+import { useToastManager } from "../../components/ui/toast";
+import { deleteDashboardResource } from "../../http";
+
+/** Confirm deletion by name and keep a failed request available for retry. */
+export function AutomationDeleteDialog(props: {
+  automation: AutomationSummary;
+  onClose(): void;
+  onDeleted(): void;
+  returnFocus(): HTMLElement | false;
+}) {
+  const [open, setOpen] = useState(true);
+  const queryClient = useQueryClient();
+  const toast = useToastManager();
+  const deletion = useMutation({
+    mutationFn: () =>
+      deleteDashboardResource(
+        `/api/automations/${encodeURIComponent(props.automation.id)}`,
+      ),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["dashboard", "automations"],
+      });
+      props.onDeleted();
+      toast.add({
+        title: "Automation deleted",
+        description: props.automation.title,
+        type: "success",
+      });
+      setOpen(false);
+    },
+  });
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(next, details) => {
+        if (deletion.isPending) details.cancel();
+        else setOpen(next);
+      }}
+      onOpenChangeComplete={(next) => {
+        if (!next) props.onClose();
+      }}
+    >
+      <AlertDialogContent finalFocus={props.returnFocus}>
+        <AlertDialogTitle>Delete automation?</AlertDialogTitle>
+        <AlertDialogDescription>
+          Delete{" "}
+          <strong className="font-medium text-dashboard-text">
+            {props.automation.title}
+          </strong>
+          ? This removes the Automation and stops future triggers. Work already
+          queued or running may finish.
+        </AlertDialogDescription>
+        {deletion.error ? (
+          <FormNotice
+            tone="error"
+            title="The automation could not be deleted. Try again."
+          />
+        ) : null}
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={deletion.isPending}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            variant="danger"
+            disabled={deletion.isPending}
+            onClick={() => deletion.mutate()}
+          >
+            {deletion.isPending ? "Deleting…" : "Delete automation"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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>