@sentry/junior-dashboard 0.264.0 → 0.266.0

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

@@ -1,16 +1,18 @@
 import type { PluginOperationalReport } from "@sentry/junior/api/schema";
 
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
-  ChartAxisLabel,
-  ChartCategoryLabels,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
+  formatActivityCategoryLabel,
   formatActivityCategoryTooltipLabel,
   isActivityHourBucket,
 } from "../../components/charts/ActivityChart";
 import { ChartLegend } from "../../components/charts/ChartLegend";
 import type { TimeRangeDays } from "../../components/controls/TimeRangeSelector";
-import { Tooltip } from "../../components/Tooltip";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 import { formatCostSummary } from "../../format";
 
 type Widget = NonNullable<PluginOperationalReport["widgets"]>[number];
@@ -35,34 +37,54 @@ function seriesColor(series: Widget["series"][number], index: number): string {
     : (colors[index % colors.length] ?? colors[0]);
 }
 
-/** Render a validated plugin-owned categorical bar chart. */
-export function PluginBarChart(props: {
-  range?: TimeRangeDays;
-  widget: Widget;
-}) {
-  const { widget } = props;
+/**
+ * Pick the categories a plugin chart shows for the page range and the value
+ * scale they need. The scale always includes zero and is never empty.
+ */
+export function pluginChartScale(widget: Widget, range?: TimeRangeDays) {
   const categories = widget.timeRangeDays
-    ? widget.categories.slice(-visibleCategoryCount(widget, props.range))
+    ? widget.categories.slice(-visibleCategoryCount(widget, range))
     : widget.categories;
-  const seriesFormat = commonSeriesFormat(widget);
-  const layout = createActivityChartLayout(250, {
-    bottom: 36,
-    left: seriesFormat === "usd" ? 104 : 56,
-    right: 12,
-    top: 16,
-    width: 520,
-  });
-  const step = layout.plotWidth / Math.max(1, categories.length);
-  const groupWidth = Math.min(72, step * 0.72);
-  const barWidth = groupWidth / Math.max(1, widget.series.length);
   const values = categories.flatMap((category) =>
     widget.series.map((series) => category.values[series.key] ?? 0),
   );
   const minimum = Math.min(0, ...values);
   const dataMaximum = Math.max(0, ...values);
   const maximum = dataMaximum === minimum ? minimum + 1 : dataMaximum;
-  const span = maximum - minimum;
-  const zeroY = layout.top + (maximum / span) * layout.plotHeight;
+  return { categories, maximum, minimum };
+}
+
+/** Render a validated plugin-owned categorical bar chart. */
+export function PluginBarChart(props: {
+  range?: TimeRangeDays;
+  widget: Widget;
+}) {
+  const { widget } = props;
+  const { categories, maximum, minimum } = pluginChartScale(
+    widget,
+    props.range,
+  );
+  const seriesFormat = commonSeriesFormat(widget);
+  // Series keys come from plugins, so chart keys use the series index.
+  const data = categories.map((category) => ({
+    category,
+    id: category.id,
+    ...Object.fromEntries(
+      widget.series.map((series, index) => [
+        `series-${index}`,
+        category.values[series.key] ?? 0,
+      ]),
+    ),
+  }));
+  const labels = new Map(
+    categories.map((category) => [category.id, category.label]),
+  );
+  const chartConfig = Object.fromEntries(
+    widget.series.map((series, index) => [
+      `series-${index}`,
+      { color: seriesColor(series, index), label: series.label },
+    ]),
+  );
 
   return (
     <div className="overflow-hidden rounded-md border border-dashboard-border bg-dashboard-surface-panel">
@@ -93,69 +115,62 @@ export function PluginBarChart(props: {
           {widget.emptyText ?? "No chart data."}
         </p>
       ) : (
-        <ChartSvg
-          aria-label={widget.title}
-          className="min-h-48"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-60 w-full"
+          config={chartConfig}
         >
-          {[maximum, maximum - span / 2, minimum].map((tickValue, index) => {
-            const y = layout.top + index * (layout.plotHeight / 2);
-            return (
-              <g key={index}>
-                <line
-                  stroke="var(--color-dashboard-border-subtle)"
-                  strokeDasharray="3 5"
-                  x1={layout.left}
-                  x2={layout.width - layout.right}
-                  y1={y}
-                  y2={y}
+          <BarChart
+            aria-label={widget.title}
+            data={data}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis
+              format={(value) => formatChartValue(value, seriesFormat)}
+              maximum={maximum}
+              minimum={minimum}
+            />
+            <ActivityChartXAxis
+              centered
+              dataKey="id"
+              formatLabel={(id) =>
+                formatActivityCategoryLabel(labels.get(id) ?? id)
+              }
+              keys={categories.map((category) => category.id)}
+            />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  formatLabel={(id) =>
+                    formatActivityCategoryTooltipLabel(labels.get(id) ?? id)
+                  }
+                  rows={({ category }: (typeof data)[number]) =>
+                    widget.series.map((series) => [
+                      series.label,
+                      formatChartValue(
+                        category.values[series.key] ?? 0,
+                        series.format,
+                      ),
+                    ])
+                  }
                 />
-                <ChartAxisLabel textAnchor="end" x={layout.left - 6} y={y + 3}>
-                  {formatChartValue(tickValue, seriesFormat)}
-                </ChartAxisLabel>
-              </g>
-            );
-          })}
-          {categories.flatMap((category, categoryIndex) =>
-            widget.series.map((series, seriesIndex) => {
-              const value = category.values[series.key] ?? 0;
-              const renderedHeight = Math.max(
-                value ? 2 : 0,
-                (Math.abs(value) / span) * layout.plotHeight,
-              );
-              const formatted = formatChartValue(value, series.format);
-              return (
-                <Tooltip
-                  content={`${series.label}: ${formatted}`}
-                  key={`${category.id}:${series.key}`}
-                  label={formatActivityCategoryTooltipLabel(category.label)}
-                >
-                  <rect
-                    aria-label={`${formatActivityCategoryTooltipLabel(category.label)}, ${series.label}: ${formatted}`}
-                    fill={seriesColor(series, seriesIndex)}
-                    height={renderedHeight}
-                    opacity={value ? 0.82 : 0.1}
-                    rx="1.5"
-                    tabIndex={value ? 0 : -1}
-                    width={barWidth * 0.75}
-                    x={
-                      layout.left +
-                      categoryIndex * step +
-                      (step - groupWidth) / 2 +
-                      seriesIndex * barWidth
-                    }
-                    y={value >= 0 ? zeroY - renderedHeight : zeroY}
-                  />
-                </Tooltip>
-              );
-            }),
-          )}
-          <ChartCategoryLabels
-            categories={categories}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+              }
+            />
+            {widget.series.map((series, index) => (
+              <Bar
+                dataKey={`series-${index}`}
+                fill={`var(--color-series-${index})`}
+                fillOpacity={0.82}
+                isAnimationActive={false}
+                key={series.key}
+                maxBarSize={54 / widget.series.length}
+                minPointSize={(value) => (value ? 2 : 0)}
+                radius={1.5}
+              />
+            ))}
+          </BarChart>
+        </ChartContainer>
       )}
     </div>
   );
@@ -199,7 +214,11 @@ function commonSeriesFormat(widget: Widget): "usd" | undefined {
   return formats.size === 1 ? widget.series[0]?.format : undefined;
 }
 
-function formatChartValue(value: number, format: "usd" | undefined): string {
+/** Format a plugin chart value as USD or as a number without float noise. */
+export function formatChartValue(
+  value: number,
+  format: "usd" | undefined,
+): string {
   return format === "usd"
     ? formatCostSummary({ total: value })
     : formatChartNumber(value);

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

@@ -1,5 +1,13 @@
 import type { PluginOperationalReport } from "@sentry/junior/api/schema";
 
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
 import { cn } from "../../styles";
 
 export type PluginReportRecordSetType = NonNullable<
@@ -63,42 +71,35 @@ export function PluginReportRecordSet(props: {
               </div>
             ))}
           </div>
-          <div className="hidden overflow-x-auto border-t border-dashboard-border-subtle sm:block">
-            <table className="w-full min-w-[36rem] border-collapse text-left">
-              <thead className="bg-dashboard-overlay-soft font-sans font-medium text-xs text-dashboard-text-muted">
-                <tr>
+          <div className="hidden border-t border-dashboard-border-subtle sm:block">
+            <Table className="min-w-[36rem]">
+              <TableHeader className="bg-dashboard-overlay-soft">
+                <TableRow>
                   {fields.map((field) => (
-                    <th
-                      className="border-b border-dashboard-border-subtle px-5 py-2.5 font-medium"
-                      key={field.key}
-                      scope="col"
-                    >
+                    <TableHead className="px-5" key={field.key} scope="col">
                       {field.label}
-                    </th>
+                    </TableHead>
                   ))}
-                </tr>
-              </thead>
-              <tbody>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
                 {records.map((record) => (
-                  <tr
-                    className={cn(
-                      "transition-colors hover:bg-dashboard-fill-soft",
-                      rowToneClass(record.tone),
-                    )}
+                  <TableRow
+                    className={rowToneClass(record.tone)}
                     key={record.id}
                   >
                     {fields.map((field) => (
-                      <td
-                        className="max-w-72 truncate border-b border-dashboard-border-subtle px-5 py-3 font-mono text-xs text-dashboard-text-muted"
+                      <TableCell
+                        className="max-w-72 truncate px-5 py-3 font-mono text-xs text-dashboard-text-muted"
                         key={field.key}
                       >
                         {record.values[field.key] ?? ""}
-                      </td>
+                      </TableCell>
                     ))}
-                  </tr>
+                  </TableRow>
                 ))}
-              </tbody>
-            </table>
+              </TableBody>
+            </Table>
           </div>
         </>
       )}

