feat(ui): hide validation from install wizard navigation (#2327)

* consolidate validation into the setup step and update tests

* remove uneeded goToPreviousStep function

* run installation start after setup and validation

* revert accidental changes to operator and e2e files

* move validation back to its own component

* minor changes to validation step

* Revert unintended changes to helm charts and operator metadata

* add newline to validation step

* fex web unit test

* revert to using validation as a separate step but hide it from navbar and only show setup step to user

* complete reversion of setup and validation step

* add test for step navigation

* remove newline

* Update web/src/components/wizard/StepNavigation.tsx

Co-authored-by: Salah Al Saleh <sg.alsaleh@gmail.com>

* fix variable naming

* fix lint error

---------

Co-authored-by: Salah Al Saleh <sg.alsaleh@gmail.com>

Author: diamonwiggins

web/src/components/wizard/StepNavigation.tsx

@@ -13,20 +13,26 @@ const StepNavigation: React.FC<StepNavigationProps> = ({ currentStep }) => {
   const { prototypeSettings } = useConfig();
   const themeColor = prototypeSettings.themeColor;
 
+  // Navigation steps (validation is hidden but still part of the wizard flow)
   const steps = [
     { id: 'welcome', name: 'Welcome', icon: ClipboardList },
     { id: 'setup', name: 'Setup', icon: Settings },
-    { id: 'validation', name: 'Validation', icon: CheckCircle },
     { id: 'installation', name: mode === 'upgrade' ? 'Upgrade' : 'Installation', icon: Download },
     { id: 'completion', name: 'Completion', icon: CheckCircle },
   ];
 
+  // All wizard steps for progress calculation
+  const allSteps: WizardStep[] = ['welcome', 'setup', 'validation', 'installation', 'completion'];
+
   const getStepStatus = (step: { id: string }) => {
-    const stepIndex = steps.findIndex((s) => s.id === step.id);
-    const currentIndex = steps.findIndex((s) => s.id === currentStep);
+    const stepIndex = allSteps.indexOf(step.id as WizardStep);
+    const currentStepIndex = allSteps.indexOf(currentStep);
+
+    // Treat validation as part of setup for navigation purposes
+    const adjustedCurrentIndex = currentStep === 'validation' ? allSteps.indexOf('setup') : currentStepIndex;
 
-    if (stepIndex < currentIndex) return 'complete';
-    if (stepIndex === currentIndex) return 'current';
+    if (stepIndex < adjustedCurrentIndex) return 'complete';
+    if (stepIndex === adjustedCurrentIndex || (step.id === 'setup' && currentStep === 'validation')) return 'current';
     return 'upcoming';
   };
 

web/src/components/wizard/tests/StepNavigation.test.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "../../../test/setup.tsx";
+import StepNavigation from "../StepNavigation.tsx";
+import { WizardStep } from "../../../types/index.ts";
+
+describe("StepNavigation", () => {
+  const defaultPreloadedState = {
+    // Use generic settings instead of prototype-specific references
+    prototypeSettings: {
+      themeColor: "#316DE6",
+    },
+  };
+
+  it("renders all navigation steps except validation", () => {
+    renderWithProviders(<StepNavigation currentStep="welcome" />, {
+      wrapperProps: {
+        authenticated: true,
+        preloadedState: defaultPreloadedState,
+      },
+    });
+
+    // Should show 4 steps (welcome, setup, installation, completion)
+    expect(screen.getByText("Welcome")).toBeInTheDocument();
+    expect(screen.getByText("Setup")).toBeInTheDocument();
+    expect(screen.getByText("Installation")).toBeInTheDocument();
+    expect(screen.getByText("Completion")).toBeInTheDocument();
+
+    // Should NOT show validation step
+    expect(screen.queryByText("Validation")).not.toBeInTheDocument();
+  });
+
+  it("shows 'current' status for the current step", () => {
+    renderWithProviders(<StepNavigation currentStep="setup" />, {
+      wrapperProps: {
+        authenticated: true,
+        preloadedState: defaultPreloadedState,
+      },
+    });
+
+    const setupStep = screen.getByText("Setup").closest("div");
+    expect(setupStep).toHaveStyle({
+      border: "1px solid #316DE6",
+    });
+  });
+
+  it("treats validation step as part of setup for navigation", () => {
+    renderWithProviders(<StepNavigation currentStep="validation" />, {
+      wrapperProps: {
+        authenticated: true,
+        preloadedState: defaultPreloadedState,
+      },
+    });
+
+    // When currentStep is 'validation', setup should show as current
+    const setupStep = screen.getByText("Setup").closest("div");
+    expect(setupStep).toHaveStyle({
+      border: "1px solid #316DE6",
+    });
+
+    // Welcome should be complete
+    const welcomeStep = screen.getByText("Welcome").closest("div");
+    expect(welcomeStep).toHaveStyle({
+      backgroundColor: "#316DE61A",
+      color: "#316DE6",
+    });
+  });
+
+  it("shows upcoming steps with default styling", () => {
+    renderWithProviders(<StepNavigation currentStep="welcome" />, {
+      wrapperProps: {
+        authenticated: true,
+        preloadedState: defaultPreloadedState,
+      },
+    });
+
+    // Setup, Installation, and Completion should be upcoming
+    const installationStep = screen.getByText("Installation").closest("div");
+    const completionStep = screen.getByText("Completion").closest("div");
+
+    expect(installationStep).toHaveStyle({
+      backgroundColor: "rgb(243 244 246)", // gray background
+      color: "rgb(107 114 128)", // gray text
+    });
+    expect(completionStep).toHaveStyle({
+      backgroundColor: "rgb(243 244 246)",
+      color: "rgb(107 114 128)",
+    });
+  });
+
+  it("renders correct icons for each step", () => {
+    renderWithProviders(<StepNavigation currentStep="welcome" />, {
+      wrapperProps: {
+        authenticated: true,
+        preloadedState: defaultPreloadedState,
+      },
+    });
+
+    // Check that all step icons are rendered
+    const stepElements = screen.getAllByRole("listitem");
+    expect(stepElements).toHaveLength(4); // welcome, setup, installation, completion
+
+    // Each step should have an icon (svg element)
+    stepElements.forEach((step) => {
+      const icon = step.querySelector("svg");
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveClass("w-5", "h-5");
+    });
+  });
+
+  it("maintains proper step progression logic", () => {
+    // Test different current steps and their expected status
+    const testCases = [
+      { currentStep: "welcome", setupStatus: "upcoming", installStatus: "upcoming" },
+      { currentStep: "setup", setupStatus: "current", installStatus: "upcoming" },
+      { currentStep: "validation", setupStatus: "current", installStatus: "upcoming" },
+      { currentStep: "installation", setupStatus: "complete", installStatus: "current" },
+    ];
+
+    testCases.forEach(({ currentStep, setupStatus, installStatus }) => {
+      const { unmount } = renderWithProviders(
+        <StepNavigation currentStep={currentStep as WizardStep} />,
+        {
+          wrapperProps: {
+            authenticated: true,
+            preloadedState: defaultPreloadedState,
+          },
+        }
+      );
+
+      const setupStep = screen.getByText("Setup").closest("div");
+      const installStep = screen.getByText("Installation").closest("div");
+
+      if (setupStatus === "current") {
+        expect(setupStep).toHaveStyle({ border: "1px solid #316DE6" });
+      } else if (setupStatus === "complete") {
+        expect(setupStep).toHaveStyle({ 
+          backgroundColor: "#316DE61A",
+          color: "#316DE6" 
+        });
+      }
+
+      if (installStatus === "current") {
+        expect(installStep).toHaveStyle({ border: "1px solid #316DE6" });
+      } else if (installStatus === "upcoming") {
+        expect(installStep).toHaveStyle({ 
+          backgroundColor: "rgb(243 244 246)",
+          color: "rgb(107 114 128)" 
+        });
+      }
+
+      unmount(); // Clean up for next iteration
+    });
+  });
+});