@asteby/metacore-runtime-react 23.1.0 → 23.3.0

package/src/__tests__/dynamic-table-infinite-scroll.test.tsx

@@ -0,0 +1,196 @@
+// @vitest-environment happy-dom
+//
+// DynamicTable infinite-scroll (opt-in) behaviour:
+//   1. With `infiniteScroll`, the classic pager is replaced by a "N de total"
+//      indicator; the first page loads with per_page=30 and the sentinel's
+//      intersection appends the next page, deduped by id.
+//   2. Changing the filters resets the accumulated list back to page 1.
+//   3. WITHOUT the prop (default), the classic pager renders and no sentinel /
+//      append path is engaged — existing hosts are untouched.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = {
+    t: (_k: string, o?: { defaultValue?: string; count?: number; total?: number }) => {
+        // Mirror the "{{count}} de {{total}}" interpolation the footer uses.
+        if (o?.defaultValue && o.count != null && o.total != null) {
+            return o.defaultValue.replace('{{count}}', String(o.count)).replace('{{total}}', String(o.total))
+        }
+        return o?.defaultValue ?? _k
+    },
+    i18n: { language: 'es' },
+}
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { DynamicTable } from '../dynamic-table'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        group_by: 'stage',
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+    }
+}
+
+// A model with `total` rows. The data endpoint returns a page of {id,title};
+// page 2 deliberately re-includes the last id of page 1 to exercise dedup.
+function fakeApi(total: number, pageSize = 30): ApiClient {
+    const ok = (data: unknown, extra: Record<string, unknown> = {}) => ({
+        data: { success: true, data, meta: { total, ...extra } },
+    })
+    const page = (n: number) => {
+        const start = (n - 1) * pageSize
+        const rows: Array<{ id: number; title: string }> = []
+        // Overlap: page n>1 repeats the previous page's last row (a server that
+        // re-paginated) — dedupeById must drop it.
+        const from = n > 1 ? start - 1 : start
+        for (let i = from; i < Math.min(start + pageSize, total); i++) {
+            rows.push({ id: i + 1, title: `Issue ${i + 1}` })
+        }
+        return rows
+    }
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.endsWith('/facets')) return ok([])
+            // data endpoint
+            const p = cfg?.params?.page ?? 1
+            return ok(page(p))
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function dataCalls(api: ApiClient) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) => c[0] === '/data/issue' || (c[0] === undefined),
+    )
+}
+
+// Controllable IntersectionObserver — captures the observers so the test can
+// fire the sentinel's intersection deterministically.
+type IOEntry = { isIntersecting: boolean }
+let observers: Array<{ fire: (v: boolean) => void }> = []
+class FakeIO {
+    cb: (e: IOEntry[]) => void
+    constructor(cb: (e: IOEntry[]) => void) {
+        this.cb = cb
+        observers.push({ fire: (v: boolean) => this.cb([{ isIntersecting: v }]) })
+    }
+    observe() {}
+    disconnect() {}
+}
+
+describe('DynamicTable infinite scroll', () => {
+    beforeEach(() => {
+        observers = []
+        ;(globalThis as any).IntersectionObserver = FakeIO
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('loads page 1 (per_page 30) then appends page 2 on intersect, deduped', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi(45) // 45 rows → page1: 30, page2: 15 (+1 overlap dropped)
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" infiniteScroll enableUrlSync={false} />
+            </ApiProvider>,
+        )
+
+        // Page 1 request: page=1, per_page=30.
+        await waitFor(() => {
+            const first = dataCalls(api)[0]
+            expect(first?.[1]?.params).toMatchObject({ page: 1, per_page: 30 })
+        })
+        // Footer indicator reflects the loaded/total counts.
+        await waitFor(() => expect(screen.getByText('30 de 45')).toBeTruthy())
+
+        // Sentinel enters view → page 2 fetched and APPENDED.
+        expect(observers.length).toBeGreaterThan(0)
+        observers.forEach((o) => o.fire(true))
+
+        await waitFor(() => {
+            const pages = dataCalls(api).map((c: any[]) => c[1]?.params?.page)
+            expect(pages).toContain(2)
+        })
+        // 30 + 15 unique = 45 (NOT 46 — the overlap row was deduped).
+        await waitFor(() => expect(screen.getByText('45 de 45')).toBeTruthy())
+    })
+
+    it('resets to page 1 (replacing the accumulated rows) when filters change', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi(45)
+        const { rerender } = render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" infiniteScroll enableUrlSync={false} />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(screen.getByText('30 de 45')).toBeTruthy())
+        observers.forEach((o) => o.fire(true))
+        await waitFor(() => expect(screen.getByText('45 de 45')).toBeTruthy())
+
+        // Change the active filters via defaultFilters (part of buildFilterParams).
+        rerender(
+            <ApiProvider client={api}>
+                <DynamicTable
+                    model="issue"
+                    infiniteScroll
+                    enableUrlSync={false}
+                    defaultFilters={{ stage: 'done' }}
+                />
+            </ApiProvider>,
+        )
+
+        // A fresh page-1 request carrying the new filter, and the list collapses
+        // back to a single page (30 of 45) — the accumulated 45 were dropped.
+        await waitFor(() => {
+            const withFilter = dataCalls(api).filter(
+                (c: any[]) => c[1]?.params?.f_stage === 'done',
+            )
+            expect(withFilter.some((c: any[]) => c[1]?.params?.page === 1)).toBe(true)
+        })
+        await waitFor(() => expect(screen.getByText('30 de 45')).toBeTruthy())
+    })
+
+    it('default (no prop) keeps the classic pager and never appends', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi(45)
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" enableUrlSync={false} />
+            </ApiProvider>,
+        )
+        // Classic pager renders its rows-per-page control; the infinite footer
+        // indicator ("N de N") is absent.
+        await waitFor(() => expect(dataCalls(api).length).toBeGreaterThan(0))
+        expect(screen.queryByText('30 de 45')).toBeNull()
+        expect(screen.queryByText('45 de 45')).toBeNull()
+
+        // Firing any (stray) sentinel must NOT trigger a page-2 append.
+        observers.forEach((o) => o.fire(true))
+        await new Promise((r) => setTimeout(r, 50))
+        const pages = dataCalls(api).map((c: any[]) => c[1]?.params?.page)
+        expect(pages).not.toContain(2)
+    })
+})

