@open-mercato/core 0.6.8-develop.7099.1.7ba2771d06 → 0.6.8-develop.7100.1.fbf66fca35

package/src/modules/devices/backend/devices/page.tsx

@@ -12,6 +12,8 @@ import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/u
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
+import { loadDeviceUserOptions, type DeviceUserOption } from './userOptions'
+import { useDeviceUserLabels } from './useDeviceUserLabels'
 
 type Row = {
   id: string
@@ -58,43 +60,37 @@ export default function DevicesAdminListPage() {
   const t = useT()
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const [filterValues, setFilterValues] = React.useState<FilterValues>({})
-  const [userOptions, setUserOptions] = React.useState<{ value: string; label: string; description?: string | null }[]>([])
+  const [userOptions, setUserOptions] = React.useState<DeviceUserOption[]>([])
 
-  // Devices admins may not hold auth.users.list; degrade gracefully (no options) instead of redirecting.
-  const loadUserOptions = React.useCallback(async (query?: string) => {
-    const params = new URLSearchParams()
-    params.set('page', '1')
-    params.set('pageSize', '20')
-    if (query && query.trim().length > 0) params.set('search', query.trim())
-    const call = await apiCall<{ items?: { id: string; name?: string | null; email?: string | null }[] }>(
-      `/api/auth/users?${params.toString()}`,
-      { headers: { 'x-om-forbidden-redirect': '0' } },
-      { fallback: null },
-    ).catch(() => null)
-    if (!call || !call.ok) return []
-    const next = (call.result?.items ?? []).flatMap((item) => {
-      if (!item || typeof item.id !== 'string' || !item.id.trim()) return []
-      const name = typeof item.name === 'string' && item.name.trim() ? item.name.trim() : null
-      const email = typeof item.email === 'string' && item.email.trim() ? item.email.trim() : null
-      const label = name ?? email ?? item.id
-      return [{ value: item.id, label, description: email && email !== label ? email : null }]
-    })
+  const mergeUserOptions = React.useCallback((next: DeviceUserOption[]) => {
+    if (next.length === 0) return
     setUserOptions((prev) => {
       const map = new Map(prev.map((opt) => [opt.value, opt]))
       for (const opt of next) map.set(opt.value, opt)
       return Array.from(map.values())
     })
-    return next
   }, [])
 
+  // Devices admins may not hold auth.users.list; the helper degrades to no options instead of
+  // redirecting the whole page to /login.
+  const loadUserOptions = React.useCallback(async (query?: string) => {
+    const next = await loadDeviceUserOptions(query)
+    mergeUserOptions(next)
+    return next
+  }, [mergeUserOptions])
+
   React.useEffect(() => { void loadUserOptions() }, [loadUserOptions, scopeVersion])
 
-  // Reuse the picker cache to label the User column; rows whose owner isn't cached still link by id.
   const userLabelById = React.useMemo(
     () => new Map(userOptions.map((opt) => [opt.value, opt.label])),
     [userOptions],
   )
 
+  // The picker only ever caches the users it happened to prefetch, so resolve the owners of the rows
+  // actually on this page. Without it most rows render a bare UUID.
+  const rowUserIds = React.useMemo(() => rows.map((row) => row.userId), [rows])
+  const resolvedUserLabels = useDeviceUserLabels(rowUserIds)
+
   const filters = React.useMemo<FilterDef[]>(() => [
     {
       id: 'platform',
@@ -194,7 +190,7 @@ export default function DevicesAdminListPage() {
       header: t('devices.list.columns.user'),
       cell: ({ row }) => {
         const userId = row.original.userId
-        const label = userLabelById.get(userId)
+        const label = resolvedUserLabels[userId] ?? userLabelById.get(userId)
         return (
           // Stop the click bubbling to the row, whose default action navigates to the device edit page.
           <Link
@@ -227,7 +223,7 @@ export default function DevicesAdminListPage() {
       header: t('devices.list.columns.lastSeen'),
       cell: ({ row }) => formatDate(row.original.lastSeenAt, t),
     },
-  ], [t, userLabelById])
+  ], [t, userLabelById, resolvedUserLabels])
 
   return (
     <Page>

package/src/modules/devices/backend/devices/useDeviceUserLabels.ts

@@ -0,0 +1,45 @@
+'use client'
+
+import * as React from 'react'
+import { resolveDeviceUserOptions } from './userOptions'
+
+// Resolves owner ids that are on screen into display labels. Modelled on
+// warranty_claims/backend/components/useUserDisplayNames, but every failure degrades to an empty
+// map instead of throwing: a devices admin without `auth.users.list` must still see the page.
+export function useDeviceUserLabels(userIds: readonly (string | null | undefined)[]): Record<string, string> {
+  const [labels, setLabels] = React.useState<Record<string, string>>({})
+  const resolvedIdsRef = React.useRef<Set<string>>(new Set())
+
+  const idsKey = React.useMemo(() => {
+    const normalized = new Set<string>()
+    for (const userId of userIds) {
+      if (typeof userId === 'string' && userId.trim()) normalized.add(userId.trim())
+    }
+    return Array.from(normalized)
+      .sort((left, right) => (left < right ? -1 : left > right ? 1 : 0))
+      .join(',')
+  }, [userIds])
+
+  React.useEffect(() => {
+    if (!idsKey) return
+    const unresolved = idsKey.split(',').filter((userId) => !resolvedIdsRef.current.has(userId))
+    if (unresolved.length === 0) return
+
+    const controller = new AbortController()
+    void resolveDeviceUserOptions(unresolved, controller.signal)
+      .then(({ options, resolvedIds }) => {
+        if (controller.signal.aborted) return
+        // Only ids the server actually answered for are remembered. Marking an id whose request
+        // failed would keep its row showing a bare UUID for the life of the component, even though
+        // the next attempt would have worked.
+        for (const userId of resolvedIds) resolvedIdsRef.current.add(userId)
+        const next: Record<string, string> = {}
+        for (const option of options) next[option.value] = option.label
+        if (Object.keys(next).length) setLabels((current) => ({ ...current, ...next }))
+      })
+      .catch(() => {})
+    return () => controller.abort()
+  }, [idsKey])
+
+  return labels
+}

package/src/modules/devices/backend/devices/userOptions.ts

@@ -0,0 +1,99 @@
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { MAX_USER_LOOKUP_IDS } from '@open-mercato/core/modules/auth/lib/userIdFilter'
+
+export type DeviceUserOption = {
+  value: string
+  label: string
+}
+
+type AuthUserItem = {
+  id?: unknown
+  name?: unknown
+  email?: unknown
+}
+
+const SEARCH_PAGE_SIZE = 20
+// Imported rather than restated: `parseIdsParam` slices past the route's cap without complaining,
+// so a client batch larger than the server accepts loses the overflow ids silently.
+const MAX_IDS_PER_LOOKUP = MAX_USER_LOOKUP_IDS
+
+/**
+ * Two label styles on purpose. A picker suggestion has to disambiguate two people with the same
+ * display name, and neither `CrudForm`'s combobox nor `FilterBar` renders anything but the label —
+ * so the email has to live in the label there. A resolved column label is read next to a device,
+ * where the email is noise.
+ */
+type LabelStyle = 'search' | 'compact'
+
+function toOption(item: AuthUserItem | null | undefined, style: LabelStyle): DeviceUserOption[] {
+  if (!item || typeof item.id !== 'string' || !item.id.trim()) return []
+  const id = item.id.trim()
+  const name = typeof item.name === 'string' && item.name.trim() ? item.name.trim() : null
+  const email = typeof item.email === 'string' && item.email.trim() ? item.email.trim() : null
+  const label = style === 'search' && name && email ? `${name} — ${email}` : name ?? email ?? id
+  return [{ value: id, label }]
+}
+
+// `devices.admin` declares `dependsOn: ['auth.users.list']`, but dependsOn only diagnoses — a
+// hand-built role can still reach these screens without it until the ACL editor or
+// `sync-role-acls` fixes it. `x-om-forbidden-redirect: 0` keeps that 403 from bouncing the whole
+// page to /login. `null` means the call itself failed, which callers must not
+// confuse with a successful call that matched nobody — a caller caching "already resolved" would
+// otherwise remember a transient network error forever.
+async function fetchUsers(
+  params: URLSearchParams,
+  style: LabelStyle,
+  signal?: AbortSignal,
+): Promise<DeviceUserOption[] | null> {
+  const call = await apiCall<{ items?: AuthUserItem[] }>(
+    `/api/auth/users?${params.toString()}`,
+    { headers: { 'x-om-forbidden-redirect': '0' }, signal },
+    { fallback: null },
+  ).catch(() => null)
+  if (!call || !call.ok) return null
+  return (call.result?.items ?? []).flatMap((item) => toOption(item, style))
+}
+
+export async function loadDeviceUserOptions(query?: string): Promise<DeviceUserOption[]> {
+  const params = new URLSearchParams()
+  params.set('page', '1')
+  params.set('pageSize', String(SEARCH_PAGE_SIZE))
+  const trimmed = query?.trim()
+  if (trimmed) params.set('search', trimmed)
+  // A picker has nothing to cache, so a failed lookup is just an empty suggestion list.
+  return (await fetchUsers(params, 'search')) ?? []
+}
+
+/**
+ * The outcome of a batch lookup. `resolvedIds` lists the ids the server actually answered for —
+ * an id that came back without a row (deleted user) still counts as resolved, an id whose request
+ * failed does not. Callers cache on `resolvedIds`, so a transient failure is retried rather than
+ * remembered as a permanent blank.
+ */
+export type DeviceUserLookup = {
+  options: DeviceUserOption[]
+  resolvedIds: string[]
+}
+
+// Batch id → label resolution for rows already on screen, so a device whose owner never appeared in
+// a search result still renders a name instead of a bare UUID.
+export async function resolveDeviceUserOptions(ids: string[], signal?: AbortSignal): Promise<DeviceUserLookup> {
+  const unique = Array.from(new Set(ids.map((id) => id.trim()).filter(Boolean)))
+  if (unique.length === 0) return { options: [], resolvedIds: [] }
+  const options: DeviceUserOption[] = []
+  const resolvedIds: string[] = []
+  for (let offset = 0; offset < unique.length; offset += MAX_IDS_PER_LOOKUP) {
+    const batch = unique.slice(offset, offset + MAX_IDS_PER_LOOKUP)
+    const params = new URLSearchParams()
+    params.set('page', '1')
+    params.set('pageSize', String(batch.length))
+    // URLSearchParams encodes on toString(); pre-encoding here would double-escape the commas.
+    params.set('ids', batch.join(','))
+    const batchOptions = await fetchUsers(params, 'compact', signal)
+    // One failed batch must not cost the batches that did answer.
+    if (batchOptions === null) continue
+    options.push(...batchOptions)
+    resolvedIds.push(...batch)
+  }
+  return { options, resolvedIds }
+}

package/src/modules/devices/i18n/de.json

@@ -23,8 +23,9 @@
   "devices.form.pushTokenHint": "Optional. Sicher gespeichert und nie wieder angezeigt.",
   "devices.form.success.created": "Gerät registriert",
   "devices.form.success.updated": "Gerät aktualisiert",
-  "devices.form.userId": "Benutzer-ID",
-  "devices.form.userIdHint": "UUID des Benutzers, dem dieses Gerät gehört.",
+  "devices.form.userId": "Benutzer",
+  "devices.form.userIdHint": "Namen oder E-Mail eingeben und den Besitzer aus der Liste auswählen.",
+  "devices.form.userIdPlaceholder": "Benutzer suchen",
   "devices.list.actions.deactivate": "Deaktivieren",
   "devices.list.actions.edit": "Bearbeiten",
   "devices.list.actions.register": "Gerät registrieren",

package/src/modules/devices/i18n/en.json

@@ -23,8 +23,9 @@
   "devices.form.pushTokenHint": "Optional. Stored securely and never shown again.",
   "devices.form.success.created": "Device registered",
   "devices.form.success.updated": "Device updated",
-  "devices.form.userId": "User ID",
-  "devices.form.userIdHint": "UUID of the user who owns this device.",
+  "devices.form.userId": "User",
+  "devices.form.userIdHint": "Start typing a name or email, then pick the owner from the list.",
+  "devices.form.userIdPlaceholder": "Search users",
   "devices.list.actions.deactivate": "Deactivate",
   "devices.list.actions.edit": "Edit",
   "devices.list.actions.register": "Register device",

package/src/modules/devices/i18n/es.json

@@ -23,8 +23,9 @@
   "devices.form.pushTokenHint": "Opcional. Se almacena de forma segura y no se vuelve a mostrar.",
   "devices.form.success.created": "Dispositivo registrado",
   "devices.form.success.updated": "Dispositivo actualizado",
-  "devices.form.userId": "ID de usuario",
-  "devices.form.userIdHint": "UUID del usuario propietario de este dispositivo.",
+  "devices.form.userId": "Usuario",
+  "devices.form.userIdHint": "Empieza a escribir un nombre o correo electrónico y elige el propietario de la lista.",
+  "devices.form.userIdPlaceholder": "Buscar usuarios",
   "devices.list.actions.deactivate": "Desactivar",
   "devices.list.actions.edit": "Editar",
   "devices.list.actions.register": "Registrar dispositivo",

package/src/modules/devices/i18n/ko.json

@@ -23,8 +23,9 @@
   "devices.form.pushTokenHint": "선택 사항입니다. 안전하게 저장되며 다시 표시되지 않습니다.",
   "devices.form.success.created": "기기가 등록되었습니다",
   "devices.form.success.updated": "기기가 수정되었습니다",
-  "devices.form.userId": "사용자 ID",
-  "devices.form.userIdHint": "이 기기를 소유한 사용자의 UUID입니다.",
+  "devices.form.userId": "사용자",
+  "devices.form.userIdHint": "이름 또는 이메일을 입력한 다음 목록에서 소유자를 선택하세요.",
+  "devices.form.userIdPlaceholder": "사용자 검색",
   "devices.list.actions.deactivate": "비활성화",
   "devices.list.actions.edit": "수정",
   "devices.list.actions.register": "기기 등록",

package/src/modules/devices/i18n/pl.json

@@ -23,8 +23,9 @@
   "devices.form.pushTokenHint": "Opcjonalne. Token jest przechowywany bezpiecznie i nigdy więcej niewyświetlany.",
   "devices.form.success.created": "Urządzenie zarejestrowane",
   "devices.form.success.updated": "Urządzenie zaktualizowane",
-  "devices.form.userId": "ID użytkownika",
-  "devices.form.userIdHint": "UUID użytkownika, do którego należy to urządzenie.",
+  "devices.form.userId": "Użytkownik",
+  "devices.form.userIdHint": "Zacznij wpisywać nazwę lub e-mail, a następnie wybierz właściciela z listy.",
+  "devices.form.userIdPlaceholder": "Szukaj użytkowników",
   "devices.list.actions.deactivate": "Dezaktywuj",
   "devices.list.actions.edit": "Edytuj",
   "devices.list.actions.register": "Zarejestruj urządzenie",

package/src/modules/devices/setup.ts

@@ -2,8 +2,12 @@ import type { ModuleSetupConfig } from '@open-mercato/shared/modules/setup'
 
 export const setup: ModuleSetupConfig = {
   defaultRoleFeatures: {
-    superadmin: ['devices.*'],
-    admin: ['devices.*'],
+    // `auth.users.list` is granted alongside `devices.admin` rather than left to the auth module's
+    // own `admin: ['auth.*']`, so the dependency declared in `acl.ts` holds even where that grant
+    // was narrowed. Without it the owner picker has nothing to offer and the register form cannot
+    // be completed. Existing tenants pick this up via `yarn mercato auth sync-role-acls`.
+    superadmin: ['devices.*', 'auth.users.list'],
+    admin: ['devices.*', 'auth.users.list'],
     employee: ['devices.view', 'devices.manage'],
   },
 }