@asteby/metacore-runtime-react 18.13.3 → 18.15.0

package/src/__tests__/permissions-context.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+
+// Sin `globals: true` en vitest, RTL no auto-limpia entre tests.
+afterEach(cleanup)
+import {
+    PermissionsProvider,
+    useCan,
+    usePermissionsActive,
+    makeCan,
+    capabilityForActionKey,
+    modelCapability,
+} from '../permissions-context'
+
+function Probe({ capability }: { capability: string }) {
+    const can = useCan()
+    return <span data-testid="probe">{can(capability) ? 'allowed' : 'denied'}</span>
+}
+
+function ActiveProbe() {
+    const active = usePermissionsActive()
+    return <span data-testid="active">{active ? 'yes' : 'no'}</span>
+}
+
+describe('makeCan', () => {
+    it('isAdmin permite todo', () => {
+        const can = makeCan([], true)
+        expect(can('pos_orders.create')).toBe(true)
+        expect(can('cualquier.cosa')).toBe(true)
+    })
+
+    it('capability exacta en la lista → true; ausente → false', () => {
+        const can = makeCan(['pos_orders.index', 'general.work_after_hours'], false)
+        expect(can('pos_orders.index')).toBe(true)
+        expect(can('general.work_after_hours')).toBe(true)
+        expect(can('pos_orders.create')).toBe(false)
+    })
+
+    it('wildcard "*" permite todo', () => {
+        const can = makeCan(['*'], false)
+        expect(can('pos_orders.delete')).toBe(true)
+        expect(can('lo.que.sea')).toBe(true)
+    })
+})
+
+describe('useCan', () => {
+    it('sin provider → siempre true (comportamiento legacy, nada se oculta)', () => {
+        render(<Probe capability="pos_orders.create" />)
+        expect(screen.getByTestId('probe').textContent).toBe('allowed')
+    })
+
+    it('con provider no-admin: exacta permitida, resto denegado', () => {
+        render(
+            <PermissionsProvider permissions={['pos_orders.index']} isAdmin={false}>
+                <Probe capability="pos_orders.index" />
+            </PermissionsProvider>,
+        )
+        expect(screen.getByTestId('probe').textContent).toBe('allowed')
+
+        render(
+            <PermissionsProvider permissions={['pos_orders.index']} isAdmin={false}>
+                <Probe capability="pos_orders.create" />
+            </PermissionsProvider>,
+        )
+        expect(screen.getAllByTestId('probe')[1].textContent).toBe('denied')
+    })
+
+    it('con provider isAdmin → todo permitido', () => {
+        render(
+            <PermissionsProvider permissions={[]} isAdmin={true}>
+                <Probe capability="pos_orders.delete" />
+            </PermissionsProvider>,
+        )
+        expect(screen.getByTestId('probe').textContent).toBe('allowed')
+    })
+
+    it('usePermissionsActive refleja la presencia del provider', () => {
+        render(<ActiveProbe />)
+        expect(screen.getByTestId('active').textContent).toBe('no')
+        render(
+            <PermissionsProvider permissions={[]} isAdmin={false}>
+                <ActiveProbe />
+            </PermissionsProvider>,
+        )
+        expect(screen.getAllByTestId('active')[1].textContent).toBe('yes')
+    })
+})
+
+describe('capability mapping', () => {
+    it('view→index, edit→update, resto verbatim', () => {
+        expect(capabilityForActionKey('view')).toBe('index')
+        expect(capabilityForActionKey('edit')).toBe('update')
+        expect(capabilityForActionKey('delete')).toBe('delete')
+        expect(capabilityForActionKey('pagar')).toBe('pagar')
+    })
+
+    it('modelCapability lowercasea el modelo', () => {
+        expect(modelCapability('PosOrders', 'create')).toBe('posorders.create')
+        expect(modelCapability('pos_orders', 'edit')).toBe('pos_orders.update')
+    })
+})

package/src/__tests__/permissions-manager.test.tsx

