bug: Fix mix of camel case and title case in error messages (#2314)

* Port error message camel to title case formatter to frontend

* Add tests

* Update error message formatter to use a map

* f

Author: screspod

api/integration/install_test.go

@@ -418,7 +418,7 @@ func TestConfigureInstallationValidation(t *testing.T) {
 	var apiError types.APIError
 	err = json.NewDecoder(rec.Body).Decode(&apiError)
 	require.NoError(t, err)
-	assert.Contains(t, apiError.Error(), "Service CIDR is required when globalCidr is not set")
+	assert.Contains(t, apiError.Error(), "serviceCidr is required when globalCidr is not set")
 	// Also verify the field name is correct
 	assert.Equal(t, "serviceCidr", apiError.Errors[0].Field)
 }
@@ -1085,12 +1085,8 @@ func TestInstallWithAPIClient(t *testing.T) {
 		apiErr, ok := err.(*types.APIError)
 		require.True(t, ok, "Error should be of type *types.APIError")
 		assert.Equal(t, http.StatusBadRequest, apiErr.StatusCode)
-		// Error message should contain both variants of the port conflict message
-		assert.True(t,
-			strings.Contains(apiErr.Error(), "Admin Console Port and localArtifactMirrorPort cannot be equal") &&
-				strings.Contains(apiErr.Error(), "adminConsolePort and Local Artifact Mirror Port cannot be equal"),
-			"Error message should contain both variants of the port conflict message",
-		)
+		// Error message should contain the same port conflict message for both fields
+		assert.Equal(t, 2, strings.Count(apiErr.Error(), "adminConsolePort and localArtifactMirrorPort cannot be equal"))
 	})
 
 	// Test SetInstallStatus

api/types/errors.go

