Improved handling of viewer paths errors

Author: zonia3000

__tests__/errors.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { getFieldValidationError } from '../src/lib/common/errors';
+import { getFieldValidationError, getValidationMessagesMap } from '../src/lib/common/errors';
 
 describe('Error utility functions', () => {
 	it('get field validation error without specifying loc', () => {
@@ -17,4 +17,41 @@ describe('Error utility functions', () => {
 		);
 		expect(error).eq('value is not a valid list');
 	});
+
+	it('get validation errors array', () => {
+		const errorMap = getValidationMessagesMap(
+			{
+				detail: [
+					{
+						type: 'string_too_short',
+						loc: ['body', 'viewer_paths', 1],
+						msg: 'String should have at least 1 character',
+						input: '',
+						ctx: {
+							min_length: 1
+						}
+					},
+					{
+						type: 'value_error',
+						loc: ['body', 'viewer_paths', 3],
+						msg: "Value error, String must be an absolute path (given 'foobar').",
+						input: 'foobar',
+						ctx: {
+							error: {}
+						}
+					}
+				]
+			},
+			422
+		);
+
+		/** @type {string[]} */
+		const errors = /** @type {string[]} */ ((errorMap && errorMap['viewer_paths']) || []);
+
+		expect(errors.length).toEqual(4);
+		expect(errors[0]).toBeUndefined();
+		expect(errors[1]).toEqual('String should have at least 1 character');
+		expect(errors[2]).toBeUndefined();
+		expect(errors[3]).toEqual("Value error, String must be an absolute path (given 'foobar').");
+	});
 });

src/lib/common/errors.js

@@ -154,7 +154,7 @@ function extractFieldValidationError(simpleValidationMessage, loc) {
 /**
  * @param {any} reason
  * @param {number | null} statusCode
- * @returns {null | { [key: string]: string }}
+ * @returns {null | { [key: string]: string | string[] }}
  */
 export function getValidationMessagesMap(reason, statusCode) {
 	if (!isValidationError(reason, statusCode)) {
@@ -163,16 +163,25 @@ export function getValidationMessagesMap(reason, statusCode) {
 	if (!Array.isArray(reason.detail) || reason.detail.length === 0) {
 		return null;
 	}
-	/** @type {{[key: string]: string}} */
+	/** @type {{[key: string]: string | string[]}} */
 	const map = {};
 	for (const error of reason.detail) {
 		if (!hasValidationErrorPayload(error)) {
 			return null;
 		}
-		if (error.loc.length !== 2 || error.loc[0] !== 'body') {
+		if (error.loc[0] !== 'body') {
+			return null;
+		}
+		if (error.loc.length === 2) {
+			map[error.loc[1]] = error.msg;
+		} else if (error.loc.length === 3 && typeof error.loc[2] === 'number') {
+			if (!(error.loc[1] in map)) {
+				map[error.loc[1]] = [];
+			}
+			/** @type {string[]} */ (map[error.loc[1]])[error.loc[2]] = error.msg;
+		} else {
 			return null;
 		}
-		map[error.loc[1]] = error.msg;
 	}
 	return map;
 }
@@ -294,7 +303,7 @@ export class FormErrorHandler {
 	 * Returns true if all the keys of the error map are handled by the current page or component.
 	 * Used to decide if it possible to show user friendly validation messages
 	 * or if it is necessary to display a generic error message.
-	 * @param {{[key:string]: string}} errorsMap
+	 * @param {{[key:string]: string | string[] }} errorsMap
 	 * @return {boolean}
 	 */
 	validateErrorMapKeys(errorsMap) {

src/routes/settings/+page.svelte

@@ -60,7 +60,7 @@
 			let errorShown = false;
 			if (errorMap) {
 				if ('slurm_accounts' in errorMap) {
-					slurmAccountsError = errorMap['slurm_accounts'];
+					slurmAccountsError = /** @type {string} */ (errorMap['slurm_accounts']);
 					errorShown = true;
 				}
 			}

src/routes/v2/admin/groups/[groupId]/edit/+page.svelte

@@ -326,13 +326,19 @@
 			<h4 class="fw-light">Viewer paths</h4>
 			<!-- eslint-disable-next-line no-unused-vars -->
 			{#each editableViewPaths as _, i (i)}
-				<div class="input-group mb-2">
+				<div
+					class="input-group mb-2"
+					class:has-validation={$viewerPathsValidationErrors['viewer_paths'] &&
+						$viewerPathsValidationErrors['viewer_paths'][i]}
+				>
 					<input
 						type="text"
 						class="form-control"
 						id={`viewerPath-${i}`}
 						bind:value={editableViewPaths[i]}
 						aria-label={`Viewer path #${i + 1}`}
+						class:is-invalid={$viewerPathsValidationErrors['viewer_paths'] &&
+							$viewerPathsValidationErrors['viewer_paths'][i]}
 						required
 					/>
 					<button
@@ -344,11 +350,16 @@
 					>
 						<i class="bi bi-trash"></i>
 					</button>
+					{#if $viewerPathsValidationErrors['viewer_paths'] && $viewerPathsValidationErrors['viewer_paths'][i]}
+						<div class="invalid-feedback">
+							{$viewerPathsValidationErrors['viewer_paths'][i]}
+						</div>
+					{/if}
 				</div>
 			{/each}
 			<button class="btn btn-secondary mb-2" onclick={addViewerPath}>Add viewer path</button>
 			<div id="viewerPathGenericError"></div>
-			{#if $viewerPathsValidationErrors['viewer_paths']}
+			{#if $viewerPathsValidationErrors['viewer_paths'] && !Array.isArray($viewerPathsValidationErrors['viewer_paths'])}
 				<div class="alert alert-danger mb-2">
 					{$viewerPathsValidationErrors['viewer_paths']}
 				</div>