Merge branch 'main' into svelte5

Author: zonia3000

CHANGELOG.md

@@ -1,5 +1,11 @@
 *Note: Numbers like (\#123) point to closed Pull Requests on the fractal-web repository.*
 
+# 1.17.4
+
+* Fixed search box not working in workflow submission modal (\#787);
+* Fixed "Get token" button not working in Safari (\#787);
+* Added a disclaimer to non-processed-images warning (\#787);
+
 # 1.17.3
 
 * Displayed warning when attempting to continue a workflow on unprocessed images (\#774);

docs/version-compatibility.md

@@ -4,6 +4,7 @@ The following table shows which `fractal-server` versions are compatible with wh
 
 | fractal-web | fractal-server |
 |-------------|----------------|
+| 1.17.4      | 2.14.1         |
 | 1.17.3      | 2.14.1         |
 | 1.17.2      | 2.14.0         |
 | 1.17.1      | 2.14.0         |

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "fractal-web",
-	"version": "1.17.3",
+	"version": "1.17.4",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

package.json

@@ -58,6 +58,9 @@
 						firstInput.focus();
 					}
 				}
+				if (!focus) {
+					restoreModalFocus();
+				}
 			});
 			modal.addEventListener('hidden.bs.modal', onClose);
 		}
@@ -132,6 +135,16 @@
 		// eslint-disable-next-line no-undef
 		return new bootstrap.Modal(modalElement);
 	}
+
+	/**
+	 * Restore focus on modal, otherwise it will not be possible to close it using the esc key
+	 */
+	export function restoreModalFocus() {
+		const modal = document.querySelector('.modal.show');
+		if (modal instanceof HTMLElement) {
+			modal.focus();
+		}
+	}
 </script>
 
 <!-- Note: tabindex="-1" is needed to fix escape key not working in some cases -->

src/lib/components/common/Modal.svelte

@@ -135,7 +135,7 @@
 		showZarrUrls = true;
 		selectedUnit = unit;
 		await tick();
-		restoreModalFocus();
+		modal?.restoreModalFocus();
 	}
 
 	async function back() {
@@ -144,7 +144,7 @@
 		selectedUnit = undefined;
 		await tick();
 		setStatusFilterSelector();
-		restoreModalFocus();
+		modal?.restoreModalFocus();
 	}
 
 	function setStatusFilterSelector() {
@@ -194,16 +194,6 @@
 		await loadRun(page, pageSize);
 	}
 
-	/**
-	 * Restore focus on modal, otherwise it will not be possible to close it using the esc key
-	 */
-	function restoreModalFocus() {
-		const modal = document.querySelector('.modal.show');
-		if (modal instanceof HTMLElement) {
-			modal.focus();
-		}
-	}
-
 	let hasZarrUrlsInTable = $derived(
 		data !== undefined && data.items.find((u) => u.zarr_urls.length === 1) !== undefined
 	);

src/lib/components/jobs/RunStatusModal.svelte

@@ -273,6 +273,7 @@
 			}
 		}
 		checkingConfiguration = true;
+		modal?.restoreModalFocus();
 	}
 
 	/**
@@ -528,7 +529,7 @@
 	);
 </script>
 
-<Modal id="runWorkflowModal" centered={true} bind:this={modal} size="xl" scrollable={true}>
+<Modal id="runWorkflowModal" centered={true} bind:this={modal} size="xl" scrollable={true} focus={false}>
 	{#snippet header()}
 		<h5 class="modal-title">
 			{#if mode === 'run'}

src/lib/components/v2/workflow/RunWorkflowModal.svelte

@@ -92,19 +92,30 @@
 	}
 
 	async function getToken() {
+		const promise = getTokenPromise();
+		await navigator.clipboard.write([new ClipboardItem({ 'text/plain': promise })]);
+		const toastElement = document.getElementById('tokenCopiedToast');
+		if (!toastElement) {
+			return;
+		}
+		// @ts-expect-error
+		// eslint-disable-next-line no-undef
+		const toast = new bootstrap.Toast(toastElement);
+		toast.show();
+	}
+
+	/**
+	 * Safari doesn't allow to run asynchronous code between the click event and the
+	 * clipboard write, so we need to pass the promise to the ClipboardItem constructor.
+	 */
+	async function getTokenPromise() {
 		const response = await fetch(`/profile/token`);
 		if (response.ok) {
 			const { token } = await response.json();
-			await navigator.clipboard.writeText(token);
-			const toastElement = document.getElementById('tokenCopiedToast');
-			if (!toastElement) {
-				return;
-			}
-			// @ts-expect-error
-			// eslint-disable-next-line no-undef
-			const toast = new bootstrap.Toast(toastElement);
-			toast.show();
+			// Chrome only accept a promise returning Blob type, with proper content type.
+			return new Blob([token], { type: 'text/plain' });
 		}
+		throw new Error('Unable to retrieve token');
 	}
 
 	const selectedSection = $derived(getSelectedSection(page.url.pathname));

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 import { expect, test } from './workflow_fixture.js';
-import { waitModalClosed, waitPageLoading } from '../utils.js';
+import { closeModal, waitModalClosed, waitPageLoading } from '../utils.js';
 import { createFakeTask, deleteTask } from './task_utils.js';
 import { fileURLToPath } from 'url';
 import path from 'path';

tests/v2/import_export_args.spec.js

@@ -175,7 +175,6 @@ test('Run mock tasks [v2]', async ({ page, workflow }) => {
 				.getByRole('option', { selected: true })
 		).toHaveText('generic_task');
 		await modal.getByRole('button', { name: 'Run', exact: true }).click();
-		await modal.getByRole('button', { name: 'Continue anyway', exact: true }).click();
 		await modal.getByRole('button', { name: 'Confirm' }).click();
 		await waitModalClosed(page);
 	});