@red-hat-developer-hub/backstage-plugin-intelligent-assistant 3.0.2 → 3.1.0

package/dist/components/McpServersSettings.esm.js

@@ -1,21 +1,18 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
 import { useApi, configApiRef, fetchApiRef } from '@backstage/core-plugin-api';
 import { usePermission } from '@backstage/plugin-permission-react';
 import { makeStyles } from '@material-ui/core';
-import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { Title, Button, Alert, Switch, Tooltip, Modal } from '@patternfly/react-core';
-import { TimesIcon, SortAmountDownIcon, SortAmountUpIcon, PencilAltIcon, LockIcon, KeyIcon, InfoCircleIcon, ExclamationCircleIcon, CheckCircleIcon } from '@patternfly/react-icons';
+import { Title, Button, Alert, Switch, Tooltip } from '@patternfly/react-core';
+import { TimesIcon, PencilAltIcon, SortAmountDownIcon, KeyIcon, InfoCircleIcon, ExclamationCircleIcon, CheckCircleIcon, SortAmountUpIcon } from '@patternfly/react-icons';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { lightspeedMcpManagePermission } from '@red-hat-developer-hub/backstage-plugin-intelligent-assistant-common';
+import { useMcpConfigureModal } from '../hooks/useMcpConfigureModal.esm.js';
 import { useTranslation } from '../hooks/useTranslation.esm.js';
+import { McpConfigureServerModal } from './McpConfigureServerModal.esm.js';
+import { formatApiError, getDisplayStatus, compareMcpServers, getDisplayDetail, getEnabledToggleChecked, isEnabledToggleUnavailable } from './mcpServersDisplayUtils.esm.js';
 
