@freighttech/ui 0.13.18

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

@@ -0,0 +1,339 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+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'
+import { APP_EVENT_DOM_NAME } from '../injection/useAppEvent'
+
+const mockRouterRefresh = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn(), refresh: mockRouterRefresh }),
+}))
+
+const useInjectionDataWidgetsMock = jest.fn()
+const flashMock = jest.fn()
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: (spotId: string) => useInjectionDataWidgetsMock(spotId),
+}))
+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(elementProps: 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, elementProps),
+      ),
+    ),
+  )
+  return {
+    ...view,
+    cleanupQueryClient: () => queryClient.clear(),
+  }
+}
+
+describe('DataTable extensions', () => {
+  beforeEach(() => {
+    ;(globalThis as typeof globalThis & { ResizeObserver?: typeof ResizeObserverMock }).ResizeObserver = ResizeObserverMock
+    useInjectionDataWidgetsMock.mockImplementation(() => ({ widgets: [], isLoading: false, error: null }))
+    flashMock.mockReset()
+    mockRouterRefresh.mockReset()
+  })
+
+  it('renders injected columns from data-table extension surface', () => {
+    useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
+      if (spotId === 'data-table:customers.people:columns') {
+        return {
+          widgets: [
+            {
+              metadata: { id: 'test.columns' },
+              columns: [
+                {
+                  id: 'ext_col',
+                  header: 'Injected',
+                  accessorKey: 'name',
+                  sortable: false,
+                },
+              ],
+            },
+          ],
+          isLoading: false,
+          error: null,
+        }
+      }
+      return { widgets: [], isLoading: false, error: null }
+    })
+
+    const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    const html = renderToString(
+      React.createElement(
+        QueryClientProvider as any,
+        { client: queryClient },
+        React.createElement(
+          I18nProvider as any,
+          { locale: 'en', dict: {} },
+          React.createElement(DataTable as any, {
+            columns,
+            data: [{ id: 'r1', name: 'Alice' }],
+            injectionSpotId: 'data-table:customers.people',
+          }),
+        ),
+      ),
+    )
+
+    expect(html).toContain('Injected')
+    queryClient.clear()
+  })
+
+  it('renders injected bulk action button when bulk extension exists', () => {
+    useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
+      if (spotId === 'data-table:customers.people:bulk-actions') {
+        return {
+          widgets: [
+            {
+              metadata: { id: 'test.bulk-actions' },
+              bulkActions: [
+                {
+                  id: 'bulk-normal',
+                  label: 'Set normal',
+                  onExecute: async () => ({ ok: true }),
+                },
+              ],
+            },
+          ],
+          isLoading: false,
+          error: null,
+        }
+      }
+      return { widgets: [], isLoading: false, error: null }
+    })
+
+    const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    const html = renderToString(
+      React.createElement(
+        QueryClientProvider as any,
+        { client: queryClient },
+        React.createElement(
+          I18nProvider as any,
+          { locale: 'en', dict: {} },
+          React.createElement(DataTable as any, {
+            columns,
+            data: [{ id: 'r1', name: 'Alice' }],
+            injectionSpotId: 'data-table:customers.people',
+          }),
+        ),
+      ),
+    )
+
+    expect(html).toContain('Set normal')
+    expect(html).toContain('Select all rows')
+    queryClient.clear()
+  })
+
+  it('allows filter-scope bulk actions without selected rows and forwards injection context', async () => {
+    const onExecute = jest.fn(async () => ({ ok: true }))
+    useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
+      if (spotId === 'data-table:customers.people:bulk-actions') {
+        return {
+          widgets: [
+            {
+              metadata: { id: 'test.bulk-actions' },
+              bulkActions: [
+                {
+                  id: 'bulk-delete-filtered',
+                  label: 'Delete all filtered',
+                  requiresSelection: false,
+                  onExecute,
+                },
+              ],
+            },
+          ],
+          isLoading: false,
+          error: null,
+        }
+      }
+      return { widgets: [], isLoading: false, error: null }
+    })
+
+    const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
+    const rendered = renderTable({
+      columns,
+      data: [{ id: 'r1', name: 'Alice' }],
+      injectionSpotId: 'data-table:customers.people',
+      injectionContext: { search: 'alice', filters: { isActive: true } },
+    })
+
+    try {
+      const button = screen.getByRole('button', { name: 'Delete all filtered' })
+      expect(button).toBeEnabled()
+
+      fireEvent.click(button)
+
+      await waitFor(() => expect(onExecute).toHaveBeenCalledTimes(1))
+      expect(onExecute).toHaveBeenCalledWith(
+        [],
+        expect.objectContaining({
+          tableId: 'customers.people',
+          injectionContext: { search: 'alice', filters: { isActive: true } },
+          confirm: expect.any(Function),
+          translate: expect.any(Function),
+        }),
+      )
+      expect(flashMock).toHaveBeenCalledWith('Bulk action completed.', 'success')
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('acknowledges bulk action progress jobs without local polling', async () => {
+    const onExecute = jest.fn(async () => ({ ok: true, progressJobId: 'job-1' }))
+
+    useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
+      if (spotId === 'data-table:customers.people:bulk-actions') {
+        return {
+          widgets: [
+            {
+              metadata: { id: 'test.bulk-actions' },
+              bulkActions: [
+                {
+                  id: 'bulk-delete-filtered',
+                  label: 'Delete all filtered',
+                  requiresSelection: false,
+                  onExecute,
+                },
+              ],
+            },
+          ],
+          isLoading: false,
+          error: null,
+        }
+      }
+      return { widgets: [], isLoading: false, error: null }
+    })
+
+    const rendered = renderTable({
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      data: [{ id: 'r1', name: 'Alice' }],
+      injectionSpotId: 'data-table:customers.people',
+    })
+
+    try {
+      const button = screen.getByRole('button', { name: 'Delete all filtered' })
+      fireEvent.click(button)
+
+      await waitFor(() => expect(onExecute).toHaveBeenCalledTimes(1))
+      expect(flashMock).toHaveBeenCalledWith('Bulk action started. Track progress in the top bar.', 'success')
+      expect(screen.queryByText('1 / 2')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Delete all filtered' })).toBeEnabled()
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('refreshes the table when a tracked bulk action progress job completes', async () => {
+    const onExecute = jest.fn(async () => ({ ok: true, progressJobId: 'job-1' }))
+    const refreshButtonMock = jest.fn()
+
+    useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
+      if (spotId === 'data-table:customers.people:bulk-actions') {
+        return {
+          widgets: [
+            {
+              metadata: { id: 'test.bulk-actions' },
+              bulkActions: [
+                {
+                  id: 'bulk-delete-filtered',
+                  label: 'Delete all filtered',
+                  requiresSelection: false,
+                  onExecute,
+                },
+              ],
+            },
+          ],
+          isLoading: false,
+          error: null,
+        }
+      }
+      return { widgets: [], isLoading: false, error: null }
+    })
+
+    const rendered = renderTable({
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      data: [{ id: 'r1', name: 'Alice' }],
+      injectionSpotId: 'data-table:customers.people',
+      refreshButton: { label: 'Refresh', onRefresh: refreshButtonMock },
+    })
+
+    try {
+      fireEvent.click(screen.getByRole('button', { name: 'Delete all filtered' }))
+
+      await waitFor(() => expect(onExecute).toHaveBeenCalledTimes(1))
+      refreshButtonMock.mockClear()
+      mockRouterRefresh.mockClear()
+
+      window.dispatchEvent(new CustomEvent(APP_EVENT_DOM_NAME, {
+        detail: {
+          id: 'progress.job.completed',
+          payload: { jobId: 'job-1' },
+          timestamp: Date.now(),
+          organizationId: 'org-1',
+        },
+      }))
+
+      await waitFor(() => expect(refreshButtonMock).toHaveBeenCalledTimes(1))
+      expect(mockRouterRefresh).not.toHaveBeenCalled()
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('applies sticky positioning to the actions column when enabled', () => {
+    const rendered = renderTable({
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      data: [{ id: 'r1', name: 'Alice' }],
+      rowActions: () => <button type="button">Open</button>,
+      stickyActionsColumn: true,
+    })
+
+    try {
+      const actionsHeader = screen.getByRole('columnheader', { name: 'Actions' })
+      expect(actionsHeader.className).toContain('sticky')
+      expect(actionsHeader.className).toContain('right-0')
+
+      const actionsCell = rendered.container.querySelector('[data-actions-cell]')
+      expect(actionsCell).not.toBeNull()
+      expect(actionsCell?.className).toContain('sticky')
+      expect(actionsCell?.className).toContain('right-0')
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+})

package/src/backend/__tests__/DataTable.namespaces.test.ts

@@ -0,0 +1,32 @@
+import { withDataTableNamespaces } from '../DataTable'
+
+describe('withDataTableNamespaces', () => {
+  it('preserves mapped row fields and appends namespaced payload fields', () => {
+    const row = { id: '1', name: 'Alice' }
+    const source = {
+      id: '1',
+      name: 'Alice',
+      _example: { priority: 'high' },
+      _other: { flag: true },
+      ignored: 'value',
+    }
+
+    expect(withDataTableNamespaces(row, source)).toEqual({
+      id: '1',
+      name: 'Alice',
+      _example: { priority: 'high' },
+      _other: { flag: true },
+    })
+  })
+
+  it('does not overwrite mapped values with non-namespaced source fields', () => {
+    const row = { id: '1', status: 'mapped' }
+    const source = { id: '1', status: 'source', plain: 123 }
+
+    expect(withDataTableNamespaces(row, source)).toEqual({
+      id: '1',
+      status: 'mapped',
+    })
+  })
+})
+

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

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+import { DataTable } from '../DataTable'
+import type { ColumnDef } from '@tanstack/react-table'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+
+// Mock next/navigation for SSR compatibility of client components
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}))
+
+type Row = { id: string; name: string }
+
+describe('DataTable SSR render', () => {
+  it('renders built-in FilterBar when search/filters provided', () => {
+    const columns: ColumnDef<Row>[] = [
+      { accessorKey: 'name', header: 'Name' },
+    ]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    try {
+      const html = renderToString(
+        React.createElement(
+          QueryClientProvider as any,
+          { client: queryClient },
+          React.createElement(
+            I18nProvider as any,
+            { locale: 'en', dict: {} },
+            React.createElement(DataTable as any, {
+              columns,
+              data: [],
+              title: 'Test',
+              searchValue: 'abc',
+              onSearchChange: () => {},
+              filters: [{ id: 'created_at', label: 'Created', type: 'dateRange' }],
+              filterValues: {},
+              onFiltersApply: () => {},
+            }),
+          ),
+        )
+      )
+      expect(html).toContain('Filters')
+      expect(html).toContain('Name')
+    } finally {
+      queryClient.clear()
+    }
+  })
+})

package/src/backend/__tests__/FieldDefinitionsEditor.test.tsx

@@ -0,0 +1,64 @@
+/**
+ * @jest-environment jsdom
+ */
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { FieldDefinitionsEditor, type FieldDefinition } from '../custom-fields/FieldDefinitionsEditor'
+
+describe('FieldDefinitionsEditor', () => {
+  it('assigns a field to a fieldset without triggering a render-time parent update warning', () => {
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+    const handleDefinitionChange = jest.fn()
+
+    const definitions: FieldDefinition[] = [
+      {
+        key: 'buying_role',
+        kind: 'select',
+        configJson: {
+          label: 'Buying role',
+          options: [{ value: 'champion', label: 'Champion' }],
+        },
+        isActive: true,
+      },
+    ]
+
+    try {
+      renderWithProviders(
+        <FieldDefinitionsEditor
+          definitions={definitions}
+          fieldsets={[{ code: 'fieldset_1', label: 'New fieldset' }]}
+          activeFieldset={null}
+          onActiveFieldsetChange={() => undefined}
+          onFieldsetsChange={() => undefined}
+          onAddField={() => undefined}
+          onRemoveField={() => undefined}
+          onDefinitionChange={handleDefinitionChange}
+        />,
+      )
+
+      const assignFieldsetSelect = screen.getAllByRole('combobox').find((element) => {
+        if (!(element instanceof HTMLSelectElement)) return false
+        const optionLabels = Array.from(element.options).map((option) => option.text)
+        return optionLabels.includes('Unassigned') && optionLabels.includes('New fieldset')
+      })
+
+      expect(assignFieldsetSelect).toBeDefined()
+
+      fireEvent.change(assignFieldsetSelect as HTMLSelectElement, { target: { value: 'fieldset_1' } })
+
+      expect(handleDefinitionChange).toHaveBeenCalledWith(0, expect.objectContaining({
+        key: 'buying_role',
+        configJson: expect.objectContaining({
+          fieldset: 'fieldset_1',
+        }),
+      }))
+
+      const renderTimeWarnings = consoleErrorSpy.mock.calls.filter((args) =>
+        args.some((value) => typeof value === 'string' && value.includes('Cannot update a component')),
+      )
+      expect(renderTimeWarnings).toHaveLength(0)
+    } finally {
+      consoleErrorSpy.mockRestore()
+    }
+  })
+})

package/src/backend/__tests__/FlashMessages.test.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { act, screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { FlashMessages, flash } from '../FlashMessages'
+
+describe('FlashMessages', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+    window.history.replaceState({}, '', 'http://localhost/backend')
+  })
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers()
+    jest.useRealTimers()
+    window.history.replaceState({}, '', 'http://localhost/backend')
+  })
+
+  it('auto-dismisses URL-based flashes after stripping query params', () => {
+    window.history.replaceState({}, '', 'http://localhost/backend/checkout/pay-links?flash=Saved&type=success')
+
+    renderWithProviders(<FlashMessages />)
+
+    expect(screen.getByText('Saved')).toBeInTheDocument()
+    expect(window.location.search).toBe('')
+
+    act(() => {
+      jest.advanceTimersByTime(3000)
+    })
+
+    expect(screen.queryByText('Saved')).not.toBeInTheDocument()
+  })
+
+  it('auto-dismisses programmatic flashes', () => {
+    renderWithProviders(<FlashMessages />)
+
+    act(() => {
+      flash('Pay link published', 'success')
+    })
+
+    expect(screen.getByText('Pay link published')).toBeInTheDocument()
+
+    act(() => {
+      jest.advanceTimersByTime(3000)
+    })
+
+    expect(screen.queryByText('Pay link published')).not.toBeInTheDocument()
+  })
+
+  // HEDGE-173: a failed save is the one case where the flash is the only thing telling the
+  // user their work was NOT persisted. CrudForm's persistent formError renders directly above
+  // FormFooter — i.e. at the bottom of the form — while Save sits in the header, so on a long
+  // form (Edit Role's ACL grid) it is below the fold. If the toast also expires, the screen
+  // ends up indistinguishable from a successful save. Measured in
+  // .ai/qa/hedge-173/02-measurement-where-the-message-renders.md
+  it('keeps error flashes on screen until dismissed', () => {
+    renderWithProviders(<FlashMessages />)
+
+    act(() => {
+      flash('Cannot grant feature rfq_board.view.', 'error')
+    })
+
+    expect(screen.getByText('Cannot grant feature rfq_board.view.')).toBeInTheDocument()
+
+    act(() => {
+      jest.advanceTimersByTime(60_000)
+    })
+
+    expect(screen.getByText('Cannot grant feature rfq_board.view.')).toBeInTheDocument()
+  })
+
+  it('lets the user dismiss a persistent error flash', () => {
+    renderWithProviders(<FlashMessages />)
+
+    act(() => {
+      flash('Cannot grant feature rfq_board.view.', 'error')
+    })
+
+    act(() => {
+      screen.getByRole('button', { name: 'Dismiss' }).click()
+    })
+
+    expect(screen.queryByText('Cannot grant feature rfq_board.view.')).not.toBeInTheDocument()
+  })
+
+  it('announces errors assertively and non-errors politely', () => {
+    const { rerender } = renderWithProviders(<FlashMessages />)
+
+    act(() => {
+      flash('Cannot grant feature rfq_board.view.', 'error')
+    })
+
+    const errorAlert = screen.getByRole('alert')
+    expect(errorAlert).toHaveTextContent('Cannot grant feature rfq_board.view.')
+    expect(errorAlert).toHaveAttribute('aria-live', 'assertive')
+
+    rerender(<FlashMessages />)
+
+    act(() => {
+      flash('Saved', 'success')
+    })
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite')
+  })
+})

