@open-mercato/ui 0.6.5-develop.5337.1.534b781eac → 0.6.5-develop.5382.1.f542de69af

package/src/backend/__tests__/CrudForm.optimisticLock.test.tsx

@@ -58,6 +58,9 @@ import { dismissRecordConflict, getRecordConflictForTest } from '../conflicts'
 
 const dict = {
   'ui.forms.actions.save': 'Save',
+  'ui.forms.actions.delete': 'Delete',
+  'ui.forms.flash.deleteSuccess': 'Record deleted.',
+  'ui.forms.flash.deleteError': 'Failed to delete record.',
   'ui.forms.flash.recordModified': 'This record was modified by someone else. Refresh and try again.',
 }
 
@@ -171,6 +174,55 @@ describe('CrudForm — optimisticLockUpdatedAt prop wiring', () => {
       'error',
     )
   })
+
+  it('delete: a 409 conflict surfaces the conflict bar and never shows a success toast (regression #2409)', async () => {
+    // Regression guard for #2409: when an optimistic-lock conflict (409) is
+    // thrown from onDelete, CrudForm must route it to the unified conflict bar
+    // and MUST NOT flash a "Record deleted." success toast. A previous version
+    // of the planner Availability Schedule page swallowed the delete error, so
+    // CrudForm treated the failed delete as a success and showed a false toast.
+    dismissRecordConflict()
+    const conflict = Object.assign(new Error('record_modified'), {
+      status: 409,
+      error: 'record_modified',
+      code: OPTIMISTIC_LOCK_CONFLICT_CODE,
+      currentUpdatedAt: '2026-05-25T08:42:19.000Z',
+      expectedUpdatedAt: '2026-05-25T08:42:18.000Z',
+    })
+    const onSubmit = jest.fn(async () => undefined)
+    const onDelete = jest.fn(async () => {
+      throw conflict
+    })
+    const { container } = renderWithProviders(
+      <CrudForm<{ displayName: string; id?: string }>
+        fields={fields}
+        initialValues={{ id: 'rec-1', displayName: 'old' }}
+        onSubmit={onSubmit}
+        onDelete={onDelete}
+        optimisticLockUpdatedAt="2026-05-25T08:42:18.000Z"
+      />,
+      { dict },
+    )
+
+    const deleteButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Delete',
+    ) as HTMLButtonElement
+    expect(deleteButton).toBeTruthy()
+
+    await act(async () => {
+      fireEvent.click(deleteButton)
+    })
+
+    await waitFor(() => expect(onDelete).toHaveBeenCalledTimes(1))
+    await waitFor(() => {
+      const entry = getRecordConflictForTest()
+      expect(entry).not.toBeNull()
+      expect(entry?.message).toBe('This record was modified by someone else. Refresh and try again.')
+    })
+    // The false success toast is the actual bug — it must never fire on a 409.
+    expect(flashMock).not.toHaveBeenCalledWith('Record deleted.', 'success')
+    expect(flashMock).not.toHaveBeenCalledWith(expect.anything(), 'success')
+  })
 })
 
 type AutoFormValues = { displayName: string; id?: string; updatedAt?: string | null; updated_at?: string | null }

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

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+jest.mock('next/link', () => {
+  const MockLink = ({ children, href, ...rest }: { children: React.ReactNode; href: string }) => (
+    <a href={href} {...rest}>{children}</a>
+  )
+  MockLink.displayName = 'MockLink'
+  return MockLink
+})
+
+jest.mock('../injection/InjectionSpot', () => ({
+  InjectionSpot: () => null,
+}))
+
+jest.mock('../injection/useInjectedMenuItems', () => ({
+  useInjectedMenuItems: () => ({ items: [], isLoading: false }),
+}))
+
+jest.mock('@open-mercato/ui/theme', () => ({
+  useTheme: () => ({ theme: 'light', resolvedTheme: 'light', setTheme: jest.fn() }),
+}))
+
+import { ProfileDropdown } from '../ProfileDropdown'
+
+describe('ProfileDropdown', () => {
+  it('does not render the menu until the trigger is clicked', () => {
+    renderWithProviders(<ProfileDropdown email="user@example.com" />)
+    expect(screen.queryByTestId('profile-dropdown')).not.toBeInTheDocument()
+  })
+
+  it('renders the open menu in a body portal so it escapes the header stacking context', () => {
+    renderWithProviders(<ProfileDropdown email="user@example.com" />)
+
+    fireEvent.click(screen.getByTestId('profile-dropdown-trigger'))
+
+    const menu = screen.getByTestId('profile-dropdown')
+    expect(menu).toBeInTheDocument()
+    // createPortal mounts the menu directly under document.body, outside the
+    // sticky header's backdrop-blur stacking context (regression: issue #2941).
+    expect(menu.parentElement).toBe(document.body)
+    // It must use fixed positioning + the popover layer rather than being
+    // absolutely positioned inside the header.
+    expect(menu.className).toContain('fixed')
+    expect(menu.className).toContain('z-popover')
+    expect(menu.className).not.toContain('absolute')
+  })
+
+  it('closes the menu (unmounting the portal) on Escape', () => {
+    renderWithProviders(<ProfileDropdown email="user@example.com" />)
+
+    fireEvent.click(screen.getByTestId('profile-dropdown-trigger'))
+    expect(screen.getByTestId('profile-dropdown')).toBeInTheDocument()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(screen.queryByTestId('profile-dropdown')).not.toBeInTheDocument()
+  })
+})

