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