package/src/client/pages/system/README.md

@@ -0,0 +1,23 @@
+# System pages
+
+## Workspaces
+
+`/system/workspaces` lists the Workspace recipes. The URL selects one recipe:
+`/system/workspaces/:id` keeps the list and opens `WorkspaceDetails` in the
+shared `DetailsPanel`. The panel is 400px wide at 1280px and above. Smaller
+screens use the bottom sheet. Repository pages link to these details.
+
+The panel shows the list item at once. The detail read adds the current
+snapshot, because the list report does not include snapshots. Snapshot loading
+and errors stay in the Snapshot row. Usage shows switches for the last 30 days.
+Workspace switch counts are daily only.
+
+Edit and Delete are in the panel header. List rows have no actions. Edit opens
+the full-page editor at `/system/workspaces/:id/edit`. Save and Cancel return to
+the details. A new Workspace opens its details after create.
+
+Close and Escape return focus to the selected row. `WorkspaceDeleteDialog`
+names the recipe, keeps errors inside the dialog, and blocks dismissal while the
+request runs. A successful delete closes the details and shows a toast.
+
+Browser coverage lives in `e2e/system.spec.ts`.

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

@@ -12,10 +12,14 @@ const systemNavigationItems = [
 ];
 
 /** Render the stable secondary navigation shared by System pages. */
