Merge pull request #386 from fractal-analytics-platform/layout-improvements

Layout improvements

Author: zonia3000

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Unreleased 
 
+* Users registered by the admin are automatically verified (\#386).
+* A warning message is displayed to unverified users (\#386).
+* Made page headers more homogeneous (\#386).
+* Replaced some icons with more suitable ones (\#386).
+* Added search boxes on datasets, workflows and workflow tasks selection (\#386).
+* Moved "Create new workflow" to a modal (\#386).
 * Added search project field on projects list page (\#379).
 * Used modal to create new project (\#379).
 * Sorted users in admin-area page (\#379).

package-lock.json

@@ -44,6 +44,6 @@
 		"dompurify": "^3.0.5",
 		"jose": "^4.14.4",
 		"marked": "^7.0.4",
-		"slim-select": "^2.5.1"
+		"slim-select": "^2.8.1"
 	}
 }

package.json

@@ -38,7 +38,7 @@ export default defineConfig({
 
 	webServer: [
 		{
-			command: './tests/start-test-server.sh 1.4.1a2',
+			command: './tests/start-test-server.sh 1.4.2a0',
 			port: 8000,
 			waitForPort: true,
 			stdout: 'pipe',

playwright.config.js

@@ -14,7 +14,7 @@ export async function responseError(response) {
  * Used for example to handle the displaying of the error alert when using the ConfirmActionButton.
  */
 export class AlertError extends Error {
-	/** @type {null | { loc: string[], msg: string }} */
+	/** @type {null | { loc: string[], msg: string } | string} */
 	simpleValidationMessage;
 
 	/**
@@ -35,6 +35,9 @@ export class AlertError extends Error {
 		if (!this.simpleValidationMessage) {
 			return null;
 		}
+		if (typeof this.simpleValidationMessage === 'string') {
+			return this.simpleValidationMessage;
+		}
 		if (this.simpleValidationMessage.loc.length !== loc.length) {
 			return null;
 		}
@@ -52,10 +55,16 @@ export class AlertError extends Error {
  *
  * @param {any} reason
  * @param {number | null} statusCode
- * @returns {null | { loc: string[], msg: string }}
+ * @returns {null | { loc: string[], msg: string } | string}
  */
 function getSimpleValidationMessage(reason, statusCode) {
-	if (!isValidationError(reason, statusCode) || reason.detail.length !== 1) {
+	if (!isValidationError(reason, statusCode)) {
+		return null;
+	}
+	if (typeof reason.detail === 'string') {
+		return reason.detail;
+	}
+	if (reason.detail.length !== 1) {
 		return null;
 	}
 	const err = reason.detail[0];
@@ -74,7 +83,10 @@ function getSimpleValidationMessage(reason, statusCode) {
  * @returns {null | { [key: string]: string }}
  */
 export function getValidationMessagesMap(reason, statusCode) {
-	if (!isValidationError(reason, statusCode) || reason.detail.length === 0) {
+	if (!isValidationError(reason, statusCode)) {
+		return null;
+	}
+	if (!Array.isArray(reason.detail) || reason.detail.length === 0) {
 		return null;
 	}
 	/** @type {{[key: string]: string}} */
@@ -97,7 +109,11 @@ export function getValidationMessagesMap(reason, statusCode) {
  * @returns {boolean}
  */
 function isValidationError(reason, statusCode) {
-	return statusCode === 422 && 'detail' in reason && Array.isArray(reason.detail);
+	return (
+		statusCode === 422 &&
+		'detail' in reason &&
+		(Array.isArray(reason.detail) || typeof reason.detail === 'string')
+	);
 }
 
 /**

src/lib/common/errors.js

@@ -1,5 +1,5 @@
 <script>
-	import { displayStandardErrorAlert } from '$lib/common/errors';
+	import { AlertError, displayStandardErrorAlert } from '$lib/common/errors';
 	import { onMount } from 'svelte';
 
 	export let id;
@@ -11,6 +11,7 @@
 	export let centered = false;
 	export let scrollable = false;
 	export let bodyCss = '';
+	/** @type {import('$lib/components/common/StandardErrorAlert.svelte').default|undefined} */
 	let errorAlert;
 
 	onMount(async () => {
@@ -57,7 +58,7 @@
 			await confirm();
 			modal.hide();
 		} catch (/** @type {any} */ error) {
-			errorAlert = displayStandardErrorAlert(error, `errorAlert-${id}`);
+			displayErrorAlert(error);
 		}
 	}
 
@@ -68,6 +69,9 @@
 	}
 
 	export function displayErrorAlert(/** @type {any} */ error) {
+		if (error instanceof AlertError && error.getSimpleValidationMessage()) {
+			error = error.getSimpleValidationMessage();
+		}
 		errorAlert = displayStandardErrorAlert(error, `errorAlert-${id}`);
 	}
 
@@ -87,7 +91,9 @@
 
 <!-- Note: tabindex="-1" is needed to fix escape key not working in some cases -->
 <!-- (see https://stackoverflow.com/a/12630531) -->
-<div class="modal {size ? 'modal-' + size : ''}" {id} tabindex="-1">
+<!-- Note: data-bs-focus="false" is needed to avoid conflicts with slim-select -->
+<!-- (see https://github.com/brianvoe/slim-select/issues/475#issuecomment-1736440245) -->
+<div class="modal {size ? 'modal-' + size : ''}" {id} tabindex="-1" data-bs-focus="false">
 	<div
 		class="modal-dialog"
 		class:modal-fullscreen={fullscreen}
@@ -103,9 +109,9 @@
 				<slot name="body" />
 			</div>
 			{#if !!$$slots.footer}
-			<div class="modal-footer">
-				<slot name="footer" />
-			</div>
+				<div class="modal-footer">
+					<slot name="footer" />
+				</div>
 			{/if}
 		</div>
 	</div>