Merge pull request #272 from fractal-analytics-platform/270-add-confirmation-dialog-for-delete-task-operation

270 add confirmation dialog for delete task operation

Author: zonia3000

CHANGELOG.md

@@ -3,6 +3,7 @@
 
 # Unreleased
 
+* Added confirmation dialog for delete task operation (\#272).
 * Enabled task info tab and rendered docs info from markdown (\#271).
 * Update import-workflow feature (\#269).
 * Revamp home page and user-related layout (\#259).

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

@@ -516,7 +516,7 @@
 									<li class="list-group-item list-group-item-light fw-bold">Name</li>
 									<li class="list-group-item">{selectedWorkflowTask.task.name}</li>
 									<li class="list-group-item list-group-item-light fw-bold">Version</li>
-									<li class="list-group-item">{selectedWorkflowTask.task.version || '-'}</li>
+									<li class="list-group-item">{selectedWorkflowTask.task.version || '–'}</li>
 									<li class='list-group-item list-group-item-light fw-bold'>Docs Link</li>
 									<li class='list-group-item'>
 										{#if selectedWorkflowTask.task.docs_link}
@@ -534,7 +534,7 @@
 										{/if}
 									</li>
 									<li class="list-group-item list-group-item-light fw-bold">Owner</li>
-									<li class="list-group-item">{selectedWorkflowTask.task.owner || '-'}</li>
+									<li class="list-group-item">{selectedWorkflowTask.task.owner || '–'}</li>
 									<li class="list-group-item list-group-item-light fw-bold">Command</li>
 									<li class='list-group-item'><code>{selectedWorkflowTask.task.command}</code></li>
 									<li class='list-group-item list-group-item-light fw-bold'>Source</li>
@@ -548,7 +548,7 @@
 										<code>{selectedWorkflowTask.task.output_type}</code>
 									</li>
 									<li class='list-group-item list-group-item-light fw-bold'>Args Schema Version</li>
-									<li class='list-group-item'>{selectedWorkflowTask.task.args_schema_version || '-'}</li>
+									<li class='list-group-item'>{selectedWorkflowTask.task.args_schema_version || '–'}</li>
 									<li class='list-group-item list-group-item-light fw-bold'>Args Schema</li>
 									<li class='list-group-item'>
 										{#if selectedWorkflowTask.task.args_schema}

src/routes/tasks/+page.svelte

@@ -9,6 +9,7 @@
 	import TaskInfoModal from '$lib/components/tasks/TaskInfoModal.svelte';
 	import TaskCollection from '$lib/components/tasks/TaskCollection.svelte';
 	import StandardErrorAlert from '$lib/components/common/StandardErrorAlert.svelte';
+	import ConfirmActionButton from '$lib/components/common/ConfirmActionButton.svelte';
 
 	// Error property to be set in order to show errors in UI
 	let errorReasons = undefined;
@@ -218,7 +219,7 @@
 					{#each tasks as task}
 						<tr>
 							<td class="col-3">{task.name}</td>
-							<td class="col-1">{task.version || "-"}</td>
+							<td class="col-1">{task.version || "–"}</td>
 							<td class='col-1'>{task.owner || "–"}</td>
 							<td class="col-2">
 								<button
@@ -242,10 +243,15 @@
 									<i class="bi bi-pencil" />
 									Edit
 								</button>
-								<button class="btn btn-danger" on:click={() => handleDeleteTask(task.id)}>
-									<i class="bi bi-trash" />
-									Delete
-								</button>
+								<ConfirmActionButton
+									modalId="confirmTaskDeleteModal{task.id}"
+									style={'danger'}
+									btnStyle="danger"
+									buttonIcon="trash"
+									label={'Delete'}
+									message={`Delete task ${task.name}`}
+									callbackAction={() => handleDeleteTask(task.id)}
+								/>
 							</td>
 						</tr>
 					{/each}