@open-mercato/ui 0.9.1-develop.7499.1.fcec456e4e → 0.9.1-develop.7515.1.e2712c8b00

package/src/backend/crud/__tests__/injectedFieldGroups.test.ts

@@ -0,0 +1,90 @@
+import type { InjectionFieldDefinition } from '@open-mercato/shared/modules/widgets/injection'
+import { InjectionPosition } from '@open-mercato/shared/modules/widgets/injection-position'
+import type { CrudFormGroup } from '../../CrudForm'
+import {
+  INJECTED_FIELDS_FALLBACK_GROUP_ID,
+  placeInjectedFieldsInGroups,
+  type InjectedFieldWidgetPlacement,
+} from '../injectedFieldGroups'
+
+function field(id: string, group?: string, extra: Partial<InjectionFieldDefinition> = {}): InjectionFieldDefinition {
+  return { id, label: id, type: 'text', group, ...extra } as InjectionFieldDefinition
+}
+
+function fieldIds(group: CrudFormGroup | undefined): string[] {
+  return (group?.fields ?? []).map((entry) => (typeof entry === 'string' ? entry : entry.id))
+}
+
+const groupPlacement: InjectedFieldWidgetPlacement = {
+  kind: 'group',
+  column: 2,
+  groupLabel: 'wms.widgets.catalog.inventoryProfile.groupLabel',
+  groupDescription: 'wms.widgets.catalog.inventoryProfile.groupDescription',
+}
+
+describe('placeInjectedFieldsInGroups (#6142)', () => {
+  it('inserts a field into the declared group it targets, honoring placement', () => {
+    const groups: CrudFormGroup[] = [{ id: 'general', fields: ['title', 'sku'] }]
+    const placed = placeInjectedFieldsInGroups(
+      groups,
+      [field('subtitle', 'general', { placement: { position: InjectionPosition.After, relativeTo: 'title' } })],
+      new Map(),
+    )
+    expect(fieldIds(placed[0])).toEqual(['title', 'subtitle', 'sku'])
+    expect(groups[0].fields).toEqual(['title', 'sku'])
+  })
+
+  it('renders fields of an undeclared group-kind injection as their own card', () => {
+    const groups: CrudFormGroup[] = [
+      { id: 'general', fields: ['title'] },
+      { id: 'custom', kind: 'customFields', title: 'Custom attributes' },
+    ]
+    const definitions = [field('wms.manageInventory', 'wms.inventoryProfile'), field('wms.safetyStock', 'wms.inventoryProfile')]
+    const placements = new Map(definitions.map((definition) => [definition.id, groupPlacement]))
+
+    const placed = placeInjectedFieldsInGroups(groups, definitions, placements)
+
+    expect(placed.map((group) => group.id)).toEqual(['general', 'custom', 'wms.inventoryProfile'])
+    const card = placed[2]
+    expect(card.title).toBe(groupPlacement.groupLabel)
+    expect(card.description).toBe(groupPlacement.groupDescription)
+    expect(card.column).toBe(2)
+    expect(fieldIds(card)).toEqual(['wms.manageInventory', 'wms.safetyStock'])
+    expect(fieldIds(placed[0])).toEqual(['title'])
+  })
+
+  it('never falls back into a customFields group, which ignores group.fields', () => {
+    const fallbacks: string[] = []
+    const placed = placeInjectedFieldsInGroups(
+      [
+        { id: 'general', fields: ['title'] },
+        { id: 'custom', kind: 'customFields' },
+      ],
+      [field('example.priority', 'missing')],
+      new Map(),
+      (definition) => fallbacks.push(definition.id),
+    )
+    expect(fieldIds(placed[0])).toEqual(['title', 'example.priority'])
+    expect(fieldIds(placed[1])).toEqual([])
+    expect(fallbacks).toEqual(['example.priority'])
+  })
+
+  it('synthesizes a host group when no declared group renders plain fields', () => {
+    const placed = placeInjectedFieldsInGroups(
+      [{ id: 'custom', kind: 'customFields' }],
+      [field('example.priority', 'missing')],
+      new Map(),
+    )
+    expect(placed.map((group) => group.id)).toEqual(['custom', INJECTED_FIELDS_FALLBACK_GROUP_ID])
+    expect(fieldIds(placed[1])).toEqual(['example.priority'])
+  })
+
+  it('does not duplicate a field the host already declares', () => {
+    const placed = placeInjectedFieldsInGroups(
+      [{ id: 'general', fields: ['title', 'subtitle'] }],
+      [field('subtitle', 'general')],
+      new Map(),
+    )
+    expect(fieldIds(placed[0])).toEqual(['title', 'subtitle'])
+  })
+})

