From cc17ba8d569297414eac28f7e08bb3580ab98bb0 Mon Sep 17 00:00:00 2001
From: Kees Heuperman <cheuperman@gmail.com>
Date: Sun, 1 Dec 2024 09:50:53 +0100
Subject: [PATCH] feat: Add button to clear loaded items

Add a button to the ListPane component that clears loaded items. This
will allow the user to clear and reload resources, resource templates,
prompts or tools when they expect the available items to have changed.
---
 client/src/App.tsx                     | 16 ++++++++++++++++
 client/src/components/ListPane.tsx     | 10 ++++++++++
 client/src/components/PromptsTab.tsx   |  3 +++
 client/src/components/ResourcesTab.tsx |  6 ++++++
 client/src/components/ToolsTab.tsx     |  5 ++++-
 5 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 81ce70a..0ee234b 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -525,10 +525,18 @@ const App = () => {
                     clearError("resources");
                     listResources();
                   }}
+                  clearResources={() => {
+                    setResources([]);
+                    setNextResourceCursor(undefined);
+                  }}
                   listResourceTemplates={() => {
                     clearError("resources");
                     listResourceTemplates();
                   }}
+                  clearResourceTemplates={() => {
+                    setResourceTemplates([]);
+                    setNextResourceTemplateCursor(undefined);
+                  }}
                   readResource={(uri) => {
                     clearError("resources");
                     readResource(uri);
@@ -549,6 +557,10 @@ const App = () => {
                     clearError("prompts");
                     listPrompts();
                   }}
+                  clearPrompts={() => {
+                    setPrompts([]);
+                    setNextPromptCursor(undefined);
+                  }}
                   getPrompt={(name, args) => {
                     clearError("prompts");
                     getPrompt(name, args);
@@ -568,6 +580,10 @@ const App = () => {
                     clearError("tools");
                     listTools();
                   }}
+                  clearTools={() => {
+                    setTools([]);
+                    setNextToolCursor(undefined);
+                  }}
                   callTool={(name, params) => {
                     clearError("tools");
                     callTool(name, params);
diff --git a/client/src/components/ListPane.tsx b/client/src/components/ListPane.tsx
index 5fca6a4..90693dd 100644
--- a/client/src/components/ListPane.tsx
+++ b/client/src/components/ListPane.tsx
@@ -3,6 +3,7 @@ import { Button } from "./ui/button";
 type ListPaneProps<T> = {
   items: T[];
   listItems: () => void;
+  clearItems: () => void;
   setSelectedItem: (item: T) => void;
   renderItem: (item: T) => React.ReactNode;
   title: string;
@@ -13,6 +14,7 @@ type ListPaneProps<T> = {
 const ListPane = <T extends object>({
   items,
   listItems,
+  clearItems,
   setSelectedItem,
   renderItem,
   title,
@@ -32,6 +34,14 @@ const ListPane = <T extends object>({
       >
         {buttonText}
       </Button>
+      <Button
+        variant="outline"
+        className="w-full mb-4"
+        onClick={clearItems}
+        disabled={items.length === 0}
+      >
+        Clear
+      </Button>
       <div className="space-y-2 overflow-y-auto max-h-96">
         {items.map((item, index) => (
           <div
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 12645cf..df8b8a5 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -22,6 +22,7 @@ export type Prompt = {
 const PromptsTab = ({
   prompts,
   listPrompts,
+  clearPrompts,
   getPrompt,
   selectedPrompt,
   setSelectedPrompt,
@@ -31,6 +32,7 @@ const PromptsTab = ({
 }: {
   prompts: Prompt[];
   listPrompts: () => void;
+  clearPrompts: () => void;
   getPrompt: (name: string, args: Record<string, string>) => void;
   selectedPrompt: Prompt | null;
   setSelectedPrompt: (prompt: Prompt) => void;
@@ -55,6 +57,7 @@ const PromptsTab = ({
       <ListPane
         items={prompts}
         listItems={listPrompts}
+        clearItems={clearPrompts}
         setSelectedItem={(prompt) => {
           setSelectedPrompt(prompt);
           setPromptArgs({});
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index b1224f1..e948881 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -16,7 +16,9 @@ const ResourcesTab = ({
   resources,
   resourceTemplates,
   listResources,
+  clearResources,
   listResourceTemplates,
+  clearResourceTemplates,
   readResource,
   selectedResource,
   setSelectedResource,
@@ -28,7 +30,9 @@ const ResourcesTab = ({
   resources: Resource[];
   resourceTemplates: ResourceTemplate[];
   listResources: () => void;
+  clearResources: () => void;
   listResourceTemplates: () => void;
+  clearResourceTemplates: () => void;
   readResource: (uri: string) => void;
   selectedResource: Resource | null;
   setSelectedResource: (resource: Resource | null) => void;
@@ -68,6 +72,7 @@ const ResourcesTab = ({
       <ListPane
         items={resources}
         listItems={listResources}
+        clearItems={clearResources}
         setSelectedItem={(resource) => {
           setSelectedResource(resource);
           readResource(resource.uri);
@@ -90,6 +95,7 @@ const ResourcesTab = ({
       <ListPane
         items={resourceTemplates}
         listItems={listResourceTemplates}
+        clearItems={clearResourceTemplates}
         setSelectedItem={(template) => {
           setSelectedTemplate(template);
           setSelectedResource(null);
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 7b85ccc..1113ebc 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -18,6 +18,7 @@ import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js"
 const ToolsTab = ({
   tools,
   listTools,
+  clearTools,
   callTool,
   selectedTool,
   setSelectedTool,
@@ -27,6 +28,7 @@ const ToolsTab = ({
 }: {
   tools: Tool[];
   listTools: () => void;
+  clearTools: () => void;
   callTool: (name: string, params: Record<string, unknown>) => void;
   selectedTool: Tool | null;
   setSelectedTool: (tool: Tool) => void;
@@ -50,7 +52,7 @@ const ToolsTab = ({
             </pre>
             <h4 className="font-semibold mb-2">Errors:</h4>
             {parsedResult.error.errors.map((error, idx) => (
-              <pre 
+              <pre
                 key={idx}
                 className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64"
               >
@@ -108,6 +110,7 @@ const ToolsTab = ({
       <ListPane
         items={tools}
         listItems={listTools}
+        clearItems={clearTools}
         setSelectedItem={setSelectedTool}
         renderItem={(tool) => (
           <>