package/src/__tests__/readonly-fields.test.tsx

@@ -0,0 +1,97 @@
+// @vitest-environment happy-dom
+//
+// `readonly` field handling in the generic record dialog + action modal.
+//
+// A `readonly` field is server/system-generated (e.g. the GitHub addon's
+// `number`/`github_url`, filled by the API after the outbound create). Kernel
+// v0.64.0 stamps `FieldDef.readonly` on such fields served by DeriveFormFields.
+// UI semantics:
+//   - CREATE: the field is excluded from the form entirely (`filterVisibleFields`)
+//     — the user can't set a value the server will overwrite.
+//   - EDIT:   the field is shown, but as a disabled/muted input
+//     (`ReadonlyEditField`) — the value is visible, not editable.
+//   - VIEW:   unchanged (rich read-only renderer).
+//
+// The last block covers action fields with a materialized `options_source`: ops
+// turns them into `type:'select'` with server-populated `options`, and the modal
+// must render a <Select> for them. That decision lives in `resolveWidget`.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (k: string, o?: any) => o?.defaultValue ?? k,
+        i18n: { language: 'es' },
+    }),
+}))
+
+import { filterVisibleFields, ReadonlyEditField } from '../dialogs/dynamic-record'
+import { resolveWidget } from '../dynamic-form-schema'
+
+afterEach(cleanup)
+
+const fields = [
+    { key: 'name', label: 'Nombre', type: 'text' },
+    // System-generated: filled by the API after the outbound create.
+    { key: 'number', label: 'Número', type: 'text', readonly: true },
+    { key: 'secret', label: 'Secret', type: 'text', hidden: true },
+]
+
+describe('filterVisibleFields — readonly exclusion per mode', () => {
+    it('excludes a readonly field on CREATE (and always excludes hidden)', () => {
+        const keys = filterVisibleFields(fields as any, 'create').map(f => f.key)
+        expect(keys).toEqual(['name'])
+    })
+
+    it('keeps a readonly field visible on EDIT and VIEW (still drops hidden)', () => {
+        expect(filterVisibleFields(fields as any, 'edit').map(f => f.key)).toEqual(['name', 'number'])
+        expect(filterVisibleFields(fields as any, 'view').map(f => f.key)).toEqual(['name', 'number'])
+    })
+})
+
+describe('ReadonlyEditField — edit-mode rendering of a readonly field', () => {
+    it('renders a disabled, muted input with the value visible', () => {
+        render(
+            <ReadonlyEditField
+                field={{ key: 'number', label: 'Número', type: 'text', readonly: true }}
+                value="GH-42"
+            />,
+        )
+        const input = screen.getByDisplayValue('GH-42') as HTMLInputElement
+        expect(input).toBeTruthy()
+        expect(input.disabled).toBe(true)
+        expect(input.className).toContain('text-muted-foreground')
+    })
+
+    it('renders a boolean readonly field as a disabled switch', () => {
+        const { container } = render(
+            <ReadonlyEditField
+                field={{ key: 'active', label: 'Activo', type: 'boolean', readonly: true }}
+                value={true}
+            />,
+        )
+        const sw = container.querySelector('[role="switch"]') as HTMLElement
+        expect(sw).toBeTruthy()
+        expect(sw.getAttribute('data-disabled') != null || sw.hasAttribute('disabled')).toBe(true)
+        expect(screen.getByText('Sí')).toBeTruthy()
+    })
+})
+
+describe('action fields — options_source materialized to a select', () => {
+    it('resolves a select-typed field (server-populated options) to the select widget', () => {
+        // ops materializes an `options_source` action field into `type:'select'`
+        // with the options populated server-side; the modal's renderField keys off
+        // resolveWidget to render a <Select> for it.
+        expect(
+            resolveWidget({
+                key: 'status',
+                label: 'Estado',
+                type: 'select',
+                options: [
+                    { value: 'open', label: 'Abierto' },
+                    { value: 'closed', label: 'Cerrado' },
+                ],
+            } as any),
+        ).toBe('select')
+    })
+})

