@replicated/portal-components 0.0.1 → 0.0.3

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

@@ -0,0 +1,1007 @@
+import { cache, useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+var navigateTo = (href) => {
+  if (typeof window !== "undefined") {
+    window.location.assign(href);
+  }
+};
+var HELM_INSTALL_SERVICE_ACCOUNT_KEY = "helm_install_service_account";
+var HELM_INSTALL_OPTIONS_KEY = "helm_install_options";
+var K8S_DISTRIBUTIONS = [
+  { value: "vanilla", label: "Vanilla Kubernetes" },
+  { value: "openshift", label: "OpenShift" },
+  { value: "rancher", label: "Rancher" },
+  { value: "aks", label: "Azure AKS" },
+  { 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] = useState(false);
+  const handleCopy = async () => {
+    const success = await copyToClipboard(command);
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `group relative min-w-0 ${className}`, children: [
+    /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-lg bg-gray-900 p-4 text-sm text-gray-100", children: /* @__PURE__ */ jsx("code", { className: "block", children: command }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        className: "absolute right-2 top-2 rounded bg-gray-700 p-1.5 text-gray-300 opacity-0 transition hover:bg-gray-600 hover:text-white group-hover:opacity-100",
+        "aria-label": "Copy to clipboard",
+        children: copied ? /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
+      }
+    )
+  ] });
+};
+var StepIndicator = ({ step }) => /* @__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"}`,
+      children: step > 1 ? /* @__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" })
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-indigo-500" })
+    }
+  ),
+  /* @__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
+    }
+  )
+] });
+var VersionDropdown = ({
+  releases,
+  selectedRelease,
+  onSelect,
+  isLoading,
+  isLoadingInstructions,
+  error
+}) => {
+  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" }),
+      "Loading versions..."
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "ml-8 text-sm text-rose-600", children: [
+      "Failed to load versions: ",
+      error
+    ] });
+  }
+  if (releases.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "ml-8 text-sm text-gray-500", children: "There are no Helm charts in this release." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "ml-8 space-y-2", children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600", children: [
+      "App Version",
+      isLoadingInstructions && /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        value: selectedRelease?.channelSequence ?? "",
+        onChange: (e) => {
+          const sequence = parseInt(e.target.value, 10);
+          const release = releases.find((r) => r.channelSequence === sequence);
+          if (release) {
+            onSelect(release);
+          }
+        },
+        className: "portal-select w-full",
+        children: releases.map((release) => /* @__PURE__ */ jsxs("option", { value: release.channelSequence, children: [
+          release.versionLabel || `Sequence ${release.channelSequence}`,
+          release.channelName ? ` (${release.channelName})` : ""
+        ] }, release.channelSequence))
+      }
+    )
+  ] });
+};
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) });
+var parsePartialRegistryCommands = (commands) => {
+  const pullCommands = [];
+  const filesToTransfer = [];
+  const installCommands = [];
+  let section = "pull";
+  for (const cmd of commands) {
+    if (cmd.startsWith("# Transfer the following files")) {
+      section = "files";
+      continue;
+    }
+    if (cmd.startsWith("# - ")) {
+      filesToTransfer.push(cmd.replace("# - ", ""));
+      continue;
+    }
+    if (cmd.startsWith("helm install") || cmd.startsWith("helm upgrade")) {
+      section = "install";
+      installCommands.push(cmd);
+      continue;
+    }
+    if (section === "pull" && cmd.startsWith("helm pull")) {
+      pullCommands.push(cmd);
+    }
+  }
+  return { pullCommands, filesToTransfer, installCommands };
+};
+var InstallationInstructions = ({
+  instructions,
+  isLoading,
+  completedSteps = {},
+  registryAccess = "online",
+  networkAvailability = "online"
+}) => {
+  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: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-500" }),
+      "Loading instructions..."
+    ] }) });
+  }
+  if (!instructions?.steps?.length) {
+    return null;
+  }
+  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-150 ${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) => {
+    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__ */ 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: "font-medium text-gray-900", children: step.title }),
+        canComplete && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `flex h-5 w-5 items-center justify-center rounded-full ${isCompleted ? "bg-green-500 text-white" : "bg-gray-200 text-gray-400"}`,
+            children: /* @__PURE__ */ jsx(CheckIcon, {})
+          }
+        ),
+        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 }),
+      isPartialInstallChart && step.commands.length > 0 ? (() => {
+        const { pullCommands, filesToTransfer, installCommands } = parsePartialRegistryCommands(step.commands);
+        return /* @__PURE__ */ jsxs("div", { className: "ml-8 space-y-4", children: [
+          pullCommands.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "On workstation with registry access:" }),
+            /* @__PURE__ */ jsx(CodeBlock, { command: pullCommands.join("\n") })
+          ] }),
+          filesToTransfer.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "Transfer the following files to machine with cluster access:" }),
+            /* @__PURE__ */ jsx(CodeBlock, { command: filesToTransfer.join("\n") })
+          ] }),
+          installCommands.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "On machine with cluster access:" }),
+            /* @__PURE__ */ jsx(CodeBlock, { command: installCommands.join("\n") })
+          ] })
+        ] });
+      })() : step.commands.length > 0 ? /* @__PURE__ */ jsx(CodeBlock, { command: step.commands.join("\n"), className: "ml-8 mt-2" }) : null
+    ] }, step.step_number);
+  }) }) });
+};
+var HelmInstallWizard = ({
+  token,
+  createServiceAccountAction,
+  fetchChannelReleasesAction,
+  createInstallOptionsAction,
+  getInstallOptionsAction,
+  updateInstallOptionsAction,
+  onStepChange,
+  onInstallOptionsIdChange,
+  initialStep,
+  initialInstallOptionsId,
+  initialInstallOptionsData,
+  initialChannelReleases
+}) => {
+  const [step, setStep] = useState(initialStep ?? 1);
+  const [instanceName, setInstanceName] = useState(initialInstallOptionsData?.instance_name ?? "");
+  const [kubernetesDistribution, setKubernetesDistribution] = useState(
+    initialInstallOptionsData?.kubernetes_distribution ?? "vanilla"
+  );
+  const [networkAvailability, setNetworkAvailability] = useState(
+    initialInstallOptionsData?.network_availability ?? "online"
+  );
+  const [registryAccess, setRegistryAccess] = useState(
+    initialInstallOptionsData?.registry_availability ?? "online"
+  );
+  const [showErrors, setShowErrors] = useState(false);
+  const [isCreatingServiceAccount, setIsCreatingServiceAccount] = useState(false);
+  const [apiError, setApiError] = useState(null);
+  const [installOptionsId, setInstallOptionsId] = useState(initialInstallOptionsId ?? null);
+  const [serviceAccountId, setServiceAccountId] = useState(initialInstallOptionsData?.service_account_id ?? null);
+  const [originalInstanceName, setOriginalInstanceName] = useState(initialInstallOptionsData?.instance_name ?? null);
+  const [releases, setReleases] = useState(initialChannelReleases ?? []);
+  const [selectedRelease, setSelectedRelease] = useState(() => {
+    if (initialInstallOptionsData?.channel_id && initialInstallOptionsData?.channel_release_sequence && initialChannelReleases) {
+      return initialChannelReleases.find(
+        (r) => r.channelId === initialInstallOptionsData.channel_id && r.channelSequence === initialInstallOptionsData.channel_release_sequence
+      ) ?? null;
+    }
+    return null;
+  });
+  const [isLoadingReleases, setIsLoadingReleases] = useState(false);
+  const [releasesError, setReleasesError] = useState(null);
+  const [instructions, setInstructions] = useState(initialInstallOptionsData?.instructions ?? null);
+  const [isLoadingInstructions, setIsLoadingInstructions] = useState(false);
+  const [inputRegistryHostname, setInputRegistryHostname] = useState("");
+  const [privateRegistryHostname, setPrivateRegistryHostname] = useState("");
+  const registryDebounceRef = useRef(null);
+  const [completedSteps, setCompletedSteps] = useState({});
+  const hasInitializedFromProps = useRef(!!initialInstallOptionsData);
+  useEffect(() => {
+    if (hasInitializedFromProps.current || !initialInstallOptionsData) {
+      return;
+    }
+    hasInitializedFromProps.current = true;
+    if (initialInstallOptionsData.instance_name) {
+      setInstanceName(initialInstallOptionsData.instance_name);
+      setOriginalInstanceName(initialInstallOptionsData.instance_name);
+    }
+    if (initialInstallOptionsData.kubernetes_distribution) {
+      setKubernetesDistribution(initialInstallOptionsData.kubernetes_distribution);
+    }
+    if (initialInstallOptionsData.network_availability) {
+      setNetworkAvailability(initialInstallOptionsData.network_availability);
+    }
+    if (initialInstallOptionsData.registry_availability) {
+      setRegistryAccess(initialInstallOptionsData.registry_availability);
+    }
+    if (initialInstallOptionsData.service_account_id) {
+      setServiceAccountId(initialInstallOptionsData.service_account_id);
+    }
+    if (initialInstallOptionsData.instructions) {
+      setInstructions(initialInstallOptionsData.instructions);
+    }
+  }, [initialInstallOptionsData]);
+  const hasLoadedReleases = useRef(!!initialChannelReleases?.length);
+  const hasResumedInstallation = useRef(!!initialInstallOptionsData);
+  const helmReleases = useMemo(() => {
+    return releases.filter((r) => r.installationTypes?.helm);
+  }, [releases]);
+  const prevInitialStepRef = useRef(initialStep);
+  useEffect(() => {
+    if (initialStep !== void 0 && initialStep !== prevInitialStepRef.current) {
+      setStep(initialStep);
+    }
+    prevInitialStepRef.current = initialStep;
+  }, [initialStep]);
+  useEffect(() => {
+    onStepChange?.(step);
+  }, [step, onStepChange]);
+  const prevInstallOptionsIdRef = useRef(installOptionsId);
+  useEffect(() => {
+    if (installOptionsId !== prevInstallOptionsIdRef.current) {
+      prevInstallOptionsIdRef.current = installOptionsId;
+      onInstallOptionsIdChange?.(installOptionsId);
+    }
+  }, [installOptionsId, onInstallOptionsIdChange]);
+  useEffect(() => {
+    if (step !== 2 || !fetchChannelReleasesAction || hasLoadedReleases.current) {
+      return;
+    }
+    const loadReleases = async () => {
+      setIsLoadingReleases(true);
+      setReleasesError(null);
+      try {
+        const result = await fetchChannelReleasesAction(token);
+        setReleases(result.channelReleases || []);
+        hasLoadedReleases.current = true;
+        const helmReleasesFiltered = (result.channelReleases || []).filter(
+          (r) => r.installationTypes?.helm
+        );
+        const firstRelease = helmReleasesFiltered[0];
+        if (firstRelease && !selectedRelease) {
+          setSelectedRelease(firstRelease);
+        }
+      } catch (error) {
+        console.error("[helm-install-wizard] Failed to load releases", error);
+        setReleasesError(error instanceof Error ? error.message : "Failed to load releases");
+      } finally {
+        setIsLoadingReleases(false);
+      }
+    };
+    loadReleases();
+  }, [step, token, fetchChannelReleasesAction, selectedRelease]);
+  const hasAutoSelectedRelease = useRef(false);
+  useEffect(() => {
+    if (hasAutoSelectedRelease.current || selectedRelease) {
+      return;
+    }
+    const firstRelease = helmReleases[0];
+    if (step === 2 && firstRelease) {
+      setSelectedRelease(firstRelease);
+      hasAutoSelectedRelease.current = true;
+    }
+  }, [step, helmReleases, selectedRelease]);
+  const lastReleaseUpdateRef = useRef({
+    channelId: initialInstallOptionsData?.channel_id,
+    sequence: initialInstallOptionsData?.channel_release_sequence
+  });
+  useEffect(() => {
+    if (!selectedRelease || !installOptionsId || !updateInstallOptionsAction) {
+      return;
+    }
+    const channelId = selectedRelease.channelId;
+    const sequence = selectedRelease.channelSequence;
+    if (lastReleaseUpdateRef.current.channelId === channelId && lastReleaseUpdateRef.current.sequence === sequence) {
+      return;
+    }
+    const updateOptions = async () => {
+      setIsLoadingInstructions(true);
+      try {
+        const result = await updateInstallOptionsAction({
+          token,
+          installOptionsId,
+          channelId,
+          channelReleaseSequence: sequence,
+          networkAvailability,
+          registryAvailability: registryAccess,
+          includeInstructions: true,
+          privateRegistryHostname: privateRegistryHostname || void 0
+        });
+        lastReleaseUpdateRef.current = { channelId, sequence };
+        if (result.instructions) {
+          setInstructions(result.instructions);
+        }
+      } catch (error) {
+        console.error("[helm-install-wizard] Failed to update install options", error);
+        setApiError(error instanceof Error ? error.message : "Failed to update install options");
+      } finally {
+        setIsLoadingInstructions(false);
+      }
+    };
+    updateOptions();
+  }, [selectedRelease, installOptionsId, token, updateInstallOptionsAction, networkAvailability, registryAccess, privateRegistryHostname]);
+  const lastPrivateRegistryRef = useRef("");
+  useEffect(() => {
+    if (networkAvailability !== "airgap" || !installOptionsId || !getInstallOptionsAction) {
+      return;
+    }
+    const currentValue = privateRegistryHostname || "";
+    if (lastPrivateRegistryRef.current === currentValue) {
+      return;
+    }
+    lastPrivateRegistryRef.current = currentValue;
+    const refreshInstructions = async () => {
+      setIsLoadingInstructions(true);
+      try {
+        const result = await getInstallOptionsAction({
+          token,
+          installOptionsId,
+          includeInstructions: true,
+          privateRegistryHostname: currentValue || void 0
+        });
+        if (result.instructions) {
+          setInstructions(result.instructions);
+        }
+      } catch (error) {
+        console.error("[helm-install-wizard] Failed to refresh instructions", error);
+      } finally {
+        setIsLoadingInstructions(false);
+      }
+    };
+    refreshInstructions();
+  }, [privateRegistryHostname, networkAvailability, installOptionsId, token, getInstallOptionsAction]);
+  useEffect(() => {
+    if (hasResumedInstallation.current) {
+      return;
+    }
+    if (!initialInstallOptionsId || !getInstallOptionsAction || step !== 2) {
+      return;
+    }
+    hasResumedInstallation.current = true;
+    const resumeInstallation = async () => {
+      setIsLoadingInstructions(true);
+      try {
+        const result = await getInstallOptionsAction({
+          token,
+          installOptionsId: initialInstallOptionsId,
+          includeInstructions: true
+        });
+        if (result.instance_name) {
+          setInstanceName(result.instance_name);
+        }
+        if (result.service_account_id) {
+          setServiceAccountId(result.service_account_id);
+        }
+        if (result.instructions) {
+          setInstructions(result.instructions);
+        }
+        if (result.channel_id && result.channel_release_sequence) {
+          const matchingRelease = releases.find(
+            (r) => r.channelId === result.channel_id && r.channelSequence === result.channel_release_sequence
+          );
+          if (matchingRelease) {
+            setSelectedRelease(matchingRelease);
+            lastReleaseUpdateRef.current = {
+              channelId: result.channel_id,
+              sequence: result.channel_release_sequence
+            };
+          }
+        }
+      } catch (error) {
+        console.error("[helm-install-wizard] Failed to resume installation", error);
+        setApiError(error instanceof Error ? error.message : "Failed to resume installation");
+      } finally {
+        setIsLoadingInstructions(false);
+      }
+    };
+    resumeInstallation();
+  }, [initialInstallOptionsId, getInstallOptionsAction, step, token, releases]);
+  useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      return;
+    }
+    if (step !== 2 || !installOptionsId || !getInstallOptionsAction) {
+      return;
+    }
+    if (completedSteps["export_credentials"] && completedSteps["install_chart"]) {
+      return;
+    }
+    const pollInterval = setInterval(async () => {
+      try {
+        const result = await getInstallOptionsAction({
+          token,
+          installOptionsId,
+          includeInstructions: false
+          // We don't need instructions for status polling
+        });
+        const newCompletedSteps = {};
+        if (result.registry_authenticated_at) {
+          newCompletedSteps["export_credentials"] = true;
+        }
+        if (result.images_pulled_at) {
+          newCompletedSteps["install_chart"] = true;
+        }
+        if (newCompletedSteps["export_credentials"] !== completedSteps["export_credentials"] || newCompletedSteps["install_chart"] !== completedSteps["install_chart"]) {
+          setCompletedSteps((prev) => ({ ...prev, ...newCompletedSteps }));
+        }
+        if (newCompletedSteps["export_credentials"] && newCompletedSteps["install_chart"]) {
+          clearInterval(pollInterval);
+        }
+      } catch {
+      }
+    }, 2e3);
+    return () => clearInterval(pollInterval);
+  }, [step, installOptionsId, getInstallOptionsAction, token, completedSteps]);
+  const handleContinue = async () => {
+    if (!instanceName.trim()) {
+      setShowErrors(true);
+      return;
+    }
+    if (!token) {
+      setApiError("Configuration error: authentication token is required");
+      console.error("[helm-install-wizard] token prop is required but was not provided");
+      return;
+    }
+    setShowErrors(false);
+    setApiError(null);
+    setIsCreatingServiceAccount(true);
+    try {
+      const trimmedInstanceName = instanceName.trim();
+      if (serviceAccountId && originalInstanceName === trimmedInstanceName && installOptionsId && updateInstallOptionsAction) {
+        const firstRelease = helmReleases[0];
+        if (networkAvailability !== "airgap") {
+          setInputRegistryHostname("");
+          setPrivateRegistryHostname("");
+          lastPrivateRegistryRef.current = "";
+        }
+        setInstructions(null);
+        await updateInstallOptionsAction({
+          token,
+          installOptionsId,
+          installType: "helm",
+          channelId: firstRelease?.channelId,
+          channelReleaseSequence: firstRelease?.channelSequence,
+          networkAvailability,
+          registryAvailability: registryAccess,
+          kubernetesDistribution,
+          isMultiNode: true,
+          serviceAccountId,
+          includeInstructions: false
+          // Don't need instructions from PATCH
+        });
+        if (getInstallOptionsAction) {
+          const freshData = await getInstallOptionsAction({
+            token,
+            installOptionsId,
+            includeInstructions: true
+          });
+          setInstructions(freshData.instructions ?? null);
+        }
+        if (firstRelease) {
+          setSelectedRelease(firstRelease);
+          lastReleaseUpdateRef.current = {
+            channelId: firstRelease.channelId,
+            sequence: firstRelease.channelSequence
+          };
+        }
+        console.debug("[helm-install-wizard] Transitioning to step 2 (reused service account)");
+        setStep(2);
+        onInstallOptionsIdChange?.(installOptionsId);
+        return;
+      }
+      if (typeof window !== "undefined" && window.sessionStorage) {
+        window.sessionStorage.removeItem(HELM_INSTALL_SERVICE_ACCOUNT_KEY);
+        window.sessionStorage.removeItem(HELM_INSTALL_OPTIONS_KEY);
+      }
+      const saData = await createServiceAccountAction(trimmedInstanceName, token);
+      if (typeof window !== "undefined" && window.sessionStorage) {
+        window.sessionStorage.setItem(HELM_INSTALL_SERVICE_ACCOUNT_KEY, JSON.stringify(saData));
+      }
+      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,
+          installType: "helm",
+          instanceName: trimmedInstanceName,
+          serviceAccountId: saData.service_account.id,
+          networkAvailability,
+          registryAvailability: registryAccess,
+          kubernetesDistribution,
+          isMultiNode: true,
+          // Helm installations are always multi-node
+          channelId: firstRelease?.channelId,
+          channelReleaseSequence: firstRelease?.channelSequence
+        });
+        if (firstRelease) {
+          setSelectedRelease(firstRelease);
+          lastReleaseUpdateRef.current = {
+            channelId: firstRelease.channelId,
+            sequence: firstRelease.channelSequence
+          };
+        }
+        const optionsId = installOptionsResult.install_options?.id ?? installOptionsResult.id;
+        if (!optionsId) {
+          throw new Error("Install options response did not contain an ID");
+        }
+        setInstallOptionsId(optionsId);
+        if (typeof window !== "undefined" && window.sessionStorage) {
+          window.sessionStorage.setItem(HELM_INSTALL_OPTIONS_KEY, JSON.stringify(installOptionsResult));
+        }
+        if (installOptionsResult.instructions) {
+          setInstructions(installOptionsResult.instructions);
+        }
+        onInstallOptionsIdChange?.(optionsId);
+      }
+      console.debug("[helm-install-wizard] Transitioning to step 2");
+      setStep(2);
+      onStepChange?.(2);
+    } catch (error) {
+      console.error("[helm-install-wizard] Failed to continue", error);
+      const errorMessage = error instanceof Error ? error.message : "Failed to continue";
+      if (errorMessage.toLowerCase().includes("already exists")) {
+        setApiError("Instance name must be unique. Please choose a different name.");
+      } else {
+        setApiError(errorMessage);
+      }
+    } finally {
+      setIsCreatingServiceAccount(false);
+    }
+  };
+  const handleBack = () => {
+    setApiError(null);
+    setShowErrors(false);
+    setStep(1);
+    onStepChange?.(1);
+  };
+  const handleFinish = useCallback(async () => {
+    navigateTo("/update");
+  }, []);
+  const handleReleaseSelect = useCallback((release) => {
+    setSelectedRelease(release);
+  }, []);
+  const handlePrivateRegistryHostnameChange = useCallback((e) => {
+    const value = e.target.value;
+    setInputRegistryHostname(value);
+    if (registryDebounceRef.current) {
+      clearTimeout(registryDebounceRef.current);
+    }
+    registryDebounceRef.current = setTimeout(() => {
+      setPrivateRegistryHostname(value);
+    }, 1e3);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (registryDebounceRef.current) {
+        clearTimeout(registryDebounceRef.current);
+      }
+    };
+  }, []);
+  if (step === 2) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(StepIndicator, { step: 2 }),
+      /* @__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" }),
+          /* @__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__ */ jsx("span", { className: "font-medium text-gray-900", children: "Select a version" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                VersionDropdown,
+                {
+                  releases: helmReleases,
+                  selectedRelease,
+                  onSelect: handleReleaseSelect,
+                  isLoading: isLoadingReleases,
+                  isLoadingInstructions,
+                  error: releasesError
+                }
+              )
+            ] }),
+            networkAvailability === "airgap" && selectedRelease && /* @__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__ */ jsx("span", { className: "font-medium text-gray-900", children: "(Optional) Specify registry URI" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ml-8", children: [
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mb-2", children: [
+                  "Specify your registry URI to replace ",
+                  /* @__PURE__ */ jsx("code", { className: "bg-gray-100 px-1 rounded text-gray-700", children: "$YOUR_PRIVATE_REGISTRY" }),
+                  " in the commands below."
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: inputRegistryHostname,
+                    onChange: handlePrivateRegistryHostnameChange,
+                    placeholder: "your.registry.com",
+                    className: "portal-input w-64"
+                  }
+                )
+              ] })
+            ] }),
+            selectedRelease && /* @__PURE__ */ jsx(
+              InstallationInstructions,
+              {
+                instructions,
+                isLoading: isLoadingInstructions,
+                completedSteps,
+                registryAccess,
+                networkAvailability
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "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 2 of 2" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleFinish,
+              className: "rounded-xl bg-indigo-500 px-4 py-2 font-medium text-white transition hover:bg-indigo-600",
+              children: "Finish"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-center text-xs text-gray-400", children: [
+          "Having trouble? ",
+          /* @__PURE__ */ jsx("a", { className: "text-indigo-500", href: "#", children: "Open an issue." })
+        ] })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(StepIndicator, { step }),
+    /* @__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", 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", 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 bg-indigo-500 px-4 py-2 font-medium text-white transition hover:bg-indigo-600 disabled:cursor-not-allowed disabled:opacity-50",
+            children: isCreatingServiceAccount ? "Creating..." : "Continue"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+HelmInstallWizard.displayName = "HelmInstallWizard";
+
+// src/utils/api-client.ts
+async function authenticatedFetch(url, options = {}) {
+  const { token, ...fetchOptions } = options;
+  const headers = new Headers(fetchOptions.headers);
+  if (token) {
+    headers.set("authorization", `Bearer ${token}`);
+  }
+  const response = await fetch(url, {
+    ...fetchOptions,
+    headers
+  });
+  if (response.status === 401) {
+    await handle401();
+  }
+  if (response.status === 502 || response.status === 503 || response.status === 504) {
+    await handleServerError(response.status);
+  }
+  return response;
+}
+async function handle401() {
+  const { redirect } = await import('next/navigation');
+  return redirect("/?expired=1");
+}
+async function handleServerError(statusCode) {
+  const { redirect } = await import('next/navigation');
+  let sourceUrl;
+  try {
+    const { headers } = await import('next/headers');
+    const headersList = await headers();
+    const referer = headersList.get("referer");
+    const host = headersList.get("host");
+    const pathname = headersList.get("x-invoke-path") || headersList.get("x-forwarded-path");
+    if (referer) {
+      sourceUrl = referer;
+    } else if (host && pathname) {
+      const protocol = headersList.get("x-forwarded-proto") || "https";
+      sourceUrl = `${protocol}://${host}${pathname}`;
+    }
+  } catch (error) {
+    console.debug("[portal-components] Could not determine source URL", error);
+  }
+  const params = new URLSearchParams({ code: String(statusCode) });
+  if (sourceUrl) {
+    params.set("source", sourceUrl);
+  }
+  return redirect(`/error?${params.toString()}`);
+}
+
+// src/actions/index.ts
+var getApiOrigin = () => {
+  return (process.env.REPLICATED_APP_ORIGIN || "https://replicated.app").replace(/\/+$/, "");
+};
+var defineServerAction = (definition) => definition;
+var createServiceAccount = defineServerAction({
+  id: "service-account/create",
+  description: "Creates a service account for installing applications",
+  visibility: "customer",
+  tags: ["service-account", "install"],
+  async run({ token, name }) {
+    if (!token || typeof token !== "string") {
+      throw new Error("Service account creation requires a session token");
+    }
+    if (!name || typeof name !== "string" || !name.trim()) {
+      throw new Error("Service account name is required");
+    }
+    const endpoint = `${getApiOrigin()}/v3/service-account`;
+    if (process.env.NODE_ENV !== "production") {
+      console.debug(
+        "[portal-components] creating service account via %s",
+        endpoint
+      );
+    }
+    const response = await authenticatedFetch(endpoint, {
+      method: "POST",
+      token,
+      headers: {
+        "content-type": "application/json"
+      },
+      body: JSON.stringify({ account_name: name.trim() })
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(
+        `Service account creation failed (${response.status} ${response.statusText}): ${errorText}`
+      );
+    }
+    const data = await response.json();
+    return data;
+  }
+});
+var fetchCustomBrandingImpl = async () => {
+  const appSlug = process.env.PORTAL_APP_SLUG;
+  if (!appSlug) {
+    throw new Error("PORTAL_APP_SLUG is not configured");
+  }
+  const url = `${getApiOrigin()}/v3/custom-branding?app_slug=${encodeURIComponent(
+    appSlug
+  )}`;
+  if (process.env.NODE_ENV !== "production") {
+    console.debug(
+      "[portal-components] fetching custom branding via %s",
+      url
+    );
+  }
+  const response = await fetch(url, {
+    headers: {
+      accept: "application/json"
+    }
+  });
+  if (!response.ok) {
+    throw new Error(
+      `Custom branding request failed (${response.status} ${response.statusText})`
+    );
+  }
+  const payload = await response.json();
+  const brandingData = payload?.branding_data;
+  if (typeof brandingData !== "string") {
+    throw new Error("Custom branding response missing branding_data string");
+  }
+  return {
+    brandingData,
+    documentation: payload?.documentation ?? null
+  };
+};
+cache(fetchCustomBrandingImpl);
+
+export { HELM_INSTALL_SERVICE_ACCOUNT_KEY, HelmInstallWizard, createServiceAccount };
+//# sourceMappingURL=helm-install-wizard.js.map
+//# sourceMappingURL=helm-install-wizard.js.map