@sentry/junior-dashboard 0.270.0 → 0.271.0

package/src/client/review-desk/ReviewDeskPage.tsx

@@ -1,297 +1,258 @@
-import { Archive } from "lucide-react";
-import { useId, type ReactNode } from "react";
-import { Link, useSearchParams } from "react-router";
-import type {
-  AutomationSummary,
-  ReviewItemPayload,
-} from "@sentry/junior/api/schema";
+import { useMemo, useState } from "react";
+import { useSearchParams } from "react-router";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
 
 import { InlineError } from "../components/InlineError";
 import { LoadMorePagination } from "../components/Pagination";
-import { SearchInput } from "../components/SearchInput";
-import { StatusChip } from "../components/StatusChip";
-import { Card } from "../components/layout/Card";
-import { PageHeader } from "../components/layout/PageHeader";
-import { PageLayout } from "../components/layout/PageLayout";
+import { useDetailsPanel } from "../components/DetailsPanel";
+import { Button } from "../components/ui/button";
 import { Skeleton } from "../components/ui/skeleton";
-import { automationPath, formatRelativeTime } from "../format";
+import { useDocumentTitle } from "../documentTitle";
 import { pathWithSearch, useDebouncedSearchParam } from "../searchParams";
 import { cn } from "../styles";
-import { ReviewItemDetail } from "./ReviewItemDetail";
+import { ReviewDeskSidebar, type InboxGroupKey } from "./ReviewDeskSidebar";
+import { ReviewItemDetails } from "./ReviewItemDetails";
+import { ReviewItemView } from "./ReviewItemView";
 import {
   useBlockedAutomationsData,
+  useLinkedConversationTitles,
   useReviewItemData,
   useReviewItemsData,
 } from "./queries";
-import {
-  assigneeLabel,
-  reviewItemPath,
-  reviewItemStatusLabel,
-} from "./reviewItemFormat";
-
-const rowClass =
-  "grid gap-0.5 rounded-md px-3 py-2 text-inherit no-underline transition-colors";
+import { inboxGroups, nextInboxItem, reviewItemPath } from "./reviewItemFormat";
 
-// The list and the detail are already cards, so an empty state is plain
-// text, not a second box.
-function EmptyMessage(props: { children: ReactNode }) {
-  return (
-    <p className="m-0 px-4 py-8 text-center text-sm text-dashboard-text-muted">
-      {props.children}
-    </p>
-  );
-}
+const shellClass =
+  "grid h-full min-h-0 w-full overflow-hidden bg-dashboard-bg md:grid-cols-[20rem_minmax(0,1fr)]";
 
-function ListGroup(props: {
-  children: ReactNode;
+function InboxEmpty(props: {
   className?: string;
-  icon?: ReactNode;
-  title: string;
+  onShowArchived?: () => void;
 }) {
-  const headingId = useId();
   return (
-    <section
-      aria-labelledby={headingId}
-      className={cn("grid gap-1", props.className)}
+    <div
+      className={cn(
+        "grid content-center justify-items-center gap-3 px-4 py-12 text-center",
+        props.className,
+      )}
     >
-      <h2
-        id={headingId}
-        className="m-0 flex items-center gap-1.5 px-3 font-sans text-xs font-medium text-dashboard-text-muted"
-      >
-        {props.icon}
-        {props.title}
-      </h2>
-      <ul className="m-0 grid list-none gap-0.5 p-0">{props.children}</ul>
-    </section>
-  );
-}
-
-function ItemRow(props: {
-  item: ReviewItemPayload;
-  searchParams: URLSearchParams;
-  selected: boolean;
-}) {
-  const { item } = props;
-  const closed = item.status !== "open";
-  const unassigned = !item.assignedToEveryone && item.assignees.length === 0;
-  return (
-    <li>
-      <Link
-        aria-current={props.selected ? "true" : undefined}
-        className={cn(
-          rowClass,
-          props.selected
-            ? "bg-dashboard-accent/[0.08]"
-            : "hover:bg-dashboard-fill-soft",
-        )}
-        replace
-        to={pathWithSearch(reviewItemPath(item.id), props.searchParams)}
-      >
-        <span
-          className={cn(
-            "truncate text-sm font-medium",
-            closed && "text-dashboard-text-muted",
-          )}
-        >
-          {item.title}
-        </span>
-        <span className="flex min-w-0 items-center gap-2 text-xs text-dashboard-text-muted">
-          {closed ? (
-            <StatusChip className="shrink-0" size="compact">
-              {reviewItemStatusLabel(item)}
-            </StatusChip>
-          ) : unassigned ? (
-            <StatusChip size="compact" tone="warning">
-              Unassigned
-            </StatusChip>
-          ) : (
-            <span className="truncate">{assigneeLabel(item)}</span>
-          )}
-          <span className="shrink-0">
-            {formatRelativeTime(item.closedAt ?? item.updatedAt)}
-          </span>
-        </span>
-      </Link>
-    </li>
+      <p className="m-0 font-display text-lg font-medium text-dashboard-text">
+        Nothing needs you
+      </p>
+      {props.onShowArchived ? (
+        <Button onClick={props.onShowArchived} variant="quiet">
+          See archived items
+        </Button>
+      ) : null}
+    </div>
   );
 }
 
-function BlockedAutomationRow(props: { automation: AutomationSummary }) {
+/** Keep the inbox frame while the dashboard shell loads. */
+export function ReviewDeskLoading() {
   return (
-    <li>
-      <Link
-        className={cn(rowClass, "hover:bg-dashboard-fill-soft")}
-        to={automationPath(props.automation.id)}
+    <div className={shellClass}>
+      <aside
+        aria-busy="true"
+        aria-label="Loading review items"
+        className="grid content-start gap-2 border-r border-dashboard-border bg-dashboard-surface-panel px-5 py-3"
       >
-        <span className="truncate text-sm font-medium">
-          {props.automation.title}
-        </span>
-        <span className="truncate text-xs text-amber-300">
-          {props.automation.statusReason ?? "Blocked"}
-        </span>
-      </Link>
-    </li>
-  );
-}
-
-function ReviewListLoading() {
-  return (
-    <div
-      aria-busy="true"
-      aria-label="Loading review items"
-      className="grid gap-2"
-    >
-      {[0, 1, 2, 3].map((row) => (
-        <div className="grid gap-1.5 px-3 py-2" key={row}>
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-3 w-1/3" />
-        </div>
-      ))}
+        <Skeleton className="h-5 w-16" />
+        <Skeleton className="h-8 w-full" />
+        {[0, 1, 2, 3].map((row) => (
+          <div className="grid gap-1 py-2" key={row}>
+            <Skeleton className="h-4 w-4/5" />
+            <Skeleton className="h-3 w-2/5 opacity-70" />
+          </div>
+        ))}
+      </aside>
     </div>
   );
 }
 
 /**
- * Render the review desk: the open Review items that the viewer can see,
- * with search and the selected item beside the list. A search also finds
- * archived items, which show in their own group.
+ * Render the inbox: Review items that the viewer can see in a sidebar, and
+ * one selected item with the end of its Conversation, where the viewer
+ * decides it. Details show beside the item, or in a sheet on small screens.
  */
 export function ReviewDeskPage() {
+  useDocumentTitle("Inbox");
   const [searchParams] = useSearchParams();
   const [search, setSearch, q] = useDebouncedSearchParam();
-  const { items: list, moreArchived, query: items } = useReviewItemsData({ q });
+  const {
+    items: list,
+    moreArchived,
+    query: items,
+  } = useReviewItemsData({ includeArchived: true, q });
   const showBlocked = !q;
   const blocked = useBlockedAutomationsData(showBlocked);
-  const selectedId = searchParams.get("item") ?? list[0]?.id;
+  const blockedAutomations = showBlocked
+    ? (blocked.data?.automations ?? [])
+    : [];
+  const groups = useMemo(() => inboxGroups(list), [list]);
+  const open = [...groups.needsYou, ...groups.fyi];
+
+  // Archived items stay out of the way until a search or the reader asks.
+  const [collapsed, setCollapsed] = useState<ReadonlySet<InboxGroupKey>>(
+    () => new Set(["archived"]),
+  );
+  const toggle = (key: InboxGroupKey) =>
+    setCollapsed((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  const shownCollapsed = useMemo(() => {
+    if (!q || !collapsed.has("archived")) return collapsed;
+    const next = new Set(collapsed);
+    next.delete("archived");
+    return next;
+  }, [collapsed, q]);
+  const showArchived =
+    groups.archived.length > 0 && shownCollapsed.has("archived")
+      ? () => toggle("archived")
+      : undefined;
+
+  const itemParam = searchParams.get("item") ?? undefined;
+  // Wide screens select the item that waited longest. Small screens show
+  // the list until the reader picks an item.
+  const selectedId = itemParam ?? open[0]?.id;
   const listed = list.find((item) => item.id === selectedId);
   // A link can select an item that is not in the current view.
   const direct = useReviewItemData(listed ? undefined : selectedId);
   const selected = listed ?? direct.data;
-  const open = list.filter((item) => item.status === "open");
-  const archived = list.filter((item) => item.status !== "open");
-  const actions = open.filter((item) => item.kind === "action");
-  const notices = open.filter((item) => item.kind === "notice");
-  const blockedAutomations = showBlocked
-    ? (blocked.data?.automations ?? [])
-    : [];
+  const nextItem = selected ? nextInboxItem(groups, selected) : undefined;
+
+  // Read source titles only for the rows on screen and the selected item.
+  const sourceIds = useMemo(() => {
+    const shown = [
+      ...(shownCollapsed.has("needs-you") ? [] : groups.needsYou),
+      ...(shownCollapsed.has("fyi") ? [] : groups.fyi),
+      ...(shownCollapsed.has("archived") ? [] : groups.archived),
+      ...(selected ? [selected] : []),
+    ];
+    return [
+      ...new Set(
+        shown
+          .filter((item) => !item.automationId)
+          .map((item) => item.addedByConversationId),
+      ),
+    ];
+  }, [groups, selected, shownCollapsed]);
+  const sourceTitles = useLinkedConversationTitles(sourceIds);
+  const sourceTitle = (item: ReviewItemPayload) =>
+    sourceTitles[sourceIds.indexOf(item.addedByConversationId)];
+
+  const panelFits = useDetailsPanel();
+  const [detailsChoice, setDetailsChoice] = useState<boolean>();
+  const detailsOpen = Boolean(selected) && (detailsChoice ?? panelFits);
+
+  const listParams = new URLSearchParams(searchParams);
+  listParams.delete("item");
+  const loaded = Boolean(items.data);
   const empty =
-    items.data && list.length === 0 && blockedAutomations.length === 0;
+    loaded && !q && open.length === 0 && blockedAutomations.length === 0;
 
   return (
-    <PageLayout>
-      <PageHeader
-        description="Items that need a person, and who can act on them."
-        title="Review desk"
-      />
-      <SearchInput
-        label="Search review items"
-        onChange={setSearch}
-        placeholder="Search open and archived items"
-        value={search}
-      />
-      <div className="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,22rem)_minmax(0,1fr)]">
-        <Card
-          className="grid content-start gap-4 py-3 lg:self-start"
-          padding="none"
-        >
-          {items.error && !items.data ? (
-            <InlineError className="px-3">
-              Could not load review items.
-            </InlineError>
-          ) : !items.data ? (
-            <ReviewListLoading />
-          ) : empty ? (
-            <EmptyMessage>
-              {q ? `No items match "${q}".` : "No open items."}
-            </EmptyMessage>
-          ) : (
+    <div className={shellClass}>
+      <div
+        className={cn(
+          "h-full min-h-0 overflow-hidden",
+          itemParam && "max-md:hidden",
+        )}
+      >
+        <ReviewDeskSidebar
+          archived={groups.archived}
+          blocked={blockedAutomations}
+          collapsed={shownCollapsed}
+          error={Boolean(items.error && !items.data)}
+          footer={
             <>
-              {actions.length > 0 ? (
-                <ListGroup title="Needs an answer">
-                  {actions.map((item) => (
-                    <ItemRow
-                      item={item}
-                      key={item.id}
-                      searchParams={searchParams}
-                      selected={item.id === selected?.id}
-                    />
-                  ))}
-                </ListGroup>
-              ) : null}
-              {notices.length > 0 ? (
-                <ListGroup title="Notices">
-                  {notices.map((item) => (
-                    <ItemRow
-                      item={item}
-                      key={item.id}
-                      searchParams={searchParams}
-                      selected={item.id === selected?.id}
-                    />
-                  ))}
-                </ListGroup>
-              ) : null}
               <LoadMorePagination
-                className="px-3"
+                className="mx-3 mt-2"
                 hasMore={!items.isPlaceholderData && Boolean(items.hasNextPage)}
                 loading={items.isFetchingNextPage}
                 onLoadMore={() => void items.fetchNextPage()}
               />
               {items.isFetchNextPageError ? (
-                <InlineError className="px-3 text-center">
+                <InlineError className="px-3 py-2">
                   Could not load more items. Try again.
                 </InlineError>
               ) : null}
-              {archived.length > 0 ? (
-                <ListGroup
-                  className={
-                    open.length > 0
-                      ? "border-t border-dashboard-border-subtle pt-3"
-                      : undefined
-                  }
-                  icon={<Archive aria-hidden="true" size={13} />}
-                  title="Archived"
-                >
-                  {archived.map((item) => (
-                    <ItemRow
-                      item={item}
-                      key={item.id}
-                      searchParams={searchParams}
-                      selected={item.id === selected?.id}
-                    />
-                  ))}
-                  {moreArchived ? (
-                    <li className="px-3 py-1 text-xs text-dashboard-text-muted">
-                      Only the newest archived matches show. Add words to the
-                      search to find older items.
-                    </li>
-                  ) : null}
-                </ListGroup>
+              {moreArchived && !shownCollapsed.has("archived") ? (
+                <p className="m-0 px-3 py-2 text-xs text-dashboard-text-muted">
+                  Search to find older archived items.
+                </p>
+              ) : null}
+              {loaded && q && list.length === 0 ? (
+                <p className="m-0 px-3 py-8 text-center text-sm text-dashboard-text-muted">
+                  No items match "{q}".
+                </p>
               ) : null}
-              {blockedAutomations.length > 0 ? (
-                <ListGroup title="Blocked Automations">
-                  {blockedAutomations.map((automation) => (
-                    <BlockedAutomationRow
-                      automation={automation}
-                      key={automation.id}
-                    />
-                  ))}
-                </ListGroup>
+              {empty ? (
+                <InboxEmpty
+                  className="md:hidden"
+                  onShowArchived={showArchived}
+                />
               ) : null}
             </>
-          )}
-        </Card>
-        <Card className="min-w-0" padding="md">
-          {selected ? (
-            // A key per item resets the answer form and its send lock, so
-            // one item's answer can never reach another item.
-            <ReviewItemDetail item={selected} key={selected.id} />
-          ) : direct.error ? (
-            <InlineError>Review item not found.</InlineError>
-          ) : (
-            <EmptyMessage>Select an item to see it here.</EmptyMessage>
-          )}
-        </Card>
+          }
+          fyi={groups.fyi}
+          loading={!items.data && !items.error}
+          needsYou={groups.needsYou}
+          onSearchChange={setSearch}
+          onToggle={toggle}
+          search={search}
+          searchParams={listParams}
+          selectedId={selected?.id}
+          selectedShown={Boolean(itemParam)}
+          sourceTitle={sourceTitle}
+        />
       </div>
-    </PageLayout>
+      <section
+        aria-label="Selected review item"
+        className={cn(
+          "grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden",
+          !itemParam && "max-md:hidden",
+          detailsOpen && "xl:grid-cols-[minmax(0,1fr)_25rem]",
+        )}
+      >
+        {selected ? (
+          <>
+            <ReviewItemView
+              backTo={pathWithSearch("/review", listParams)}
+              detailsOpen={detailsOpen}
+              item={selected}
+              // A key per item resets the answer form and its send lock, so
+              // one item's answer can never reach another item.
+              key={selected.id}
+              next={
+                nextItem
+                  ? {
+                      title: nextItem.title,
+                      to: pathWithSearch(
+                        reviewItemPath(nextItem.id),
+                        listParams,
+                      ),
+                    }
+                  : undefined
+              }
+              onDetailsClick={() => setDetailsChoice(!detailsOpen)}
+              sourceTitle={sourceTitle(selected)}
+            />
+            {detailsOpen ? (
+              <ReviewItemDetails
+                item={selected}
+                onClose={() => setDetailsChoice(false)}
+              />
+            ) : null}
+          </>
+        ) : direct.error ? (
+          <InlineError className="p-7">Review item not found.</InlineError>
+        ) : empty ? (
+          <InboxEmpty onShowArchived={showArchived} />
+        ) : null}
+      </section>
+    </div>
   );
 }