@asteby/metacore-runtime-react 39.1.0 → 39.2.0

package/src/apply-sidebar-layout.ts

@@ -0,0 +1,290 @@
+/**
+ * apply-sidebar-layout — pure overlay of an org sidebar layout onto a live
+ * catalog of leaves. Mirrors ops `services.ApplySidebarLayout` (Go). See
+ * CONTRACT-ORG-SIDEBAR-LAYOUT.md.
+ */
+
+export type SidebarNodeType = 'group' | 'folder' | 'leaf'
+
+export interface SidebarLayoutNode {
+  type: SidebarNodeType
+  key?: string
+  title?: string
+  icon?: string
+  ref?: string
+  hidden?: boolean
+  children?: SidebarLayoutNode[]
+}
+
+export interface SidebarLayoutDoc {
+  version?: number
+  tree: SidebarLayoutNode[]
+}
+
+export interface CatalogLeaf {
+  ref: string
+  title: string
+  url: string
+  icon?: string
+  /** Optional alternate refs that resolve to the same leaf. */
+  aliases?: string[]
+}
+
+export interface AppliedNavItem {
+  title: string
+  url: string
+  icon?: string
+  ref?: string
+  folderKey?: string
+  items?: AppliedNavItem[]
+}
+
+export interface AppliedNavGroup {
+  title: string
+  icon?: string
+  items: AppliedNavItem[]
+}
+
+/** Normalize a nav URL/path for stable refs. */
+export function normalizeNavPath(raw: string): string {
+  const trimmed = (raw || '').trim()
+  if (!trimmed) return '/'
+  try {
+    const u = new URL(trimmed, 'http://local.invalid')
+    let path = u.pathname || '/'
+    if (path !== '/') path = path.replace(/\/+$/, '')
+    return u.search ? `${path}${u.search}` : path
+  } catch {
+    return trimmed.replace(/\/+$/, '') || '/'
+  }
+}
+
+export function coreRefKey(url: string): string {
+  return `core:${normalizeNavPath(url)}`
+}
+
+export function addonModelRefKey(addonKey: string, table: string, query = ''): string {
+  let ref = `addon:${addonKey.trim()}/model:${table.trim().toLowerCase()}`
+  const q = query.replace(/^\?/, '').trim()
+  if (q) ref += `?${q}`
+  return ref
+}
+
+export function addonUrlRefKey(addonKey: string, path: string): string {
+  return `addon:${addonKey.trim()}/url:${normalizeNavPath(path)}`
+}
+
+export function urlRefKey(url: string): string {
+  return `url:${normalizeNavPath(url)}`
+}
+
+export function folderAccessCapability(folderKey: string): string {
+  return `folder.${folderKey}.access`
+}
+
+/**
+ * Pick the best stable ref for a live nav leaf.
+ * Prefer addon-aware forms when metadata is known; fall back to url:/core:.
+ */
+export function leafRefFor(
+  url: string,
+  meta?: { addonKey?: string; model?: string },
+): string {
+  const path = normalizeNavPath(url)
+  if (meta?.addonKey && meta?.model) {
+    const q = path.includes('?') ? path.slice(path.indexOf('?') + 1) : ''
+    return addonModelRefKey(meta.addonKey, meta.model, q)
+  }
+  const addonMatch = /^\/addons\/([^/]+)(?:\/(.*))?$/.exec(path.split('?')[0] ?? '')
+  if (addonMatch) {
+    const rest = addonMatch[2] ? `/${addonMatch[2]}` : '/'
+    const q = path.includes('?') ? path.slice(path.indexOf('?')) : ''
+    return addonUrlRefKey(addonMatch[1], rest + q)
+  }
+  if (path.startsWith('/m/')) return urlRefKey(path)
+  return coreRefKey(path)
+}
+
+function indexCatalog(catalog: CatalogLeaf[]): Map<string, CatalogLeaf> {
+  const map = new Map<string, CatalogLeaf>()
+  for (const leaf of catalog) {
+    if (!leaf.ref) continue
+    map.set(leaf.ref, leaf)
+    for (const a of leaf.aliases ?? []) map.set(a, leaf)
+    // Always index by url: form so layouts saved with either scheme resolve.
+    map.set(urlRefKey(leaf.url), leaf)
+    if (!leaf.url.startsWith('/m/') && !leaf.url.startsWith('/addons/')) {
+      map.set(coreRefKey(leaf.url), leaf)
+    }
+  }
+  return map
+}
+
+/**
+ * Apply an org layout onto a catalog. Returns `null` when the tree is empty
+ * (caller keeps the default merge).
+ */
+export function applySidebarLayout(
+  catalog: CatalogLeaf[],
+  tree: SidebarLayoutNode[] | undefined | null,
+): AppliedNavGroup[] | null {
+  if (!tree || tree.length === 0) return null
+  const byRef = indexCatalog(catalog)
+  const groups: AppliedNavGroup[] = []
+
+  for (const n of tree) {
+    if (n.hidden) continue
+    switch (n.type) {
+      case 'group': {
+        const items = applyChildren(n.children ?? [], byRef)
+        if (items.length === 0) break
+        groups.push({ title: n.title || n.key || '', icon: n.icon, items })
+        break
+      }
+      case 'folder': {
+        const item = applyFolder(n, byRef)
+        if (!item) break
+        groups.push({ title: n.title || n.key || '', icon: n.icon, items: [item] })
+        break
+      }
+      case 'leaf': {
+        const item = applyLeaf(n, byRef)
+        if (item) groups.push({ title: 'sidebar.general', items: [item] })
+        break
+      }
+    }
+  }
+  return groups.length > 0 ? groups : null
+}
+
+function applyChildren(
+  nodes: SidebarLayoutNode[],
+  byRef: Map<string, CatalogLeaf>,
+): AppliedNavItem[] {
+  const out: AppliedNavItem[] = []
+  for (const n of nodes) {
+    if (n.hidden) continue
+    if (n.type === 'folder') {
+      const item = applyFolder(n, byRef)
+      if (item) out.push(item)
+    } else if (n.type === 'leaf') {
+      const item = applyLeaf(n, byRef)
+      if (item) out.push(item)
+    }
+  }
+  return out
+}
+
+function applyFolder(
+  n: SidebarLayoutNode,
+  byRef: Map<string, CatalogLeaf>,
+): AppliedNavItem | null {
+  const children = applyChildren(n.children ?? [], byRef)
+  if (children.length === 0) return null
+  return {
+    title: n.title || n.key || '',
+    url: children[0]?.url ?? '#',
+    icon: n.icon,
+    folderKey: n.key,
+    items: children,
+  }
+}
+
+function applyLeaf(
+  n: SidebarLayoutNode,
+  byRef: Map<string, CatalogLeaf>,
+): AppliedNavItem | null {
+  if (!n.ref) return null
+  const leaf = byRef.get(n.ref)
+  if (!leaf) return null
+  return {
+    title: n.title?.trim() ? n.title : leaf.title,
+    url: leaf.url,
+    icon: n.icon || leaf.icon,
+    ref: n.ref,
+  }
+}
+
+/** Collect folder keys from a tree (for permissions catalog). */
+export function collectFolderKeys(tree: SidebarLayoutNode[]): string[] {
+  const out: string[] = []
+  const seen = new Set<string>()
+  const walk = (nodes: SidebarLayoutNode[]) => {
+    for (const n of nodes) {
+      if (n.type === 'folder' && n.key && !seen.has(n.key)) {
+        seen.add(n.key)
+        out.push(n.key)
+      }
+      if (n.children?.length) walk(n.children)
+    }
+  }
+  walk(tree)
+  return out
+}
+
+const FOLDER_KEY_RE = /^[a-z][a-z0-9_]{0,39}$/
+
+export function slugifyFolderKey(title: string): string {
+  let s = title
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '')
+  if (!s) s = 'folder'
+  if (s.length > 40) s = s.slice(0, 40)
+  if (!/^[a-z]/.test(s)) s = `f_${s}`.slice(0, 40)
+  return s
+}
+
+export function isValidFolderKey(key: string): boolean {
+  return FOLDER_KEY_RE.test(key)
+}
+
+/**
+ * Build a default layout tree from the live nav groups (one group node per
+ * section, leaves + existing collapsibles as folders). Used by the editor
+ * "start from current sidebar" action.
+ */
+export function layoutTreeFromNavGroups(
+  groups: Array<{
+    title: string
+    items: Array<{
+      title: string
+      url: string
+      icon?: string
+      items?: Array<{ title: string; url: string; icon?: string; items?: unknown[] }>
+      folderKey?: string
+      ref?: string
+    }>
+  }>,
+  refFor: (url: string) => string = (u) => leafRefFor(u),
+): SidebarLayoutNode[] {
+  return groups.map((g) => ({
+    type: 'group' as const,
+    key: g.title,
+    title: g.title,
+    children: g.items.map((it) => {
+      if (it.items && it.items.length > 0) {
+        const key = it.folderKey || slugifyFolderKey(it.title)
+        return {
+          type: 'folder' as const,
+          key,
+          title: it.title,
+          icon: typeof it.icon === 'string' ? it.icon : undefined,
+          children: it.items.map((child) => ({
+            type: 'leaf' as const,
+            ref: (child as { ref?: string }).ref || refFor(child.url),
+            title: child.title,
+            icon: typeof child.icon === 'string' ? child.icon : undefined,
+          })),
+        }
+      }
+      return {
+        type: 'leaf' as const,
+        ref: it.ref || refFor(it.url),
+        title: it.title,
+        icon: typeof it.icon === 'string' ? it.icon : undefined,
+      }
+    }),
+  }))
+}

