@asteby/metacore-runtime-react 23.5.0 → 23.6.0

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

@@ -0,0 +1,243 @@
+// @vitest-environment happy-dom
+//
+// Stage automations coverage:
+//   1. Pure helpers: isTagColumn, automationFieldOptions (per action type),
+//      groupAutomationsByStage, activeAutomationCount.
+//   2. Dialog render + create rule (mock fetch), toggle enabled, delete.
+//   3. DynamicKanban stays intact when the /stage-automations endpoint 404s
+//      (the ⚡ affordance simply never renders).
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, fireEvent, waitFor } from '@testing-library/react'
+
+const I18N_T = (k: string, opts?: Record<string, any>) => {
+    let s = (opts?.defaultValue as string) ?? k
+    if (opts) {
+        for (const [ok, ov] of Object.entries(opts)) {
+            if (ok === 'defaultValue') continue
+            s = s.replace(new RegExp(`{{${ok}}}`, 'g'), String(ov))
+        }
+    }
+    return s
+}
+const I18N = { language: 'es' }
+const USE_TRANSLATION = { t: I18N_T, i18n: I18N }
+vi.mock('react-i18next', () => ({
+    useTranslation: () => USE_TRANSLATION,
+}))
+vi.mock('sonner', () => ({
+    toast: { success: vi.fn(), error: vi.fn() },
+}))
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+
+import {
+    isTagColumn,
+    automationFieldOptions,
+    groupAutomationsByStage,
+    activeAutomationCount,
+    StageAutomationsButton,
+    useStageAutomations,
+    type StageAutomation,
+} from '../stage-automations'
+import { ApiProvider, type ApiClient } from '../api-context'
+import type { ColumnDefinition } from '../types'
+import React from 'react'
+
+afterEach(cleanup)
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const COLUMNS: ColumnDefinition[] = [
+    { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false },
+    { key: 'labels', label: 'Labels', type: 'tags', sortable: false, filterable: false },
+    { key: 'priority', label: 'Priority', type: 'text', sortable: false, filterable: false },
+    { key: 'id', label: 'ID', type: 'text', sortable: false, filterable: false, readonly: true } as ColumnDefinition,
+    { key: 'secret', label: 'Secret', type: 'text', sortable: false, filterable: false, hidden: true },
+]
+
+const RULES: StageAutomation[] = [
+    {
+        id: 'r1',
+        model: 'issue',
+        from_stage: '*',
+        to_stage: 'done',
+        actions: [{ type: 'add_tag', field: 'labels', value: 'shipped' }],
+        enabled: true,
+    },
+    {
+        id: 'r2',
+        model: 'issue',
+        from_stage: '*',
+        to_stage: 'done',
+        actions: [{ type: 'set_field', field: 'priority', value: 'low' }],
+        enabled: false,
+    },
+]
+
+// ---------------------------------------------------------------------------
+// 1. Pure helpers
+// ---------------------------------------------------------------------------
+
+describe('isTagColumn', () => {
+    it('accepts tags/json columns and rejects plain fields', () => {
+        expect(isTagColumn(COLUMNS[1])).toBe(true)
+        expect(isTagColumn(COLUMNS[0])).toBe(false)
+        expect(isTagColumn({ key: 'j', label: 'J', type: 'json' as any, sortable: false, filterable: false })).toBe(true)
+    })
+})
+
+describe('automationFieldOptions', () => {
+    it('offers only tag columns for add_tag / remove_tag', () => {
+        expect(automationFieldOptions(COLUMNS, 'add_tag').map((c) => c.key)).toEqual(['labels'])
+        expect(automationFieldOptions(COLUMNS, 'remove_tag').map((c) => c.key)).toEqual(['labels'])
+    })
+    it('offers all editable (non-readonly, non-hidden) columns for set_field', () => {
+        expect(automationFieldOptions(COLUMNS, 'set_field').map((c) => c.key)).toEqual([
+            'title',
+            'labels',
+            'priority',
+        ])
+    })
+})
+
+describe('groupAutomationsByStage / activeAutomationCount', () => {
+    it('buckets by destination stage', () => {
+        const m = groupAutomationsByStage(RULES)
+        expect(m.get('done')!.length).toBe(2)
+    })
+    it('counts only enabled rules', () => {
+        expect(activeAutomationCount(RULES)).toBe(1)
+        expect(activeAutomationCount([])).toBe(0)
+        expect(activeAutomationCount(undefined)).toBe(0)
+    })
+})
+
+// ---------------------------------------------------------------------------
+// 2. Dialog: render, create, toggle, delete
+// ---------------------------------------------------------------------------
+
+function renderButton(over: Partial<React.ComponentProps<typeof StageAutomationsButton>> = {}) {
+    const onCreate = vi.fn(async () => {})
+    const onUpdate = vi.fn(async () => {})
+    const onRemove = vi.fn(async () => {})
+    render(
+        <StageAutomationsButton
+            model="issue"
+            stageKey="done"
+            stageLabel="Done"
+            columns={COLUMNS}
+            rules={RULES}
+            onCreate={onCreate}
+            onUpdate={onUpdate}
+            onRemove={onRemove}
+            {...over}
+        />,
+    )
+    return { onCreate, onUpdate, onRemove }
+}
+
+describe('StageAutomationsButton', () => {
+    it('shows the active-rule count badge (1 of 2 enabled)', () => {
+        renderButton()
+        const trigger = screen.getByTestId('automations-trigger-done')
+        expect(trigger.textContent).toContain('1')
+    })
+
+    it('opens the dialog listing this stage rules with their summaries', () => {
+        renderButton()
+        fireEvent.click(screen.getByTestId('automations-trigger-done'))
+        expect(screen.getByTestId('automation-rule-r1')).toBeTruthy()
+        expect(screen.getByText(/Agregar tag "shipped" a Labels/)).toBeTruthy()
+        expect(screen.getByText(/Setear Priority = "low"/)).toBeTruthy()
+    })
+
+    it('creates a rule with the picked action/field/value', async () => {
+        const { onCreate } = renderButton()
+        fireEvent.click(screen.getByTestId('automations-trigger-done'))
+        // default action is add_tag → field defaults to the only tag column
+        fireEvent.change(screen.getByTestId('automation-value-input'), {
+            target: { value: 'urgent' },
+        })
+        fireEvent.click(screen.getByTestId('automation-add'))
+        await waitFor(() => expect(onCreate).toHaveBeenCalledTimes(1))
+        expect(onCreate).toHaveBeenCalledWith({
+            model: 'issue',
+            from_stage: '*',
+            to_stage: 'done',
+            actions: [{ type: 'add_tag', field: 'labels', value: 'urgent' }],
+            enabled: true,
+        })
+    })
+
+    it('toggles a rule enabled flag', () => {
+        const { onUpdate } = renderButton()
+        fireEvent.click(screen.getByTestId('automations-trigger-done'))
+        fireEvent.click(screen.getByTestId('automation-toggle-r2'))
+        expect(onUpdate).toHaveBeenCalledWith('r2', { enabled: true })
+    })
+
+    it('deletes a rule', async () => {
+        const { onRemove } = renderButton()
+        fireEvent.click(screen.getByTestId('automations-trigger-done'))
+        fireEvent.click(screen.getByTestId('automation-delete-r1'))
+        await waitFor(() => expect(onRemove).toHaveBeenCalledWith('r1'))
+    })
+})
+
+// ---------------------------------------------------------------------------
+// 3. Hook degrades gracefully when the endpoint is missing
+// ---------------------------------------------------------------------------
+
+function HookProbe({ model }: { model: string }) {
+    const a = useStageAutomations(model)
+    return (
+        <div>
+            <span data-testid="available">{String(a.available)}</span>
+            <span data-testid="loading">{String(a.loading)}</span>
+            <span data-testid="count">{a.byStage.get('done')?.length ?? 0}</span>
+        </div>
+    )
+}
+
+function fakeApi(over: Partial<ApiClient> = {}): ApiClient {
+    return {
+        get: vi.fn(async () => ({ data: { success: true, data: RULES } })),
+        post: vi.fn(async () => ({ data: { success: true, data: null } })),
+        put: vi.fn(async () => ({ data: { success: true, data: null } })),
+        delete: vi.fn(async () => ({ data: { success: true, data: null } })),
+        ...over,
+    }
+}
+
+describe('useStageAutomations', () => {
+    it('loads rules and groups them by destination stage', async () => {
+        render(
+            <ApiProvider client={fakeApi()}>
+                <HookProbe model="issue" />
+            </ApiProvider>,
+        )
+        await waitFor(() =>
+            expect(screen.getByTestId('available').textContent).toBe('true'),
+        )
+        expect(screen.getByTestId('count').textContent).toBe('2')
+    })
+
+    it('reports available=false when the endpoint 404s (no kanban break)', async () => {
+        const get = vi.fn(async () => {
+            throw { response: { status: 404 } }
+        })
+        render(
+            <ApiProvider client={fakeApi({ get })}>
+                <HookProbe model="issue" />
+            </ApiProvider>,
+        )
+        await waitFor(() =>
+            expect(screen.getByTestId('loading').textContent).toBe('false'),
+        )
+        expect(screen.getByTestId('available').textContent).toBe('false')
+        expect(screen.getByTestId('count').textContent).toBe('0')
+    })
+})

