fix: add getValidationErrorMessage() to getErrorDetail() (#22229)

This pull-request ensures that we render the validation errors back to
the user when the errors contain context as to why. Previously when we
attempted to we'd guide the user to simply checkout the Dev Console.
This wasn't a great approach as the user still would have to decode
this, the context is explicit now.

The error messages could use some improvement, but we make use of this
already in
[`Filter.tsx`](https://github.com/coder/coder/blob/main/site/src/components/Filter/Filter.tsx#L259)
so at-least its inline.

<img width="834" height="335" alt="image"
src="https://github.com/user-attachments/assets/78864d6f-b4df-4eeb-815a-3fd46cf9f31b"
/>

---------

Co-authored-by: Phorcys <57866459+phorcys420@users.noreply.github.com>

site/src/api/errors.ts

@@ -127,6 +127,15 @@ export const getErrorDetail = (error: unknown): string | undefined => {
 		return error.detail;
 	}
 
+	if (
+		isApiValidationError(error) &&
+		// Ensure that the validations array is not `[]` (empty array).
+		Array.isArray(error.response.data.validations) &&
+		error.response.data.validations.length > 0
+	) {
+		return getValidationErrorMessage(error);
+	}
+
 	if (error instanceof Error) {
 		return "Please check the developer console for more details.";
 	}

site/src/pages/UserSettingsPage/AccountPage/AccountPage.test.tsx

@@ -65,10 +65,10 @@ describe("AccountPage", () => {
 			renderWithAuth(<AccountPage />);
 			await fillAndSubmitForm();
 
-			const errorMessage = await screen.findByText(
+			const errorMessages = await screen.findAllByText(
 				"Username is already in use",
 			);
-			expect(errorMessage).toBeDefined();
+			expect(errorMessages.length).toBeGreaterThanOrEqual(2);
 			expect(API.updateProfile).toBeCalledTimes(1);
 			expect(API.updateProfile).toBeCalledWith("me", newData);
 		});