@@ -0,0 +1,258 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Sin `globals: true` en vitest, RTL no auto-limpia entre tests.
+afterEach(cleanup)
+import {
+    PermissionsManager,
+    moduleActionCapability,
+    moduleCapabilities,
+    grantedCountForModule,
+    capabilitySetsEqual,
+    groupModules,
+    filterModuleGroups,
+    type PermissionsCatalog,
+    type RoleDef,
+} from '../permissions-manager'
+
+const catalog: PermissionsCatalog = {
+    modules: [
+        {
+            key: 'pos_orders',
+            label: 'Pedidos POS',
+            icon: 'ShoppingCart',
+            addon_key: 'pos',
+            addon_label: 'Punto de venta',
+            actions: [
+                { key: 'index', label: 'Listar', icon: 'List', kind: 'crud' },
+                { key: 'create', label: 'Crear', icon: 'Plus', kind: 'crud' },
+                { key: 'pagar', label: 'Pagar', icon: 'CreditCard', kind: 'custom' },
+            ],
+        },
+        {
+            key: 'pos_sessions',
+            label: 'Sesiones POS',
+            icon: 'Clock',
+            addon_key: 'pos',
+            addon_label: 'Punto de venta',
+            actions: [{ key: 'index', label: 'Listar', icon: 'List', kind: 'crud' }],
+        },
+        {
+            key: 'users',
+            label: 'Usuarios',
+            icon: 'Users',
+            actions: [{ key: 'index', label: 'Listar', icon: 'List', kind: 'crud' }],
+        },
+    ],
+    general: [
+        {
+            key: 'general.work_after_hours',
+            label: 'Trabajar fuera de horario',
+            description: 'Permite operar fuera del horario configurado.',
+        },
+    ],
+}
+
+const roles: RoleDef[] = [{ id: 'r1', name: 'cashier', label: 'Cajero', color: '#22c55e' }]
+
+function makeProps(overrides: Partial<Parameters<typeof PermissionsManager>[0]> = {}) {
+    return {
+        loadModules: vi.fn(async () => catalog),
+        loadRoles: vi.fn(async () => roles),
+        loadRolePermissions: vi.fn(async () => ['pos_orders.index']),
+        syncRolePermissions: vi.fn(async () => {}),
+        ...overrides,
+    }
+}
+
+describe('helpers puros', () => {
+    it('moduleActionCapability lowercasea el módulo', () => {
+        expect(moduleActionCapability('Pos_Orders', 'pagar')).toBe('pos_orders.pagar')
+    })
+
+    it('moduleCapabilities y grantedCountForModule', () => {
+        const mod = catalog.modules[0]
+        expect(moduleCapabilities(mod)).toEqual([
+            'pos_orders.index',
+            'pos_orders.create',
+            'pos_orders.pagar',
+        ])
+        expect(grantedCountForModule(new Set(['pos_orders.index', 'otra.cosa']), mod)).toBe(1)
+    })
+
+    it('capabilitySetsEqual', () => {
+        expect(capabilitySetsEqual(new Set(['a', 'b']), new Set(['b', 'a']))).toBe(true)
+        expect(capabilitySetsEqual(new Set(['a']), new Set(['a', 'b']))).toBe(false)
+    })
+
+    it('groupModules agrupa por addon_label y manda los sin addon a "Sistema"', () => {
+        const groups = groupModules(catalog.modules)
+        expect(groups.map((g) => g.label)).toEqual(['Punto de venta', 'Sistema'])
+        expect(groups[0].modules.map((m) => m.key)).toEqual(['pos_orders', 'pos_sessions'])
+        expect(groups[1].modules.map((m) => m.key)).toEqual(['users'])
+    })
+
+    it('filterModuleGroups busca por módulo (accent/case-insensitive) o por grupo', () => {
+        const groups = groupModules(catalog.modules)
+        // Por nombre de módulo.
+        const bySession = filterModuleGroups(groups, 'sesiones')
+        expect(bySession).toHaveLength(1)
+        expect(bySession[0].modules.map((m) => m.key)).toEqual(['pos_sessions'])
+        // Por nombre de grupo trae todos sus módulos.
+        const byGroup = filterModuleGroups(groups, 'venta')
+        expect(byGroup[0].modules).toHaveLength(2)
+        // Query vacía = pasa todo.
+        expect(filterModuleGroups(groups, '  ')).toEqual(groups)
+        // Sin match = vacío.
+        expect(filterModuleGroups(groups, 'zzz')).toEqual([])
+    })
+})
+
+describe('PermissionsManager', () => {
+    it('renderiza catálogo con mocks, auto-selecciona rol y módulo, contador N/M', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+
+        // Auto-selección: primer rol + primer módulo, grid con las acciones.
+        // El panel derecho titula con el módulo activo ("Pedidos POS").
+        expect(await screen.findAllByText('Pedidos POS')).toBeTruthy()
+        expect(await screen.findByText('Pagar')).toBeTruthy()
+        // El contador N/M del panel está presente (también lo refleja el árbol).
+        expect(screen.getAllByText('1/3').length).toBeGreaterThan(0)
+        expect(props.loadRolePermissions).toHaveBeenCalledWith('r1')
+
+        // Generales presentes con descripción.
+        expect(screen.getByText('Permisos Generales')).toBeTruthy()
+        expect(screen.getByText('Trabajar fuera de horario')).toBeTruthy()
+    })
+
+    it('marcar una acción + un general y guardar llama sync con el set completo correcto', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+
+        fireEvent.click(screen.getByRole('checkbox', { name: /Pagar/ }))
+        fireEvent.click(screen.getByRole('checkbox', { name: /Trabajar fuera de horario/ }))
+
+        // Dirty visible y guardar habilitado.
+        expect(screen.getByText('Cambios sin guardar')).toBeTruthy()
+        fireEvent.click(screen.getByRole('button', { name: /Guardar permisos/ }))
+
+        await waitFor(() =>
+            expect(props.syncRolePermissions).toHaveBeenCalledWith('r1', [
+                'general.work_after_hours',
+                'pos_orders.index',
+                'pos_orders.pagar',
+            ]),
+        )
+        // Tras guardar, baseline = draft → dirty desaparece.
+        await waitFor(() => expect(screen.queryByText('Cambios sin guardar')).toBeNull())
+    })
+
+    it('desmarcar una otorgada también entra al delta', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+
+        fireEvent.click(screen.getByRole('checkbox', { name: /Listar/ }))
+        fireEvent.click(screen.getByRole('button', { name: /Guardar permisos/ }))
+        await waitFor(() => expect(props.syncRolePermissions).toHaveBeenCalledWith('r1', []))
+    })
+
+    it('marcar todo / limpiar operan sobre el módulo activo', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+
+        fireEvent.click(screen.getByRole('button', { name: /Marcar todo/ }))
+        // 3/3 aparece en el panel y en el badge del árbol.
+        expect(screen.getAllByText('3/3').length).toBeGreaterThan(0)
+
+        fireEvent.click(screen.getByRole('button', { name: /Guardar permisos/ }))
+        await waitFor(() =>
+            expect(props.syncRolePermissions).toHaveBeenCalledWith('r1', [
+                'pos_orders.create',
+                'pos_orders.index',
+                'pos_orders.pagar',
+            ]),
+        )
+
+        fireEvent.click(screen.getByRole('button', { name: /Limpiar/ }))
+        expect(screen.getByText('0/3')).toBeTruthy()
+    })
+
+    it('guardar deshabilitado sin cambios', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+        const save = screen.getByRole('button', { name: /Guardar permisos/ }) as HTMLButtonElement
+        expect(save.disabled).toBe(true)
+    })
+
+    it('oculta Nuevo rol / Editar / Eliminar cuando no hay mutators de rol', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+        expect(screen.queryByRole('button', { name: /Nuevo rol/ })).toBeNull()
+        expect(screen.queryByRole('button', { name: 'Editar rol' })).toBeNull()
+        expect(screen.queryByRole('button', { name: 'Eliminar rol' })).toBeNull()
+    })
+
+    it('renderiza el árbol agrupado y permite seleccionar un módulo de otro grupo', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+
+        // Grupos visibles (encabezados del árbol).
+        expect(screen.getByText('Punto de venta')).toBeTruthy()
+        expect(screen.getByText('Sistema')).toBeTruthy()
+
+        // Click en "Usuarios" (grupo Sistema) cambia el grid de acciones.
+        fireEvent.click(screen.getByRole('button', { name: /Usuarios/ }))
+        // El grid ahora muestra solo la acción de users; "Pagar" (de pos_orders) ya no.
+        await waitFor(() => expect(screen.queryByText('Pagar')).toBeNull())
+        // "Usuarios" titula el panel derecho además del árbol.
+        expect(screen.getAllByText('Usuarios').length).toBeGreaterThan(0)
+    })
+
+    it('la búsqueda filtra el árbol de módulos', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+
+        fireEvent.change(screen.getByLabelText('Buscar módulo'), {
+            target: { value: 'sesiones' },
+        })
+        // Solo el grupo con match permanece.
+        expect(screen.getByText('Sesiones POS')).toBeTruthy()
+        expect(screen.queryByText('Usuarios')).toBeNull()
+    })
+
+    it('selector de rol limpio: edit/delete inline, sin chip removible', async () => {
+        const props = makeProps({
+            updateRole: vi.fn(async () => {}),
+            deleteRole: vi.fn(async () => {}),
+        })
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+        // No existe el botón de quitar rol del chip antiguo.
+        expect(screen.queryByRole('button', { name: 'Quitar rol seleccionado' })).toBeNull()
+        // Iconos inline presentes.
+        expect(screen.getByRole('button', { name: 'Editar rol' })).toBeTruthy()
+        expect(screen.getByRole('button', { name: 'Eliminar rol' })).toBeTruthy()
+    })
+
+    it('muestra los CRUD de rol cuando los mutators existen', async () => {
+        const props = makeProps({
+            createRole: vi.fn(async () => {}),
+            updateRole: vi.fn(async () => {}),
+            deleteRole: vi.fn(async () => {}),
+        })
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+        expect(screen.getByRole('button', { name: /Nuevo rol/ })).toBeTruthy()
+        expect(screen.getByRole('button', { name: 'Editar rol' })).toBeTruthy()
+        expect(screen.getByRole('button', { name: 'Eliminar rol' })).toBeTruthy()
+    })
+})

