@sentry/junior-dashboard 0.265.0 → 0.266.0

package/src/client/components/SearchInput.tsx

@@ -2,6 +2,12 @@ import type { Ref } from "react";
 import { Search, X } from "lucide-react";
 
 import { cn } from "../styles";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "./ui/input-group";
 
 type SearchInputSize = "compact" | "default";
 
@@ -15,23 +21,14 @@ export function SearchInput(props: {
   size?: SearchInputSize;
   value: string;
 }) {
-  const size = props.size ?? "compact";
+  const size = sizeClass[props.size ?? "compact"];
   return (
-    <div className={cn("relative min-w-0", props.className)}>
-      <Search
-        aria-hidden="true"
-        className={cn(
-          "pointer-events-none absolute top-1/2 -translate-y-1/2 text-dashboard-text-muted",
-          searchIconClass[size],
-        )}
-        size={size === "compact" ? 13 : 14}
-        strokeWidth={2.5}
-      />
-      <input
+    <InputGroup className={cn(size.group, props.className)}>
+      <InputGroupInput
         aria-label={props.label}
         className={cn(
-          "w-full rounded-md border border-dashboard-border font-sans text-sm text-dashboard-text outline-none transition-colors placeholder:text-dashboard-text-muted/70 hover:border-dashboard-border-emphasis focus:border-dashboard-focus [&::-webkit-search-cancel-button]:appearance-none",
-          searchInputClass[size],
+          "[&::-webkit-search-cancel-button]:appearance-none",
+          size.input,
         )}
         onChange={(event) => props.onChange(event.currentTarget.value)}
         placeholder={props.placeholder}
@@ -39,40 +36,53 @@ export function SearchInput(props: {
         type="search"
         value={props.value}
       />
-      {props.value ? (
-        <button
+      <InputGroupAddon className={size.icon}>
+        <Search aria-hidden="true" size={size.iconSize} strokeWidth={2.5} />
+      </InputGroupAddon>
+      {/* The clear button keeps its space while hidden, so the field width does not change. */}
+      <InputGroupAddon align="inline-end" className={size.clear}>
+        <InputGroupButton
           aria-label="Clear search"
-          className={cn(
-            "absolute top-1/2 grid size-6 -translate-y-1/2 cursor-pointer place-items-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
-            clearButtonClass[size],
-          )}
+          className={props.value ? undefined : "invisible"}
           onClick={(event) => {
             props.onChange("");
-            // The button unmounts once the value is empty, so keep focus in the search box.
-            event.currentTarget.parentElement?.querySelector("input")?.focus();
+            // The button hides once the value is empty, so keep focus in the search box.
+            event.currentTarget
+              .closest("[data-slot=input-group]")
+              ?.querySelector("input")
+              ?.focus();
           }}
-          type="button"
         >
           <X aria-hidden="true" size={14} strokeWidth={2.5} />
-        </button>
-      ) : null}
-    </div>
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
   );
 }
 
-const searchIconClass: Record<SearchInputSize, string> = {
-  compact: "left-2.5",
-  default: "left-3",
-};
-
-const clearButtonClass: Record<SearchInputSize, string> = {
-  compact: "right-1.5",
-  default: "right-2",
-};
-
-const searchInputClass: Record<SearchInputSize, string> = {
-  compact:
-    "h-9 bg-dashboard-overlay-soft pr-8 pl-8 focus:ring-1 focus:ring-dashboard-focus/25",
-  default:
-    "h-10 bg-dashboard-overlay-soft pr-9 pl-9 focus:ring-1 focus:ring-dashboard-focus/25",
+// Match the icon, text, and clear button offsets of the bordered input.
+const sizeClass: Record<
+  SearchInputSize,
+  {
+    clear: string;
+    group: string;
+    icon: string;
+    iconSize: number;
+    input: string;
+  }
+> = {
+  compact: {
+    clear: "pr-1.25",
+    group: "h-9",
+    icon: "pl-2.25",
+    iconSize: 13,
+    input: "pr-1 pl-2.5",
+  },
+  default: {
+    clear: "pr-1.75",
+    group: "h-10",
+    icon: "pl-2.75",
+    iconSize: 14,
+    input: "pr-1 pl-2.75",
+  },
 };

package/src/client/components/VersionDriftBanner.tsx

@@ -1,24 +1,26 @@
 import { JUNIOR_VERSION } from "@sentry/junior/version";
 
+import { Alert } from "./ui/alert";
+import { Button } from "./ui/button";
+
 /** Prompt the viewer to load the dashboard bundle that matches the server. */
 export function VersionDriftBanner(props: { serverVersion?: string }) {
   if (!dashboardVersionDrift(props.serverVersion)) return null;
 
   return (
-    <div
+    <Alert
       aria-live="polite"
-      className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t border-dashboard-accent/15 bg-dashboard-accent/[0.07] px-3 py-1.5 text-center font-sans text-xs text-dashboard-accent-text/80"
+      className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 rounded-none border-0 border-t border-dashboard-accent/15 bg-dashboard-accent/[0.07] px-3 py-1.5 text-center font-sans text-xs text-dashboard-accent-text/80"
       role="status"
     >
       <span>The dashboard changed. Refresh to load the latest version.</span>
-      <button
-        className="cursor-pointer border-0 bg-transparent p-0 font-sans font-semibold text-dashboard-accent-text underline decoration-dashboard-accent/40 underline-offset-2 hover:text-dashboard-text-solid"
+      <Button
+        className="h-auto border-0 bg-transparent p-0 text-xs font-semibold leading-normal text-dashboard-accent-text underline decoration-dashboard-accent/40 underline-offset-2 hover:bg-transparent hover:text-dashboard-text-solid"
         onClick={() => window.location.reload()}
-        type="button"
       >
         Refresh
-      </button>
-    </div>
+      </Button>
+    </Alert>
   );
 }
 

package/src/client/components/charts/CacheWrites.tsx

@@ -9,6 +9,14 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "../ui/collapsible";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
 import { dashboardDisclosureChevronClass } from "../../styles";
 
 /** Identify the largest cache writes within the page's selected time window. */
@@ -40,50 +48,51 @@ export function CacheWrites(props: {
           Top three by tokens written per {unit}, within the selected time
           window. Large writes alone do not mean a cache problem.
         </p>
-        <div className="overflow-x-auto">
-          <table
-            aria-label="Largest cache writes"
-            className="w-full min-w-80 table-fixed border-collapse font-sans text-xs tabular-nums"
-          >
-            <thead className="text-dashboard-text-muted">
-              <tr>
-                <th scope="col" className="py-2 text-left font-normal">
-                  {props.bucketUnit === "day" ? "Day" : "Starting at"}
-                </th>
-                <th scope="col" className="w-24 py-2 text-right font-normal">
-                  Written
-                </th>
-                <th scope="col" className="w-24 py-2 text-right font-normal">
-                  From cache
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {ranked.map((day) => (
-                <tr
-                  key={day.date}
-                  className="border-t border-dashboard-border-subtle"
+        <Table
+          aria-label="Largest cache writes"
+          className="min-w-80 table-fixed font-sans text-xs tabular-nums"
+        >
+          <TableHeader>
+            <TableRow>
+              <TableHead scope="col" className="px-0 py-2 font-normal">
+                {props.bucketUnit === "day" ? "Day" : "Starting at"}
+              </TableHead>
+              <TableHead
+                scope="col"
+                className="w-24 px-0 py-2 text-right font-normal"
+              >
+                Written
+              </TableHead>
+              <TableHead
+                scope="col"
+                className="w-24 px-0 py-2 text-right font-normal"
+              >
+                From cache
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {ranked.map((day) => (
+              <TableRow key={day.date}>
+                <TableHead
+                  scope="row"
+                  className="px-0 py-2 font-normal whitespace-normal"
                 >
-                  <th
-                    scope="row"
-                    className="py-2 text-left font-normal text-dashboard-text-muted"
-                  >
-                    {formatActivityTooltipDate(day.date)}
-                  </th>
-                  <td className="py-2 text-right text-dashboard-text">
-                    {formatCompactNumber(day.cacheCreationTokens)}
-                  </td>
-                  <td className="py-2 text-right text-dashboard-text">
-                    {formatCacheShare(
-                      day.cachedInputTokens,
-                      cacheInputTotal(day),
-                    )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+                  {formatActivityTooltipDate(day.date)}
+                </TableHead>
+                <TableCell className="px-0 py-2 text-right whitespace-normal">
+                  {formatCompactNumber(day.cacheCreationTokens)}
+                </TableCell>
+                <TableCell className="px-0 py-2 text-right whitespace-normal">
+                  {formatCacheShare(
+                    day.cachedInputTokens,
+                    cacheInputTotal(day),
+                  )}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       </CollapsibleContent>
     </Collapsible>
   );

package/src/client/components/ui/alert.tsx

@@ -0,0 +1,64 @@
+import type { ComponentProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-dashboard-border-strong bg-dashboard-surface-raised text-dashboard-text",
+        destructive:
+          "border-rose-300/25 bg-dashboard-surface-raised text-rose-50 *:data-[slot=alert-description]:text-rose-100/70 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+/** Show a message in a live region. Pass `role="status"` for polite updates. */
+function Alert({
+  className,
+  variant,
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-dashboard-text",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-dashboard-text-muted md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-dashboard-text [&_p:not(:last-child)]:mb-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/client/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { cn } from "@dashboard/lib/utils";
+
+/** Render a round avatar frame. Use `size="sm"` in dense lists. */
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative inline-grid size-7 shrink-0 place-items-center overflow-hidden rounded-full border-2 border-dashboard-bg bg-dashboard-focus shadow-sm select-none data-[size=sm]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Show the avatar image after it loads. */
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("size-full object-cover", className)}
+      {...props}
+    />
+  );
+}
+
+/** Show initials or a count while the image is missing, loading, or broken. */
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "grid size-full place-items-center font-sans text-xs leading-none font-semibold tracking-tight text-dashboard-text-inverse group-data-[size=sm]/avatar:text-2xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/client/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cn } from "@dashboard/lib/utils";
 const commandButtonClass =
   "inline-flex h-9 max-w-full items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium leading-none focus-visible:outline-2 focus-visible:outline-offset-2";
 
-/** Style the dashboard command, primary, danger, and icon button surfaces. Links use it with `className`. */
+/** Style the dashboard command, primary, danger, icon, and menu row button surfaces. Links use it with `className`. */
 const buttonVariants = cva(
   "cursor-pointer font-sans no-underline transition-colors data-disabled:cursor-not-allowed data-disabled:opacity-50",
   {
@@ -18,6 +18,7 @@ const buttonVariants = cva(
       size: {
         default: "",
         icon: "grid size-9 place-items-center rounded-md border-0 bg-transparent p-0 text-dashboard-text-muted focus-visible:outline-2 focus-visible:outline-offset-1 data-disabled:hover:!bg-transparent data-disabled:hover:!text-dashboard-text-muted",
+        menu: "flex w-full 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 hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none data-disabled:hover:bg-transparent",
       },
     },
     compoundVariants: [

package/src/client/components/ui/dialog.tsx

@@ -0,0 +1,66 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "@dashboard/lib/utils";
+
+/** Own the open state and modal focus rules for a dialog. */
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+/** Close the dialog through Base UI dismissal and focus handling. */
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-dashboard-overlay transition-opacity duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Show the dialog above a backdrop, centered in the viewport. */
+function DialogContent({ className, ...props }: DialogPrimitive.Popup.Props) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        data-dashboard-modal=""
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised p-4 text-sm text-dashboard-text shadow-lg outline-none transition-[opacity,scale] duration-180 motion-reduce:transition-none sm:max-w-sm data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-95 data-starting-style:scale-95",
+          className,
+        )}
+        {...props}
+      />
+    </DialogPortal>
+  );
+}
+
+/** Give the dialog its accessible name. */
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "m-0 text-base leading-none font-medium text-dashboard-text",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Dialog, DialogClose, DialogContent, DialogTitle };

package/src/client/components/ui/empty.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps } from "react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Frame an empty state inside a page or list region. */
+function Empty({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "min-w-0 rounded-lg border border-dashboard-border-strong bg-dashboard-bg px-4 py-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Explain why the region is empty and what the user can do next. */
+function EmptyDescription({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-base leading-relaxed text-dashboard-text-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Empty, EmptyDescription };

package/src/client/components/ui/input-group.tsx

@@ -0,0 +1,96 @@
+import type { ComponentProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+import { Button } from "@dashboard/components/ui/button";
+import { Input } from "@dashboard/components/ui/input";
+
+/** Frame one text input with its icons and inline buttons. */
+function InputGroup({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-dashboard-border bg-dashboard-overlay-soft transition-colors outline-none hover:border-dashboard-border-emphasis has-[[data-slot=input-group-control]:focus-visible]:border-dashboard-focus has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-dashboard-focus/25",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-dashboard-text-muted select-none",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-2.5",
+        "inline-end": "order-last pr-1.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+/** Place an icon or button before or after the input. A click on the addon focuses the input. */
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+/** Render a compact icon button inside an input group. */
+function InputGroupButton({
+  className,
+  type = "button",
+  ...props
+}: Omit<ComponentProps<typeof Button>, "size" | "type"> & {
+  type?: "button" | "submit" | "reset";
+}) {
+  return (
+    <Button
+      type={type}
+      size="icon"
+      className={cn("size-6", className)}
+      {...props}
+    />
+  );
+}
+
+/** Render the text input inside an input group. */
+function InputGroupInput({
+  className,
+  ...props
+}: ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "h-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-2 focus:ring-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput };

package/src/client/components/ui/pagination.tsx

@@ -0,0 +1,60 @@
+import type { ComponentProps } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "@dashboard/lib/utils";
+
+import { Button } from "@dashboard/components/ui/button";
+
+/** Mark a page control group as navigation. */
+function Pagination({ className, ...props }: ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="Pagination"
+      data-slot="pagination"
+      className={cn("flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+/** Hold the page controls as a list. */
+function PaginationContent({ className, ...props }: ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** Hold one page control. */
+function PaginationItem({ ...props }: ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+/** Go to the previous page. */
+function PaginationPrevious(props: ComponentProps<typeof Button>) {
+  return (
+    <Button aria-label="Previous page" size="icon" {...props}>
+      <ChevronLeftIcon aria-hidden="true" size={16} />
+    </Button>
+  );
+}
+
+/** Go to the next page. */
+function PaginationNext(props: ComponentProps<typeof Button>) {
+  return (
+    <Button aria-label="Next page" size="icon" {...props}>
+      <ChevronRightIcon aria-hidden="true" size={16} />
+    </Button>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+};