Collapse advanced settings by default (#2311)

Author: ajp-io

web/src/components/wizard/SetupStep.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Card from "../common/Card";
 import Button from "../common/Button";
 import { useConfig } from "../../contexts/ConfigContext";
@@ -25,7 +25,7 @@ interface ConfigError extends Error {
 const SetupStep: React.FC<SetupStepProps> = ({ onNext }) => {
   const { config, updateConfig, prototypeSettings } = useConfig();
   const { text } = useWizardMode();
-  const [showAdvanced, setShowAdvanced] = useState(true);
+  const [showAdvanced, setShowAdvanced] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { token } = useAuth();
 
@@ -104,6 +104,15 @@ const SetupStep: React.FC<SetupStepProps> = ({ onNext }) => {
     },
   });
 
+  // Expand advanced settings if there is an error in an advanced field
+  useEffect(() => {
+    if (submitError?.errors) {
+      if (submitError.errors.some(e => e.field === "networkInterface" || e.field === "globalCidr")) {
+        setShowAdvanced(true);
+      }
+    }
+  }, [submitError]);
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = e.target;
     if (id === "adminConsolePort" || id === "localArtifactMirrorPort") {

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

@@ -98,7 +98,11 @@ describe("SetupStep", () => {
 
     screen.getByLabelText(/Proxy Bypass List/, { selector: "input" });
 
-    // Check advanced settings (should be visible by default)
+    // Reveal advanced settings before checking advanced fields
+    const advancedButton = screen.getByRole("button", { name: /Advanced Settings/i });
+    fireEvent.click(advancedButton);
+
+    // Check advanced settings
     screen.getByLabelText(/Network Interface/, { selector: "select" });
 
     screen.getByLabelText(/Reserved Network Range/, {
@@ -255,6 +259,11 @@ describe("SetupStep", () => {
     const dataDirectoryInput = screen.getByLabelText(/Data Directory/);
     const adminPortInput = screen.getByLabelText(/Admin Console Port/);
     const mirrorPortInput = screen.getByLabelText(/Local Artifact Mirror Port/);
+
+    // Reveal advanced settings before filling advanced fields
+    const advancedButton = screen.getByRole("button", { name: /Advanced Settings/i });
+    fireEvent.click(advancedButton);
+
     const networkInterfaceSelect = screen.getByLabelText(/Network Interface/);
     const globalCidrInput = screen.getByLabelText(/Reserved Network Range/);