package/src/dynamic-crud-page.tsx

@@ -37,6 +37,7 @@ import { ExportDialog } from './dialogs/export'
 import { ImportDialog } from './dialogs/import'
 import { getModelExtension } from './model-extension-registry'
 import { ModelActionToolbar } from './model-action-toolbar'
+import { useCan, modelCapability } from './permissions-context'
 import type { TableMetadata } from './types'
 
 export interface DynamicCRUDPageStrings {
@@ -165,9 +166,13 @@ export function DynamicCRUDPage(props: DynamicCRUDPageProps) {
     // showing one in the page chrome is just visual duplication. Apps that
     // want it back can pass `hideRefresh={false}`.
     const effectiveHideRefresh = hideRefresh ?? ext?.hideRefresh ?? true
-    const showCreate = enableCRUD && !effectiveHideCreate
-    const showImport = enableCRUD && !effectiveHideImport
-    const showExport = !effectiveHideExport
+    // Capability gating — no-op unless the host mounts <PermissionsProvider>
+    // (useCan defaults to always-true), in which case create/export/import
+    // require `lowercase(model).create|export|import`.
+    const can = useCan()
+    const showCreate = enableCRUD && !effectiveHideCreate && can(modelCapability(model, 'create'))
+    const showImport = enableCRUD && !effectiveHideImport && can(modelCapability(model, 'import'))
+    const showExport = !effectiveHideExport && can(modelCapability(model, 'export'))
     const showRefresh = !effectiveHideRefresh
 
     const handleRefresh = useCallback(() => {

package/src/dynamic-table.tsx

@@ -71,6 +71,7 @@ import { OptionsContext } from './options-context'
 import { ActionModalDispatcher } from './action-modal-dispatcher'
 import type { TableMetadata, ApiResponse, ActionMetadata } from './types'
 import { getSearchableColumnKeys } from './column-visibility'
+import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-context'
 import { DynamicRecordDialog } from './dialogs/dynamic-record'
 import { ExportDialog } from './dialogs/export'
 import { ImportDialog } from './dialogs/import'
@@ -369,6 +370,18 @@ export function DynamicTable({
         [metadata],
     )
 
+    // Permission gating — only active when the host mounts <PermissionsProvider>.
+    // Without it `viewMetadata === metadata` and nothing changes (everything
+    // stays visible, exactly the legacy behaviour). With it, export/import
+    // buttons and row actions (incl. the implicit View/Edit/Delete trio) are
+    // filtered by `can(lowercase(model).<action>)`.
+    const can = useCan()
+    const permissionsActive = usePermissionsActive()
+    const viewMetadata = useMemo(() => {
+        if (!metadata || !permissionsActive) return metadata
+        return gateTableMetadata(metadata, model, can, (key, fallback) => t(key, { defaultValue: fallback }))
+    }, [metadata, permissionsActive, can, model, t])
+
     const buildFilterParams = useCallback(() => {
         const params: Record<string, any> = {}
         if (sorting.length > 0) {
@@ -640,19 +653,19 @@ export function DynamicTable({
     }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange])
 
     const columns = useMemo(() => {
-        if (!metadata) return []
+        if (!viewMetadata) return []
         // Row-action column only renders per-row actions. Table-level placements
         // ("table"/"create") are surfaced by <ModelActionToolbar> at the page
         // level, so strip them here to avoid a meaningless per-row button.
-        const rowMetadata = metadata.actions?.some((a) => a.placement === 'table' || a.placement === 'create')
-            ? { ...metadata, actions: metadata.actions.filter((a) => !a.placement || a.placement === 'row') }
-            : metadata
+        const rowMetadata = viewMetadata.actions?.some((a) => a.placement === 'table' || a.placement === 'create')
+            ? { ...viewMetadata, actions: viewMetadata.actions.filter((a) => !a.placement || a.placement === 'row') }
+            : viewMetadata
         const baseColumns = getDynamicColumns(rowMetadata, handleInternalAction, t, i18n.language, columnFilterConfigs, timeZone, currency)
         const filteredBase = baseColumns.filter((col: ColumnDef<any>) => !hiddenColumns.includes(col.id as string))
         const actionsCol = filteredBase.find((c: ColumnDef<any>) => c.id === 'actions')
         const otherCols = filteredBase.filter((c: ColumnDef<any>) => c.id !== 'actions')
         return [...otherCols, ...extraColumns, ...(actionsCol ? [actionsCol] : [])]
-    }, [metadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns, timeZone, currency])
+    }, [viewMetadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns, timeZone, currency])
 
     const filters = useMemo(() => [], [])
 
@@ -745,12 +758,12 @@ export function DynamicTable({
                         onBulkDelete={() => setShowBulkDeleteConfirm(true)}
                         extraActions={
                             <>
-                                {metadata.canExport && (
+                                {viewMetadata?.canExport && (
                                     <Button variant="outline" size="sm" className="h-8" onClick={() => setExportOpen(true)}>
                                         <Download className="h-4 w-4 mr-1" /> Exportar
                                     </Button>
                                 )}
-                                {metadata.canImport && (
+                                {viewMetadata?.canImport && (
                                     <Button variant="outline" size="sm" className="h-8" onClick={() => setImportOpen(true)}>
                                         <Upload className="h-4 w-4 mr-1" /> Importar
                                     </Button>
@@ -997,10 +1010,10 @@ export function DynamicTable({
                 onSaved={handleRefresh}
             />
 
-            {metadata.canExport && (
+            {viewMetadata?.canExport && (
                 <ExportDialog open={exportOpen} onOpenChange={setExportOpen} model={model} metadata={metadata} currentFilters={buildFilterParams()} hasActiveFilters={hasActiveFilters} />
             )}
-            {metadata.canImport && (
+            {viewMetadata?.canImport && (
                 <ImportDialog open={importOpen} onOpenChange={setImportOpen} model={model} metadata={metadata} onImported={handleRefresh} />
             )}
             {actionModal.action && (

package/src/index.ts

@@ -28,6 +28,32 @@ export {
 } from './addon-layout-context'
 export * from './slot'
 export * from './capability-gate'
+export {
+    PermissionsProvider,
+    useCan,
+    usePermissionsActive,
+    makeCan,
+    capabilityForActionKey,
+    modelCapability,
+    gateTableMetadata,
+    type CanFn,
+    type PermissionsProviderProps,
+} from './permissions-context'
+export {
+    PermissionsManager,
+    moduleActionCapability,
+    moduleCapabilities,
+    grantedCountForModule,
+    capabilitySetsEqual,
+    defaultActionIcon,
+    type PermissionsManagerProps,
+    type PermissionsCatalog,
+    type PermissionModuleDef,
+    type PermissionActionDef,
+    type GeneralPermissionDef,
+    type RoleDef,
+    type RoleInput,
+} from './permissions-manager'
 export * from './org-runtime-context'
 export * from './org-runtime-provider'
 export * from './navigation-builder'

package/src/model-action-toolbar.tsx

@@ -23,6 +23,7 @@ import { useApi } from './api-context'
 import { useMetadataCache } from './metadata-cache'
 import { DynamicIcon } from './dynamic-icon'
 import { ActionModalDispatcher } from './action-modal-dispatcher'
+import { useCan, modelCapability } from './permissions-context'
 import type { ActionDefinition, ActionMetadata, TableMetadata } from './types'
 
 export type ActionPlacement = 'row' | 'table' | 'create'
@@ -108,7 +109,14 @@ export function ModelActionToolbar({
     onChange,
     className,
 }: ModelActionToolbarProps) {
-    const surfaced = useModelActions(model, placements, actions)
+    const all = useModelActions(model, placements, actions)
+    // Capability gating — always-true without a <PermissionsProvider>. Custom
+    // table/create actions map onto `lowercase(model).<action_key>`.
+    const can = useCan()
+    const surfaced = useMemo(
+        () => all.filter((a) => can(modelCapability(model, a.key))),
+        [all, can, model],
+    )
     const [active, setActive] = useState<ActionMetadata | null>(null)
     const dataEndpoint = endpoint ?? `/data/${model}/me`