package/src/backend/__tests__/lazy-heavy-libraries.test.ts

@@ -123,4 +123,12 @@ describe('heavy libraries are lazy-loaded', () => {
     const source = read('packages/ui/src/backend/schedule/ScheduleCalendar.tsx')
     expect(source).toMatch(/import\s+['"]react-big-calendar\/lib\/css\/react-big-calendar\.css['"]/)
   })
+
+  it('AttachmentContentPreview does not statically import react-markdown or remark-gfm', () => {
+    const source = read(
+      'packages/core/src/modules/attachments/components/AttachmentContentPreview.tsx',
+    )
+    expect(source).not.toMatch(/from\s+['"]react-markdown['"]/)
+    expect(source).not.toMatch(/from\s+['"]remark-gfm['"]/)
+  })
 })

package/src/backend/injection/useGuardedMutation.ts

@@ -43,7 +43,7 @@ export function useGuardedMutation<TContext extends GuardedMutationContext>({
       error,
     })
     // Default UX for OSS optimistic-lock conflicts (spec
-    // .ai/specs/2026-05-25-oss-optimistic-locking.md §3.6): when the
+    // .ai/specs/implemented/2026-05-25-oss-optimistic-locking.md §3.6): when the
     // server returns 409 with `code: 'optimistic_lock_conflict'`,
     // surface the conflict on the unified, persistent, error-styled
     // RecordConflictBanner (rendered in AppShell) instead of a transient

package/src/backend/utils/optimisticLock.ts

@@ -1,6 +1,6 @@
 /**
  * Client-side helpers for the OSS opt-in optimistic-locking guard
- * (spec: .ai/specs/2026-05-25-oss-optimistic-locking.md).
+ * (spec: .ai/specs/implemented/2026-05-25-oss-optimistic-locking.md).
  *
  * These are deliberately small and dependency-light so they can be wired
  * into any backend page without touching the shared CrudForm / useGuardedMutation

package/src/utils/__tests__/format.test.ts

@@ -0,0 +1,58 @@
+import { formatCurrency, formatDate } from '../format'
+
+describe('formatCurrency', () => {
+  it('returns null for empty input', () => {
+    expect(formatCurrency(null)).toBeNull()
+    expect(formatCurrency(undefined)).toBeNull()
+    expect(formatCurrency('')).toBeNull()
+  })
+
+  it('echoes back a non-numeric string', () => {
+    expect(formatCurrency('n/a')).toBe('n/a')
+  })
+
+  it('returns null for a non-finite number', () => {
+    expect(formatCurrency(Number.NaN)).toBeNull()
+  })
+
+  it('formats a numeric value with an ISO currency code', () => {
+    const result = formatCurrency(1234.5, 'usd')
+    expect(result).toMatch(/1,234\.5/)
+    expect(result).toMatch(/\$|USD/)
+  })
+
+  it('formats a numeric string the same as a number', () => {
+    expect(formatCurrency('1234.5', 'USD')).toBe(formatCurrency(1234.5, 'USD'))
+  })
+
+  it('falls back to a plain number without a currency code', () => {
+    expect(formatCurrency(1000)).toBe(new Intl.NumberFormat().format(1000))
+  })
+
+  it('ignores currency codes that are not three characters', () => {
+    expect(formatCurrency(1000, 'US')).toBe(new Intl.NumberFormat().format(1000))
+  })
+})
+
+describe('formatDate', () => {
+  it('returns null for empty input', () => {
+    expect(formatDate(null)).toBeNull()
+    expect(formatDate(undefined)).toBeNull()
+    expect(formatDate('')).toBeNull()
+  })
+
+  it('echoes back an unparseable date', () => {
+    expect(formatDate('not-a-date')).toBe('not-a-date')
+  })
+
+  it('formats a valid ISO date as a localized short date', () => {
+    const result = formatDate('2026-06-09T00:00:00.000Z')
+    expect(result).toEqual(
+      new Date('2026-06-09T00:00:00.000Z').toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }),
+    )
+  })
+})

package/src/utils/format.ts

@@ -0,0 +1,40 @@
+/**
+ * Format a monetary value with an optional ISO-4217 currency code.
+ *
+ * Returns `null` for empty input, the original string for non-numeric input,
+ * and falls back to a plain number format (optionally suffixed with the code)
+ * when the currency code is missing or rejected by `Intl.NumberFormat`.
+ */
+export function formatCurrency(
+  value: string | number | null | undefined,
+  currency?: string | null,
+): string | null {
+  if (value === null || value === undefined || value === '') return null
+  const numeric = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(numeric)) {
+    return typeof value === 'string' ? value : null
+  }
+  const code = currency && currency.length === 3 ? currency.toUpperCase() : undefined
+  try {
+    if (code) {
+      return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(numeric)
+    }
+  } catch {
+    // fall through to plain number formatting
+  }
+  const formatted = new Intl.NumberFormat().format(numeric)
+  return code ? `${formatted} ${code}` : formatted
+}
+
+/**
+ * Format an ISO date string as a localized short date (e.g. `Jun 9, 2026`).
+ *
+ * Returns `null` for empty input and echoes the original value back when it is
+ * not a parseable date.
+ */
+export function formatDate(value: string | null | undefined): string | null {
+  if (!value) return null
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}