danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: StatusDot not updating reactively when VM status changes

Browse source 
The StatusDot component was computing variant, size, and className once
at mount time, not reactively. When a VM transitioned from stopped to
running, the tooltip updated (it accessed props.title directly) but the
dot color stayed red because className was stale.

Fix: Convert plain variable assignments to getter functions that access
props reactively, and call them in the JSX template.
This commit is contained in:
rcourtman 2025-12-05 10:40:03 +00:00
parent cc3c0187a0
commit 309302a793
1 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend-modern/src/components/shared/StatusDot.tsx
View file

@ -27,14 +27,15 @@ const SIZE_CLASSES: Record<StatusDotSize, string> = {
}; };
export function StatusDot(props: StatusDotProps): JSX.Element { export function StatusDot(props: StatusDotProps): JSX.Element {
const variant = props.variant ?? 'muted'; // Use getters to maintain reactivity - props can change over time
const size = props.size ?? 'sm'; const variant = () => props.variant ?? 'muted';
const ariaHidden = props.ariaHidden ?? !props.ariaLabel; const size = () => props.size ?? 'sm';
const ariaHidden = () => props.ariaHidden ?? !props.ariaLabel;
const className = [ const className = () => [
'inline-block rounded-full flex-shrink-0', 'inline-block rounded-full flex-shrink-0',
SIZE_CLASSES[size], SIZE_CLASSES[size()],
VARIANT_CLASSES[variant], VARIANT_CLASSES[variant()],
props.pulse ? 'animate-pulse' : '', props.pulse ? 'animate-pulse' : '',
props.class ?? '', props.class ?? '',
] ]
@ -43,10 +44,10 @@ export function StatusDot(props: StatusDotProps): JSX.Element {
return ( return (
<span <span
class={className} class={className()}
title={props.title} title={props.title}
aria-label={props.ariaLabel} aria-label={props.ariaLabel}
aria-hidden={ariaHidden} aria-hidden={ariaHidden()}
role={props.ariaLabel ? 'img' : undefined} role={props.ariaLabel ? 'img' : undefined}
/> />
); );