@replicated/portal-components 0.0.21 → 0.0.22

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

@@ -1,4 +1,5 @@
 import { cache, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Buffer } from 'buffer';
 
@@ -20,6 +21,7 @@ __export(tracer_exports, {
 var tracer_default;
 
 // src/utils/constants.ts
+var DEFAULT_PRIMARY_COLOR = "#4f46e5";
 var DEFAULT_SECONDARY_COLOR = "#6366f1";
 function useCopyToClipboard(resetDelay = 2e3) {
   const [copied, setCopied] = useState(false);
@@ -40,6 +42,9 @@ function useCopyToClipboard(resetDelay = 2e3) {
   }, [resetDelay]);
   return { copy, copied };
 }
+function MarkdownRenderer({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { children }) });
+}
 var LINUX_INSTALL_SERVICE_ACCOUNT_KEY = "linux_install_service_account";
 var LINUX_INSTALL_OPTIONS_KEY = "linux_install_options";
 var navigateTo = (href) => {
@@ -52,35 +57,45 @@ var navigateTo = (href) => {
     console.error("[linux-install-wizard] navigation failed", error);
   }
 };
-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" : ""}`,
-      style: step === 1 ? { borderColor: primaryColor } : void 0,
-      children: step > 1 ? /* @__PURE__ */ jsx(
-        "svg",
+var StepIndicator = ({
+  step,
+  primaryColor = DEFAULT_PRIMARY_COLOR,
+  hasPreInstall = false,
+  hasPostInstall = false
+}) => {
+  const visibleSteps = [];
+  if (hasPreInstall) visibleSteps.push(1);
+  visibleSteps.push(2, 3);
+  if (hasPostInstall) visibleSteps.push(4);
+  const stepCount = visibleSteps.length;
+  const currentVisibleIndex = visibleSteps.indexOf(step);
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-3", children: visibleSteps.map((visibleStep, index) => {
+    const isCompleted = index < currentVisibleIndex;
+    const isCurrent = index === currentVisibleIndex;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 16 16",
-          className: "h-3.5 w-3.5",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: /* @__PURE__ */ jsx("path", { d: "m3.5 8 3 3 6-6" })
+          className: `flex h-10 w-10 items-center justify-center rounded-full border-2 ${isCompleted ? "border-gray-900 bg-gray-900 text-white" : isCurrent ? "border-gray-900" : "border-gray-200"}`,
+          style: isCurrent ? { borderColor: primaryColor } : void 0,
+          children: isCompleted ? /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 16 16",
+              className: "h-3.5 w-3.5",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /* @__PURE__ */ jsx("path", { d: "m3.5 8 3 3 6-6" })
+            }
+          ) : isCurrent ? /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full", style: { backgroundColor: primaryColor } }) : null
         }
