@asteby/metacore-runtime-react 23.7.0 → 23.8.0

package/src/__tests__/stage-layout.test.tsx

@@ -0,0 +1,210 @@
+// @vitest-environment happy-dom
+//
+// useStageLayout (per-org kanban lane-order persistence) + its non-intrusive
+// gating in DynamicKanban: the reset affordance only shows when a custom order
+// exists, and a missing `/stage-layout` endpoint leaves the board fully intact.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+    cleanup,
+    fireEvent,
+    render,
+    renderHook,
+    screen,
+    waitFor,
+} from '@testing-library/react'
+import React from 'react'
+
+const I18N_T = (_k: string, opts?: { defaultValue?: string }) => opts?.defaultValue ?? _k
+const I18N = { language: 'es' }
+const USE_TRANSLATION = { t: I18N_T, i18n: I18N }
+vi.mock('react-i18next', () => ({
+    useTranslation: () => USE_TRANSLATION,
+}))
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+
+import { useStageLayout } from '../stage-layout'
+import { DynamicKanban } from '../dynamic-kanban'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+const STAGES = [
+    { key: 'backlog', label: 'Backlog', color: 'slate', order: 0 },
+    { key: 'in_progress', label: 'In Progress', color: 'blue', order: 1 },
+    { key: 'done', label: 'Done', color: 'green', order: 2 },
+]
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        view_type: 'kanban',
+        group_by: 'stage',
+        stages: STAGES,
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+            {
+                key: 'stage',
+                label: 'Stage',
+                type: 'status',
+                sortable: false,
+                filterable: true,
+                options: STAGES.map((s) => ({ value: s.key, label: s.label, color: s.color })),
+            },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: true,
+        hasActions: false,
+    }
+}
+
+const CARDS = [{ id: 1, title: 'Fix login bug', stage: 'backlog' }]
+
+function fakeApi(over: Partial<ApiClient> = {}, stageLayoutData: any = { model: 'issue', stage_order: null }): ApiClient {
+    const ok = (data: unknown) => ({ data: { success: true, data } })
+    return {
+        get: vi.fn(async (url: string) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.startsWith('/stage-layout')) return ok(stageLayoutData)
+            if (url.startsWith('/custom-stages')) return { data: { success: false } }
+            return ok(CARDS)
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+        ...over,
+    }
+}
+
+const wrapper =
+    (client: ApiClient) =>
+    ({ children }: { children: React.ReactNode }) =>
+        <ApiProvider client={client}>{children}</ApiProvider>
+
+afterEach(cleanup)
+
+describe('useStageLayout', () => {
+    it('reports available + hasCustomLayout from the GET', async () => {
+        const api = fakeApi({}, { model: 'issue', stage_order: ['done', 'backlog', 'in_progress'] })
+        const { result } = renderHook(() => useStageLayout('issue'), {
+            wrapper: wrapper(api),
+        })
+        await waitFor(() => expect(result.current.available).toBe(true))
+        expect(result.current.hasCustomLayout).toBe(true)
+    })
+
+    it('is unavailable when the endpoint 404s (drag stays off)', async () => {
+        const api = fakeApi({
+            get: vi.fn(async (url: string) => {
+                if (url.startsWith('/stage-layout')) throw new Error('404')
+                return { data: { success: true, data: meta() } }
+            }),
+        })
+        const { result } = renderHook(() => useStageLayout('issue'), {
+            wrapper: wrapper(api),
+        })
+        // give the effect a tick
+        await waitFor(() => expect(api.get).toHaveBeenCalled())
+        await new Promise((r) => setTimeout(r, 0))
+        expect(result.current.available).toBe(false)
+        expect(result.current.hasCustomLayout).toBe(false)
+    })
+
+    it('save PUTs the full order and reset DELETEs', async () => {
+        const put = vi.fn(async () => ({ data: { success: true, data: null } }))
+        const del = vi.fn(async () => ({ data: { success: true, data: null } }))
+        const api = fakeApi({ put, delete: del })
+        const { result } = renderHook(() => useStageLayout('issue'), {
+            wrapper: wrapper(api),
+        })
+        await waitFor(() => expect(result.current.available).toBe(true))
+
+        await result.current.save(['done', 'backlog', 'in_progress'])
+        expect(put).toHaveBeenCalledWith('/stage-layout', {
+            model: 'issue',
+            stage_order: ['done', 'backlog', 'in_progress'],
+        })
+        await waitFor(() => expect(result.current.hasCustomLayout).toBe(true))
+
+        await result.current.reset()
+        expect(del).toHaveBeenCalledWith('/stage-layout?model=issue')
+    })
+
+    it('save re-throws on a {success:false} envelope', async () => {
+        const put = vi.fn(async () => ({ data: { success: false, message: 'nope' } }))
+        const api = fakeApi({ put })
+        const { result } = renderHook(() => useStageLayout('issue'), {
+            wrapper: wrapper(api),
+        })
+        await waitFor(() => expect(result.current.available).toBe(true))
+        await expect(result.current.save(['a', 'b'])).rejects.toThrow()
+    })
+})
+
+describe('DynamicKanban stage-layout gating', () => {
+    it('shows the reset-order affordance only when a custom order exists', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi({}, { model: 'issue', stage_order: ['done', 'backlog', 'in_progress'] })
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog')
+        expect(
+            await screen.findByTestId('kanban-reset-order'),
+        ).toBeTruthy()
+    })
+
+    it('resets the order: DELETE + metadata refetch', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const del = vi.fn(async () => ({ data: { success: true, data: null } }))
+        const api = fakeApi({ delete: del }, { model: 'issue', stage_order: ['done', 'backlog', 'in_progress'] })
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        const btn = await screen.findByTestId('kanban-reset-order')
+        const metaCallsBefore = (api.get as any).mock.calls.filter((c: any[]) =>
+            String(c[0]).startsWith('/metadata/table/'),
+        ).length
+        fireEvent.click(btn)
+        await waitFor(() => expect(del).toHaveBeenCalledWith('/stage-layout?model=issue'))
+        // a fresh metadata GET followed the reset (falls back to declared order)
+        await waitFor(() => {
+            const after = (api.get as any).mock.calls.filter((c: any[]) =>
+                String(c[0]).startsWith('/metadata/table/'),
+            ).length
+            expect(after).toBeGreaterThan(metaCallsBefore)
+        })
+    })
+
+    it('a missing /stage-layout endpoint leaves the board intact (no reset, lanes + cards render)', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi({
+            get: vi.fn(async (url: string) => {
+                if (url.startsWith('/metadata/table/')) return { data: { success: true, data: meta() } }
+                if (url.startsWith('/stage-layout')) throw new Error('404')
+                if (url.startsWith('/custom-stages')) return { data: { success: false } }
+                return { data: { success: true, data: CARDS } }
+            }),
+        })
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        // board still paints every lane + a card
+        expect(await screen.findByText('Backlog')).toBeTruthy()
+        expect(screen.getByText('Done')).toBeTruthy()
+        expect(await screen.findByText('Fix login bug')).toBeTruthy()
+        // no reset affordance without a wired endpoint
+        expect(screen.queryByTestId('kanban-reset-order')).toBeNull()
+    })
+})

