url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: null guard data.services and aria-label on delete button

Browse Source 
Fixes crash when services is undefined on legacy nodes.
Adds aria-label="Delete node" for accessibility.
This commit is contained in:
Pouzor
2026-03-29 19:25:55 +02:00
parent 3fe9fa7ca8
commit f657e45995
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/DetailPanel.tsx
+5 -5
View File
@@ -142,7 +142,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
<div className="px-4 py-3 border-t border-border"> <div className="px-4 py-3 border-t border-border">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
Services{data.services.length > 0 ? ` (${data.services.length})` : ''} Services{(data.services ?? []).length > 0 ? ` (${data.services.length})` : ''}
</span> </span>
<button <button
onClick={() => { setAddingForNode((v) => v === node.id ? null : node.id); setEditingFor(null) }} onClick={() => { setAddingForNode((v) => v === node.id ? null : node.id); setEditingFor(null) }}
@@ -164,9 +164,9 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
/> />
)} )}
{data.services.length > 0 && ( {(data.services ?? []).length > 0 && (
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
{data.services.map((svc, i) => {(data.services ?? []).map((svc, i) =>
editingIndex === i ? ( editingIndex === i ? (
<ServiceForm <ServiceForm
key={`edit-${i}`} key={`edit-${i}`}
@@ -190,7 +190,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
</div> </div>
)} )}
{data.services.length === 0 && !addingService && ( {(data.services ?? []).length === 0 && !addingService && (
<p className="text-[10px] text-muted-foreground/50">No services — click Add to register one.</p> <p className="text-[10px] text-muted-foreground/50">No services — click Add to register one.</p>
)} )}
</div> </div>
@@ -208,7 +208,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
<Button size="sm" variant="secondary" className="flex-1 gap-1.5" onClick={() => onEdit(node.id)}> <Button size="sm" variant="secondary" className="flex-1 gap-1.5" onClick={() => onEdit(node.id)}>
<Edit size={14} /> Edit <Edit size={14} /> Edit
</Button> </Button>
<Button size="sm" variant="destructive" className="gap-1.5" onClick={handleDelete}> <Button size="sm" variant="destructive" className="gap-1.5" aria-label="Delete node" onClick={handleDelete}>
<Trash2 size={14} /> <Trash2 size={14} />
</Button> </Button>
</div> </div>