@red-hat-developer-hub/backstage-plugin-intelligent-assistant 5.0.1 → 5.0.2

package/dist/components/McpServersSettings.esm.js

@@ -2,7 +2,8 @@ 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 GlobalStyles from '@mui/material/GlobalStyles';
+import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import { Title, Button, Alert, Switch, Tooltip } from '@patternfly/react-core';
 import { TimesIcon, PencilAltIcon, SortAmountDownIcon, KeyIcon, InfoCircleIcon, ExclamationCircleIcon, CheckCircleIcon, SortAmountUpIcon } from '@patternfly/react-icons';
@@ -13,24 +14,40 @@ 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 useStyles = makeStyles((theme) => ({
-  "@global": {
-    ".pf-v6-c-backdrop": {
-      zIndex: "1400 !important"
-    },
-    ".pf-v5-c-backdrop": {
-      zIndex: "1400 !important"
-    }
-  },
-  root: {
-    padding: 0,
-    height: "100%",
-    minHeight: 0,
-    flex: 1,
-    width: "100%",
-    overflow: "auto"
-  },
-  headerRow: {
+const mcpClasses = {
+  headerRow: "ia-mcp-headerRow",
+  selectedCount: "ia-mcp-selectedCount",
+  title: "ia-mcp-title",
+  closeButton: "ia-mcp-closeButton",
+  nameHeaderButton: "ia-mcp-nameHeaderButton",
+  statusHeaderButton: "ia-mcp-statusHeaderButton",
+  sortHeaderIconActive: "ia-mcp-sortHeaderIconActive",
+  sortHeaderIconInactive: "ia-mcp-sortHeaderIconInactive",
+  nameHeaderText: "ia-mcp-nameHeaderText",
+  nameCell: "ia-mcp-nameCell",
+  statusHeader: "ia-mcp-statusHeader",
+  statusColumnCell: "ia-mcp-statusColumnCell",
+  rowName: "ia-mcp-rowName",
+  nameValue: "ia-mcp-nameValue",
+  statusCell: "ia-mcp-statusCell",
+  statusValue: "ia-mcp-statusValue",
+  statusOk: "ia-mcp-statusOk",
+  statusWarn: "ia-mcp-statusWarn",
+  statusDisabled: "ia-mcp-statusDisabled",
+  actionButton: "ia-mcp-actionButton",
+  tableRow: "ia-mcp-tableRow",
+  toggleCell: "ia-mcp-toggleCell",
+  table: "ia-mcp-table",
+  alert: "ia-mcp-alert"
+};
+const StyledMcpRoot = styled("div")(({ theme }) => ({
+  padding: 0,
+  height: "100%",
+  minHeight: 0,
+  flex: 1,
+  width: "100%",
+  overflow: "auto",
+  [`& .${mcpClasses.headerRow}`]: {
     display: "flex",
     alignItems: "flex-start",
     justifyContent: "space-between",
@@ -39,20 +56,20 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(3),
     marginRight: theme.spacing(2)
   },
-  selectedCount: {
+  [`& .${mcpClasses.selectedCount}`]: {
     color: theme.palette.text.secondary,
     marginTop: theme.spacing(0.5),
     fontSize: "0.75rem"
   },
-  title: {
+  [`& .${mcpClasses.title}`]: {
     fontSize: "1.125rem"
   },
-  closeButton: {
-    marginTop: -theme.spacing(1),
-    marginRight: -theme.spacing(1),
+  [`& .${mcpClasses.closeButton}`]: {
+    marginTop: theme.spacing(-1),
+    marginRight: theme.spacing(-1),
     color: theme.palette.text.primary
   },
-  nameHeaderButton: {
+  [`& .${mcpClasses.nameHeaderButton}`]: {
     paddingLeft: 0,
     paddingTop: 0,
     paddingBottom: 0,
@@ -66,7 +83,7 @@ const useStyles = makeStyles((theme) => ({
     display: "inline-flex",
     alignItems: "center"
   },
-  statusHeaderButton: {
+  [`& .${mcpClasses.statusHeaderButton}`]: {
     paddingLeft: 0,
     paddingTop: 0,
     paddingBottom: 0,
@@ -79,68 +96,66 @@ const useStyles = makeStyles((theme) => ({
     display: "inline-flex",
     alignItems: "center"
   },
-  sortHeaderIconActive: {
+  [`& .${mcpClasses.sortHeaderIconActive}`]: {
     color: "var(--pf-t--global--icon--color--brand--default)"
   },
-  sortHeaderIconInactive: {
+  [`& .${mcpClasses.sortHeaderIconInactive}`]: {
     color: "var(--pf-t--global--icon--color--subtle)"
   },
-  nameHeaderText: {
+  [`& .${mcpClasses.nameHeaderText}`]: {
     paddingLeft: "7px",
     fontSize: "0.75rem",
     lineHeight: "1.25rem",
     fontWeight: 600
   },
-  nameCell: {
+  [`& .${mcpClasses.nameCell}`]: {
     paddingLeft: "8px !important"
   },
-  statusHeader: {
+  [`& .${mcpClasses.statusHeader}`]: {
     paddingLeft: "0 !important"
   },
-  statusColumnCell: {
+  [`& .${mcpClasses.statusColumnCell}`]: {
     paddingLeft: "0 !important"
   },
-  rowName: {
+  [`& .${mcpClasses.rowName}`]: {
     fontSize: "1rem",
     fontWeight: 500,
     whiteSpace: "nowrap"
   },
-  nameValue: {
+  [`& .${mcpClasses.nameValue}`]: {
     fontSize: "0.875rem",
     fontWeight: 500
   },
-  statusCell: {
+  [`& .${mcpClasses.statusCell}`]: {
     display: "flex",
     alignItems: "center",
     gap: theme.spacing(1),
     whiteSpace: "nowrap"
   },
-  statusValue: {
+  [`& .${mcpClasses.statusValue}`]: {
     fontSize: "0.875rem"
   },
-  statusOk: {
+  [`& .${mcpClasses.statusOk}`]: {
     color: "var(--pf-t--global--icon--color--status--custom--default)"
   },
-  statusWarn: {
+  [`& .${mcpClasses.statusWarn}`]: {
     color: "var(--pf-t--global--icon--color--status--danger--default)"
   },
-  statusDisabled: {
+  [`& .${mcpClasses.statusDisabled}`]: {
     color: "var(--pf-t--global--icon--color--subtle)"
   },
-  actionButton: {
+  [`& .${mcpClasses.actionButton}`]: {
     color: theme.palette.text.secondary,
     opacity: 0,
     transition: "opacity 0.15s ease-in-out"
   },
-  tableRow: {
-    "&:hover $actionButton, &:focus-within $actionButton": {
-      opacity: 1
-    }
+  [`& .${mcpClasses.tableRow}:hover .${mcpClasses.actionButton}, & .${mcpClasses.tableRow}:focus-within .${mcpClasses.actionButton}`]: {
+    opacity: 1
   },
-  toggleCell: {
+  [`& .${mcpClasses.toggleCell}`]: {
     paddingRight: "0 !important"
   },
-  table: {
+  [`& .${mcpClasses.table}`]: {
     width: "100%",
     backgroundColor: "transparent",
     "--pf-v6-c-table--BackgroundColor": "transparent",
@@ -163,7 +178,7 @@ const useStyles = makeStyles((theme) => ({
       verticalAlign: "middle"
     }
   },
-  alert: {
+  [`& .${mcpClasses.alert}`]: {
     marginLeft: theme.spacing(3),
     marginRight: theme.spacing(3),
     marginBottom: theme.spacing(2)
@@ -193,7 +208,6 @@ const McpServersSettings = ({
   onClose,
   backgroundColor
 }) => {
-  const classes = useStyles();
   const { t } = useTranslation();
   const configApi = useApi(configApiRef);
   const fetchApi = useApi(fetchApiRef);
@@ -384,187 +398,207 @@ const McpServersSettings = ({
     return /* @__PURE__ */ jsx(
       Icon,
       {
-        className: isActive ? classes.sortHeaderIconActive : classes.sortHeaderIconInactive
+        className: isActive ? mcpClasses.sortHeaderIconActive : mcpClasses.sortHeaderIconInactive
       }
     );
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classes.root,
-      style: backgroundColor ? { backgroundColor } : void 0,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: classes.headerRow, children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(Title, { headingLevel: "h2", size: "xl", className: classes.title, children: t("mcp.settings.title") }),
-            /* @__PURE__ */ jsx("div", { className: classes.selectedCount, children: t("mcp.settings.selectedCount", {
-              selectedCount: String(selectedCount),
-              totalCount: String(servers.length)
-            }) })
-          ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              "aria-label": t("mcp.settings.closeAriaLabel"),
-              icon: /* @__PURE__ */ jsx(TimesIcon, {}),
-              variant: "plain",
-              className: classes.closeButton,
-              onClick: onClose
-            }
-          )
-        ] }),
-        error && /* @__PURE__ */ jsx(
-          Alert,
-          {
-            variant: "danger",
-            isInline: true,
-            title: error,
-            className: classes.alert
-          }
-        ),
-        !mcpToolsPermission.loading && !canManageMcp && /* @__PURE__ */ jsx(
-          Alert,
-          {
-            variant: "info",
-            isInline: true,
-            title: t("mcp.settings.readOnlyAccess"),
-            className: classes.alert
+  return /* @__PURE__ */ jsxs(StyledMcpRoot, { style: backgroundColor ? { backgroundColor } : void 0, children: [
+    /* @__PURE__ */ jsx(
+      GlobalStyles,
+      {
+        styles: {
+          ".pf-v6-c-backdrop": {
+            zIndex: "1400 !important"
+          },
+          ".pf-v5-c-backdrop": {
+            zIndex: "1400 !important"
           }
-        ),
-        /* @__PURE__ */ jsxs(
-          Table,
-          {
-            variant: "compact",
-            "aria-label": t("mcp.settings.tableAriaLabel"),
-            className: classes.table,
-            children: [
-              /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
-                /* @__PURE__ */ jsx(Th, { width: 10, screenReaderText: t("mcp.settings.enabled") }),
-                /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(
-                  Button,
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: mcpClasses.headerRow, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Title, { headingLevel: "h2", size: "xl", className: mcpClasses.title, children: t("mcp.settings.title") }),
+        /* @__PURE__ */ jsx("div", { className: mcpClasses.selectedCount, children: t("mcp.settings.selectedCount", {
+          selectedCount: String(selectedCount),
+          totalCount: String(servers.length)
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": t("mcp.settings.closeAriaLabel"),
+          icon: /* @__PURE__ */ jsx(TimesIcon, {}),
+          variant: "plain",
+          className: mcpClasses.closeButton,
+          onClick: onClose
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx(
+      Alert,
+      {
+        variant: "danger",
+        isInline: true,
+        title: error,
+        className: mcpClasses.alert
+      }
+    ),
+    !mcpToolsPermission.loading && !canManageMcp && /* @__PURE__ */ jsx(
+      Alert,
+      {
+        variant: "info",
+        isInline: true,
+        title: t("mcp.settings.readOnlyAccess"),
+        className: mcpClasses.alert
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Table,
+      {
+        variant: "compact",
+        "aria-label": t("mcp.settings.tableAriaLabel"),
+        className: mcpClasses.table,
+        children: [
+          /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Th, { width: 10, screenReaderText: t("mcp.settings.enabled") }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "link",
+                className: mcpClasses.nameHeaderButton,
+                icon: renderSortIcon("name"),
+                iconPosition: "right",
+                onClick: () => onSortColumnClick("name"),
+                children: /* @__PURE__ */ jsx(
+                  Typography,
                   {
-                    variant: "link",
-                    className: classes.nameHeaderButton,
-                    icon: renderSortIcon("name"),
-                    iconPosition: "right",
-                    onClick: () => onSortColumnClick("name"),
-                    children: /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.nameHeaderText, children: t("mcp.settings.name") })
+                    component: "span",
+                    className: mcpClasses.nameHeaderText,
+                    children: t("mcp.settings.name")
                   }
-                ) }),
-                /* @__PURE__ */ jsx(Th, { className: classes.statusHeader, children: /* @__PURE__ */ jsx(
-                  Button,
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Th, { className: mcpClasses.statusHeader, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "link",
+                className: mcpClasses.statusHeaderButton,
+                icon: renderSortIcon("status"),
+                iconPosition: "right",
+                onClick: () => onSortColumnClick("status"),
+                children: /* @__PURE__ */ jsx(
+                  Typography,
                   {
-                    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") })
+                    component: "span",
+                    className: mcpClasses.nameHeaderText,
+                    children: t("mcp.settings.status")
                   }
-                ) }),
-                /* @__PURE__ */ jsx(Th, { screenReaderText: t("mcp.settings.edit") })
-              ] }) }),
-              /* @__PURE__ */ jsxs(Tbody, { children: [
-                isLoading && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 4, children: t("mcp.settings.loading") }) }),
-                !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, t);
-                  let statusClass = classes.statusWarn;
-                  if (displayStatus === "ok") {
-                    statusClass = classes.statusOk;
-                  } else if (displayStatus === "disabled") {
-                    statusClass = classes.statusDisabled;
-                  }
-                  return /* @__PURE__ */ jsxs(Tr, { className: classes.tableRow, children: [
-                    /* @__PURE__ */ jsx(Td, { width: 10, className: classes.toggleCell, children: (() => {
-                      const isUnavailable = isEnabledToggleUnavailable(displayStatus);
-                      const isChecked = getEnabledToggleChecked(
-                        server,
-                        displayStatus
-                      );
-                      const isRowSaving = Boolean(isSaving[server.name]);
-                      const isToggleDisabled = isUnavailable || isRowSaving || !canManageMcp;
-                      const switchControl = /* @__PURE__ */ jsx(
-                        Switch,
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Th, { screenReaderText: t("mcp.settings.edit") })
+          ] }) }),
+          /* @__PURE__ */ jsxs(Tbody, { children: [
+            isLoading && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 4, children: t("mcp.settings.loading") }) }),
+            !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, t);
+              let statusClass = mcpClasses.statusWarn;
+              if (displayStatus === "ok") {
+                statusClass = mcpClasses.statusOk;
+              } else if (displayStatus === "disabled") {
+                statusClass = mcpClasses.statusDisabled;
+              }
+              return /* @__PURE__ */ jsxs(Tr, { className: mcpClasses.tableRow, children: [
+                /* @__PURE__ */ jsx(Td, { width: 10, className: mcpClasses.toggleCell, children: (() => {
+                  const isUnavailable = isEnabledToggleUnavailable(displayStatus);
+                  const isChecked = getEnabledToggleChecked(
+                    server,
+                    displayStatus
+                  );
+                  const isRowSaving = Boolean(isSaving[server.name]);
+                  const isToggleDisabled = isUnavailable || isRowSaving || !canManageMcp;
+                  const switchControl = /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      id: `mcp-switch-${server.id}`,
+                      "aria-label": t(
+                        "mcp.settings.toggleServerAriaLabel",
                         {
-                          id: `mcp-switch-${server.id}`,
-                          "aria-label": t(
-                            "mcp.settings.toggleServerAriaLabel",
-                            {
-                              serverName: server.name
-                            }
-                          ),
-                          isChecked,
-                          isDisabled: isToggleDisabled,
-                          onChange: (_event, checked) => {
-                            void patchServer(server.name, {
-                              enabled: checked
-                            }).catch(() => {
-                            });
-                          }
+                          serverName: server.name
                         }
-                      );
-                      if (!isToggleDisabled) {
-                        return switchControl;
+                      ),
+                      isChecked,
+                      isDisabled: isToggleDisabled,
+                      onChange: (_event, checked) => {
+                        void patchServer(server.name, {
+                          enabled: checked
+                        }).catch(() => {
+                        });
                       }
-                      return /* @__PURE__ */ jsx(Tooltip, { content: displayDetail, children: /* @__PURE__ */ jsx(Typography, { component: "span", children: switchControl }) });
-                    })() }),
-                    /* @__PURE__ */ jsx(
-                      Td,
-                      {
-                        width: 35,
-                        className: `${classes.rowName} ${classes.nameCell}`,
-                        children: /* @__PURE__ */ jsx(Typography, { component: "span", className: classes.nameValue, children: server.name })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(Td, { width: 40, className: classes.statusColumnCell, children: /* @__PURE__ */ jsxs("div", { className: classes.statusCell, children: [
-                      getStatusIcon(displayStatus, statusClass),
-                      displayStatus === "failed" ? /* @__PURE__ */ jsx(
-                        Tooltip,
-                        {
-                          content: server.validationError ?? t("mcp.settings.token.validationFailed"),
-                          children: /* @__PURE__ */ jsx(
-                            Typography,
-                            {
-                              component: "span",
-                              className: classes.statusValue,
-                              children: displayDetail
-                            }
-                          )
-                        }
-                      ) : /* @__PURE__ */ jsx(
+                    }
+                  );
+                  if (!isToggleDisabled) {
+                    return switchControl;
+                  }
+                  return /* @__PURE__ */ jsx(Tooltip, { content: displayDetail, children: /* @__PURE__ */ jsx(Typography, { component: "span", children: switchControl }) });
+                })() }),
+                /* @__PURE__ */ jsx(
+                  Td,
+                  {
+                    width: 35,
+                    className: `${mcpClasses.rowName} ${mcpClasses.nameCell}`,
+                    children: /* @__PURE__ */ jsx(Typography, { component: "span", className: mcpClasses.nameValue, children: server.name })
+                  }
+                ),
+                /* @__PURE__ */ jsx(Td, { width: 40, className: mcpClasses.statusColumnCell, children: /* @__PURE__ */ jsxs("div", { className: mcpClasses.statusCell, children: [
+                  getStatusIcon(displayStatus, statusClass),
+                  displayStatus === "failed" ? /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      content: server.validationError ?? t("mcp.settings.token.validationFailed"),
+                      children: /* @__PURE__ */ jsx(
                         Typography,
                         {
                           component: "span",
-                          className: classes.statusValue,
+                          className: mcpClasses.statusValue,
                           children: displayDetail
                         }
                       )
-                    ] }) }),
-                    /* @__PURE__ */ jsx(Td, { width: 15, isActionCell: true, style: { textAlign: "right" }, children: /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        "aria-label": t("mcp.settings.editServerAriaLabel", {
-                          serverName: server.name
-                        }),
-                        icon: /* @__PURE__ */ jsx(PencilAltIcon, {}),
-                        variant: "plain",
-                        className: classes.actionButton,
-                        isDisabled: !canManageMcp,
-                        onClick: () => configureModal.open(server)
-                      }
-                    ) })
-                  ] }, server.id);
-                })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(McpConfigureServerModal, { ...configureModal })
-      ]
-    }
-  );
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      component: "span",
+                      className: mcpClasses.statusValue,
+                      children: displayDetail
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx(Td, { width: 15, isActionCell: true, style: { textAlign: "right" }, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": t("mcp.settings.editServerAriaLabel", {
+                      serverName: server.name
+                    }),
+                    icon: /* @__PURE__ */ jsx(PencilAltIcon, {}),
+                    variant: "plain",
+                    className: mcpClasses.actionButton,
+                    isDisabled: !canManageMcp,
+                    onClick: () => configureModal.open(server)
+                  }
+                ) })
+              ] }, server.id);
+            })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(McpConfigureServerModal, { ...configureModal })
+  ] });
 };
 
 export { McpServersSettings };