feat: per-node custom color styling (border, background, icon)
- Add resolveNodeColors() utility merging type defaults with per-node overrides - Default colors per node type (cyan=isp/router/lxc/ap, green=switch/nas, purple=server/vm, orange=proxmox, amber=iot, gray=generic) - Remove glowColor prop from BaseNode — colors now come from node data - ProxmoxGroupNode uses resolveNodeColors for group border/header/icon - NodeModal: Appearance section with 3 color swatches (border, background, icon) — click swatch to open native color picker; Reset to defaults button - custom_colors persisted as JSON in DB (backend model + schemas + migration) - 7 new unit tests for resolveNodeColors covering all node types + partial overrides
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { resolveNodeColors, NODE_DEFAULT_COLORS } from '../nodeColors'
|
||||
import type { NodeData } from '@/types'
|
||||
|
||||
function makeData(overrides: Partial<NodeData> = {}): Pick<NodeData, 'type' | 'custom_colors'> {
|
||||
return { type: 'server', custom_colors: undefined, ...overrides }
|
||||
}
|
||||
|
||||
describe('resolveNodeColors', () => {
|
||||
it('returns defaults when no custom_colors set', () => {
|
||||
const result = resolveNodeColors(makeData({ type: 'server' }))
|
||||
expect(result).toEqual(NODE_DEFAULT_COLORS.server)
|
||||
})
|
||||
|
||||
it('returns correct defaults for each node type', () => {
|
||||
const types = Object.keys(NODE_DEFAULT_COLORS) as (keyof typeof NODE_DEFAULT_COLORS)[]
|
||||
for (const type of types) {
|
||||
const result = resolveNodeColors(makeData({ type }))
|
||||
expect(result).toEqual(NODE_DEFAULT_COLORS[type])
|
||||
}
|
||||
})
|
||||
|
||||
it('overrides all three colors when custom_colors is fully set', () => {
|
||||
const custom = { border: '#ff0000', background: '#00ff00', icon: '#0000ff' }
|
||||
const result = resolveNodeColors(makeData({ type: 'server', custom_colors: custom }))
|
||||
expect(result).toEqual(custom)
|
||||
})
|
||||
|
||||
it('overrides only border when only border is set', () => {
|
||||
const result = resolveNodeColors(makeData({ type: 'switch', custom_colors: { border: '#ff0000' } }))
|
||||
expect(result.border).toBe('#ff0000')
|
||||
expect(result.background).toBe(NODE_DEFAULT_COLORS.switch.background)
|
||||
expect(result.icon).toBe(NODE_DEFAULT_COLORS.switch.icon)
|
||||
})
|
||||
|
||||
it('overrides only background when only background is set', () => {
|
||||
const result = resolveNodeColors(makeData({ type: 'router', custom_colors: { background: '#123456' } }))
|
||||
expect(result.border).toBe(NODE_DEFAULT_COLORS.router.border)
|
||||
expect(result.background).toBe('#123456')
|
||||
expect(result.icon).toBe(NODE_DEFAULT_COLORS.router.icon)
|
||||
})
|
||||
|
||||
it('overrides only icon when only icon is set', () => {
|
||||
const result = resolveNodeColors(makeData({ type: 'proxmox', custom_colors: { icon: '#abcdef' } }))
|
||||
expect(result.border).toBe(NODE_DEFAULT_COLORS.proxmox.border)
|
||||
expect(result.background).toBe(NODE_DEFAULT_COLORS.proxmox.background)
|
||||
expect(result.icon).toBe('#abcdef')
|
||||
})
|
||||
|
||||
it('falls back to generic defaults for unknown type', () => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const result = resolveNodeColors({ type: 'unknown' as any, custom_colors: undefined })
|
||||
expect(result).toEqual(NODE_DEFAULT_COLORS.generic)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user