feat: manage canvases with custom name and icon

Make designs (canvases) fully user-manageable: create with a chosen name and icon, rename, change icon, and delete. Replaces the hardcoded "New Electrical Design" button with a generic "New Canvas" flow. - Add Design.icon column + migration that backfills legacy rows (electrical -> zap, others -> dashboard) - DesignModal: name input + curated lucide icon picker (create + edit) - Sidebar switcher gains per-canvas edit/delete; delete guards the last canvas and confirms - designStore: addDesign/updateDesign/removeDesign with active reassignment - Fix data loss on design switch: abort load when the save fails and keep unsaved edits; skip the save-old step when the previous canvas was deleted - designsApi create/update carry icon; design_type kept for back-compat Tests: backend design CRUD (icon + cascade + last-canvas guard), designStore actions, designIcons resolver, DesignModal create/edit/validation. ha-relevant: yes
2026-06-02 15:47:57 +02:00
parent eb7b0c6d38
commit 12d527aad6
15 changed files with 693 additions and 42 deletions
@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { DesignModal } from '../DesignModal'
+import { DEFAULT_DESIGN_ICON } from '@/utils/designIcons'
+
+function renderModal(props: Partial<Parameters<typeof DesignModal>[0]> = {}) {
+  const onClose = vi.fn()
+  const onSubmit = vi.fn()
+  render(<DesignModal open onClose={onClose} onSubmit={onSubmit} {...props} />)
+  return { onClose, onSubmit }
+}
+
+describe('DesignModal', () => {
+  it('creates with the typed name and default icon', () => {
+    const { onSubmit } = renderModal()
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Home Network' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Create' }))
+    expect(onSubmit).toHaveBeenCalledWith({ name: 'Home Network', icon: DEFAULT_DESIGN_ICON })
+  })
+
+  it('submits the selected icon', () => {
+    const { onSubmit } = renderModal()
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Rack Power' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Electrical' })) // zap icon's aria-label
+    fireEvent.click(screen.getByRole('button', { name: 'Create' }))
+    expect(onSubmit).toHaveBeenCalledWith({ name: 'Rack Power', icon: 'zap' })
+  })
+
+  it('trims whitespace and blocks empty names', () => {
+    const { onSubmit } = renderModal()
+    // Empty → submit disabled, no call.
+    const submit = screen.getByRole('button', { name: 'Create' })
+    expect(submit).toBeDisabled()
+
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: '  Spaced  ' } })
+    fireEvent.click(submit)
+    expect(onSubmit).toHaveBeenCalledWith({ name: 'Spaced', icon: DEFAULT_DESIGN_ICON })
+  })
+
+  it('prefills name and icon in edit mode', () => {
+    const { onSubmit } = renderModal({
+      initial: { name: 'Existing', icon: 'server' },
+      title: 'Edit Canvas',
+      submitLabel: 'Save',
+    })
+    expect(screen.getByLabelText('Name')).toHaveValue('Existing')
+    // The server icon button is pre-selected.
+    expect(screen.getByRole('button', { name: 'Server' })).toHaveAttribute('aria-pressed', 'true')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(onSubmit).toHaveBeenCalledWith({ name: 'Existing', icon: 'server' })
+  })
+
+  it('submits on Enter from the name field', () => {
+    const { onSubmit } = renderModal()
+    const input = screen.getByLabelText('Name')
+    fireEvent.change(input, { target: { value: 'Quick' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onSubmit).toHaveBeenCalledWith({ name: 'Quick', icon: DEFAULT_DESIGN_ICON })
+  })
+
+  it('calls onClose from Cancel', () => {
+    const { onClose, onSubmit } = renderModal()
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onClose).toHaveBeenCalled()
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+})