Refactor MCP Proxy components for improved state management and endpoint handling

Author: rasika2012

console/workspaces/libs/api-client/src/apis/scopes.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { httpDELETE, httpGET, httpPOST, httpPUT, SERVICE_BASE } from "../utils";
+import { encodeRequired, httpDELETE, httpGET, httpPOST, httpPUT, SERVICE_BASE } from "../utils";
 import type {
   ScopeListResponse,
   ScopeResponse,
@@ -69,10 +69,9 @@ export async function updateScope(
   getToken?: () => Promise<string>,
 ): Promise<ScopeResponse> {
   const { orgName = "default", scopeName } = params;
+  const scope = encodeRequired(scopeName, "scopeName");
   const token = getToken ? await getToken() : undefined;
-  const res = await httpPUT(
-    `${orgBase(orgName)}/${encodeURIComponent(scopeName ?? "")}`, body, { token },
-  );
+  const res = await httpPUT(`${orgBase(orgName)}/${scope}`, body, { token });
   if (!res.ok) throw await res.json();
   return res.json();
 }
@@ -86,9 +85,8 @@ export async function deleteScope(
   getToken?: () => Promise<string>,
 ): Promise<void> {
   const { orgName = "default", scopeName } = params;
+  const scope = encodeRequired(scopeName, "scopeName");
   const token = getToken ? await getToken() : undefined;
-  const res = await httpDELETE(
-    `${orgBase(orgName)}/${encodeURIComponent(scopeName ?? "")}`, { token },
-  );
+  const res = await httpDELETE(`${orgBase(orgName)}/${scope}`, { token });
   if (!res.ok && res.status !== 204) throw await res.json();
 }

console/workspaces/pages/env-thunders/src/subComponents/agentIdentity/RoleEditPage.tsx

@@ -133,8 +133,13 @@ export const RoleEditPage: React.FC = () => {
 
   useEffect(() => {
     if (!hasEditedScopes.current && catalogScopes.length > 0) {
-      const nameSet = new Set(initialScopeNames);
-      setSelectedScopes(catalogScopes.filter((s) => nameSet.has(s.name)));
+      const catalogByName = new Map(catalogScopes.map((s) => [s.name, s]));
+      // A scope assigned to this role may no longer be in the catalog (deleted
+      // or renamed) — keep it as a placeholder so it isn't silently dropped
+      // (and dirtied) on load, and stays in the payload if the role is saved.
+      setSelectedScopes(
+        initialScopeNames.map((name) => catalogByName.get(name) ?? { id: name, name }),
+      );
     }
   }, [initialScopeNames, catalogScopes]);
 

console/workspaces/pages/mcp-proxies/src/subComponents/EditMCPProxyDrawer.tsx

@@ -15,7 +15,7 @@
  * under the License.
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Alert,
   Box,
@@ -92,8 +92,16 @@ export function EditMCPProxyDrawer({
   const [addOpen, setAddOpen] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
 
+  const wasOpenRef = useRef(false);
+
   useEffect(() => {
-    if (!open) return;
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+    // Only (re)seed on the closed→open transition — proxy can change while the
+    // drawer is already open (e.g. a background refetch), and reseeding then
+    // would clobber whatever the user is mid-editing.
+    if (!justOpened) return;
+
     setFormData({
       name: proxy.name,
       version: proxy.version,

console/workspaces/pages/mcp-proxies/src/subComponents/EndpointFormFields.tsx

@@ -145,11 +145,13 @@ export function EndpointFormFields({
     setFetchedInfo(null);
   }, []);
 
-  const performFetch = useCallback(async () => {
-    // Guards against a debounced call landing while a previous fetch for this form
-    // is still in flight (e.g. a slow request outlasting the debounce window).
-    if (fetchServerInfo.isPending) return;
+  // Identifies the latest performFetch call whose network request should be allowed
+  // to update state. A slow request can still be in flight when the debounced URL/auth
+  // change fires the next one; without this, whichever resolves last wins, which isn't
+  // necessarily the latest input.
+  const fetchGenerationRef = useRef(0);
 
+  const performFetch = useCallback(async () => {
     const urlValidationError = validateEndpointUrl(trimmedUrl, {
       requiredMessage: "Enter a valid MCP Proxy endpoint URL.",
       invalidMessage: "Enter a valid MCP Proxy endpoint URL.",
@@ -186,13 +188,18 @@ export function EndpointFormFields({
         ? { url: trimmedUrl, auth: { type: "api-key" as const, header, value } }
         : { url: trimmedUrl };
 
+    const generation = ++fetchGenerationRef.current;
     try {
       const result = await fetchServerInfo.mutateAsync({
         params: { orgName: orgId },
         body,
       });
+      // A newer fetch was started while this one was in flight — its result (or
+      // the newer one still pending) takes precedence, so drop this stale one.
+      if (generation !== fetchGenerationRef.current) return;
       setFetchedInfo(result);
     } catch (err: unknown) {
+      if (generation !== fetchGenerationRef.current) return;
       setFetchedInfo(null);
       if (
         typeof err === "object" &&

console/workspaces/pages/mcp-proxies/src/subComponents/EndpointsEditorSection.tsx

@@ -15,13 +15,25 @@
  * under the License.
  */
 
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useMemo } from "react";
 import { Box, Button, Stack, Tooltip, Typography } from "@wso2/oxygen-ui";
 import { Plus } from "@wso2/oxygen-ui-icons-react";
 import type { Environment } from "@agent-management-platform/types";
 import { EndpointFormFields, type EndpointDraft } from "./EndpointFormFields";
 import { EndpointRow } from "./EndpointRow";
 
+// Backend endpoint ids are handles derived from a user-chosen display name
+// (lowercased, alphanumeric + hyphen — see GenerateHandle server-side), so a
+// simple counter like "1" can collide with a real endpoint's id. A UUID can't
+// collide in practice, keeping new drafts from being mistaken for — and
+// merged with — an existing endpoint's saved config on submit.
+function createDraftEndpointId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `draft-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
 export interface EndpointsEditorSectionProps {
   orgId: string;
   environments: Environment[];
@@ -54,8 +66,6 @@ export function EndpointsEditorSection({
   emptyStateText,
   onEndpointAdded,
 }: EndpointsEditorSectionProps) {
-  const endpointIdRef = useRef(1);
-
   const environmentLabels = useMemo(() => {
     const labels = new Map<string, string>();
     environments.forEach((env) => {
@@ -93,9 +103,7 @@ export function EndpointsEditorSection({
 
   const handleAddEndpoint = useCallback(
     (draft: Omit<EndpointDraft, "id">) => {
-      const id = String(endpointIdRef.current);
-      endpointIdRef.current += 1;
-      onEndpointsChange([...endpoints, { ...draft, id }]);
+      onEndpointsChange([...endpoints, { ...draft, id: createDraftEndpointId() }]);
       onEndpointAdded?.(draft);
       onAddOpenChange(false);
     },

console/workspaces/pages/mcp-proxies/src/subComponents/MCPProxySecurityTab.tsx

@@ -112,27 +112,37 @@ export function MCPProxySecurityTab({
   } | null>(null);
   const [fieldErrors, setFieldErrors] = useState<{ keyValue?: string }>({});
 
+  // Tracks what was last confirmed persisted (seeded from config, refreshed on
+  // save) rather than re-deriving "saved" straight from the config prop on
+  // every render — config only reflects a save once its background refetch
+  // lands, which would otherwise leave authIsDirty true for a beat after a
+  // successful save.
+  const lastSavedAuthRef = useRef<{
+    type: AuthenticationType;
+    key: string;
+    in: APIKeyLocation;
+  }>({ type: "apiKey", key: "", in: "header" });
+
   const authIsDirty = useMemo(() => {
     if (!config) return false;
-    const savedType = resolveAuthenticationType(config);
-    const savedKey = config.security?.apiKey?.key ?? "";
-    const savedIn = (config.security?.apiKey?.in as APIKeyLocation) ?? "header";
-    if (authenticationType !== savedType) return true;
-    if (keyValue.trim() !== savedKey) return true;
-    if (keyIn !== savedIn) return true;
+    const saved = lastSavedAuthRef.current;
+    if (authenticationType !== saved.type) return true;
+    if (keyValue.trim() !== saved.key) return true;
+    if (keyIn !== saved.in) return true;
     return false;
   }, [config, authenticationType, keyValue, keyIn]);
 
   useEffect(() => {
     if (!config || !selectedEndpointId) return;
     const nextType = resolveAuthenticationType(config);
+    const nextKey =
+      config.security?.apiKey?.key ?? (nextType === "apiKey" ? "X-API-Key" : "");
+    const nextIn = (config.security?.apiKey?.in as APIKeyLocation) ?? "header";
     setAuthenticationType(nextType);
-    setKeyValue(
-      config.security?.apiKey?.key ??
-      (nextType === "apiKey" ? "X-API-Key" : ""),
-    );
-    setKeyIn((config.security?.apiKey?.in as APIKeyLocation) ?? "header");
+    setKeyValue(nextKey);
+    setKeyIn(nextIn);
     setFieldErrors({});
+    lastSavedAuthRef.current = { type: nextType, key: nextKey, in: nextIn };
   }, [config, selectedEndpointId]);
 
   // --- Agent Identity: per-tool scope-binding (RBAC) state ---
@@ -363,6 +373,12 @@ export function MCPProxySecurityTab({
         toolScopeBindings: nextBindings,
       });
       lastSavedToolScopeRowsRef.current = savedToolScopeRows;
+      setToolScopeRows(savedToolScopeRows);
+      lastSavedAuthRef.current = {
+        type: authenticationType,
+        key: authenticationType === "apiKey" ? keyValue.trim() : "",
+        in: keyIn,
+      };
       setStatus({
         message: "Updated security settings.",
         severity: "success",

console/workspaces/pages/mcp-proxies/src/subComponents/ViewMCPProxy.tsx

@@ -69,27 +69,17 @@ import { MCPProxySecurityTab } from "./MCPProxySecurityTab";
 import { EditMCPProxyDrawer } from "./EditMCPProxyDrawer";
 import { useCopyWithFeedback } from "./useCopyWithFeedback";
 
-const TABS = [
-  "Overview",
-  "Capabilities",
-  "Connection",
-  "Manage Tools",
-  "Security",
-  "Rewrite",
-  "Policies",
-] as const;
-
-// URL-safe stand-ins for each tab, index-aligned with TABS, so the selected
-// tab (and environment, below) are shareable/deep-linkable and survive a
-// page reload instead of resetting to Overview/first-environment.
-const TAB_SLUGS = [
-  "overview",
-  "capabilities",
-  "connection",
-  "manage-tools",
-  "security",
-  "rewrite",
-  "policies",
+// slug is a URL-safe stand-in for each tab, so the selected tab (and
+// environment, below) are shareable/deep-linkable and survive a page reload
+// instead of resetting to Overview/first-environment.
+const TAB_DEFS = [
+  { label: "Overview", slug: "overview" },
+  { label: "Capabilities", slug: "capabilities" },
+  { label: "Connection", slug: "connection" },
+  { label: "Manage Tools", slug: "manage-tools" },
+  { label: "Security", slug: "security" },
+  { label: "Rewrite", slug: "rewrite" },
+  { label: "Policies", slug: "policies" },
 ] as const;
 
 export function ViewMCPProxy() {
@@ -99,7 +89,7 @@ export function ViewMCPProxy() {
 
   const tabSlug = searchParams.get("tab");
   const tabIndex = tabSlug
-    ? Math.max(0, TAB_SLUGS.indexOf(tabSlug as (typeof TAB_SLUGS)[number]))
+    ? Math.max(0, TAB_DEFS.findIndex((tab) => tab.slug === tabSlug))
     : 0;
   const selectedEndpointId = searchParams.get("endpoint") ?? "";
 
@@ -122,7 +112,7 @@ export function ViewMCPProxy() {
       setSearchParams(
         (prev) => {
           const next = new URLSearchParams(prev);
-          next.set("tab", TAB_SLUGS[value]);
+          next.set("tab", TAB_DEFS[value].slug);
           return next;
         },
         { replace: true },
@@ -373,8 +363,8 @@ export function ViewMCPProxy() {
                   sx={{ pr: 2 }}
                 >
                   <Tabs value={tabIndex} onChange={handleTabChange}>
-                    {TABS.map((tab) => (
-                      <Tab key={tab} label={tab} />
+                    {TAB_DEFS.map((tab) => (
+                      <Tab key={tab.slug} label={tab.label} />
                     ))}
                   </Tabs>
                   <Typography