Merge pull request #6305 from menloresearch/fix/mcp-edit-and-sort

fix: mcp cleanup dropodown tool availabel and sort list

web-app/src/hooks/useMCPServers.ts

@@ -27,6 +27,11 @@ type MCPServerStoreState = {
   setLeftPanel: (value: boolean) => void
   addServer: (key: string, config: MCPServerConfig) => void
   editServer: (key: string, config: MCPServerConfig) => void
+  renameServer: (
+    oldKey: string,
+    newKey: string,
+    config: MCPServerConfig
+  ) => void
   deleteServer: (key: string) => void
   setServers: (servers: MCPServers) => void
   syncServers: () => Promise<void>
@@ -47,7 +52,10 @@ export const useMCPServers = create<MCPServerStoreState>()((set, get) => ({
   // Add a new MCP server or update if the key already exists
   addServer: (key, config) =>
     set((state) => {
-      const mcpServers = { ...state.mcpServers, [key]: config }
+      // Remove the key first if it exists to maintain insertion order
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { [key]: _, ...restServers } = state.mcpServers
+      const mcpServers = { [key]: config, ...restServers }
       return { mcpServers }
     }),
 
@@ -60,6 +68,27 @@ export const useMCPServers = create<MCPServerStoreState>()((set, get) => ({
       const mcpServers = { ...state.mcpServers, [key]: config }
       return { mcpServers }
     }),
+
+  // Rename a server while preserving its position
+  renameServer: (oldKey, newKey, config) =>
+    set((state) => {
+      // Only proceed if the server exists
+      if (!state.mcpServers[oldKey]) return state
+
+      const entries = Object.entries(state.mcpServers)
+      const mcpServers: MCPServers = {}
+
+      // Rebuild the object with the same order, replacing the old key with the new key
+      entries.forEach(([key, serverConfig]) => {
+        if (key === oldKey) {
+          mcpServers[newKey] = config
+        } else {
+          mcpServers[key] = serverConfig
+        }
+      })
+
+      return { mcpServers }
+    }),
   setServers: (servers) =>
     set((state) => {
       const mcpServers = { ...state.mcpServers, ...servers }

web-app/src/routes/settings/mcp-servers.tsx

@@ -93,6 +93,7 @@ function MCPServers() {
     mcpServers,
     addServer,
     editServer,
+    renameServer,
     deleteServer,
     syncServers,
     syncServersAndRestart,
@@ -137,22 +138,27 @@ function MCPServers() {
   }
 
   const handleSaveServer = async (name: string, config: MCPServerConfig) => {
-    toggleServer(name, false)
     if (editingKey) {
-      // If server name changed, delete old one and add new one
+      // If server name changed, rename it while preserving position
       if (editingKey !== name) {
-        deleteServer(editingKey)
+        toggleServer(editingKey, false)
-        addServer(name, config)
+        renameServer(editingKey, name, config)
+        toggleServer(name, true)
+        // Restart servers to update tool references with new server name
+        syncServersAndRestart()
       } else {
+        toggleServer(editingKey, false)
         editServer(editingKey, config)
+        toggleServer(editingKey, true)
+        syncServers()
       }
     } else {
       // Add new server
+      toggleServer(name, false)
       addServer(name, config)
+      toggleServer(name, true)
+      syncServers()
     }
-
-    syncServers()
-    toggleServer(name, true)
   }
 
   const handleEdit = (serverKey: string) => {