feat(web): add initial upgrade flow (#2955)

* feat(web): add initial upgrade flow

* chore: address linting issues

* chore: cleanup console.log

* chore: change the default back

Author: JGAntunes

web/src/components/wizard/InstallWizard.tsx

@@ -5,6 +5,7 @@ import ConfigurationStep from "./config/ConfigurationStep";
 import LinuxSetupStep from "./setup/LinuxSetupStep";
 import KubernetesSetupStep from "./setup/KubernetesSetupStep";
 import InstallationStep from "./installation/InstallationStep";
+import UpgradeStep from "./installation/UpgradeStep";
 import LinuxCompletionStep from "./completion/LinuxCompletionStep";
 import KubernetesCompletionStep from "./completion/KubernetesCompletionStep";
 import { WizardStep } from "../../types";
@@ -13,26 +14,28 @@ import { useWizard } from "../../contexts/WizardModeContext";
 
 const InstallWizard: React.FC = () => {
   const [currentStep, setCurrentStep] = useState<WizardStep>("welcome");
-  const { text, target } = useWizard();
+  const { text, target, mode } = useWizard();
+  let steps: WizardStep[] = []
 
-  const getSteps = (): WizardStep[] => {
-    if (target === "kubernetes") {
-      return ["welcome", "configuration", "kubernetes-setup", "installation", "kubernetes-completion"];
-    } else {
-      return ["welcome", "configuration", "linux-setup", "installation", "linux-completion"];
-    }
+  // TODO Upgrade
+  // Iteration 1:
+  // - Remove configuration step for upgrades for now
+  // - There's no setup step for upgrades
+  if (mode == "upgrade") {
+    steps = ["welcome", "installation", `${target}-completion`]
+  } else {
+    // install steps
+    steps = ["welcome", "configuration", `${target}-setup`, "installation", `${target}-completion`]
   }
 
   const goToNextStep = () => {
-    const steps = getSteps();
     const currentIndex = steps.indexOf(currentStep);
     if (currentIndex < steps.length - 1) {
       setCurrentStep(steps[currentIndex + 1]);
     }
   };
 
   const goToPreviousStep = () => {
-    const steps = getSteps();
     const currentIndex = steps.indexOf(currentStep);
     if (currentIndex > 0) {
       setCurrentStep(steps[currentIndex - 1]);
@@ -50,6 +53,10 @@ const InstallWizard: React.FC = () => {
       case "kubernetes-setup":
         return <KubernetesSetupStep onNext={goToNextStep} onBack={goToPreviousStep} />;
       case "installation":
+        // TODO Upgrade use a dedicated upgrade component while we work on making the upgrade flow similar to installation
+        if (mode == "upgrade") {
+          return <UpgradeStep onNext={goToNextStep} onBack={goToPreviousStep} />;
+        }
         return <InstallationStep onNext={goToNextStep} onBack={goToPreviousStep} />;
       case "linux-completion":
         return <LinuxCompletionStep />;
@@ -80,7 +87,7 @@ const InstallWizard: React.FC = () => {
 
       <main className="grow">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <StepNavigation currentStep={currentStep} />
+          <StepNavigation currentStep={currentStep} enabledSteps={steps} />
           <div className="mt-8">{renderStep()}</div>
         </div>
       </main>

web/src/components/wizard/StepNavigation.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { WizardStep } from '../../types';
+import { WizardMode } from '../../types/wizard-mode.ts';
 import { ClipboardList, Settings, Download, CheckCircle, Server } from 'lucide-react';
 import { useWizard } from '../../contexts/WizardModeContext';
 import { useSettings } from '../../contexts/SettingsContext';
 
 interface StepNavigationProps {
   currentStep: WizardStep;
+  enabledSteps: WizardStep[];
 }
 
 interface NavigationStep {
@@ -16,32 +18,28 @@ interface NavigationStep {
   parentId?: WizardStep;
 }
 
-const StepNavigation: React.FC<StepNavigationProps> = ({ currentStep: currentStepId }) => {
-  const { mode, target } = useWizard();
+const getNavigationSteps = (mode: WizardMode): NavigationStep[] => {
+  return [
+    { id: 'welcome', name: 'Welcome', icon: ClipboardList },
+    { id: 'configuration', name: 'Configuration', icon: Server },
+    { id: 'linux-setup', name: 'Setup', icon: Settings },
+    { id: 'kubernetes-setup', name: 'Setup', icon: Settings },
+    { id: 'installation', name: mode === 'upgrade' ? 'Upgrade' : 'Installation', icon: Download },
+    { id: 'kubernetes-completion', name: 'Completion', icon: CheckCircle },
+    { id: 'linux-completion', name: 'Completion', icon: CheckCircle },
+  ]
+}
+
+const StepNavigation: React.FC<StepNavigationProps> = ({ currentStep: currentStepId, enabledSteps }) => {
+  const { mode } = useWizard();
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
 
-  const getSteps = (): NavigationStep[] => {
-    if (target === 'kubernetes') {
-      return [
-        { id: 'welcome', name: 'Welcome', icon: ClipboardList },
-        { id: 'configuration', name: 'Configuration', icon: Server },
-        { id: 'kubernetes-setup', name: 'Setup', icon: Settings },
-        { id: 'installation', name: mode === 'upgrade' ? 'Upgrade' : 'Installation', icon: Download },
-        { id: 'kubernetes-completion', name: 'Completion', icon: CheckCircle },
-      ];
-    } else {
-      return [
-        { id: 'welcome', name: 'Welcome', icon: ClipboardList },
-        { id: 'configuration', name: 'Configuration', icon: Server },
-        { id: 'linux-setup', name: 'Setup', icon: Settings },
-        { id: 'installation', name: mode === 'upgrade' ? 'Upgrade' : 'Installation', icon: Download },
-        { id: 'linux-completion', name: 'Completion', icon: CheckCircle },
-      ];
-    }
-  }
+  // Get the navigation steps for this wizard mode and then filter them, removing steps the wizard isn't
+  // configured to use
+  const steps = getNavigationSteps(mode)
+    .filter(({ id: navId }) => enabledSteps.includes(navId));
 
-  const steps = getSteps();
   const currentStep = steps.find(step => step.id === currentStepId);
 
   const getStepStatus = (step: NavigationStep) => {
@@ -89,4 +87,4 @@ const StepNavigation: React.FC<StepNavigationProps> = ({ currentStep: currentSte
   );
 };
 
-export default StepNavigation;
+export default StepNavigation;

web/src/components/wizard/config/ConfigurationStep.tsx

@@ -16,6 +16,7 @@ import { ChevronRight, Loader2 } from 'lucide-react';
 import { handleUnauthorized } from '../../../utils/auth';
 import { useDebouncedFetch } from '../../../utils/debouncedFetch';
 import { AppConfig, AppConfigGroup, AppConfigItem, AppConfigValues } from '../../../types';
+import { getApiBase } from '../../../utils/api-base';
 
 
 interface ConfigurationStepProps {
@@ -27,7 +28,7 @@ interface ConfigError extends Error {
 }
 
 const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
-  const { text, target } = useWizard();
+  const { text, target, mode } = useWizard();
   const { token } = useAuth();
   const { settings } = useSettings();
   const [activeTab, setActiveTab] = useState<string>('');
@@ -157,7 +158,8 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
   // Mutation to save config values
   const { mutate: submitConfigValues } = useMutation<void, ConfigError>({
     mutationFn: async () => {
-      const response = await fetch(`/api/${target}/install/app/config/values`, {
+      const apiBase = getApiBase(target, mode);
+      const response = await fetch(`${apiBase}/app/config/values`, {
         method: 'PATCH',
         headers: {
           'Content-Type': 'application/json',

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

@@ -44,41 +44,38 @@ const InstallationTimeline: React.FC<InstallationTimelineProps> = ({
   return (
     <div className="w-80 bg-gray-50 border-r border-gray-200 p-6">
       <h3 className="text-lg font-medium text-gray-900 mb-6" data-testid="timeline-title">Installation Progress</h3>
-      
+
       <div className="space-y-6">
         {phaseOrder.map((phaseKey) => {
           const phase = phases[phaseKey];
           const isActive = currentPhase === phaseKey;
           const isSelected = selectedPhase === phaseKey;
           const isFailed = phase.status === 'Failed';
           const isClickable = phase.status !== 'Pending';
-          
+
           return (
             <div key={phaseKey} className="relative">
               <button
-                className={`flex items-start space-x-3 text-left w-full p-2 rounded-md transition-colors ${
-                  isClickable ? 'hover:bg-gray-100 cursor-pointer' : 'cursor-default'
-                } ${isSelected ? 'bg-blue-50 border border-blue-200' : ''}`}
+                className={`flex items-start space-x-3 text-left w-full p-2 rounded-md transition-colors ${isClickable ? 'hover:bg-gray-100 cursor-pointer' : 'cursor-default'
+                  } ${isSelected ? 'bg-blue-50 border border-blue-200' : ''}`}
                 onClick={() => isClickable && onPhaseClick(phaseKey)}
                 disabled={!isClickable}
                 data-testid={`timeline-${phaseKey}`}
               >
                 <div className="shrink-0 mt-0.5">
                   {getStatusIcon(phase.status)}
                 </div>
-                
+
                 <div className="grow min-w-0">
-                  <h4 className={`text-sm font-medium ${
-                    isSelected ? 'text-gray-900' : isActive ? 'text-gray-900' : phase.status === 'Succeeded' ? 'text-gray-700' : 'text-gray-600'
-                  }`}>
+                  <h4 className={`text-sm font-medium ${isSelected ? 'text-gray-900' : isActive ? 'text-gray-900' : phase.status === 'Succeeded' ? 'text-gray-700' : 'text-gray-600'
+                    }`}>
                     {phase.title}
                   </h4>
-                  <p className={`text-xs mt-1 ${
-                    isSelected ? 'text-gray-600' : isActive ? 'text-gray-600' : 'text-gray-500'
-                  }`}>
+                  <p className={`text-xs mt-1 ${isSelected ? 'text-gray-600' : isActive ? 'text-gray-600' : 'text-gray-500'
+                    }`}>
                     {phase.description}
                   </p>
-                  
+
                   {isFailed && phase.error && (
                     <p className="text-xs text-red-600 mt-1">{phase.error}</p>
                   )}
@@ -92,4 +89,4 @@ const InstallationTimeline: React.FC<InstallationTimelineProps> = ({
   );
 };
 
-export default InstallationTimeline;
+export default InstallationTimeline;