Changes to apply button status; added a check on workflow task input filters pending changes; fixed discard args chages issue

Author: zonia3000

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/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/datasets/FiltersCreationForm.svelte

@@ -1,6 +1,12 @@
 <script>
+	import { objectChanged } from '$lib/common/component_utilities';
 	import { tick } from 'svelte';
 
+	/** @type {{ [key: string]: string | number | boolean }} */
+	let initialAttributeFields = {};
+	/** @type {{ [key: string]: boolean }} */
+	let initialTypeFields = {};
+
 	/** @type {Array<{ key: string, value: string, type: string, error: string }>} */
 	let attributeFields = [];
 	/** @type {Array<{ key: string, value: boolean, error: string }>} */
@@ -17,6 +23,44 @@
 		typeFields = Object.entries(types).map(([k, v]) => {
 			return { key: k, value: v, error: '' };
 		});
+		initialAttributeFields = getAttributes();
+		initialTypeFields = getTypes();
+	}
+
+	/**
+	 * @returns {boolean}
+	 */
+	export function hasUnsavedChanges() {
+		return (
+			objectChanged(initialAttributeFields, getAttributes()) ||
+			objectChanged(initialTypeFields, getTypes())
+		);
+	}
+
+	export function discardChanges() {
+		init(initialAttributeFields, initialTypeFields);
+	}
+
+	export function save() {
+		initialAttributeFields = getAttributes();
+		initialTypeFields = getTypes();
+	}
+
+	/**
+	 * @param {string} key
+	 * @param {string} value
+	 * @param {string} type
+	 */
+	export function importAttribute(key, value, type) {
+		attributeFields = [...attributeFields, { key, value, type, error: '' }];
+	}
+
+	/**
+	 * @param {string} key
+	 * @param {boolean} value
+	 */
+	export function importType(key, value) {
+		typeFields = [...typeFields, { key, value, error: '' }];
 	}
 
 	/**

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

@@ -68,7 +68,7 @@
 		}
 	}
 
-	async function save() {
+	export async function save() {
 		if (errorAlert) {
 			errorAlert.hide();
 		}
@@ -101,22 +101,33 @@
 			setTimeout(() => {
 				successfullySaved = false;
 			}, 3000);
+			form.save();
 			updateWorkflowTaskCallback(await response.json());
 		} else {
 			errorAlert = displayStandardErrorAlert(await response.json(), `errorAlert-inputFilters`);
 		}
 		saving = false;
 	}
 
+	/**
+	 * @returns {boolean}
+	 */
+	export function hasUnsavedChanges() {
+		return form.hasUnsavedChanges();
+	}
+
+	export function discard() {
+		form.discardChanges();
+	}
+
 	function onOpenAddDatasetAttributeModal() {
 		selectedDatasetAttributeKey = '';
 		selectedDatasetAttributeValue = '';
 	}
 
 	function addDatasetAttribute() {
-		const attributes = form.getAttributes();
-		attributes[selectedDatasetAttributeKey] = selectedDatasetAttributeValue;
-		form.init(attributes, form.getTypes());
+		const attributeType = typeof datasetAttributes[selectedDatasetAttributeKey];
+		form.importAttribute(selectedDatasetAttributeKey, selectedDatasetAttributeValue, attributeType);
 	}
 
 	function onOpenAddDatasetTypeModal() {
@@ -125,9 +136,7 @@
 	}
 
 	function addDatasetType() {
-		const types = form.getTypes();
-		types[selectedDatasetTypeKey] = selectedDatasetTypeValue;
-		form.init(form.getAttributes(), types);
+		form.importType(selectedDatasetTypeKey, selectedDatasetTypeValue);
 	}
 </script>
 

src/routes/v1/projects/[projectId]/workflows/[workflowId]/+page.svelte

@@ -90,6 +90,17 @@
 		}
 	});
 
