fix(web): improve error message for required fields (#3209)

* fix(web): improve error message for required fields

* chore: change error msg

Author: JGAntunes

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

@@ -27,6 +27,29 @@ interface ConfigurationStepProps {
   onNext: () => void;
 }
 
+// Helper function to parse server validation errors from API response
+function parseServerErrors(error: ApiError): Record<string, string> {
+  const itemErrors: Record<string, string> = {};
+
+  // Check if error has structured item errors
+  if (error.fieldErrors) {
+    error.fieldErrors.forEach((itemError) => {
+      // Pass through server error message directly - no client-side enhancement
+      itemErrors[itemError.field] = itemError.message;
+    });
+  }
+
+  return itemErrors;
+};
+
+// Helper function to get the general error message we show at the bottom of the page after a form submission
+export function getGeneralErrorMsgForSubmission(error: ApiError) {
+  if (error.fieldErrors && error.fieldErrors.length > 0) {
+    return "Please address the issues above before proceeding"
+  }
+  return error?.details || error?.message || 'Failed to save configuration'
+}
+
 const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
   const { text, target, mode } = useWizard();
   const { token } = useAuth();
@@ -145,21 +168,6 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
     setItemToFocus(item);
   };
 
-  // Helper function to parse server validation errors from API response
-  const parseServerErrors = (error: ApiError): Record<string, string> => {
-    const itemErrors: Record<string, string> = {};
-
-    // Check if error has structured item errors
-    if (error.fieldErrors) {
-      error.fieldErrors.forEach((itemError) => {
-        // Pass through server error message directly - no client-side enhancement
-        itemErrors[itemError.field] = itemError.message;
-      });
-    }
-
-    return itemErrors;
-  };
-
   // Mutation to save config values
   const { mutate: submitConfigValues } = useMutation<void, ApiError>({
     mutationFn: async () => {
@@ -183,7 +191,7 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
     onError: (error: ApiError) => {
       const parsedItemErrors = parseServerErrors(error);
       setItemErrors(parsedItemErrors);
-      setGeneralError(error?.details || error?.message || 'Failed to save configuration');
+      setGeneralError(getGeneralErrorMsgForSubmission(error));
 
       // Focus on the first item with validation error
       const firstErrorItem = findFirstItemWithError(parsedItemErrors);

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

@@ -2,8 +2,9 @@ import { describe, it, expect, vi, beforeAll, afterEach, afterAll, beforeEach }
 import { screen, waitFor, fireEvent } from "@testing-library/react";
 import { setupServer } from "msw/node";
 import { renderWithProviders } from "../../../test/setup.tsx";
-import ConfigurationStep from "../config/ConfigurationStep.tsx";
+import ConfigurationStep, { getGeneralErrorMsgForSubmission } from "../config/ConfigurationStep.tsx";
 import { mockHandlers, type Target, type Mode } from "../../../test/mockHandlers.ts";
+import { ApiError } from "../../../api/error.ts";
 import '@testing-library/jest-dom/vitest';
 
 import type { components } from "../../../types/api";
@@ -1954,9 +1955,9 @@ describe.each([
         expect(screen.getByText("Required Field is required")).toBeInTheDocument();
       });
 
-      // Verify the raw server error message at the bottom
+      // Verify error component at the bottom exists
       await waitFor(() => {
-        expect(screen.getByText("required fields not completed")).toBeInTheDocument();
+        expect(screen.getByTestId("config-submit-error")).toBeInTheDocument();
       });
 
       // Verify onNext was not called due to validation error
@@ -2788,4 +2789,42 @@ describe.each([
       expect(submittedValues!.values.db_type).toEqual({ value: 'mysql' });
     });
   });
+
+  describe("getGeneralErrorMsgForSubmission", () => {
+    it("returns generic error message when error has field errors", () => {
+      const error = new ApiError(400, "Validation error");
+      error.fieldErrors = [
+        { field: "app_name", message: "This field is required" },
+      ];
+
+      const result = getGeneralErrorMsgForSubmission(error);
+
+      expect(result).toContain("Please address the issues above");
+    });
+
+    it("returns error.details when no field errors but details exist", () => {
+      const error = new ApiError(500, "Generic message");
+      error.details = "Detailed error message";
+
+      const result = getGeneralErrorMsgForSubmission(error);
+
+      expect(result).toBe("Detailed error message");
+    });
+
+    it("returns error.message when no field errors or details", () => {
+      const error = new ApiError(500, "Generic error message");
+
+      const result = getGeneralErrorMsgForSubmission(error);
+
+      expect(result).toBe("Generic error message");
+    });
+
+    it("returns fallback message when error has no field errors, details, or message", () => {
+      const error = new ApiError(500, "");
+
+      const result = getGeneralErrorMsgForSubmission(error);
+
+      expect(result).toBe("Failed to save configuration");
+    });
+  });
 });