package/src/dynamic-table.tsx

@@ -260,6 +260,12 @@ export interface DynamicTableProps {
     virtualizeRows?: boolean | number
 }
 
+/** True when an api-client error is an HTTP 403 (axios-style or fetch-style). */
+function isForbiddenError(error: unknown): boolean {
+    const e = error as { response?: { status?: number }; status?: number } | null
+    return e?.response?.status === 403 || e?.status === 403
+}
+
 export function DynamicTable({
     model,
     endpoint,
@@ -322,6 +328,10 @@ export function DynamicTable({
     // even if meta.total says otherwise (count/list drift would otherwise
     // keep the sentinel re-firing forever). Reset by any page-1 fetch.
     const [infExhausted, setInfExhausted] = useState(false)
+    // The list endpoint answered 403: the user lacks read permission on this
+    // model. Rendered as "no permission" instead of masquerading as an empty
+    // list. Purely display state — never a fetch dependency (no refetch loop).
+    const [forbidden, setForbidden] = useState(false)
     const infPageRef = useRef(1)
     const [optionsMap, setOptionsMap] = useState<Map<string, any[]>>(new Map())
 
@@ -859,6 +869,7 @@ export function DynamicTable({
                 ...buildFilterParams(),
             }
             const res = await api.get(endpoint || `/data/${model}`, { params }) as { data: ApiResponse<any[]> }
+            setForbidden(false)
             if (res.data.success) {
                 const rows = res.data.data || []
                 setData(rows)
@@ -874,7 +885,13 @@ export function DynamicTable({
                 }
             }
         } catch (error) {
-            console.error('Error al cargar los datos', error)
+            if (isForbiddenError(error)) {
+                setForbidden(true)
+                setData([])
+                setRowCount(0)
+            } else {
+                console.error('Error al cargar los datos', error)
+            }
         } finally {
             setLoadingData(false)
         }
@@ -922,6 +939,7 @@ export function DynamicTable({
                 const res = (await api.get(endpoint || `/data/${model}`, {
                     params,
                 })) as { data: ApiResponse<any[]> }
+                setForbidden(false)
                 if (res.data.success) {
                     const rows = res.data.data || []
                     setData((prev) => (append ? dedupeById(prev, rows) : rows))
@@ -941,7 +959,16 @@ export function DynamicTable({
                     setInfExhausted(rows.length < infPageSize)
                 }
             } catch (error) {
-                console.error('Error al cargar los datos', error)
+                if (isForbiddenError(error)) {
+                    setForbidden(true)
+                    if (!append) {
+                        setData([])
+                        setRowCount(0)
+                    }
+                    setInfExhausted(true)
+                } else {
+                    console.error('Error al cargar los datos', error)
+                }
             } finally {
                 if (append) setLoadingMore(false)
                 else setLoadingData(false)
@@ -1546,8 +1573,17 @@ export function DynamicTable({
                                                 <Inbox className="h-10 w-10" />
                                             </div>
                                             <div className="flex flex-col items-center gap-1">
-                                                <h3 className="text-lg font-semibold text-foreground">No se encontraron resultados</h3>
-                                                <p className="text-sm text-muted-foreground">No hay datos para mostrar en este momento.</p>
+                                                {forbidden ? (
+                                                    <>
+                                                        <h3 className="text-lg font-semibold text-foreground" role="alert">{t('dynamic.forbidden_title', { defaultValue: 'Sin permiso para ver este módulo' })}</h3>
+                                                        <p className="text-sm text-muted-foreground">{t('dynamic.forbidden_hint', { defaultValue: 'Tu rol no tiene acceso de lectura a estos datos. Pide acceso a un administrador.' })}</p>
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        <h3 className="text-lg font-semibold text-foreground">No se encontraron resultados</h3>
+                                                        <p className="text-sm text-muted-foreground">No hay datos para mostrar en este momento.</p>
+                                                    </>
+                                                )}
                                             </div>
                                         </div>
                                     </TableCell>
@@ -1736,8 +1772,17 @@ export function DynamicTable({
                             <div className='flex h-16 w-16 items-center justify-center rounded-full bg-muted/50'>
                                 <Inbox className='h-8 w-8' />
                             </div>
-                            <h3 className='text-base font-semibold text-foreground'>No se encontraron resultados</h3>
-                            <p className='text-sm text-muted-foreground'>No hay datos para mostrar en este momento.</p>
+                            {forbidden ? (
+                                <>
+                                    <h3 className='text-base font-semibold text-foreground' role='alert'>{t('dynamic.forbidden_title', { defaultValue: 'Sin permiso para ver este módulo' })}</h3>
+                                    <p className='text-sm text-muted-foreground'>{t('dynamic.forbidden_hint', { defaultValue: 'Tu rol no tiene acceso de lectura a estos datos. Pide acceso a un administrador.' })}</p>
+                                </>
+                            ) : (
+                                <>
+                                    <h3 className='text-base font-semibold text-foreground'>No se encontraron resultados</h3>
+                                    <p className='text-sm text-muted-foreground'>No hay datos para mostrar en este momento.</p>
+                                </>
+                            )}
                         </div>
                     )}
                     {infiniteScroll && (

package/src/index.ts

@@ -216,6 +216,29 @@ export {
     type RoleDef,
     type RoleInput,
 } from './permissions-manager'
+export {
+    applySidebarLayout,
+    collectFolderKeys,
+    folderAccessCapability,
+    coreRefKey,
+    addonModelRefKey,
+    addonUrlRefKey,
+    urlRefKey,
+    leafRefFor,
+    normalizeNavPath,
+    slugifyFolderKey,
+    isValidFolderKey,
+    layoutTreeFromNavGroups,
+    type CatalogLeaf,
+    type SidebarLayoutDoc,
+    type SidebarLayoutNode,
+    type AppliedNavGroup,
+    type AppliedNavItem,
+} from './apply-sidebar-layout'
+export {
+    SidebarLayoutManager,
+    type SidebarLayoutManagerProps,
+} from './sidebar-layout-manager'
 export * from './org-runtime-context'
 export * from './org-runtime-provider'
 export * from './navigation-builder'