@replicated/portal-components 0.0.19 → 0.0.21

package/dist/helm-install-wizard.js

@@ -8,7 +8,40 @@ var buffer = require('buffer');
  * Enterprise Portal Components
  * This file is generated by tsup. Do not edit manually.
  */
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// datadog/tracer.ts
+var tracer_exports = {};
+__export(tracer_exports, {
+  default: () => tracer_default
+});
+var tracer_default;
 
+// src/utils/constants.ts
+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 };
+}
 var navigateTo = (href) => {
   if (typeof window !== "undefined") {
     window.location.assign(href);
@@ -24,26 +57,12 @@ var K8S_DISTRIBUTIONS = [
   { value: "eks", label: "Amazon EKS" },
   { value: "gke", label: "Google GKE" }
 ];
-var copyToClipboard = async (text) => {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
-};
 var CodeBlock = ({
   command,
   className = ""
 }) => {
-  const [copied, setCopied] = react.useState(false);
-  const handleCopy = async () => {
-    const success = await copyToClipboard(command);
-    if (success) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    }
-  };
+  const { copy, copied } = useCopyToClipboard();
+  const handleCopy = () => copy(command);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `group relative min-w-0 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-x-auto rounded-lg bg-gray-900 p-4 text-sm text-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "block", children: command }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -58,11 +77,12 @@ var CodeBlock = ({
     )
   ] });
 };
-var StepIndicator = ({ step }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3", children: [
+var StepIndicator = ({ step, primaryColor = DEFAULT_SECONDARY_COLOR }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3", children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `flex h-10 w-10 items-center justify-center rounded-full border-2 ${step > 1 ? "border-gray-900 bg-gray-900 text-white" : "border-indigo-500"}`,
+      className: `flex h-10 w-10 items-center justify-center rounded-full border-2 ${step > 1 ? "border-gray-900 bg-gray-900 text-white" : ""}`,
+      style: step === 1 ? { borderColor: primaryColor } : void 0,
       children: step > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
@@ -74,7 +94,7 @@ var StepIndicator = ({ step }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { class
           strokeWidth: "2",
           children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3.5 8 3 3 6-6" })
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-indigo-500" })
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2.5 w-2.5 rounded-full", style: { backgroundColor: primaryColor } })
     }
   ),
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-0.5 w-12 ${step > 1 ? "bg-gray-900" : "bg-gray-200"}` }),
@@ -92,11 +112,12 @@ var VersionDropdown = ({
   onSelect,
   isLoading,
   isLoadingInstructions,
-  error
+  error,
+  primaryColor = DEFAULT_SECONDARY_COLOR
 }) => {
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-8 flex items-center gap-2 text-sm text-gray-500", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300", style: { borderTopColor: primaryColor } }),
       "Loading versions..."
     ] });
   }
@@ -112,7 +133,7 @@ var VersionDropdown = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-8 space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600", children: [
       "App Version",
-      isLoadingInstructions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" })
+      isLoadingInstructions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-300", style: { borderTopColor: primaryColor } })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "select",
@@ -165,11 +186,12 @@ var InstallationInstructions = ({
   isLoading,
   completedSteps = {},
   registryAccess = "online",
-  networkAvailability = "online"
+  networkAvailability = "online",
+  primaryColor = DEFAULT_SECONDARY_COLOR
 }) => {
   if (isLoading && !instructions?.steps?.length) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300", style: { borderTopColor: primaryColor } }),
       "Loading instructions..."
     ] }) });
   }
