@replicated/portal-components 0.0.19 → 0.0.21

package/dist/service-accounts-tab.js

@@ -0,0 +1,802 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+
+// src/utils/format.ts
+function formatDate(dateString) {
+  if (!dateString) return "Never";
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) {
+    return dateString;
+  }
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+}
+
+// src/utils/constants.ts
+var DEFAULT_PRIMARY_COLOR = "#4f46e5";
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
+function useCopyToClipboard(resetDelay = 2e3) {
+  const [copied, setCopied] = react.useState(false);
+  const copy = react.useCallback(async (text) => {
+    if (!navigator.clipboard) {
+      console.warn("[useCopyToClipboard] Clipboard API not available");
+      return false;
+    }
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), resetDelay);
+      return true;
+    } catch (error) {
+      console.error("[useCopyToClipboard] Failed to copy:", error);
+      return false;
+    }
+  }, [resetDelay]);
+  return { copy, copied };
+}
+async function copyToClipboard(text) {
+  if (!navigator.clipboard) {
+    console.warn("[copyToClipboard] Clipboard API not available");
+    return false;
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch (error) {
+    console.error("[copyToClipboard] Failed to copy:", error);
+    return false;
+  }
+}
+function ServiceAccountsTab({
+  initialServiceAccounts,
+  initialTotal,
+  initialInstances,
+  primaryColor,
+  secondaryColor,
+  actions
+}) {
+  const [serviceAccounts, setServiceAccounts] = react.useState(initialServiceAccounts);
+  const [total, setTotal] = react.useState(initialTotal);
+  const [instances] = react.useState(initialInstances);
+  const [error, setError] = react.useState(null);
+  const [pageIndex, setPageIndex] = react.useState(0);
+  const [pageSize, setPageSize] = react.useState(25);
+  const [showRevoked, setShowRevoked] = react.useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = react.useState(false);
+  const [isTokenModalOpen, setIsTokenModalOpen] = react.useState(false);
+  const [isRevokeModalOpen, setIsRevokeModalOpen] = react.useState(false);
+  const [isRotateModalOpen, setIsRotateModalOpen] = react.useState(false);
+  const [isRotatedTokenModalOpen, setIsRotatedTokenModalOpen] = react.useState(false);
+  const [isInstancesModalOpen, setIsInstancesModalOpen] = react.useState(false);
+  const [selectedAccount, setSelectedAccount] = react.useState(null);
+  const [newToken, setNewToken] = react.useState("");
+  const [rotatedAccount, setRotatedAccount] = react.useState(null);
+  const [helmLoginCommand, setHelmLoginCommand] = react.useState("");
+  const [redeployHelm, setRedeployHelm] = react.useState([]);
+  const [openDropdown, setOpenDropdown] = react.useState(null);
+  const [dropdownPosition, setDropdownPosition] = react.useState(null);
+  const dropdownRefs = react.useRef({});
+  const handleOpenDropdown = (accountId) => {
+    const button = dropdownRefs.current[accountId];
+    if (button) {
+      const rect = button.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + 8,
+        right: window.innerWidth - rect.right
+      });
+      setOpenDropdown(accountId);
+    }
+  };
+  const handleCloseDropdown = () => {
+    setOpenDropdown(null);
+    setDropdownPosition(null);
+  };
+  const serviceAccountsWithInstances = react.useMemo(() => {
+    return serviceAccounts.map((account) => ({
+      ...account,
+      instanceCount: instances.filter((i) => i.serviceAccountId === account.id).length
+    }));
+  }, [serviceAccounts, instances]);
+  const refreshData = async (size = pageSize, offset = pageIndex * pageSize, includeRevoked = showRevoked) => {
+    setError(null);
+    try {
+      const result = await actions.fetchServiceAccounts(size, offset, includeRevoked);
+      setServiceAccounts(result.serviceAccounts);
+      setTotal(result.total);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch service accounts");
+    }
+  };
+  const handlePageChange = (newPageIndex) => {
+    setPageIndex(newPageIndex);
+    refreshData(pageSize, newPageIndex * pageSize, showRevoked);
+  };
+  const handlePageSizeChange = (newPageSize) => {
+    setPageSize(newPageSize);
+    setPageIndex(0);
+    refreshData(newPageSize, 0, showRevoked);
+  };
+  const handleShowRevokedChange = (value) => {
+    setShowRevoked(value);
+    setPageIndex(0);
+    refreshData(pageSize, 0, value);
+  };
+  const isRecentlyRotated = (dateString) => {
+    if (!dateString) return false;
+    const date = new Date(dateString);
+    const now = /* @__PURE__ */ new Date();
+    const hoursDiff = (now.getTime() - date.getTime()) / (1e3 * 60 * 60);
+    return hoursDiff < 24;
+  };
+  const getInstancesForAccount = (accountId) => {
+    return instances.filter((i) => i.serviceAccountId === accountId);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Service Accounts can call all APIs associated with the Enterprise Portal" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              id: "showRevokedCheckbox",
+              checked: showRevoked,
+              onChange: (e) => handleShowRevokedChange(e.target.checked),
+              className: "portal-checkbox cursor-pointer"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "showRevokedCheckbox", className: "text-sm text-gray-700 cursor-pointer", children: "Show revoked accounts" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setIsCreateModalOpen(true),
+            className: "px-4 py-2 text-white rounded-md font-medium text-sm transition-opacity duration-200 hover:opacity-90",
+            style: { backgroundColor: primaryColor || DEFAULT_PRIMARY_COLOR },
+            children: "Create Service Account"
+          }
+        )
+      ] })
+    ] }),
+    serviceAccountsWithInstances.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded-2xl border border-dashed border-gray-200 bg-gray-50 px-6 py-10 text-center text-sm text-gray-500", children: "No service accounts have been created yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white shadow-sm rounded-lg w-full overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "divide-y divide-gray-200 w-full table-fixed min-w-[900px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "w-[13%] px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Nickname" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "w-[9%] px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Last Accessed" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "w-[9%] px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "w-[16%] px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created By" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "w-[9%] px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Last Rotated" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "w-[8%] px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Instances" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "w-[6%] px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Token" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "w-[6%] px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "w-[6%] px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: serviceAccountsWithInstances.map((account) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 text-sm text-gray-900 truncate", title: account.accountName, children: account.accountName }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 text-sm text-gray-500", children: formatDate(account.lastUsedAt) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 text-sm text-gray-500", children: formatDate(account.createdAt) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 text-sm text-gray-500 truncate", title: account.emailAddress || void 0, children: account.emailAddress || "\u2014" }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 text-sm text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatDate(account.tokenRegeneratedAt) }),
+          isRecentlyRotated(account.tokenRegeneratedAt) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-blue-600", children: "Recently rotated" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 whitespace-nowrap text-sm", children: account.instanceCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              setSelectedAccount(account);
+              setIsInstancesModalOpen(true);
+            },
+            className: "text-blue-500 hover:underline cursor-pointer bg-transparent border-0 p-0",
+            children: [
+              account.instanceCount,
+              " active"
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "0 active" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 whitespace-nowrap text-sm", children: !account.isRevoked ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              setSelectedAccount(account);
+              setNewToken("");
+              setIsTokenModalOpen(true);
+            },
+            className: "hover:underline cursor-pointer bg-transparent border-0 p-0",
+            style: { color: secondaryColor || DEFAULT_SECONDARY_COLOR },
+            children: "View"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 cursor-not-allowed", children: "View" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 whitespace-nowrap text-sm", children: account.isRevoked ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "Revoked" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-500", children: "Active" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 whitespace-nowrap text-center text-sm font-medium", children: !account.isRevoked && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: (el) => {
+                dropdownRefs.current[account.id] = el;
+              },
+              onClick: () => openDropdown === account.id ? handleCloseDropdown() : handleOpenDropdown(account.id),
+              className: "bg-transparent border-0 p-0 cursor-pointer",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5 text-gray-500" })
+            }
+          ),
+          openDropdown === account.id && dropdownPosition && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-10", onClick: handleCloseDropdown }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "fixed z-20 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5",
+                style: { top: `${dropdownPosition.top}px`, right: `${dropdownPosition.right}px` },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+                  account.instanceCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => {
+                          setSelectedAccount(account);
+                          setIsInstancesModalOpen(true);
+                          handleCloseDropdown();
+                        },
+                        className: "w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",
+                        children: "View instances"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-100" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setSelectedAccount(account);
+                        setIsRotateModalOpen(true);
+                        handleCloseDropdown();
+                      },
+                      className: "w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",
+                      children: "Rotate token"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-100" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setSelectedAccount(account);
+                        setIsRevokeModalOpen(true);
+                        handleCloseDropdown();
+                      },
+                      className: "w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100",
+                      children: "Revoke"
+                    }
+                  )
+                ] })
+              }
+            )
+          ] })
+        ] }) })
+      ] }, account.id)) })
+    ] }) }),
+    total > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-3 bg-gray-50 border-t border-gray-200 rounded-b-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-700", children: [
+          "Showing ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: pageIndex * pageSize + 1 }),
+          " to",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: Math.min((pageIndex + 1) * pageSize, total) }),
+          " ",
+          "of ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: total }),
+          " results"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+            className: "portal-select text-sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 25, children: "25 per page" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 50, children: "50 per page" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 100, children: "100 per page" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handlePageChange(Math.max(0, pageIndex - 1)),
+            disabled: pageIndex === 0,
+            className: "px-3 py-1 text-white rounded-md font-medium text-sm transition-opacity duration-200 hover:opacity-90 disabled:opacity-50",
+            style: { backgroundColor: primaryColor || DEFAULT_PRIMARY_COLOR },
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handlePageChange(pageIndex + 1),
+            disabled: (pageIndex + 1) * pageSize >= total,
+            className: "px-3 py-1 text-white rounded-md font-medium text-sm transition-opacity duration-200 hover:opacity-90 disabled:opacity-50",
+            style: { backgroundColor: primaryColor || DEFAULT_PRIMARY_COLOR },
+            children: "Next"
+          }
+        )
+      ] })
+    ] }) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-red-50 border border-red-200 rounded-md p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5 text-red-400" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-red-800", children: "Error" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700", children: error })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CreateServiceAccountModal,
+      {
+        isOpen: isCreateModalOpen,
+        onClose: () => setIsCreateModalOpen(false),
+        onSuccess: (token) => {
+          setNewToken(token);
+          setIsCreateModalOpen(false);
+          setIsTokenModalOpen(true);
+          refreshData();
+        },
+        primaryColor,
+        createServiceAccount: actions.createServiceAccount
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ServiceAccountTokenModal,
+      {
+        isOpen: isTokenModalOpen,
+        onClose: () => {
+          setIsTokenModalOpen(false);
+          setSelectedAccount(null);
+          setNewToken("");
+        },
+        token: newToken || selectedAccount?.token || "",
+        accountName: selectedAccount?.accountName,
+        isNewToken: !!newToken
+      }
+    ),
+    selectedAccount && /* @__PURE__ */ jsxRuntime.jsx(
+      ServiceAccountInstancesModal,
+      {
+        isOpen: isInstancesModalOpen,
+        onClose: () => {
+          setIsInstancesModalOpen(false);
+          setSelectedAccount(null);
+        },
+        accountName: selectedAccount.accountName,
+        instances: getInstancesForAccount(selectedAccount.id)
+      }
+    ),
+    selectedAccount && /* @__PURE__ */ jsxRuntime.jsx(
+      RevokeServiceAccountModal,
+      {
+        isOpen: isRevokeModalOpen,
+        onClose: () => {
+          setIsRevokeModalOpen(false);
+          setSelectedAccount(null);
+        },
+        onSuccess: () => {
+          setIsRevokeModalOpen(false);
+          setSelectedAccount(null);
+          refreshData();
+        },
+        accountId: selectedAccount.id,
+        accountName: selectedAccount.accountName,
+        primaryColor,
+        revokeServiceAccount: actions.revokeServiceAccount
+      }
+    ),
+    selectedAccount && /* @__PURE__ */ jsxRuntime.jsx(
+      RotateServiceAccountModal,
+      {
+        isOpen: isRotateModalOpen,
+        onClose: () => {
+          setIsRotateModalOpen(false);
+          setSelectedAccount(null);
+        },
+        onSuccess: (result) => {
+          setIsRotateModalOpen(false);
+          setRotatedAccount(result.serviceAccount);
+          setHelmLoginCommand(result.helmLoginCommand);
+          setRedeployHelm(result.redeployHelm);
+          setSelectedAccount(null);
+          setIsRotatedTokenModalOpen(true);
+          refreshData();
+        },
+        account: selectedAccount,
+        instances: getInstancesForAccount(selectedAccount.id),
+        primaryColor,
+        rotateServiceAccountToken: actions.rotateServiceAccountToken
+      }
+    ),
+    rotatedAccount && /* @__PURE__ */ jsxRuntime.jsx(
+      RotatedTokenModal,
+      {
+        isOpen: isRotatedTokenModalOpen,
+        onClose: () => {
+          setIsRotatedTokenModalOpen(false);
+          setRotatedAccount(null);
+          setHelmLoginCommand("");
+          setRedeployHelm([]);
+        },
+        serviceAccount: rotatedAccount,
+        helmLoginCommand,
+        redeployHelm,
+        instances: instances.filter((i) => i.serviceAccountId === rotatedAccount.id),
+        primaryColor
+      }
+    )
+  ] });
+}
+function CreateServiceAccountModal({
+  isOpen,
+  onClose,
+  onSuccess,
+  primaryColor,
+  createServiceAccount
+}) {
+  const [name, setName] = react.useState("");
+  const [isSubmitting, setIsSubmitting] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  if (!isOpen) return null;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      const result = await createServiceAccount(name);
+      setName("");
+      onSuccess(result.token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create service account");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleClose = () => {
+    setName("");
+    setError(null);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-screen items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75", onClick: handleClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Create a Service Account" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClose, className: "text-gray-400 hover:text-gray-500 border-none bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "px-6 pb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 mb-4", children: "Create a service account with a descriptive nickname to identify its purpose." }),
+        error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm font-semibold mb-4", children: [
+          "Error: ",
+          error
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Key, { className: "absolute w-5 h-5 text-gray-400 pointer-events-none", style: { left: "12px", top: "50%", transform: "translateY(-50%)" } }),
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), className: "portal-input w-full pr-4 py-2.5", style: { paddingLeft: "44px" }, placeholder: "Nickname", required: true })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end space-x-3 mt-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleClose, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isSubmitting, className: "px-4 py-2 text-sm font-medium text-white rounded-md transition-opacity duration-200 hover:opacity-90 disabled:opacity-50", style: { backgroundColor: primaryColor || DEFAULT_PRIMARY_COLOR }, children: isSubmitting ? "Creating..." : "Create Service Account" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function ServiceAccountTokenModal({ isOpen, onClose, token, accountName, isNewToken }) {
+  const { copy, copied } = useCopyToClipboard();
+  if (!isOpen) return null;
+  const title = isNewToken ? "Service Account Created" : `${accountName} Token`;
+  const handleCopy = () => copy(token);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-screen items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75", onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-2xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-500 border-none bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-6 flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 mb-0", children: "This is your token, keep it in a secure location." }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg whitespace-pre-wrap break-all", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: token }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md inline-flex items-center gap-2", children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-green-600" }),
+            " Copied"
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }),
+            " Copy token"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md", children: "Close" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function ServiceAccountInstancesModal({ isOpen, onClose, accountName, instances }) {
+  if (!isOpen) return null;
+  const isInstanceActive = (instance) => {
+    const day = 24 * 60 * 60 * 1e3;
+    const lastCheckin = instance.lastCheckin ? new Date(instance.lastCheckin).getTime() : 0;
+    return lastCheckin > Date.now() - day;
+  };
+  const getInstanceName = (instance) => {
+    const nameTag = instance.tags?.find((t) => t.key === "name");
+    return nameTag?.value || instance.id;
+  };
+  const getInstanceTags = (instance) => instance.tags?.filter((t) => t.key !== "name") || [];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-screen items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75", onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-2xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-xl font-semibold text-gray-900", children: [
+          "Instances controlled by ",
+          accountName
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-500 border-none bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 pb-6", children: instances.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-gray-500", children: [
+        "No instances found for ",
+        accountName
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: instances.map((instance) => {
+        const tags = getInstanceTags(instance);
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[72px] pl-6 pr-3 rounded-lg border border-gray-200 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-2.5 w-2.5 rounded-full mr-6 flex-shrink-0 ${isInstanceActive(instance) ? "bg-green-500" : "bg-yellow-500"}` }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 mb-1", children: getInstanceName(instance) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-500", children: [
+              "Version ",
+              instance.versionLabel || "Unknown"
+            ] })
+          ] }),
+          tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 ml-6", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700", children: [
+            tag.key,
+            "=",
+            tag.value
+          ] }, tag.key)) })
+        ] }) }, instance.id);
+      }) }) })
+    ] })
+  ] }) });
+}
+function RevokeServiceAccountModal({ isOpen, onClose, onSuccess, accountId, accountName, primaryColor, revokeServiceAccount }) {
+  const [confirmName, setConfirmName] = react.useState("");
+  const [isRevoking, setIsRevoking] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  if (!isOpen) return null;
+  const handleRevoke = async () => {
+    setIsRevoking(true);
+    setError(null);
+    try {
+      await revokeServiceAccount(accountId);
+      setConfirmName("");
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to revoke service account");
+    } finally {
+      setIsRevoking(false);
+    }
+  };
+  const handleClose = () => {
+    setConfirmName("");
+    setError(null);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-screen items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75", onClick: handleClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Revoke service account" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClose, className: "text-gray-400 hover:text-gray-500 border-none bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 mb-4", children: "Are you sure you want to revoke this service account? This action cannot be undone." }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-gray-600 mb-4", children: [
+          "To confirm, please type the service account name: ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: accountName })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: confirmName, onChange: (e) => setConfirmName(e.target.value), placeholder: "Enter service account name", className: "portal-input w-full mb-4" }),
+        error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm font-semibold mb-4", children: [
+          "Error: ",
+          error
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end space-x-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClose, disabled: isRevoking, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md border border-gray-300", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleRevoke, disabled: confirmName !== accountName || isRevoking, className: "px-4 py-2 text-sm font-medium text-white rounded-md transition-opacity duration-200 hover:opacity-90 disabled:opacity-50", style: { backgroundColor: primaryColor || DEFAULT_PRIMARY_COLOR }, children: isRevoking ? "Revoking..." : "Revoke service account" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function RotateServiceAccountModal({ isOpen, onClose, onSuccess, account, instances, primaryColor, rotateServiceAccountToken }) {
+  const [confirmRotate, setConfirmRotate] = react.useState(false);
+  const [confirmText, setConfirmText] = react.useState("");
+  const [isRotating, setIsRotating] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  if (!isOpen) return null;
+  const requiredConfirmText = "Abandon instances and proceed anyways";
+  const hasOldECInstances = instances.some((i) => {
+    const v = i.embeddedClusterVersion;
+    if (!v) return false;
+    const m = v.match(/^v?(\d+)\.(\d+)\.(\d+)/);
+    if (!m || m.length < 4) return false;
+    const major = Number(m[1]);
+    const minor = Number(m[2]);
+    const patch = Number(m[3]);
+    return major < 2 || major === 2 && minor < 7 || major === 2 && minor === 7 && patch < 4;
+  });
+  const handleRotate = async () => {
+    setIsRotating(true);
+    setError(null);
+    try {
+      const result = await rotateServiceAccountToken(account.id);
+      onSuccess(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to rotate token");
+    } finally {
+      setIsRotating(false);
+    }
+  };
+  const handleClose = () => {
+    setConfirmRotate(false);
+    setConfirmText("");
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-screen items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75", onClick: handleClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Rotate Service Account Token" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClose, className: "text-gray-400 hover:text-gray-500 border-none bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-900 font-medium mb-2", children: "This will invalidate the current token" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-gray-600 mb-0", children: [
+              "Rotating the token for ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: account.accountName }),
+              " will immediately invalidate the existing token. Any systems using the current token will need to be updated with the new token."
+            ] })
+          ] })
+        ] }),
+        account.instanceCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-amber-50 border border-amber-200 rounded-md p-3 mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-amber-800 text-sm mb-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Warning:" }),
+          " This service account is being used by ",
+          account.instanceCount,
+          " active instance",
+          account.instanceCount > 1 ? "s" : "",
+          ". Make sure to update those instances with the new token."
+        ] }) }),
+        hasOldECInstances && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-red-50 border border-red-200 rounded-md p-3 mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-red-800 text-sm mb-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Warning:" }),
+            " Some instances are running Embedded Cluster versions older than 2.7.4. There is no way to rotate service accounts for these instances without first updating. If rotated, these instances can no longer be updated."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-red-800 mb-2", children: "Type the following to continue:" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-red-700 mb-2 italic", children: [
+              '"',
+              requiredConfirmText,
+              '"'
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: confirmText, onChange: (e) => setConfirmText(e.target.value), placeholder: "Type the text above exactly as shown", className: "portal-input w-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", id: "confirmRotateCheckbox", checked: confirmRotate, onChange: (e) => setConfirmRotate(e.target.checked), className: "portal-checkbox" }),
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirmRotateCheckbox", className: "text-sm text-gray-700 mb-0", children: "I understand that the current token will be invalidated" })
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm font-semibold mb-4", children: [
+          "Error: ",
+          error
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end space-x-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClose, disabled: isRotating, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md border border-gray-300", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleRotate, disabled: !confirmRotate || isRotating || hasOldECInstances && confirmText !== requiredConfirmText, className: "px-4 py-2 text-sm font-medium text-white rounded-md transition-opacity duration-200 hover:opacity-90 disabled:opacity-50", style: { backgroundColor: primaryColor || DEFAULT_PRIMARY_COLOR }, children: isRotating ? "Rotating..." : "Rotate token" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function RotatedTokenModal({ isOpen, onClose, serviceAccount, helmLoginCommand, redeployHelm, instances, primaryColor }) {
+  const [copiedField, setCopiedField] = react.useState(null);
+  if (!isOpen) return null;
+  const handleCopy = async (text, field) => {
+    const success = await copyToClipboard(text);
+    if (success) {
+      setCopiedField(field);
+      setTimeout(() => setCopiedField(null), 2e3);
+    }
+  };
+  const hasECInstances = instances.some((i) => !!i.embeddedClusterVersion);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-screen items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75", onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Token Rotated Successfully" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-500 border-none bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-6 flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-50 border border-green-200 rounded-md p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4 text-black mt-0.5 flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-black font-medium text-sm mb-1", children: [
+              "Token rotated for ",
+              serviceAccount.accountName
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-black text-sm mb-0", children: "The previous token has been invalidated. Use this new token for authentication." })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700", children: "New Service Account Token" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto cursor-pointer", onClick: () => handleCopy(serviceAccount.token, "token"), children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: serviceAccount.token }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleCopy(serviceAccount.token, "token"), className: "absolute top-2 right-2 p-2 text-gray-400 hover:text-gray-200 bg-transparent border-0", children: copiedField === "token" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-green-400" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Keep this token secure and update any systems that were using the previous token." })
+        ] }),
+        hasECInstances && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-50 border border-green-200 rounded-md p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 bg-green-500 rounded-full mt-0.5 flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-black font-medium text-sm mb-1", children: "Update Embedded Cluster Instances" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-black text-sm mb-0", children: "For instances running Embedded Cluster, upload the new service account token via the instance admin console's License tab to ensure continued access." })
+          ] })
+        ] }) }),
+        helmLoginCommand && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700", children: "Helm Registry Login Command" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto cursor-pointer", onClick: () => handleCopy(helmLoginCommand, "helm"), children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: helmLoginCommand }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleCopy(helmLoginCommand, "helm"), className: "absolute top-2 right-2 p-2 text-gray-400 hover:text-gray-200 bg-transparent border-0", children: copiedField === "helm" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-green-400" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Use this command to authenticate with the registry using your new token." })
+        ] }),
+        redeployHelm.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700 mb-2 block", children: "Redeploy Commands" }),
+          redeployHelm.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-yellow-50 border border-yellow-200 rounded-md p-3 mb-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-yellow-700 mb-2", children: "Since you have multiple instances, you may want to check which Helm charts are currently deployed on each instance to ensure you do not accidentally change chart versions:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-900 text-gray-100 p-2 rounded text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: "helm list" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: redeployHelm.map((commands, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-gray-600", children: [
+              "Instance ",
+              index + 1
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto cursor-pointer", onClick: () => handleCopy(commands, `redeploy-${index}`), children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: commands }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleCopy(commands, `redeploy-${index}`), className: "absolute top-2 right-2 p-2 text-gray-400 hover:text-gray-200 bg-transparent border-0", children: copiedField === `redeploy-${index}` ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-green-400" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Use this command to redeploy your Helm charts with the new service account token." })
+          ] }, index)) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, className: "px-4 py-2 text-white rounded-md font-medium transition-opacity duration-200 hover:opacity-90", style: { backgroundColor: primaryColor || DEFAULT_PRIMARY_COLOR }, children: "Done" }) })
+      ] })
+    ] })
+  ] }) });
+}
+
+exports.ServiceAccountsTab = ServiceAccountsTab;
+//# sourceMappingURL=service-accounts-tab.js.map
+//# sourceMappingURL=service-accounts-tab.js.map