@replicated/portal-components 0.0.19 → 0.0.21

package/dist/esm/linux-install-wizard.js

@@ -6,7 +6,40 @@ import { Buffer } from '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] = useState(false);
+  const copy = 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 LINUX_INSTALL_SERVICE_ACCOUNT_KEY = "linux_install_service_account";
 var LINUX_INSTALL_OPTIONS_KEY = "linux_install_options";
 var navigateTo = (href) => {
@@ -19,19 +52,12 @@ var navigateTo = (href) => {
     console.error("[linux-install-wizard] navigation failed", error);
   }
 };
-var copyToClipboard = async (text) => {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
-};
-var StepIndicator = ({ step }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3", children: [
+var StepIndicator = ({ step, primaryColor = DEFAULT_SECONDARY_COLOR }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3", children: [
   /* @__PURE__ */ 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__ */ jsx(
         "svg",
         {
@@ -43,7 +69,7 @@ var StepIndicator = ({ step }) => /* @__PURE__ */ jsxs("div", { className: "flex
           strokeWidth: "2",
           children: /* @__PURE__ */ jsx("path", { d: "m3.5 8 3 3 6-6" })
         }
-      ) : /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-indigo-500" })
+      ) : /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full", style: { backgroundColor: primaryColor } })
     }
   ),
   /* @__PURE__ */ jsx("div", { className: `h-0.5 w-12 ${step > 1 ? "bg-gray-900" : "bg-gray-200"}` }),
@@ -59,13 +85,11 @@ var CodeBlock = ({
   command,
   onCopy
 }) => {
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyToClipboard();
   const handleCopy = async () => {
-    const success = await copyToClipboard(command);
+    const success = await copy(command);
     if (success) {
-      setCopied(true);
       onCopy?.();
-      setTimeout(() => setCopied(false), 2e3);
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "group relative ml-8 mt-2 min-w-0", children: [
@@ -87,11 +111,12 @@ var VersionDropdown = ({
   selectedRelease,
   onSelect,
   isLoading,
-  error
+  error,
+  primaryColor = DEFAULT_SECONDARY_COLOR
 }) => {
   if (isLoading) {
     return /* @__PURE__ */ jsxs("div", { className: "ml-8 flex items-center gap-2 text-sm text-gray-500", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300", style: { borderTopColor: primaryColor } }),
       "Loading versions..."
     ] });
   }
@@ -131,13 +156,14 @@ var InstallationInstructions = ({
   instructions,
   isLoading,
   completedSteps = {},
-  isProxy = false
+  isProxy = false,
+  primaryColor = DEFAULT_SECONDARY_COLOR
 }) => {
   if (isLoading && !instructions?.steps?.length) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Installation Instructions" }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300", style: { borderTopColor: primaryColor } }),
         "Loading instructions..."
       ] })
     ] });