package/src/__tests__/record-detail-display.test.tsx

@@ -0,0 +1,113 @@
+// @vitest-environment happy-dom
+//
+// Detail-dialog display mapping: the read-only `ViewValue` must render values
+// with the SAME "pro" display logic as the table (shared `display-value.tsx`
+// primitives), keyed off the stamped display type (`cellStyle ?? type`):
+//   - served option → colored badge with the localized label,
+//   - `cellStyle:'url'` on a text column → clickable external link (new tab),
+//   - `cellStyle:'status'` bare token (kanban stage) → colored, translated pill,
+//   - a `labels`/`tags` array → a row of badges (never a raw mini-table / JSON).
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+
+// Identity-ish translator with a tiny stage dictionary, matching how the host
+// resolves an addon's i18n keys (t(token, { defaultValue })).
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (k: string, opts?: any) =>
+            k === 'backlog' ? 'Pendiente' : opts?.defaultValue ?? k,
+        i18n: { language: 'es' },
+    }),
+}))
+
+import { ViewValue } from '../dialogs/dynamic-record'
+
+afterEach(cleanup)
+
+describe('ViewValue — detail dialog display mapping', () => {
+    it('renders a served option as a colored badge with the localized label', () => {
+        render(
+            <ViewValue
+                field={{
+                    key: 'product_type',
+                    label: 'Tipo',
+                    type: 'select',
+                    options: [
+                        { value: 'storable', label: 'Almacenable', color: '#22c55e' },
+                    ],
+                }}
+                value="storable"
+                record={{}}
+            />
+        )
+        const badge = screen.getByText('Almacenable')
+        expect(badge).toBeTruthy()
+        // Never the raw enum token.
+        expect(screen.queryByText('storable')).toBeNull()
+    })
+
+    it('renders a cellStyle:url text column as a clickable external link', () => {
+        const { container } = render(
+            <ViewValue
+                field={{ key: 'github_url', label: 'GitHub', type: 'text', cellStyle: 'url' }}
+                value="https://github.com/asteby/x"
+                record={{}}
+            />
+        )
+        const link = container.querySelector('a') as HTMLAnchorElement
+        expect(link).toBeTruthy()
+        expect(link.getAttribute('href')).toBe('https://github.com/asteby/x')
+        expect(link.getAttribute('target')).toBe('_blank')
+    })
+
+    it('renders a bare stage token (cellStyle:status) as a translated colored pill', () => {
+        const { container } = render(
+            <ViewValue
+                field={{ key: 'stage', label: 'Etapa', type: 'text', cellStyle: 'status' }}
+                value="backlog"
+                record={{}}
+            />
+        )
+        // Localized via the manifest i18n key, not the raw "backlog".
+        expect(screen.getByText('Pendiente')).toBeTruthy()
+        expect(container.textContent).not.toContain('backlog')
+        // Colored: the badge carries an inline background style.
+        const styled = container.querySelector('[style*="background"]')
+        expect(styled).toBeTruthy()
+    })
+
+    it('renders a labels array (cellStyle:tags) as a row of badges', () => {
+        render(
+            <ViewValue
+                field={{ key: 'labels', label: 'Labels', type: 'json', cellStyle: 'tags' }}
+                value={['bug', 'urgent']}
+                record={{}}
+            />
+        )
+        expect(screen.getByText('bug')).toBeTruthy()
+        expect(screen.getByText('urgent')).toBeTruthy()
+    })
+
+    it('renders label objects with color as colored badges', () => {
+        render(
+            <ViewValue
+                field={{ key: 'labels', label: 'Labels', type: 'json', cellStyle: 'relation-badge-list' }}
+                value={[{ label: 'Bug', color: '#ef4444' }, { name: 'P1' }]}
+                record={{}}
+            />
+        )
+        expect(screen.getByText('Bug')).toBeTruthy()
+        expect(screen.getByText('P1')).toBeTruthy()
+    })
+
+    it('keeps the "—" empty marker for an empty labels array', () => {
+        const { container } = render(
+            <ViewValue
+                field={{ key: 'labels', label: 'Labels', type: 'json', cellStyle: 'tags' }}
+                value={[]}
+                record={{}}
+            />
+        )
+        expect(container.textContent).toContain('—')
+    })
+})

