@sentry/junior-dashboard 0.263.0 → 0.265.0

package/src/client/pages/system/WorkspaceDetails.tsx

@@ -1,67 +1,182 @@
+import { Pencil, Trash2 } from "lucide-react";
+import { Link } from "react-router";
 import type { StatsReport, WorkspaceReport } from "@sentry/junior/api/schema";
 
 import { useStatsData } from "../../api";
+import { buttonVariants, Button } from "../../components/ui/button";
+import { Skeleton } from "../../components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { Detail, DetailList } from "../../components/DetailList";
+import { DetailsPanel } from "../../components/DetailsPanel";
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
+import { PageContentSkeleton } from "../../components/PageContentSkeleton";
 import { WorkspaceUsageChart } from "../../components/charts/WorkspaceUsageChart";
 import { workspaceUsageDays } from "../../components/charts/workspaceUsage";
 import type { TimeRangeDays } from "../../components/controls/TimeRangeSelector";
-import { Card } from "../../components/layout/Card";
-import { formatSandboxSize, SandboxSizeSummary } from "./SandboxSizeSummary";
-import { SnapshotSummary } from "./SnapshotSummary";
+import {
+  formatMs,
+  formatRelativeTime,
+  formatTime,
+  workspacePath,
+} from "../../format";
+import { formatSandboxSize } from "./sandboxSize";
+import { useWorkspaceData } from "./workspaceQueries";
 
-/** Load Workspace usage stats and render snapshot plus switch volume. */
+// Workspace switch counters are daily-only (`junior_stats.date`).
+const USAGE_RANGE: TimeRangeDays = 30;
+
+/**
+ * Show one Workspace beside the list with Edit and Delete in the header. The
+ * list item renders at once; the detail read adds the current snapshot.
+ */
 export function WorkspaceDetails(props: {
   defaultVcpus: number | null;
-  range: TimeRangeDays;
-  workspace: WorkspaceReport;
+  listError: boolean;
+  onClose(): void;
+  onDelete(workspace: WorkspaceReport, source: HTMLButtonElement): void;
+  workspace: WorkspaceReport | undefined;
+  workspaceId: string;
 }) {
+  const detail = useWorkspaceData(props.workspaceId);
   const statsQuery = useStatsData();
+  const workspace = detail.data ?? props.workspace;
+  const missing = !workspace && (detail.isError || props.listError);
   return (
-    <WorkspaceDetailsContent
-      defaultVcpus={props.defaultVcpus}
-      error={Boolean(statsQuery.error)}
-      loading={statsQuery.isPending}
-      range={props.range}
-      stats={statsQuery.data}
-      workspace={props.workspace}
-    />
+    <DetailsPanel
+      actions={
+        workspace ? (
+          <>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Link
+                    aria-label={`Edit ${workspace.name}`}
+                    className={buttonVariants({ size: "icon" })}
+                    to={`${workspacePath(workspace.id)}/edit`}
+                  >
+                    <Pencil aria-hidden="true" size={15} />
+                  </Link>
+                }
+              />
+              <TooltipContent size="compact">Edit Workspace</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    aria-label={`Delete ${workspace.name}`}
+                    onClick={(event) =>
+                      props.onDelete(workspace, event.currentTarget)
+                    }
+                    size="icon"
+                  >
+                    <Trash2 aria-hidden="true" size={15} />
+                  </Button>
+                }
+              />
+              <TooltipContent size="compact">Delete Workspace</TooltipContent>
+            </Tooltip>
+          </>
+        ) : undefined
+      }
+      label="Workspace details"
+      onClose={props.onClose}
+      sheetTitle={workspace?.name}
+      title={
+        <h2 className="m-0 break-words font-display text-base font-medium text-dashboard-text">
+          {workspace?.name ?? "Workspace details"}
+        </h2>
+      }
+    >
+      <div className="p-4 [overflow-wrap:anywhere]">
+        {workspace ? (
+          <WorkspaceDetailsContent
+            defaultVcpus={props.defaultVcpus}
+            error={Boolean(statsQuery.error)}
+            loading={statsQuery.isPending}
+            snapshot={
+              detail.data ? "ready" : detail.isError ? "error" : "loading"
+            }
+            stats={statsQuery.data}
+            workspace={workspace}
+          />
+        ) : missing ? (
+          <EmptyTelemetry>
+            Workspace not found. It may have been deleted.
+          </EmptyTelemetry>
+        ) : (
+          <PageContentSkeleton
+            label="Loading Workspace details"
+            variant="panel"
+          />
+        )}
+      </div>
+    </DetailsPanel>
   );
 }
 
