@svgrid/enterprise 2.0.3 → 2.2.0

package/src/studio/project.test.ts

@@ -2,12 +2,34 @@ import { describe, expect, it } from 'vitest'
 import type { EntitySchema } from '../schema'
 import {
   addBlock,
+  applyGridPreset,
+  addStateVar,
+  updateStateVar,
+  removeStateVar,
+  stateInitExpr,
+  compileStep,
+  setTrigger,
+  triggersOf,
+  compileTriggerSteps,
+  setScreenLayout,
+  setLayoutOpts,
+  gridOpts,
+  dockOpts,
+  canvasOpts,
+  canvasRectOf,
+  setCanvasRect,
   duplicateBlock,
   blockColumns,
+  blockStyleCss,
+  mergeBlockStyle,
   addBlockAt,
+  addComponentBlock,
   addEntity,
+  addFreestandingScreen,
   addScreen,
+  addScreenAction,
   addScreenFromTemplate,
+  removeScreenAction,
   parseProject,
   screenFromTemplate,
   serializeProject,
@@ -37,11 +59,20 @@ import {
   removeTab,
   renameTab,
   addTabBlock,
+  addTabComponent,
   removeTabBlock,
+  addAccordionSection,
+  removeAccordionSection,
+  renameAccordionSection,
+  setAccordionMultiple,
+  addAccordionBlock,
+  addAccordionComponent,
+  removeAccordionBlock,
   flattenBlocks,
   TAB_CHILD_KINDS,
   type MasterDetailConfig,
   type TabsConfig,
+  type AccordionConfig,
   type StudioProject,
 } from './project'
 
@@ -60,6 +91,39 @@ const orders: EntitySchema = {
   fields: [{ field: 'id', type: 'text', primaryKey: true }, { field: 'total', type: 'number' }],
 }
 
+describe('per-block style', () => {
+  it('blockStyleCss emits override declarations and sanitizes the color', () => {
+    expect(blockStyleCss(undefined)).toBe('')
+    expect(blockStyleCss({})).toBe('')
+    expect(blockStyleCss({ border: false })).toBe('border: none')
+    expect(blockStyleCss({ border: true })).toContain('border: 1px solid')
+    expect(blockStyleCss({ shadow: false })).toBe('box-shadow: none')
+    expect(blockStyleCss({ padding: 16, margin: 8, radius: 12 })).toBe('padding: 16px; margin: 8px; border-radius: 12px')
+    // A malicious color can't break out of the inline style attribute.
+    expect(blockStyleCss({ background: '#fff' })).toBe('background: #fff')
+    expect(blockStyleCss({ background: 'red;"><script>' })).toBe('background: redscript')
+  })
+
+  it('mergeBlockStyle merges and drops cleared keys (undefined)', () => {
+    expect(mergeBlockStyle(undefined, { padding: 12 })).toEqual({ padding: 12 })
+    expect(mergeBlockStyle({ padding: 12, border: false }, { margin: 4 })).toEqual({ padding: 12, border: false, margin: 4 })
+    expect(mergeBlockStyle({ padding: 12, border: false }, { border: undefined })).toEqual({ padding: 12 })
+    expect(mergeBlockStyle({ padding: 12 }, { padding: undefined })).toBeUndefined()
+  })
+
+  it('updateBlock merges a style patch onto the block, round-trips through parse', () => {
+    let p = createProject([customers])
+    const sid = p.screens[0]!.id
+    const bid = p.screens[0]!.blocks[0]!.id
+    p = updateBlock(p, sid, bid, { style: { border: false, padding: 24 } })
+    expect(p.screens[0]!.blocks[0]!.style).toEqual({ border: false, padding: 24 })
+    p = updateBlock(p, sid, bid, { style: { padding: undefined } })
+    expect(p.screens[0]!.blocks[0]!.style).toEqual({ border: false })
+    const round = parseProject(serializeProject(p))
+    expect(round.screens[0]!.blocks[0]!.style).toEqual({ border: false })
+  })
+})
+
 describe('Tabs container ops', () => {
   const base = () => defaultBlockConfig('tabs', customers) as TabsConfig
 
@@ -120,6 +184,74 @@ describe('Tabs container ops', () => {
     expect((p.screens.find((s) => s.id === sid)!.blocks[0]!.config as TabsConfig).tabs[0]!.blocks).toHaveLength(0)
     expect(p.screens.find((s) => s.id === sid)!.blocks).toHaveLength(1) // container intact
   })
+
+  it('a component can be dropped into a tab (specific registry key -> configured child)', () => {
+    const base = defaultBlockConfig('tabs', customers) as TabsConfig
+    const cfg = addTabComponent(base, 0, 'badge')
+    const child = cfg.tabs[0]!.blocks[0]!
+    expect(child.config.kind).toBe('component')
+    expect((child.config as { component: string }).component).toBe('badge')
+    // Seeded with the registry's default props + content, so it renders immediately.
+    expect((child.config as { props: Record<string, unknown> }).props).toMatchObject({ variant: 'neutral', _content: 'Badge' })
+    // An unknown component key is a no-op (never inserts a broken child).
+    expect(addTabComponent(base, 0, 'not-real')).toBe(base)
+  })
+})
+
+describe('Accordion container (mirrors Tabs)', () => {
+  const base = () => defaultBlockConfig('accordion', customers) as AccordionConfig
+
+  it('defaults to two empty sections, single-open', () => {
+    const cfg = base()
+    expect(cfg.sections.map((s) => s.label)).toEqual(['Section 1', 'Section 2'])
+    expect(cfg.sections.every((s) => s.blocks.length === 0)).toBe(true)
+    expect(cfg.multiple).toBe(false)
+  })
+
+  it('adds / renames / removes sections (keeps at least one) + toggles multiple', () => {
+    let cfg = addAccordionSection(base(), 'Extra')
+    expect(cfg.sections).toHaveLength(3)
+    cfg = renameAccordionSection(cfg, 0, 'First')
+    expect(cfg.sections[0]!.label).toBe('First')
+    cfg = setAccordionMultiple(cfg, true)
+    expect(cfg.multiple).toBe(true)
+    cfg = removeAccordionSection(cfg, 2)
+    expect(cfg.sections).toHaveLength(2)
+    const one = removeAccordionSection(removeAccordionSection(cfg, 1), 0)
+    expect(one.sections).toHaveLength(1) // never drops the last section
+  })
+
+  it('hosts display blocks + components with unique ids, and removes them', () => {
+    let cfg = addAccordionBlock(base(), 0, 'chart', customers)
+    cfg = addAccordionComponent(cfg, 0, 'stat')
+    expect(cfg.sections[0]!.blocks.map((b) => b.config.kind)).toEqual(['chart', 'component'])
+    const ids = cfg.sections[0]!.blocks.map((b) => b.id)
+    expect(new Set(ids).size).toBe(2)
+    // grid is controller-bound -> rejected inside a section
+    expect(addAccordionBlock(cfg, 0, 'grid', customers)).toBe(cfg)
+    cfg = removeAccordionBlock(cfg, 0, ids[0]!)
+    expect(cfg.sections[0]!.blocks.map((b) => b.config.kind)).toEqual(['component'])
+  })
+
+  it('flattenBlocks + updateBlock + removeBlock reach a block nested in a section', () => {
+    let p = createProject([customers])
+    const sid = p.screens[0]!.id
+    p = { ...p, screens: p.screens.map((s) => (s.id === sid ? { ...s, blocks: [] } : s)) }
+    p = addBlock(p, sid, 'accordion')
+    const ab = p.screens.find((s) => s.id === sid)!.blocks[0]!
+    p = updateBlock(p, sid, ab.id, { config: addAccordionBlock(ab.config as AccordionConfig, 1, 'gauge', customers) })
+    const cfg0 = p.screens.find((s) => s.id === sid)!.blocks[0]!.config as AccordionConfig
+    const childId = cfg0.sections[1]!.blocks[0]!.id
+    expect(flattenBlocks(p.screens.find((s) => s.id === sid)!.blocks).map((b) => b.config.kind)).toEqual(['accordion', 'gauge'])
+
+    p = updateBlock(p, sid, childId, { config: { measure: 'mrr', reduce: 'avg' } as Partial<import('./project').GaugeConfig> })
+    const child = (p.screens.find((s) => s.id === sid)!.blocks[0]!.config as AccordionConfig).sections[1]!.blocks[0]!
+    expect(child.config).toMatchObject({ kind: 'gauge', measure: 'mrr' })
+
+    p = removeBlock(p, sid, childId)
+    expect((p.screens.find((s) => s.id === sid)!.blocks[0]!.config as AccordionConfig).sections[1]!.blocks).toHaveLength(0)
+    expect(p.screens.find((s) => s.id === sid)!.blocks).toHaveLength(1)
+  })
 })
 
 describe('createProject / defaultScreenFor', () => {
@@ -190,6 +322,138 @@ describe('block ops', () => {
     expect(blockColumns({ span: 2, colSpan: 99 })).toBe(12) // clamped
   })
 
+  it('applyGridPreset rewrites block column spans by pattern', () => {
+    let p = addBlock(base, sid, 'kpi') // base already has a grid; now [grid, kpi]
+    p = addBlock(p, sid, 'chart') // [grid, kpi, chart]
+    const spans = (pp: typeof p) => pp.screens[0]!.blocks.map((b) => blockColumns(b))
+    expect(spans(applyGridPreset(p, sid, 'full'))).toEqual([12, 12, 12])
+    expect(spans(applyGridPreset(p, sid, 'two-col'))).toEqual([6, 6, 6])
+    expect(spans(applyGridPreset(p, sid, 'three-col'))).toEqual([4, 4, 4])
+    expect(spans(applyGridPreset(p, sid, 'sidebar'))).toEqual([4, 8, 8]) // first narrow, rest wide
+    expect(spans(applyGridPreset(p, sid, 'kpi-row'))).toEqual([12, 3, 12]) // only the kpi block is a 3-wide strip cell
+  })
+
+  it('setScreenLayout(split/dock) gives every block its OWN leaf, not one tabs stack', () => {
+    // Two "center" blocks (grid + chart) used to collapse into a single tabs leaf,
+    // trapping them as tabs (unresizable when locked). Each must be its own pane.
+    let p = addBlock(base, sid, 'chart') // base has a grid; now [grid, chart] - both center
+    p = setScreenLayout(p, sid, 'split')
+    const dock = p.screens[0]!.dock!
+    const leaves: { panes: number }[] = []
+    const walk = (n: any) => { if (n.type === 'tabs') leaves.push({ panes: n.panes.length }); else n.children.forEach(walk) }
+    walk(dock.main)
+    expect(leaves.length).toBe(2) // grid + chart => two separate leaves
+    expect(leaves.every((l) => l.panes === 1)).toBe(true) // never stacked as tabs
+  })
+
+  it('setScreenLayout re-seeds a fresh pane arrangement when coming from a non-pane layout', () => {
+    let p = addBlock(base, sid, 'chart')
+    p = setScreenLayout(p, sid, 'split')
+    const firstDock = p.screens[0]!.dock
+    // grid -> split -> grid -> split must NOT carry a stale arrangement (fresh seed).
+    p = setScreenLayout(p, sid, 'grid')
+    p = setScreenLayout(p, sid, 'split')
+    expect(p.screens[0]!.dock).not.toBe(firstDock) // re-seeded, not the old object
+    // ...but split <-> dock preserves the arrangement.
+    const beforeToggle = p.screens[0]!.dock
+    p = setScreenLayout(p, sid, 'dock')
+    expect(p.screens[0]!.dock).toBe(beforeToggle)
+  })
+
+  it('setLayoutOpts merges per-mode settings; getters fall back to defaults; round-trips', () => {
+    let p = setLayoutOpts(base, sid, 'grid', { colGap: 24 })
+    p = setLayoutOpts(p, sid, 'grid', { maxWidth: 1200 }) // merges, keeps colGap
+    p = setLayoutOpts(p, sid, 'dock', { allowPopout: true, headerPosition: 'bottom' })
+    const s = p.screens[0]!
+    expect(gridOpts(s).colGap).toBe(24)
+    expect(gridOpts(s).maxWidth).toBe(1200)
+    expect(gridOpts(s).rowGap).toBe(16) // default preserved
+    expect(dockOpts(s).allowPopout).toBe(true)
+    expect(dockOpts(s).headerPosition).toBe('bottom')
+    expect(canvasOpts(s).cols).toBe(12) // untouched mode -> defaults
+    const round = parseProject(serializeProject(p)).screens[0]!
+    expect(gridOpts(round).colGap).toBe(24)
+    expect(dockOpts(round).allowPopout).toBe(true)
+  })
+
+  it('canvas column count clamps stored rects + drives new placements', () => {
+    let p = addBlock(base, sid, 'kpi')
+    p = setScreenLayout(p, sid, 'canvas')
+    const kpi = p.screens[0]!.blocks[1]!
+    p = setCanvasRect(p, sid, kpi.id, { col: 8, colSpan: 4 }) // fits in 12
+    // Shrink the grid to 6 columns: the col-8/span-4 rect must clamp on read.
+    p = setLayoutOpts(p, sid, 'canvas', { cols: 6 })
+    const r = canvasRectOf(p.screens[0]!, kpi.id)
+    expect(r.colSpan).toBeLessThanOrEqual(6)
+    expect(r.col + r.colSpan).toBeLessThanOrEqual(6)
+  })
+
+  it('state variables: add / update / remove keep names valid + unique', () => {
+    let p = addStateVar(base, sid, { name: 'count', type: 'number', initial: '5' })
+    p = addStateVar(p, sid, { name: 'count' }) // dup -> count2
+    p = addStateVar(p, sid, { name: '2bad name!' }) // sanitized
+    const names = p.screens[0]!.state!.map((v) => v.name)
+    expect(names).toEqual(['count', 'count2', '_2bad_name_'])
+    expect(stateInitExpr(p.screens[0]!.state![0]!)).toBe('5')
+    p = updateStateVar(p, sid, 'count', { type: 'boolean', initial: 'true' })
+    expect(stateInitExpr(p.screens[0]!.state![0]!)).toBe('true')
+    p = removeStateVar(p, sid, 'count2')
+    expect(p.screens[0]!.state!.map((v) => v.name)).toEqual(['count', '_2bad_name_'])
+    // round-trips
+    expect(parseProject(serializeProject(p)).screens[0]!.state).toEqual(p.screens[0]!.state)
+  })
+
+  it('entity triggers: setTrigger / triggersOf + compile to server code (payload = v)', () => {
+    let p = createProject([customers])
+    p = setTrigger(p, 'customers', 'beforeCreate', [
+      { type: 'requireField', field: 'name' },
+      { type: 'setField', field: 'name', value: { kind: 'field', name: 'name' } },
+      { type: 'reject', condition: { left: { kind: 'field', name: 'age' }, op: 'lt', right: { kind: 'literal', value: '0' } }, message: 'age must be >= 0' },
+    ])
+    expect(triggersOf(p, 'customers').beforeCreate).toHaveLength(3)
+    const body = compileTriggerSteps(triggersOf(p, 'customers').beforeCreate!)
+    expect(body).toContain("if (v['name'] == null || v['name'] === '') throw new Error('name is required')")
+    expect(body).toContain("v['name'] = v?.['name']")
+    expect(body).toContain("if (Number(v?.['age']) < Number(0)) throw new Error('age must be >= 0')")
+    // clearing an event with null drops it (and the entity when empty)
+    p = setTrigger(p, 'customers', 'beforeCreate', null)
+    expect(p.triggers).toBeUndefined()
+    // round-trip
+    p = setTrigger(p, 'customers', 'afterCreate', [{ type: 'code', code: 'console.log(v)' }])
+    expect(parseProject(serializeProject(p)).triggers).toEqual(p.triggers)
+  })
+
+  it('logic-core step verbs compile to ctx code', () => {
+    expect(compileStep({ type: 'setVar', name: 'q', value: { kind: 'literal', value: 'hi' } })).toBe("ctx.state.q = 'hi'")
+    expect(compileStep({ type: 'setVar', name: 'sel', value: { kind: 'state', name: 'row' } })).toBe('ctx.state.sel = ctx.state.row')
+    expect(compileStep({ type: 'createRecord', values: [{ field: 'name', value: { kind: 'param', name: 'q' } }] })).toBe("await ctx.data.create({ name: ctx.params['q'] })")
+    expect(compileStep({ type: 'updateRecord', id: { kind: 'field', name: 'id' }, values: [{ field: 'done', value: { kind: 'literal', value: 'true' } }] })).toBe("await ctx.data.update(row?.['id'], { done: true })")
+    expect(compileStep({ type: 'deleteRecord', id: { kind: 'state', name: 'selId' } })).toBe('await ctx.data.delete(ctx.state.selId)')
+    // branch nests + indents its body
+    const br = compileStep({ type: 'branch', condition: { left: { kind: 'state', name: 'n' }, op: 'gt', right: { kind: 'literal', value: '3' } }, then: [{ type: 'alert', message: 'big' }], else: [{ type: 'alert', message: 'small' }] })
+    expect(br).toBe("if (Number(ctx.state.n) > Number(3)) {\n  alert('big')\n} else {\n  alert('small')\n}")
+  })
+
+  it('setScreenLayout(canvas) seeds cell rects; setCanvasRect clamps to the grid + round-trips', () => {
+    let p = addBlock(base, sid, 'kpi') // [grid, kpi]
+    p = setScreenLayout(p, sid, 'canvas')
+    const s = () => p.screens[0]!
+    expect(s().layout).toBe('canvas')
+    // Every block got a rect.
+    for (const b of s().blocks) expect(canvasRectOf(s(), b.id)).toBeTruthy()
+    const kpi = s().blocks[1]!
+    // Move + oversize: col clamps so col + colSpan <= 12; spans clamp to >= 1.
+    p = setCanvasRect(p, sid, kpi.id, { col: 20, row: -5, colSpan: 99, rowSpan: 0 })
+    const r = canvasRectOf(s(), kpi.id)
+    expect(r.colSpan).toBe(12)
+    expect(r.col).toBe(0) // 12-span can only sit at col 0
+    expect(r.row).toBe(0)
+    expect(r.rowSpan).toBe(1)
+    // Survives serialize/parse.
+    const round = parseProject(serializeProject(p))
+    expect(canvasRectOf(round.screens[0]!, kpi.id)).toEqual(r)
+  })
+
   it('addBlockAt inserts at the given index (palette drop)', () => {
     const p = addBlockAt(base, sid, 'chart', 0) // before the grid
     expect(p.screens[0]!.blocks.map((b) => b.config.kind)).toEqual(['chart', 'grid'])
@@ -248,6 +512,95 @@ describe('entity + screen ops', () => {
   })
 })
 
+describe('freestanding screens + custom actions', () => {
+  it('addFreestandingScreen creates a screen with no entity and no blocks', () => {
+    const p = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    const s = p.screens.find((s) => s.title === 'Reports')!
+    expect(s.entity).toBeUndefined()
+    expect(s.blocks).toEqual([])
+  })
+
+  it('a second freestanding screen gets a unique id and route', () => {
+    let p = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    p = addFreestandingScreen(p, { title: 'Sync' })
+    const freestanding = p.screens.filter((s) => s.entity === undefined)
+    expect(freestanding).toHaveLength(2)
+    expect(new Set(freestanding.map((s) => s.id)).size).toBe(2)
+    expect(new Set(freestanding.map((s) => s.route)).size).toBe(2)
+  })
+
+  it('addScreenAction generates a unique id and appends to the screen; removeScreenAction removes it', () => {
+    const base = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    const screenId = base.screens.find((s) => s.title === 'Reports')!.id
+    let p = addScreenAction(base, screenId, { label: 'Run report', confirm: 'Run the monthly report?' })
+    const screen = p.screens.find((s) => s.id === screenId)!
+    expect(screen.actions).toHaveLength(1)
+    expect(screen.actions![0]).toMatchObject({ label: 'Run report', confirm: 'Run the monthly report?' })
+    const actionId = screen.actions![0]!.id
+    expect(actionId).toBeTruthy()
+
+    p = removeScreenAction(p, screenId, actionId)
+    expect(p.screens.find((s) => s.id === screenId)!.actions).toEqual([])
+  })
+
+  it('addScreenAction ids stay unique project-wide, not just per-screen', () => {
+    let p = createProject([customers])
+    const s1 = p.screens[0]!.id
+    p = addFreestandingScreen(p, { title: 'Reports' })
+    const s2 = p.screens.find((s) => s.title === 'Reports')!.id
+    p = addScreenAction(p, s1, { label: 'First' })
+    p = addScreenAction(p, s2, { label: 'Second' })
+    const id1 = p.screens.find((s) => s.id === s1)!.actions![0]!.id
+    const id2 = p.screens.find((s) => s.id === s2)!.actions![0]!.id
+    expect(id1).not.toBe(id2)
+  })
+})
+
+describe('component blocks', () => {
+  it('addComponentBlock adds a component block to a freestanding screen (no entity needed)', () => {
+    const p = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    const sid = p.screens.find((s) => s.title === 'Reports')!.id
+    const next = addComponentBlock(p, sid, 'button', { variant: 'primary' })
+    const screen = next.screens.find((s) => s.id === sid)!
+    expect(screen.blocks).toHaveLength(1)
+    expect(screen.blocks[0]!.config).toMatchObject({ kind: 'component', component: 'button', props: { variant: 'primary' } })
+  })
+
+  it('addComponentBlock also works mixed onto an entity-bound screen', () => {
+    const p = createProject([customers])
+    const sid = p.screens[0]!.id
+    const before = p.screens[0]!.blocks.length
+    const next = addComponentBlock(p, sid, 'alert', {})
+    const screen = next.screens.find((s) => s.id === sid)!
+    expect(screen.blocks).toHaveLength(before + 1)
+    expect(screen.blocks.at(-1)!.config).toMatchObject({ kind: 'component', component: 'alert' })
+  })
+
+  it('addComponentBlock inserts at an index and gives the block a unique id', () => {
+    let p = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    const sid = p.screens.find((s) => s.title === 'Reports')!.id
+    p = addComponentBlock(p, sid, 'button', {})
+    p = addComponentBlock(p, sid, 'badge', {}, 0)
+    const screen = p.screens.find((s) => s.id === sid)!
+    expect(screen.blocks.map((b) => (b.config as { component: string }).component)).toEqual(['badge', 'button'])
+    expect(new Set(screen.blocks.map((b) => b.id)).size).toBe(2)
+  })
+
+  it('validateProject warns on a component block with no component selected', () => {
+    let p = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    const sid = p.screens.find((s) => s.title === 'Reports')!.id
+    p = addComponentBlock(p, sid, '', {})
+    expect(validateProject(p).some((i) => /Component block has no component selected/.test(i.message))).toBe(true)
+  })
+
+  it('a freestanding screen with only a component block does not warn about being empty', () => {
+    let p = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    const sid = p.screens.find((s) => s.title === 'Reports')!.id
+    p = addComponentBlock(p, sid, 'button', {})
+    expect(validateProject(p).some((i) => /is empty/.test(i.message))).toBe(false)
+  })
+})
+
 describe('validateProject', () => {
   it('addScreen dedupes the route so two screens for one entity do not collide', () => {
     const p = addScreen(createProject([customers]), 'customers')
@@ -300,6 +653,23 @@ describe('validateProject', () => {
     const treeIssue = validateProject(p).find((i) => i.block === treeId)
     expect(treeIssue?.message).toMatch(/label field/)
   })
+
+  it('a freestanding screen (no entity) does not trigger the missing-entity error', () => {
+    const p = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    expect(validateProject(p).some((i) => /missing entity/.test(i.message))).toBe(false)
+  })
+
+  it('warns that an empty freestanding screen needs an action or content', () => {
+    const p = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    expect(validateProject(p).some((i) => /is empty - add an action or some content/.test(i.message))).toBe(true)
+  })
+
+  it('a freestanding screen with a custom action does not warn about being empty', () => {
+    let p = addFreestandingScreen(createProject([customers]), { title: 'Reports' })
+    const sid = p.screens.find((s) => s.title === 'Reports')!.id
+    p = addScreenAction(p, sid, { label: 'Run report' })
+    expect(validateProject(p).some((i) => /is empty/.test(i.message))).toBe(false)
+  })
 })
 
 describe('block/screen efficiency ops', () => {