package/src/backend/__tests__/FormHeader.test.tsx

@@ -0,0 +1,81 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { screen } from '@testing-library/react'
+import { FormHeader } from '../forms/FormHeader'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+const mockInjectionSpot = jest.fn()
+
+jest.mock('next/link', () => {
+  const React = require('react')
+  return React.forwardRef(
+    (
+      { children, href, ...rest }: { children: React.ReactNode; href?: string },
+      ref: React.ForwardedRef<HTMLAnchorElement>,
+    ) => (
+      <a href={typeof href === 'string' ? href : href?.toString?.()} ref={ref} {...rest}>
+        {children}
+      </a>
+    ),
+  )
+})
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/backend/customers/people/123',
+  useSearchParams: () => new URLSearchParams('showIncomingChanges=1'),
+}))
+
+jest.mock('../injection/InjectionSpot', () => ({
+  InjectionSpot: (props: { spotId: string; context?: Record<string, unknown> }) => {
+    mockInjectionSpot(props)
+    return <div data-testid={`injection-spot:${props.spotId}`} />
+  },
+}))
+
+describe('FormHeader', () => {
+  beforeEach(() => {
+    mockInjectionSpot.mockClear()
+  })
+
+  it('renders detail header injection spot with routing context', () => {
+    renderWithProviders(
+      <FormHeader mode="detail" title="Person Detail" />,
+      { dict: {} },
+    )
+
+    expect(screen.getByText('Person Detail')).toBeInTheDocument()
+    expect(screen.getByTestId('injection-spot:form-header:detail')).toBeInTheDocument()
+    expect(mockInjectionSpot).toHaveBeenCalledWith(
+      expect.objectContaining({
+        spotId: 'form-header:detail',
+        context: {
+          path: '/backend/customers/people/123',
+          query: 'showIncomingChanges=1',
+        },
+      }),
+    )
+  })
+
+  it('renders edit header injection spot with routing context', () => {
+    renderWithProviders(
+      <FormHeader title="Edit Person" />,
+      { dict: {} },
+    )
+
+    expect(screen.getByText('Edit Person')).toBeInTheDocument()
+    expect(screen.getByTestId('injection-spot:form-header:edit')).toBeInTheDocument()
+    expect(mockInjectionSpot).toHaveBeenCalledWith(
+      expect.objectContaining({
+        spotId: 'form-header:edit',
+        context: {
+          path: '/backend/customers/people/123',
+          query: 'showIncomingChanges=1',
+        },
+      }),
+    )
+  })
+})
+