@asteby/metacore-runtime-react 23.7.1 → 23.8.0

package/dist/stage-layout.js

@@ -0,0 +1,70 @@
+// Stage layout — per-org persistence of the DynamicKanban lane order. Lets a
+// user drag the board's columns (declared stages, custom stages and smart
+// lanes alike) into any order; the chosen order is saved server-side and
+// re-applied on load (the ops backend stamps it onto `metadata.stages[].order`
+// / `smart_lanes[].order`, so the board already paints ordered — this hook only
+// owns the drag + the optimistic PUT).
+//
+// Non-intrusive by design: mirrors `useStageAutomations`. If the host wires no
+// `/stage-layout` endpoint, the GET 404s, `available` stays false, and the lane
+// drag simply never turns on — the kanban keeps working untouched.
+//
+// Contract (matches the ops backend; envelope is {success, data} → read .data):
+//   GET    /stage-layout?model=<m>  → { model, stage_order: string[] } | null
+//   PUT    /stage-layout            { model, stage_order: string[] }  (full order)
+//   DELETE /stage-layout?model=<m>  → reset to the declared order
+import { useCallback, useEffect, useState } from 'react';
+import { useApi } from './api-context';
+function unwrap(res) {
+    const body = res?.data;
+    if (body && typeof body === 'object' && 'data' in body)
+        return body.data;
+    return body;
+}
+/**
+ * Loads a model's saved lane order (only to learn availability + whether a
+ * custom order exists) and exposes save/reset. A missing endpoint degrades to
+ * `available: false` so the board's lane drag stays off; a real save failure
+ * re-throws so the caller can revert its optimistic reorder.
+ */
+export function useStageLayout(model) {
+    const api = useApi();
+    const [available, setAvailable] = useState(false);
+    const [hasCustomLayout, setHasCustomLayout] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        api
+            .get(`/stage-layout?model=${encodeURIComponent(model)}`)
+            .then((res) => {
+            if (cancelled)
+                return;
+            setAvailable(true);
+            const data = unwrap(res);
+            const order = data?.stage_order;
+            setHasCustomLayout(Array.isArray(order) && order.length > 0);
+        })
+            .catch(() => {
+            // Endpoint absent or errored — leave lane drag off.
+            if (!cancelled)
+                setAvailable(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [api, model]);
+    const save = useCallback(async (order) => {
+        const res = (await api.put('/stage-layout', {
+            model,
+            stage_order: order,
+        }));
+        if (res?.data && res.data.success === false) {
+            throw new Error(res.data.message || 'stage_layout_save_failed');
+        }
+        setHasCustomLayout(true);
+    }, [api, model]);
+    const reset = useCallback(async () => {
+        await api.delete(`/stage-layout?model=${encodeURIComponent(model)}`);
+        setHasCustomLayout(false);
+    }, [api, model]);
+    return { available, hasCustomLayout, save, reset };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.7.1",
+  "version": "23.8.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/dynamic-kanban-lane-reorder.test.tsx

@@ -0,0 +1,228 @@
+// @vitest-environment happy-dom
+//
+// DynamicKanban lane reordering (drag a column header to reorder lanes).
+// happy-dom can't faithfully simulate a dnd-kit pointer drag, so we mock
+// @dnd-kit/core + @dnd-kit/sortable down to a passthrough that CAPTURES the
+// board's `onDragEnd`, then drive it with a synthetic lane / card drop. This
+// exercises the real handler: optimistic reorder + `PUT /stage-layout` with the
+// full new key order, revert on failure, and that a card drop still moves the
+// card (not the lanes).
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, render, screen, waitFor } from '@testing-library/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: () => () => {},
+}))
+
+// Capture the board's drag callbacks so the test can fire a synthetic drop.
+let captured: {
+    onDragEnd?: (e: any) => void | Promise<void>
+    onDragStart?: (e: any) => void
+} = {}
+vi.mock('@dnd-kit/core', () => ({
+    DndContext: ({ children, onDragEnd, onDragStart }: any) => {
+        captured.onDragEnd = onDragEnd
+        captured.onDragStart = onDragStart
+        return children
+    },
+    DragOverlay: ({ children }: any) => children ?? null,
+    PointerSensor: class {},
+    useSensor: () => ({}),
+    useSensors: () => [],
+    useDraggable: () => ({
+        attributes: {},
+        listeners: {},
+        setNodeRef: () => {},
+        isDragging: false,
+    }),
+    useDroppable: () => ({ setNodeRef: () => {}, isOver: false }),
+}))
+vi.mock('@dnd-kit/sortable', async (orig) => {
+    const actual = (await orig()) as Record<string, unknown>
+    return {
+        ...actual,
+        SortableContext: ({ children }: any) => children,
+        useSortable: () => ({
+            setNodeRef: () => {},
+            setActivatorNodeRef: () => {},
+            attributes: {},
+            listeners: {},
+            transform: null,
+            transition: undefined,
+            isDragging: false,
+            isOver: false,
+        }),
+    }
+})
+
+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: 'review', label: 'Review', color: 'amber', order: 2 },
+    { key: 'done', label: 'Done', color: 'green', order: 3 },
+]
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        view_type: 'kanban',
+        group_by: 'stage',
+        stages: STAGES,
+        transitions: [
+            { from: 'backlog', to: 'in_progress' },
+            { from: 'in_progress', to: 'review' },
+            { from: 'review', to: 'done' },
+        ],
+        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' },
+    { id: 7, title: 'E2E tests', stage: 'review' },
+]
+
+function fakeApi(over: Partial<ApiClient> = {}): 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({ model: 'issue', stage_order: null })
+            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 laneOrder = () =>
+    Array.from(document.querySelectorAll('[data-stage]')).map((el) =>
+        el.getAttribute('data-stage'),
+    )
+
+beforeEach(() => {
+    captured = {}
+})
+afterEach(cleanup)
+
+describe('DynamicKanban lane reorder', () => {
+    it('an optimistic reorder PUTs the full new key order to /stage-layout', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const put = vi.fn(async () => ({ data: { success: true, data: null } }))
+        render(
+            <ApiProvider client={fakeApi({ put })}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog')
+        // baseline order
+        await waitFor(() =>
+            expect(laneOrder()).toEqual(['backlog', 'in_progress', 'review', 'done']),
+        )
+
+        // drag "in_progress" onto "backlog" (move index 1 → 0)
+        await act(async () => {
+            await captured.onDragEnd!({
+                active: { id: 'in_progress', data: { current: { type: 'lane' } } },
+                over: { id: 'backlog' },
+            })
+        })
+
+        expect(put).toHaveBeenCalledWith('/stage-layout', {
+            model: 'issue',
+            stage_order: ['in_progress', 'backlog', 'review', 'done'],
+        })
+        // the board reflects the new order optimistically
+        expect(laneOrder()).toEqual(['in_progress', 'backlog', 'review', 'done'])
+    })
+
+    it('reverts the order when the PUT fails', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const put = vi.fn(async (url: string) => {
+            if (url === '/stage-layout') throw new Error('boom')
+            return { data: { success: true, data: null } }
+        })
+        render(
+            <ApiProvider client={fakeApi({ put })}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog')
+        await waitFor(() =>
+            expect(laneOrder()).toEqual(['backlog', 'in_progress', 'review', 'done']),
+        )
+
+        await act(async () => {
+            await captured.onDragEnd!({
+                active: { id: 'done', data: { current: { type: 'lane' } } },
+                over: { id: 'backlog' },
+            })
+        })
+
+        expect(put).toHaveBeenCalledWith(
+            '/stage-layout',
+            expect.objectContaining({ stage_order: ['done', 'backlog', 'in_progress', 'review'] }),
+        )
+        // reverted back to the declared order
+        await waitFor(() =>
+            expect(laneOrder()).toEqual(['backlog', 'in_progress', 'review', 'done']),
+        )
+    })
+
+    it('a card drop still moves the card (PUT to the record), not the lanes', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const put = vi.fn(async () => ({ data: { success: true, data: null } }))
+        render(
+            <ApiProvider client={fakeApi({ put })}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('E2E tests')
+
+        // card 7 review -> done (a declared transition)
+        await act(async () => {
+            await captured.onDragEnd!({
+                active: { id: '7', data: { current: { type: 'card' } } },
+                over: { id: 'done' },
+            })
+        })
+
+        expect(put).toHaveBeenCalledWith('/data/issue/7', { stage: 'done' })
+        // no /stage-layout PUT for a card move
+        expect(put).not.toHaveBeenCalledWith('/stage-layout', expect.anything())
+        // lane order unchanged
+        expect(laneOrder()).toEqual(['backlog', 'in_progress', 'review', 'done'])
+    })
+})

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/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"