-export function SystemNavigation(props: { children: ReactNode }) {
+export function SystemNavigation(props: {
+  children: ReactNode;
+  className?: string;
+}) {
   return (
     <SecondaryNavigation
       ariaLabel="System navigation"
+      className={props.className}
       items={systemNavigationItems}
     >
       {props.children}

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

@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type {
+  WorkspaceListReport,
+  WorkspaceReport,
+} from "@sentry/junior/api/schema";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+} from "../../components/ui/alert-dialog";
+import { useToastManager } from "../../components/ui/toast";
+import { FormNotice } from "../../components/FormNotice";
+import { deleteDashboardResource } from "../../http";
+import {
+  readWorkspaceApiError,
+  workspaceQueryKey,
+  workspacesQueryKey,
+} from "./workspaceQueries";
+
+/** Confirm Workspace deletion by name and keep a failed request open for retry. */
+export function WorkspaceDeleteDialog(props: {
+  onClose(): void;
+  onDeleted(): void;
+  returnFocus(): HTMLElement | false;
+  workspace: WorkspaceReport;
+}) {
+  const [open, setOpen] = useState(true);
+  const queryClient = useQueryClient();
+  const toast = useToastManager();
+  const deletion = useMutation({
+    mutationFn: () =>
+      deleteDashboardResource(
+        `/api/workspaces/${encodeURIComponent(props.workspace.id)}`,
+      ),
+    onSuccess: async () => {
+      await queryClient.cancelQueries({ queryKey: workspacesQueryKey });
+      queryClient.setQueryData<WorkspaceListReport>(
+        workspacesQueryKey,
+        (current) =>
+          current && {
+            ...current,
+            workspaces: current.workspaces.filter(
+              (item) => item.id !== props.workspace.id,
+            ),
+          },
+      );
+      props.onDeleted();
+      // Drop the detail read too, so a later visit shows the not-found state.
+      queryClient.removeQueries({
+        queryKey: workspaceQueryKey(props.workspace.id),
+      });
+      toast.add({
+        title: "Workspace deleted",
+        description: props.workspace.name,
+        type: "success",
+      });
+      setOpen(false);
+    },
+  });
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(next, details) => {
+        if (deletion.isPending) details.cancel();
+        else setOpen(next);
+      }}
+      onOpenChangeComplete={(next) => {
+        if (!next) props.onClose();
+      }}
+    >
+      <AlertDialogContent finalFocus={props.returnFocus}>
+        <AlertDialogTitle>Delete Workspace?</AlertDialogTitle>
+        <AlertDialogDescription>
+          Delete{" "}
+          <strong className="font-medium text-dashboard-text">
+            {props.workspace.name}
+          </strong>
+          ? Active conversations keep their current Sandbox until the next
+          switch.
+        </AlertDialogDescription>
+        {deletion.error ? (
+          <FormNotice
+            tone="error"
+            title={readWorkspaceApiError(
+              deletion.error,
+              "Could not delete the Workspace. Try again.",
+            )}
+          />
+        ) : null}
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={deletion.isPending}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            disabled={deletion.isPending}
+            onClick={() => deletion.mutate()}
+            variant="danger"
+          >
+            {deletion.isPending ? "Deleting…" : "Delete Workspace"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}