fix(web): completion step fails for V3 upgrades (#3108)

Author: JGAntunes

web/src/components/wizard/completion/KubernetesCompletionStep.tsx renamed to web/src/components/wizard/CompletionStep.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import Card from "../../common/Card";
-import { useInitialState } from "../../../contexts/InitialStateContext";
-import { useSettings } from "../../../contexts/SettingsContext";
+import Card from "../common/Card";
+import { useWizard } from "../../contexts/WizardModeContext";
+import { useSettings } from "../../contexts/SettingsContext";
 import { CheckCircle } from "lucide-react";
 
-const KubernetesCompletionStep: React.FC = () => {
-  const { title } = useInitialState();
-  const { settings: { themeColor } } = useSettings();
+const CompletionStep: React.FC = () => {
+  const { settings } = useSettings();
+  const { text } = useWizard();
+  const themeColor = settings.themeColor;
 
-  // Success state
   return (
     <div className="space-y-6">
       <Card>
@@ -17,8 +17,8 @@ const KubernetesCompletionStep: React.FC = () => {
             <div className="w-16 h-16 rounded-full flex items-center justify-center mb-4">
               <CheckCircle className="w-10 h-10" style={{ color: themeColor }} />
             </div>
-            <p className="text-gray-600 mt-2 mb-6" data-testid="completion-message">
-              Visit the Admin Console to configure and install {title}
+            <p className="text-gray-600 mt-2" data-testid="completion-message">
+              {text.completion}
             </p>
           </div>
         </div>
@@ -27,4 +27,4 @@ const KubernetesCompletionStep: React.FC = () => {
   );
 };
 
-export default KubernetesCompletionStep;
+export default CompletionStep;

web/src/components/wizard/InstallWizard.tsx

@@ -5,8 +5,7 @@ import ConfigurationStep from "./config/ConfigurationStep";
 import LinuxSetupStep from "./setup/LinuxSetupStep";
 import KubernetesSetupStep from "./setup/KubernetesSetupStep";
 import InstallationStep from "./installation/InstallationStep";
-import LinuxCompletionStep from "./completion/LinuxCompletionStep";
-import KubernetesCompletionStep from "./completion/KubernetesCompletionStep";
+import CompletionStep from "./CompletionStep";
 import { WizardStep } from "../../types";
 import { AppIcon } from "../common/Logo";
 import { useWizard } from "../../contexts/WizardModeContext";
@@ -52,9 +51,9 @@ const InstallWizard: React.FC = () => {
       case "installation":
         return <InstallationStep onNext={goToNextStep} onBack={goToPreviousStep} />;
       case "linux-completion":
-        return <LinuxCompletionStep />;
+        return <CompletionStep />;
       case "kubernetes-completion":
-        return <KubernetesCompletionStep />;
+        return <CompletionStep />;
       default:
         return null;
     }

web/src/components/wizard/completion/LinuxCompletionStep.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "../../../test/setup.tsx";
+import CompletionStep from "../CompletionStep.tsx";
+
+describe.each([
+  { target: "kubernetes" as const, mode: "install" as const, displayName: "Kubernetes Install" },
+  { target: "linux" as const, mode: "install" as const, displayName: "Linux Install" },
+  { target: "kubernetes" as const, mode: "upgrade" as const, displayName: "Kubernetes Upgrade" },
+  { target: "linux" as const, mode: "upgrade" as const, displayName: "Linux Upgrade" }
+])("CompletionStep - $displayName", ({ target, mode }) => {
+  it("renders completion message", () => {
+    renderWithProviders(<CompletionStep />, {
+      wrapperProps: {
+        authenticated: true,
+        target,
+        mode,
+      },
+    });
+
+    // Check that the completion message is displayed
+    const message = screen.getByTestId("completion-message");
+    expect(message).toBeInTheDocument();
+    // Check message is not empty
+    expect(message).toBeTruthy();
+  });
+
+  it("renders success icon", () => {
+    renderWithProviders(<CompletionStep />, {
+      wrapperProps: {
+        authenticated: true,
+        target,
+        mode,
+      },
+    });
+
+    // Check that the CheckCircle icon is rendered (via its container)
+    const message = screen.getByTestId("completion-message");
+    expect(message).toBeInTheDocument();
+  });
+});