@@ -147,10 +173,10 @@ var InstallationInstructions = ({
   }
   const stepOffset = isProxy ? 3 : 2;
   console.debug("[InstallationInstructions] Rendering with stepOffset", { isProxy, stepOffset, stepsCount: instructions?.steps?.length });
-  return /* @__PURE__ */ jsxs("div", { className: `min-w-0 space-y-4 transition-opacity duration-150 ${isLoading ? "opacity-60" : ""}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `min-w-0 space-y-4 transition-opacity duration-200 ${isLoading ? "opacity-60" : ""}`, children: [
     /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold text-gray-900", children: [
       "Installation Instructions",
-      isLoading && /* @__PURE__ */ jsx("span", { className: "ml-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" })
+      isLoading && /* @__PURE__ */ jsx("span", { className: "ml-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-300", style: { borderTopColor: primaryColor } })
     ] }),
     /* @__PURE__ */ jsx("ol", { className: "min-w-0 space-y-6 text-sm text-gray-700", children: instructions.steps.map((step, index) => {
       const completableStepNames = ["download_assets", "install"];
@@ -158,7 +184,7 @@ var InstallationInstructions = ({
       const isCompleted = canComplete && completedSteps[step.step_name];
       return /* @__PURE__ */ jsxs("li", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "font-medium text-gray-900", children: step.title }),
           canComplete && /* @__PURE__ */ jsx(
             "span",
@@ -177,6 +203,8 @@ var InstallationInstructions = ({
 };
 var LinuxInstallWizard = ({
   token,
+  primaryColor = DEFAULT_SECONDARY_COLOR,
+  secondaryColor = DEFAULT_SECONDARY_COLOR,
   createServiceAccountAction,
   fetchChannelReleasesAction,
   createInstallOptionsAction,
@@ -608,7 +636,7 @@ var LinuxInstallWizard = ({
         console.error("[linux-install-wizard] Failed to save admin console URL", error);
       }
     }
-    navigateTo("/update");
+    navigateTo("/updates/checking");
   }, [installOptionsId, updateInstallOptionsAction, adminConsoleUrl, token]);
   const handleReleaseSelect = useCallback((release) => {
     setSelectedRelease(release);
@@ -616,14 +644,14 @@ var LinuxInstallWizard = ({
   const isProxy = networkAvailability === "proxy";
   if (step === 2) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx(StepIndicator, { step: 2 }),
+      /* @__PURE__ */ jsx(StepIndicator, { step: 2, primaryColor }),
       /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl border border-gray-100 bg-gray-50 p-6", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-6", children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900", children: isProxy ? "Linux Single Node Proxy Install" : "Linux Single Node Online Install" }),
           /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-6", children: [
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-indigo-500", children: [
-                /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold", children: "1" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", style: { color: primaryColor }, children: [
+                /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20` }, children: "1" }),
                 /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: "Select a version" })
               ] }),
               /* @__PURE__ */ jsx(
@@ -633,13 +661,14 @@ var LinuxInstallWizard = ({
                   selectedRelease,
                   onSelect: handleReleaseSelect,
                   isLoading: isLoadingReleases,
-                  error: releasesError
+                  error: releasesError,
+                  primaryColor
                 }
               )
             ] }),
             isProxy && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-indigo-500", children: [
-                /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold", children: "2" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", style: { color: primaryColor }, children: [
+                /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20` }, children: "2" }),
                 /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: "Configure proxy URL" })
               ] }),
               /* @__PURE__ */ jsx(
@@ -658,12 +687,13 @@ var LinuxInstallWizard = ({
                 instructions,
                 isLoading: isLoadingInstructions,
                 completedSteps,
-                isProxy
+                isProxy,
+                primaryColor
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-indigo-500", children: [
-                /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 font-semibold", children: (instructions?.steps?.length ?? 0) + (isProxy ? 3 : 2) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", style: { color: primaryColor }, children: [
+                /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full font-semibold", style: { backgroundColor: `${primaryColor}20` }, children: (instructions?.steps?.length ?? 0) + (isProxy ? 3 : 2) }),
                 /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: "(Optional) Add the Admin Console URL" })
               ] }),
               /* @__PURE__ */ jsx(
@@ -695,7 +725,8 @@ var LinuxInstallWizard = ({
             {
               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 hover:brightness-90",
+              style: { backgroundColor: primaryColor },
               children: "Finish"
             }
           )
@@ -706,7 +737,8 @@ var LinuxInstallWizard = ({
           /* @__PURE__ */ jsx(
             "a",
             {
-              className: "text-indigo-500 hover:text-indigo-600",
+              className: "hover:opacity-80",
+              style: { color: secondaryColor },
               href: supportPortalLink,
               target: "_blank",
               rel: "noopener noreferrer",
@@ -718,7 +750,7 @@ var LinuxInstallWizard = ({
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx(StepIndicator, { step: 1 }),
+    /* @__PURE__ */ jsx(StepIndicator, { step: 1, primaryColor }),
     /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-gray-100 bg-gray-50 p-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [
@@ -787,7 +819,8 @@ var LinuxInstallWizard = ({
             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"
           }
         )
@@ -820,8 +853,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');
@@ -829,12 +871,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);
   }
@@ -1150,11 +1200,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.from(JSON.stringify(brandingObject)).toString("base64");
   return {