package/src/__tests__/use-infinite-scroll.test.tsx

@@ -0,0 +1,147 @@
+// @vitest-environment happy-dom
+//
+// Shared infinite-scroll primitives (used by both DynamicTable and
+// DynamicKanban):
+//   1. dedupeById — pure append that drops ids already present, preserves order,
+//      and is identity-stable when there is nothing new to add.
+//   2. useInfiniteScrollSentinel — an IntersectionObserver wrapper. happy-dom
+//      has no IntersectionObserver, so we install a controllable fake and drive
+//      it: entering view fires onLoadMore, `disabled` suppresses it, and the
+//      absence of IntersectionObserver degrades to a no-op instead of throwing.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render } from '@testing-library/react'
+import { useEffect, useState } from 'react'
+import { dedupeById, useInfiniteScrollSentinel } from '../use-infinite-scroll'
+
+afterEach(cleanup)
+
+describe('dedupeById', () => {
+    it('appends only rows whose id is not already present', () => {
+        const existing = [{ id: 1, n: 'a' }, { id: 2, n: 'b' }]
+        const incoming = [{ id: 2, n: 'b2' }, { id: 3, n: 'c' }]
+        const out = dedupeById(existing, incoming)
+        expect(out.map((r) => r.id)).toEqual([1, 2, 3])
+        // The already-present row keeps the ORIGINAL (existing wins over incoming).
+        expect(out[1].n).toBe('b')
+    })
+
+    it('preserves the order of existing then the new arrivals', () => {
+        const out = dedupeById(
+            [{ id: 'x' }, { id: 'y' }],
+            [{ id: 'z' }, { id: 'w' }],
+        )
+        expect(out.map((r) => r.id)).toEqual(['x', 'y', 'z', 'w'])
+    })
+
+    it('returns the SAME array reference when nothing is added', () => {
+        const existing = [{ id: 1 }, { id: 2 }]
+        expect(dedupeById(existing, [])).toBe(existing)
+        expect(dedupeById(existing, [{ id: 1 }, { id: 2 }])).toBe(existing)
+    })
+
+    it('treats numeric and string ids as the same key', () => {
+        const out = dedupeById([{ id: 1 }], [{ id: '1' }, { id: 2 }])
+        expect(out.map((r) => r.id)).toEqual([1, 2])
+    })
+})
+
+// ---------------------------------------------------------------------------
+// Controllable IntersectionObserver fake
+// ---------------------------------------------------------------------------
+
+type IOEntry = { isIntersecting: boolean }
+let observers: FakeIO[] = []
+
+class FakeIO {
+    cb: (entries: IOEntry[]) => void
+    observed: Element[] = []
+    disconnected = false
+    constructor(cb: (entries: IOEntry[]) => void) {
+        this.cb = cb
+        observers.push(this)
+    }
+    observe(el: Element) {
+        this.observed.push(el)
+    }
+    disconnect() {
+        this.disconnected = true
+    }
+    // Test helper: simulate the sentinel scrolling into / out of view.
+    fire(isIntersecting: boolean) {
+        this.cb([{ isIntersecting }])
+    }
+}
+
+function Harness({
+    onLoadMore,
+    disabled,
+}: {
+    onLoadMore: () => void
+    disabled?: boolean
+}) {
+    const { rootRef, sentinelRef } = useInfiniteScrollSentinel({ onLoadMore, disabled })
+    return (
+        <div ref={rootRef}>
+            <div ref={sentinelRef} data-testid="sentinel" />
+        </div>
+    )
+}
+
+describe('useInfiniteScrollSentinel', () => {
+    beforeEach(() => {
+        observers = []
+        ;(globalThis as any).IntersectionObserver = FakeIO
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('fires onLoadMore when the sentinel intersects', () => {
+        const onLoadMore = vi.fn()
+        render(<Harness onLoadMore={onLoadMore} />)
+        expect(observers).toHaveLength(1)
+        observers[0].fire(true)
+        expect(onLoadMore).toHaveBeenCalledTimes(1)
+    })
+
+    it('does NOT fire when disabled (load in flight / no more pages)', () => {
+        const onLoadMore = vi.fn()
+        render(<Harness onLoadMore={onLoadMore} disabled />)
+        observers[0].fire(true)
+        expect(onLoadMore).not.toHaveBeenCalled()
+    })
+
+    it('ignores non-intersecting callbacks (scrolling away)', () => {
+        const onLoadMore = vi.fn()
+        render(<Harness onLoadMore={onLoadMore} />)
+        observers[0].fire(false)
+        expect(onLoadMore).not.toHaveBeenCalled()
+    })
+
+    it('reads the LATEST onLoadMore/disabled through a ref (no observer churn)', () => {
+        // A parent that flips `disabled` from true -> false without remounting;
+        // the observer must not be torn down, and the newest callback wins.
+        const calls: string[] = []
+        function Parent() {
+            const [enabled, setEnabled] = useState(false)
+            useEffect(() => {
+                setEnabled(true)
+            }, [])
+            return (
+                <Harness onLoadMore={() => calls.push('load')} disabled={!enabled} />
+            )
+        }
+        render(<Parent />)
+        // Only ONE observer instance across the disabled->enabled flip.
+        expect(observers).toHaveLength(1)
+        observers[0].fire(true)
+        expect(calls).toEqual(['load'])
+    })
+
+    it('degrades to a no-op when IntersectionObserver is unavailable', () => {
+        delete (globalThis as any).IntersectionObserver
+        const onLoadMore = vi.fn()
+        // Must render without throwing even though there is no IO.
+        expect(() => render(<Harness onLoadMore={onLoadMore} />)).not.toThrow()
+    })
+})

package/src/action-modal-dispatcher.tsx

@@ -225,11 +225,11 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
             const url = buildActionUrl(endpoint, model, record.id, action.key)
             const res = await api.post(url, {})
             if (res.data.success) {
-                toast.success(res.data.message || t('common.success'))
+                toast.success(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.success'))
                 onOpenChange(false)
                 onSuccess()
             } else {
-                toast.error(res.data.message || t('common.error'))
+                toast.error(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.error'))
             }
         } catch (err: any) {
             toast.error(err?.response?.data?.message || t('common.error'))
@@ -342,11 +342,11 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
             const url = buildActionUrl(endpoint, model, record.id, action.key)
             const res = await api.post(url, formData)
             if (res.data.success) {
-                toast.success(res.data.message || t('common.success'))
+                toast.success(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.success'))
                 onOpenChange(false)
                 onSuccess()
             } else {
-                toast.error(res.data.message || t('common.error'))
+                toast.error(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.error'))
             }
         } catch (err: any) {
             toast.error(err?.response?.data?.message || t('common.error'))