@asteby/metacore-runtime-react 23.2.0 → 23.4.0

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__/rich-url.test.tsx

@@ -0,0 +1,196 @@
+// @vitest-environment happy-dom
+//
+// Rich URL & media rendering: URLs are never shown raw. The shared primitives
+// classify a URL (image / file / link), derive a smart short label, and
+// linkify URLs embedded in free text (bare or markdown), rendering images as
+// inline thumbnails, files as chips, and everything else as a compact link.
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import {
+    classifyUrl,
+    isImageUrl,
+    isFileUrl,
+    smartUrlLabel,
+    fileNameFromUrl,
+    ensureHref,
+    splitTrailingPunct,
+    linkifyText,
+    UrlChip,
+    FileChip,
+    ImageThumbnail,
+    MediaValue,
+    RichText,
+} from '../rich-url'
+
+afterEach(cleanup)
+
+describe('classifyUrl', () => {
+    it('detects images by extension', () => {
+        for (const u of [
+            'https://cdn.example.com/a.jpg',
+            'https://cdn.example.com/a.JPEG',
+            'http://x/y/z.png?w=200',
+            'https://x/pic.webp#frag',
+            'https://x/i.avif',
+            'https://x/logo.svg',
+        ]) {
+            expect(isImageUrl(u)).toBe(true)
+            expect(classifyUrl(u)).toBe('image')
+        }
+    })
+
+    it('detects images served from a storage media path without extension', () => {
+        const u = 'https://link.asteby.com/storage/media/9f3ac2b1'
+        expect(isImageUrl(u)).toBe(true)
+        expect(classifyUrl(u)).toBe('image')
+    })
+
+    it('detects non-image files by extension', () => {
+        for (const u of [
+            'https://x/report.pdf',
+            'https://x/archive.zip',
+            'https://x/sheet.xlsx',
+            'https://x/doc.docx?dl=1',
+            'https://x/clip.mp4',
+        ]) {
+            expect(isFileUrl(u)).toBe(true)
+            expect(classifyUrl(u)).toBe('file')
+        }
+    })
+
+    it('treats a plain page URL as a link', () => {
+        const u = 'https://github.com/asteby/doctores.lat/issues/212'
+        expect(isImageUrl(u)).toBe(false)
+        expect(isFileUrl(u)).toBe(false)
+        expect(classifyUrl(u)).toBe('link')
+    })
+})
+
+describe('smartUrlLabel / fileNameFromUrl / ensureHref', () => {
+    it('uses the bare hostname for a page URL (no raw long URL)', () => {
+        expect(
+            smartUrlLabel('https://github.com/asteby/doctores.lat/issues/212')
+        ).toBe('github.com')
+        expect(smartUrlLabel('https://www.example.com/path/to/thing')).toBe(
+            'example.com'
+        )
+    })
+
+    it('uses the file name for a file/image URL', () => {
+        expect(smartUrlLabel('https://x/y/report.pdf')).toBe('report.pdf')
+        expect(fileNameFromUrl('https://x/y/My%20File.pdf')).toBe('My File.pdf')
+    })
+
+    it('makes a schemeless URL absolute', () => {
+        expect(ensureHref('github.com/x')).toBe('https://github.com/x')
+        expect(ensureHref('https://a.com')).toBe('https://a.com')
+        expect(ensureHref('mailto:a@b.com')).toBe('mailto:a@b.com')
+    })
+})
+
+describe('splitTrailingPunct', () => {
+    it('peels a trailing sentence period', () => {
+        expect(splitTrailingPunct('https://a.com/x.')).toEqual([
+            'https://a.com/x',
+            '.',
+        ])
+    })
+
+    it('keeps a paren the URL itself opened', () => {
+        expect(
+            splitTrailingPunct('https://en.wikipedia.org/wiki/Foo_(bar)')
+        ).toEqual(['https://en.wikipedia.org/wiki/Foo_(bar)', ''])
+    })
+
+    it('peels a closing paren the URL did not open', () => {
+        expect(splitTrailingPunct('https://a.com/x)')).toEqual([
+            'https://a.com/x',
+            ')',
+        ])
+    })
+})
+
+describe('linkifyText', () => {
+    it('linkifies a bare URL and keeps surrounding text', () => {
+        const nodes = linkifyText('see https://github.com/a/b for details')
+        render(<p>{nodes}</p>)
+        const link = screen.getByRole('link')
+        expect(link.getAttribute('href')).toBe('https://github.com/a/b')
+        expect(link.getAttribute('target')).toBe('_blank')
+        // short label, not the raw URL
+        expect(link.textContent).toContain('github.com')
+        expect(screen.getByText(/see/)).toBeTruthy()
+        expect(screen.getByText(/for details/)).toBeTruthy()
+    })
+
+    it('does not swallow the trailing period into the href', () => {
+        const nodes = linkifyText('go to https://a.com/x.')
+        render(<p>{nodes}</p>)
+        expect(screen.getByRole('link').getAttribute('href')).toBe('https://a.com/x')
+    })
+
+    it('renders an embedded image URL as an inline thumbnail', () => {
+        const nodes = linkifyText('pic https://cdn.x/p.png here')
+        const { container } = render(<p>{nodes}</p>)
+        const img = container.querySelector('img')
+        expect(img).toBeTruthy()
+        expect(img!.getAttribute('src')).toBe('https://cdn.x/p.png')
+    })
+
+    it('honors a markdown link label', () => {
+        const nodes = linkifyText('[the issue](https://github.com/a/b/issues/1)')
+        render(<p>{nodes}</p>)
+        const link = screen.getByRole('link')
+        expect(link.getAttribute('href')).toBe('https://github.com/a/b/issues/1')
+        expect(link.textContent).toContain('the issue')
+    })
+})
+
+describe('primitives render', () => {
+    it('UrlChip opens in a new tab with the full URL in the title', () => {
+        render(<UrlChip url="https://github.com/asteby/x/issues/9" />)
+        const link = screen.getByRole('link')
+        expect(link.getAttribute('href')).toBe('https://github.com/asteby/x/issues/9')
+        expect(link.getAttribute('title')).toBe('https://github.com/asteby/x/issues/9')
+        expect(link.getAttribute('rel')).toBe('noopener noreferrer')
+        expect(link.textContent).toContain('github.com')
+    })
+
+    it('FileChip shows the file name', () => {
+        render(<FileChip url="https://x/y/quarterly-report.pdf" />)
+        expect(screen.getByText('quarterly-report.pdf')).toBeTruthy()
+    })
+
+    it('ImageThumbnail falls back to a link chip on load error', () => {
+        const { container } = render(
+            <ImageThumbnail url="https://cdn.x/broken.png" />
+        )
+        const img = container.querySelector('img') as HTMLImageElement
+        expect(img).toBeTruthy()
+        // simulate a broken image (React synthetic onError)
+        fireEvent.error(img)
+        // after error, a link chip is rendered instead
+        expect(screen.queryByRole('link')).toBeTruthy()
+    })
+
+    it('MediaValue dispatches by kind', () => {
+        const { rerender, container } = render(
+            <MediaValue url="https://cdn.x/a.png" />
+        )
+        expect(container.querySelector('img')).toBeTruthy()
+
+        rerender(<MediaValue url="https://x/a.pdf" />)
+        expect(screen.getByText('a.pdf')).toBeTruthy()
+
+        rerender(<MediaValue url="https://github.com/a/b" />)
+        expect(screen.getByRole('link').textContent).toContain('github.com')
+    })
+
+    it('RichText linkifies a body while preserving text', () => {
+        render(
+            <RichText text={'Fixes the bug. Ref https://github.com/a/b/pull/3'} />
+        )
+        expect(screen.getByText(/Fixes the bug/)).toBeTruthy()
+        expect(screen.getByRole('link').getAttribute('href')).toBe('https://github.com/a/b/pull/3')
+    })
+})

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'))