@spree/dashboard-core 6.0.2 → 6.0.4

package/src/products/use-product-form-data.ts

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback } from 'react'
 import type {
   PanelCollection,
   PanelDeliveryProfile,
@@ -162,9 +163,35 @@ export function useFormCartonPackageTypes() {
 }
 
 /**
- * Removing a file already on the product. A panel whose client registers no
- * deletion answers a no-op mutation, so the gallery still drops the row from
- * the form and the save reconciles it.
+ * Deletes the media a product form marked for removal, after the product
+ * itself saved. Resolves to how many deletes failed, so the form can say so.
+ */
+export function useCommitRemovedProductMedia(productId: string) {
+  const client = getApiClient()
+  const queryClient = useQueryClient()
+  const mediaKey = useResourceKey('products', productId, 'media')
+
+  return useCallback(
+    async (mediaIds: string[] | undefined) => {
+      // Independent deletes, so all at once: a bulk removal of twenty files
+      // waits on one round trip rather than twenty.
+      const results = await Promise.allSettled(
+        (mediaIds ?? []).map((mediaId) => client.deleteProductMedia?.(productId, mediaId)),
+      )
+      const failed = results.filter((result) => result.status === 'rejected').length
+      if (mediaIds?.length) await queryClient.invalidateQueries({ queryKey: mediaKey })
+      return failed
+    },
+    [client, productId, queryClient, mediaKey],
+  )
+}
+
+/**
+ * Removing a file already on the product, straight away.
+ *
+ * @deprecated The product form now removes files on save — mark them in
+ * `removed_media_ids` and commit with `useCommitRemovedProductMedia`. Kept
+ * until the next minor release.
  */
 export function useFormDeleteProductMedia(productId: string) {
   const client = getApiClient()

package/src/products/variant-edit-sheet.tsx

@@ -315,7 +315,7 @@ export function VariantEditSheet({ form, variantIndex, formKey, open, onOpenChan
 
           {cartonTypesSupported && (
             <FormSection title={t('admin.products.variants.sheet.packing')}>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-base text-muted-foreground">
                 {t('admin.products.variants.sheet.packing_help')}
               </p>
               {knownEmpty && (
@@ -447,7 +447,7 @@ export function VariantEditSheet({ form, variantIndex, formKey, open, onOpenChan
           )}
 
           <FormSection title={t('admin.products.variants.sheet.customs')}>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-base text-muted-foreground">
               {t('admin.products.variants.sheet.customs_help')}
             </p>
             <div className="grid grid-cols-2 gap-3">
@@ -503,7 +503,7 @@ export function VariantEditSheet({ form, variantIndex, formKey, open, onOpenChan
           </FormSection>
 
           <FormSection title={t('admin.products.variants.sheet.ordering')}>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-base text-muted-foreground">
               {t('admin.products.variants.sheet.ordering_help')}
             </p>
             <div className="grid grid-cols-2 gap-3">

package/src/products/variants-options-builder.tsx

@@ -110,7 +110,12 @@ export function VariantsOptionsBuilder({ selected, onChange, extraOptionTypes }:
             const isEditing = expandedIndex === i
             if (isEditing && optionType) {
               return (
-                <li key={ot.id} className="rounded-lg border border-border-subtle p-3">
+                <Item
+                  variant="outline"
+                  render={<li />}
+                  key={ot.id}
+                  className="flex-col items-stretch border-border-subtle"
+                >
                   <OptionPicker
                     optionType={optionType}
                     initialValues={ot.values}
@@ -130,7 +135,7 @@ export function VariantsOptionsBuilder({ selected, onChange, extraOptionTypes }:
                       })
                     }
                   />
-                </li>
+                </Item>
               )
             }
             return (
@@ -157,7 +162,7 @@ export function VariantsOptionsBuilder({ selected, onChange, extraOptionTypes }:
                   </Button>
                   <Button
                     type="button"
-                    variant="ghost"
+                    variant="destructive-ghost"
                     size="icon-sm"
                     aria-label={t('admin.actions.remove')}
                     onClick={() => removeAt(i)}
@@ -172,14 +177,14 @@ export function VariantsOptionsBuilder({ selected, onChange, extraOptionTypes }:
       )}
 
       {isAdding ? (
-        <div className="rounded-lg border border-border-subtle p-3">
+        <Item variant="outline" className="flex-col items-stretch border-border-subtle">
           <AddOptionForm
             availableTypes={availableTypes}
             allOptionTypes={allOptionTypes}
             onCancel={() => setIsAdding(false)}
             onSave={(payload) => upsertAt(null, payload)}
           />
-        </div>
+        </Item>
       ) : (
         <div>
           <Button type="button" variant="outline" size="sm" onClick={() => setIsAdding(true)}>
@@ -373,7 +378,7 @@ function OptionPicker({ optionType, initialValues, onSave, onCancel }: OptionPic
   return (
     <div className="flex flex-col gap-3">
       <div className="flex items-center justify-between">
-        <div className="text-sm font-medium">{optionType.label}</div>
+        <div className="text-base font-medium">{optionType.label}</div>
       </div>
       <div className="flex flex-wrap gap-2">
         {available.map((v) => {
@@ -461,7 +466,7 @@ function CreateOptionTypeInline({
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="text-sm font-medium">
+      <div className="text-base font-medium">
         {t('admin.products.variants.create_option_type_title')}
       </div>
       <Field>
@@ -530,7 +535,7 @@ function CreateOptionValueInline({ onCancel, onCreate, isPending }: CreateOption
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="text-sm font-medium">{t('admin.products.variants.create_value_title')}</div>
+      <div className="text-base font-medium">{t('admin.products.variants.create_value_title')}</div>
       <Field>
         <FieldLabel htmlFor="new-option-value-label">
           {t('admin.fields.option_value.label.label')}

package/src/products/variants-section.tsx

@@ -33,12 +33,23 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from '@spree/dashboard-ui'
-import { PencilIcon, SwatchBookIcon, TriangleAlertIcon, XIcon } from '@spree/dashboard-ui/icons'
+import {
+  ImageIcon,
+  ImagePlusIcon,
+  PencilIcon,
+  SwatchBookIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from '@spree/dashboard-ui/icons'
 import { type CSSProperties, useEffect, useMemo, useState } from 'react'
 import { type UseFormReturn, useFieldArray, useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import type { PanelOptionType as OptionType } from '../api-client'
+import { MediaPickerDialog } from '../components/media-picker-dialog'
 import { BulkVariantsDialog } from './bulk-variants-dialog'
 import {
   useFormOptionTypes as useOptionTypes,
@@ -145,6 +156,7 @@ export function VariantsSection({ form, seedFromType = false, formKey = 'product
   })
 
   const [editingIndex, setEditingIndex] = useState<number | null>(null)
+  const [pickingImagesFor, setPickingImagesFor] = useState<number | null>(null)
   const [sheetOpen, setSheetOpen] = useState(false)
   const [bulkOpen, setBulkOpen] = useState(false)
   const [orphanedKeys, setOrphanedKeys] = useState<string[]>([])
@@ -407,7 +419,7 @@ export function VariantsSection({ form, seedFromType = false, formKey = 'product
                 items={fields.map((f) => f._key)}
                 strategy={verticalListSortingStrategy}
               >
-                <Table>
+                <Table roundedTop>
                   <TableHeader>
                     <TableRow>
                       {!isSimpleProduct && (
@@ -433,6 +445,7 @@ export function VariantsSection({ form, seedFromType = false, formKey = 'product
                         optionTypes={allOptionTypes}
                         onEdit={() => handleEditRow(index)}
                         onRemove={() => handleRowRemove(index)}
+                        onPickImages={() => setPickingImagesFor(index)}
                       />
                     ))}
                   </TableBody>
@@ -445,6 +458,15 @@ export function VariantsSection({ form, seedFromType = false, formKey = 'product
 
       <BulkVariantsDialog form={form} open={bulkOpen} onOpenChange={setBulkOpen} />
 
+      {pickingImagesFor !== null && (
+        <VariantImagesPicker
+          form={form}
+          variantIndex={pickingImagesFor}
+          optionTypes={allOptionTypes}
+          onClose={() => setPickingImagesFor(null)}
+        />
+      )}
+
       {editingIndex !== null && (
         <VariantEditSheet
           form={form}
@@ -470,6 +492,7 @@ interface SortableVariantRowProps {
   optionTypes: OptionType[]
   onEdit: () => void
   onRemove: () => void
+  onPickImages: () => void
 }
 
 function SortableVariantRow({
@@ -480,6 +503,7 @@ function SortableVariantRow({
   optionTypes,
   onEdit,
   onRemove,
+  onPickImages,
 }: SortableVariantRowProps) {
   const { t } = useTranslation()
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -510,7 +534,19 @@ function SortableVariantRow({
           <DragHandle attributes={attributes} listeners={listeners} />
         </TableCell>
       )}
-      <TableCell className="font-medium">{label}</TableCell>
+      <TableCell className="font-medium">
+        <div className="flex items-center gap-3">
+          {!isSimpleProduct && (
+            <VariantImageButton
+              form={form}
+              variantId={variant.id}
+              label={label}
+              onPick={onPickImages}
+            />
+          )}
+          {label}
+        </div>
+      </TableCell>
       <TableCell>
         <Input
           aria-label={t('admin.fields.variant.sku.label')}
@@ -532,7 +568,7 @@ function SortableVariantRow({
           {!isSimpleProduct && (
             <Button
               type="button"
-              variant="ghost"
+              variant="destructive-ghost"
               size="icon-sm"
               aria-label={t('admin.products.variants.remove_row_aria', { name: label })}
               onClick={onRemove}
@@ -545,3 +581,159 @@ function SortableVariantRow({
     </TableRow>
   )
 }
+
+type MediaRow = NonNullable<ProductFormValues['media']>[number]
+
+/** A media row's stable key: its id once saved, before that its upload's. */
+function mediaRowKey(media: MediaRow): string | null {
+  return media.id ?? media.signed_id ?? media.uploadId ?? null
+}
+
+/**
+ * A variant's image: its first assigned image (in gallery
+ * order) as a thumbnail, with a count when it has more, or an empty dashed
+ * square. Opens the picker of the product's images. An unsaved variant has no
+ * id to assign media to yet, so its square waits for the save.
+ */
+function VariantImageButton({
+  form,
+  variantId,
+  label,
+  onPick,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  form: UseFormReturn<ProductFormValues, any, any>
+  variantId?: string | null
+  label: string
+  onPick: () => void
+}) {
+  const { t } = useTranslation()
+  const media = useWatch({ control: form.control, name: 'media' }) ?? []
+  const assigned = variantId ? media.filter((m) => m.variant_ids?.includes(variantId)) : []
+  const first = assigned[0]
+  const preview = first?.previewUrl ?? null
+
+  const button = (
+    <button
+      type="button"
+      // `aria-disabled` rather than `disabled`: a disabled button gets no
+      // pointer events, so the tooltip saying why could never open.
+      onClick={variantId ? onPick : undefined}
+      aria-disabled={!variantId || undefined}
+      aria-label={t('admin.products.variants.images_aria', { name: label })}
+      className={cn(
+        'relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-card text-muted-foreground transition-colors hover:text-foreground focus-visible:shadow-field-focus aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:text-muted-foreground',
+        first ? 'border border-border-card' : 'border border-border border-dashed',
+      )}
+    >
+      {preview ? (
+        <img src={preview} alt="" className="size-full object-cover" />
+      ) : first ? (
+        <ImageIcon className="size-4" />
+      ) : (
+        <ImagePlusIcon className="size-4" />
+      )}
+      {assigned.length > 1 && (
+        <span className="absolute right-0.5 bottom-0.5 rounded bg-black/60 px-1 text-[10px] text-white tabular-nums leading-4">
+          +{assigned.length - 1}
+        </span>
+      )}
+    </button>
+  )
+
+  if (variantId) return button
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent>{t('admin.products.variants.images_unsaved')}</TooltipContent>
+    </Tooltip>
+  )
+}
+
+/**
+ * The media picker over this product's own images, with the variant's
+ * current ones ticked. Done applies exactly the ticked set — the same
+ * many-to-many assignment the media editor's variant pills make, seen from
+ * the variant's side — and, like every product edit, saves with the product.
+ */
+function VariantImagesPicker({
+  form,
+  variantIndex,
+  optionTypes,
+  onClose,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  form: UseFormReturn<ProductFormValues, any, any>
+  variantIndex: number
+  optionTypes: OptionType[]
+  onClose: () => void
+}) {
+  const { t } = useTranslation()
+  const variant = form.getValues(`variants.${variantIndex}`)
+  const variantId = variant?.id
+  if (!variant || !variantId) return null
+
+  const label = variantDisplayLabel(
+    variant,
+    t('admin.products.variants.default_variant'),
+    optionTypes,
+  )
+  const rows = form.getValues('media') ?? []
+  const options = rows.flatMap((m) => {
+    const key = mediaRowKey(m)
+    if (!key) return []
+    return [
+      {
+        id: key,
+        alt: m.alt,
+        filename: m.filename,
+        media_type: m.media_type,
+        small_url: m.previewUrl ?? null,
+      },
+    ]
+  })
+  const assigned = new Set(
+    rows.filter((m) => m.variant_ids?.includes(variantId)).flatMap((m) => mediaRowKey(m) ?? []),
+  )
+  const initialSelection = options.filter((option) => assigned.has(option.id))
+
+  return (
+    <MediaPickerDialog
+      open
+      onOpenChange={(open) => !open && onClose()}
+      // Keyed on the files and their alt text, so a file added or renamed
+      // since the last opening shows up rather than a cached copy.
+      queryKey={`variant-images-${variantId}-${options.map((o) => `${o.id}:${o.alt ?? ''}`).join(',')}`}
+      // Local, so the list is the form's — including files added this session.
+      search={async (query) => ({
+        data: query
+          ? options.filter((o) =>
+              `${o.alt ?? ''} ${o.filename ?? ''}`.toLowerCase().includes(query.toLowerCase()),
+            )
+          : options,
+      })}
+      initialSelection={initialSelection}
+      allowEmptyConfirm
+      browseControls={false}
+      // Listed in the Media card's order, so the first ticked is the one the
+      // variant row shows; the badge says which, live.
+      firstSelectedBadge={t('admin.products.variants.thumbnail_badge')}
+      title={t('admin.products.variants.images_title', { name: label })}
+      description={t('admin.products.variants.images_description')}
+      confirmLabel={t('admin.actions.done')}
+      onConfirm={(picked) => {
+        const ticked = new Set(picked.map((media) => media.id))
+        const next = (form.getValues('media') ?? []).map((m) => {
+          const ids = new Set(m.variant_ids ?? [])
+          const key = mediaRowKey(m)
+          if (key && ticked.has(key)) ids.add(variantId)
+          else ids.delete(variantId)
+          return { ...m, variant_ids: [...ids] }
+        })
+        form.setValue('media', next, { shouldDirty: true })
+        onClose()
+      }}
+    />
+  )
+}

package/src/providers/auth-provider.tsx

@@ -7,6 +7,7 @@ import type {
 } from '@spree/admin-sdk'
 import { createContext, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { getApiClient, type PanelSession } from '../api-client'
+import { clearDeveloperInspector } from '../lib/developer-inspector'
 import { ADMIN_LOCALE_STORAGE_KEY, sessionLocale, switchLocale } from '../lib/i18n'
 import { queryClient } from '../lib/query-client'
 
@@ -122,6 +123,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     // landed. Server-side authorization is unaffected either way; this is about
     // not showing one principal what another may do.
     queryClient.clear()
+    clearDeveloperInspector()
     setToken(null)
     setUser(null)
     clearRefreshTimer()

package/src/providers/developer-inspector-provider.tsx

@@ -0,0 +1,145 @@
+import { toastManager } from '@spree/dashboard-ui'
+import { useHotkey } from '@tanstack/react-hotkeys'
+import {
+  createContext,
+  lazy,
+  type ReactNode,
+  Suspense,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  getDeveloperInspectorEntries,
+  subscribeDeveloperInspector,
+} from '../lib/developer-inspector'
+
+// Developer-only, so the drawer and its JSON viewer ship in their own chunk,
+// fetched the first time an admin opens it.
+const DeveloperInspectorDrawer = lazy(() =>
+  import('../components/developer-inspector-drawer').then((m) => ({
+    default: m.DeveloperInspectorDrawer,
+  })),
+)
+
+export const DEVELOPER_INSPECTOR_HOTKEY = 'Mod+Shift+D'
+
+interface DeveloperInspectorState {
+  open: boolean
+  setOpen: (open: boolean) => void
+  /** Opens the panel's feedback dialog, when it has one; `'bug'` opens it on a bug report. */
+  sendFeedback?: (kind?: 'bug') => void
+}
+
+const DeveloperInspectorContext = createContext<DeveloperInspectorState | null>(null)
+
+/**
+ * The developer inspector: the admin client's recent requests in a bottom
+ * drawer, for debugging an integration or filing an issue. Opened from the
+ * account menu or the keyboard shortcut.
+ *
+ * Records only what `adminClient` sends, so a panel built on another client
+ * mounts it to no effect.
+ */
+export function DeveloperInspectorProvider({
+  children,
+  systemInfoPath,
+  onSendFeedback,
+}: {
+  children: ReactNode
+  /**
+   * Offered in the account menu, the drawer and on a server error, when the
+   * panel takes feedback.
+   */
+  onSendFeedback?: (kind?: 'bug') => void
+  /** Linked from the drawer header, when the panel has a system info page. */
+  systemInfoPath?: string
+}) {
+  const [open, setOpen] = useState(false)
+  // Latches on first open so the lazy chunk loads only for admins who use it,
+  // and the drawer keeps its state between openings.
+  const [mounted, setMounted] = useState(false)
+
+  const value = useMemo<DeveloperInspectorState>(
+    () => ({
+      open,
+      setOpen: (next) => {
+        if (next) setMounted(true)
+        setOpen(next)
+      },
+      sendFeedback: onSendFeedback,
+    }),
+    [open, onSendFeedback],
+  )
+
+  useServerErrorToast(onSendFeedback)
+
+  useHotkey(DEVELOPER_INSPECTOR_HOTKEY, () => value.setOpen(!open))
+
+  return (
+    <DeveloperInspectorContext.Provider value={value}>
+      {children}
+      {mounted && (
+        <Suspense fallback={null}>
+          <DeveloperInspectorDrawer
+            open={value.open}
+            onOpenChange={value.setOpen}
+            systemInfoPath={systemInfoPath}
+          />
+        </Suspense>
+      )}
+    </DeveloperInspectorContext.Provider>
+  )
+}
+
+// One toast for a burst of failures: a failed query is retried, and a page
+// often fires several requests that fail for the same reason.
+const SERVER_ERROR_TOAST_INTERVAL_MS = 10_000
+
+/**
+ * Offers to report a bug when the Admin API answers with a 5xx: that is a
+ * bug in Spree or the installation, not something the admin did wrong.
+ */
+function useServerErrorToast(sendFeedback?: (kind?: 'bug') => void) {
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (!sendFeedback) return
+    let seen = getDeveloperInspectorEntries()[0]?.id ?? 0
+    let toastedAt = 0
+
+    return subscribeDeveloperInspector(() => {
+      const entries = getDeveloperInspectorEntries()
+      const fresh = entries.filter((entry) => entry.id > seen)
+      seen = entries[0]?.id ?? seen
+      const failure = fresh.find((entry) => entry.status !== null && entry.status >= 500)
+      if (!failure || Date.now() - toastedAt < SERVER_ERROR_TOAST_INTERVAL_MS) return
+
+      toastedAt = Date.now()
+      toastManager.add({
+        type: 'error',
+        title: t('admin.components.server_error.title'),
+        description: failure.requestId
+          ? t('admin.components.server_error.request_id', { id: failure.requestId })
+          : undefined,
+        actionProps: {
+          children: t('admin.components.server_error.report'),
+          onClick: () => sendFeedback('bug'),
+        },
+      })
+    })
+  }, [sendFeedback, t])
+}
+
+/** The inspector's state when a provider is mounted, `null` otherwise. */
+export function useOptionalDeveloperInspector(): DeveloperInspectorState | null {
+  return useContext(DeveloperInspectorContext)
+}
+
+/** The recorded requests, newest first. */
+export function useDeveloperInspectorEntries() {
+  return useSyncExternalStore(subscribeDeveloperInspector, getDeveloperInspectorEntries)
+}

package/src/providers/json-link-resolver-provider.tsx

@@ -0,0 +1,27 @@
+import type { JsonValueLinkResolver } from '@spree/dashboard-ui/spree/json-preview-drawer'
+import { createContext, type ReactNode, useContext } from 'react'
+
+const JsonLinkResolverContext = createContext<JsonValueLinkResolver | undefined>(undefined)
+
+/**
+ * Supplies the resolver every "View as JSON" drawer uses to turn IDs in a
+ * payload into links. The admin dashboard mounts it with its prefixed-ID
+ * routes; a panel that mounts none gets plain, unlinked JSON.
+ */
+export function JsonLinkResolverProvider({
+  resolveLink,
+  children,
+}: {
+  resolveLink: JsonValueLinkResolver
+  children: ReactNode
+}) {
+  return (
+    <JsonLinkResolverContext.Provider value={resolveLink}>
+      {children}
+    </JsonLinkResolverContext.Provider>
+  )
+}
+
+export function useJsonLinkResolver(): JsonValueLinkResolver | undefined {
+  return useContext(JsonLinkResolverContext)
+}