Reorder PacketExpansion to show errors before empty state

This commit is contained in:
MrAlders0n
2026-07-27 19:43:58 -04:00
parent f400dc5f76
commit 64b822f4fa
2 changed files with 16 additions and 8 deletions
+8 -8
View File
@@ -46,7 +46,14 @@ export function PacketExpansion({ packet, onOpenAnalyzer, onViewPath, selectedOb
</div>
<div className="max-h-[360px] overflow-y-auto">
{noObservations ? (
{isError ? (
<div className="flex items-center gap-3 text-[10px] text-danger py-2">
<span>Failed to load observations</span>
<button type="button" onClick={() => refetch()} className="border border-border rounded-sm px-2 py-0.5 bg-bg-raised cursor-pointer">
Retry
</button>
</div>
) : noObservations ? (
emptyState
) : isLoading ? (
<div>
@@ -58,13 +65,6 @@ export function PacketExpansion({ packet, onOpenAnalyzer, onViewPath, selectedOb
/>
))}
</div>
) : isError ? (
<div className="flex items-center gap-3 text-[10px] text-danger py-2">
<span>Failed to load observations</span>
<button type="button" onClick={() => refetch()} className="border border-border rounded-sm px-2 py-0.5 bg-bg-raised cursor-pointer">
Retry
</button>
</div>
) : data && data.observations.length === 0 ? (
emptyState
) : data ? (
@@ -47,6 +47,14 @@ describe("PacketExpansion", () => {
expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
});
it("shows error state even when summary count is zero", () => {
usePacketDetail.mockReturnValue({ isError: true, refetch: vi.fn() });
render(<PacketExpansion {...props} packet={pkt({ observationCount: 0 })} />);
expect(screen.getByText("Failed to load observations")).toBeInTheDocument();
expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
expect(screen.queryByText("No observations")).not.toBeInTheDocument();
});
it("calls refetch when retry is clicked", () => {
const refetch = vi.fn();
usePacketDetail.mockReturnValue({ isError: true, refetch });