package/src/dynamic-kanban.tsx

@@ -79,6 +79,12 @@ import {
 import { ColumnFilterControl, FilterValueCombobox, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
 import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
 import { useApi } from './api-context'
+import {
+    useStageAutomations,
+    StageAutomationsButton,
+    type StageAutomation,
+    type NewStageAutomation,
+} from './stage-automations'
 import { useDynamicFilters } from './use-dynamic-filters'
 import {
     FilterChipsRow,
@@ -453,6 +459,10 @@ export function DynamicKanban({
     const api = useApi()
     const isDark = useIsDarkTheme()
 
+    // Stage automations (Bitrix-style per-lane rules). Degrades to no-op when
+    // the host has no `/stage-automations` endpoint — the ⚡ affordance hides.
+    const automations = useStageAutomations(model)
+
     const { getMetadata, setMetadata: cacheMetadata } = useMetadataCache()
     const cachedMeta = getMetadata(model)
 
@@ -877,9 +887,9 @@ export function DynamicKanban({
 
     if (loading) {
         return (
-            <div className="flex gap-4 overflow-x-auto p-1">
+            <div className="flex w-full gap-4 overflow-x-auto p-1">
                 {[0, 1, 2, 3].map((i) => (
-                    <div key={i} className="w-[300px] shrink-0 space-y-3">
+                    <div key={i} className="min-w-[280px] max-w-[420px] flex-1 shrink-0 space-y-3">
                         <Skeleton className="h-8 w-full" />
                         <Skeleton className="h-24 w-full" />
                         <Skeleton className="h-24 w-full" />
@@ -1023,7 +1033,7 @@ export function DynamicKanban({
             />
 
             <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
-                <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
+                <div className="flex w-full min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
                 {lanes.map((stage) => {
                     const allCards = grouped.get(stage.key) ?? []
                     // Per-lane client-side narrowing (instant, scoped to this
@@ -1075,6 +1085,15 @@ export function DynamicKanban({
                             isDark={isDark}
                             dimmed={!!activeId && !droppableAllowed}
                             disabled={!!activeId && !droppableAllowed}
+                            model={model}
+                            columns={metadata?.columns ?? []}
+                            automationsAvailable={
+                                automations.available && stage.key !== UNASSIGNED_LANE
+                            }
+                            automationRules={automations.byStage.get(stage.key) ?? []}
+                            onAutomationCreate={automations.create}
+                            onAutomationUpdate={automations.update}
+                            onAutomationRemove={automations.remove}
                         >
                             {loadingData && cards.length === 0 ? (
                                 <>
@@ -1243,6 +1262,18 @@ interface KanbanLaneProps {
     isDark: boolean
     dimmed: boolean
     disabled: boolean
+    /** Model key + columns for the stage-automations editor. */
+    model: string
+    columns: ColumnDefinition[]
+    /** Whether the ⚡ automations affordance should render for this lane. */
+    automationsAvailable: boolean
+    automationRules: StageAutomation[]
+    onAutomationCreate: (draft: NewStageAutomation) => Promise<void>
+    onAutomationUpdate: (
+        id: StageAutomation['id'],
+        patch: Partial<StageAutomation>,
+    ) => Promise<void>
+    onAutomationRemove: (id: StageAutomation['id']) => Promise<void>
     children: React.ReactNode
 }
 
@@ -1261,6 +1292,13 @@ function KanbanLane({
     isDark,
     dimmed,
     disabled,
+    model,
+    columns,
+    automationsAvailable,
+    automationRules,
+    onAutomationCreate,
+    onAutomationUpdate,
+    onAutomationRemove,
     children,
 }: KanbanLaneProps) {
     const { t } = useTranslation()
@@ -1309,7 +1347,11 @@ function KanbanLane({
     return (
         <div
             ref={setNodeRef}
-            className="group/lane flex w-[300px] shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity"
+            // Fluid width: lanes grow (flex-1) to fill the board when they all
+            // fit, capped at max-w so a couple of lanes don't stretch absurdly
+            // wide. Below min-w the board's overflow-x-auto takes over and the
+            // lanes scroll horizontally at their minimum width.
+            className="group/lane flex min-w-[280px] max-w-[420px] flex-1 shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity"
             style={{
                 opacity: dimmed ? 0.45 : 1,
                 outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
@@ -1355,6 +1397,18 @@ function KanbanLane({
                         value={funnelValue}
                         onChange={onFunnelChange}
                     />
+                    {automationsAvailable && (
+                        <StageAutomationsButton
+                            model={model}
+                            stageKey={stage.key}
+                            stageLabel={stage.label}
+                            columns={columns}
+                            rules={automationRules}
+                            onCreate={onAutomationCreate}
+                            onUpdate={onAutomationUpdate}
+                            onRemove={onAutomationRemove}
+                        />
+                    )}
                 </div>
             </div>
             {searchOpen && (

package/src/index.ts

@@ -16,6 +16,20 @@ export {
     selectCardColumns,
     UNASSIGNED_LANE,
 } from './dynamic-kanban'
+export {
+    useStageAutomations,
+    StageAutomationsButton,
+    isTagColumn,
+    automationFieldOptions,
+    groupAutomationsByStage,
+    activeAutomationCount,
+    type StageAutomation,
+    type StageAutomationAction,
+    type StageAutomationActionType,
+    type NewStageAutomation,
+    type UseStageAutomationsResult,
+    type StageAutomationsButtonProps,
+} from './stage-automations'
 export {
     DynamicView,
     resolveViewRenderer,