-/** Present snapshot metadata, Sandbox size, and switch volume for one Workspace recipe. */
+/** Present repositories, Sandbox size, snapshot, setup, and switch volume for one Workspace. */
 export function WorkspaceDetailsContent(props: {
   defaultVcpus: number | null;
   error: boolean;
   loading: boolean;
-  range: TimeRangeDays;
+  snapshot: "error" | "loading" | "ready";
   stats: StatsReport | undefined;
   workspace: WorkspaceReport;
 }) {
+  const { workspace } = props;
   return (
     <div className="grid min-w-0 gap-4">
-      <SnapshotSummary
-        description="New Sandboxes start from this prepared snapshot."
-        emptyDescription="No snapshot yet. The first successful prepare creates one."
-        headingId="workspace-snapshot-heading"
-        snapshot={props.workspace.snapshot}
-        title="Current snapshot"
-      />
-      <SandboxSizeSummary
-        description="Sandboxes for this Workspace start with this size."
-        headingId="workspace-sandbox-size-heading"
-        title="Sandbox size"
-        value={formatSandboxSize(props.workspace.vcpus ?? props.defaultVcpus)}
-      />
+      <DetailList>
+        <Detail label="Repositories">
+          {workspace.repos.length === 0 ? (
+            <span className="text-dashboard-text-muted">None</span>
+          ) : (
+            <ul className="m-0 grid list-none gap-1.5 p-0">
+              {workspace.repos.map((repo) => (
+                <li className="min-w-0" key={`${repo.provider}:${repo.repo}`}>
+                  <span className="block font-mono text-xs text-dashboard-text">
+                    {repo.provider}:{repo.repo}
+                  </span>
+                  <span className="block font-mono text-xs text-dashboard-text-muted">
+                    {repo.checkoutPath}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Detail>
+        <Detail label="Sandbox size">
+          {formatSandboxSize(workspace.vcpus ?? props.defaultVcpus)}
+          {workspace.vcpus === null ? (
+            <span className="text-dashboard-text-muted"> · default</span>
+          ) : null}
+        </Detail>
+        <Detail label="Snapshot">
+          <WorkspaceSnapshot state={props.snapshot} workspace={workspace} />
+        </Detail>
+        <Detail label="Setup script">
+          {workspace.setupScript.trim() ? (
+            <pre className="m-0 max-h-48 overflow-auto whitespace-pre-wrap rounded-md bg-dashboard-fill-soft p-2 font-mono text-xs leading-relaxed text-dashboard-text">
+              {workspace.setupScript}
+            </pre>
+          ) : (
+            <span className="text-dashboard-text-muted">None</span>
+          )}
+        </Detail>
+      </DetailList>
       {!props.stats ? (
-        <Card padding="sm">
-          <EmptyTelemetry>
-            {props.error
-              ? "Workspace usage failed to load."
-              : props.loading
-                ? "Loading Workspace usage."
-                : "No usage in this period."}
-          </EmptyTelemetry>
-        </Card>
+        <EmptyTelemetry>
+          {props.error
+            ? "Workspace usage failed to load."
+            : props.loading
+              ? "Loading Workspace usage."
+              : "No usage in this period."}
+        </EmptyTelemetry>
       ) : (
         <div className="grid min-w-0 gap-3">
           {props.error ? (
@@ -71,16 +186,58 @@ export function WorkspaceDetailsContent(props: {
           ) : null}
           <WorkspaceUsageChart
             days={workspaceUsageDays({
-              workspaceId: props.workspace.id,
-              // Workspace switch counters are daily-only (`junior_stats.date`).
-              range: props.range,
+              workspaceId: workspace.id,
+              range: USAGE_RANGE,
               stats: props.stats.stats,
             })}
-            range={props.range}
-            workspaceName={props.workspace.name}
+            range={USAGE_RANGE}
+            workspaceName={workspace.name}
           />
         </div>
       )}
     </div>
   );
 }
+
+function WorkspaceSnapshot(props: {
+  state: "error" | "loading" | "ready";
+  workspace: WorkspaceReport;
+}) {
+  if (props.state === "loading") {
+    return (
+      <span className="grid gap-1.5" role="status">
+        <span className="sr-only">Loading snapshot</span>
+        <Skeleton className="h-4 w-36" />
+        <Skeleton className="h-3.5 w-48" />
+      </span>
+    );
+  }
+  if (props.state === "error") {
+    return (
+      <span className="text-dashboard-text-muted">
+        Snapshot status could not be loaded.
+      </span>
+    );
+  }
+  const snapshot = props.workspace.snapshot;
+  if (!snapshot) {
+    return (
+      <span className="text-dashboard-text-muted">
+        Not built yet. The first successful prepare builds it.
+      </span>
+    );
+  }
+  return (
+    <>
+      <span className="block tabular-nums">
+        <span title={formatTime(snapshot.generatedAt)}>
+          {formatRelativeTime(snapshot.generatedAt)}
+        </span>{" "}
+        · built in {formatMs(snapshot.buildDurationMs)}
+      </span>
+      <span className="block break-all font-mono text-xs text-dashboard-text-muted">
+        {snapshot.id}
+      </span>
+    </>
+  );
+}

package/src/client/pages/system/WorkspaceEditor.tsx

@@ -1,12 +1,14 @@
 import { Plus, Trash2 } from "lucide-react";
 import type { FormEvent } from "react";
+import { Link } from "react-router";
 
-import { Button } from "../../components/Button";
-import { Field } from "../../components/Field";
+import { Button, buttonVariants } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Textarea } from "../../components/ui/textarea";
+import { Field, FieldDescription, FieldLabel } from "../../components/ui/field";
 import { InlineError } from "../../components/InlineError";
-import { TextArea, TextInput } from "../../components/TextInput";
 import { Card } from "../../components/layout/Card";
-import { formatSandboxSize } from "./SandboxSizeSummary";
+import { formatSandboxSize } from "./sandboxSize";
 import {
   createRepoDraft,
   type RepoDraft,
@@ -16,6 +18,7 @@ import {
 type WorkspaceEditorProps = {
   busy: boolean;
   canSave: boolean;
+  cancelPath: string;
   defaultVcpus: number | null;
   draft: WorkspaceDraft;
   error?: string;
@@ -51,24 +54,9 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
   return (
     <Card className="mb-0" padding="md" variant="section">
       <form className="grid gap-6" onSubmit={submit}>
-        {props.editing ? (
-          <div className="grid gap-1">
-            <h2 className="m-0 text-base font-semibold text-dashboard-text">
-              Configuration
-            </h2>
-            <p className="m-0 text-sm leading-relaxed text-dashboard-text-muted">
-              Change the recipe Junior uses the next time this Workspace is
-              prepared.
-            </p>
-          </div>
-        ) : null}
-
-        <Field
-          help="Lowercase name used when agents switch into this Workspace."
-          htmlFor="workspace-name"
-          label="Name"
-        >
-          <TextInput
+        <Field>
+          <FieldLabel htmlFor="workspace-name">Name</FieldLabel>
+          <Input
             autoComplete="off"
             id="workspace-name"
             maxLength={64}
@@ -78,6 +66,9 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
             placeholder="sentry"
             value={props.draft.name}
           />
+          <FieldDescription id="workspace-name-help">
+            Lowercase name used when agents switch into this Workspace.
+          </FieldDescription>
         </Field>
 
         <section className="grid gap-3" aria-labelledby="workspace-repos-title">
@@ -120,12 +111,14 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
                 key={repo.key}
               >
                 <div className="grid gap-3 sm:grid-cols-[minmax(0,8.5rem)_minmax(0,1fr)_auto] sm:items-end">
-                  <Field
-                    htmlFor={`workspace-repo-provider-${repo.key}`}
-                    label="Provider"
-                    size="compact"
-                  >
-                    <TextInput
+                  <Field className="gap-1.5">
+                    <FieldLabel
+                      htmlFor={`workspace-repo-provider-${repo.key}`}
+                      className="font-sans text-xs font-medium text-dashboard-text-muted"
+                    >
+                      Provider
+                    </FieldLabel>
+                    <Input
                       aria-label={`Provider ${index + 1}`}
                       id={`workspace-repo-provider-${repo.key}`}
                       onChange={(event) =>
@@ -135,12 +128,14 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
                       value={repo.provider}
                     />
                   </Field>
-                  <Field
-                    htmlFor={`workspace-repo-name-${repo.key}`}
-                    label="Repository"
-                    size="compact"
-                  >
-                    <TextInput
+                  <Field className="gap-1.5">
+                    <FieldLabel
+                      htmlFor={`workspace-repo-name-${repo.key}`}
+                      className="font-sans text-xs font-medium text-dashboard-text-muted"
+                    >
+                      Repository
+                    </FieldLabel>
+                    <Input
                       aria-label={`Repository ${index + 1}`}
                       id={`workspace-repo-name-${repo.key}`}
                       onChange={(event) =>
@@ -154,7 +149,7 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
                     aria-label={`Remove repository ${index + 1}`}
                     className="w-full sm:w-auto"
                     onClick={() => removeRepo(repo.key)}
-                    tone="danger"
+                    variant="danger"
                     type="button"
                   >
                     <Trash2 aria-hidden="true" size={14} />
@@ -166,8 +161,23 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
           </div>
         </section>
 
-        <Field
-          help={
+        <Field>
+          <FieldLabel htmlFor="workspace-setup">Setup script</FieldLabel>
+          <Textarea
+            className="font-mono"
+            id="workspace-setup"
+            onChange={(event) =>
+              props.onChange({
+                ...props.draft,
+                setupScript: event.target.value,
+              })
+            }
+            placeholder={
+              'pnpm install --dir "$JUNIOR_REPOS_ROOT/sentry"\n# cwd is $JUNIOR_WORKSPACE_ROOT'
+            }
+            value={props.draft.setupScript}
+          />
+          <FieldDescription id="workspace-setup-help">
             <>
               Runs once while Junior builds the reusable snapshot. Current
               working directory is{" "}
@@ -183,31 +193,12 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
               </code>
               ). Use those variables instead of hard-coded absolute paths.
             </>
-          }
-          htmlFor="workspace-setup"
-          label="Setup script"
-        >
-          <TextArea
-            id="workspace-setup"
-            onChange={(event) =>
-              props.onChange({
-                ...props.draft,
-                setupScript: event.target.value,
-              })
-            }
-            placeholder={
-              'pnpm install --dir "$JUNIOR_REPOS_ROOT/sentry"\n# cwd is $JUNIOR_WORKSPACE_ROOT'
-            }
-            value={props.draft.setupScript}
-          />
+          </FieldDescription>
         </Field>
 
-        <Field
-          help="Sandbox vCPUs for this Workspace. Each vCPU adds 2 GB of memory. Leave empty to use the app default."
-          htmlFor="workspace-vcpus"
-          label="vCPUs"
-        >
-          <TextInput
+        <Field>
+          <FieldLabel htmlFor="workspace-vcpus">vCPUs</FieldLabel>
+          <Input
             autoComplete="off"
             id="workspace-vcpus"
             inputMode="numeric"
@@ -217,18 +208,25 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
             placeholder={formatSandboxSize(props.defaultVcpus)}
             value={props.draft.vcpus}
           />
+          <FieldDescription id="workspace-vcpus-help">
+            Sandbox vCPUs for this Workspace. Each vCPU adds 2 GB of memory.
+            Leave empty to use the app default.
+          </FieldDescription>
         </Field>
 
         {props.error ? <InlineError>{props.error}</InlineError> : null}
 
         <div className="flex flex-wrap items-center gap-3 border-t border-dashboard-border-subtle pt-5">
-          <Button disabled={!props.canSave} type="submit">
+          <Button disabled={!props.canSave} type="submit" variant="primary">
             {props.busy
               ? "Saving…"
               : props.editing
                 ? "Save changes"
                 : "Create Workspace"}
           </Button>
+          <Link className={buttonVariants()} to={props.cancelPath}>
+            Cancel
+          </Link>
           <p className="m-0 text-xs text-dashboard-text-muted">
             {props.editing
               ? "Saved changes apply the next time this Workspace is prepared."

package/src/client/pages/system/WorkspaceFormPage.tsx

@@ -1,22 +1,26 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import {
-  workspaceListSchema,
   workspaceSchema,
   type WorkspaceListReport,
 } from "@sentry/junior/api/schema";
 
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
-import type { TimeRangeDays } from "../../components/controls/TimeRangeSelector";
 import { LoadingView } from "../../components/LoadingView";
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
-import { fetchDashboardJson, post, put } from "../../http";
+import { workspacePath } from "../../format";
+import { post, put } from "../../http";
 import { SystemPageLayout } from "./SystemPageLayout";
-import { WorkspaceDetails } from "./WorkspaceDetails";
 import { WorkspaceEditor } from "./WorkspaceEditor";
-import { readWorkspaceApiError, workspacesQueryKey } from "./WorkspacesPage";
+import {
+  readWorkspaceApiError,
+  useWorkspaceData,
+  useWorkspacesData,
+  workspaceQueryKey,
+  workspacesQueryKey,
+} from "./workspaceQueries";
 import {
   canSaveWorkspaceDraft,
   createWorkspaceDraft,
@@ -25,41 +29,21 @@ import {
   workspaceDraftBody,
 } from "./workspaceDraft";
 
-// TODO: support 24h once junior_stats can store hour keys (date column is day-only).
-/** Workspace switch stats are daily counters only. */
-const WORKSPACE_RANGE_OPTIONS: TimeRangeDays[] = [7, 30, 90];
-
-/** Create or edit one Workspace at a stable dashboard route. */
+/** Create or edit one Workspace recipe on a full page. */
 export function WorkspaceFormPage() {
   const { workspaceId } = useParams();
   const editing = workspaceId !== undefined;
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const [range, setRange] = useState<TimeRangeDays>(30);
   const [newDraft, setNewDraft] = useState(createWorkspaceDraft);
   const [editedDraft, setEditedDraft] = useState<{
     draft: WorkspaceDraft;
     workspaceId: string;
   }>();
 
-  const workspaceQuery = useQuery({
-    enabled: editing,
-    queryKey: ["dashboard", "workspace", workspaceId],
-    queryFn: ({ signal }) =>
-      fetchDashboardJson(
-        workspaceSchema,
-        `/api/workspaces/${encodeURIComponent(workspaceId!)}`,
-        signal,
-      ),
-    retry: false,
-  });
+  const workspaceQuery = useWorkspaceData(workspaceId);
   // Shares the list cache so the default size is usually loaded already.
-  const workspacesQuery = useQuery({
-    queryKey: workspacesQueryKey,
-    queryFn: ({ signal }) =>
-      fetchDashboardJson(workspaceListSchema, "/api/workspaces", signal),
-    retry: false,
-  });
+  const workspacesQuery = useWorkspacesData();
   const defaultVcpus = workspacesQuery.data?.defaultVcpus ?? null;
 
   // Seed the edit draft once per Workspace id. editWorkspaceDraft assigns fresh
@@ -103,7 +87,11 @@ export function WorkspaceFormPage() {
             ].sort((left, right) => left.name.localeCompare(right.name)),
           },
       );
-      navigate("/system/workspaces");
+      // A recipe change can retire the current snapshot; read it again.
+      await queryClient.invalidateQueries({
+        queryKey: workspaceQueryKey(workspace.id),
+      });
+      navigate(workspacePath(workspace.id));
     },
   });
 
@@ -121,16 +109,9 @@ export function WorkspaceFormPage() {
         <PageHeader
           description={
             editing
-              ? "Inspect the current snapshot and update how Junior prepares this Workspace."
+              ? "Change the repositories, setup script, or Sandbox size."
               : "Name the recipe, choose repositories, and optionally add a one-time setup script."
           }
-          {...(editing
-            ? {
-                onRangeChange: setRange,
-                range,
-                rangeOptions: WORKSPACE_RANGE_OPTIONS,
-              }
-            : {})}
           title={
             editing
               ? (workspaceQuery.data?.name ?? "Workspace")
@@ -138,14 +119,6 @@ export function WorkspaceFormPage() {
           }
         />
 
-        {editing && workspaceQuery.data ? (
-          <WorkspaceDetails
-            defaultVcpus={defaultVcpus}
-            range={range}
-            workspace={workspaceQuery.data}
-          />
-        ) : null}
-
         {workspaceQuery.error ? (
           <Card padding="sm">
             <EmptyTelemetry>
@@ -158,8 +131,11 @@ export function WorkspaceFormPage() {
         ) : draft ? (
           <WorkspaceEditor
             busy={saveMutation.isPending}
-            defaultVcpus={defaultVcpus}
             canSave={canSaveWorkspaceDraft(draft, saveMutation.isPending)}
+            cancelPath={
+              workspaceId ? workspacePath(workspaceId) : "/system/workspaces"
+            }
+            defaultVcpus={defaultVcpus}
             draft={draft}
             editing={editing}
             error={