@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -10,8 +10,13 @@ import {
   X,
 } from "lucide-react";
 
-import { Button, ToggleButton } from "../components/Button";
-import { IconButtonTooltip } from "../components/Tooltip";
+import { Button } from "../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
+import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group";
 import { cn } from "../styles";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import { ShareConversationButton } from "./ShareConversationButton";
@@ -43,17 +48,19 @@ export function ConversationHeaderActions(props: {
   if (layout === "menu") {
     return (
       <div className="grid gap-0.5">
-        <MenuActionButton
-          label={props.searchOpen ? "Hide search" : "Search transcript"}
-          onClick={props.onSearchClick}
-          pressed={props.searchOpen}
-        >
-          {props.searchOpen ? (
-            <X aria-hidden="true" size={16} strokeWidth={2} />
-          ) : (
-            <Search aria-hidden="true" size={16} strokeWidth={2} />
-          )}
-        </MenuActionButton>
+        {props.view === "rich" ? (
+          <MenuActionButton
+            label={props.searchOpen ? "Hide search" : "Search transcript"}
+            onClick={props.onSearchClick}
+            pressed={props.searchOpen}
+          >
+            {props.searchOpen ? (
+              <X aria-hidden="true" size={16} strokeWidth={2} />
+            ) : (
+              <Search aria-hidden="true" size={16} strokeWidth={2} />
+            )}
+          </MenuActionButton>
+        ) : null}
         <MenuActionButton
           label="Conversation"
           onClick={() => props.onViewChange("rich")}
@@ -88,10 +95,12 @@ export function ConversationHeaderActions(props: {
 
   return (
     <div className="flex shrink-0 items-center gap-0.5">
-      <TranscriptSearchToggle
-        onClick={props.onSearchClick}
-        open={props.searchOpen}
-      />
+      {props.view === "rich" ? (
+        <TranscriptSearchToggle
+          onClick={props.onSearchClick}
+          open={props.searchOpen}
+        />
+      ) : null}
       {props.copyAction}
       <ArchiveConversationButton {...props.archive} layout="bar" />
       <Button
@@ -115,67 +124,55 @@ export function TranscriptViewToggle(props: {
   value: TranscriptViewMode;
 }) {
   return (
-    <div
+    <ToggleGroup
       aria-label="Transcript view"
       className={
         props.labelled
-          ? "inline-flex items-center gap-6"
-          : "inline-flex items-center gap-0.5 rounded-md border border-dashboard-border bg-dashboard-overlay-soft p-0.5"
+          ? "inline-flex gap-6"
+          : "inline-flex gap-0.5 rounded-md border border-dashboard-border bg-dashboard-overlay-soft p-0.5"
       }
-      role="group"
+      onValueChange={([next]) => {
+        if (next) props.onChange(next);
+      }}
+      value={[props.value]}
     >
-      <ViewModeButton
-        active={props.value === "rich"}
-        label="Conversation"
-        labelled={props.labelled}
-        onClick={() => props.onChange("rich")}
-      >
+      <ViewModeItem label="Conversation" labelled={props.labelled} value="rich">
         <MessagesSquare aria-hidden="true" size={14} strokeWidth={2} />
-      </ViewModeButton>
-      <ViewModeButton
-        active={props.value === "raw"}
-        label="Event log"
-        labelled={props.labelled}
-        onClick={() => props.onChange("raw")}
-      >
+      </ViewModeItem>
+      <ViewModeItem label="Event log" labelled={props.labelled} value="raw">
         <ScrollText aria-hidden="true" size={14} strokeWidth={2} />
-      </ViewModeButton>
-    </div>
+      </ViewModeItem>
+    </ToggleGroup>
   );
 }
 
-function ViewModeButton(props: {
-  active: boolean;
+function ViewModeItem(props: {
   children: ReactNode;
   label: string;
   labelled?: boolean;
-  onClick(): void;
+  value: TranscriptViewMode;
 }) {
-  const button = (
-    <ToggleButton
+  const item = (
+    <ToggleGroupItem
       aria-label={props.label}
-      className={cn(
-        "!no-underline",
+      className={
         props.labelled
-          ? "relative flex h-11 items-center gap-2 rounded-none px-0 py-0 text-sm after:absolute after:inset-x-0 after:bottom-0 after:h-0.5"
-          : "grid size-7 place-items-center rounded-md px-0 py-0",
-        props.active &&
-          (props.labelled
-            ? "text-dashboard-text after:bg-dashboard-text-solid"
-            : "bg-dashboard-fill-hover text-dashboard-text"),
-      )}
-      onClick={props.onClick}
-      pressed={props.active}
-      variant="text"
+          ? "relative h-11 min-w-0 gap-2 rounded-none border-0 px-0 text-sm hover:bg-transparent after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-pressed:border-0 data-pressed:bg-transparent data-pressed:after:bg-dashboard-text-solid"
+          : "size-7 min-w-0 border-0 px-0 data-pressed:border-0 data-pressed:bg-dashboard-fill-hover"
+      }
+      value={props.value}
     >
       {props.children}
       {props.labelled ? props.label : null}
-    </ToggleButton>
+    </ToggleGroupItem>
   );
   return props.labelled ? (
-    button
+    item
   ) : (
-    <IconButtonTooltip label={props.label}>{button}</IconButtonTooltip>
+    <Tooltip>
+      <TooltipTrigger render={item} />
+      <TooltipContent size="compact">{props.label}</TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -188,21 +185,26 @@ export function HeaderIconButton(props: {
   pressed?: boolean;
 }) {
   return (
-    <IconButtonTooltip label={props.label}>
-      <Button
-        ref={props.ref}
-        aria-label={props.label}
-        aria-pressed={props.pressed}
-        className={cn(
-          "text-dashboard-text-muted",
-          props.pressed && "bg-dashboard-fill-strong text-dashboard-text",
-        )}
-        onClick={props.onClick}
-        size="icon"
-      >
-        {props.children}
-      </Button>
-    </IconButtonTooltip>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            ref={props.ref}
+            aria-label={props.label}
+            aria-pressed={props.pressed}
+            className={cn(
+              "text-dashboard-text-muted",
+              props.pressed && "bg-dashboard-fill-strong text-dashboard-text",
+            )}
+            onClick={props.onClick}
+            size="icon"
+          >
+            {props.children}
+          </Button>
+        }
+      />
+      <TooltipContent size="compact">{props.label}</TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -233,19 +235,16 @@ function MenuActionButton(props: {
   pressed?: boolean;
 }) {
   return (
-    <button
+    <Button
       aria-label={props.label}
       aria-pressed={props.pressed}
-      className={cn(
-        "flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none",
-        props.pressed && "bg-dashboard-fill-strong",
-      )}
+      className={props.pressed ? "bg-dashboard-fill-strong" : undefined}
       onClick={props.onClick}
-      type="button"
+      size="menu"
     >
       {props.children}
       <span>{props.label}</span>
-    </button>
+    </Button>
   );
 }
 
@@ -260,29 +259,34 @@ function ArchiveConversationButton(
   const Icon = props.archived ? ArchiveRestore : Archive;
   if (props.layout === "menu") {
     return (
-      <button
+      <Button
         aria-label={label}
-        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         disabled={props.disabled}
         onClick={props.onClick}
-        type="button"
+        size="menu"
       >
         <Icon aria-hidden="true" size={16} strokeWidth={2} />
         <span>{label}</span>
-      </button>
+      </Button>
     );
   }
   return (
-    <IconButtonTooltip label={label}>
-      <Button
-        aria-label={label}
-        className="hidden shrink-0 text-dashboard-text-muted md:grid"
-        disabled={props.disabled}
-        onClick={props.onClick}
-        size="icon"
-      >
-        <Icon aria-hidden="true" size={15} strokeWidth={2} />
-      </Button>
-    </IconButtonTooltip>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            focusableWhenDisabled
+            aria-label={label}
+            className="hidden shrink-0 text-dashboard-text-muted md:grid"
+            disabled={props.disabled}
+            onClick={props.onClick}
+            size="icon"
+          >
+            <Icon aria-hidden="true" size={15} strokeWidth={2} />
+          </Button>
+        }
+      />
+      <TooltipContent size="compact">{label}</TooltipContent>
+    </Tooltip>
   );
 }

package/src/client/conversations/ConversationHomeList.tsx

@@ -9,7 +9,7 @@ import {
   visualStatusForConversation,
 } from "../format";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
-import { Skeleton } from "../components/Skeleton";
+import { Skeleton } from "../components/ui/skeleton";
 import {
   conversationParticipants,
   ParticipantAvatarStack,

package/src/client/conversations/ConversationLinkedWork.tsx

@@ -0,0 +1,118 @@
+import type { ObjectType } from "@sentry/junior-plugin-api";
+import type { ConversationDetailReport } from "@sentry/junior/api/schema";
+
+import { ObjectIcon } from "../components/ObjectIcon";
+import { DetailsList, DetailsRow, DetailsRowLine } from "./DetailsList";
+
+type ConversationAnnotation = NonNullable<
+  ConversationDetailReport["annotations"]
+>[number];
+
+/** One annotation that links to work outside Junior. */
+export type ConversationLink = {
+  description?: string;
+  facts?: { type: string };
+  key: string;
+  label: string;
+  objectType: ObjectType;
+  plugin: string;
+  status?: string;
+  url: string;
+};
+
+const resourceLinkStatusLabels: Record<string, string> = {
+  closed: "Closed",
+  draft: "Draft",
+  merged: "Merged",
+  open: "Open",
+  warning: "Needs attention",
+};
+
+/** Name a link status for a reader, such as "Merged" for `merged`. */
+export function linkStatusLabel(status: string | undefined): string {
+  if (!status) return "";
+  return (
+    resourceLinkStatusLabels[status] ??
+    status.charAt(0).toUpperCase() + status.slice(1)
+  );
+}
+
+/**
+ * Pick the annotations that link to outside work, newest first as saved. A
+ * resource link without an object type takes the type of its sidebar
+ * annotation.
+ */
+export function conversationLinks(
+  detail: ConversationDetailReport | undefined,
+): ConversationLink[] {
+  return (detail?.annotations ?? []).flatMap(
+    (annotation: ConversationAnnotation): ConversationLink[] => {
+      if (!annotation.url) return [];
+      const objectType =
+        annotation.objectType ??
+        detail?.sidebarAnnotations?.find(
+          (sidebar) => sidebar.key === annotation.key,
+        )?.objectType ??
+        "item";
+      const description =
+        annotation.kind === "object"
+          ? annotation.title !== annotation.label
+            ? annotation.title
+            : annotation.description
+          : annotation.description;
+      return [
+        {
+          ...(description ? { description } : undefined),
+          ...(annotation.kind === "object" && annotation.facts
+            ? { facts: annotation.facts }
+            : undefined),
+          key: `${annotation.plugin}:${annotation.key}`,
+          label: annotation.label,
+          objectType,
+          plugin: annotation.plugin,
+          ...(annotation.status ? { status: annotation.status } : undefined),
+          url: annotation.url,
+        },
+      ];
+    },
+  );
+}
+
+/** Show the outside work that a Conversation links to, one row each. */
+export function ConversationLinkedWork(props: { links: ConversationLink[] }) {
+  return (
+    <DetailsList
+      itemKey={(link) => link.key}
+      items={props.links}
+      renderItem={(link) => {
+        const status = linkStatusLabel(link.status);
+        return (
+          <DetailsRow
+            href={link.url}
+            icon={
+              // The row text names the status, so the icon stays silent.
+              <ObjectIcon
+                decorative
+                facts={link.facts}
+                objectType={link.objectType}
+                size={14}
+                status={link.status}
+              />
+            }
+            meta={status}
+            title={link.label}
+            tooltip={[link.label, link.plugin, status, link.description]
+              .filter(Boolean)
+              .join(" · ")}
+          >
+            {link.description ? (
+              <DetailsRowLine className="line-clamp-2 break-words">
+                {link.description}
+              </DetailsRowLine>
+            ) : null}
+          </DetailsRow>
+        );
+      }}
+    />
+  );
+}

package/src/client/conversations/ConversationMeta.tsx

@@ -24,7 +24,12 @@ import {
   summarizeUsage,
   automationPath,
 } from "../format";
-import { Tooltip } from "../components/Tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTitle,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { MetricList, type MetricListItem } from "../components/Metric";
 import { cn, dashboardInlineLinkClass } from "../styles";
 import {
@@ -39,6 +44,7 @@ import {
   type SidebarAnnotation,
   type SidebarAnnotationBadgeGroup,
 } from "./sidebarAnnotationBadges";
+import { conversationLinks, linkStatusLabel } from "./ConversationLinkedWork";
 
 const MOBILE_MEDIA_QUERY = "(max-width: 767px)";
 
@@ -100,13 +106,6 @@ export function ConversationPrivacyChip(props: {
   );
 }
 
-type ResourceLinkStatus = NonNullable<
-  Extract<
-    NonNullable<ConversationDetailReport["annotations"]>[number],
-    { kind: "resource_link" }
-  >["status"]
->;
-
 /** True when the conversation has at least one resource-link annotation. */
 export function hasConversationAnnotations(
   annotations: ConversationDetailReport["annotations"] | undefined,
@@ -136,9 +135,36 @@ export function ConversationSidebarAnnotations(props: {
     : [];
 
   return (
-    <Tooltip
-      align="left"
-      content={
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            aria-label={`Linked work, newest first: ${details.join(", ")}`}
+            className="inline-flex min-w-0 max-w-full items-center"
+          >
+            {useMobileFacepile ? (
+              <SidebarAnnotationIconFacepile
+                annotations={mobileFacepileAnnotations}
+                // Discs sit on the sidebar panel / row surface.
+                cutoutColor="var(--color-dashboard-surface-panel)"
+              />
+            ) : (
+              <span className="inline-flex min-w-0 items-center gap-1">
+                {badges.labeledGroups.map((group) => (
+                  <SidebarAnnotationGroupChip group={group} key={group.label} />
+                ))}
+                {badges.overflowGroupCount > 0 ? (
+                  <span className="inline-flex h-5 min-w-7 shrink-0 items-center justify-center rounded-full border border-dashboard-border-strong bg-dashboard-control px-1.5 font-sans text-2xs tabular-nums leading-none text-dashboard-text-muted">
+                    +{badges.overflowGroupCount}
+                  </span>
+                ) : null}
+              </span>
+            )}
+          </span>
+        }
+      />
+      <TooltipContent align="start">
+        <TooltipTitle>Linked work</TooltipTitle>
         <ul className="m-0 list-none space-y-1 p-0">
           {annotations.map((annotation, index) => (
             <li
@@ -158,33 +184,7 @@ export function ConversationSidebarAnnotations(props: {
             </li>
           ))}
         </ul>
-      }
-      label="Linked work"
-      triggerClassName="min-w-0"
-    >
-      <span
-        aria-label={`Linked work, newest first: ${details.join(", ")}`}
-        className="inline-flex min-w-0 max-w-full items-center"
-      >
-        {useMobileFacepile ? (
-          <SidebarAnnotationIconFacepile
-            annotations={mobileFacepileAnnotations}
-            // Discs sit on the sidebar panel / row surface.
-            cutoutColor="var(--color-dashboard-surface-panel)"
-          />
-        ) : (
-          <span className="inline-flex min-w-0 items-center gap-1">
-            {badges.labeledGroups.map((group) => (
-              <SidebarAnnotationGroupChip group={group} key={group.label} />
-            ))}
-            {badges.overflowGroupCount > 0 ? (
-              <span className="inline-flex h-5 min-w-7 shrink-0 items-center justify-center rounded-full border border-dashboard-border-strong bg-dashboard-control px-1.5 font-sans text-2xs tabular-nums leading-none text-dashboard-text-muted">
-                +{badges.overflowGroupCount}
-              </span>
-            ) : null}
-          </span>
-        )}
-      </span>
+      </TooltipContent>
     </Tooltip>
   );
 }
@@ -412,48 +412,35 @@ function SidebarAnnotationIcon(props: {
   );
 }
 
-/** Render resource-link annotations under the conversation title. */
+/** Render linked work as a compact strip under the conversation title. */
 export function ConversationAnnotations(props: {
   detail: ConversationDetailReport | undefined;
-  layout?: "list" | "strip";
 }) {
-  const links =
-    props.detail?.annotations?.filter(
-      (annotation) => annotation.url !== null,
-    ) ?? [];
+  const links = conversationLinks(props.detail);
   if (links.length === 0) return null;
   return (
-    <div
-      className={cn(
-        "flex gap-x-4 gap-y-2",
-        props.layout === "strip" ? "overflow-x-auto" : "flex-col",
-      )}
-    >
+    <div className="flex gap-x-4 gap-y-2 overflow-x-auto">
       {links.map((link) => (
         <a
-          className={cn(
-            "inline-flex min-w-0 max-w-full shrink-0 items-center gap-2 rounded-md font-sans leading-snug text-dashboard-text no-underline transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
-            props.layout === "strip"
-              ? "px-1 py-0.5 text-xs hover:text-dashboard-accent-text"
-              : "min-h-10 border border-dashboard-border px-3 py-2 text-sm hover:border-dashboard-border-interactive hover:bg-dashboard-surface-hover",
-          )}
-          href={link.url ?? undefined}
-          key={`${link.plugin}:${link.key}`}
+          className="inline-flex min-w-0 max-w-full shrink-0 items-center gap-2 rounded-md px-1 py-0.5 font-sans text-xs leading-snug text-dashboard-text no-underline transition-colors hover:text-dashboard-accent-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+          href={link.url}
+          key={link.key}
           rel="noreferrer"
           target="_blank"
-          title={link.kind === "object" ? link.title : resourceLinkTitle(link)}
+          title={[
+            link.label,
+            link.plugin,
+            linkStatusLabel(link.status),
+            link.description,
+          ]
+            .filter(Boolean)
+            .join(" · ")}
         >
           <ObjectIcon
-            objectType={
-              link.objectType ??
-              props.detail?.sidebarAnnotations?.find(
-                (annotation) => annotation.key === link.key,
-              )?.objectType ??
-              "item"
-            }
-            status={link.status}
-            facts={link.kind === "object" ? link.facts : undefined}
+            facts={link.facts}
+            objectType={link.objectType}
             size={16}
+            status={link.status}
           />
           <span className="min-w-0 break-words">{link.label}</span>
         </a>
@@ -462,26 +449,6 @@ export function ConversationAnnotations(props: {
   );
 }
 
-function resourceLinkTitle(link: {
-  description?: string;
-  label: string;
-  plugin: string;
-  status?: ResourceLinkStatus;
-}): string {
-  const statusLabel = link.status
-    ? {
-        open: "Open",
-        draft: "Draft",
-        closed: "Closed",
-        merged: "Merged",
-        warning: "Needs attention",
-      }[link.status]
-    : undefined;
-  return [link.label, link.plugin, statusLabel, link.description]
-    .filter(Boolean)
-    .join(" · ");
-}
-
 function LocationLink(props: { label: string; locationUrl?: string }) {
   return props.locationUrl ? (
     <a