From 3d3925d02ad4513da71ee95f7b4a454e6e01d649 Mon Sep 17 00:00:00 2001
From: "lorenzo.neumann" <36760115+ln-12@users.noreply.github.com>
Date: Fri, 24 Oct 2025 14:01:30 +0200
Subject: [PATCH] Fixed metadata naming

---
 client/src/App.tsx                            | 10 +--
 client/src/components/MetaDataTab.tsx         | 10 +--
 .../components/__tests__/MetaDataTab.test.tsx | 80 +++++++++----------
 3 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 7f531471..0f8997bd 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -81,7 +81,7 @@ import {
   CustomHeaders,
   migrateFromLegacyAuth,
 } from "./lib/types/customHeaders";
-import MetaDataTab from "./components/MetaDataTab";
+import MetadataTab from "./components/MetadataTab";
 
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
@@ -197,14 +197,14 @@ const App = () => {
   const [authState, setAuthState] =
     useState<AuthDebuggerState>(EMPTY_DEBUGGER_STATE);
 
-  // Meta data state - persisted in localStorage
+  // Metadata state - persisted in localStorage
   const [metaData, setMetaData] = useState<Record<string, string>>(() => {
     const savedMetaData = localStorage.getItem("lastMetaData");
     if (savedMetaData) {
       try {
         return JSON.parse(savedMetaData);
       } catch (error) {
-        console.warn("Failed to parse saved meta data:", error);
+        console.warn("Failed to parse saved metadata:", error);
       }
     }
     return {};
@@ -1022,7 +1022,7 @@ const App = () => {
                 </TabsTrigger>
                 <TabsTrigger value="metadata">
                   <Settings className="w-4 h-4 mr-2" />
-                  Meta Data
+                  Metadata
                 </TabsTrigger>
               </TabsList>
 
@@ -1184,7 +1184,7 @@ const App = () => {
                       onRootsChange={handleRootsChange}
                     />
                     <AuthDebuggerWrapper />
-                    <MetaDataTab
+                    <MetadataTab
                       metaData={metaData}
                       onMetaDataChange={handleMetaDataChange}
                     />
diff --git a/client/src/components/MetaDataTab.tsx b/client/src/components/MetaDataTab.tsx
index c4cc6d21..eefedba4 100644
--- a/client/src/components/MetaDataTab.tsx
+++ b/client/src/components/MetaDataTab.tsx
@@ -10,12 +10,12 @@ interface MetaDataEntry {
   value: string;
 }
 
-interface MetaDataTabProps {
+interface MetadataTabProps {
   metaData: Record<string, string>;
   onMetaDataChange: (metaData: Record<string, string>) => void;
 }
 
-const MetaDataTab: React.FC<MetaDataTabProps> = ({
+const MetadataTab: React.FC<MetadataTabProps> = ({
   metaData,
   onMetaDataChange,
 }) => {
@@ -59,7 +59,7 @@ const MetaDataTab: React.FC<MetaDataTabProps> = ({
       <div className="space-y-4">
         <div className="flex items-center justify-between">
           <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">
               Key-value pairs that will be included in all MCP requests
             </p>
@@ -109,7 +109,7 @@ const MetaDataTab: React.FC<MetaDataTabProps> = ({
         {entries.length === 0 && (
           <div className="text-center py-8">
             <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>
           </div>
         )}
@@ -118,4 +118,4 @@ const MetaDataTab: React.FC<MetaDataTabProps> = ({
   );
 };
 
-export default MetaDataTab;
+export default MetadataTab;
diff --git a/client/src/components/__tests__/MetaDataTab.test.tsx b/client/src/components/__tests__/MetaDataTab.test.tsx
index e26d0b65..339e7015 100644
--- a/client/src/components/__tests__/MetaDataTab.test.tsx
+++ b/client/src/components/__tests__/MetaDataTab.test.tsx
@@ -1,18 +1,18 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import MetaDataTab from "../MetaDataTab";
+import MetadataTab from "../MetadataTab";
 import { Tabs } from "@/components/ui/tabs";
 
-describe("MetaDataTab", () => {
+describe("MetadataTab", () => {
   const defaultProps = {
     metaData: {},
     onMetaDataChange: jest.fn(),
   };
 
-  const renderMetaDataTab = (props = {}) => {
+  const renderMetadataTab = (props = {}) => {
     return render(
       <Tabs defaultValue="metadata">
-        <MetaDataTab {...defaultProps} {...props} />
+        <MetadataTab {...defaultProps} {...props} />
       </Tabs>,
     );
   };
@@ -23,9 +23,9 @@ describe("MetaDataTab", () => {
 
   describe("Initial Rendering", () => {
     it("should render the metadata tab with title and description", () => {
-      renderMetaDataTab();
+      renderMetadataTab();
 
-      expect(screen.getByText("Meta Data")).toBeInTheDocument();
+      expect(screen.getByText("Metadata")).toBeInTheDocument();
       expect(
         screen.getByText(
           "Key-value pairs that will be included in all MCP requests",
@@ -34,30 +34,30 @@ describe("MetaDataTab", () => {
     });
 
     it("should render Add Entry button", () => {
-      renderMetaDataTab();
+      renderMetadataTab();
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       expect(addButton).toBeInTheDocument();
     });
 
     it("should show empty state message when no entries exist", () => {
-      renderMetaDataTab();
+      renderMetadataTab();
 
       expect(
         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();
     });
 
     it("should not show empty state message when entries exist", () => {
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: { key1: "value1" },
       });
 
       expect(
         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();
     });
@@ -70,7 +70,7 @@ describe("MetaDataTab", () => {
         VERSION: "1.0.0",
       };
 
-      renderMetaDataTab({ metaData: initialMetaData });
+      renderMetadataTab({ metaData: initialMetaData });
 
       expect(screen.getByDisplayValue("API_KEY")).toBeInTheDocument();
       expect(screen.getByDisplayValue("test-key")).toBeInTheDocument();
@@ -85,7 +85,7 @@ describe("MetaDataTab", () => {
         THIRD: "third-value",
       };
 
-      renderMetaDataTab({ metaData: initialMetaData });
+      renderMetadataTab({ metaData: initialMetaData });
 
       const keyInputs = screen.getAllByPlaceholderText("Key");
       const valueInputs = screen.getAllByPlaceholderText("Value");
@@ -104,7 +104,7 @@ describe("MetaDataTab", () => {
 
   describe("Adding Entries", () => {
     it("should add a new empty entry when Add Entry button is clicked", () => {
-      renderMetaDataTab();
+      renderMetadataTab();
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -119,7 +119,7 @@ describe("MetaDataTab", () => {
     });
 
     it("should add multiple entries when Add Entry button is clicked multiple times", () => {
-      renderMetaDataTab();
+      renderMetadataTab();
 
       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", () => {
-      renderMetaDataTab();
+      renderMetadataTab();
 
       expect(
         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();
 
@@ -148,7 +148,7 @@ describe("MetaDataTab", () => {
 
       expect(
         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();
     });
@@ -156,7 +156,7 @@ describe("MetaDataTab", () => {
 
   describe("Removing Entries", () => {
     it("should render remove button for each entry", () => {
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: { key1: "value1", key2: "value2" },
       });
 
@@ -166,7 +166,7 @@ describe("MetaDataTab", () => {
 
     it("should remove entry when remove button is clicked", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: { key1: "value1", key2: "value2" },
         onMetaDataChange,
       });
@@ -179,7 +179,7 @@ describe("MetaDataTab", () => {
 
     it("should remove correct entry when multiple entries exist", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: {
           FIRST: "first-value",
           SECOND: "second-value",
@@ -199,7 +199,7 @@ describe("MetaDataTab", () => {
 
     it("should show empty state message after removing all entries", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: { key1: "value1" },
         onMetaDataChange,
       });
@@ -214,7 +214,7 @@ describe("MetaDataTab", () => {
   describe("Editing Entries", () => {
     it("should update key when key input is changed", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: { oldKey: "value1" },
         onMetaDataChange,
       });
@@ -227,7 +227,7 @@ describe("MetaDataTab", () => {
 
     it("should update value when value input is changed", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: { key1: "oldValue" },
         onMetaDataChange,
       });
@@ -240,7 +240,7 @@ describe("MetaDataTab", () => {
 
     it("should handle editing multiple entries independently", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: {
           key1: "value1",
           key2: "value2",
@@ -273,7 +273,7 @@ describe("MetaDataTab", () => {
   describe("Data Validation and Trimming", () => {
     it("should trim whitespace from keys and values", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({ onMetaDataChange });
+      renderMetadataTab({ onMetaDataChange });
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -291,7 +291,7 @@ describe("MetaDataTab", () => {
 
     it("should exclude entries with empty keys or values after trimming", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({ onMetaDataChange });
+      renderMetadataTab({ onMetaDataChange });
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -315,7 +315,7 @@ describe("MetaDataTab", () => {
 
     it("should exclude entries with whitespace-only keys or values", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({ onMetaDataChange });
+      renderMetadataTab({ onMetaDataChange });
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -339,7 +339,7 @@ describe("MetaDataTab", () => {
 
     it("should handle mixed valid and invalid entries", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({ onMetaDataChange });
+      renderMetadataTab({ onMetaDataChange });
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -370,7 +370,7 @@ describe("MetaDataTab", () => {
 
   describe("Input Accessibility", () => {
     it("should have proper labels for screen readers", () => {
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: { key1: "value1" },
       });
 
@@ -382,7 +382,7 @@ describe("MetaDataTab", () => {
     });
 
     it("should have unique IDs for each input pair", () => {
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: {
           key1: "value1",
           key2: "value2",
@@ -399,7 +399,7 @@ describe("MetaDataTab", () => {
     });
 
     it("should have proper placeholder text", () => {
-      renderMetaDataTab();
+      renderMetadataTab();
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -415,7 +415,7 @@ describe("MetaDataTab", () => {
   describe("Edge Cases", () => {
     it("should handle special characters in keys and values", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({ onMetaDataChange });
+      renderMetadataTab({ onMetaDataChange });
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -437,7 +437,7 @@ describe("MetaDataTab", () => {
 
     it("should handle unicode characters", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({ onMetaDataChange });
+      renderMetadataTab({ onMetaDataChange });
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -455,7 +455,7 @@ describe("MetaDataTab", () => {
 
     it("should handle very long keys and values", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({ onMetaDataChange });
+      renderMetadataTab({ onMetaDataChange });
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -476,7 +476,7 @@ describe("MetaDataTab", () => {
 
     it("should handle duplicate keys by keeping the last one", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({ onMetaDataChange });
+      renderMetadataTab({ onMetaDataChange });
 
       const addButton = screen.getByRole("button", { name: /add entry/i });
       fireEvent.click(addButton);
@@ -502,7 +502,7 @@ describe("MetaDataTab", () => {
   describe("Integration with Parent Component", () => {
     it("should not call onMetaDataChange when component mounts with existing data", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: { key1: "value1" },
         onMetaDataChange,
       });
@@ -512,7 +512,7 @@ describe("MetaDataTab", () => {
 
     it("should call onMetaDataChange only when user makes changes", () => {
       const onMetaDataChange = jest.fn();
-      renderMetaDataTab({
+      renderMetadataTab({
         metaData: { key1: "value1" },
         onMetaDataChange,
       });
@@ -529,7 +529,7 @@ describe("MetaDataTab", () => {
     });
 
     it("should maintain internal state when props change (component doesn't sync with prop changes)", () => {
-      const { rerender } = renderMetaDataTab({
+      const { rerender } = renderMetadataTab({
         metaData: { key1: "value1" },
       });
 
@@ -540,7 +540,7 @@ describe("MetaDataTab", () => {
       // This is the intended behavior since useState initializer only runs once
       rerender(
         <Tabs defaultValue="metadata">
-          <MetaDataTab
+          <MetadataTab
             metaData={{ key2: "value2", key3: "value3" }}
             onMetaDataChange={jest.fn()}
           />