@@ -6,11 +6,6 @@ import (
 	"errors"
 	"fmt"
 	"net/http"
-	"regexp"
-	"strings"
-
-	"golang.org/x/text/cases"
-	"golang.org/x/text/language"
 )
 
 type APIError struct {
@@ -105,64 +100,11 @@ func AppendFieldError(apiErr *APIError, field string, err error) *APIError {
 	if apiErr == nil {
 		apiErr = NewBadRequestError(errors.New("field errors"))
 	}
-	return AppendError(apiErr, newFieldError(field, err))
-}
-
-func camelCaseToWords(s string) string {
-	// Handle special cases
-	specialCases := map[string]string{
-		"cidr": "CIDR",
-		"Cidr": "CIDR",
-		"CIDR": "CIDR",
-	}
-
-	// Check if the entire string is a special case
-	if replacement, ok := specialCases[strings.ToLower(s)]; ok {
-		return replacement
-	}
-
-	// Split on capital letters
-	re := regexp.MustCompile(`([a-z])([A-Z])`)
-	words := re.ReplaceAllString(s, "$1 $2")
-
-	// Split the words and handle special cases
-	wordList := strings.Split(strings.ToLower(words), " ")
-	for i, word := range wordList {
-		if replacement, ok := specialCases[word]; ok {
-			wordList[i] = replacement
-		} else {
-			// Capitalize other words
-			c := cases.Title(language.English)
-			wordList[i] = c.String(word)
-		}
-	}
-
-	return strings.Join(wordList, " ")
-}
-
-func newFieldError(field string, err error) *APIError {
-	msg := err.Error()
-
-	// Try different patterns to replace the field name
-	patterns := []string{
-		field,                  // exact match
-		strings.ToLower(field), // lowercase
-		strings.ToUpper(field), // uppercase
-		"cidr",                 // special case for CIDR
-	}
-
-	for _, pattern := range patterns {
-		if strings.Contains(msg, pattern) {
-			msg = strings.Replace(msg, pattern, camelCaseToWords(field), 1)
-			break
-		}
-	}
-
-	return &APIError{
-		Message: msg,
+	return AppendError(apiErr, &APIError{
+		Message: err.Error(),
 		Field:   field,
 		err:     err,
-	}
+	})
 }
 
 // JSON writes the APIError as JSON to the provided http.ResponseWriter

web/src/components/wizard/setup/LinuxSetup.tsx

@@ -4,6 +4,27 @@ import Select from "../../common/Select";
 import { useBranding } from "../../../contexts/BrandingContext";
 import { ChevronDown, ChevronRight } from "lucide-react";
 
+/**
+ * Maps internal field names to user-friendly display names.
+ * Used for:
+ * - Input IDs: <Input id="adminConsolePort" />
+ * - Labels: <Input label={fieldNames.adminConsolePort} />
+ * - Error formatting: formatErrorMessage("adminConsolePort invalid") -> "Admin Console Port invalid"
+ */
+const fieldNames = {
+   adminConsolePort: "Admin Console Port",
+   dataDirectory: "Data Directory",
+   localArtifactMirrorPort: "Local Artifact Mirror Port",
+   httpProxy: "HTTP Proxy",
+   httpsProxy: "HTTPS Proxy",
+   noProxy: "Proxy Bypass List",
+   networkInterface: "Network Interface",
+   podCidr: "Pod CIDR",
+   serviceCidr: "Service CIDR",
+   globalCidr: "Reserved Network Range (CIDR)",
+   cidr: "CIDR",
+}
+
 interface LinuxSetupProps {
   config: {
     dataDirectory?: string;
@@ -43,7 +64,7 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
 
   const getFieldError = (fieldName: string) => {
     const fieldError = fieldErrors.find((err) => err.field === fieldName);
-    return fieldError?.message;
+    return fieldError ? formatErrorMessage(fieldError.message) : undefined;
   };
 
   return (
@@ -52,7 +73,7 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
         <h2 className="text-lg font-medium text-gray-900">System Configuration</h2>
         <Input
           id="dataDirectory"
-          label="Data Directory"
+          label={fieldNames.dataDirectory}
           value={config.dataDirectory || ""}
           onChange={onInputChange}
           placeholder="/var/lib/embedded-cluster"
@@ -63,7 +84,7 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
 
         <Input
           id="adminConsolePort"
-          label="Admin Console Port"
+          label={fieldNames.adminConsolePort}
           value={config.adminConsolePort?.toString() || ""}
           onChange={onInputChange}
           placeholder="30000"
@@ -74,7 +95,7 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
 
         <Input
           id="localArtifactMirrorPort"
-          label="Local Artifact Mirror Port"
+          label={fieldNames.localArtifactMirrorPort}
           value={config.localArtifactMirrorPort?.toString() || ""}
           onChange={onInputChange}
           placeholder="50000"
@@ -89,7 +110,7 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
         <div className="space-y-4">
           <Input
             id="httpProxy"
-            label="HTTP Proxy"
+            label={fieldNames.httpProxy}
             value={config.httpProxy || ""}
             onChange={onInputChange}
             placeholder="http://proxy.example.com:3128"
@@ -99,7 +120,7 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
 
           <Input
             id="httpsProxy"
-            label="HTTPS Proxy"
+            label={fieldNames.httpsProxy}
             value={config.httpsProxy || ""}
             onChange={onInputChange}
             placeholder="https://proxy.example.com:3128"
@@ -109,7 +130,7 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
 
           <Input
             id="noProxy"
-            label="Proxy Bypass List"
+            label={fieldNames.noProxy}
             value={config.noProxy || ""}
             onChange={onInputChange}
             placeholder="localhost,127.0.0.1,.example.com"
@@ -133,7 +154,7 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
           <div className="space-y-6">
             <Select
               id="networkInterface"
-              label="Network Interface"
+              label={fieldNames.networkInterface}
               value={config.networkInterface || ""}
               onChange={onSelectChange}
               options={[
@@ -155,7 +176,7 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
 
             <Input
               id="globalCidr"
-              label="Reserved Network Range (CIDR)"
+              label={fieldNames.globalCidr}
               value={config.globalCidr || ""}
               onChange={onInputChange}
               placeholder="10.244.0.0/16"
@@ -170,4 +191,21 @@ const LinuxSetup: React.FC<LinuxSetupProps> = ({
   );
 };
 
+/**
+ * Formats error messages by replacing technical field names with more user-friendly display names.
+ * Example: "adminConsolePort" becomes "Admin Console Port".
+ *
+ * @param message - The error message to format
+ * @returns The formatted error message with replaced field names
+ */
+export function formatErrorMessage(message: string) {
+   let finalMsg = message
+   for (const [field, fieldName] of Object.entries(fieldNames)) {
+      // Case-insensitive regex that matches whole words only
+      // Example: "podCidr", "PodCidr", "PODCIDR" all become "Pod CIDR"
+      finalMsg = finalMsg.replace(new RegExp(`\\b${field}\\b`, 'gi'), fieldName)
+   }
+   return finalMsg
+}
+
 export default LinuxSetup;

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

@@ -0,0 +1,66 @@
+import { describe, it, expect } from "vitest";
+import { formatErrorMessage } from "../setup/LinuxSetup";
+
+describe("formatErrorMessage", () => {
+   it("handles empty string", () => {
+      expect(formatErrorMessage("")).toBe("");
+   });
+
+   it("replaces field names with their proper format", () => {
+      expect(formatErrorMessage("adminConsolePort")).toBe("Admin Console Port");
+      expect(formatErrorMessage("dataDirectory")).toBe("Data Directory");
+      expect(formatErrorMessage("localArtifactMirrorPort")).toBe("Local Artifact Mirror Port");
+      expect(formatErrorMessage("httpProxy")).toBe("HTTP Proxy");
+      expect(formatErrorMessage("httpsProxy")).toBe("HTTPS Proxy");
+      expect(formatErrorMessage("noProxy")).toBe("Proxy Bypass List");
+      expect(formatErrorMessage("networkInterface")).toBe("Network Interface");
+      expect(formatErrorMessage("podCidr")).toBe("Pod CIDR");
+      expect(formatErrorMessage("serviceCidr")).toBe("Service CIDR");
+      expect(formatErrorMessage("globalCidr")).toBe("Reserved Network Range (CIDR)");
+      expect(formatErrorMessage("cidr")).toBe("CIDR");
+   });
+
+   it("handles multiple field names in one message", () => {
+      expect(formatErrorMessage("podCidr and serviceCidr are required")).toBe("Pod CIDR and Service CIDR are required");
+      expect(formatErrorMessage("httpProxy and httpsProxy must be set")).toBe("HTTP Proxy and HTTPS Proxy must be set");
+   });
+
+   it("preserves non-field words", () => {
+      expect(formatErrorMessage("The podCidr is invalid")).toBe("The Pod CIDR is invalid");
+      expect(formatErrorMessage("Please set the httpProxy")).toBe("Please set the HTTP Proxy");
+   });
+
+   it("handles case insensitivity correctly", () => {
+      expect(formatErrorMessage("PodCidr")).toBe("Pod CIDR");
+      expect(formatErrorMessage("HTTPPROXY")).toBe("HTTP Proxy");
+      expect(formatErrorMessage("cidr")).toBe("CIDR");
+      expect(formatErrorMessage("Cidr")).toBe("CIDR");
+      expect(formatErrorMessage("CIDR")).toBe("CIDR");
+   });
+
+   it("handles real-world error messages", () => {
+      expect(formatErrorMessage("The podCidr 10.0.0.0/24 overlaps with serviceCidr 10.0.0.0/16")).toBe(
+         "The Pod CIDR 10.0.0.0/24 overlaps with Service CIDR 10.0.0.0/16"
+      );
+      expect(formatErrorMessage("httpProxy and httpsProxy cannot be empty when noProxy is set")).toBe(
+         "HTTP Proxy and HTTPS Proxy cannot be empty when Proxy Bypass List is set"
+      );
+      expect(formatErrorMessage("adminConsolePort must be between 1024 and 65535")).toBe(
+         "Admin Console Port must be between 1024 and 65535"
+      );
+      expect(formatErrorMessage("dataDirectory /var/lib/k0s is not writable")).toBe(
+         "Data Directory /var/lib/k0s is not writable"
+      );
+      expect(formatErrorMessage("globalCidr must be a valid CIDR block")).toBe(
+         "Reserved Network Range (CIDR) must be a valid CIDR block"
+      );
+   });
+
+   it("handles special characters and formatting", () => {
+      expect(formatErrorMessage("admin_console_port and localArtifactMirrorPort cannot be equal.")).toBe(
+         "admin_console_port and Local Artifact Mirror Port cannot be equal."
+      );
+      expect(formatErrorMessage("httpProxy: invalid URL format")).toBe("HTTP Proxy: invalid URL format");
+      expect(formatErrorMessage("podCidr: 192.168.0.0/24 (invalid)")).toBe("Pod CIDR: 192.168.0.0/24 (invalid)");
+   });
+});