Moved tasks table links to the info modal

Author: zonia3000

CHANGELOG.md

@@ -14,6 +14,7 @@
 * Added a "Get URL" button to image list (\#759);
 * Supported converter task types (\#759);
 * Made user sorting case insensitive (\#759);
+* Moved tasks table links to the info modal (\#759);
 
 # 1.16.2
 

components/src/lib/tasks/FilteredTasksTable.svelte

@@ -7,6 +7,7 @@
 	/** @type {Array<import('../types/api').TaskGroupV2>} */
 	export let taskGroups;
 	export let showAuthorsInSeparateColumn = true;
+	export let showDocLinksInTable = false;
 
 	/** @type {import('../types/api').WorkflowTasksTableRowGroup[]} */
 	let allRows = [];
@@ -380,7 +381,7 @@
 							{#if task.taskVersions[task.selectedVersion]}
 								<tr>
 									<td class="task-name-col">
-										{#if task.taskVersions[task.selectedVersion].docs_link}
+										{#if showDocLinksInTable && task.taskVersions[task.selectedVersion].docs_link}
 											<a href={task.taskVersions[task.selectedVersion].docs_link} target="_blank">
 												{task.taskVersions[task.selectedVersion].task_name}
 											</a>

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

@@ -19,6 +19,7 @@
 
 	let loading = false;
 	let addingTask = false;
+	let showDocLinksInTable = false;
 
 	/** @type {Array<import('fractal-components/types/api').TaskGroupV2>} */
 	let taskGroups = [];
@@ -94,6 +95,30 @@
 			}
 		);
 	}
+
+	/**
+	 * @param {import('fractal-components/types/api').TasksTableRow} taskRow
+	 */
+	function showTaskInfoButton(taskRow) {
+		return taskRow.docs_info || (!showDocLinksInTable && taskRow.docs_link);
+	}
+
+	/**
+	 * @param {import('fractal-components/types/api').TasksTableRow} taskRow
+	 */
+	function getTaskInfo(taskRow) {
+		let info = '';
+		if (taskRow.docs_info) {
+			info += taskRow.docs_info;
+		}
+		if (!showDocLinksInTable && taskRow.docs_link) {
+			if (taskRow.docs_info) {
+				info += '\n\n---\n'; // markdown hr
+			}
+			info += taskRow.docs_link;
+		}
+		return formatMarkdown(info);
+	}
 </script>
 
 <Modal
@@ -124,8 +149,8 @@
 				</svelte:fragment>
 				<svelte:fragment slot="extra-columns" let:task>
 					<td>
-						{#if task.docs_info}
-							<PropertyDescription description={formatMarkdown(task.docs_info)} html={true} />
+						{#if showTaskInfoButton(task)}
+							<PropertyDescription description={getTaskInfo(task)} html={true} />
 						{/if}
 					</td>
 					<td>

src/routes/v2/tasks/+page.svelte

@@ -13,6 +13,7 @@
 
 	/** @type {import('fractal-components/types/api').TasksTableRow|null} */
 	let selectedTaskRow = null;
+	let showDocLinksInTable = false;
 
 	/**
 	 * @param {import('fractal-components/types/api').TasksTableRow} taskRow
@@ -22,6 +23,13 @@
 		modal.show();
 	}
 
+	/**
+	 * @param {import('fractal-components/types/api').TasksTableRow} taskRow
+	 */
+	function showInfoButton(taskRow) {
+		return taskRow.docs_info || (!showDocLinksInTable && taskRow.docs_link);
+	}
+
 	onMount(() => {
 		const genericSearchInput = document.getElementById('taskGenericSearchInput');
 		if (genericSearchInput instanceof HTMLElement) {
@@ -46,7 +54,7 @@
 {/if}
 
 <div class="container mt-2">
-	<FilteredTasksTable {taskGroups}>
+	<FilteredTasksTable {taskGroups} {showDocLinksInTable}>
 		<svelte:fragment slot="extra-columns-colgroup">
 			<col width="60" />
 		</svelte:fragment>
@@ -55,7 +63,7 @@
 		</svelte:fragment>
 		<svelte:fragment slot="extra-columns" let:task>
 			<td>
-				{#if task.docs_info}
+				{#if showInfoButton(task)}
 					<button class="btn btn-info" on:click={() => showDocsInfoModal(task)}>
 						<i class="bi bi-info-circle" />
 					</button>
@@ -70,7 +78,20 @@
 		<h5 class="modal-title">{selectedTaskRow?.task_name}</h5>
 	</svelte:fragment>
 	<svelte:fragment slot="body">
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html formatMarkdown(selectedTaskRow?.docs_info)}
+		{#if selectedTaskRow?.docs_info}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html formatMarkdown(selectedTaskRow?.docs_info)}
+		{/if}
+		{#if !showDocLinksInTable && selectedTaskRow?.docs_link}
+			{#if selectedTaskRow?.docs_info}
+				<hr />
+			{/if}
+			<div>
+				Docs link:
+				<a href={selectedTaskRow?.docs_link} target="_blank">
+					{selectedTaskRow?.docs_link}
+				</a>
+			</div>
+		{/if}
 	</svelte:fragment>
 </Modal>

tasks-list/src/routes/+page.svelte

@@ -38,7 +38,7 @@
 	}
 </script>
 
-<FilteredTasksTable taskGroups={tasks}>
+<FilteredTasksTable taskGroups={tasks} showDocLinksInTable={true}>
 	<svelte:fragment slot="extra-columns-colgroup">
 		<col width="60" />
 		<col width="60" />