@spree/dashboard-core 6.0.3 → 6.0.4

package/src/components/developer-inspector-drawer.tsx

@@ -0,0 +1,322 @@
+import {
+  Badge,
+  Button,
+  CopyToClipboardButton,
+  cn,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@spree/dashboard-ui'
+import { BugIcon, InfoIcon, Trash2Icon, XIcon } from '@spree/dashboard-ui/icons'
+// Deep import keeps the JSON viewer out of the dashboard-ui barrel's chunk.
+import { JsonValueView } from '@spree/dashboard-ui/spree/json-value-view'
+import { Link } from '@tanstack/react-router'
+import { memo, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  clearDeveloperInspector,
+  type DeveloperInspectorEntry,
+  isFailedEntry,
+} from '../lib/developer-inspector'
+import { entryToCurl, entryToSdkCall } from '../lib/request-snippets'
+import {
+  useDeveloperInspectorEntries,
+  useOptionalDeveloperInspector,
+} from '../providers/developer-inspector-provider'
+import { useJsonLinkResolver } from '../providers/json-link-resolver-provider'
+
+export interface DeveloperInspectorDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  systemInfoPath?: string
+}
+
+export function DeveloperInspectorDrawer({
+  open,
+  onOpenChange,
+  systemInfoPath,
+}: DeveloperInspectorDrawerProps) {
+  const { t } = useTranslation()
+  const entries = useDeveloperInspectorEntries()
+  const errors = entries.filter(isFailedEntry)
+  const sendFeedback = useOptionalDeveloperInspector()?.sendFeedback
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="bottom"
+        showCloseButton={false}
+        // Always dark, like browser devtools. The height uses the side variant
+        // so it replaces the sheet's own `data-[side=bottom]:h-auto`.
+        className="dark overflow-hidden rounded-t-2xl data-[side=bottom]:h-[min(75dvh,720px)]"
+      >
+        <div className="flex shrink-0 items-start gap-3 border-b border-border-subtle px-4 py-3">
+          <div className="min-w-0 flex-1">
+            <SheetTitle>{t('admin.components.developer_inspector.title')}</SheetTitle>
+            <SheetDescription className="text-xs">
+              {t('admin.components.developer_inspector.description')}
+            </SheetDescription>
+          </div>
+          {sendFeedback && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                onOpenChange(false)
+                sendFeedback('bug')
+              }}
+            >
+              <BugIcon />
+              {t('admin.account.report_issue')}
+            </Button>
+          )}
+          {systemInfoPath && (
+            <Button variant="ghost" size="sm" asChild>
+              <Link to={systemInfoPath as never} onClick={() => onOpenChange(false)}>
+                <InfoIcon />
+                {t('admin.components.developer_inspector.system_info')}
+              </Link>
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              clearDeveloperInspector()
+              setSelectedId(null)
+            }}
+            disabled={entries.length === 0}
+          >
+            <Trash2Icon />
+            {t('admin.components.developer_inspector.clear')}
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => onOpenChange(false)}
+            aria-label={t('admin.actions.close')}
+          >
+            <XIcon />
+          </Button>
+        </div>
+
+        <Tabs defaultValue="requests" className="min-h-0 flex-1 gap-0">
+          <div className="shrink-0 px-4 pt-3">
+            <TabsList>
+              <TabsTrigger value="requests" count={entries.length}>
+                {t('admin.components.developer_inspector.tabs.requests')}
+              </TabsTrigger>
+              <TabsTrigger value="errors" count={errors.length}>
+                {t('admin.components.developer_inspector.tabs.errors')}
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent value="requests" className="min-h-0 overflow-hidden">
+            <RequestsPanel
+              entries={entries}
+              selectedId={selectedId}
+              onSelect={setSelectedId}
+              emptyLabel={t('admin.components.developer_inspector.empty_requests')}
+            />
+          </TabsContent>
+          <TabsContent value="errors" className="min-h-0 overflow-hidden">
+            <RequestsPanel
+              entries={errors}
+              selectedId={selectedId}
+              onSelect={setSelectedId}
+              emptyLabel={t('admin.components.developer_inspector.empty_errors')}
+              showErrorCode
+            />
+          </TabsContent>
+        </Tabs>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+function RequestsPanel({
+  entries,
+  selectedId,
+  onSelect,
+  emptyLabel,
+  showErrorCode = false,
+}: {
+  entries: DeveloperInspectorEntry[]
+  selectedId: number | null
+  onSelect: (id: number) => void
+  emptyLabel: string
+  showErrorCode?: boolean
+}) {
+  const { t } = useTranslation()
+  const selected = entries.find((entry) => entry.id === selectedId)
+
+  if (entries.length === 0) {
+    return <p className="p-4 text-muted-foreground">{emptyLabel}</p>
+  }
+
+  return (
+    <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] md:grid-rows-1">
+      <ul className="themed-scrollbar min-h-0 overflow-auto border-border-subtle border-b p-2 md:border-r md:border-b-0">
+        {entries.map((entry) => (
+          <li key={entry.id}>
+            <button
+              type="button"
+              onClick={() => onSelect(entry.id)}
+              aria-current={entry.id === selectedId || undefined}
+              className={cn(
+                'grid w-full grid-cols-[3.5rem_3rem_minmax(0,1fr)_auto] items-center gap-2 rounded-md px-2 py-1.5 text-left font-mono text-xs transition-colors duration-100 hover:bg-accent',
+                entry.id === selectedId && 'bg-accent',
+              )}
+            >
+              <span className="font-medium">{entry.method}</span>
+              <StatusBadge entry={entry} />
+              <span className="min-w-0">
+                <span className="block truncate">{entry.path}</span>
+                <span className="block truncate text-muted-foreground">
+                  {showErrorCode && entry.errorCode ? `${entry.errorCode} · ` : ''}
+                  {entry.requestId ?? '—'}
+                </span>
+              </span>
+              <span className="text-muted-foreground tabular-nums">
+                {t('admin.components.developer_inspector.duration_ms', { value: entry.durationMs })}
+              </span>
+            </button>
+          </li>
+        ))}
+      </ul>
+      <div className="themed-scrollbar min-h-0 overflow-auto p-4">
+        {selected ? (
+          <RequestDetail entry={selected} />
+        ) : (
+          <p className="text-muted-foreground">
+            {t('admin.components.developer_inspector.select_request')}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function StatusBadge({ entry }: { entry: DeveloperInspectorEntry }) {
+  const { t } = useTranslation()
+  if (entry.status === null) {
+    return (
+      <Badge variant="destructive">{t('admin.components.developer_inspector.network_error')}</Badge>
+    )
+  }
+  const variant = entry.status >= 400 ? 'destructive' : 'success'
+  return <Badge variant={variant}>{entry.status}</Badge>
+}
+
+// Memoised: the drawer re-renders on every recorded request, and an entry
+// never changes once recorded.
+const RequestDetail = memo(function RequestDetail({ entry }: { entry: DeveloperInspectorEntry }) {
+  const { t } = useTranslation()
+  const copied = t('admin.components.developer_inspector.copied')
+  const hasQuery = !!entry.query && Object.keys(entry.query).length > 0
+  const copies = useMemo(() => {
+    const candidates: [string, string | null][] = [
+      ['copy_curl', entryToCurl(entry)],
+      ['copy_sdk', entryToSdkCall(entry)],
+      [
+        'copy_response',
+        entry.responseBody === undefined ? null : JSON.stringify(entry.responseBody, null, 2),
+      ],
+      ['copy_request_id', entry.requestId],
+    ]
+    return candidates.flatMap(([key, value]) => (value == null ? [] : [{ key, value }]))
+  }, [entry])
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="break-all font-mono text-xs">
+        <span className="font-medium">{entry.method}</span> {entry.url}
+      </p>
+
+      <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1 text-xs">
+        <dt className="text-muted-foreground">
+          {t('admin.components.developer_inspector.status')}
+        </dt>
+        <dd>
+          <StatusBadge entry={entry} />
+        </dd>
+        <dt className="text-muted-foreground">
+          {t('admin.components.developer_inspector.duration')}
+        </dt>
+        <dd className="tabular-nums">
+          {t('admin.components.developer_inspector.duration_ms', { value: entry.durationMs })}
+        </dd>
+        <dt className="text-muted-foreground">
+          {t('admin.components.developer_inspector.request_id')}
+        </dt>
+        <dd className="break-all font-mono" data-testid="developer-inspector-request-id">
+          {entry.requestId ?? '—'}
+        </dd>
+        {entry.errorCode && (
+          <>
+            <dt className="text-muted-foreground">
+              {t('admin.components.developer_inspector.error_code')}
+            </dt>
+            <dd className="break-all font-mono">
+              {entry.errorCode}
+              {entry.errorMessage && (
+                <span className="block font-sans text-muted-foreground">{entry.errorMessage}</span>
+              )}
+            </dd>
+          </>
+        )}
+      </dl>
+
+      <div className="flex flex-wrap gap-2">
+        {copies.map(({ key, value }) => (
+          <CopyToClipboardButton
+            key={key}
+            value={value}
+            aria-label={t(`admin.components.developer_inspector.${key}`)}
+            label={t(`admin.components.developer_inspector.${key}`)}
+            copiedLabel={copied}
+            size="sm"
+            variant="outline"
+          />
+        ))}
+      </div>
+
+      {hasQuery && (
+        <BodySection title={t('admin.components.developer_inspector.query')} value={entry.query} />
+      )}
+      {entry.requestBody !== undefined && entry.requestBody !== null && (
+        <BodySection
+          title={t('admin.components.developer_inspector.request_body')}
+          value={entry.requestBody}
+        />
+      )}
+      <BodySection
+        title={t('admin.components.developer_inspector.response_body')}
+        value={entry.responseBody}
+      />
+    </div>
+  )
+})
+
+function BodySection({ title, value }: { title: string; value: unknown }) {
+  const { t } = useTranslation()
+  const resolveLink = useJsonLinkResolver()
+  return (
+    <section className="flex flex-col gap-1.5">
+      <h3 className="font-medium text-muted-foreground text-xs">{title}</h3>
+      {value !== null && typeof value === 'object' ? (
+        <JsonValueView value={value} collapsed={1} resolveLink={resolveLink} />
+      ) : (
+        <p className="rounded-md bg-zinc-950 p-3 font-mono text-xs text-zinc-100">
+          {value === undefined ? t('admin.components.developer_inspector.no_body') : String(value)}
+        </p>
+      )}
+    </section>
+  )
+}

package/src/components/file-upload-field.tsx

@@ -12,8 +12,8 @@ import {
   FieldLabel,
   toastManager,
 } from '@spree/dashboard-ui'
-import { FileIcon, UploadCloudIcon, XIcon } from '@spree/dashboard-ui/icons'
-import { type ReactNode, useState } from 'react'
+import { FileIcon, UploadCloudIcon, UploadIcon, XIcon } from '@spree/dashboard-ui/icons'
+import { type ReactNode, useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useFileUpload } from '../hooks/use-file-upload'
 
@@ -203,46 +203,65 @@ export function FileUploadField({
           }
         : null
 
+  const inputRef = useRef<HTMLInputElement>(null)
+  const inputId = useId()
+  const input = (
+    <input
+      ref={inputRef}
+      id={inputId}
+      type="file"
+      accept={accept}
+      className="sr-only"
+      // With a file attached, Replace is the keyboard's way in; the bare
+      // input would be a second, unlabelled tab stop.
+      tabIndex={attached ? -1 : undefined}
+      disabled={disabled || !!pending}
+      onChange={(e) => {
+        const picked = e.target.files?.[0]
+        if (picked) void handlePicked(picked)
+        e.target.value = ''
+      }}
+    />
+  )
+
   return (
     <Field>
       {label && <FieldLabel>{label}</FieldLabel>}
       <div className="flex flex-col gap-2">
-        {/* A <label> wrapping the file input: clicking anywhere opens the
-            picker natively. The input is sr-only (not display:none) so it
-            stays in the tab order — keyboard users Tab to it and press
-            Enter/Space; the label paints a focus ring via has-[:focus-visible]. */}
-        <label
-          className={cn(
-            'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-border border-dashed px-4 py-8 text-center transition-colors hover:bg-accent/50',
-            'has-[:focus-visible]:border-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50',
-            (disabled || !!pending) && 'pointer-events-none opacity-60',
-          )}
-          onDragOver={(e) => e.preventDefault()}
-          onDrop={(e) => {
-            e.preventDefault()
-            const dropped = e.dataTransfer.files?.[0]
-            if (dropped) void handlePicked(dropped)
-          }}
-        >
-          <UploadCloudIcon className="size-6 text-muted-foreground" />
-          <span className="text-muted-foreground text-sm">
-            {dropLabel ?? t('admin.components.file_upload.drop_label')}
-          </span>
-          <span className="mt-1 inline-flex h-8 items-center rounded-md border border-border bg-background px-3 font-medium text-sm hover:bg-accent">
-            {browseLabel ?? t('admin.components.file_upload.browse')}
-          </span>
-          <input
-            type="file"
-            accept={accept}
-            className="sr-only"
-            disabled={disabled || !!pending}
-            onChange={(e) => {
-              const picked = e.target.files?.[0]
-              if (picked) void handlePicked(picked)
-              e.target.value = ''
+        {/* With a file attached the row below is the whole field — Replace
+            and Remove act on it — so the drop zone only shows while empty.
+            The input itself always renders, so Replace has something to open. */}
+        {attached ? (
+          input
+        ) : (
+          // A <label> wrapping the file input: clicking anywhere opens the
+          // picker natively. The input is sr-only (not display:none) so it
+          // stays in the tab order — keyboard users Tab to it and press
+          // Enter/Space; the label paints a focus ring via has-[:focus-visible].
+          <label
+            htmlFor={inputId}
+            className={cn(
+              'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-border border-dashed px-4 py-8 text-center transition-colors hover:bg-accent/50',
+              'has-[:focus-visible]:border-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50',
+              disabled && 'pointer-events-none opacity-60',
+            )}
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={(e) => {
+              e.preventDefault()
+              const dropped = e.dataTransfer.files?.[0]
+              if (dropped) void handlePicked(dropped)
             }}
-          />
-        </label>
+          >
+            <UploadCloudIcon className="size-6 text-muted-foreground" />
+            <span className="text-muted-foreground text-base">
+              {dropLabel ?? t('admin.components.file_upload.drop_label')}
+            </span>
+            <span className="mt-1 inline-flex h-8 items-center rounded-md border border-border bg-background px-3 font-medium text-base hover:bg-accent">
+              {browseLabel ?? t('admin.components.file_upload.browse')}
+            </span>
+            {input}
+          </label>
+        )}
 
         {attached && (
           <Attachment className="w-full" state={attached.state}>
@@ -269,6 +288,14 @@ export function FileUploadField({
               </AttachmentDescription>
             </AttachmentContent>
             <AttachmentActions>
+              <AttachmentAction
+                type="button"
+                aria-label={t('admin.components.file_upload.replace')}
+                onClick={() => inputRef.current?.click()}
+                disabled={disabled || !!pending}
+              >
+                <UploadIcon />
+              </AttachmentAction>
               <AttachmentAction
                 type="button"
                 aria-label={t('admin.actions.remove')}

package/src/components/image-upload-field.tsx

@@ -17,6 +17,8 @@ export interface ImageUploadFieldProps {
   /** Accepted MIME types. Defaults to PNG/JPEG/WebP. */
   accept?: string
   disabled?: boolean
+  /** Called with true while a picked image uploads; see `FileUploadField`. */
+  onUploadingChange?: (uploading: boolean) => void
 }
 
 /**
@@ -32,6 +34,7 @@ export function ImageUploadField({
   square = false,
   accept = 'image/png,image/jpeg,image/webp',
   disabled = false,
+  onUploadingChange,
 }: ImageUploadFieldProps) {
   const { t } = useTranslation()
 
@@ -45,6 +48,7 @@ export function ImageUploadField({
       label={label}
       help={help}
       disabled={disabled}
+      onUploadingChange={onUploadingChange}
       dropLabel={t('admin.components.file_upload.drop_image_label')}
       browseLabel={t('admin.image_upload.upload_cta')}
       mediaClassName={square ? 'size-16' : 'h-16 w-28'}

package/src/components/import-wizard-dialog.tsx

@@ -195,7 +195,7 @@ function ImportWizard({
           {imp && (
             <>
               <span aria-hidden className="h-4 w-px shrink-0 bg-border" />
-              <span className="truncate text-muted-foreground text-sm">
+              <span className="truncate text-muted-foreground text-base">
                 {`${importTypeLabel(imp.type)} · ${imp.number}`}
               </span>
             </>
@@ -243,7 +243,7 @@ function ImportWizard({
           {isError ? (
             <div className="flex flex-col items-center gap-3 py-12 text-center">
               <AlertTriangleIcon className="size-8 text-destructive" />
-              <p className="text-muted-foreground text-sm">{t('admin.imports.load_failed')}</p>
+              <p className="text-muted-foreground text-base">{t('admin.imports.load_failed')}</p>
               <Button variant="outline" onClick={() => refetch()}>
                 {t('admin.imports.try_again')}
               </Button>
@@ -279,7 +279,7 @@ function ImportWizard({
           button below the fold. */}
       {(isMapping || isCompleted) && imp && (
         <DialogFooter className="h-16 shrink-0 flex-row items-center justify-between border-border-subtle bg-background px-4 py-0 sm:justify-between">
-          <span className="text-muted-foreground text-sm">
+          <span className="text-muted-foreground text-base">
             {isMapping && missingRequired.length > 0
               ? t('admin.imports.mapping.missing_required', {
                   fields: missingRequired.map((f) => f.label).join(', '),
@@ -401,7 +401,7 @@ function MappingStep({
     <Card>
       <CardHeader>
         <CardTitle>{t('admin.imports.mapping.title')}</CardTitle>
-        <p className="text-muted-foreground text-sm">
+        <p className="text-muted-foreground text-base">
           {t('admin.imports.mapping.description', { type: importTypeLabel(imp.type) })}
         </p>
       </CardHeader>
@@ -458,7 +458,7 @@ function MappingStep({
                         </SelectContent>
                       </Select>
                     </TableCell>
-                    <TableCell className="max-w-48 truncate text-muted-foreground text-sm">
+                    <TableCell className="max-w-48 truncate text-muted-foreground text-base">
                       {sample}
                     </TableCell>
                   </TableRow>
@@ -503,7 +503,7 @@ function ProcessingCard({ imp, retryPass }: { imp: PanelImport; retryPass: boole
         {/* value={null} = Base UI's indeterminate state while rows are created */}
         <Progress value={preparing ? null : percent} />
 
-        <p className="text-sm">
+        <p className="text-base">
           {preparing ? (
             t('admin.imports.processing.preparing')
           ) : retryPass && imp.failed_rows_count > 0 ? (
@@ -524,7 +524,7 @@ function ProcessingCard({ imp, retryPass }: { imp: PanelImport; retryPass: boole
           )}
         </p>
 
-        <p className="text-muted-foreground text-sm">{t('admin.imports.processing.note')}</p>
+        <p className="text-muted-foreground text-base">{t('admin.imports.processing.note')}</p>
       </CardContent>
     </Card>
   )
@@ -542,7 +542,7 @@ function ResultsCard({ imp }: { imp: PanelImport }) {
       <CardContent className="flex flex-col items-center gap-3 py-8 text-center">
         <CheckCircle2Icon className="size-10 text-success" />
         <p className="font-medium">{t('admin.imports.results.completed_title')}</p>
-        <p className="text-muted-foreground text-sm">
+        <p className="text-muted-foreground text-base">
           {t('admin.imports.results.summary', {
             completed: imp.completed_rows_count.toLocaleString(),
             failed: imp.failed_rows_count.toLocaleString(),
@@ -561,7 +561,7 @@ function FailedCard({ imp }: { imp: PanelImport }) {
       <CardContent className="flex flex-col items-center gap-3 py-8 text-center">
         <AlertTriangleIcon className="size-10 text-destructive" />
         <p className="font-medium">{t('admin.imports.failed.title')}</p>
-        <p className="text-muted-foreground text-sm">{t('admin.imports.failed.description')}</p>
+        <p className="text-muted-foreground text-base">{t('admin.imports.failed.description')}</p>
         {imp.processing_errors && (
           <code className="max-w-full overflow-x-auto rounded-md bg-muted p-3 text-left text-xs">
             {imp.processing_errors}
@@ -609,7 +609,9 @@ function FailedRowsCard({ imp }: { imp: PanelImport }) {
         {isError ? (
           <div className="flex items-center gap-3 p-4">
             <AlertTriangleIcon className="size-4 shrink-0 text-destructive" />
-            <span className="text-muted-foreground text-sm">{t('admin.imports.load_failed')}</span>
+            <span className="text-muted-foreground text-base">
+              {t('admin.imports.load_failed')}
+            </span>
             <Button variant="outline" size="sm" onClick={() => refetch()}>
               {t('admin.imports.try_again')}
             </Button>
@@ -651,7 +653,7 @@ function FailedRowsCard({ imp }: { imp: PanelImport }) {
                 >
                   <ChevronLeftIcon className="size-4" />
                 </Button>
-                <span className="text-muted-foreground text-sm">
+                <span className="text-muted-foreground text-base">
                   {page} / {meta.pages}
                 </span>
                 <Button
@@ -680,7 +682,7 @@ function FailedRow({ row }: { row: PanelImportRow }) {
     <>
       <TableRow>
         <TableCell className="text-muted-foreground">{row.row_number}</TableCell>
-        <TableCell className="text-destructive text-sm">
+        <TableCell className="text-destructive text-base">
           {String(row.validation_errors ?? '')}
         </TableCell>
         <TableCell className="text-right">