feat(web): perserve installation progress

web/src/components/wizard/installation/UpgradeStep.tsx

@@ -9,20 +9,21 @@ import InstallationTimeline, { PhaseStatus } from './InstallationTimeline';
 import AppPreflightPhase from './phases/AppPreflightPhase';
 import AppInstallationPhase from './phases/AppInstallationPhase';
 import { NextButtonConfig, BackButtonConfig } from './types';
+import UpgradeInstallationPhase from './phases/UpgradeInstallationPhase';
 
 interface InstallationStepProps {
   onNext: () => void;
   onBack: () => void;
 }
 
 const UpgradeStep: React.FC<InstallationStepProps> = ({ onNext, onBack }) => {
-  const { text } = useWizard();
+  const { text, target } = useWizard();
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
 
   const getPhaseOrder = (): InstallationPhase[] => {
     // Iteration 3: Include app preflights before app installation
-    return ["app-preflight", "app-installation"];
+    return [`${target}-installation`, "app-preflight", "app-installation"];
   };
 
   const phaseOrder = getPhaseOrder();
@@ -127,6 +128,10 @@ const UpgradeStep: React.FC<InstallationStepProps> = ({ onNext, onBack }) => {
     };
 
     switch (phase) {
+      //TODO this is a temporary hack to have an initial phase to trigger the app preflights. Once we support these phases we can removed and delete this component.
+      case 'kubernetes-installation':
+      case 'linux-installation':
+        return <UpgradeInstallationPhase {...commonProps} />
       case 'app-preflight':
         return <AppPreflightPhase {...commonProps} />;
       case 'app-installation':

web/src/components/wizard/installation/phases/UpgradeInstallationPhase.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect } from 'react';
+import { useMutation } from "@tanstack/react-query";
+import { useAuth } from "../../../../contexts/AuthContext";
+import { useWizard } from '../../../../contexts/WizardModeContext';
+import { State } from '../../../../types';
+import ErrorMessage from '../shared/ErrorMessage';
+import { NextButtonConfig, BackButtonConfig } from '../types';
+import { getApiBase } from '../../../../utils/api-base';
+import { ApiError } from '../../../../utils/api-error';
+
+interface KubernetesInstallationPhaseProps {
+  onNext: () => void;
+  onBack: () => void;
+  setNextButtonConfig: (config: NextButtonConfig) => void;
+  setBackButtonConfig: (config: BackButtonConfig) => void;
+  onStateChange: (status: State) => void;
+}
+
+// TODO this is just a placeholder component to trigger the app preflights for the upgrade flow while we're missing the other phases of the upgrade
+const UpgradeInstallationPhase: React.FC<KubernetesInstallationPhaseProps> = ({ onNext, onBack, setNextButtonConfig, setBackButtonConfig, onStateChange }) => {
+  const { token } = useAuth();
+  const { mode, target } = useWizard();
+
+  // Mutation for starting app preflights
+  const { mutate: startAppPreflights, error: startAppPreflightsError } = useMutation({
+    mutationFn: async () => {
+      const apiBase = getApiBase(target, mode);
+      const response = await fetch(`${apiBase}/app-preflights/run`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ isUi: true }),
+      });
+
+      if (!response.ok) {
+        throw await ApiError.fromResponse(response, "Failed to start app preflight checks")
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      onStateChange('Succeeded');
+      onNext();
+    },
+  });
+
+  // Report that step is running when component mounts
+  useEffect(() => {
+    onStateChange('Running');
+  }, []);
+
+  // Report failing state if there is an error starting app preflights
+  useEffect(() => {
+    if (startAppPreflightsError) {
+      onStateChange('Failed');
+    }
+  }, [startAppPreflightsError]);
+
+  // Update next button configuration
+  useEffect(() => {
+    setNextButtonConfig({
+      disabled: false,
+      onClick: () => startAppPreflights(),
+    });
+  }, [setNextButtonConfig]);
+
+  // Update back button configuration
+  useEffect(() => {
+    setBackButtonConfig({
+      hidden: false,
+      onClick: onBack,
+    });
+  }, [setBackButtonConfig, onBack]);
+
+  return (
+    <div className="space-y-6">
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold text-gray-900">Installation</h2>
+        <p className="text-gray-600 mt-1">Start App Upgrade</p>
+      </div>
+
+      <div className="space-y-6">
+        {startAppPreflightsError && <ErrorMessage error={startAppPreflightsError?.message} />}
+      </div>
+    </div>
+  );
+};
+
+export default UpgradeInstallationPhase;