@replicated/portal-components 0.0.21 → 0.0.22

package/dist/top-nav-menu-close.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Client component that adds click handlers to close the user menu dropdown
+ * when navigation links are clicked or when clicking outside. This runs after
+ * the server-rendered menu is mounted.
+ *
+ * Works with any <details> dropdown element in the page.
+ */
+declare function TopNavMenuClose(): null;
+
+export { TopNavMenuClose };

package/dist/top-nav-menu-close.js

@@ -0,0 +1,48 @@
+"use client";
+'use strict';
+
+var react = require('react');
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+function TopNavMenuClose() {
+  react.useEffect(() => {
+    const closeAllDetails = () => {
+      const openDetails = document.querySelectorAll("details[open]");
+      openDetails.forEach((details) => {
+        details.removeAttribute("open");
+      });
+    };
+    const handleLinkClick = () => {
+      closeAllDetails();
+    };
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const openDetails = document.querySelectorAll("details[open]");
+      openDetails.forEach((details) => {
+        if (!details.contains(target)) {
+          details.removeAttribute("open");
+        }
+      });
+    };
+    const menuLinks = document.querySelectorAll('details a[href^="/"]');
+    menuLinks.forEach((link) => {
+      link.addEventListener("click", handleLinkClick);
+    });
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      menuLinks.forEach((link) => {
+        link.removeEventListener("click", handleLinkClick);
+      });
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return null;
+}
+
+exports.TopNavMenuClose = TopNavMenuClose;
+//# sourceMappingURL=top-nav-menu-close.js.map
+//# sourceMappingURL=top-nav-menu-close.js.map

package/dist/top-nav-menu-close.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/top-nav-menu-close.tsx"],"names":["useEffect"],"mappings":";;;;;;;;;AAWO,SAAS,eAAA,GAAkB;AAChC,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,kBAAkB,MAAM;AAE5B,MAAA,MAAM,WAAA,GAAc,QAAA,CAAS,gBAAA,CAAiB,eAAe,CAAA;AAC7D,MAAA,WAAA,CAAY,OAAA,CAAQ,CAAC,OAAA,KAAY;AAC/B,QAAA,OAAA,CAAQ,gBAAgB,MAAM,CAAA;AAAA,MAChC,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,eAAA,EAAgB;AAAA,IAClB,CAAA;AAEA,IAAA,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAAsB;AAChD,MAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AAErB,MAAA,MAAM,WAAA,GAAc,QAAA,CAAS,gBAAA,CAAiB,eAAe,CAAA;AAC7D,MAAA,WAAA,CAAY,OAAA,CAAQ,CAAC,OAAA,KAAY;AAC/B,QAAA,IAAI,CAAC,OAAA,CAAQ,QAAA,CAAS,MAAM,CAAA,EAAG;AAC7B,UAAA,OAAA,CAAQ,gBAAgB,MAAM,CAAA;AAAA,QAChC;AAAA,MACF,CAAC,CAAA;AAAA,IACH,CAAA;AAGA,IAAA,MAAM,SAAA,GAAY,QAAA,CAAS,gBAAA,CAAiB,sBAAsB,CAAA;AAClE,IAAA,SAAA,CAAU,OAAA,CAAQ,CAAC,IAAA,KAAS;AAC1B,MAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,eAAe,CAAA;AAAA,IAChD,CAAC,CAAA;AAGD,IAAA,QAAA,CAAS,gBAAA,CAAiB,aAAa,kBAAkB,CAAA;AAGzD,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAA,CAAQ,CAAC,IAAA,KAAS;AAC1B,QAAA,IAAA,CAAK,mBAAA,CAAoB,SAAS,eAAe,CAAA;AAAA,MACnD,CAAC,CAAA;AACD,MAAA,QAAA,CAAS,mBAAA,CAAoB,aAAa,kBAAkB,CAAA;AAAA,IAC9D,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,IAAA;AACT","file":"top-nav-menu-close.js","sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\n/**\n * Client component that adds click handlers to close the user menu dropdown\n * when navigation links are clicked or when clicking outside. This runs after \n * the server-rendered menu is mounted.\n * \n * Works with any <details> dropdown element in the page.\n */\nexport function TopNavMenuClose() {\n  useEffect(() => {\n    const closeAllDetails = () => {\n      // Find all open details elements and close them\n      const openDetails = document.querySelectorAll(\"details[open]\");\n      openDetails.forEach((details) => {\n        details.removeAttribute(\"open\");\n      });\n    };\n\n    const handleLinkClick = () => {\n      closeAllDetails();\n    };\n\n    const handleClickOutside = (event: MouseEvent) => {\n      const target = event.target as Node;\n      // Check if click is outside all details elements\n      const openDetails = document.querySelectorAll(\"details[open]\");\n      openDetails.forEach((details) => {\n        if (!details.contains(target)) {\n          details.removeAttribute(\"open\");\n        }\n      });\n    };\n\n    // Add click handlers to all links in dropdown menus\n    const menuLinks = document.querySelectorAll('details a[href^=\"/\"]');\n    menuLinks.forEach((link) => {\n      link.addEventListener(\"click\", handleLinkClick);\n    });\n\n    // Add click-outside handler\n    document.addEventListener(\"mousedown\", handleClickOutside);\n\n    // Cleanup\n    return () => {\n      menuLinks.forEach((link) => {\n        link.removeEventListener(\"click\", handleLinkClick);\n      });\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, []);\n\n  return null;\n}\n"]}

package/dist/top-nav.js

@@ -3,6 +3,7 @@
 var Link = require('next/link');
 var buffer = require('buffer');
 var react = require('react');
+var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -26,6 +27,71 @@ __export(tracer_exports, {
 });
 var tracer_default;
 
+// src/utils/api-client.ts
+async function authenticatedFetch(url, options = {}) {
+  const { token, ...fetchOptions } = options;
+  const headers = new Headers(fetchOptions.headers);
+  if (token) {
+    headers.set("authorization", `Bearer ${token}`);
+  }
+  const response = await fetch(url, {
+    ...fetchOptions,
+    headers
+  });
+  if (response.status === 401) {
+    await handle401();
+  }
+  if (response.status === 502 || response.status === 503 || response.status === 504) {
+    await handleServerError(response.status);
+  }
+  return response;
+}
+async function handle401() {
+  const { redirect } = await import('next/navigation');
+  return redirect("/?expired=1");
+}
+function isErrorPage(url) {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.pathname === "/error";
+  } catch {
+    return url === "/error" || url.startsWith("/error?");
+  }
+}
+async function handleServerError(statusCode) {
+  const { redirect } = await import('next/navigation');
+  const { cookies } = await import('next/headers');
+  let sourceUrl;
+  try {
+    const { headers } = await import('next/headers');
+    const headersList = await headers();
+    const referer = headersList.get("referer");
+    const host = headersList.get("host");
+    const pathname = headersList.get("x-invoke-path") || headersList.get("x-forwarded-path");
+    if (referer && !isErrorPage(referer)) {
+      sourceUrl = referer;
+    } else if (host && pathname) {
+      const protocol = headersList.get("x-forwarded-proto") || "https";
+      sourceUrl = `${protocol}://${host}${pathname}`;
+    }
+    if (!sourceUrl || isErrorPage(sourceUrl)) {
+      const cookieStore = await cookies();
+      const preservedSource = cookieStore.get("portal_error_source");
+      if (preservedSource?.value) {
+        sourceUrl = decodeURIComponent(preservedSource.value);
+        cookieStore.delete("portal_error_source");
+      }
+    }
+  } catch (error) {
+    console.debug("[portal-components] Could not determine source URL", error);
+  }
+  const params = new URLSearchParams({ code: String(statusCode) });
+  if (sourceUrl) {
+    params.set("source", sourceUrl);
+  }
+  return redirect(`/error?${params.toString()}`);
+}
+
 // src/utils/constants.ts
 var DEFAULT_PRIMARY_COLOR = "#4f46e5";
 var DEFAULT_SECONDARY_COLOR = "#6366f1";
@@ -154,6 +220,84 @@ var fetchCustomBrandingImpl = async () => {
   };
 };
 var fetchCustomBranding = react.cache(fetchCustomBrandingImpl);
+var fetchDocumentationImpl = async () => {
+  const { cookies } = await import('next/headers');
+  const sessionStore = await cookies();
+  const session = sessionStore.get("portal_session");
+  const token = session?.value;
+  if (!token) {
+    throw new Error("Authentication required");
+  }
+  const url = `${getApiOrigin()}/enterprise-portal/documentation`;
+  if (process.env.NODE_ENV !== "production") {
+    console.debug(
+      "[portal-components] fetching documentation via %s (Enterprise Portal API)",
+      url
+    );
+  }
+  const response = await authenticatedFetch(url, {
+    method: "GET",
+    token,
+    headers: {
+      accept: "application/json"
+    }
+  });
+  if (!response.ok) {
+    throw new Error(
+      `Documentation request failed (${response.status} ${response.statusText})`
+    );
+  }
+  const data = await response.json();
+  return {
+    helmPreInstall: data.helmPreInstall || "",
+    helmPostInstall: data.helmPostInstall || "",
+    embeddedClusterPreInstall: data.embeddedClusterPreInstall || "",
+    embeddedClusterPostInstall: data.embeddedClusterPostInstall || "",
+    helmInstallUrl: data.helmInstallUrl || "",
+    embeddedClusterInstallUrl: data.embeddedClusterInstallUrl || "",
+    valuesOverrideUrl: data.valuesOverrideUrl || ""
+  };
+};
+react.cache(fetchDocumentationImpl);
+function UserMenuDropdown({
+  displayLabel,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("details", { className: `group relative ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors list-none border border-transparent hover:border-gray-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "h-4 w-4 text-gray-500 transition-transform group-open:rotate-180",
+          children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 mt-2 w-52 rounded-lg border border-gray-200 bg-white py-1.5 shadow-xl z-50", children })
+  ] });
+}
+function UserMenuItem({ href, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Link__default.default,
+    {
+      href,
+      className: "block w-full px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors",
+      children
+    }
+  );
+}
 var defaultTopNavLinks = [
   {
     label: "Dashboard",
@@ -450,65 +594,11 @@ var TopNav = async ({
             ),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-bold text-gray-900", children: brandTitle || "Enterprise Portal" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 list-none", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  className: "text-gray-500",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  className: "text-gray-500",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 mt-2 w-48 rounded-md border border-gray-200 bg-white py-2 text-sm text-gray-700 shadow-lg z-50", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Link__default.default,
-                {
-                  href: "/user-settings",
-                  className: "block w-full px-4 py-2 text-left hover:bg-gray-100",
-                  children: "User settings"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Link__default.default,
-                {
-                  href: "/team-settings",
-                  className: "block w-full px-4 py-2 text-left hover:bg-gray-100",
-                  children: "Team settings"
-                }
-              ),
-              userMenuChildren,
-              logoutButton
-            ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(UserMenuDropdown, { displayLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(UserMenuItem, { href: "/user-settings", children: "User settings" }),
+            /* @__PURE__ */ jsxRuntime.jsx(UserMenuItem, { href: "/team-settings", children: "Team settings" }),
+            userMenuChildren,
+            logoutButton
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-3 pb-2 text-sm font-medium text-gray-500", children: resolvedLinks.map(({ label, icon, href }) => {