@replicated/portal-components 0.0.21 → 0.0.22

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

@@ -1,4 +1,5 @@
 import { cache, useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Buffer } from 'buffer';
 
@@ -18,8 +19,12 @@ __export(tracer_exports, {
   default: () => tracer_default
 });
 var tracer_default;
+function MarkdownRenderer({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { children }) });
+}
 
 // src/utils/constants.ts
+var DEFAULT_PRIMARY_COLOR = "#4f46e5";
 var DEFAULT_SECONDARY_COLOR = "#6366f1";
 function useCopyToClipboard(resetDelay = 2e3) {
   const [copied, setCopied] = useState(false);
@@ -75,35 +80,51 @@ var CodeBlock = ({
     )
   ] });
 };
-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;
+    const isLast = index === stepCount - 1;
+    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-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
-    }
-  )
-] });
+      ),
+      !isLast && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `h-0.5 w-12 ${isCompleted ? "bg-gray-900" : "bg-gray-200"}`
+        }
+      )
+    ] }, visibleStep);
+  }) });
+};
 var VersionDropdown = ({
   releases,
   selectedRelease,
@@ -111,7 +132,7 @@ var VersionDropdown = ({
   isLoading,
   isLoadingInstructions,
   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: [
@@ -185,7 +206,9 @@ var InstallationInstructions = ({
   completedSteps = {},
   registryAccess = "online",
   networkAvailability = "online",
-  primaryColor = DEFAULT_SECONDARY_COLOR
+  primaryColor = DEFAULT_PRIMARY_COLOR,
+  secondaryColor = DEFAULT_SECONDARY_COLOR,
+  valuesOverrideUrl
 }) => {
   if (isLoading && !instructions?.steps?.length) {
     return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
@@ -198,7 +221,7 @@ var InstallationInstructions = ({
   }
   const completableStepNames = ["export_credentials", "install_chart"];
   const stepOffset = networkAvailability === "airgap" ? 3 : 2;
-  return /* @__PURE__ */ jsx("div", { className: `min-w-0 space-y-4 transition-opacity duration-200 ${isLoading ? "opacity-60" : ""}`, children: /* @__PURE__ */ jsx("ol", { className: "min-w-0 space-y-6 text-sm text-gray-700", children: instructions.steps.map((step, index) => {
+  return /* @__PURE__ */ jsx("div", { className: `min-w-0 ml-0 space-y-4 transition-opacity duration-200 ${isLoading ? "opacity-60" : ""}`, children: /* @__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 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";
@@ -215,7 +238,30 @@ var InstallationInstructions = ({
         ),
         isCompleted && /* @__PURE__ */ jsx("span", { className: "text-xs text-green-600", children: "Completed" })
       ] }),
-      step.description && /* @__PURE__ */ jsx("p", { className: "ml-8 text-gray-500", children: step.description }),
+      step.description && /* @__PURE__ */ jsxs("p", { className: "ml-8 text-gray-500", children: [
+        step.description,
+        step.step_name === "create_values_file" && valuesOverrideUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          "See our",
+          " ",
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: valuesOverrideUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "font-semibold hover:underline",
+              style: { color: secondaryColor },
+              children: [
+                "values reference 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" }) })
+              ]
+            }
+          ),
+          " ",
+          "for configuration options."
+        ] })
+      ] }),
       isPartialInstallChart && step.commands.length > 0 ? (() => {
         const { pullCommands, filesToTransfer, installCommands } = parsePartialRegistryCommands(step.commands);
         return /* @__PURE__ */ jsxs("div", { className: "ml-8 space-y-4", children: [
@@ -238,7 +284,7 @@ var InstallationInstructions = ({
 };
 var HelmInstallWizard = ({
   token,
-  primaryColor = DEFAULT_SECONDARY_COLOR,
+  primaryColor = DEFAULT_PRIMARY_COLOR,
   secondaryColor = DEFAULT_SECONDARY_COLOR,
   createServiceAccountAction,
   fetchChannelReleasesAction,
@@ -252,9 +298,20 @@ var HelmInstallWizard = ({
   initialInstallOptionsData,
   initialChannelReleases,
   supportPortalLink,
-  isHelmAirgapEnabled = false
+  isHelmAirgapEnabled = false,
+  preInstallMarkdown,
+  postInstallMarkdown,
+  completionUrl,
+  helmInstallUrl,
+  valuesOverrideUrl
 }) => {
-  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 [kubernetesDistribution, setKubernetesDistribution] = useState(
     initialInstallOptionsData?.kubernetes_distribution ?? "vanilla"
@@ -268,6 +325,7 @@ var HelmInstallWizard = ({
   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);
@@ -314,7 +372,7 @@ var HelmInstallWizard = ({
     }
   }, [initialInstallOptionsData]);
   const hasLoadedReleases = useRef(!!initialChannelReleases?.length);
-  const hasResumedInstallation = useRef(!!initialInstallOptionsData);
+  const hasResumedInstallation = useRef(!!initialInstallOptionsData?.instructions);
   const selectedReleaseRef = useRef(selectedRelease);
   const helmReleases = useMemo(() => {
     return releases.filter((r) => r.helmCharts && r.helmCharts.length > 0);
@@ -326,6 +384,14 @@ var HelmInstallWizard = ({
     }
     prevInitialStepRef.current = initialStep;
   }, [initialStep]);
+  useEffect(() => {
+    if (step === 1 && !hasPreInstall) {
+      setStep(2);
+      if (onStepChange) {
+        onStepChange(2);
+      }
+    }
+  }, [step, hasPreInstall, onStepChange]);
   const hasMountedRef = useRef(false);
   const prevInstallOptionsIdRef = useRef(installOptionsId);
   useEffect(() => {
@@ -345,7 +411,7 @@ var HelmInstallWizard = ({
     selectedReleaseRef.current = selectedRelease;
   }, [selectedRelease]);
   useEffect(() => {
-    if (step !== 2 || !fetchChannelReleasesAction || hasLoadedReleases.current) {
+    if (step !== 2 && step !== 3 || !fetchChannelReleasesAction || hasLoadedReleases.current) {
       return;
     }
     const loadReleases = async () => {
@@ -453,7 +519,7 @@ var HelmInstallWizard = ({
     if (hasResumedInstallation.current) {
       return;
     }
-    if (!initialInstallOptionsId || !getInstallOptionsAction || step !== 2) {
+    if (!initialInstallOptionsId || !getInstallOptionsAction) {
       return;
     }
     hasResumedInstallation.current = true;
@@ -499,7 +565,7 @@ var HelmInstallWizard = ({
     if (process.env.NODE_ENV === "development") {
       return;
     }
-    if (step !== 2 || !installOptionsId || !getInstallOptionsAction) {
+    if (step !== 3 || !installOptionsId || !getInstallOptionsAction) {
       return;
     }
     if (completedSteps["export_credentials"] && completedSteps["install_chart"]) {
@@ -582,10 +648,8 @@ var HelmInstallWizard = ({
             sequence: firstRelease.channelSequence
           };
         }
-        console.debug("[helm-install-wizard] Transitioning to step 2 (reused service account)");
-        setStep(2);
-        onStepChange?.(2);
-        onInstallOptionsIdChange?.(installOptionsId);
+        setIsWaitingForNavigation(true);
+        onStepChange?.(3);
         return;
       }
       if (typeof window !== "undefined" && window.sessionStorage) {
@@ -599,7 +663,6 @@ var HelmInstallWizard = ({
       setServiceAccountId(saData.service_account.id);
       setOriginalInstanceName(trimmedInstanceName);
       if (createInstallOptionsAction) {
-        console.debug("[helm-install-wizard] Creating install options...");
         const firstRelease = helmReleases[0];
         const installOptionsResult = await createInstallOptionsAction({
           token,
@@ -632,12 +695,9 @@ var HelmInstallWizard = ({
         if (installOptionsResult.instructions) {
           setInstructions(installOptionsResult.instructions);
         }
-        console.debug("[helm-install-wizard] Transitioning to step 2");
-        setStep(2);
+        setIsWaitingForNavigation(true);
       } else {
-        console.debug("[helm-install-wizard] Transitioning to step 2 (no install options)");
-        setStep(2);
-        onStepChange?.(2);
+        onStepChange?.(3);
       }
     } catch (error) {
       console.error("[helm-install-wizard] Failed to continue", error);
@@ -647,6 +707,7 @@ var HelmInstallWizard = ({
       } else {
         setApiError(errorMessage);
       }
+      setIsWaitingForNavigation(false);
     } finally {
       setIsCreatingServiceAccount(false);
     }
@@ -654,12 +715,27 @@ var HelmInstallWizard = ({
   const handleBack = () => {
     setApiError(null);
     setShowErrors(false);
-    setStep(1);
-    onStepChange?.(1);
+    setIsWaitingForNavigation(false);
+    if (step === 2) {
+      const targetStep = hasPreInstall ? 1 : 2;
+      setStep(targetStep);
+      onStepChange?.(targetStep);
+    } else if (step === 3) {
+      setStep(2);
+      onStepChange?.(2);
+    } else if (step === 4) {
+      setStep(3);
+      onStepChange?.(3);
+    }
   };
   const handleFinish = useCallback(async () => {
-    navigateTo("/updates/checking");
-  }, []);
+    if (hasPostInstall) {
+      setStep(4);
+      onStepChange?.(4);
+    } else {
+      navigateTo(completionUrl);
+    }
+  }, [hasPostInstall, completionUrl, onStepChange]);
   const handleReleaseSelect = useCallback((release) => {
     setSelectedRelease(release);
   }, []);
@@ -668,12 +744,221 @@ var HelmInstallWizard = ({
     setInputRegistryHostname(value);
     setPrivateRegistryHostname(value);
   }, []);
+  const totalSteps = (hasPreInstall ? 1 : 0) + 2 + (hasPostInstall ? 1 : 0);
+  const currentDisplayStep = hasPreInstall ? step : step - 1;
+  const handleContinueFromPreInstall = () => {
+    setStep(2);
+    onStepChange?.(2);
+  };
+  const handleCompletePostInstall = () => {
+    navigateTo(completionUrl);
+  };
+  if (step === 1) {
+    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__ */ jsxs("div", { className: "mt-6 flex items-center justify-end text-sm text-gray-500", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Step 1 of ",
+            totalSteps
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleContinueFromPreInstall,
+              className: "ml-4 rounded-xl px-4 py-2 font-medium text-white transition-opacity duration-200 hover:opacity-90",
+              style: { backgroundColor: primaryColor },
+              children: "Continue"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
   if (step === 2) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx(StepIndicator, { step: 2, primaryColor }),
+      /* @__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-6", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [
+              "Instance Name",
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "flex h-4 w-4 items-center justify-center rounded-full border border-gray-300 text-xs text-gray-400 cursor-help",
+                  title: "The instance name is both a nickname for the instance and the name of the service account that we will create for the installation.",
+                  children: "i"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: instanceName,
+                onChange: (event) => setInstanceName(event.target.value),
+                placeholder: "Instance nickname",
+                "aria-invalid": showErrors && !instanceName.trim(),
+                className: `portal-input mt-2 w-48 ${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
+          ] }),
+          apiError ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-800", children: apiError }) : null,
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Kubernetes Distribution" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: kubernetesDistribution,
+                onChange: (e) => setKubernetesDistribution(e.target.value),
+                className: "portal-select mt-2 w-64",
+                children: K8S_DISTRIBUTIONS.map(({ value, label }) => /* @__PURE__ */ jsx("option", { value, children: label }, value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-gray-700", children: "Cluster 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", hidden: !isHelmAirgapEnabled, children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "network-availability",
+                  checked: networkAvailability === "airgap",
+                  onChange: () => setNetworkAvailability("airgap"),
+                  className: "portal-radio"
+                }
+              ),
+              "No outbound requests allowed (air gap)"
+            ] })
+          ] }),
+          networkAvailability === "airgap" && /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-gray-700", children: "Container Registry Access" }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "registry-availability",
+                  checked: registryAccess === "online",
+                  onChange: () => setRegistryAccess("online"),
+                  className: "portal-radio"
+                }
+              ),
+              "Registry is accessible from internet (public)"
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "registry-availability",
+                  checked: registryAccess === "partial",
+                  onChange: () => setRegistryAccess("partial"),
+                  className: "portal-radio"
+                }
+              ),
+              "Registry is accessible from cluster but not internet (private)"
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "registry-availability",
+                  checked: registryAccess === "offline",
+                  onChange: () => setRegistryAccess("offline"),
+                  className: "portal-radio"
+                }
+              ),
+              "Registry is not accessible at all (embedded)"
+            ] })
+          ] })
+        ] }),
+        /* @__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 ",
+            currentDisplayStep,
+            " of ",
+            totalSteps
+          ] }),
+          /* @__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"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  if (step === 3) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__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: networkAvailability === "proxy" ? "Helm Proxy Install" : networkAvailability === "airgap" ? "Helm Air Gap Install" : "Helm Online Install" }),
+          helmInstallUrl && /* @__PURE__ */ jsxs("p", { className: "mt-4 text-sm text-gray-700", children: [
+            "For detailed installation instructions, please see our",
+            " ",
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: helmInstallUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "font-semibold hover:underline",
+                style: { color: secondaryColor },
+                children: [
+                  "Helm 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: [
@@ -724,7 +1009,9 @@ var HelmInstallWizard = ({
                 completedSteps,
                 registryAccess,
                 networkAvailability,
-                primaryColor
+                primaryColor,
+                secondaryColor,
+                valuesOverrideUrl
               }
             )
           ] })
@@ -739,15 +1026,20 @@ var HelmInstallWizard = ({
               children: "Back"
             }
           ),
-          /* @__PURE__ */ jsx("span", { children: "Step 2 of 2" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Step ",
+            currentDisplayStep,
+            " of ",
+            totalSteps
+          ] }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: handleFinish,
-              className: "rounded-xl px-4 py-2 font-medium text-white transition-opacity duration-200 hover:opacity-90",
+              className: "rounded-xl px-4 py-2 font-medium text-white transition hover:opacity-90",
               style: { backgroundColor: primaryColor },
-              children: "Finish"
+              children: hasPostInstall ? "Continue" : "Finish"
             }
           )
         ] }),
@@ -769,148 +1061,42 @@ var HelmInstallWizard = ({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx(StepIndicator, { step, primaryColor }),
-    /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-gray-100 bg-gray-50 p-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [
-            "Instance Name",
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "flex h-4 w-4 items-center justify-center rounded-full border border-gray-300 text-xs text-gray-400 cursor-help",
-                title: "The instance name is both a nickname for the instance and the name of the service account that we will create for the installation.",
-                children: "i"
-              }
-            )
-          ] }),
+  if (step === 4) {
+    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(
-            "input",
+            "button",
             {
-              value: instanceName,
-              onChange: (event) => setInstanceName(event.target.value),
-              placeholder: "Instance nickname",
-              "aria-invalid": showErrors && !instanceName.trim(),
-              className: `portal-input mt-2 w-48 ${showErrors && !instanceName.trim() ? "border-rose-400 focus:border-rose-400 focus:ring-rose-200" : ""}`
+              type: "button",
+              onClick: handleBack,
+              className: "rounded-xl px-4 py-2 font-medium text-gray-500 transition hover:bg-gray-100",
+              children: "Back"
             }
           ),
-          showErrors && !instanceName.trim() ? /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs text-rose-500", children: "Instance name is required." }) : null
-        ] }),
-        apiError ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-800", children: apiError }) : null,
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Kubernetes Distribution" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Step ",
+            currentDisplayStep,
+            " of ",
+            totalSteps
+          ] }),
           /* @__PURE__ */ jsx(
-            "select",
+            "button",
             {
-              value: kubernetesDistribution,
-              onChange: (e) => setKubernetesDistribution(e.target.value),
-              className: "portal-select mt-2 w-64",
-              children: K8S_DISTRIBUTIONS.map(({ value, label }) => /* @__PURE__ */ jsx("option", { value, children: label }, value))
+              type: "button",
+              onClick: handleCompletePostInstall,
+              className: "rounded-xl px-4 py-2 font-medium text-white transition hover:brightness-90",
+              style: { backgroundColor: primaryColor },
+              children: "Complete"
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-gray-700", children: "Cluster 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", hidden: !isHelmAirgapEnabled, 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("fieldset", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-gray-700", children: "Registry Access" }),
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name: "registry-access",
-                checked: registryAccess === "online",
-                onChange: () => setRegistryAccess("online"),
-                className: "portal-radio"
-              }
-            ),
-            "My workstation can access the internet, the registry AND the cluster"
-          ] }),
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name: "registry-access",
-                checked: registryAccess === "partial",
-                onChange: () => setRegistryAccess("partial"),
-                className: "portal-radio"
-              }
-            ),
-            "My workstation can only access the internet AND the registry (NOT the cluster)"
-          ] }),
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-gray-600", hidden: !isHelmAirgapEnabled, children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name: "registry-access",
-                checked: registryAccess === "offline",
-                onChange: () => setRegistryAccess("offline"),
-                className: "portal-radio"
-              }
-            ),
-            "I need to download artifacts and transfer them for offline installation"
-          ] })
         ] })
-      ] }),
-      /* @__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"
-          }
-        )
       ] })
-    ] })
-  ] });
+    ] });
+  }
+  return null;
 };
 HelmInstallWizard.displayName = "HelmInstallWizard";
 
@@ -1066,6 +1252,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 { HELM_INSTALL_SERVICE_ACCOUNT_KEY, HelmInstallWizard, createServiceAccount };
 //# sourceMappingURL=helm-install-wizard.js.map