package/src/backend/crud/injectedFieldGroups.ts

@@ -0,0 +1,75 @@
+import type { InjectionFieldDefinition } from '@open-mercato/shared/modules/widgets/injection'
+import { insertByInjectionPlacement } from '@open-mercato/shared/modules/widgets/injection-position'
+import type { CrudFormGroup } from '../CrudForm'
+
+export type InjectedFieldWidgetPlacement = {
+  kind?: 'tab' | 'group' | 'stack'
+  groupLabel?: string
+  groupDescription?: string
+  column?: 1 | 2
+}
+
+export const INJECTED_FIELDS_FALLBACK_GROUP_ID = '__injected-fields__'
+
+function hostsPlainFields(group: CrudFormGroup): boolean {
+  return group.kind !== 'customFields' && !group.bare
+}
+
+function entryId(entry: NonNullable<CrudFormGroup['fields']>[number]): string {
+  return typeof entry === 'string' ? entry : entry.id
+}
+
+/**
+ * Places injected field definitions into the host form's groups.
+ *
+ * - A field whose `group` matches a declared group is inserted there (honoring `placement`).
+ * - A field whose `group` is not declared, injected by a widget mapped with `kind: 'group'`,
+ *   gets its own card built from the injection-table `groupLabel`/`groupDescription`/`column`.
+ * - Any other field falls back to the last group that renders plain fields — never into a
+ *   `customFields` or `bare` group, which do not render `group.fields` and would drop it.
+ *   A field that explicitly names a `customFields` or `bare` group is still placed there and,
+ *   like any non-field entry of such a group, is not rendered.
+ */
+export function placeInjectedFieldsInGroups(
+  groups: CrudFormGroup[],
+  definitions: InjectionFieldDefinition[],
+  placementByFieldId: ReadonlyMap<string, InjectedFieldWidgetPlacement | undefined>,
+  onFallback?: (definition: InjectionFieldDefinition) => void,
+): CrudFormGroup[] {
+  const placed: CrudFormGroup[] = groups.map((group) => ({ ...group, fields: [...(group.fields ?? [])] }))
+  let fallbackIndex = -1
+  for (let index = placed.length - 1; index >= 0; index -= 1) {
+    if (hostsPlainFields(placed[index])) {
+      fallbackIndex = index
+      break
+    }
+  }
+
+  for (const definition of definitions) {
+    let index = definition.group ? placed.findIndex((group) => group.id === definition.group) : -1
+    if (index < 0) {
+      const placement = placementByFieldId.get(definition.id)
+      if (definition.group && placement?.kind === 'group') {
+        placed.push({
+          id: definition.group,
+          title: placement.groupLabel,
+          description: placement.groupDescription,
+          column: placement.column === 2 ? 2 : 1,
+          fields: [],
+        })
+        index = placed.length - 1
+      } else {
+        onFallback?.(definition)
+        if (fallbackIndex < 0) {
+          placed.push({ id: INJECTED_FIELDS_FALLBACK_GROUP_ID, fields: [] })
+          fallbackIndex = placed.length - 1
+        }
+        index = fallbackIndex
+      }
+    }
+    const fieldEntries = placed[index].fields ?? []
+    if (fieldEntries.some((entry) => entryId(entry) === definition.id)) continue
+    placed[index].fields = insertByInjectionPlacement(fieldEntries, definition.id, definition.placement, entryId)
+  }
+  return placed
+}

