fix(history): clear stale methodFilter on clear-all (#1237) (#1247)

When the user clicked Clear in the History screen with a method filter
applied, the filter persisted across the entry reset. Subsequent entries
of a different method then displayed as zero results because the now-
orphaned filter still applied.

Wraps onClearAll at the screen level to also reset methodFilter to
undefined (Option C from the issue) — narrow, no effects, no render-time
divergence between the displayed and applied filter.

Adds a play-driven story exercising the interaction.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall 2026-04-27 15:43:54 -04:00 • committed by GitHub
commit 9f452807f6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 3 deletions

View file

@ -1,6 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import type { MessageEntry } from "../../../../../../core/mcp/types.js";
import { fn } from "storybook/test";
import { expect, fn, screen, userEvent, within } from "storybook/test";
import { HistoryScreen } from "./HistoryScreen";
const meta: Meta<typeof HistoryScreen> = {
@ -124,3 +124,25 @@ export const Empty: Story = {
entries: [],
},
};
export const MethodFilterClearedOnClearAll: Story = {
args: {
entries: sampleEntries,
pinnedIds: new Set<string>(),
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const filter = canvas.getByPlaceholderText(
"All methods",
) as HTMLInputElement;
await userEvent.click(filter);
await userEvent.click(
await screen.findByRole("option", { name: "tools/call" }),
);
await expect(filter).toHaveValue("tools/call");
await userEvent.click(canvas.getByRole("button", { name: /^clear$/i }));
await expect(filter).toHaveValue("");
},
};

View file

@ -1,4 +1,4 @@
import { useMemo, useState } from "react";
import { useCallback, useMemo, useState } from "react";
import { Card, Flex, Stack } from "@mantine/core";
import type { MessageEntry, MessageMethod } from "@inspector/core/mcp/types.js";
import { HistoryControls } from "../../groups/HistoryControls/HistoryControls";
@ -47,6 +47,11 @@ export function HistoryScreen({
[entries],
);
const handleClearAll = useCallback(() => {
setMethodFilter(undefined);
onClearAll();
}, [onClearAll]);
return (
<ScreenLayout>
<Sidebar>
@ -65,7 +70,7 @@ export function HistoryScreen({
pinnedIds={pinnedIds}
searchText={searchText}
methodFilter={methodFilter}
onClearAll={onClearAll}
onClearAll={handleClearAll}
onExport={onExport}
onReplay={onReplay}
onTogglePin={onTogglePin}