@sentry/junior-dashboard 0.266.0 → 0.268.0

package/src/mock-reporting/routes.ts

@@ -28,6 +28,9 @@ import {
   personalSpendReportSchema,
   personParamsSchema,
   pluginOperationalReportFeedSchema,
+  reviewItemCountSchema,
+  reviewItemListSchema,
+  reviewItemWaitingConversationsSchema,
   automationExecutionListSchema,
   automationListSchema,
   automationParamsSchema,
@@ -294,6 +297,23 @@ export function createMockReportingApi(): Hono<{
     }
     return errorResponse("Attachment not found.", 404);
   });
+  // Mock reporting has no Review items. Answer the reads here so the
+  // dashboard does not query a database that has no review item tables.
+  app.get("/review-items", () =>
+    jsonResponse(reviewItemListSchema, { items: [] }),
+  );
+  app.get("/review-items/count", () =>
+    jsonResponse(reviewItemCountSchema, { mine: 0 }),
+  );
+  app.get("/review-items/waiting-conversations", () =>
+    jsonResponse(reviewItemWaitingConversationsSchema, { conversationIds: [] }),
+  );
+  app.get("/review-items/:id", () =>
+    errorResponse("Review item not found.", 404),
+  );
+  app.post("/review-items/:id/actions", () =>
+    errorResponse("Review item not found.", 404),
+  );
   app.get("/automations", (c) => {
     const report = readMockAutomationList();
     return jsonResponse(

package/src/shell.ts

@@ -131,6 +131,9 @@ export function dashboardPagePaths(
       nested: true,
       path: basePath === "/" ? "/conversations" : `${basePath}/conversations`,
     },
+    {
+      path: basePath === "/" ? "/review" : `${basePath}/review`,
+    },
     {
       nested: true,
       path: basePath === "/" ? "/people" : `${basePath}/people`,

package/src/client/conversations/transcriptStyles.ts

@@ -1,10 +0,0 @@
-/** Share the transcript empty/unavailable frame across top-level and segment views. */
-export function transcriptEmptyClass(
-  tone: "default" | "error" = "default",
-): string {
-  const colors =
-    tone === "error"
-      ? "border-rose-300/25 bg-rose-300/[0.07] text-rose-100"
-      : "border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted";
-  return `rounded-lg border p-5 text-sm leading-relaxed ${colors}`;
-}

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

@@ -1,193 +0,0 @@
-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

@@ -1,176 +0,0 @@
-import { Link, useLocation, useParams } from "react-router";
-import { useQuery } from "@tanstack/react-query";
-import { ArrowLeft } from "lucide-react";
-import {
-  automationEditSchema,
-  type AutomationSummary,
-} from "@sentry/junior/api/schema";
-import { useAutomationData } from "../../api";
-import { useDocumentTitle } from "../../documentTitle";
-import { fetchDashboardJson } from "../../http";
-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";
-import { AutomationOutcomeList } from "./AutomationOutcomeFields";
-
-/** Load a linkable editor. Owners and public readers can edit until work completes. */
-export function AutomationEditPage(props: { enabled: boolean }) {
-  const { automationId } = useParams();
-  const location = useLocation();
-  const summary = useAutomationData(props.enabled, automationId);
-  const canEdit =
-    summary.data &&
-    !(summary.data.kind === "scheduled" && summary.data.status === "completed");
-  const edit = useQuery({
-    queryKey: ["dashboard", "automations", "edit", automationId],
-    enabled: props.enabled && Boolean(canEdit),
-    retry: false,
-    queryFn: ({ signal }) =>
-      fetchDashboardJson(
-        automationEditSchema,
-        `/api/automations/${encodeURIComponent(automationId!)}/edit`,
-        signal,
-      ),
-  });
-  const returnPath = `/automations/list${location.search}`;
-  const value = summary.data;
-  useDocumentTitle(
-    value
-      ? canEdit
-        ? `${value.title} · Edit`
-        : value.title
-      : "Edit automation",
-  );
-  const status =
-    value?.kind === "event"
-      ? value.status !== "active"
-        ? value.status
-        : value.trigger.problems.length === 0
-          ? "active"
-          : "unavailable"
-      : value?.status;
-  const statusTone =
-    status === "active"
-      ? "success"
-      : status === "blocked" || status === "unavailable"
-        ? "warning"
-        : "neutral";
-  return (
-    <AutomationsNavigation>
-      <div className="mx-auto w-full min-w-0 max-w-5xl px-4 pt-7 sm:px-8 sm:pt-9">
-        <Link
-          to={returnPath}
-          className="inline-flex min-h-8 items-center gap-2 text-sm text-dashboard-text-muted no-underline hover:text-dashboard-text"
-        >
-          <ArrowLeft aria-hidden size={15} />
-          All automations
-        </Link>
-        <div className="mt-4 mb-8 flex flex-wrap items-start justify-between gap-4">
-          <div className="min-w-0">
-            <h1 className="m-0 break-words font-display text-3xl font-light tracking-tight">
-              {value && !canEdit ? value.title : "Edit automation"}
-            </h1>
-            {value ? (
-              <p className="mt-2 mb-0 text-sm text-dashboard-text-muted">
-                Created by {value.ownedByViewer ? "you" : value.createdBy} ·{" "}
-                {value.destination.label}
-              </p>
-            ) : null}
-          </div>
-          {value ? (
-            <div className="flex items-center gap-4">
-              <Link
-                to={`/automations/${encodeURIComponent(value.id)}/versions${location.search}`}
-                className="text-sm text-dashboard-text-muted underline underline-offset-2 hover:text-dashboard-text"
-              >
-                Version history
-              </Link>
-              <StatusChip tone={statusTone}>
-                {status === "unavailable" ? "Trigger unavailable" : status}
-              </StatusChip>
-            </div>
-          ) : null}
-        </div>
-        {(!value && summary.error) || (!edit.data && edit.error) ? (
-          <FormNotice tone="error" title="Automation could not be loaded.">
-            It may no longer be available, or you may not have access.{" "}
-            <Button
-              onClick={() => {
-                void summary.refetch();
-                if (canEdit) void edit.refetch();
-              }}
-            >
-              Try again
-            </Button>
-          </FormNotice>
-        ) : !value || (canEdit && !edit.data) ? (
-          <AutomationEditorLoading />
-        ) : canEdit && edit.data ? (
-          <AutomationEditor
-            key={automationId}
-            automation={edit.data}
-            summary={value}
-            returnPath={returnPath}
-          />
-        ) : (
-          <AutomationReadOnly automation={value} />
-        )}
-      </div>
-    </AutomationsNavigation>
-  );
-}
-
-function AutomationReadOnly({ automation }: { automation: AutomationSummary }) {
-  return (
-    <>
-      <p className="mb-6 text-sm text-dashboard-text-muted">
-        This automation has completed and cannot be edited. It will not run
-        again.
-      </p>
-      <AutomationFormSection title="What to do" detail="The saved instruction.">
-        <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed">
-          {automation.instruction}
-        </p>
-      </AutomationFormSection>
-      <AutomationFormSection title="When to run" detail="The saved trigger.">
-        {automation.kind === "scheduled" ? (
-          <p className="m-0 text-sm">
-            {automation.schedule} · {automation.timezone}
-          </p>
-        ) : (
-          <div className="grid gap-3 text-sm">
-            <p className="m-0 break-words">{automation.resource}</p>
-            <p className="m-0 break-words">
-              {automation.trigger.events.join(", ")}
-            </p>
-            <TriggerFilters filters={automation.trigger.filters} />
-          </div>
-        )}
-      </AutomationFormSection>
-      <AutomationFormSection
-        title="Where results go"
-        detail="Messages after successful work."
-      >
-        <AutomationOutcomeList
-          outcomes={automation.outcomes}
-          destination={automation.destination}
-        />
-      </AutomationFormSection>
-      <AutomationFormSection
-        title="Credentials"
-        detail="The accounts Junior can use."
-      >
-        <p className="m-0 text-sm">
-          {automation.credentialMode === "creator"
-            ? `Uses ${automation.ownedByViewer ? "your" : `${automation.createdBy}’s`} connected accounts.`
-            : "System credentials only."}
-        </p>
-      </AutomationFormSection>
-    </>
-  );
-}