modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Fixed metadata naming

Browse source
This commit is contained in:
lorenzo.neumann 2025-10-24 14:01:30 +02:00
commit 3d3925d02a
3 changed files with 50 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/App.tsx
View file

@ -81,7 +81,7 @@ import {
CustomHeaders, CustomHeaders,
migrateFromLegacyAuth, migrateFromLegacyAuth,
} from "./lib/types/customHeaders"; } from "./lib/types/customHeaders";
import MetaDataTab from "./components/MetaDataTab"; import MetadataTab from "./components/MetadataTab";
const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1"; const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
@ -197,14 +197,14 @@ const App = () => {
const [authState, setAuthState] = const [authState, setAuthState] =
useState<AuthDebuggerState>(EMPTY_DEBUGGER_STATE); useState<AuthDebuggerState>(EMPTY_DEBUGGER_STATE);
// Meta data state - persisted in localStorage // Metadata state - persisted in localStorage
const [metaData, setMetaData] = useState<Record<string, string>>(() => { const [metaData, setMetaData] = useState<Record<string, string>>(() => {
const savedMetaData = localStorage.getItem("lastMetaData"); const savedMetaData = localStorage.getItem("lastMetaData");
if (savedMetaData) { if (savedMetaData) {
try { try {
return JSON.parse(savedMetaData); return JSON.parse(savedMetaData);
} catch (error) { } catch (error) {
console.warn("Failed to parse saved meta data:", error); console.warn("Failed to parse saved metadata:", error);
} }
} }
return {}; return {};
@ -1022,7 +1022,7 @@ const App = () => {
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="metadata"> <TabsTrigger value="metadata">
<Settings className="w-4 h-4 mr-2" /> <Settings className="w-4 h-4 mr-2" />
Meta Data Metadata
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
@ -1184,7 +1184,7 @@ const App = () => {
onRootsChange={handleRootsChange} onRootsChange={handleRootsChange}
/> />
<AuthDebuggerWrapper /> <AuthDebuggerWrapper />
<MetaDataTab <MetadataTab
metaData={metaData} metaData={metaData}
onMetaDataChange={handleMetaDataChange} onMetaDataChange={handleMetaDataChange}
/> />

10
client/src/components/MetaDataTab.tsx
View file

@ -10,12 +10,12 @@ interface MetaDataEntry {
value: string; value: string;
} }
interface MetaDataTabProps { interface MetadataTabProps {
metaData: Record<string, string>; metaData: Record<string, string>;
onMetaDataChange: (metaData: Record<string, string>) => void; onMetaDataChange: (metaData: Record<string, string>) => void;
} }
const MetaDataTab: React.FC<MetaDataTabProps> = ({ const MetadataTab: React.FC<MetadataTabProps> = ({
metaData, metaData,
onMetaDataChange, onMetaDataChange,
}) => { }) => {
@ -59,7 +59,7 @@ const MetaDataTab: React.FC<MetaDataTabProps> = ({
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h3 className="text-lg font-semibold">Meta Data</h3> <h3 className="text-lg font-semibold">Metadata</h3>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Key-value pairs that will be included in all MCP requests Key-value pairs that will be included in all MCP requests
</p> </p>
@ -109,7 +109,7 @@ const MetaDataTab: React.FC<MetaDataTabProps> = ({
{entries.length === 0 && ( {entries.length === 0 && (
<div className="text-center py-8"> <div className="text-center py-8">
<p className="text-gray-500 dark:text-gray-400 mb-4"> <p className="text-gray-500 dark:text-gray-400 mb-4">
No meta data entries. Click "Add Entry" to add key-value pairs. No metadata entries. Click "Add Entry" to add key-value pairs.
</p> </p>
</div> </div>
)} )}
@ -118,4 +118,4 @@ const MetaDataTab: React.FC<MetaDataTabProps> = ({
); );
}; };
export default MetaDataTab; export default MetadataTab;

80
client/src/components/__tests__/MetaDataTab.test.tsx
View file

@ -1,18 +1,18 @@
import { render, screen, fireEvent } from "@testing-library/react"; import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom"; import "@testing-library/jest-dom";
import MetaDataTab from "../MetaDataTab"; import MetadataTab from "../MetadataTab";
import { Tabs } from "@/components/ui/tabs"; import { Tabs } from "@/components/ui/tabs";
describe("MetaDataTab", () => { describe("MetadataTab", () => {
const defaultProps = { const defaultProps = {
metaData: {}, metaData: {},
onMetaDataChange: jest.fn(), onMetaDataChange: jest.fn(),
}; };
const renderMetaDataTab = (props = {}) => { const renderMetadataTab = (props = {}) => {
return render( return render(
<Tabs defaultValue="metadata"> <Tabs defaultValue="metadata">
<MetaDataTab {...defaultProps} {...props} /> <MetadataTab {...defaultProps} {...props} />
</Tabs>, </Tabs>,
); );
}; };
@ -23,9 +23,9 @@ describe("MetaDataTab", () => {
describe("Initial Rendering", () => { describe("Initial Rendering", () => {
it("should render the metadata tab with title and description", () => { it("should render the metadata tab with title and description", () => {
renderMetaDataTab(); renderMetadataTab();
expect(screen.getByText("Meta Data")).toBeInTheDocument(); expect(screen.getByText("Metadata")).toBeInTheDocument();
expect( expect(
screen.getByText( screen.getByText(
"Key-value pairs that will be included in all MCP requests", "Key-value pairs that will be included in all MCP requests",
@ -34,30 +34,30 @@ describe("MetaDataTab", () => {
}); });
it("should render Add Entry button", () => { it("should render Add Entry button", () => {
renderMetaDataTab(); renderMetadataTab();
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
expect(addButton).toBeInTheDocument(); expect(addButton).toBeInTheDocument();
}); });
it("should show empty state message when no entries exist", () => { it("should show empty state message when no entries exist", () => {
renderMetaDataTab(); renderMetadataTab();
expect( expect(
screen.getByText( screen.getByText(
'No meta data entries. Click "Add Entry" to add key-value pairs.', 'No metadata entries. Click "Add Entry" to add key-value pairs.',
), ),
).toBeInTheDocument(); ).toBeInTheDocument();
}); });
it("should not show empty state message when entries exist", () => { it("should not show empty state message when entries exist", () => {
renderMetaDataTab({ renderMetadataTab({
metaData: { key1: "value1" }, metaData: { key1: "value1" },
}); });
expect( expect(
screen.queryByText( screen.queryByText(
'No meta data entries. Click "Add Entry" to add key-value pairs.', 'No metadata entries. Click "Add Entry" to add key-value pairs.',
), ),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
}); });
@ -70,7 +70,7 @@ describe("MetaDataTab", () => {
VERSION: "1.0.0", VERSION: "1.0.0",
}; };
renderMetaDataTab({ metaData: initialMetaData }); renderMetadataTab({ metaData: initialMetaData });
expect(screen.getByDisplayValue("API_KEY")).toBeInTheDocument(); expect(screen.getByDisplayValue("API_KEY")).toBeInTheDocument();
expect(screen.getByDisplayValue("test-key")).toBeInTheDocument(); expect(screen.getByDisplayValue("test-key")).toBeInTheDocument();
@ -85,7 +85,7 @@ describe("MetaDataTab", () => {
THIRD: "third-value", THIRD: "third-value",
}; };
renderMetaDataTab({ metaData: initialMetaData }); renderMetadataTab({ metaData: initialMetaData });
const keyInputs = screen.getAllByPlaceholderText("Key"); const keyInputs = screen.getAllByPlaceholderText("Key");
const valueInputs = screen.getAllByPlaceholderText("Value"); const valueInputs = screen.getAllByPlaceholderText("Value");
@ -104,7 +104,7 @@ describe("MetaDataTab", () => {
describe("Adding Entries", () => { describe("Adding Entries", () => {
it("should add a new empty entry when Add Entry button is clicked", () => { it("should add a new empty entry when Add Entry button is clicked", () => {
renderMetaDataTab(); renderMetadataTab();
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -119,7 +119,7 @@ describe("MetaDataTab", () => {
}); });
it("should add multiple entries when Add Entry button is clicked multiple times", () => { it("should add multiple entries when Add Entry button is clicked multiple times", () => {
renderMetaDataTab(); renderMetadataTab();
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
@ -135,11 +135,11 @@ describe("MetaDataTab", () => {
}); });
it("should hide empty state message after adding first entry", () => { it("should hide empty state message after adding first entry", () => {
renderMetaDataTab(); renderMetadataTab();
expect( expect(
screen.getByText( screen.getByText(
'No meta data entries. Click "Add Entry" to add key-value pairs.', 'No metadata entries. Click "Add Entry" to add key-value pairs.',
), ),
).toBeInTheDocument(); ).toBeInTheDocument();
@ -148,7 +148,7 @@ describe("MetaDataTab", () => {
expect( expect(
screen.queryByText( screen.queryByText(
'No meta data entries. Click "Add Entry" to add key-value pairs.', 'No metadata entries. Click "Add Entry" to add key-value pairs.',
), ),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
}); });
@ -156,7 +156,7 @@ describe("MetaDataTab", () => {
describe("Removing Entries", () => { describe("Removing Entries", () => {
it("should render remove button for each entry", () => { it("should render remove button for each entry", () => {
renderMetaDataTab({ renderMetadataTab({
metaData: { key1: "value1", key2: "value2" }, metaData: { key1: "value1", key2: "value2" },
}); });
@ -166,7 +166,7 @@ describe("MetaDataTab", () => {
it("should remove entry when remove button is clicked", () => { it("should remove entry when remove button is clicked", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ renderMetadataTab({
metaData: { key1: "value1", key2: "value2" }, metaData: { key1: "value1", key2: "value2" },
onMetaDataChange, onMetaDataChange,
}); });
@ -179,7 +179,7 @@ describe("MetaDataTab", () => {
it("should remove correct entry when multiple entries exist", () => { it("should remove correct entry when multiple entries exist", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ renderMetadataTab({
metaData: { metaData: {
FIRST: "first-value", FIRST: "first-value",
SECOND: "second-value", SECOND: "second-value",
@ -199,7 +199,7 @@ describe("MetaDataTab", () => {
it("should show empty state message after removing all entries", () => { it("should show empty state message after removing all entries", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ renderMetadataTab({
metaData: { key1: "value1" }, metaData: { key1: "value1" },
onMetaDataChange, onMetaDataChange,
}); });
@ -214,7 +214,7 @@ describe("MetaDataTab", () => {
describe("Editing Entries", () => { describe("Editing Entries", () => {
it("should update key when key input is changed", () => { it("should update key when key input is changed", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ renderMetadataTab({
metaData: { oldKey: "value1" }, metaData: { oldKey: "value1" },
onMetaDataChange, onMetaDataChange,
}); });
@ -227,7 +227,7 @@ describe("MetaDataTab", () => {
it("should update value when value input is changed", () => { it("should update value when value input is changed", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ renderMetadataTab({
metaData: { key1: "oldValue" }, metaData: { key1: "oldValue" },
onMetaDataChange, onMetaDataChange,
}); });
@ -240,7 +240,7 @@ describe("MetaDataTab", () => {
it("should handle editing multiple entries independently", () => { it("should handle editing multiple entries independently", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ renderMetadataTab({
metaData: { metaData: {
key1: "value1", key1: "value1",
key2: "value2", key2: "value2",
@ -273,7 +273,7 @@ describe("MetaDataTab", () => {
describe("Data Validation and Trimming", () => { describe("Data Validation and Trimming", () => {
it("should trim whitespace from keys and values", () => { it("should trim whitespace from keys and values", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ onMetaDataChange }); renderMetadataTab({ onMetaDataChange });
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -291,7 +291,7 @@ describe("MetaDataTab", () => {
it("should exclude entries with empty keys or values after trimming", () => { it("should exclude entries with empty keys or values after trimming", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ onMetaDataChange }); renderMetadataTab({ onMetaDataChange });
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -315,7 +315,7 @@ describe("MetaDataTab", () => {
it("should exclude entries with whitespace-only keys or values", () => { it("should exclude entries with whitespace-only keys or values", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ onMetaDataChange }); renderMetadataTab({ onMetaDataChange });
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -339,7 +339,7 @@ describe("MetaDataTab", () => {
it("should handle mixed valid and invalid entries", () => { it("should handle mixed valid and invalid entries", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ onMetaDataChange }); renderMetadataTab({ onMetaDataChange });
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -370,7 +370,7 @@ describe("MetaDataTab", () => {
describe("Input Accessibility", () => { describe("Input Accessibility", () => {
it("should have proper labels for screen readers", () => { it("should have proper labels for screen readers", () => {
renderMetaDataTab({ renderMetadataTab({
metaData: { key1: "value1" }, metaData: { key1: "value1" },
}); });
@ -382,7 +382,7 @@ describe("MetaDataTab", () => {
}); });
it("should have unique IDs for each input pair", () => { it("should have unique IDs for each input pair", () => {
renderMetaDataTab({ renderMetadataTab({
metaData: { metaData: {
key1: "value1", key1: "value1",
key2: "value2", key2: "value2",
@ -399,7 +399,7 @@ describe("MetaDataTab", () => {
}); });
it("should have proper placeholder text", () => { it("should have proper placeholder text", () => {
renderMetaDataTab(); renderMetadataTab();
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -415,7 +415,7 @@ describe("MetaDataTab", () => {
describe("Edge Cases", () => { describe("Edge Cases", () => {
it("should handle special characters in keys and values", () => { it("should handle special characters in keys and values", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ onMetaDataChange }); renderMetadataTab({ onMetaDataChange });
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -437,7 +437,7 @@ describe("MetaDataTab", () => {
it("should handle unicode characters", () => { it("should handle unicode characters", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ onMetaDataChange }); renderMetadataTab({ onMetaDataChange });
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -455,7 +455,7 @@ describe("MetaDataTab", () => {
it("should handle very long keys and values", () => { it("should handle very long keys and values", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ onMetaDataChange }); renderMetadataTab({ onMetaDataChange });
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -476,7 +476,7 @@ describe("MetaDataTab", () => {
it("should handle duplicate keys by keeping the last one", () => { it("should handle duplicate keys by keeping the last one", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ onMetaDataChange }); renderMetadataTab({ onMetaDataChange });
const addButton = screen.getByRole("button", { name: /add entry/i }); const addButton = screen.getByRole("button", { name: /add entry/i });
fireEvent.click(addButton); fireEvent.click(addButton);
@ -502,7 +502,7 @@ describe("MetaDataTab", () => {
describe("Integration with Parent Component", () => { describe("Integration with Parent Component", () => {
it("should not call onMetaDataChange when component mounts with existing data", () => { it("should not call onMetaDataChange when component mounts with existing data", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ renderMetadataTab({
metaData: { key1: "value1" }, metaData: { key1: "value1" },
onMetaDataChange, onMetaDataChange,
}); });
@ -512,7 +512,7 @@ describe("MetaDataTab", () => {
it("should call onMetaDataChange only when user makes changes", () => { it("should call onMetaDataChange only when user makes changes", () => {
const onMetaDataChange = jest.fn(); const onMetaDataChange = jest.fn();
renderMetaDataTab({ renderMetadataTab({
metaData: { key1: "value1" }, metaData: { key1: "value1" },
onMetaDataChange, onMetaDataChange,
}); });
@ -529,7 +529,7 @@ describe("MetaDataTab", () => {
}); });
it("should maintain internal state when props change (component doesn't sync with prop changes)", () => { it("should maintain internal state when props change (component doesn't sync with prop changes)", () => {
const { rerender } = renderMetaDataTab({ const { rerender } = renderMetadataTab({
metaData: { key1: "value1" }, metaData: { key1: "value1" },
}); });
@ -540,7 +540,7 @@ describe("MetaDataTab", () => {
// This is the intended behavior since useState initializer only runs once // This is the intended behavior since useState initializer only runs once
rerender( rerender(
<Tabs defaultValue="metadata"> <Tabs defaultValue="metadata">
<MetaDataTab <MetadataTab
metaData={{ key2: "value2", key3: "value3" }} metaData={{ key2: "value2", key3: "value3" }}
onMetaDataChange={jest.fn()} onMetaDataChange={jest.fn()}
/> />