@sentry/junior-dashboard 0.264.0 → 0.265.0

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