package/src/backend/filters/FilterFieldPicker.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Search, Activity, Calendar, Hash, Tag, ArrowRight, ALargeSmall, UserRound, Mail, Phone, Filter, type LucideIcon } from 'lucide-react'
 import { Popover, PopoverContent, PopoverAnchor } from '../../primitives/popover'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { UNGROUPED_GROUP_ID, resolveGroupLabel } from '../utils/groupLabels'
 import type { FilterFieldDef, FilterFieldType } from '@open-mercato/shared/lib/query/advanced-filter'
 
 const TYPE_ICON: Record<FilterFieldType, LucideIcon> = {
@@ -54,7 +55,7 @@ export function FilterFieldPicker({ fields, open, onOpenChange, onSelect, trigge
     const map = new Map<string, FilterFieldDef[]>()
     const order: string[] = []
     for (const f of filtered) {
-      const g = f.group ?? 'More'
+      const g = f.group ?? UNGROUPED_GROUP_ID
       if (!map.has(g)) { map.set(g, []); order.push(g) }
       map.get(g)!.push(f)
     }
@@ -103,7 +104,7 @@ export function FilterFieldPicker({ fields, open, onOpenChange, onSelect, trigge
           <div className="max-h-[400px] overflow-y-auto py-1" role="listbox">
             {grouped.map(({ group, items }) => (
               <div key={group}>
-                <div className="px-3 pt-2 pb-1 text-overline font-semibold uppercase tracking-widest text-muted-foreground">{group}</div>
+                <div className="px-3 pt-2 pb-1 text-overline font-semibold uppercase tracking-widest text-muted-foreground">{resolveGroupLabel(t, group, 'ui.advancedFilter.fieldPicker.ungrouped', 'More')}</div>
                 {items.map((f) => {
                   const flatIdx = flatVisible.indexOf(f)
                   const Icon = resolveIcon(f)

package/src/backend/filters/__tests__/FilterFieldPicker.groupLabels.test.tsx

@@ -0,0 +1,77 @@
+// packages/ui/src/backend/filters/__tests__/FilterFieldPicker.groupLabels.test.tsx
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import type { Locale } from '@open-mercato/shared/lib/i18n/config'
+import { FilterFieldPicker } from '../FilterFieldPicker'
+import type { FilterFieldDef } from '@open-mercato/shared/lib/query/advanced-filter'
+
+const fields: FilterFieldDef[] = [
+  { key: 'owner', label: 'Owner', type: 'text', group: 'customers.columnGroups.crm' },
+  { key: 'email', label: 'Email', type: 'text', group: 'Contact' },
+  { key: 'ungrouped', label: 'Ungrouped', type: 'text' },
+]
+
+function renderPicker(locale: Locale, dict: Record<string, string>, pickerFields = fields) {
+  return render(
+    <I18nProvider locale={locale} dict={dict}>
+      <FilterFieldPicker fields={pickerFields} open onSelect={() => {}} onOpenChange={() => {}} triggerRef={{ current: null }} />
+    </I18nProvider>,
+  )
+}
+
+describe('FilterFieldPicker group labels', () => {
+  it('translates group labels a host registered in its locale file', () => {
+    renderPicker('pl', {
+      'customers.columnGroups.crm': 'CRM PL',
+      'ui.advancedFilter.fieldPicker.ungrouped': 'Więcej',
+    })
+    expect(screen.getByText('CRM PL')).toBeInTheDocument()
+    expect(screen.queryByText('customers.columnGroups.crm')).not.toBeInTheDocument()
+  })
+
+  it('renders unrecognized group strings verbatim', () => {
+    renderPicker('pl', { 'customers.columnGroups.crm': 'CRM PL' })
+    expect(screen.getByText('Contact')).toBeInTheDocument()
+  })
+
+  it('translates the fallback group label for fields without a group', () => {
+    renderPicker('pl', { 'ui.advancedFilter.fieldPicker.ungrouped': 'Więcej' })
+    expect(screen.getByText('Więcej')).toBeInTheDocument()
+    expect(screen.queryByText('More')).not.toBeInTheDocument()
+  })
+
+  it('falls back to the English label when no translation is registered', () => {
+    renderPicker('en', {})
+    expect(screen.getByText('More')).toBeInTheDocument()
+    expect(screen.getByText('Contact')).toBeInTheDocument()
+  })
+
+  it('never resolves tenant-authored group titles as translation keys', () => {
+    renderPicker('pl', { 'Deal pipeline': 'Lejek sprzedaży' }, [
+      { key: 'stage', label: 'Stage', type: 'text', group: 'Deal pipeline' },
+    ])
+    expect(screen.getByText('Deal pipeline')).toBeInTheDocument()
+    expect(screen.queryByText('Lejek sprzedaży')).not.toBeInTheDocument()
+  })
+
+  it('keeps ungrouped identity locale-independent instead of splitting on the translated label', () => {
+    renderPicker('pl', { 'ui.advancedFilter.fieldPicker.ungrouped': 'Więcej' }, [
+      { key: 'ungrouped', label: 'Ungrouped', type: 'text' },
+      { key: 'more', label: 'More field', type: 'text', group: 'More' },
+    ])
+    expect(screen.getByText('Więcej')).toBeInTheDocument()
+    expect(screen.getByText('More')).toBeInTheDocument()
+  })
+
+  it('keys grouping on the raw group string so two groups sharing a translation stay apart', () => {
+    renderPicker('pl', {
+      'customers.columnGroups.crm': 'CRM',
+      'customers.columnGroups.pipeline': 'CRM',
+    }, [
+      { key: 'owner', label: 'Owner', type: 'text', group: 'customers.columnGroups.crm' },
+      { key: 'stage', label: 'Stage', type: 'text', group: 'customers.columnGroups.pipeline' },
+    ])
+    expect(screen.getAllByText('CRM')).toHaveLength(2)
+  })
+})

package/src/backend/utils/__tests__/api.test.ts

@@ -10,7 +10,11 @@ import {
   ForbiddenError,
   UnauthorizedError,
   apiFetch,
+  notifyForbiddenAccess,
+  redirectToSessionRefresh,
+  registerAuthNoticeTranslator,
 } from '../../utils/api'
+import { createTranslator } from '@open-mercato/shared/lib/i18n/translate'
 
 function createMockResponse(
   status: number,
@@ -227,3 +231,66 @@ describe('apiFetch', () => {
     expect(flash).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('auth notice banners i18n (GH #7381)', () => {
+  const polishTranslator = createTranslator({
+    'ui.auth.sessionExpired': 'Sesja wygasła. Przekierowanie do logowania…',
+    'ui.auth.accessDenied.missingFeatures': 'Odmowa dostępu: brakuje uprawnienia „{features}”.',
+    'ui.auth.accessDenied.requiredRoles': 'Odmowa dostępu: wymagana rola „{roles}”.',
+    'ui.auth.accessDenied.generic': 'Odmowa dostępu.',
+  })
+  let unregister: (() => void) | null = null
+
+  beforeEach(() => {
+    jest.resetAllMocks()
+    jest.useFakeTimers()
+    window.history.pushState({}, '', '/backend/customers/people')
+    window.sessionStorage.clear()
+  })
+
+  afterEach(() => {
+    unregister?.()
+    unregister = null
+    jest.clearAllTimers()
+    jest.useRealTimers()
+  })
+
+  it('translates the session-expired banner with the registered translator', () => {
+    unregister = registerAuthNoticeTranslator(polishTranslator)
+
+    redirectToSessionRefresh()
+
+    expect(flash).toHaveBeenCalledWith('Sesja wygasła. Przekierowanie do logowania…', 'warning')
+  })
+
+  it('translates the access-denied banners and interpolates features and roles', () => {
+    unregister = registerAuthNoticeTranslator(polishTranslator)
+
+    notifyForbiddenAccess({ requiredFeatures: ['dashboards.view'] })
+    notifyForbiddenAccess({ requiredRoles: ['admin'] })
+
+    expect(flash).toHaveBeenNthCalledWith(1, 'Odmowa dostępu: brakuje uprawnienia „dashboards.view”.', 'warning')
+    expect(flash).toHaveBeenNthCalledWith(2, 'Odmowa dostępu: wymagana rola „admin”.', 'warning')
+  })
+
+  it('falls back to English copy once the translator is unregistered', () => {
+    registerAuthNoticeTranslator(polishTranslator)()
+
+    notifyForbiddenAccess({ requiredFeatures: ['dashboards.view'] })
+
+    expect(flash).toHaveBeenCalledWith(
+      'Access denied: you are missing the required permission "dashboards.view". Contact your administrator.',
+      'warning',
+    )
+  })
+
+  it('keeps a newer translator when an older registration is cleaned up', () => {
+    const releaseOlder = registerAuthNoticeTranslator(createTranslator({}))
+    unregister = registerAuthNoticeTranslator(polishTranslator)
+    releaseOlder()
+
+    redirectToSessionRefresh()
+
+    expect(flash).toHaveBeenCalledWith('Sesja wygasła. Przekierowanie do logowania…', 'warning')
+  })
+})

package/src/backend/utils/api.ts

@@ -8,9 +8,30 @@ import { pushOperation } from '../operations/store'
 import { pushPartialIndexWarning } from '../indexes/store'
 import { createScopedHeaderStack } from './scopedHeaderStack'
 import { createLogger } from '@open-mercato/shared/lib/logger'
+import type { TranslateFn, TranslateParams } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 
 const logger = createLogger('ui').child({ component: 'apiFetch' })
 
+const fallbackAuthNoticeTranslator: TranslateFn = (key) => key
+let authNoticeTranslator: TranslateFn | null = null
+
+/**
+ * Register the active i18n translator for the session-expired and
+ * access-denied flash banners, which fire outside React. Returns a cleanup
+ * that unregisters it unless another translator replaced it meanwhile.
+ */
+export function registerAuthNoticeTranslator(translate: TranslateFn): () => void {
+  authNoticeTranslator = translate
+  return () => {
+    if (authNoticeTranslator === translate) authNoticeTranslator = null
+  }
+}
+
+function translateAuthNotice(key: string, fallback: string, params?: TranslateParams): string {
+  return translateWithFallback(authNoticeTranslator ?? fallbackAuthNoticeTranslator, key, fallback, params)
+}
+
 const scopedHeaders = createScopedHeaderStack()
 
 function mergeHeaders(base: HeadersInit | undefined, scoped: Record<string, string>): Headers {
@@ -106,7 +127,7 @@ export function redirectToSessionRefresh() {
   if (recentlyAttemptedSessionRefresh(current)) return
   recordSessionRefreshAttempt(current)
   try {
-    flash('Session expired. Redirecting to sign in…', 'warning')
+    flash(translateAuthNotice('ui.auth.sessionExpired', 'Session expired. Redirecting to sign in…'), 'warning')
     setTimeout(() => {
       window.location.href = `/api/auth/session/refresh?redirect=${encodeURIComponent(current)}`
     }, 20)
@@ -144,12 +165,20 @@ function formatForbiddenAccessMessage(options?: { requiredRoles?: string[] | nul
   const roles = options?.requiredRoles?.filter(Boolean) ?? []
   const effectiveRoles = roles.length ? roles : DEFAULT_FORBIDDEN_ROLES.filter(Boolean)
   if (features.length) {
-    return `Access denied: you are missing the required permission "${features.join(', ')}". Contact your administrator.`
+    return translateAuthNotice(
+      'ui.auth.accessDenied.missingFeatures',
+      'Access denied: you are missing the required permission "{features}". Contact your administrator.',
+      { features: features.join(', ') },
+    )
   }
   if (effectiveRoles.length) {
-    return `Access denied: this area requires the role "${effectiveRoles.join(', ')}". Contact your administrator.`
+    return translateAuthNotice(
+      'ui.auth.accessDenied.requiredRoles',
+      'Access denied: this area requires the role "{roles}". Contact your administrator.',
+      { roles: effectiveRoles.join(', ') },
+    )
   }
-  return 'Access denied: you do not have permission to perform this action.'
+  return translateAuthNotice('ui.auth.accessDenied.generic', 'Access denied: you do not have permission to perform this action.')
 }
 
 /**

package/src/backend/utils/groupLabels.ts

@@ -0,0 +1,26 @@
+// packages/ui/src/backend/utils/groupLabels.ts
+
+// Stable, locale-independent identity for the "no declared group" bucket. Grouping and
+// collapse state key on this sentinel so two locales never split one bucket in two.
+export const UNGROUPED_GROUP_ID = '__om_ungrouped__'
+
+const TRANSLATION_KEY_PATTERN = /^[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+)+$/
+
+// Group strings reach these components from two very different places: code literals a
+// module author controls, and free text a tenant types into the custom-field fieldset
+// editor. Only the former may be resolved as a translation key, so tenant data is never
+// silently reinterpreted as a dictionary lookup.
+export function isTranslationKeyShaped(group: string): boolean {
+  return TRANSLATION_KEY_PATTERN.test(group)
+}
+
+export function resolveGroupLabel(
+  translate: (key: string, fallback?: string) => string,
+  group: string,
+  ungroupedKey: string,
+  ungroupedFallback: string,
+): string {
+  if (group === UNGROUPED_GROUP_ID) return translate(ungroupedKey, ungroupedFallback)
+  if (!isTranslationKeyShaped(group)) return group
+  return translate(group, group)
+}

package/src/theme/QueryProvider.tsx

@@ -2,7 +2,8 @@
 import * as React from 'react'
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { parseBooleanWithDefault } from '@open-mercato/shared/lib/boolean'
-import { redirectToSessionRefresh, notifyForbiddenAccess, UnauthorizedError, ForbiddenError, apiFetch, setAuthRedirectConfig } from '../backend/utils/api'
+import { useOptionalT } from '@open-mercato/shared/lib/i18n/context'
+import { redirectToSessionRefresh, notifyForbiddenAccess, UnauthorizedError, ForbiddenError, apiFetch, setAuthRedirectConfig, registerAuthNoticeTranslator } from '../backend/utils/api'
 
 // Ensure global fetch calls also flow through apiFetch so 401 session-refresh
 // and 403 access-denied flash banners fire consistently.
@@ -68,6 +69,11 @@ const client = new QueryClient({
 type QueryProviderProps = { children: React.ReactNode; defaultForbiddenRoles?: string[] }
 
 export function QueryProvider({ children, defaultForbiddenRoles }: QueryProviderProps) {
+  const t = useOptionalT()
+  React.useEffect(() => {
+    if (!t) return
+    return registerAuthNoticeTranslator(t)
+  }, [t])
   React.useEffect(() => {
     ensureGlobalFetchInterception()
     if (defaultForbiddenRoles && defaultForbiddenRoles.length) {

package/src/theme/__tests__/QueryProvider.i18n.test.tsx

@@ -0,0 +1,40 @@
+/**
+ * @jest-environment jsdom
+ */
+jest.mock('../../backend/FlashMessages', () => ({
+  flash: jest.fn(),
+}))
+
+import { render } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { flash } from '../../backend/FlashMessages'
+import { redirectToSessionRefresh } from '../../backend/utils/api'
+import { QueryProvider } from '../QueryProvider'
+
+describe('QueryProvider auth notice translator (GH #7381)', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+    window.history.pushState({}, '', '/backend/customers/people')
+    window.sessionStorage.clear()
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    jest.useRealTimers()
+  })
+
+  it('shows the session-expired banner in the active locale', () => {
+    const view = render(
+      <I18nProvider locale="pl" dict={{ 'ui.auth.sessionExpired': 'Sesja wygasła. Przekierowanie do logowania…' }}>
+        <QueryProvider>
+          <div />
+        </QueryProvider>
+      </I18nProvider>,
+    )
+
+    redirectToSessionRefresh()
+    view.unmount()
+
+    expect(flash).toHaveBeenCalledWith('Sesja wygasła. Przekierowanie do logowania…', 'warning')
+  })
+})