-const SAVED_TOKEN_MASK = "********************";
 const useStyles = makeStyles((theme) => ({
   "@global": {
     ".pf-v6-c-backdrop": {
@@ -68,6 +65,25 @@ const useStyles = makeStyles((theme) => ({
     display: "inline-flex",
     alignItems: "center"
   },
+  statusHeaderButton: {
+    paddingLeft: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    fontWeight: 600,
+    fontSize: "0.75rem",
+    lineHeight: "1.25rem",
+    minHeight: "auto",
+    color: theme.palette.text.primary,
+    textDecoration: "none !important",
+    display: "inline-flex",
+    alignItems: "center"
+  },
+  sortHeaderIconActive: {
+    color: "var(--pf-t--global--icon--color--brand--default)"
+  },
+  sortHeaderIconInactive: {
+    color: "var(--pf-t--global--icon--color--subtle)"
+  },
   nameHeaderText: {
     paddingLeft: "7px",
     fontSize: "0.75rem",
@@ -102,13 +118,13 @@ const useStyles = makeStyles((theme) => ({
     fontSize: "0.875rem"
   },
   statusOk: {
-    color: "#147878"
+    color: "var(--pf-t--global--icon--color--status--custom--default)"
   },
   statusWarn: {
-    color: "#B1380B"
+    color: "var(--pf-t--global--icon--color--status--danger--default)"
   },
   statusDisabled: {
-    color: theme.palette.type === "dark" ? "var(--pf-t--global--text--color--subtle, #c7c7c7)" : "var(--pf-t--global--text--color--subtle, #4d4d4d)"
+    color: "var(--pf-t--global--icon--color--subtle)"
   },
   actionButton: {
     color: theme.palette.text.secondary,
@@ -120,142 +136,6 @@ const useStyles = makeStyles((theme) => ({
       opacity: 1
     }
   },
-  modalDescription: {
-    color: theme.palette.text.secondary,
-    fontSize: "0.875rem",
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2)
-  },
-  modalContent: {
-    position: "relative",
-    padding: theme.spacing(3, 0, 3, 3),
-    marginRight: theme.spacing(3)
-  },
-  modalCustomCloseButton: {
-    position: "absolute",
-    top: theme.spacing(2),
-    right: theme.spacing(-0.5),
-    color: theme.palette.text.primary
-  },
-  modalHeading: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(0.75),
-    marginBottom: theme.spacing(1),
-    fontSize: "1.25rem",
-    lineHeight: 1.4,
-    fontWeight: 500,
-    "& .v5-MuiTypography-root": {
-      fontSize: "1.25rem",
-      lineHeight: 1.4,
-      fontWeight: 500
-    }
-  },
-  tokenRow: {
-    position: "relative"
-  },
-  tokenClearButton: {
-    position: "absolute",
-    right: theme.spacing(1),
-    top: "50%",
-    transform: "translateY(-50%)",
-    zIndex: 1,
-    color: theme.palette.action.active
-  },
-  tokenHelper: {
-    color: theme.palette.text.secondary,
-    fontSize: "0.75rem",
-    marginTop: theme.spacing(0.5)
-  },
-  tokenInput: {
-    marginTop: "1rem !important",
-    "& .MuiOutlinedInput-root": {
-      height: "3.5rem"
-    },
-    "& .MuiOutlinedInput-input": {
-      padding: "0 0.875rem"
-    },
-    "& .MuiInputLabel-root": {
-      fontSize: "0.875rem"
-    }
-  },
-  tokenInputSuccess: {
-    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
-      borderColor: "#3E8635",
-      borderWidth: 1
-    },
-    "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
-      borderColor: "#3E8635"
-    },
-    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
-      borderColor: "#3E8635"
-    },
-    "& .MuiInputLabel-root.Mui-focused": {
-      color: "#3E8635"
-    }
-  },
-  tokenInputError: {
-    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
-      borderColor: "#C9190B",
-      borderWidth: 1
-    },
-    "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
-      borderColor: "#C9190B"
-    },
-    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
-      borderColor: "#C9190B"
-    },
-    "& .MuiInputLabel-root.Mui-focused": {
-      color: "#C9190B"
-    }
-  },
-  modalActions: {
-    marginTop: theme.spacing(3),
-    display: "flex",
-    gap: theme.spacing(1)
-  },
-  modalActionButton: {
-    fontSize: "1rem"
-  },
-  modalCancelButton: {
-    fontSize: "1rem"
-  },
-  forgetTokenButton: {
-    fontSize: "1rem",
-    border: "1px solid #B1380B",
-    borderRadius: "1.25rem",
-    padding: "0.375rem 1rem",
-    color: "#B1380B",
-    backgroundColor: "transparent",
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1),
-    boxShadow: "none",
-    "&:hover": {
-      backgroundColor: "rgba(201, 25, 11, 0.08)"
-    }
-  },
-  configureModal: {
-    "& .pf-v6-c-modal-box": {
-      width: "608px",
-      maxWidth: "608px",
-      height: "326px",
-      minHeight: "326px"
-    },
-    "& .pf-v6-c-modal-box__title, & .pf-v6-c-modal-box__title-text, & .pf-v5-c-modal-box__title, & .pf-v5-c-modal-box__title-text": {
-      fontSize: "1.25rem !important",
-      lineHeight: "1.4 !important"
-    },
-    "& .pf-v6-c-modal-box__close": {
-      display: "none"
-    },
-    "& .pf-v5-c-modal-box__close": {
-      display: "none"
-    },
-    "& .pf-v6-c-button__icon": {
-      paddingTop: "5px !important",
-      fontSize: "1.25rem !important"
-    }
-  },
   toggleCell: {
     paddingRight: "0 !important"
   },
@@ -295,13 +175,6 @@ const getStatusIcon = (status, className) => {
     return /* @__PURE__ */ jsx(ExclamationCircleIcon, { className });
   return /* @__PURE__ */ jsx(CheckCircleIcon, { className });
 };
-const getDisplayStatus = (server) => {
-  if (!server.hasToken) return "tokenRequired";
-  if (!server.enabled) return "disabled";
-  if (server.status === "error") return "failed";
-  if (server.status === "connected") return "ok";
-  return "unknown";
-};
 const toUiServer = (server, validationError) => ({
   id: server.name,
   name: server.name,
@@ -311,6 +184,7 @@ const toUiServer = (server, validationError) => ({
   toolCount: server.toolCount,
   hasToken: server.hasToken,
   hasUserToken: server.hasUserToken,
+  hasOrgToken: server.hasOrgToken,
   validationError: server.status === "error" ? validationError : void 0,
   auth: server.auth
 });
@@ -327,16 +201,11 @@ const McpServersSettings = ({
   });
   const canManageMcp = mcpManagePermission.allowed;
   const [servers, setServers] = useState([]);
+  const [sortColumn, setSortColumn] = useState("name");
   const [sortAsc, setSortAsc] = useState(true);
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState({});
   const [error, setError] = useState(null);
-  const [editingServerId, setEditingServerId] = useState(null);
-  const [tokenInputValue, setTokenInputValue] = useState("");
-  const [hasSavedTokenInModal, setHasSavedTokenInModal] = useState(false);
-  const [canRemovePersonalToken, setCanRemovePersonalToken] = useState(false);
-  const [tokenValidationState, setTokenValidationState] = useState("idle");
-  const [tokenValidationMessage, setTokenValidationMessage] = useState("");
   const getBaseUrl = useCallback(() => {
     return `${configApi.getString("backend.baseUrl")}/api/intelligent-assistant`;
   }, [configApi]);
@@ -367,28 +236,34 @@ const McpServersSettings = ({
     },
     [fetchApi]
   );
-  const validateServer = useCallback(
+  const fetchServerValidation = useCallback(
     async (serverName) => {
       const baseUrl = getBaseUrl();
-      const data = await fetchJson(
+      return fetchJson(
         `${baseUrl}/mcp-servers/${encodeURIComponent(serverName)}/validate`,
         {
           method: "POST"
         }
       );
+    },
+    [fetchJson, getBaseUrl]
+  );
+  const validateServer = useCallback(
+    async (serverName) => {
+      const data = await fetchServerValidation(serverName);
       setServers(
         (prev) => prev.map(
           (server) => server.name === serverName ? {
             ...server,
             status: data.status,
             toolCount: data.toolCount,
-            validationError: data.status === "error" ? data.validation?.error ?? "Validation failed" : void 0
+            validationError: data.status === "error" ? formatApiError(data.validation?.error) || "Validation failed" : void 0
           } : server
         )
       );
       return data;
     },
-    [fetchJson, getBaseUrl]
+    [fetchServerValidation]
   );
   const validateCredentials = useCallback(
     async (url, token) => {
@@ -474,210 +349,43 @@ const McpServersSettings = ({
     },
     [canManageMcp, fetchJson, getBaseUrl, loadServers]
   );
-  const editingServer = useMemo(
-    () => servers.find((server) => server.id === editingServerId),
-    [servers, editingServerId]
-  );
-  const selectedCount = useMemo(
-    () => servers.filter((server) => {
-      const displayStatus = getDisplayStatus(server);
-      const isUnavailable = displayStatus === "failed" || displayStatus === "tokenRequired";
-      return server.enabled && !isUnavailable;
-    }).length,
-    [servers]
-  );
-  const sortedServers = useMemo(() => {
-    const next = [...servers];
-    next.sort(
-      (a, b) => sortAsc ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
-    );
-    return next;
-  }, [servers, sortAsc]);
-  const getDisplayDetail = useCallback(
-    (server, displayStatus) => {
-      if (displayStatus === "disabled")
-        return t("mcp.settings.status.disabled");
-      if (displayStatus === "tokenRequired")
-        return t("mcp.settings.status.tokenRequired");
-      if (displayStatus === "failed") return t("mcp.settings.status.failed");
-      if (displayStatus === "ok") {
-        if (server.toolCount === 1) {
-          return t("mcp.settings.status.oneTool", {
-            count: String(server.toolCount)
-          });
-        }
-        return t("mcp.settings.status.manyTools", {
-          count: String(server.toolCount)
-        });
-      }
-      return t("mcp.settings.status.unknown");
-    },
-    [t]
+  const configureModal = useMcpConfigureModal({
+    servers,
+    canManageMcp,
+    isSaving,
+    patchServer,
+    validateServer,
+    validateCredentials,
+    fetchServerValidation
+  });
+  const selectedCount = servers.filter((server) => {
+    const displayStatus = getDisplayStatus(server);
+    const isUnavailable = displayStatus === "failed" || displayStatus === "tokenRequired";
+    return server.enabled && !isUnavailable;
+  }).length;
+  const sortedServers = [...servers].sort(
+    (a, b) => compareMcpServers(a, b, sortColumn, sortAsc)
   );
-  const closeConfigureModal = useCallback(() => {
-    setEditingServerId(null);
-    setTokenInputValue("");
-    setHasSavedTokenInModal(false);
-    setCanRemovePersonalToken(false);
-    setTokenValidationState("idle");
-    setTokenValidationMessage("");
-  }, []);
-  const openConfigureModal = (server) => {
-    setEditingServerId(server.id);
-    const hasSavedToken = server.hasToken;
-    setHasSavedTokenInModal(hasSavedToken);
-    setCanRemovePersonalToken(server.hasUserToken);
-    setTokenInputValue(hasSavedToken ? SAVED_TOKEN_MASK : "");
-    if (server.status === "error" && server.validationError) {
-      setTokenValidationState("error");
-      setTokenValidationMessage(server.validationError);
-    } else {
-      setTokenValidationState("idle");
-      setTokenValidationMessage("");
-    }
-  };
-  const onTokenInputChange = (value) => {
-    if (hasSavedTokenInModal && value !== SAVED_TOKEN_MASK) {
-      setHasSavedTokenInModal(false);
-    }
-    setTokenInputValue(value);
-    setTokenValidationState("idle");
-    setTokenValidationMessage("");
-  };
-  const clearTokenInput = () => {
-    if (hasSavedTokenInModal) {
-      setHasSavedTokenInModal(false);
+  const onSortColumnClick = (column) => {
+    if (sortColumn === column) {
+      setSortAsc((prev) => !prev);
+      return;
     }
-    setTokenInputValue("");
-    setTokenValidationState("idle");
-    setTokenValidationMessage("");
+    setSortColumn(column);
+    setSortAsc(true);
   };
-  let tokenInputStateClass = "";
-  let tokenHelperColor;
-  if (tokenValidationState === "success") {
-    tokenInputStateClass = classes.tokenInputSuccess;
-    tokenHelperColor = "#3E8635";
-  } else if (tokenValidationState === "error") {
-    tokenInputStateClass = classes.tokenInputError;
-    tokenHelperColor = "#C9190B";
-  }
-  let tokenInputAdornment = /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      "aria-label": t("mcp.settings.token.clearAriaLabel"),
-      size: "small",
-      className: classes.tokenClearButton,
-      onClick: clearTokenInput,
-      children: /* @__PURE__ */ jsx(
-        CancelOutlinedIcon,
-        {
-          style: {
-            fontSize: 24,
-            width: 24,
-            height: 24
-          }
-        }
-      )
+  const renderSortIcon = (column) => {
+    const isActive = sortColumn === column;
+    let Icon = SortAmountDownIcon;
+    if (isActive && !sortAsc) {
+      Icon = SortAmountUpIcon;
     }
-  );
-  if (tokenValidationState === "success") {
-    tokenInputAdornment = /* @__PURE__ */ jsx(
-      CheckCircleIcon,
-      {
-        style: {
-          color: "#3E8635",
-          fontSize: 20,
-          width: 20,
-          height: 20,
-          marginRight: 3
-        }
-      }
-    );
-  } else if (tokenValidationState === "error") {
-    tokenInputAdornment = /* @__PURE__ */ jsx(
-      ExclamationCircleIcon,
+    return /* @__PURE__ */ jsx(
+      Icon,
       {
-        style: {
-          color: "#C9190B",
-          fontSize: 20,
-          width: 20,
-          height: 20,
-          marginRight: 3
-        }
+        className: isActive ? classes.sortHeaderIconActive : classes.sortHeaderIconInactive
       }
     );
-  }
-  const isUsingOrganizationCredentialInModal = hasSavedTokenInModal && !canRemovePersonalToken;
-  const saveServerToken = useCallback(async () => {
-    if (!editingServer || !canManageMcp) return;
-    if (hasSavedTokenInModal && tokenInputValue === SAVED_TOKEN_MASK) {
-      closeConfigureModal();
-      return;
-    }
-    const token = tokenInputValue.trim();
-    const hasToken = token.length > 0;
-    setTokenValidationState("validating");
-    setTokenValidationMessage(t("mcp.settings.token.validating"));
-    try {
-      if (hasToken) {
-        if (!editingServer.url) {
-          setTokenValidationState("error");
-          setTokenValidationMessage(
-            t("mcp.settings.token.urlUnavailableForValidation")
-          );
-          return;
-        }
-        const credentialValidation = await validateCredentials(
-          editingServer.url,
-          token
-        );
-        if (!credentialValidation.valid) {
-          setTokenValidationState("error");
-          setTokenValidationMessage(
-            credentialValidation.error ?? t("mcp.settings.token.invalidCredentials")
-          );
-          return;
-        }
-      }
-      setTokenValidationMessage(t("mcp.settings.token.savingAndValidating"));
-      await patchServer(editingServer.name, {
-        enabled: editingServer.enabled,
-        token: hasToken ? token : null
-      });
-      const validationResult = await validateServer(editingServer.name);
-      if (validationResult.status === "error") {
-        setTokenValidationState("error");
-        setTokenValidationMessage(
-          validationResult.validation?.error ?? t("mcp.settings.token.validationFailed")
-        );
-        return;
-      }
-      setTokenValidationState("success");
-      setTokenValidationMessage(t("mcp.settings.token.connectionSuccessful"));
-      closeConfigureModal();
-    } catch (e) {
-      setTokenValidationState("error");
-      setTokenValidationMessage(
-        e instanceof Error ? e.message : `Failed to update ${editingServer.name} token`
-      );
-    }
-  }, [
-    canManageMcp,
-    closeConfigureModal,
-    editingServer,
-    hasSavedTokenInModal,
-    patchServer,
-    t,
-    tokenInputValue,
-    validateCredentials,
-    validateServer
-  ]);
-  const removePersonalToken = () => {
-    setHasSavedTokenInModal(false);
-    setCanRemovePersonalToken(false);
-    setTokenInputValue("");
-    setTokenValidationState("idle");
-    setTokenValidationMessage("");
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -736,13 +444,23 @@ const McpServersSettings = ({
                   {
                     variant: "link",
                     className: classes.nameHeaderButton,
-                    icon: sortAsc ? /* @__PURE__ */ jsx(SortAmountDownIcon, {}) : /* @__PURE__ */ jsx(SortAmountUpIcon, {}),
+                    icon: renderSortIcon("name"),
                     iconPosition: "right",
-                    onClick: () => setSortAsc((prev) => !prev),
+                    onClick: () => onSortColumnClick("name"),
                     children: /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.nameHeaderText, children: t("mcp.settings.name") })
                   }
                 ) }),
-                /* @__PURE__ */ jsx(Th, { className: classes.statusHeader, children: t("mcp.settings.status") }),
+                /* @__PURE__ */ jsx(Th, { className: classes.statusHeader, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "link",
+                    className: classes.statusHeaderButton,
+                    icon: renderSortIcon("status"),
+                    iconPosition: "right",
+                    onClick: () => onSortColumnClick("status"),
+                    children: /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.nameHeaderText, children: t("mcp.settings.status") })
+                  }
+                ) }),
                 /* @__PURE__ */ jsx(Th, { screenReaderText: t("mcp.settings.edit") })
               ] }) }),
               /* @__PURE__ */ jsxs(Tbody, { children: [
@@ -750,7 +468,7 @@ const McpServersSettings = ({
                 !isLoading && sortedServers.length === 0 && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 4, children: t("mcp.settings.noneAvailable") }) }),
                 sortedServers.map((server) => {
                   const displayStatus = getDisplayStatus(server);
-                  const displayDetail = getDisplayDetail(server, displayStatus);
+                  const displayDetail = getDisplayDetail(server, displayStatus, t);
                   let statusClass = classes.statusWarn;
                   if (displayStatus === "ok") {
                     statusClass = classes.statusOk;
@@ -759,8 +477,11 @@ const McpServersSettings = ({
                   }
                   return /* @__PURE__ */ jsxs(Tr, { className: classes.tableRow, children: [
                     /* @__PURE__ */ jsx(Td, { width: 10, className: classes.toggleCell, children: (() => {
-                      const isUnavailable = displayStatus === "failed" || displayStatus === "tokenRequired";
-                      const isChecked = isUnavailable ? false : server.enabled;
+                      const isUnavailable = isEnabledToggleUnavailable(displayStatus);
+                      const isChecked = getEnabledToggleChecked(
+                        server,
+                        displayStatus
+                      );
                       const isRowSaving = Boolean(isSaving[server.name]);
                       const isToggleDisabled = isUnavailable || isRowSaving || !canManageMcp;
                       const switchControl = /* @__PURE__ */ jsx(
@@ -830,7 +551,7 @@ const McpServersSettings = ({
                         variant: "plain",
                         className: classes.actionButton,
                         isDisabled: !canManageMcp,
-                        onClick: () => openConfigureModal(server)
+                        onClick: () => configureModal.open(server)
                       }
                     ) })
                   ] }, server.id);
@@ -839,111 +560,7 @@ const McpServersSettings = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          Modal,
-          {
-            variant: "small",
-            title: t("mcp.settings.configureServerTitle", {
-              serverName: editingServer?.name ?? ""
-            }),
-            isOpen: Boolean(editingServer),
-            onClose: closeConfigureModal,
-            className: classes.configureModal,
-            children: /* @__PURE__ */ jsxs("div", { className: classes.modalContent, children: [
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  "aria-label": t("mcp.settings.closeConfigureModalAriaLabel"),
-                  size: "small",
-                  className: classes.modalCustomCloseButton,
-                  onClick: closeConfigureModal,
-                  children: /* @__PURE__ */ jsx(CloseOutlinedIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: classes.modalHeading, children: [
-                /* @__PURE__ */ jsx(LockIcon, {}),
-                /* @__PURE__ */ jsx(Typography, { component: "div", children: t("mcp.settings.configureServerTitle", {
-                  serverName: editingServer?.name ?? ""
-                }) })
-              ] }),
-              editingServer?.auth === "dcr" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("div", { className: classes.modalDescription, children: t("mcp.settings.modalDescriptionDcr") }),
-                /* @__PURE__ */ jsx("div", { className: classes.modalActions, children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "primary",
-                    onClick: closeConfigureModal,
-                    className: classes.modalActionButton,
-                    children: t("common.cancel")
-                  },
-                  "close"
-                ) })
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("div", { className: classes.modalDescription, children: t("mcp.settings.modalDescription") }),
-                /* @__PURE__ */ jsxs("div", { className: classes.tokenRow, children: [
-                  /* @__PURE__ */ jsx(
-                    TextField,
-                    {
-                      id: "mcp-pat-input",
-                      type: "password",
-                      variant: "outlined",
-                      fullWidth: true,
-                      value: tokenInputValue,
-                      onChange: (event) => onTokenInputChange(event.target.value),
-                      className: `${classes.tokenInput} ${tokenInputStateClass}`,
-                      label: hasSavedTokenInModal ? t("mcp.settings.savedToken") : t("mcp.settings.personalAccessToken"),
-                      InputProps: {
-                        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: tokenInputAdornment })
-                      }
-                    }
-                  ),
-                  (isUsingOrganizationCredentialInModal || !hasSavedTokenInModal || tokenValidationState !== "idle") && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: classes.tokenHelper,
-                      style: { color: tokenHelperColor },
-                      children: tokenValidationMessage || (isUsingOrganizationCredentialInModal ? t("mcp.settings.usingAdminCredential") : t("mcp.settings.enterToken"))
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: classes.modalActions, children: [
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "primary",
-                      onClick: () => void saveServerToken(),
-                      isDisabled: !canManageMcp || Boolean(isSaving[editingServer?.name ?? ""]) || tokenValidationState === "validating",
-                      className: classes.modalActionButton,
-                      children: t("modal.save")
-                    },
-                    "save"
-                  ),
-                  canRemovePersonalToken && hasSavedTokenInModal && /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "plain",
-                      onClick: removePersonalToken,
-                      isDisabled: !canManageMcp || Boolean(isSaving[editingServer?.name ?? ""]) || tokenValidationState === "validating",
-                      className: classes.forgetTokenButton,
-                      children: t("mcp.settings.removePersonalToken")
-                    },
-                    "forget-token"
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "link",
-                      onClick: closeConfigureModal,
-                      className: classes.modalCancelButton,
-                      children: t("common.cancel")
-                    },
-                    "cancel"
-                  )
-                ] })
-              ] })
-            ] })
-          }
-        )
+        /* @__PURE__ */ jsx(McpConfigureServerModal, { ...configureModal })
       ]
     }
   );