Merge pull request #452 from fractal-analytics-platform/input-filters-and-dataset-page

Added input filters tab on workflow page and improved dataset page

Author: zonia3000

CHANGELOG.md

@@ -13,6 +13,9 @@
     * added admin "Tasks V1/V2 compatibility" page (\#450);
     * supported adding V1 task in V2 workflow (\#450);
     * removed read only property from V2 datasets (\#450);
+    * added input filters tab in workflow task page (\#452);
+    * added searchable dropdowns for image filters (\#452);
+    * moved editing of dataset inside dataset page (\#452);
 
 # 0.10.2
 

__tests__/Paginator.test.js

@@ -87,16 +87,16 @@ describe('Paginator', () => {
 	});
 	it('previous is disabled on first page', async () => {
 		const result = render(Paginator, {
-			props: { pageSize: 10, totalCount: 3, currentPage: 1, onPageChange: () => {} }
+			props: { pageSize: 10, totalCount: 13, currentPage: 1, onPageChange: () => {} }
 		});
-		expect(getPageItems(result)).toEqual(['«', '1', '»']);
+		expect(getPageItems(result)).toEqual(['«', '1', '2', '»']);
 		expect(result.queryByLabelText('Previous').disabled).true;
 	});
 	it('next is disabled on last page', async () => {
 		const result = render(Paginator, {
-			props: { pageSize: 10, totalCount: 3, currentPage: 1, onPageChange: () => {} }
+			props: { pageSize: 10, totalCount: 13, currentPage: 2, onPageChange: () => {} }
 		});
-		expect(getPageItems(result)).toEqual(['«', '1', '»']);
+		expect(getPageItems(result)).toEqual(['«', '1', '2', '»']);
 		expect(result.queryByLabelText('Next').disabled).true;
 	});
 });

__tests__/v2/CreateUpdateDatasetModal.test.js renamed to __tests__/v2/CreateDatasetModal.test.js

@@ -27,13 +27,13 @@ global.window.bootstrap = {
 	Modal: MockModal
 };
 
-import CreateUpdateDatasetModal from '../../src/lib/components/v2/projects/datasets/CreateUpdateDatasetModal.svelte';
+import CreateDatasetModal from '../../src/lib/components/v2/projects/datasets/CreateDatasetModal.svelte';
 
 const defaultProps = {
-	props: { createDatasetCallback: vi.fn(), updateDatasetCallback: vi.fn() }
+	props: { createDatasetCallback: vi.fn() }
 };
 
-describe('CreateUpdateDatasetModal', () => {
+describe('CreateDatasetModal', () => {
 	fetch.mockResolvedValue({
 		ok: true,
 		status: 200,
@@ -48,15 +48,15 @@ describe('CreateUpdateDatasetModal', () => {
 	});
 
 	it('validate missing name and zarr dir', async () => {
-		const result = render(CreateUpdateDatasetModal, defaultProps);
+		const result = render(CreateDatasetModal, defaultProps);
 		await fireEvent.click(result.getByRole('button', { name: 'Save' }));
 		expect(result.queryAllByText('Required field').length).eq(2);
 	});
 
 	it('create dataset with string filter', async () => {
 		const createDatasetCallback = vi.fn();
-		const result = render(CreateUpdateDatasetModal, {
-			props: { createDatasetCallback, updateDatasetCallback: vi.fn() }
+		const result = render(CreateDatasetModal, {
+			props: { createDatasetCallback }
 		});
 		await fireEvent.input(result.getByRole('textbox', { name: 'Dataset Name' }), {
 			target: { value: 'my dataset' }
@@ -85,8 +85,8 @@ describe('CreateUpdateDatasetModal', () => {
 
 	it('create dataset with number filter', async () => {
 		const createDatasetCallback = vi.fn();
-		const result = render(CreateUpdateDatasetModal, {
-			props: { createDatasetCallback, updateDatasetCallback: vi.fn() }
+		const result = render(CreateDatasetModal, {
+			props: { createDatasetCallback }
 		});
 		await fireEvent.input(result.getByRole('textbox', { name: 'Dataset Name' }), {
 			target: { value: 'my dataset' }
@@ -116,8 +116,8 @@ describe('CreateUpdateDatasetModal', () => {
 
 	it('create dataset with type filter set to false', async () => {
 		const createDatasetCallback = vi.fn();
-		const result = render(CreateUpdateDatasetModal, {
-			props: { createDatasetCallback, updateDatasetCallback: vi.fn() }
+		const result = render(CreateDatasetModal, {
+			props: { createDatasetCallback }
 		});
 		await fireEvent.input(result.getByRole('textbox', { name: 'Dataset Name' }), {
 			target: { value: 'my dataset' }
@@ -145,8 +145,8 @@ describe('CreateUpdateDatasetModal', () => {
 
 	it('create dataset with type filter set to true', async () => {
 		const createDatasetCallback = vi.fn();
-		const result = render(CreateUpdateDatasetModal, {
-			props: { createDatasetCallback, updateDatasetCallback: vi.fn() }
+		const result = render(CreateDatasetModal, {
+			props: { createDatasetCallback }
 		});
 		await fireEvent.input(result.getByRole('textbox', { name: 'Dataset Name' }), {
 			target: { value: 'my dataset' }

__tests__/v2/FiltersCreationForm.test.js

@@ -69,13 +69,22 @@ describe('FiltersCreationForm', () => {
 		const result = render(FiltersCreationForm);
 		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
 		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
-		await fireEvent.input(result.getByPlaceholderText('Value'), { target: { value: 'foo' } });
 		await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'number' } });
+		await fireEvent.input(result.getByPlaceholderText('Value'), { target: { value: 'foo' } });
 		expect(result.component.validateFields()).false;
 		await tick();
 		expect(result.getByText('Invalid number')).toBeDefined();
 	});
 
+	it('switch to boolean attribute', async () => {
+		const result = render(FiltersCreationForm);
+		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
+		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
+		await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'boolean' } });
+		expect(result.getByLabelText('Value').value).eq('true');
+		expect(result.component.validateFields()).true;
+	});
+
 	it('validate duplicated attribute key', async () => {
 		const result = render(FiltersCreationForm);
 		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));

playwright.config.js

@@ -47,7 +47,7 @@ export default defineConfig({
 
 	webServer: [
 		{
-			command: './tests/start-test-server.sh 2.0.0a6',
+			command: './tests/start-test-server.sh 2.0.0a8',
 			port: 8000,
 			waitForPort: true,
 			stdout: 'pipe',

src/lib/common/component_utilities.js

@@ -250,3 +250,22 @@ export function downloadBlob(content, filename, contentType) {
 	downloader.setAttribute('download', filename);
 	downloader.click();
 }
+
+/**
+ * @param {{ [key: string]: null | string | number | boolean}} oldObject
+ * @param {{ [key: string]: null | string | number | boolean}} newObject
+ */
+export function objectChanged(oldObject, newObject) {
+	if (Object.keys(oldObject).length !== Object.keys(newObject).length) {
+		return true;
+	}
+	for (const [oldKey, oldValue] of Object.entries(oldObject)) {
+		if (!(oldKey in newObject)) {
+			return true;
+		}
+		if (oldValue !== newObject[oldKey]) {
+			return true;
+		}
+	}
+	return false;
+}

src/lib/components/common/ConfirmActionButton.svelte

@@ -12,6 +12,7 @@
 	export let message = '';
 	/** @type {Modal} */
 	let modal;
+	let loading = false;
 
 	const onOpen = () => {
 		// Remove old errors
@@ -25,7 +26,10 @@
 	 * Executes the callback handling possible errors
 	 */
 	const handleCallbackAction = async () => {
-		modal.confirmAndHide(callbackAction);
+		loading = true;
+		modal.confirmAndHide(callbackAction, function () {
+			loading = false;
+		});
 	};
 </script>
 
@@ -34,16 +38,25 @@
 		<h1 class="modal-title fs-5">Confirm action</h1>
 	</svelte:fragment>
 	<svelte:fragment slot="body">
-		<p>You're about to:</p>
-		<p class="badge bg-{style} fs-6 wrap">{message}</p>
-		<p>Do you confirm?</p>
+		{#if !!$$slots.body}
+			<slot name="body" />
+		{:else}
+			<p>You're about to:</p>
+			<p class="badge bg-{style} fs-6 wrap">{message}</p>
+			<p>Do you confirm?</p>
+		{/if}
 		<div class="container">
 			<div id="errorAlert-{modalId}" />
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="footer">
 		<button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-		<button class="btn btn-primary" on:click={handleCallbackAction}>Confirm</button>
+		<button class="btn btn-primary" on:click={handleCallbackAction}>
+			{#if loading}
+				<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
+			{/if}
+			Confirm
+		</button>
 	</svelte:fragment>
 </Modal>
 

src/lib/components/common/Paginator.svelte

@@ -17,13 +17,26 @@
 	/**
 	 * @param {number} newCurrentPage
 	 */
-	function setCurrentPage(newCurrentPage) {
-		onPageChange(newCurrentPage, pageSize);
+	async function setCurrentPage(newCurrentPage) {
+		await onPageChange(newCurrentPage, pageSize);
+		fixCurrentPageFocus();
 	}
 
-	function setPageSize() {
+	async function setPageSize() {
 		currentPage = 1;
-		onPageChange(currentPage, pageSize);
+		await onPageChange(currentPage, pageSize);
+		fixCurrentPageFocus();
+	}
+
+	/**
+	 * The focus of the current page button may be set on the wrong item due to the redrawing
+	 * of the component. This function force setting the focus to the correct active button.
+	 */
+	function fixCurrentPageFocus() {
+		const activeItem = document.querySelector('.pagination .page-item.active button');
+		if (activeItem instanceof HTMLButtonElement) {
+			activeItem.focus();
+		}
 	}
 
 	/**
@@ -64,9 +77,9 @@
 	}
 </script>
 
-<div class="row row-cols-lg-auto justify-content-center">
-	{#if totalCount > 0}
-		<div class="col-12 mt-5">
+<div class="row justify-content-center">
+	{#if numberOfPages > 1}
+		<div class="col">
 			<nav aria-label="Page navigation">
 				<ul class="pagination justify-content-center">
 					<li class="page-item">
@@ -113,25 +126,25 @@
 				</ul>
 			</nav>
 		</div>
-		<div class="col-12 mt-5">
-			<div class="input-group mb-3">
-				<label class="input-group-text" for="page_size">Page size</label>
-				<select
-					class="form-control"
-					id="page_size"
-					bind:value={pageSize}
-					on:change={() => setPageSize()}
-				>
-					{#each availablePageSizes as pageSize}
-						<option value={pageSize}>{pageSize}</option>
-					{/each}
-				</select>
-			</div>
-		</div>
 	{/if}
 </div>
-<div class="row">
-	<div class="mt-3 col">
+<div class="row row-cols-lg-auto justify-content-center">
+	<div class="col-6">
+		<div class="input-group">
+			<label class="input-group-text" for="page_size">Page size</label>
+			<select
+				class="form-control"
+				id="page_size"
+				bind:value={pageSize}
+				on:change={() => setPageSize()}
+			>
+				{#each availablePageSizes as pageSize}
+					<option value={pageSize}>{pageSize}</option>
+				{/each}
+			</select>
+		</div>
+	</div>
+	<div class="col-6 mt-2">
 		<p class="text-center">Total results: {totalCount}</p>
 	</div>
 </div>

src/lib/components/v1/workflow/ArgumentsSchema.svelte

@@ -59,6 +59,12 @@
 			validSchema = false;
 		}
 	}
+
+	$: {
+		if (!unsavedChanges) {
+			schemaComponent?.discardChanges(args);
+		}
+	}
 </script>
 
 <div id="workflow-arguments-schema-panel">

src/lib/components/v2/projects/ProjectDatasetsList.svelte

@@ -1,7 +1,7 @@
 <script>
 	import ConfirmActionButton from '$lib/components/common/ConfirmActionButton.svelte';
 	import { AlertError } from '$lib/common/errors';
-	import CreateUpdateDatasetModal from './datasets/CreateUpdateDatasetModal.svelte';
+	import CreateDatasetModal from './datasets/CreateDatasetModal.svelte';
 	import { onMount } from 'svelte';
 
 	/** @type {import('$lib/types-v2').DatasetV2[]} */
@@ -13,15 +13,9 @@
 		p.name.toLowerCase().includes(datasetSearch.toLowerCase())
 	);
 
-	/** @type {CreateUpdateDatasetModal} */
-	let createUpdateDatasetModal;
-
 	function createDatasetCallback(/** @type {import('$lib/types-v2').DatasetV2} */ newDataset) {
 		datasets = [...datasets, newDataset];
 	}
-	function updateDatasetCallback(/** @type {import('$lib/types-v2').DatasetV2} */ updatedDataset) {
-		datasets = datasets.map((d) => (d.id === updatedDataset.id ? updatedDataset : d));
-	}
 
 	/**
 	 * Deletes a project's dataset from the server
@@ -74,7 +68,8 @@
 					<button
 						class="btn btn-primary float-end"
 						type="button"
-						on:click={() => createUpdateDatasetModal.openForCreate()}
+						data-bs-target="#createDatasetModal"
+						data-bs-toggle="modal"
 					>
 						Create new dataset
 					</button>
@@ -96,16 +91,12 @@
 					<tr>
 						<td>{dataset.name}</td>
 						<td>
-							<a class="btn btn-light" href="/v2/projects/{dataset.project_id}/datasets/{dataset.id}">
+							<a
+								class="btn btn-light"
+								href="/v2/projects/{dataset.project_id}/datasets/{dataset.id}"
+							>
 								<i class="bi bi-arrow-up-right-square" /> Open
 							</a>
-							<button
-								class="btn btn-primary"
-								type="button"
-								on:click|preventDefault={() => createUpdateDatasetModal.openForEdit(dataset)}
-							>
-								<i class="bi bi-pencil" /> Edit
-							</button>
 							<ConfirmActionButton
 								modalId="confirmDatasetDeleteModal{dataset.id}"
 								style={'danger'}
@@ -123,8 +114,4 @@
 	</table>
 </div>
 
-<CreateUpdateDatasetModal
-	bind:this={createUpdateDatasetModal}
-	{createDatasetCallback}
-	{updateDatasetCallback}
-/>
+<CreateDatasetModal {createDatasetCallback} />