package/src/action-modal-dispatcher.tsx

@@ -218,6 +218,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
     const { t } = useTranslation()
     const api = useApi()
     const [executing, setExecuting] = useState(false)
+    // `action.label` is an addon-contributed i18n key; its locale bundle loads
+    // asynchronously, so translate at render (defaultValue keeps an already
+    // localized label unchanged).
+    const label = t(action.label, { defaultValue: action.label })
 
     const execute = async () => {
         setExecuting(true)
@@ -244,10 +248,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
                 <AlertDialogHeader>
                     <AlertDialogTitle className="flex items-center gap-2">
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
-                        {action.label}
+                        {label}
                     </AlertDialogTitle>
                     <AlertDialogDescription>
-                        {action.confirmMessage || `${action.label}?`}
+                        {action.confirmMessage || `${label}?`}
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
@@ -258,7 +262,7 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
                         style={action.color ? { backgroundColor: action.color } : undefined}
                     >
                         {executing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <DynamicIcon name={action.icon} className="mr-2 h-4 w-4" />}
-                        {action.label}
+                        {label}
                     </AlertDialogAction>
                 </AlertDialogFooter>
             </AlertDialogContent>
@@ -268,6 +272,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
 
 function GenericActionModal({ open, onOpenChange, action, model, record, endpoint, onSuccess }: ActionModalProps) {
     const { t } = useTranslation()
+    // Addon-contributed labels (action + fields) are i18n keys whose locale
+    // bundle loads asynchronously; translate at render so they don't render raw.
+    // defaultValue keeps an already-localized string unchanged.
+    const tl = (s: string) => t(s, { defaultValue: s })
     const api = useApi()
     const [formData, setFormData] = useState<Record<string, any>>({})
     const [executing, setExecuting] = useState(false)
@@ -326,13 +334,13 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                 if (isLineItemsField(field)) {
                     const rows = formData[field.key]
                     if (!Array.isArray(rows) || rows.length === 0) {
-                        toast.error(`${field.label} requiere al menos un renglón`)
+                        toast.error(`${tl(field.label)} requiere al menos un renglón`)
                         return
                     }
                     continue
                 }
                 if (!formData[field.key] && formData[field.key] !== false) {
-                    toast.error(`${field.label} es requerido`)
+                    toast.error(`${tl(field.label)} es requerido`)
                     return
                 }
             }
@@ -389,7 +397,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                 <DialogHeader className="shrink-0">
                     <DialogTitle className="flex items-center gap-2">
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
-                        {action.label}
+                        {tl(action.label)}
                     </DialogTitle>
                     {action.confirmMessage && <DialogDescription>{action.confirmMessage}</DialogDescription>}
                 </DialogHeader>
@@ -408,7 +416,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                             return (
                                 <FieldCell key={field.key} fullWidth={fullWidth}>
                                     <FieldLabel htmlFor={field.key} required={field.required}>
-                                        {field.label}
+                                        {tl(field.label)}
                                     </FieldLabel>
                                     {renderField(field, formData[field.key], (v: any) => updateField(field.key, v), formData)}
                                 </FieldCell>
@@ -431,7 +439,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                         style={action.color ? { backgroundColor: action.color, color: 'white' } : undefined}
                     >
                         {executing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <DynamicIcon name={action.icon} className="mr-2 h-4 w-4" />}
-                        {action.label}
+                        {tl(action.label)}
                     </Button>
                 </DialogFooter>
             </DialogContent>

package/src/custom-stages.tsx

@@ -19,7 +19,7 @@
 // All UI text goes through t() with a Spanish defaultValue.
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Plus, Trash2, Pencil, MoreVertical, Filter, X } from 'lucide-react'
+import { Plus, Trash2, Pencil, MoreVertical, Filter, GripVertical, X } from 'lucide-react'
 import { toast } from 'sonner'
 import {
     Badge,
@@ -987,6 +987,18 @@ export interface SmartLaneProps {
     refreshTrigger?: any
     onEdit: (stage: CustomStage) => void
     onDelete: (stage: CustomStage) => void
+    /**
+     * Optional drag-and-drop wiring (from the kanban's sortable wrapper) so a
+     * smart lane can be reordered by its header like a real stage. Absent → the
+     * lane is static.
+     */
+    dnd?: {
+        setNodeRef: (el: HTMLElement | null) => void
+        style?: React.CSSProperties
+        isDragging?: boolean
+        handleRef?: (el: HTMLElement | null) => void
+        handleProps?: Record<string, any>
+    }
 }
 
 /**
@@ -1006,6 +1018,7 @@ export function SmartLane({
     refreshTrigger,
     onEdit,
     onDelete,
+    dnd,
 }: SmartLaneProps) {
     const { t } = useTranslation()
     const api = useApi()
@@ -1054,12 +1067,26 @@ export function SmartLane({
 
     return (
         <div
-            className="flex min-w-[280px] max-w-[420px] flex-1 shrink-0 flex-col rounded-xl border border-dashed bg-muted/20"
+            ref={dnd?.setNodeRef}
+            className="group/lane flex min-w-[280px] max-w-[420px] flex-1 shrink-0 flex-col rounded-xl border border-dashed bg-muted/20"
+            style={{ opacity: dnd?.isDragging ? 0.6 : 1, ...dnd?.style }}
             data-smart-stage={stage.key}
             data-testid={`smart-lane-${stage.key}`}
         >
             <div className="flex items-center justify-between gap-2 px-3 py-2.5">
-                <div className="flex min-w-0 items-center gap-2">
+                <div
+                    ref={dnd ? dnd.handleRef : undefined}
+                    {...(dnd ? dnd.handleProps : {})}
+                    className={`flex min-w-0 items-center gap-1.5 ${
+                        dnd ? 'cursor-grab active:cursor-grabbing' : ''
+                    }`}
+                >
+                    {dnd && (
+                        <GripVertical
+                            className="h-3.5 w-3.5 shrink-0 text-muted-foreground/40 opacity-0 transition-opacity group-hover/lane:opacity-70"
+                            aria-hidden
+                        />
+                    )}
                     <Badge
                         variant="outline"
                         className="border-0 text-xs font-semibold"