Merge pull request #269 from fractal-analytics-platform/200-make-import-workflow-look-like-a-button

Update import-workflow feature

Author: tcompa

CHANGELOG.md

@@ -3,13 +3,14 @@
 
 # Unreleased
 
+* Update import-workflow feature (\#269).
 * Revamp home page and user-related layout (\#259).
 * Review logout action (\#259).
 * Implemented editing and deletion of tasks (\#207, \#268). 
-* Bump `word-wrap` from 1.2.3 to 1.2.5 (\#251).
 * Implemented A to B workflow execution (\#254).
-* Improved enable/disable button state (\#257).
 * Fixed workflowtask meta update (\#261).
+* Improved enable/disable button state (\#257).
+* Bump `word-wrap` from 1.2.3 to 1.2.5 (\#251).
 
 # 0.5.2
 

src/lib/components/projects/ProjectDatasetsList.svelte

@@ -81,7 +81,7 @@
 								</div>
 							</div>
 						</div>
-						<button class="btn btn-primary" type="submit" disabled={!enableCreateDataset}> Create dataset </button>
+						<button class="btn btn-primary" type="submit" disabled={!enableCreateDataset}>Create new dataset</button>
 					</form>
 				</div>
 			</div>

src/lib/components/projects/ProjectsList.svelte

@@ -63,7 +63,7 @@
 					</div>
 				</div>
 				<div class="col-auto">
-					<button type="submit" class="btn btn-primary" disabled={!enableCreateProject}>Create project</button>
+					<button type="submit" class="btn btn-primary" disabled={!enableCreateProject}>Create new project</button>
 				</div>
 			</form>
 			<div id="createProjectErrorAlert" class="mt-3" />

src/lib/components/projects/WorkflowImport.svelte

@@ -8,6 +8,7 @@
 	// Component properties
 	let importing = false;
 	let importSuccess = undefined;
+	let workflowName = undefined;
 
 	async function handleWorkflowImportForm({ form }) {
 		importing = true;
@@ -32,6 +33,7 @@
 						error
 					}
 				});
+				importing = false;
 			}
 		};
 	}
@@ -52,7 +54,12 @@
 		/>
 	</div>
 
-	<button class="btn btn-primary" disabled={importing}>
+	<div class="mb-2">
+		<label for="workflowName" class="form-label">Override workflow name (optional)</label>
+		<input id="workflowName" name="workflowName" type="text" bind:value={workflowName} class="form-control">
+	</div>
+
+	<button class="btn btn-primary mt-2" disabled={importing}>
 		{#if importing}
 			<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
 		{/if}

src/lib/components/projects/WorkflowsList.svelte

@@ -89,12 +89,13 @@
 		<caption class='text-bg-light border-top border-bottom pe-3 ps-3'>
 			<div class='d-flex align-items-center justify-content-between'>
 				<span class='fw-normal'>
-					<span
-						role='button'
-						class='text-decoration-none'
-						data-bs-toggle='modal'
-						data-bs-target='#importWorkflowModal'>Import workflow</span
-					>
+					<button
+						type="button"
+						class="btn btn-primary"
+						data-bs-toggle="modal"
+						data-bs-target="#importWorkflowModal">
+						Import workflow
+					</button>
 				</span>
 				<div>
 					<form
@@ -116,7 +117,7 @@
 							</div>
 						</div>
 						<button class="btn btn-primary" disabled={!enableCreateWorkflow} type="submit">
-							Create workflow
+							Create new workflow
 						</button>
 					</form>
 				</div>

src/routes/projects/[projectId]/+page.server.js

@@ -71,6 +71,7 @@ export const actions = {
 		const formData = await request.formData();
 
 		const workflowFile = formData.get('workflowFile');
+		const workflowName = formData.get('workflowName');
 		try {
 			const workflowMetadata = await workflowFile
 				.text()
@@ -79,6 +80,11 @@ export const actions = {
 					throw new Error('The workflow file is not a valid JSON file', error);
 				});
 
+			if (workflowName) {
+				console.log(`Overriding workflow name from ${workflowMetadata.name} to ${workflowName}`);
+				workflowMetadata.name = workflowName;
+			}
+
 			const workflow = await importWorkflow(fetch, params.projectId, workflowMetadata).catch(
 				(error) => {
 					console.error('Error importing workflow', error);

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

@@ -216,7 +216,7 @@
 							on:input={(event) => {enableCreateResource = fieldHasValue(event)}} />
 					</div>
 
-					<button class="btn btn-primary" disabled={!enableCreateResource}>Create resource</button>
+					<button class="btn btn-primary" disabled={!enableCreateResource}>Create new resource</button>
 				</form>
 
 				{#if createResourceSuccess}

tests/data/workflow_to_import.json

@@ -41,7 +41,7 @@
         ]
       },
       "task": {
-        "source": "pip_remote:fractal_tasks_core:0.10.0:fractal-tasks::create_ome-zarr_structure"
+        "source": "pip_remote:fractal_tasks_core:0.10.1:fractal-tasks::create_ome-zarr_structure"
       }
     },
     {
@@ -54,7 +54,7 @@
         "delete_input": false
       },
       "task": {
-        "source": "pip_remote:fractal_tasks_core:0.10.0:fractal-tasks::convert_yokogawa_to_ome-zarr"
+        "source": "pip_remote:fractal_tasks_core:0.10.1:fractal-tasks::convert_yokogawa_to_ome-zarr"
       }
     },
     {
@@ -67,7 +67,7 @@
         "suffix": "mip"
       },
       "task": {
-        "source": "pip_remote:fractal_tasks_core:0.10.0:fractal-tasks::copy_ome-zarr_structure"
+        "source": "pip_remote:fractal_tasks_core:0.10.1:fractal-tasks::copy_ome-zarr_structure"
       }
     },
     {
@@ -78,7 +78,7 @@
       },
       "args": null,
       "task": {
-        "source": "pip_remote:fractal_tasks_core:0.10.0:fractal-tasks::maximum_intensity_projection"
+        "source": "pip_remote:fractal_tasks_core:0.10.1:fractal-tasks::maximum_intensity_projection"
       }
     },
     {
@@ -107,7 +107,7 @@
         "output_label_name": "nuclei"
       },
       "task": {
-        "source": "pip_remote:fractal_tasks_core:0.10.0:fractal-tasks::cellpose_segmentation"
+        "source": "pip_remote:fractal_tasks_core:0.10.1:fractal-tasks::cellpose_segmentation"
       }
     },
     {
@@ -142,7 +142,7 @@
         }
       },
       "task": {
-        "source": "pip_remote:fractal_tasks_core:0.10.0:fractal-tasks::napari_workflows_wrapper"
+        "source": "pip_remote:fractal_tasks_core:0.10.1:fractal-tasks::napari_workflows_wrapper"
       }
     }
   ]