* feat(sort): add SortToggle for Logs, History, and Network (#1371) Introduces a reusable SortToggle element and wires it into the Logs, History, and Network screens so users can flip chronological order. Selection is persisted per-screen to localStorage under the inspector.sortDirection.* namespace, with invalid stored values falling back to the newest-first default. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(logs): move auto-scroll checkbox left of the sort selector Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(logs): remove auto-scroll checkbox; ListToggle left of SortToggle - Drops the Logs auto-scroll checkbox and its plumbing through LoggingScreen / InspectorView. - Moves the ListToggle to the left of the SortToggle on the History and Network panel toolbars. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(sort): address review on #1372 - Hydrate sort direction synchronously (getInitialValueInEffect: false) to remove the one-frame newest-first flicker on first paint. - Drop the redundant `[...matched].sort()` copy across the three panels; `.filter()` already returns a fresh array. - Document why serializeSortDirection bypasses Mantine's default JSON stringify (raw enum value in storage). - MemoryStorage.getItem: collapse `has` + `!` to `?? null`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(history): default the request list to collapsed for parity with Network The History list opened expanded while Network opened collapsed; align History with Network so both panels start in the same compact view. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(history,network): persist list compact state to localStorage Lifts the per-panel `compact` flag out of HistoryListPanel / NetworkStreamPanel and into InspectorView's localStorage hooks, mirroring the sort-direction shape: inspector.listCompact.history inspector.listCompact.network Defaults to collapsed (compact=true) on both, with a corrupted-value deserializer that clamps unknown strings back to the default. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(servers,resources): persist ListToggle state to localStorage Lifts the per-screen compact preference out of ServerListScreen and ResourceControls into InspectorView's localStorage hooks, matching the History/Network shape: inspector.listCompact.servers inspector.listCompact.resources Servers and Resources both default to expanded (compact=false). For ResourceControls the displayed compact is still derived from openSections (so per-section accordion clicks still work locally), and only explicit ListToggle clicks update the persisted preference — the handler computes the next compact value from the click outcome rather than blindly flipping, so a half-open accordion still records the right post-state. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(sort-toggle): switch to icon button matching ListToggle style Replaces the Mantine Select with a subtle Button (or ActionIcon for the subtle variant), using TbSortDescending2 for newest-first and TbSortAscending2 for oldest-first. Clicking the button flips between the two values. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(sort-toggle): restore Select with sort icon in rightSection Reverts SortToggle to a Mantine Select with simplified labels ("Newest First" / "Oldest First") and the corresponding TbSortDescending2 / TbSortAscending2 icon in the rightSection, replacing the default chevron. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(sort-toggle): swap icons so they match label direction Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(sort-toggle): use down arrow for newest, up arrow for oldest Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(inspector-view): extract useSortDirection / useListCompact Collapses seven near-identical useLocalStorage call sites in InspectorView into two scoped helpers. Each helper carries the shared namespace, serialize/deserialize adapters, and getInitialValueInEffect: false; the call sites now read as "this screen has sort persisted to this scope" rather than re-stating the storage shape every time. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(sort-toggle): apply prettier formatting Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall
GitHub
parent
a7178280f0
commit
dd0f5de820
3 changed files with 812 additions and 117 deletions
|
|
@ -12,6 +12,10 @@ const meta: Meta<typeof NetworkStreamPanel> = {
|
|||
visibleCategories: { auth: true, transport: true },
|
||||
onClear: fn(),
|
||||
onExport: fn(),
|
||||
sortDirection: "newest-first",
|
||||
onSortChange: fn(),
|
||||
compact: true,
|
||||
onToggleCompact: fn(),
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@ const baseProps = {
|
|||
visibleCategories: { auth: true, transport: true } as const,
|
||||
onClear: vi.fn(),
|
||||
onExport: vi.fn(),
|
||||
sortDirection: "newest-first" as const,
|
||||
onSortChange: vi.fn(),
|
||||
compact: true,
|
||||
onToggleCompact: vi.fn(),
|
||||
};
|
||||
|
||||
describe("NetworkStreamPanel", () => {
|
||||
|
|
@ -124,14 +128,88 @@ describe("NetworkStreamPanel", () => {
|
|||
expect(screen.getByRole("button", { name: "Export" })).toBeDisabled();
|
||||
});
|
||||
|
||||
it("toggles between compact and expanded list views", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderWithMantine(<NetworkStreamPanel {...baseProps} />);
|
||||
// List starts compact -> entry should show Expand button
|
||||
it("renders entries collapsed when compact is true", () => {
|
||||
renderWithMantine(<NetworkStreamPanel {...baseProps} compact />);
|
||||
expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
|
||||
await user.click(screen.getByRole("button", { name: "Expand all" }));
|
||||
});
|
||||
|
||||
it("renders entries expanded when compact is false", () => {
|
||||
renderWithMantine(<NetworkStreamPanel {...baseProps} compact={false} />);
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Collapse" }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onToggleCompact when the ListToggle is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onToggleCompact = vi.fn();
|
||||
renderWithMantine(
|
||||
<NetworkStreamPanel {...baseProps} onToggleCompact={onToggleCompact} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Expand all" }));
|
||||
expect(onToggleCompact).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("renders entries newest-first by default", () => {
|
||||
const older: FetchRequestEntry = {
|
||||
...entry,
|
||||
id: "older",
|
||||
url: "https://example.com/older",
|
||||
timestamp: new Date("2026-03-17T09:00:00Z"),
|
||||
};
|
||||
const newer: FetchRequestEntry = {
|
||||
...entry,
|
||||
id: "newer",
|
||||
url: "https://example.com/newer",
|
||||
timestamp: new Date("2026-03-17T11:00:00Z"),
|
||||
};
|
||||
renderWithMantine(
|
||||
<NetworkStreamPanel {...baseProps} entries={[older, newer]} />,
|
||||
);
|
||||
const urls = screen.getAllByText(/example\.com\//);
|
||||
expect(urls[0]).toHaveTextContent("https://example.com/newer");
|
||||
expect(urls[urls.length - 1]).toHaveTextContent(
|
||||
"https://example.com/older",
|
||||
);
|
||||
});
|
||||
|
||||
it("reorders entries when sortDirection is oldest-first", () => {
|
||||
const older: FetchRequestEntry = {
|
||||
...entry,
|
||||
id: "older",
|
||||
url: "https://example.com/older",
|
||||
timestamp: new Date("2026-03-17T09:00:00Z"),
|
||||
};
|
||||
const newer: FetchRequestEntry = {
|
||||
...entry,
|
||||
id: "newer",
|
||||
url: "https://example.com/newer",
|
||||
timestamp: new Date("2026-03-17T11:00:00Z"),
|
||||
};
|
||||
renderWithMantine(
|
||||
<NetworkStreamPanel
|
||||
{...baseProps}
|
||||
entries={[newer, older]}
|
||||
sortDirection="oldest-first"
|
||||
/>,
|
||||
);
|
||||
const urls = screen.getAllByText(/example\.com\//);
|
||||
expect(urls[0]).toHaveTextContent("https://example.com/older");
|
||||
expect(urls[urls.length - 1]).toHaveTextContent(
|
||||
"https://example.com/newer",
|
||||
);
|
||||
});
|
||||
|
||||
it("invokes onSortChange when the user picks a new sort", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSortChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<NetworkStreamPanel {...baseProps} onSortChange={onSortChange} />,
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("textbox", { name: "Network sort direction" }),
|
||||
);
|
||||
await user.click(await screen.findByText("Oldest First"));
|
||||
expect(onSortChange).toHaveBeenCalledWith("oldest-first");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useMemo, useState } from "react";
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
Button,
|
||||
Group,
|
||||
|
|
@ -14,6 +14,10 @@ import type {
|
|||
} from "@inspector/core/mcp/types.js";
|
||||
import { NetworkEntry } from "../NetworkEntry/NetworkEntry";
|
||||
import { ListToggle } from "../../elements/ListToggle/ListToggle";
|
||||
import {
|
||||
SortToggle,
|
||||
type SortDirection,
|
||||
} from "../../elements/SortToggle/SortToggle";
|
||||
|
||||
export interface NetworkStreamPanelProps {
|
||||
entries: FetchRequestEntry[];
|
||||
|
|
@ -21,6 +25,10 @@ export interface NetworkStreamPanelProps {
|
|||
visibleCategories: Record<FetchRequestCategory, boolean>;
|
||||
onClear: () => void;
|
||||
onExport: () => void;
|
||||
sortDirection: SortDirection;
|
||||
onSortChange: (next: SortDirection) => void;
|
||||
compact: boolean;
|
||||
onToggleCompact: () => void;
|
||||
}
|
||||
|
||||
const PanelContainer = Paper.withProps({
|
||||
|
|
@ -82,14 +90,19 @@ export function NetworkStreamPanel({
|
|||
visibleCategories,
|
||||
onClear,
|
||||
onExport,
|
||||
sortDirection,
|
||||
onSortChange,
|
||||
compact,
|
||||
onToggleCompact,
|
||||
}: NetworkStreamPanelProps) {
|
||||
const [compact, setCompact] = useState(true);
|
||||
|
||||
const filteredEntries = useMemo(
|
||||
() =>
|
||||
entries.filter((e) => matchesFilters(e, filterText, visibleCategories)),
|
||||
[entries, filterText, visibleCategories],
|
||||
);
|
||||
const filteredEntries = useMemo(() => {
|
||||
// `.filter()` returns a fresh array, so sorting in-place is safe.
|
||||
const sorted = entries
|
||||
.filter((e) => matchesFilters(e, filterText, visibleCategories))
|
||||
.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
|
||||
if (sortDirection === "newest-first") sorted.reverse();
|
||||
return sorted;
|
||||
}, [entries, filterText, visibleCategories, sortDirection]);
|
||||
|
||||
const hasEntries = entries.length > 0;
|
||||
const hasResults = filteredEntries.length > 0;
|
||||
|
|
@ -100,11 +113,13 @@ export function NetworkStreamPanel({
|
|||
<Title order={4}>{formatTitle(filteredEntries.length)}</Title>
|
||||
<Group gap="xs">
|
||||
{hasResults && (
|
||||
<ListToggle
|
||||
compact={compact}
|
||||
onToggle={() => setCompact((c) => !c)}
|
||||
/>
|
||||
<ListToggle compact={compact} onToggle={onToggleCompact} />
|
||||
)}
|
||||
<SortToggle
|
||||
value={sortDirection}
|
||||
onChange={onSortChange}
|
||||
aria-label="Network sort direction"
|
||||
/>
|
||||
<Button variant="default" onClick={onClear} disabled={!hasEntries}>
|
||||
Clear
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue