Merge pull request #301 from Pouzor/fix/yaml-export-port-numbers

fix: round-trip Show Port Numbers on YAML export/import

frontend/src/components/modals/__tests__/SettingsModal.test.tsx

@@ -131,6 +131,9 @@ describe('SettingsModal', () => {
     vi.mocked(proxmoxApi.saveConfig).mockResolvedValue({ data: {} } as never)
     render(<SettingsModal open onClose={vi.fn()} />)
     await screen.findByDisplayValue('60')
+    // Wait for the async proxmox getConfig to hydrate the toggle before saving —
+    // otherwise Save can fire with the default sync_enabled=false under CI load.
+    await waitFor(() => expect(screen.getByLabelText('Toggle Proxmox auto-sync')).toBeChecked())
     fireEvent.click(screen.getByRole('button', { name: 'Save' }))
     await waitFor(() => {
       expect(proxmoxApi.saveConfig).toHaveBeenCalledWith({ sync_enabled: true, sync_interval: 3600 })
@@ -174,6 +177,9 @@ describe('SettingsModal', () => {
     render(<SettingsModal open onClose={vi.fn()} />)
     await screen.findByDisplayValue('60')
     await screen.findByText('Zigbee auto-sync')
+    // Wait for the async zigbee getConfig to hydrate the toggle before saving —
+    // otherwise Save can fire with the default sync_enabled=false under CI load.
+    await waitFor(() => expect(screen.getByLabelText('Toggle Zigbee auto-sync')).toBeChecked())
     fireEvent.click(screen.getByRole('button', { name: 'Save' }))
     await waitFor(() => {
       expect(zigbeeApi.saveConfig).toHaveBeenCalledWith({ sync_enabled: true, sync_interval: 1800 })

frontend/src/types/yaml.ts

@@ -34,4 +34,7 @@ export interface YamlNode {
   bottomHandles?: number
   leftHandles?: number
   rightHandles?: number
+  // Whether port-number labels are shown next to connection points. Only written
+  // when enabled so the toggle round-trips through export/import (issue #272).
+  showPortNumbers?: boolean
 }

frontend/src/utils/__tests__/exportYaml.test.ts

@@ -208,4 +208,12 @@ describe('exportCanvasToYaml', () => {
     expect(entry).not.toHaveProperty('topHandles')
     expect(entry).not.toHaveProperty('leftHandles')
   })
+
+  it('exports showPortNumbers only when enabled (issue #272)', () => {
+    const on = (yaml.load(exportCanvasToYaml([makeNode({ label: 'On', type: 'server', show_port_numbers: true })], [])) as Record<string, unknown>[])[0]
+    expect(on.showPortNumbers).toBe(true)
+
+    const off = (yaml.load(exportCanvasToYaml([makeNode({ label: 'Off', type: 'server', show_port_numbers: false })], [])) as Record<string, unknown>[])[0]
+    expect(off).not.toHaveProperty('showPortNumbers')
+  })
 })

frontend/src/utils/__tests__/importYaml.test.ts

@@ -368,4 +368,30 @@ describe('parseYamlToCanvas', () => {
     expect(edges[0].targetHandle).toBe('top-t')
     expect(nodes.find((n) => n.data.label === 'Switch')!.data.bottom_handles).toBe(3)
   })
+
+  // Regression for issue #272.
+  it('restores the show-port-numbers toggle from YAML', () => {
+    const yaml = `
+- nodeType: server
+  label: "Server"
+  showPortNumbers: true
+`
+    const { nodes } = parseYamlToCanvas(yaml, empty, emptyEdges)
+    expect(nodes.find((n) => n.data.label === 'Server')!.data.show_port_numbers).toBe(true)
+  })
+
+  it('round-trips show-port-numbers through export → import (issue #272)', () => {
+    const on: Node<NodeData> = {
+      id: 'on', type: 'server', position: { x: 0, y: 0 },
+      data: { label: 'On', type: 'server', status: 'online', services: [], show_port_numbers: true },
+    }
+    const off: Node<NodeData> = {
+      id: 'off', type: 'server', position: { x: 0, y: 0 },
+      data: { label: 'Off', type: 'server', status: 'online', services: [] },
+    }
+    const yamlStr = exportCanvasToYaml([on, off], [])
+    const { nodes } = parseYamlToCanvas(yamlStr, empty, emptyEdges)
+    expect(nodes.find((n) => n.data.label === 'On')!.data.show_port_numbers).toBe(true)
+    expect(nodes.find((n) => n.data.label === 'Off')!.data.show_port_numbers).toBeUndefined()
+  })
 })

frontend/src/utils/exportYaml.ts

@@ -92,6 +92,9 @@ export function exportCanvasToYaml(nodes: Node<NodeData>[], edges: Edge<EdgeData
     // Custom connection-point counts, so imported edges land on real slots.
     attachHandleCounts(entry, d)
 
+    // Preserve the port-number toggle so it survives a round-trip (issue #272).
+    if (d.show_port_numbers) entry.showPortNumbers = true
+
     // Parent relationship: if this node has a parentId in React Flow,
     // encode it as a 'parent' connection using any virtual edge between them.
     if (node.parentId) {

frontend/src/utils/importYaml.ts

@@ -79,6 +79,8 @@ export function parseYamlToCanvas(
       ...(yn.bottomHandles ? { bottom_handles: yn.bottomHandles } : {}),
       ...(yn.leftHandles ? { left_handles: yn.leftHandles } : {}),
       ...(yn.rightHandles ? { right_handles: yn.rightHandles } : {}),
+      // Restore the port-number toggle (issue #272).
+      ...(yn.showPortNumbers ? { show_port_numbers: true } : {}),
     }
 
     newNodes.push({