+	/**
+	 * @param {number} id
+	 */
+	function setWorkflowTabContextId(id) {
+		if (argumentsWithUnsavedChanges === true) {
+			toggleUnsavedChangesModal();
+			return;
+		}
+		workflowTabContextId = id;
+	}
+
 	/**
 	 * Exports a project's workflow from the server
 	 * @returns {Promise<void>}
@@ -333,9 +344,12 @@
 		}
 		if (argumentsWithUnsavedChanges === true) {
 			toggleUnsavedChangesModal();
-			preventedTaskContextChange = wft;
+			if (wft) {
+				preventedTaskContextChange = wft;
+			}
 			throw new Error('Cannot change workflow task context while there are unsaved changes');
 		}
+		preventedTaskContextChange = undefined;
 		setWorkflowTaskContext(wft);
 	}
 
@@ -347,6 +361,9 @@
 	 * @param {import('$lib/types').WorkflowTask} wft
 	 */
 	function setWorkflowTaskContext(wft) {
+		if (!wft) {
+			return;
+		}
 		selectedWorkflowTask = wft;
 		// Check if args schema is available
 		argsSchemaAvailable =
@@ -673,40 +690,32 @@
 								<ul class="nav nav-tabs card-header-tabs">
 									<li class="nav-item">
 										<button
-											data-bs-toggle="tab"
-											data-bs-target="#args-tab"
 											class="nav-link {workflowTabContextId === 0 ? 'active' : ''}"
-											on:click={() => (workflowTabContextId = 0)}
+											on:click={() => setWorkflowTabContextId(0)}
 											aria-current={workflowTabContextId === 0}
 											>Arguments
 										</button>
 									</li>
 									<li class="nav-item">
 										<button
-											data-bs-toggle="tab"
-											data-bs-target="#meta-tab"
 											class="nav-link {workflowTabContextId === 1 ? 'active' : ''}"
-											on:click={() => (workflowTabContextId = 1)}
+											on:click={() => setWorkflowTabContextId(1)}
 											aria-current={workflowTabContextId === 1}
 											>Meta
 										</button>
 									</li>
 									<li class="nav-item">
 										<button
-											data-bs-toggle="tab"
-											data-bs-target="#info-tab"
 											class="nav-link {workflowTabContextId === 2 ? 'active' : ''}"
-											on:click={() => (workflowTabContextId = 2)}
+											on:click={() => setWorkflowTabContextId(2)}
 											aria-current={workflowTabContextId === 2}
 											>Info
 										</button>
 									</li>
 									<li class="nav-item">
 										<button
-											data-bs-toggle="tab"
-											data-bs-target="#version-tab"
 											class="nav-link {workflowTabContextId === 3 ? 'active' : ''}"
-											on:click={() => (workflowTabContextId = 3)}
+											on:click={() => setWorkflowTabContextId(3)}
 											aria-current={workflowTabContextId === 3}
 										>
 											Version

src/routes/v2/projects/[projectId]/datasets/[datasetId]/+page.svelte

@@ -10,6 +10,7 @@
 	import BooleanIcon from '$lib/components/common/BooleanIcon.svelte';
 	import SlimSelect from 'slim-select';
 	import { onMount, tick } from 'svelte';
+	import { objectChanged } from '$lib/common/component_utilities';
 
 	let projectId = $page.params.projectId;
 
@@ -152,27 +153,8 @@
 	}
 
 	$: applyBtnActive =
-		filtersChanged(lastAppliedAttributeFilters, attributeFilters) ||
-		filtersChanged(lastAppliedTypeFilters, typeFilters);
-
-	/**
-	 * @param {{ [key: string]: null | string | number | boolean}} oldFilters
-	 * @param {{ [key: string]: null | string | number | boolean}} newFilters
-	 */
-	function filtersChanged(oldFilters, newFilters) {
-		if (Object.keys(oldFilters).length !== Object.keys(newFilters).length) {
-			return true;
-		}
-		for (const [oldKey, oldValue] of Object.entries(oldFilters)) {
-			if (!(oldKey in newFilters)) {
-				return true;
-			}
-			if (oldValue !== newFilters[oldKey]) {
-				return true;
-			}
-		}
-		return false;
-	}
+		objectChanged(lastAppliedAttributeFilters, attributeFilters) ||
+		objectChanged(lastAppliedTypeFilters, typeFilters);
 
 	let resetBtnActive = false;