@@ -178,13 +200,13 @@ var InstallationInstructions = ({
   }
   const completableStepNames = ["export_credentials", "install_chart"];
   const stepOffset = networkAvailability === "airgap" ? 3 : 2;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-w-0 space-y-4 transition-opacity duration-150 ${isLoading ? "opacity-60" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "min-w-0 space-y-6 text-sm text-gray-700", children: instructions.steps.map((step, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-w-0 space-y-4 transition-opacity duration-200 ${isLoading ? "opacity-60" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "min-w-0 space-y-6 text-sm text-gray-700", children: instructions.steps.map((step, index) => {
     const canComplete = step.maybe_completed || completableStepNames.includes(step.step_name);
     const isCompleted = canComplete && completedSteps[step.step_name];
     const isPartialInstallChart = registryAccess === "partial" && step.step_name === "install_chart";
     return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold text-indigo-500", children: index + stepOffset }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20`, color: primaryColor }, children: index + stepOffset }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: step.title }),
         canComplete && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -218,6 +240,8 @@ var InstallationInstructions = ({
 };
 var HelmInstallWizard = ({
   token,
+  primaryColor = DEFAULT_SECONDARY_COLOR,
+  secondaryColor = DEFAULT_SECONDARY_COLOR,
   createServiceAccountAction,
   fetchChannelReleasesAction,
   createInstallOptionsAction,
@@ -229,7 +253,8 @@ var HelmInstallWizard = ({
   initialInstallOptionsId,
   initialInstallOptionsData,
   initialChannelReleases,
-  supportPortalLink
+  supportPortalLink,
+  isHelmAirgapEnabled = false
 }) => {
   const [step, setStep] = react.useState(initialStep ?? 1);
   const [instanceName, setInstanceName] = react.useState(initialInstallOptionsData?.instance_name ?? "");
@@ -263,7 +288,6 @@ var HelmInstallWizard = ({
   const [isLoadingInstructions, setIsLoadingInstructions] = react.useState(false);
   const [inputRegistryHostname, setInputRegistryHostname] = react.useState("");
   const [privateRegistryHostname, setPrivateRegistryHostname] = react.useState("");
-  const registryDebounceRef = react.useRef(null);
   const [completedSteps, setCompletedSteps] = react.useState({});
   const hasInitializedFromProps = react.useRef(!!initialInstallOptionsData);
   react.useEffect(() => {
@@ -293,6 +317,7 @@ var HelmInstallWizard = ({
   }, [initialInstallOptionsData]);
   const hasLoadedReleases = react.useRef(!!initialChannelReleases?.length);
   const hasResumedInstallation = react.useRef(!!initialInstallOptionsData);
+  const selectedReleaseRef = react.useRef(selectedRelease);
   const helmReleases = react.useMemo(() => {
     return releases.filter((r) => r.helmCharts && r.helmCharts.length > 0);
   }, [releases]);
@@ -318,6 +343,9 @@ var HelmInstallWizard = ({
       prevInstallOptionsIdRef.current = installOptionsId;
     }
   }, [installOptionsId, onInstallOptionsIdChange]);
+  react.useEffect(() => {
+    selectedReleaseRef.current = selectedRelease;
+  }, [selectedRelease]);
   react.useEffect(() => {
     if (step !== 2 || !fetchChannelReleasesAction || hasLoadedReleases.current) {
       return;
@@ -394,37 +422,35 @@ var HelmInstallWizard = ({
       }
     };
     updateOptions();
-  }, [selectedRelease, installOptionsId, token, updateInstallOptionsAction, networkAvailability, registryAccess, privateRegistryHostname]);
-  const lastPrivateRegistryRef = react.useRef("");
+  }, [selectedRelease, installOptionsId, token, updateInstallOptionsAction, networkAvailability, registryAccess]);
   react.useEffect(() => {
-    if (networkAvailability !== "airgap" || !installOptionsId || !getInstallOptionsAction) {
-      return;
-    }
-    const currentValue = privateRegistryHostname || "";
-    if (lastPrivateRegistryRef.current === currentValue) {
+    if (networkAvailability !== "airgap" || !installOptionsId || !updateInstallOptionsAction || !selectedRelease) {
       return;
     }
-    lastPrivateRegistryRef.current = currentValue;
-    const refreshInstructions = async () => {
-      setIsLoadingInstructions(true);
+    const timeoutId = setTimeout(async () => {
+      const currentRelease = selectedReleaseRef.current;
+      if (!currentRelease) {
+        return;
+      }
       try {
-        const result = await getInstallOptionsAction({
+        const result = await updateInstallOptionsAction({
           token,
           installOptionsId,
+          channelId: currentRelease.channelId,
+          channelReleaseSequence: currentRelease.channelSequence,
+          registryAvailability: registryAccess,
           includeInstructions: true,
-          privateRegistryHostname: currentValue || void 0
+          privateRegistryHostname: privateRegistryHostname || void 0
         });
         if (result.instructions) {
           setInstructions(result.instructions);
         }
       } catch (error) {
-        console.error("[helm-install-wizard] Failed to refresh instructions", error);
-      } finally {
-        setIsLoadingInstructions(false);
+        console.error("[helm-install-wizard] Failed to update private registry hostname", error);
       }
-    };
-    refreshInstructions();
-  }, [privateRegistryHostname, networkAvailability, installOptionsId, token, getInstallOptionsAction]);
+    }, 500);
+    return () => clearTimeout(timeoutId);
+  }, [privateRegistryHostname, networkAvailability, installOptionsId, updateInstallOptionsAction, token, registryAccess]);
   react.useEffect(() => {
     if (hasResumedInstallation.current) {
       return;
@@ -527,7 +553,6 @@ var HelmInstallWizard = ({
         if (networkAvailability !== "airgap") {
           setInputRegistryHostname("");
           setPrivateRegistryHostname("");
-          lastPrivateRegistryRef.current = "";
         }
         setInstructions(null);
         await updateInstallOptionsAction({
@@ -635,7 +660,7 @@ var HelmInstallWizard = ({
     onStepChange?.(1);
   };
   const handleFinish = react.useCallback(async () => {
-    navigateTo("/update");
+    navigateTo("/updates/checking");
   }, []);
   const handleReleaseSelect = react.useCallback((release) => {
     setSelectedRelease(release);
@@ -643,30 +668,18 @@ var HelmInstallWizard = ({
   const handlePrivateRegistryHostnameChange = react.useCallback((e) => {
     const value = e.target.value;
     setInputRegistryHostname(value);
-    if (registryDebounceRef.current) {
-      clearTimeout(registryDebounceRef.current);
-    }
-    registryDebounceRef.current = setTimeout(() => {
-      setPrivateRegistryHostname(value);
-    }, 1e3);
-  }, []);
-  react.useEffect(() => {
-    return () => {
-      if (registryDebounceRef.current) {
-        clearTimeout(registryDebounceRef.current);
-      }
-    };
+    setPrivateRegistryHostname(value);
   }, []);
   if (step === 2) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { step: 2 }),
+      /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { step: 2, primaryColor }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-2xl border border-gray-100 bg-gray-50 p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-6", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: networkAvailability === "proxy" ? "Helm Proxy Install" : networkAvailability === "airgap" ? "Helm Air Gap Install" : "Helm Online Install" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 space-y-6", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-indigo-500", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold", children: "1" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", style: { color: primaryColor }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20`, color: primaryColor }, children: "1" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: "Select a version" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -677,13 +690,14 @@ var HelmInstallWizard = ({
                   onSelect: handleReleaseSelect,
                   isLoading: isLoadingReleases,
                   isLoadingInstructions,
-                  error: releasesError
+                  error: releasesError,
+                  primaryColor
                 }
               )
             ] }),
             networkAvailability === "airgap" && selectedRelease && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-indigo-500", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold", children: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", style: { color: primaryColor }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20`, color: primaryColor }, children: "2" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: "(Optional) Specify registry URI" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-8", children: [
@@ -711,7 +725,8 @@ var HelmInstallWizard = ({
                 isLoading: isLoadingInstructions,
                 completedSteps,
                 registryAccess,
-                networkAvailability
+                networkAvailability,
+                primaryColor
               }
             )
           ] })
@@ -732,7 +747,8 @@ var HelmInstallWizard = ({
             {
               type: "button",
               onClick: handleFinish,
-              className: "rounded-xl bg-indigo-500 px-4 py-2 font-medium text-white transition hover:bg-indigo-600",
+              className: "rounded-xl px-4 py-2 font-medium text-white transition-opacity duration-200 hover:opacity-90",
+              style: { backgroundColor: primaryColor },
               children: "Finish"
             }
           )
@@ -743,7 +759,8 @@ var HelmInstallWizard = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
-              className: "text-indigo-500 hover:text-indigo-600",
+              className: "hover:opacity-80",
+              style: { color: secondaryColor },
               href: supportPortalLink,
               target: "_blank",
               rel: "noopener noreferrer",
@@ -755,7 +772,7 @@ var HelmInstallWizard = ({
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { step }),
+    /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { step, primaryColor }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-gray-100 bg-gray-50 p-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -823,7 +840,7 @@ var HelmInstallWizard = ({
             ),
             "Outbound requests require HTTPS Proxy"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", hidden: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", hidden: !isHelmAirgapEnabled, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -865,7 +882,7 @@ var HelmInstallWizard = ({
             ),
             "My workstation can only access the internet AND the registry (NOT the cluster)"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", hidden: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", hidden: !isHelmAirgapEnabled, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -888,7 +905,8 @@ var HelmInstallWizard = ({
             type: "button",
             onClick: handleContinue,
             disabled: isCreatingServiceAccount,
-            className: "rounded-xl bg-indigo-500 px-4 py-2 font-medium text-white transition hover:bg-indigo-600 disabled:cursor-not-allowed disabled:opacity-50",
+            className: "rounded-xl px-4 py-2 font-medium text-white transition-opacity duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+            style: { backgroundColor: primaryColor },
             children: isCreatingServiceAccount ? "Creating..." : "Continue"
           }
         )
@@ -921,8 +939,17 @@ 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');
@@ -930,12 +957,20 @@ async function handleServerError(statusCode) {
     const referer = headersList.get("referer");
     const host = headersList.get("host");
     const pathname = headersList.get("x-invoke-path") || headersList.get("x-forwarded-path");
-    if (referer) {
+    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);
   }
@@ -1015,11 +1050,15 @@ var fetchCustomBrandingImpl = async () => {
   const payload = await response.json();
   const brandingObject = {
     logo: payload.logoUrl,
-    title: payload.appName,
-    customColor1: payload.primaryColor,
-    customColor2: payload.secondaryColor,
+    title: payload.title,
+    primaryColor: payload.primaryColor,
+    secondaryColor: payload.secondaryColor,
     favicon: payload.faviconUrl,
-    supportPortalLink: payload.supportPortalLink || ""
+    supportPortalLink: payload.supportPortalLink || "",
+    background: payload.background,
+    backgroundImage: payload.backgroundImage,
+    customColor1: payload.customColor1,
+    customColor2: payload.customColor2
   };
   const brandingData = buffer.Buffer.from(JSON.stringify(brandingObject)).toString("base64");
   return {