@open-mercato/ui 0.6.1-develop.3276.1.1fcd145078 → 0.6.1-develop.3287.1.450f4ffb56

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

@@ -389,4 +389,174 @@ describe('DataTable extensions', () => {
       rendered.cleanupQueryClient()
     }
   })
+
+  it('does not expose saved filters through the perspectives action row', async () => {
+    const originalFetch = globalThis.fetch
+    const fetchMock = jest.fn(async (input: RequestInfo | URL) => {
+      const url = String(input)
+      if (url.includes('/api/auth/feature-check')) {
+        return new Response(JSON.stringify({ granted: ['perspectives.use'] }), {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        })
+      }
+      if (url.includes('/api/perspectives/customers.people.list')) {
+        return new Response(JSON.stringify({
+          tableId: 'customers.people.list',
+          perspectives: [],
+          rolePerspectives: [],
+          roles: [],
+          defaultPerspectiveId: null,
+          canApplyToRoles: false,
+        }), {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        })
+      }
+      return new Response(JSON.stringify({}), {
+        status: 404,
+        headers: { 'content-type': 'application/json' },
+      })
+    })
+    ;(globalThis as typeof globalThis & { fetch: typeof fetch }).fetch = fetchMock as unknown as typeof fetch
+
+    const rendered = renderTable({
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      data: [{ id: 'r1', name: 'Alice' }],
+      searchValue: '',
+      onSearchChange: () => {},
+      perspective: { tableId: 'customers.people.list' },
+      advancedFilter: {
+        value: {
+          root: {
+            id: 'root',
+            type: 'group',
+            combinator: 'and',
+            children: [
+              { id: 'rule-1', type: 'rule', field: 'name', operator: 'contains', value: 'Alice' },
+            ],
+          },
+        },
+        fields: [{ key: 'name', label: 'Name', type: 'text' }],
+        onChange: () => {},
+        onApply: () => {},
+        onClear: () => {},
+        externalPopover: true,
+      },
+    })
+
+    try {
+      await screen.findByRole('button', { name: /All views/ })
+      expect(screen.queryByTestId('advanced-filter-save-trigger')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Save filter' })).not.toBeInTheDocument()
+      expect(fetchMock.mock.calls.some(([input, init]) =>
+        String(input).includes('/api/perspectives/customers.people.list') && init?.method === 'POST'
+      )).toBe(false)
+    } finally {
+      if (originalFetch) {
+        globalThis.fetch = originalFetch
+      } else {
+        delete (globalThis as typeof globalThis & { fetch?: typeof fetch }).fetch
+      }
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('clears the advanced filter tree when No view is selected', async () => {
+    const originalFetch = globalThis.fetch
+    const savedTree = {
+      v: 2,
+      root: {
+        id: 'saved-root',
+        type: 'group',
+        combinator: 'and',
+        children: [
+          { id: 'saved-rule', type: 'rule', field: 'name', operator: 'contains', value: 'Alice' },
+        ],
+      },
+    }
+    const perspectiveResponse = {
+      tableId: 'customers.people.list.clear-test',
+      perspectives: [
+        {
+          id: 'saved-filter-1',
+          name: 'Owned leads',
+          tableId: 'customers.people.list.clear-test',
+          isDefault: false,
+          settings: { filters: savedTree },
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        },
+      ],
+      rolePerspectives: [],
+      roles: [],
+      defaultPerspectiveId: null,
+      canApplyToRoles: false,
+    }
+    const fetchMock = jest.fn(async (input: RequestInfo | URL) => {
+      const url = String(input)
+      if (url.includes('/api/auth/feature-check')) {
+        return new Response(JSON.stringify({ granted: ['perspectives.use'] }), {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        })
+      }
+      if (url.includes('/api/perspectives/customers.people.list.clear-test')) {
+        return new Response(JSON.stringify(perspectiveResponse), {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        })
+      }
+      return new Response(JSON.stringify({}), {
+        status: 404,
+        headers: { 'content-type': 'application/json' },
+      })
+    })
+    ;(globalThis as typeof globalThis & { fetch: typeof fetch }).fetch = fetchMock as unknown as typeof fetch
+    window.localStorage.clear()
+
+    const onApplyTree = jest.fn()
+    const rendered = renderTable({
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      data: [{ id: 'r1', name: 'Alice' }],
+      searchValue: '',
+      onSearchChange: () => {},
+      perspective: {
+        tableId: 'customers.people.list.clear-test',
+        initialState: { response: perspectiveResponse },
+      },
+      advancedFilter: {
+        value: savedTree,
+        fields: [{ key: 'name', label: 'Name', type: 'text' }],
+        onChange: () => {},
+        onApply: () => {},
+        onClear: () => {},
+        externalPopover: true,
+        onApplyTree,
+      },
+    })
+
+    try {
+      await waitFor(() => expect(onApplyTree).toHaveBeenCalled())
+      const activeViewButton = await screen.findByRole('button', { name: /Owned leads/ })
+      fireEvent.click(activeViewButton)
+      fireEvent.click(screen.getByRole('button', { name: /No view/ }))
+
+      await waitFor(() => {
+        const calls = onApplyTree.mock.calls
+        const lastTree = calls[calls.length - 1]?.[0]
+        expect(lastTree?.root.children).toHaveLength(0)
+      })
+      await waitFor(() => expect(screen.getByRole('button', { name: /All views/ })).toBeInTheDocument())
+      const calls = onApplyTree.mock.calls
+      expect(calls[calls.length - 1]?.[0]?.root.children).toHaveLength(0)
+    } finally {
+      if (originalFetch) {
+        globalThis.fetch = originalFetch
+      } else {
+        delete (globalThis as typeof globalThis & { fetch?: typeof fetch }).fetch
+      }
+      rendered.cleanupQueryClient()
+    }
+  })
 })

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

@@ -1,4 +1,9 @@
-import { mapCrudServerErrorToFormErrors, raiseCrudError, readJsonSafe } from '../utils/serverErrors'
+import {
+  mapCrudServerErrorToFormErrors,
+  normalizeCrudServerError,
+  raiseCrudError,
+  readJsonSafe,
+} from '../utils/serverErrors'
 
 describe('serverErrors helpers', () => {
   it('maps details array into field errors and message', () => {
@@ -59,6 +64,79 @@ describe('serverErrors helpers', () => {
     }
   })
 
+  it('raiseCrudError extracts message from structured { error: { code, message } } envelope', async () => {
+    expect.assertions(4)
+    const response = new Response(
+      JSON.stringify({
+        ok: false,
+        error: {
+          code: 'invite_cooldown_active',
+          message: 'A recent invite for this email is still pending — please wait before re-inviting.',
+          details: { retryAfterSeconds: 60 },
+        },
+      }),
+      { status: 429, headers: { 'content-type': 'application/json' } },
+    )
+
+    try {
+      await raiseCrudError(response, 'Fallback message')
+    } catch (err) {
+      expect(err).toMatchObject({
+        status: 429,
+        message:
+          'A recent invite for this email is still pending — please wait before re-inviting.',
+      })
+      const errorField = (err as { error?: unknown }).error as
+        | { code?: unknown; details?: unknown }
+        | undefined
+      expect(errorField?.code).toBe('invite_cooldown_active')
+      expect(errorField?.details).toEqual({ retryAfterSeconds: 60 })
+      expect((err as { ok?: unknown }).ok).toBe(false)
+    }
+  })
+
+  it('normalizeCrudServerError reads message from nested { error: { message } } envelope', () => {
+    const normalized = normalizeCrudServerError({
+      ok: false,
+      error: {
+        code: 'invite_cooldown_active',
+        message: 'A recent invite for this email is still pending — please wait before re-inviting.',
+      },
+    })
+    expect(normalized.message).toBe(
+      'A recent invite for this email is still pending — please wait before re-inviting.',
+    )
+  })
+
+  it('raiseCrudError prefers top-level string error over nested error.message', async () => {
+    expect.assertions(1)
+    const response = new Response(
+      JSON.stringify({
+        error: 'Top-level message',
+        message: 'Top-level message',
+      }),
+      { status: 400, headers: { 'content-type': 'application/json' } },
+    )
+
+    await expect(raiseCrudError(response, 'Fallback message')).rejects.toMatchObject({
+      status: 400,
+      message: 'Top-level message',
+    })
+  })
+
+  it('raiseCrudError falls back when structured envelope has empty nested message', async () => {
+    expect.assertions(1)
+    const response = new Response(
+      JSON.stringify({ ok: false, error: { code: 'oops', message: '   ' } }),
+      { status: 500, headers: { 'content-type': 'application/json' } },
+    )
+
+    await expect(raiseCrudError(response, 'Fallback message')).rejects.toMatchObject({
+      status: 500,
+      message: 'Fallback message',
+    })
+  })
+
   it('raiseCrudError falls back to message when body is plain text', async () => {
     expect.assertions(1)
     const response = new Response('Something went wrong', { status: 500 })

package/src/backend/columns/ColumnChooserPanel.tsx

@@ -1,10 +1,11 @@
 "use client"
 import * as React from 'react'
-import { Search, GripVertical, X, ChevronRight } from 'lucide-react'
+import { GripVertical, X, ChevronRight } from 'lucide-react'
 import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
 import { Switch } from '../../primitives/switch'
 import { Input } from '../../primitives/input'
+import { SearchInput } from '../../primitives/search-input'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import {
   DndContext,
@@ -168,13 +169,11 @@ export function ColumnChooserSection({
   return (
     <div className="flex flex-col">
       <div className="px-4 py-3 border-t">
-        <Input
-          type="text"
+        <SearchInput
           size="sm"
-          leftIcon={<Search />}
           placeholder={t('ui.columnChooser.search', 'Search columns...')}
           value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          onChange={setSearchQuery}
         />
       </div>
 

package/src/backend/filters/ActiveFilterChips.tsx

@@ -0,0 +1,179 @@
+'use client'
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { Tag, type TagVariant } from '../../primitives/tag'
+import { IconButton } from '../../primitives/icon-button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { AdvancedFilterTree, FilterRule, FilterGroup } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+import type { FilterFieldDef, FilterOption } from '@open-mercato/shared/lib/query/advanced-filter'
+import { isValuelessOperator } from '@open-mercato/shared/lib/query/advanced-filter'
+import { validateTreeForApply } from './filterValidation'
+
+export type ActiveFilterChipsProps = {
+  tree: AdvancedFilterTree
+  fields: FilterFieldDef[]
+  popoverOpen: boolean
+  onRemoveNode: (id: string) => void
+  onOpen: (focusNodeId?: string) => void
+}
+
+const MAX_LABEL = 24
+
+function truncate(s: string): string {
+  if (s.length <= MAX_LABEL) return s
+  return s.slice(0, MAX_LABEL) + '…'
+}
+
+function getOption(field: FilterFieldDef | undefined, value: string): FilterOption | undefined {
+  if (!field?.options) return undefined
+  return field.options.find((o) => o.value === value)
+}
+
+function valueText(field: FilterFieldDef | undefined, value: unknown): { text: string; tone?: TagVariant } {
+  if (Array.isArray(value)) {
+    if (value.length === 0) return { text: '' }
+    const first = String(value[0])
+    const opt = getOption(field, first)
+    const display = opt?.label ?? first
+    const more = value.length - 1
+    return {
+      text: more > 0 ? `${truncate(display)} +${more}` : truncate(display),
+      tone: opt?.tone,
+    }
+  }
+  if (value == null || value === '') return { text: '' }
+  const str = String(value)
+  const opt = getOption(field, str)
+  return { text: truncate(opt?.label ?? str), tone: opt?.tone }
+}
+
+// Operator labels in chips read as natural English: "Email is empty" beats
+// "Email: " (trailing colon, blank value). Keep the map narrow — only valueless
+// operators need a phrase form here; value-bearing operators show the value.
+const VALUELESS_OPERATOR_LABEL: Record<string, string> = {
+  is_empty: 'is empty',
+  is_not_empty: 'is not empty',
+  is_true: 'is true',
+  is_false: 'is false',
+}
+
+type Translator = ReturnType<typeof useT>
+
+function ruleChip(rule: FilterRule, fields: FilterFieldDef[], t: Translator): { label: string; tone?: TagVariant } {
+  const field = fields.find((f) => f.key === rule.field)
+  const fieldLabel = field?.label ?? rule.field
+  if (isValuelessOperator(rule.operator)) {
+    const fallback = VALUELESS_OPERATOR_LABEL[rule.operator] ?? rule.operator
+    const opLabel = t(`ui.advancedFilter.operator.${rule.operator}`, fallback)
+    return { label: `${fieldLabel} ${opLabel}` }
+  }
+  // `between` stores `[start, end]` — render it as a range, not as the
+  // multi-select "first +N" summary that `valueText` would produce.
+  if (rule.operator === 'between' && Array.isArray(rule.value)) {
+    const [start, end] = rule.value
+    const startStr = start == null ? '' : String(start)
+    const endStr = end == null ? '' : String(end)
+    return { label: `${fieldLabel}: ${truncate(startStr)} – ${truncate(endStr)}` }
+  }
+  const v = valueText(field, rule.value)
+  return { label: `${fieldLabel}: ${v.text}`, tone: v.tone }
+}
+
+function groupChip(group: FilterGroup, fields: FilterFieldDef[], invalidRuleIds: Set<string>, t: Translator): { label: string; tone?: TagVariant; remaining: number } {
+  const ruleChildren: FilterRule[] = []
+  for (const c of group.children) if (c.type === 'rule' && !invalidRuleIds.has(c.id)) ruleChildren.push(c)
+  if (!ruleChildren.length) return { label: '', remaining: 0 }
+  const firstChip = ruleChip(ruleChildren[0], fields, t)
+  const remaining = ruleChildren.length - 1
+  return {
+    label: remaining > 0 ? `${firstChip.label} +${remaining}` : firstChip.label,
+    tone: firstChip.tone,
+    remaining,
+  }
+}
+
+function isNodeFullyInvalid(node: FilterRule | FilterGroup, invalidRuleIds: Set<string>): boolean {
+  if (node.type === 'rule') return invalidRuleIds.has(node.id)
+  if (!node.children.length) return true
+  return node.children.every((c) => isNodeFullyInvalid(c, invalidRuleIds))
+}
+
+export function ActiveFilterChips({ tree, fields, popoverOpen, onRemoveNode, onOpen }: ActiveFilterChipsProps) {
+  const t = useT()
+  // Suppress chips for rules/groups whose values won't actually filter (matches
+  // the same gate the auto-apply hook uses). Stops the "chip is shown but data
+  // appears unfiltered" mismatch when a substring text rule has < 2 characters
+  // or a multi-value rule has no picks yet.
+  const invalidRuleIds = React.useMemo(() => {
+    const result = validateTreeForApply(tree, fields)
+    if (result.ok) return new Set<string>()
+    return new Set(result.errors.map((e) => e.ruleId))
+  }, [tree, fields])
+  const visibleChildren = React.useMemo(
+    () => tree.root.children.filter((child) => !isNodeFullyInvalid(child, invalidRuleIds)),
+    [tree.root.children, invalidRuleIds],
+  )
+  if (popoverOpen) return null
+  if (!visibleChildren.length) return null
+  return (
+    <div
+      className="flex items-center gap-2 px-4 py-2 overflow-x-auto bg-background border-b border-border"
+      data-testid="active-filter-chips"
+    >
+      {visibleChildren.map((child) => {
+        if (child.type === 'rule') {
+          const c = ruleChip(child, fields, t)
+          return (
+            <ChipWithRemove
+              key={child.id}
+              label={c.label}
+              tone={c.tone}
+              onClick={() => onOpen(child.id)}
+              onRemove={() => onRemoveNode(child.id)}
+              removeLabel={t('ui.advancedFilter.chips.remove', 'Remove filter')}
+            />
+          )
+        }
+        const c = groupChip(child, fields, invalidRuleIds, t)
+        return (
+          <ChipWithRemove
+            key={child.id}
+            label={c.label}
+            tone={c.tone}
+            onClick={() => onOpen(child.id)}
+            onRemove={() => onRemoveNode(child.id)}
+            removeLabel={t('ui.advancedFilter.chips.removeGroup', 'Remove filter group')}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+type ChipWithRemoveProps = {
+  label: string
+  tone?: TagVariant
+  onClick: () => void
+  onRemove: () => void
+  removeLabel: string
+}
+
+function ChipWithRemove({ label, tone, onClick, onRemove, removeLabel }: ChipWithRemoveProps) {
+  return (
+    <div className="inline-flex items-center gap-1" data-testid="active-filter-chip" aria-label={label}>
+      {/* Raw <button> required: <Tag> is a presentational pill primitive (not a Button), so wrapping
+          it in <Button> would inject Button's own styling around it. The native button keeps Tag's
+          visual contract intact while adding click + keyboard semantics; DS focus-visible ring is applied. */}
+      <button
+        type="button"
+        onClick={onClick}
+        className="inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      >
+        <Tag variant={tone ?? 'default'} dot={tone != null}>{label}</Tag>
+      </button>
+      <IconButton type="button" variant="ghost" size="xs" aria-label={removeLabel} onClick={onRemove}>
+        <X className="size-3" />
+      </IconButton>
+    </div>
+  )
+}