Skip to content

Commit e0d3cc0

Browse files
committed
fix(inspector): use proper status indicator (#2849)
### TL;DR Fixed the disconnected state in the ConnectionStatus component to only display when there's an actual error. ### What changed? - Uncommented the `if (isError)` condition that was previously commented out - Moved the disconnected state UI inside the conditional block - Added the link icon as a `startIcon` prop to the Button component instead of as a child element ### How to test? 1. Intentionally cause a connection error in the application 2. Verify that the disconnected state UI only appears when there's an actual error 3. Check that the "Reconnect" button displays correctly with the link icon ### Why make this change? The disconnected state was previously always showing regardless of connection status because the conditional check was commented out. This change ensures the error UI only displays when there's an actual connection error, improving the user experience by providing accurate connection status information.
1 parent fd015fc commit e0d3cc0

File tree

1 file changed

+22
-20
lines changed

1 file changed

+22
-20
lines changed

frontend/src/app/layout.tsx

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -371,28 +371,30 @@ function ConnectionStatus() {
371371
);
372372
}
373373

374-
// if (isError) {
375-
return (
376-
<div className="text-red-500 border p-2 rounded-md flex items-center text-sm justify-between bg-stripes-destructive ">
377-
<div className="flex items-center">
378-
<div>
379-
<p>Disconnected</p>
380-
<p className="text-muted-foreground text-xs">{endpoint}</p>
374+
if (isError) {
375+
return (
376+
<div className="text-red-500 border p-2 rounded-md flex items-center text-sm justify-between bg-stripes-destructive ">
377+
<div className="flex items-center">
378+
<div>
379+
<p>Disconnected</p>
380+
<p className="text-muted-foreground text-xs">
381+
{endpoint}
382+
</p>
383+
</div>
381384
</div>
382-
</div>
383385

384-
<Button
385-
variant="outline"
386-
size="xs"
387-
className="ml-2 text-foreground"
388-
onClick={() => setCredentials(null)}
389-
>
390-
<Icon icon={faLink} />
391-
Reconnect
392-
</Button>
393-
</div>
394-
);
395-
// }
386+
<Button
387+
variant="outline"
388+
size="xs"
389+
className="ml-2 text-foreground"
390+
onClick={() => setCredentials(null)}
391+
startIcon={<Icon icon={faLink} />}
392+
>
393+
Reconnect
394+
</Button>
395+
</div>
396+
);
397+
}
396398

397399
if (isSuccess) {
398400
return (

0 commit comments

Comments
 (0)