@open-mercato/ui 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/src/backend/__tests__/DataTable.propBulkActions.test.tsx

@@ -0,0 +1,200 @@
+/**
+ * @jest-environment jsdom
+ *
+ * Host-owned bulk actions (the `bulkActions` prop).
+ *
+ * `progress/AGENTS.md` requires a server-queued bulk action to return
+ * `{ ok, progressJobId }` so the top bar can track it, and `ui/AGENTS.md`
+ * forbids a page from building its own progress bar instead. The prop path used
+ * to DISCARD that result entirely: no toast, no tracking, and a rejected
+ * promise became an unhandled rejection. This file pins the fix — and pins the
+ * `void` / `true` / `false` returns to their previous behaviour, because the
+ * existing callers flash from their own bulk helper and a second toast would be
+ * a regression.
+ */
+import * as React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import type { ColumnDef } from '@tanstack/react-table'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { DataTable } from '../DataTable'
+
+const mockRouterRefresh = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn(), refresh: mockRouterRefresh }),
+}))
+
+const flashMock = jest.fn()
+jest.mock('../FlashMessages', () => ({
+  flash: (...args: unknown[]) => flashMock(...args),
+}))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({ confirm: jest.fn().mockResolvedValue(true), ConfirmDialogElement: null }),
+}))
+
+type Row = { id: string; name: string }
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+function renderTable(props: Record<string, unknown>) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+  const view = render(
+    React.createElement(
+      QueryClientProvider as any,
+      { client: queryClient },
+      React.createElement(
+        I18nProvider as any,
+        { locale: 'en', dict: {} },
+        React.createElement(DataTable as any, props)
+      )
+    )
+  )
+  return { ...view, cleanupQueryClient: () => queryClient.clear() }
+}
+
+const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
+
+async function selectAllAndRun(label: string) {
+  fireEvent.click(screen.getByRole('checkbox', { name: 'Select all rows' }))
+  await waitFor(() => expect(screen.getByText('1 selected')).toBeInTheDocument())
+  fireEvent.click(screen.getByRole('button', { name: label }))
+}
+
+describe('DataTable prop bulk actions', () => {
+  beforeEach(() => {
+    ;(globalThis as typeof globalThis & { ResizeObserver?: typeof ResizeObserverMock }).ResizeObserver =
+      ResizeObserverMock
+    flashMock.mockReset()
+    mockRouterRefresh.mockReset()
+  })
+
+  it('tracks a queued action that returns a progressJobId and says so', async () => {
+    const rendered = renderTable({
+      columns,
+      data: [{ id: 'r1', name: 'Alice' }],
+      bulkActions: [
+        {
+          id: 'replay',
+          label: 'Replay',
+          onExecute: async () => ({ ok: true, progressJobId: 'job-1' }),
+        },
+      ],
+    })
+
+    try {
+      await selectAllAndRun('Replay')
+      await waitFor(() =>
+        expect(flashMock).toHaveBeenCalledWith(
+          'Bulk action started. Track progress in the top bar.',
+          'success'
+        )
+      )
+      // A queued action must NOT also trigger an immediate refresh — the work
+      // has not happened yet.
+      expect(mockRouterRefresh).not.toHaveBeenCalled()
+      await waitFor(() => expect(screen.queryByText('1 selected')).not.toBeInTheDocument())
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('surfaces a failure result as an error flash instead of swallowing it', async () => {
+    const rendered = renderTable({
+      columns,
+      data: [{ id: 'r1', name: 'Alice' }],
+      bulkActions: [
+        { id: 'replay', label: 'Replay', onExecute: async () => ({ ok: false, message: 'Nope' }) },
+      ],
+    })
+
+    try {
+      await selectAllAndRun('Replay')
+      await waitFor(() => expect(flashMock).toHaveBeenCalledWith('Nope', 'error'))
+      // A failed action keeps the selection so the operator can retry.
+      expect(screen.getByText('1 selected')).toBeInTheDocument()
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('flashes a thrown error rather than leaving an unhandled rejection', async () => {
+    const rendered = renderTable({
+      columns,
+      data: [{ id: 'r1', name: 'Alice' }],
+      bulkActions: [
+        {
+          id: 'replay',
+          label: 'Replay',
+          onExecute: async () => {
+            throw new Error('boom')
+          },
+        },
+      ],
+    })
+
+    try {
+      await selectAllAndRun('Replay')
+      await waitFor(() => expect(flashMock).toHaveBeenCalledWith('boom', 'error'))
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('reports and refreshes for a synchronous result that completed inline', async () => {
+    const rendered = renderTable({
+      columns,
+      data: [{ id: 'r1', name: 'Alice' }],
+      bulkActions: [
+        { id: 'replay', label: 'Replay', onExecute: async () => ({ ok: true, affectedCount: 1 }) },
+      ],
+    })
+
+    try {
+      await selectAllAndRun('Replay')
+      await waitFor(() => expect(flashMock).toHaveBeenCalledWith('Bulk action completed.', 'success'))
+      await waitFor(() => expect(mockRouterRefresh).toHaveBeenCalled())
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('leaves a void-returning action exactly as it was — no second toast', async () => {
+    const onExecute = jest.fn(async () => {})
+    const rendered = renderTable({
+      columns,
+      data: [{ id: 'r1', name: 'Alice' }],
+      bulkActions: [{ id: 'delete', label: 'Delete selected', onExecute }],
+    })
+
+    try {
+      await selectAllAndRun('Delete selected')
+      await waitFor(() => expect(onExecute).toHaveBeenCalled())
+      await waitFor(() => expect(screen.queryByText('1 selected')).not.toBeInTheDocument())
+      expect(flashMock).not.toHaveBeenCalled()
+      expect(mockRouterRefresh).not.toHaveBeenCalled()
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('keeps the selection when the action returns false (a declined confirm)', async () => {
+    const rendered = renderTable({
+      columns,
+      data: [{ id: 'r1', name: 'Alice' }],
+      bulkActions: [{ id: 'delete', label: 'Delete selected', onExecute: async () => false }],
+    })
+
+    try {
+      await selectAllAndRun('Delete selected')
+      await waitFor(() => expect(screen.getByText('1 selected')).toBeInTheDocument())
+      expect(flashMock).not.toHaveBeenCalled()
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+})

package/src/backend/__tests__/DataTable.render.test.tsx

@@ -118,6 +118,82 @@ describe('DataTable SSR render', () => {
     }
   })
 
+  it('renders no expand toggle when expansion props are absent (back-compat)', () => {
+    const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    try {
+      render(
+        <QueryClientProvider client={queryClient}>
+          <I18nProvider locale="en" dict={{}}>
+            <DataTable columns={columns} data={[{ id: '1', name: 'Ada' }]} />
+          </I18nProvider>
+        </QueryClientProvider>,
+      )
+      expect(screen.queryByRole('button', { name: /expand row/i })).toBeNull()
+      expect(screen.queryByRole('button', { name: /collapse row/i })).toBeNull()
+    } finally {
+      queryClient.clear()
+    }
+  })
+
+  it('shows an expand toggle and reveals sub-rows when expansion is enabled', () => {
+    type TreeRow = { id: string; name: string; children?: TreeRow[] }
+    const columns: ColumnDef<TreeRow>[] = [{ accessorKey: 'name', header: 'Name' }]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    try {
+      render(
+        <QueryClientProvider client={queryClient}>
+          <I18nProvider locale="en" dict={{}}>
+            <DataTable<TreeRow>
+              columns={columns}
+              data={[{ id: 'parent', name: 'Parent', children: [{ id: 'child', name: 'Child' }] }]}
+              getSubRows={(row) => row.children}
+              expandable={(row) => Boolean(row.children?.length)}
+            />
+          </I18nProvider>
+        </QueryClientProvider>,
+      )
+
+      // Child hidden until expanded.
+      expect(screen.queryByText('Child')).toBeNull()
+      const toggle = screen.getByRole('button', { name: /expand row/i })
+      fireEvent.click(toggle)
+      expect(screen.getByText('Child')).toBeInTheDocument()
+      // Toggle flips to collapse affordance.
+      expect(screen.getByRole('button', { name: /collapse row/i })).toBeInTheDocument()
+    } finally {
+      queryClient.clear()
+    }
+  })
+
+  it('uses controlled expanded state and reports changes for lazy loading', () => {
+    type TreeRow = { id: string; name: string; children?: TreeRow[] }
+    const columns: ColumnDef<TreeRow>[] = [{ accessorKey: 'name', header: 'Name' }]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    const onExpandedChange = jest.fn()
+    try {
+      render(
+        <QueryClientProvider client={queryClient}>
+          <I18nProvider locale="en" dict={{}}>
+            <DataTable<TreeRow>
+              columns={columns}
+              data={[{ id: 'parent', name: 'Parent' }]}
+              getSubRows={(row) => row.children}
+              expandable={() => true}
+              expanded={{}}
+              onExpandedChange={onExpandedChange}
+            />
+          </I18nProvider>
+        </QueryClientProvider>,
+      )
+      // A row with no loaded children still shows a toggle (lazy-load affordance).
+      fireEvent.click(screen.getByRole('button', { name: /expand row/i }))
+      expect(onExpandedChange).toHaveBeenCalled()
+    } finally {
+      queryClient.clear()
+    }
+  })
+
   it('keeps provided row order in manual sorting mode and reports sorting changes', () => {
     const columns: ColumnDef<Row>[] = [
       { accessorKey: 'name', header: 'Name' },

package/src/backend/__tests__/navBadges.test.ts

@@ -0,0 +1,57 @@
+import { renderHook, act } from '@testing-library/react'
+import { setNavBadge, clearNavBadge, useNavBadge } from '../nav/navBadges'
+
+const HREF = '/backend/caseload'
+const OTHER = '/backend/traces'
+
+// The store is a module singleton; every case starts from an empty slot.
+afterEach(() => {
+  clearNavBadge(HREF)
+  clearNavBadge(OTHER)
+})
+
+describe('nav badges', () => {
+  it('publishes a count to subscribers of that href only', () => {
+    const target = renderHook(() => useNavBadge(HREF))
+    const bystander = renderHook(() => useNavBadge(OTHER))
+
+    act(() => setNavBadge(HREF, { count: 3, tone: 'attention' }))
+
+    expect(target.result.current).toEqual({ count: 3, tone: 'attention' })
+    expect(bystander.result.current).toBeNull()
+  })
+
+  it('renders nothing for a zero count rather than an empty chip', () => {
+    const { result } = renderHook(() => useNavBadge(HREF))
+
+    act(() => setNavBadge(HREF, { count: 4 }))
+    expect(result.current?.count).toBe(4)
+
+    act(() => setNavBadge(HREF, { count: 0 }))
+    expect(result.current).toBeNull()
+  })
+
+  it('clears the slot when the count becomes unknown', () => {
+    const { result } = renderHook(() => useNavBadge(HREF))
+
+    act(() => setNavBadge(HREF, { count: 2 }))
+    act(() => clearNavBadge(HREF))
+
+    expect(result.current).toBeNull()
+  })
+
+  it('ignores a non-finite count instead of rendering NaN', () => {
+    const { result } = renderHook(() => useNavBadge(HREF))
+
+    act(() => setNavBadge(HREF, { count: 5 }))
+    act(() => setNavBadge(HREF, { count: Number.NaN }))
+
+    expect(result.current).toBeNull()
+  })
+
+  it('ignores an empty href', () => {
+    const { result } = renderHook(() => useNavBadge(''))
+    act(() => setNavBadge('', { count: 7 }))
+    expect(result.current).toBeNull()
+  })
+})

package/src/backend/forms/ActionsDropdown.tsx

@@ -19,11 +19,30 @@ export type ActionItem = {
   disabled?: boolean
   /** Show a loading spinner instead of the icon */
   loading?: boolean
+  /** Render the item in the destructive token (e.g. Delete, Clear) */
+  destructive?: boolean
 }
 
+/** A visual divider between groups of items. */
+export type ActionSeparator = {
+  /** Optional key; falls back to the array index */
+  id?: string
+  separator: true
+}
+
+/** A muted uppercase section label grouping the items beneath it. */
+export type ActionHeader = {
+  /** Optional key; falls back to the array index */
+  id?: string
+  /** The section label text */
+  header: string
+}
+
+export type ActionMenuEntry = ActionItem | ActionSeparator | ActionHeader
+
 export type ActionsDropdownProps = {
-  /** Items to render inside the dropdown */
-  items: ActionItem[]
+  /** Items to render inside the dropdown (may include separators) */
+  items: ActionMenuEntry[]
   /** Button label (default: translated 'Actions') */
   label?: string
   /** Trigger style */
@@ -32,6 +51,18 @@ export type ActionsDropdownProps = {
   ariaLabel?: string
   /** Button size (default: 'sm') */
   size?: 'sm' | 'default'
+  /** Extra classes for the trigger button (e.g. to match a dense toolbar row) */
+  triggerClassName?: string
+  /**
+   * Leading icon inside the label-mode trigger. Defaults to `Zap`; pass a
+   * component to override, or `false` to render just the label + chevron.
+   */
+  triggerIcon?: React.ComponentType<{ className?: string }> | false
+  /**
+   * Render a small warning dot on the trigger — for when an item inside the
+   * menu needs attention (e.g. required fields still blank).
+   */
+  attention?: boolean
 }
 
 export function ActionsDropdown({
@@ -40,6 +71,9 @@ export function ActionsDropdown({
   triggerMode = 'label',
   ariaLabel,
   size = 'sm',
+  triggerClassName,
+  triggerIcon,
+  attention = false,
 }: ActionsDropdownProps) {
   const t = useT()
   const [open, setOpen] = React.useState(false)
@@ -133,7 +167,7 @@ export function ActionsDropdown({
         type="button"
         variant="outline"
         size={size}
-        className={triggerMode === 'icon' ? 'px-2' : undefined}
+        className={`${triggerMode === 'icon' ? 'px-2 ' : ''}${triggerClassName ?? ''}`.trim() || undefined}
         aria-haspopup="menu"
         aria-expanded={open}
         aria-label={resolvedAriaLabel}
@@ -150,11 +184,21 @@ export function ActionsDropdown({
         ) : (
           <>
             {resolvedLabel}
-            <Zap className="size-4 ml-1" />
+            {triggerIcon === false
+              ? null
+              : triggerIcon
+                ? React.createElement(triggerIcon, { className: 'size-4 ml-1' })
+                : <Zap className="size-4 ml-1" />}
             <ChevronDown className={`size-3.5 transition-transform duration-150 ${open ? 'rotate-180' : ''}`} />
           </>
         )}
       </Button>
+      {attention && (
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute right-0.5 top-0.5 size-2 rounded-full bg-status-warning-icon ring-2 ring-background"
+        />
+      )}
       {open && anchorRect && createPortal(
         <div
           ref={menuRef}
@@ -168,7 +212,26 @@ export function ActionsDropdown({
             transform: `translate(-100%, ${direction === 'down' ? '0' : '-100%'})`,
           }}
         >
-          {items.map((item) => {
+          {items.map((item, index) => {
+            if ('header' in item) {
+              return (
+                <div
+                  key={item.id ?? `header-${index}`}
+                  className="px-2 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground"
+                >
+                  {item.header}
+                </div>
+              )
+            }
+            if ('separator' in item) {
+              return (
+                <div
+                  key={item.id ?? `separator-${index}`}
+                  role="separator"
+                  className="my-1 h-px bg-border"
+                />
+              )
+            }
             const Icon = item.icon
             return (
               <Button
@@ -176,7 +239,11 @@ export function ActionsDropdown({
                 type="button"
                 variant="ghost"
                 size="sm"
-                className="w-full justify-start h-auto min-h-8 py-1.5 whitespace-normal text-left leading-snug"
+                className={`w-full justify-start h-auto min-h-8 py-1.5 whitespace-normal text-left leading-snug${
+                  item.destructive
+                    ? ' text-destructive hover:text-destructive hover:bg-destructive/10 focus-visible:text-destructive'
+                    : ''
+                }`}
                 role="menuitem"
                 disabled={item.disabled}
                 onClick={() => {

package/src/backend/forms/index.ts

@@ -1,4 +1,4 @@
 export { FormActionButtons, type FormActionButtonsProps } from './FormActionButtons'
-export { ActionsDropdown, type ActionItem, type ActionsDropdownProps } from './ActionsDropdown'
+export { ActionsDropdown, type ActionItem, type ActionSeparator, type ActionHeader, type ActionMenuEntry, type ActionsDropdownProps } from './ActionsDropdown'
 export { FormHeader, type FormHeaderProps, type FormHeaderEditProps, type FormHeaderDetailProps } from './FormHeader'
 export { FormFooter, type FormFooterProps } from './FormFooter'

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -66,6 +66,7 @@ import {
   Flag,
   Flame,
   FolderTree,
+  FunctionSquare,
   Gauge,
   GitBranch,
   GitCompareArrows,
@@ -116,6 +117,7 @@ import {
   PhoneCall,
   PieChart,
   PlusSquare,
+  Radio,
   Receipt,
   ReceiptText,
   RefreshCcw,
@@ -161,6 +163,7 @@ import {
   UserRound,
   Users,
   UserX,
+  Variable,
   Wallet,
   Warehouse,
   Webhook,
@@ -234,6 +237,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'flag': Flag,
   'flame': Flame,
   'folder-tree': FolderTree,
+  'function-square': FunctionSquare,
   'gauge': Gauge,
   'git-branch': GitBranch,
   'git-compare-arrows': GitCompareArrows,
@@ -284,6 +288,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'phone-call': PhoneCall,
   'pie-chart': PieChart,
   'plus-square': PlusSquare,
+  'radio': Radio,
   'receipt': Receipt,
   'receipt-text': ReceiptText,
   'refresh-ccw': RefreshCcw,
@@ -329,6 +334,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'user-round': UserRound,
   'user-x': UserX,
   'users': Users,
+  'variable': Variable,
   'wallet': Wallet,
   'warehouse': Warehouse,
   'webhook': Webhook,

package/src/backend/injection/spotIds.ts

@@ -16,6 +16,14 @@ export const BACKEND_TOPBAR_ACTIONS_INJECTION_SPOT_ID: InjectionSpotId = 'backen
 export const BACKEND_SIDEBAR_NAV_INJECTION_SPOT_ID: InjectionSpotId = 'backend:sidebar:nav'
 export const BACKEND_SIDEBAR_NAV_FOOTER_INJECTION_SPOT_ID: InjectionSpotId = 'backend:sidebar:nav:footer'
 
+/**
+ * Headless mount point for modules that publish live counts onto sidebar nav
+ * items through `setNavBadge`. Rendered once per shell and always — a feeder
+ * must keep counting while the sidebar is collapsed or off-screen on mobile —
+ * and its widgets are expected to render nothing.
+ */
+export const BACKEND_NAV_BADGES_INJECTION_SPOT_ID: InjectionSpotId = 'backend:nav:badges'
+
 // Standardized global status spot ids
 export const GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID: InjectionSpotId = 'global:sidebar:status-badges'
 export const GLOBAL_HEADER_STATUS_INDICATORS_INJECTION_SPOT_ID: InjectionSpotId = 'global:header:status-indicators'