Merge branch 'Pouzor:main' into bug/bezier-label

2026-04-21 10:47:39 -04:00
parent 8626fb2ca4 a8ca4f1cca
commit bfd7ccd36c
7 changed files with 356 additions and 14 deletions
@@ -1,7 +1,7 @@
 {
  "name": "frontend",
  "private": true,
-  "version": "1.10.1",
+  "version": "1.10.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -1,4 +1,4 @@
-import { createElement, useState } from 'react'
+import { createElement, Fragment, useState } from 'react'
 import { RotateCcw, ChevronDown } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
@@ -18,6 +18,17 @@ const NODE_TYPE_GROUPS: { label: string; types: NodeType[] }[] = [

 const CHECK_METHODS: CheckMethod[] = ['none', 'ping', 'http', 'https', 'tcp', 'ssh', 'prometheus', 'health']

+const CHECK_METHOD_LABELS: Record<CheckMethod, string> = {
+  none: 'None',
+  ping: 'Ping',
+  http: 'HTTP',
+  https: 'HTTPS',
+  tcp: 'TCP',
+  ssh: 'SSH',
+  prometheus: 'Prometheus',
+  health: 'Health',
+}
+
 const DEFAULT_DATA: Partial<NodeData> = {
  type: 'server',
  label: '',
@@ -76,13 +87,13 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
              <Label className="text-xs text-muted-foreground">Type</Label>
              <Select value={form.type} onValueChange={(v) => set('type', v as NodeType)}>
                <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8 w-full">
-                  <SelectValue />
+                  <SelectValue>{NODE_TYPE_LABELS[(form.type ?? 'server') as NodeType]}</SelectValue>
                </SelectTrigger>
                <SelectContent className="bg-[#21262d] border-[#30363d]">
                  {NODE_TYPE_GROUPS.map((group, i) => (
-                    <>
+                    <Fragment key={group.label}>
                      {i > 0 && <SelectSeparator key={`sep-${group.label}`} className="bg-[#30363d]" />}
-                      <SelectGroup key={group.label}>
+                      <SelectGroup>
                        <SelectLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50 px-2 py-1">
                          {group.label}
                        </SelectLabel>
@@ -92,7 +103,7 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                          </SelectItem>
                        ))}
                      </SelectGroup>
-                    </>
+                    </Fragment>
                  ))}
                </SelectContent>
              </Select>
@@ -221,11 +232,11 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
              <Label className="text-xs text-muted-foreground">Check Method</Label>
              <Select value={form.check_method ?? 'ping'} onValueChange={(v) => set('check_method', v as CheckMethod)}>
                <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8">
-                  <SelectValue />
+                  <SelectValue>{CHECK_METHOD_LABELS[(form.check_method ?? 'ping') as CheckMethod]}</SelectValue>
                </SelectTrigger>
                <SelectContent className="bg-[#21262d] border-[#30363d]">
                  {CHECK_METHODS.map((m) => (
-                    <SelectItem key={m} value={m} className="text-sm font-mono">{m}</SelectItem>
+                    <SelectItem key={m} value={m} className="text-sm">{CHECK_METHOD_LABELS[m]}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
@@ -1,8 +1,9 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
-import { Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, Trash2, RefreshCw, Loader2, Square, Eye, Settings, StopCircle, X } from 'lucide-react'
+import { Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, Trash2, RefreshCw, Loader2, Square, Eye, Settings, StopCircle, X, LogOut } from 'lucide-react'
 import { Logo } from '@/components/ui/Logo'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useCanvasStore } from '@/stores/canvasStore'
+import { useAuthStore } from '@/stores/authStore'
 import { scanApi, settingsApi } from '@/api/client'
 import { toast } from 'sonner'
 import { useLatestRelease } from '@/hooks/useLatestRelease'
@@ -43,6 +44,7 @@ interface SidebarProps {
 export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeApproved, forceView, highlightPendingId }: SidebarProps) {
  const [_collapsed, setCollapsed] = useState(false)
  const [_activeView, setActiveView] = useState<SidebarView>('canvas')
+  const logout = useAuthStore((s) => s.logout)

  // When forceView is set, override local state without useEffect
  const collapsed = forceView ? false : _collapsed
@@ -152,6 +154,14 @@ export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeAppro
            onClick={() => setActiveView((v) => v === 'settings' ? 'canvas' : 'settings')}
          />
        )}
+        {!STANDALONE && (
+          <SidebarItem
+            icon={LogOut}
+            label="Logout"
+            collapsed={collapsed}
+            onClick={logout}
+          />
+        )}
      </div>

      {!collapsed && <VersionBadge />}