-      ) : /* @__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"}` }),
-  /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `flex h-10 w-10 items-center justify-center rounded-full border-2 ${step === 2 ? "border-gray-900" : "border-gray-200"}`,
-      children: step === 2 ? /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-gray-900" }) : null
-    }
-  )
-] });
+      ),
+      index < stepCount - 1 && /* @__PURE__ */ jsx("div", { className: `h-0.5 w-12 ${index < currentVisibleIndex ? "bg-gray-900" : "bg-gray-200"}` })
+    ] }, visibleStep);
+  }) });
+};
 var CodeBlock = ({
   command,
   onCopy
@@ -112,7 +127,7 @@ var VersionDropdown = ({
   onSelect,
   isLoading,
   error,
-  primaryColor = DEFAULT_SECONDARY_COLOR
+  primaryColor = DEFAULT_PRIMARY_COLOR
 }) => {
   if (isLoading) {
     return /* @__PURE__ */ jsxs("div", { className: "ml-8 flex items-center gap-2 text-sm text-gray-500", children: [
@@ -157,7 +172,7 @@ var InstallationInstructions = ({
   isLoading,
   completedSteps = {},
   isProxy = false,
-  primaryColor = DEFAULT_SECONDARY_COLOR
+  primaryColor = DEFAULT_PRIMARY_COLOR
 }) => {
   if (isLoading && !instructions?.steps?.length) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -172,13 +187,12 @@ var InstallationInstructions = ({
     return null;
   }
   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-200 ${isLoading ? "opacity-60" : ""}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `min-w-0 ml-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", style: { borderTopColor: primaryColor } })
     ] }),
-    /* @__PURE__ */ jsx("ol", { className: "min-w-0 space-y-6 text-sm text-gray-700", children: instructions.steps.map((step, index) => {
+    /* @__PURE__ */ jsx("ol", { className: "min-w-0 list-none space-y-6 pl-0 ml-0 text-sm text-gray-700", children: instructions.steps.map((step, index) => {
       const completableStepNames = ["download_assets", "install"];
       const canComplete = completableStepNames.includes(step.step_name);
       const isCompleted = canComplete && completedSteps[step.step_name];
@@ -203,7 +217,7 @@ var InstallationInstructions = ({
 };
 var LinuxInstallWizard = ({
   token,
-  primaryColor = DEFAULT_SECONDARY_COLOR,
+  primaryColor = DEFAULT_PRIMARY_COLOR,
   secondaryColor = DEFAULT_SECONDARY_COLOR,
   createServiceAccountAction,
   fetchChannelReleasesAction,
@@ -217,9 +231,19 @@ var LinuxInstallWizard = ({
   initialInstallOptionsId,
   initialInstallOptionsData,
   initialChannelReleases,
-  supportPortalLink
+  supportPortalLink,
+  preInstallMarkdown,
+  postInstallMarkdown,
+  completionUrl,
+  embeddedClusterInstallUrl
 }) => {
-  const [step, setStep] = useState(initialStep ?? 1);
+  const hasPreInstall = Boolean(preInstallMarkdown && preInstallMarkdown.trim());
+  const hasPostInstall = Boolean(postInstallMarkdown && postInstallMarkdown.trim());
+  const effectiveInitialStep = (() => {
+    if (initialStep) return initialStep;
+    return hasPreInstall ? 1 : 2;
+  })();
+  const [step, setStep] = useState(effectiveInitialStep);
   const [instanceName, setInstanceName] = useState(initialInstallOptionsData?.instance_name ?? "");
   const [networkAvailability, setNetworkAvailability] = useState(initialNetwork ?? "online");
   const [adminConsoleUrl, setAdminConsoleUrl] = useState(initialInstallOptionsData?.admin_console_url ?? "");
@@ -227,6 +251,7 @@ var LinuxInstallWizard = ({
   const [showErrors, setShowErrors] = useState(false);
   const [isCreatingServiceAccount, setIsCreatingServiceAccount] = useState(false);
   const [apiError, setApiError] = useState(null);
+  const [isWaitingForNavigation, setIsWaitingForNavigation] = useState(false);
   const [installOptionsId, setInstallOptionsId] = useState(initialInstallOptionsId ?? null);
   const [serviceAccountId, setServiceAccountId] = useState(initialInstallOptionsData?.service_account_id ?? null);
   const [originalInstanceName, setOriginalInstanceName] = useState(initialInstallOptionsData?.instance_name ?? null);
@@ -245,7 +270,7 @@ var LinuxInstallWizard = ({
   const [isLoadingInstructions, setIsLoadingInstructions] = useState(false);
   const [completedSteps, setCompletedSteps] = useState({});
   const hasLoadedReleases = useRef(!!initialChannelReleases?.length);
-  const hasResumedInstallation = useRef(!!initialInstallOptionsData);
+  const hasResumedInstallation = useRef(!!initialInstallOptionsData?.instructions);
   const lastUpdateRef = useRef(
     initialInstallOptionsData?.channel_id && initialInstallOptionsData?.channel_release_sequence ? { channelId: initialInstallOptionsData.channel_id, sequence: initialInstallOptionsData.channel_release_sequence } : {}
   );
@@ -273,16 +298,28 @@ var LinuxInstallWizard = ({
   useEffect(() => {
     hasMountedRef.current = true;
   }, []);
+  useEffect(() => {
+    if (step === 1 && !hasPreInstall) {
+      setStep(2);
+      if (onStepChange) {
+        onStepChange(2);
+      }
+    }
+  }, [step, hasPreInstall, onStepChange]);
   useEffect(() => {
     if (!hasMountedRef.current) {
       prevStepRef.current = step;
       return;
     }
     if (step !== prevStepRef.current) {
+      if (installOptionsId !== prevInstallOptionsIdRef.current) {
+        prevStepRef.current = step;
+        return;
+      }
       onStepChange?.(step);
       prevStepRef.current = step;
     }
-  }, [step, onStepChange]);
+  }, [step, installOptionsId, onStepChange]);
   useEffect(() => {
     if (!hasMountedRef.current) {
       prevInstallOptionsIdRef.current = installOptionsId;
@@ -297,7 +334,7 @@ var LinuxInstallWizard = ({
     selectedReleaseRef.current = selectedRelease;
   }, [selectedRelease]);
   useEffect(() => {
-    if (step !== 2 || !fetchChannelReleasesAction || hasLoadedReleases.current) {
+    if (step !== 2 && step !== 3 || !fetchChannelReleasesAction || hasLoadedReleases.current) {
       return;
     }
     const loadReleases = async () => {
@@ -329,7 +366,7 @@ var LinuxInstallWizard = ({
       return;
     }
     const firstRelease = embeddedClusterReleases[0];
-    if (step === 2 && firstRelease) {
+    if (step === 3 && firstRelease) {
       setSelectedRelease(firstRelease);
       hasAutoSelectedRelease.current = true;
     }
@@ -348,12 +385,6 @@ var LinuxInstallWizard = ({
     }
     const updateOptions = async () => {
       setIsLoadingInstructions(true);
-      console.debug("[linux-install-wizard] Updating install options with release", {
-        channelId,
-        sequence,
-        networkAvailability,
-        proxyUrl: networkAvailability === "proxy" ? proxyUrl : void 0
-      });
       try {
         const result = await updateInstallOptionsAction({
           token,
@@ -365,10 +396,6 @@ var LinuxInstallWizard = ({
         });
         lastUpdateRef.current = { channelId, sequence };
         if (result.instructions) {
-          console.debug("[linux-install-wizard] Instructions received from release update", {
-            stepsCount: result.instructions.steps?.length,
-            firstStepName: result.instructions.steps?.[0]?.step_name
-          });
           setInstructions(result.instructions);
         }
       } catch (error) {
@@ -382,29 +409,16 @@ var LinuxInstallWizard = ({
   }, [selectedRelease, installOptionsId, token, updateInstallOptionsAction, networkAvailability, proxyUrl]);
   useEffect(() => {
     if (networkAvailability !== "proxy" || !installOptionsId || !updateInstallOptionsAction || !selectedRelease) {
-      console.debug("[linux-install-wizard] Skipping proxy URL update effect", {
-        networkAvailability,
-        hasInstallOptionsId: !!installOptionsId,
-        hasUpdateAction: !!updateInstallOptionsAction,
-        hasSelectedRelease: !!selectedRelease
-      });
       return;
     }
     if (!hasResumedInstallation.current) {
       return;
     }
-    console.debug("[linux-install-wizard] Proxy URL changed, will regenerate instructions after 500ms", { proxyUrl });
     const timeoutId = setTimeout(async () => {
       const currentRelease = selectedReleaseRef.current;
       if (!currentRelease) {
-        console.debug("[linux-install-wizard] No release selected, skipping proxy URL update");
         return;
       }
-      console.debug("[linux-install-wizard] Regenerating instructions with proxy URL", {
-        proxyUrl,
-        channelId: currentRelease.channelId,
-        channelSequence: currentRelease.channelSequence
-      });
       try {
         const result = await updateInstallOptionsAction({
           token,
@@ -415,9 +429,6 @@ var LinuxInstallWizard = ({
           proxyUrl: proxyUrl || void 0
         });
         if (result.instructions) {
-          console.debug("[linux-install-wizard] Instructions updated with proxy URL", {
-            stepsCount: result.instructions.steps?.length
-          });
           setInstructions(result.instructions);
         }
       } catch (error) {
@@ -430,7 +441,7 @@ var LinuxInstallWizard = ({
     if (hasResumedInstallation.current) {
       return;
     }
-    if (!initialInstallOptionsId || !getInstallOptionsAction || step !== 2) {
+    if (!initialInstallOptionsId || !getInstallOptionsAction) {
       return;
     }
     hasResumedInstallation.current = true;
@@ -476,9 +487,9 @@ var LinuxInstallWizard = ({
       }
     };
     resumeInstallation();
-  }, [initialInstallOptionsId, getInstallOptionsAction, token, step, releases, networkAvailability, proxyUrl]);
+  }, [initialInstallOptionsId, getInstallOptionsAction, token, releases, networkAvailability, proxyUrl]);
   useEffect(() => {
-    if (step !== 2 || !installOptionsId || !getInstallOptionsAction) {
+    if (step !== 3 || !installOptionsId || !getInstallOptionsAction) {
       return;
     }
     if (completedSteps["download_assets"] && completedSteps["install"]) {
@@ -511,9 +522,7 @@ var LinuxInstallWizard = ({
     return () => clearInterval(pollInterval);
   }, [step, installOptionsId, getInstallOptionsAction, token, completedSteps]);
   const handleContinue = async () => {
-    console.debug("[linux-install-wizard] handleContinue called, instanceName:", JSON.stringify(instanceName));
     if (!instanceName.trim()) {
-      console.debug("[linux-install-wizard] Validation failed: instanceName is empty");
       setShowErrors(true);
       return;
     }
@@ -527,15 +536,7 @@ var LinuxInstallWizard = ({
     setIsCreatingServiceAccount(true);
     try {
       const trimmedInstanceName = instanceName.trim();
-      console.debug("[linux-install-wizard] handleContinue - checking conditions", {
-        serviceAccountId: !!serviceAccountId,
-        originalInstanceName,
-        trimmedInstanceName,
-        networkAvailability,
-        installOptionsId: !!installOptionsId
-      });
       if (serviceAccountId && originalInstanceName === trimmedInstanceName && installOptionsId && updateInstallOptionsAction) {
-        console.debug("[linux-install-wizard] Reusing existing service account, updating install options...");
         const firstRelease = embeddedClusterReleases[0];
         const result = await updateInstallOptionsAction({
           token,
@@ -556,9 +557,8 @@ var LinuxInstallWizard = ({
         if (result.instructions) {
           setInstructions(result.instructions);
         }
-        console.debug("[linux-install-wizard] Transitioning to step 2 (updated install options)");
-        setStep(2);
-        onStepChange?.(2);
+        setIsWaitingForNavigation(true);
+        onStepChange?.(3);
         return;
       }
       if (typeof window !== "undefined" && window.sessionStorage) {
@@ -572,7 +572,6 @@ var LinuxInstallWizard = ({
       setServiceAccountId(saData.service_account.id);
       setOriginalInstanceName(trimmedInstanceName);
       if (createInstallOptionsAction) {
-        console.debug("[linux-install-wizard] Creating install options...");
         const firstRelease = embeddedClusterReleases[0];
         const installOptionsResult = await createInstallOptionsAction({
           token,
@@ -584,7 +583,6 @@ var LinuxInstallWizard = ({
           channelId: firstRelease?.channelId,
           channelReleaseSequence: firstRelease?.channelSequence
         });
-        console.debug("[linux-install-wizard] Install options result:", installOptionsResult);
         if (firstRelease) {
           setSelectedRelease(firstRelease);
           lastUpdateRef.current = {
@@ -604,8 +602,7 @@ var LinuxInstallWizard = ({
           setInstructions(installOptionsResult.instructions);
         }
       }
-      console.debug("[linux-install-wizard] Transitioning to step 2");
-      setStep(2);
+      setIsWaitingForNavigation(true);
     } catch (error) {
       console.error("[linux-install-wizard] Failed to continue", error);
       const errorMessage = error instanceof Error ? error.message : "Failed to continue";
@@ -614,15 +611,33 @@ var LinuxInstallWizard = ({
       } else {
         setApiError(errorMessage);
       }
+      setIsWaitingForNavigation(false);
     } finally {
       setIsCreatingServiceAccount(false);
     }
   };
+  const handleContinueFromPreInstall = () => {
+    setStep(2);
+    onStepChange?.(2);
+  };
   const handleBack = () => {
     setApiError(null);
     setShowErrors(false);
-    setStep(1);
-    onStepChange?.(1);
+    setIsWaitingForNavigation(false);
+    if (step === 4) {
+      setStep(3);
+      onStepChange?.(3);
+    } else if (step === 3) {
+      setStep(2);
+      onStepChange?.(2);
+    } else if (step === 2) {
+      const prevStep = hasPreInstall ? 1 : 2;
+      setStep(prevStep);
+      onStepChange?.(prevStep);
+    }
+  };
+  const handleCompletePostInstall = () => {
+    navigateTo(completionUrl);
   };
   const handleFinish = useCallback(async () => {
     if (installOptionsId && updateInstallOptionsAction && adminConsoleUrl) {
@@ -636,18 +651,71 @@ var LinuxInstallWizard = ({
         console.error("[linux-install-wizard] Failed to save admin console URL", error);
       }
     }
-    navigateTo("/updates/checking");
-  }, [installOptionsId, updateInstallOptionsAction, adminConsoleUrl, token]);
+    if (hasPostInstall) {
+      setStep(4);
+      onStepChange?.(4);
+    } else {
+      navigateTo(completionUrl);
+    }
+  }, [installOptionsId, updateInstallOptionsAction, adminConsoleUrl, token, hasPostInstall, onStepChange, completionUrl]);
   const handleReleaseSelect = useCallback((release) => {
     setSelectedRelease(release);
   }, []);
   const isProxy = networkAvailability === "proxy";
-  if (step === 2) {
+  if (step === 4 && hasPostInstall) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(StepIndicator, { step: 4, primaryColor, hasPreInstall, hasPostInstall }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-gray-100 bg-gray-50 p-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(MarkdownRenderer, { children: postInstallMarkdown || "" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-between text-sm text-gray-500", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleBack,
+              className: "rounded-xl px-4 py-2 font-medium text-gray-500 transition hover:bg-gray-100",
+              children: "Back"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "Step 4 of 4" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCompletePostInstall,
+              className: "rounded-xl px-4 py-2 font-medium text-white transition hover:brightness-90",
+              style: { backgroundColor: primaryColor },
+              children: "Complete"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  if (step === 3) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx(StepIndicator, { step: 2, primaryColor }),
+      /* @__PURE__ */ jsx(StepIndicator, { step: 3, primaryColor, hasPreInstall, hasPostInstall }),
       /* @__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" }),
+          embeddedClusterInstallUrl && /* @__PURE__ */ jsxs("p", { className: "mt-4 text-sm text-gray-700", children: [
+            "For a detailed description of the system requirements, please see our",
+            " ",
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: embeddedClusterInstallUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "font-semibold hover:underline",
+                style: { color: secondaryColor },
+                children: [
+                  "Embedded Cluster installation documentation",
+                  /* @__PURE__ */ jsx("svg", { className: "ml-1 inline-block h-4 w-4 align-text-bottom", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
+                ]
+              }
+            )
+          ] }),
           /* @__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", style: { color: primaryColor }, children: [
@@ -671,15 +739,15 @@ var LinuxInstallWizard = ({
                 /* @__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(
+              /* @__PURE__ */ jsx("div", { className: "ml-8", children: /* @__PURE__ */ jsx(
                 "input",
                 {
                   value: proxyUrl,
                   onChange: (event) => setProxyUrl(event.target.value),
                   placeholder: "Enter proxy URL",
-                  className: "portal-input ml-8 w-full"
+                  className: "portal-input w-full"
                 }
-              )
+              ) })
             ] }),
             /* @__PURE__ */ jsx(
               InstallationInstructions,
@@ -696,15 +764,15 @@ var LinuxInstallWizard = ({
                 /* @__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(
+              /* @__PURE__ */ jsx("div", { className: "ml-8", children: /* @__PURE__ */ jsx(
                 "input",
                 {
                   value: adminConsoleUrl,
                   onChange: (event) => setAdminConsoleUrl(event.target.value),
                   placeholder: "https://localhost:30000",
-                  className: "portal-input ml-8 w-full"
+                  className: "portal-input w-full"
                 }
-              )
+              ) })
             ] })
           ] })
         ] }),
@@ -719,7 +787,12 @@ var LinuxInstallWizard = ({
               children: "Back"
             }
           ),
-          /* @__PURE__ */ jsx("span", { children: "Step 2 of 2" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Step ",
+            hasPreInstall ? 3 : 2,
+            " of ",
+            hasPreInstall && hasPostInstall ? 4 : hasPreInstall || hasPostInstall ? 3 : 2
+          ] }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -727,7 +800,7 @@ var LinuxInstallWizard = ({
               onClick: handleFinish,
               className: "rounded-xl px-4 py-2 font-medium text-white transition hover:brightness-90",
               style: { backgroundColor: primaryColor },
-              children: "Finish"
+              children: hasPostInstall ? "Continue" : "Finish"
             }
           )
         ] }),
@@ -749,82 +822,114 @@ var LinuxInstallWizard = ({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    /* @__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: [
-          "Instance Name",
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              value: instanceName,
-              onChange: (event) => setInstanceName(event.target.value),
-              placeholder: "Instance nickname",
-              "aria-invalid": showErrors && !instanceName.trim(),
-              className: `portal-input mt-1 w-full ${showErrors && !instanceName.trim() ? "border-rose-400 focus:border-rose-400 focus:ring-rose-200" : ""}`
-            }
-          ),
-          showErrors && !instanceName.trim() ? /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs text-rose-500", children: "Instance name is required." }) : null
-        ] }),
-        /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-gray-700", children: "Network Availability" }),
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
+  if (step === 2) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(StepIndicator, { step: 2, primaryColor, hasPreInstall, hasPostInstall }),
+      /* @__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: [
+            "Instance Name",
             /* @__PURE__ */ jsx(
               "input",
               {
-                type: "radio",
-                name: "network-availability",
-                checked: networkAvailability === "online",
-                onChange: () => setNetworkAvailability("online"),
-                className: "portal-radio"
+                value: instanceName,
+                onChange: (event) => setInstanceName(event.target.value),
+                placeholder: "Instance nickname",
+                "aria-invalid": showErrors && !instanceName.trim(),
+                className: `portal-input mt-1 w-full ${showErrors && !instanceName.trim() ? "border-rose-400 focus:border-rose-400 focus:ring-rose-200" : ""}`
               }
             ),
-            "Outbound requests allowed"
+            showErrors && !instanceName.trim() ? /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs text-rose-500", children: "Instance name is required." }) : null
           ] }),
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name: "network-availability",
-                checked: networkAvailability === "proxy",
-                onChange: () => setNetworkAvailability("proxy"),
-                className: "portal-radio"
-              }
-            ),
-            "Outbound requests require HTTPS Proxy"
+          /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-gray-700", children: "Network Availability" }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "network-availability",
+                  checked: networkAvailability === "online",
+                  onChange: () => setNetworkAvailability("online"),
+                  className: "portal-radio"
+                }
+              ),
+              "Outbound requests allowed"
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "network-availability",
+                  checked: networkAvailability === "proxy",
+                  onChange: () => setNetworkAvailability("proxy"),
+                  className: "portal-radio"
+                }
+              ),
+              "Outbound requests require HTTPS Proxy"
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "network-availability",
+                  checked: networkAvailability === "airgap",
+                  onChange: () => setNetworkAvailability("airgap"),
+                  className: "portal-radio"
+                }
+              ),
+              "No outbound requests allowed (air gap)"
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name: "network-availability",
-                checked: networkAvailability === "airgap",
-                onChange: () => setNetworkAvailability("airgap"),
-                className: "portal-radio"
-              }
-            ),
-            "No outbound requests allowed (air gap)"
-          ] })
+          apiError ? /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-600", children: apiError }) : null
         ] }),
-        apiError ? /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-600", children: apiError }) : null
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-between text-sm text-gray-500", children: [
-        /* @__PURE__ */ jsx("span", { children: "Step 1 of 2" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleContinue,
-            disabled: isCreatingServiceAccount,
-            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"
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-between text-sm text-gray-500", children: [
+          hasPreInstall ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleBack,
+              className: "rounded-xl px-4 py-2 font-medium text-gray-500 transition hover:bg-gray-100",
+              children: "Back"
+            }
+          ) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Step ",
+            hasPreInstall ? 2 : 1,
+            " of ",
+            hasPreInstall && hasPostInstall ? 4 : hasPreInstall || hasPostInstall ? 3 : 2
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleContinue,
+              disabled: isCreatingServiceAccount || isWaitingForNavigation,
+              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 || isWaitingForNavigation ? "Saving..." : "Continue"
+            }
+          )
+        ] })
       ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(StepIndicator, { step: 1, primaryColor, hasPreInstall, hasPostInstall }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-gray-100 bg-gray-50 p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(MarkdownRenderer, { children: preInstallMarkdown || "" }) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-end text-sm text-gray-500", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleContinueFromPreInstall,
+          className: "rounded-xl px-4 py-2 font-medium text-white transition hover:brightness-90",
+          style: { backgroundColor: primaryColor },
+          children: "Continue"
+        }
+      ) })
     ] })
   ] });
 };
@@ -1218,6 +1323,45 @@ var fetchCustomBrandingImpl = async () => {
   };
 };
 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 || ""
+  };
+};
+cache(fetchDocumentationImpl);
 
 export { LINUX_INSTALL_OPTIONS_KEY, LINUX_INSTALL_SERVICE_ACCOUNT_KEY, LinuxInstallWizard, createInstallOptions, createServiceAccount, fetchChannelReleases, filterEmbeddedClusterReleases, getInstallOptions, updateInstallOptions };
 //# sourceMappingURL=linux-install-wizard.js.map