Raised a warning upon import/export of a workflow with a custom task

Author: zonia3000

src/lib/components/common/StandardDismissableAlert.svelte

@@ -1,6 +1,8 @@
 <script>
 	export let message;
 	export let autoDismiss = true;
+	/** @type {'success'|'warning'} */
+	export let alertType = 'success';
 
 	let timeout;
 
@@ -20,7 +22,10 @@
 </script>
 
 {#if message}
-	<div class="alert alert-success alert-dismissible fade show" role="alert">
+	<div class="alert alert-{alertType} alert-dismissible fade show" role="alert">
+		{#if alertType === 'warning'}
+			<i class="bi bi-exclamation-triangle" />
+		{/if}
 		{message}
 		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" />
 	</div>

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

@@ -3,8 +3,9 @@
 	import { page } from '$app/stores';
 	import Modal from '../../common/Modal.svelte';
 	import { goto } from '$app/navigation';
+	import { tick } from 'svelte';
 
-	/** @type {(workflow: import('$lib/types-v2').WorkflowV2) => void} */
+	/** @type {(workflow: import('$lib/types-v2').WorkflowV2, warning: string) => void} */
 	export let handleWorkflowImported;
 
 	// Component properties
@@ -41,16 +42,19 @@
 	}
 
 	function handleImportOrCreateWorkflow() {
-		modal.confirmAndHide(async () => {
-			creating = true;
-			if (workflowFileSelected) {
-				await handleImportWorkflow();
-			} else {
-				await handleCreateWorkflow();
+		modal.confirmAndHide(
+			async () => {
+				creating = true;
+				if (workflowFileSelected) {
+					await handleImportWorkflow();
+				} else {
+					await handleCreateWorkflow();
+				}
+			},
+			() => {
+				creating = false;
 			}
-		}, () => {
-			creating = false;
-		});
+		);
 	}
 
 	async function handleImportWorkflow() {
@@ -88,8 +92,21 @@
 				importSuccess = false;
 			}, 3000);
 			reset();
+
+			/** @type {import('$lib/types-v2').WorkflowV2} */
 			const workflow = result;
-			handleWorkflowImported(workflow);
+
+			let customTaskWarning = '';
+			await tick();
+			const customTasks = workflow.task_list
+				.map((w) => (w.is_legacy_task ? w.task_legacy : w.task))
+				.filter((t) => t.owner);
+
+			if (customTasks.length > 0) {
+				customTaskWarning = `Custom tasks (like the one with id=${customTasks[0].id} and source="${customTasks[0].source}") are not meant to be portable; importing this workflow may not work as expected.`;
+			}
+
+			handleWorkflowImported(workflow, customTaskWarning);
 		} else {
 			console.error('Import workflow failed', result);
 			throw new AlertError(result, response.status);

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

@@ -5,6 +5,7 @@
 	import CreateWorkflowModal from './CreateWorkflowModal.svelte';
 	import { onMount } from 'svelte';
 	import { saveSelectedDataset } from '$lib/common/workflow_utilities';
+	import StandardDismissableAlert from '$lib/components/common/StandardDismissableAlert.svelte';
 
 	// The list of workflows
 	/** @type {import('$lib/types-v2').WorkflowV2[]} */
@@ -14,6 +15,8 @@
 
 	let workflowSearch = '';
 
+	let customTaskWarning = '';
+
 	$: filteredWorkflows = workflows.filter((p) =>
 		p.name.toLowerCase().includes(workflowSearch.toLowerCase())
 	);
@@ -46,11 +49,16 @@
 
 	/**
 	 * @param {import('$lib/types-v2').WorkflowV2} importedWorkflow
+	 * @param {string} warningMessage
 	 */
-	function handleWorkflowImported(importedWorkflow) {
+	function handleWorkflowImported(importedWorkflow, warningMessage) {
 		workflows.push(importedWorkflow);
 		workflows = workflows;
-		goto(`/v2/projects/${projectId}/workflows/${importedWorkflow.id}`);
+		if (warningMessage) {
+			customTaskWarning = warningMessage;
+		} else {
+			goto(`/v2/projects/${projectId}/workflows/${importedWorkflow.id}`);
+		}
 	}
 
 	onMount(() => {
@@ -82,14 +90,20 @@
 					<button
 						class="btn btn-primary float-end"
 						type="submit"
-						on:click={() => createWorkflowModal.show()}
+						on:click={() => {
+							customTaskWarning = '';
+							createWorkflowModal.show();
+						}}
 					>
 						Create new workflow
 					</button>
 				</div>
 			</div>
 		</div>
 	</div>
+
+	<StandardDismissableAlert message={customTaskWarning} alertType="warning" autoDismiss={false} />
+
 	<table class="table align-middle caption-top">
 		<thead class="table-light">
 			<tr>

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

@@ -100,6 +100,8 @@
 	/** @type {import('$lib/types-v2').ApplyWorkflowV2|undefined} */
 	let selectedSubmittedJob;
 
+	let customTaskWarning = '';
+
 	$: updatableWorkflowList = workflow.task_list || [];
 
 	$: sortedDatasets = datasets.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
@@ -162,6 +164,16 @@
 			return;
 		}
 
+		customTaskWarning = '';
+		await tick();
+		const customTasks = workflow.task_list
+			.map((w) => (w.is_legacy_task ? w.task_legacy : w.task))
+			.filter((t) => t.owner);
+
+		if (customTasks.length > 0) {
+			customTaskWarning = `Custom tasks (like the one with id=${customTasks[0].id} and source="${customTasks[0].source}") are not meant to be portable; re-importing this workflow may not work as expected.`;
+		}
+
 		const response = await fetch(`/api/v2/project/${project.id}/workflow/${workflow.id}/export`, {
 			method: 'GET',
 			credentials: 'include'
@@ -802,7 +814,11 @@
 			<a href="/v2/projects/{project?.id}/workflows/{workflow?.id}/jobs" class="btn btn-light">
 				<i class="bi-journal-code" /> List jobs
 			</a>
-			<button class="btn btn-light" on:click|preventDefault={handleExportWorkflow}>
+			<button
+				class="btn btn-light"
+				on:click|preventDefault={handleExportWorkflow}
+				aria-label="Export workflow"
+			>
 				<i class="bi-download" />
 			</button>
 			<a id="downloadWorkflowButton" class="d-none">Download workflow link</a>
@@ -818,6 +834,8 @@
 	</div>
 </div>
 
+<StandardDismissableAlert message={customTaskWarning} alertType="warning" autoDismiss={false} />
+
 {#if workflow}
 	<StandardDismissableAlert message={workflowSuccessMessage} />
 

tests/v2/export_import_workflow_custom_task.spec.js

@@ -0,0 +1,76 @@
+import { expect, test } from './workflow_fixture.js';
+import { waitModalClosed, waitPageLoading } from '../utils.js';
+import path from 'path';
+import { createFakeTask, deleteTask } from './task_utils.js';
+import os from 'os';
+import fs from 'fs';
+
+test('Export and re-import a workflow with a custom task', async ({ page, workflow }) => {
+	await page.waitForURL(workflow.url);
+	await waitPageLoading(page);
+
+	let taskName;
+	await test.step('Create test task', async () => {
+		taskName = await createFakeTask(page, {
+			type: 'non_parallel'
+		});
+	});
+
+	await test.step('Open workflow page', async () => {
+		await workflow.openWorkflowPage();
+	});
+
+	await test.step('Add task to workflow', async () => {
+		await workflow.addUserTask(taskName);
+	});
+
+	let downloadedFile;
+	await test.step('Export workflow and verify warning message', async () => {
+		const downloadPromise = page.waitForEvent('download');
+		await page.getByLabel('Export workflow').click();
+		const download = await downloadPromise;
+		downloadedFile = path.join(os.tmpdir(), download.suggestedFilename());
+		await download.saveAs(downloadedFile);
+		await expect(page.getByText('are not meant to be portable')).toBeVisible();
+	});
+
+	await test.step('Open project page', async () => {
+		await page.goto(`/v2/projects/${workflow.projectId}`);
+	});
+
+	await test.step('Open "Create new workflow" modal', async () => {
+		const createWorkflowBtn = page.getByRole('button', { name: 'Create new workflow' });
+		await createWorkflowBtn.waitFor();
+		await createWorkflowBtn.click();
+		const modalTitle = page.locator('.modal.show .modal-title');
+		await modalTitle.waitFor();
+		await expect(modalTitle).toHaveText('Create new workflow');
+	});
+
+	await test.step('Import the workflow and verify warning message', async () => {
+		await page
+			.getByRole('textbox', { name: 'Workflow name' })
+			.fill(`${workflow.workflowName}-imported`);
+		const fileChooserPromise = page.waitForEvent('filechooser');
+		await page.getByText('Import workflow from file').click();
+		const fileChooser = await fileChooserPromise;
+		await fileChooser.setFiles(downloadedFile);
+		await page.getByRole('button', { name: 'Import workflow' }).click();
+		await expect(page.getByText('are not meant to be portable')).toBeVisible();
+	});
+
+	await test.step('Cleanup', async () => {
+		await deleteWorkflow();
+		await deleteWorkflow();
+		await deleteTask(page, taskName);
+		fs.rmSync(downloadedFile);
+	});
+
+	async function deleteWorkflow() {
+		await page.getByRole('button', { name: 'Delete' }).first().click();
+		const modalTitle = page.locator('.modal.show .modal-title');
+		await modalTitle.waitFor();
+		await page.getByRole('button', { name: 'Confirm' }).click();
+		await waitModalClosed(page);
+	}
+});