@@ -385,8 +395,8 @@ function PendingDevicesPanel({ onNodeApproved, highlightId }: { onNodeApproved:
                <input
                  type="checkbox"
                  checked={checkedIds.has(d.id)}
-                  onClick={(e) => toggleCheck(d.id, e)}
-                  onChange={() => {}}
+                  onClick={(e) => e.stopPropagation()}
+                  onChange={(e) => { e.stopPropagation(); toggleCheck(d.id, e as unknown as React.MouseEvent) }}
                  className="w-3 h-3 accent-[#00d4ff] cursor-pointer shrink-0"
                />
                <span className="text-foreground truncate font-medium">{title}</span>
@@ -627,7 +637,7 @@ function SettingsPanel() {
            min={10}
            max={3600}
            value={interval}
-            onChange={(e) => setIntervalValue(Number(e.target.value))}
+            onChange={(e) => { const v = Number(e.target.value); if (!isNaN(v)) setIntervalValue(v) }}
            className="w-24 px-2 py-1 rounded-md text-xs font-mono bg-[#0d1117] border border-border text-foreground focus:outline-none focus:border-[#00d4ff]"
          />
          <span className="text-xs text-muted-foreground">seconds</span>
@@ -664,7 +674,7 @@ function VersionBadge() {
      </a>
      {hasUpdate && latest && (
        <a
-          href={latest.url}
+          href={latest.url.startsWith('https://') ? latest.url : '#'}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-[#e3b341]/15 text-[#e3b341] border border-[#e3b341]/30 hover:bg-[#e3b341]/25 transition-colors self-start"
@@ -2,12 +2,14 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { Sidebar } from '../Sidebar'
 import { useCanvasStore } from '@/stores/canvasStore'
+import { useAuthStore } from '@/stores/authStore'
 import type { Node } from '@xyflow/react'
 import type { NodeData } from '@/types'

 // ── Mocks ────────────────────────────────────────────────────────────────────

 vi.mock('@/stores/canvasStore')
+vi.mock('@/stores/authStore')

 const mockBulkApprove = vi.fn()
 const mockBulkHide = vi.fn()
@@ -60,6 +62,7 @@ const makeNode = (id: string, status: NodeData['status'], type: NodeData['type']
 })

 const mockToggleHideIp = vi.fn()
+const mockLogout = vi.fn()

 function mockStore(overrides: Partial<ReturnType<typeof useCanvasStore>> = {}) {
  vi.mocked(useCanvasStore).mockReturnValue({
@@ -73,6 +76,12 @@ function mockStore(overrides: Partial<ReturnType<typeof useCanvasStore>> = {}) {
  } as ReturnType<typeof useCanvasStore>)
 }

+function mockAuth() {
+  vi.mocked(useAuthStore).mockImplementation((selector: (s: { logout: () => void }) => unknown) =>
+    selector({ logout: mockLogout }) as ReturnType<typeof useAuthStore>
+  )
+}
+
 const defaultProps = {
  onAddNode: vi.fn(),
  onAddGroupRect: vi.fn(),
@@ -86,6 +95,7 @@ const defaultProps = {
 describe('Sidebar', () => {
  beforeEach(() => {
    mockStore()
+    mockAuth()
    vi.clearAllMocks()
  })

@@ -267,6 +277,19 @@ describe('Sidebar', () => {
    fireEvent.click(screen.getByRole('button', { name: 'Settings' }))
    expect(screen.queryByText('Status check interval (s)')).not.toBeInTheDocument()
  })
+
+  // ── Logout ─────────────────────────────────────────────────────────────────
+
+  it('shows Logout button in normal mode', () => {
+    render(<Sidebar {...defaultProps} />)
+    expect(screen.getByText('Logout')).toBeInTheDocument()
+  })
+
+  it('calls logout when Logout is clicked', () => {
+    render(<Sidebar {...defaultProps} />)
+    fireEvent.click(screen.getByText('Logout'))
+    expect(mockLogout).toHaveBeenCalledOnce()
+  })
 })

 // ── PendingDevicesPanel — bulk select ─────────────────────────────────────────
@@ -298,6 +321,7 @@ const DEVICE_B = {
 describe('PendingDevicesPanel — bulk select', () => {
  beforeEach(() => {
    mockStore()
+    mockAuth()
    vi.clearAllMocks()
    mockBulkApprove.mockResolvedValue({
      data: { approved: 2, node_ids: ['n1', 'n2'], device_ids: ['dev-a', 'dev-b'], skipped: 0 },