Added converter non parallel and converter compound to task creation form

Author: zonia3000

__tests__/v2/AddSingleTask.test.js

@@ -47,6 +47,7 @@ describe('AddSingleTask', () => {
 			expect.objectContaining({
 				body: JSON.stringify({
 					name: 'test-task',
+					type: 'non_parallel',
 					command_non_parallel: 'command',
 					input_types: {},
 					output_types: {}
@@ -81,6 +82,7 @@ describe('AddSingleTask', () => {
 			expect.objectContaining({
 				body: JSON.stringify({
 					name: 'test-task',
+					type: 'non_parallel',
 					command_non_parallel: 'command',
 					input_types: {},
 					output_types: {}

src/lib/components/v2/tasks/AddSingleTask.svelte

@@ -4,7 +4,13 @@
 	import StandardDismissableAlert from '../../common/StandardDismissableAlert.svelte';
 	import TaskGroupSelector from './TaskGroupSelector.svelte';
 	import TypesEditor from './TypesEditor.svelte';
-	import { detectSchemaVersion, SchemaValidator } from 'fractal-components';
+	import {
+		detectSchemaVersion,
+		isCompoundType,
+		isNonParallelType,
+		isParallelType,
+		SchemaValidator
+	} from 'fractal-components';
 
 	/**
 	 * @typedef {Object} Props
@@ -36,6 +42,7 @@
 
 	const formErrorHandler = new FormErrorHandler('errorAlert-createTask', [
 		'name',
+		'type',
 		'command_non_parallel',
 		'command_parallel',
 		'version',
@@ -94,6 +101,7 @@
 
 		const bodyData = {
 			name,
+			type: taskType,
 			command_non_parallel,
 			command_parallel,
 			version,
@@ -350,40 +358,22 @@
 	}}
 >
 	<div class="row mb-1">
-		<div class="col-xl-1 col-lg-2 col-3">Task type</div>
-		<div class="col-xl-11 col-lg-8 col-9">
-			<div class="form-check form-check-inline">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="taskType"
-					id="non_parallel"
-					value="non_parallel"
-					bind:group={taskType}
-				/>
-				<label class="form-check-label" for="non_parallel"> Non parallel </label>
-			</div>
-			<div class="form-check form-check-inline">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="taskType"
-					id="parallel"
-					value="parallel"
-					bind:group={taskType}
-				/>
-				<label class="form-check-label" for="parallel">Parallel</label>
-			</div>
-			<div class="form-check form-check-inline">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="taskType"
-					id="compound"
-					value="compound"
-					bind:group={taskType}
-				/>
-				<label class="form-check-label" for="compound">Compound</label>
+		<div class="col-md-6 mb-2">
+			<div class="input-group has-validation">
+				<label for="task_type" class="input-group-text">Task type</label>
+				<select
+					class="form-select"
+					bind:value={taskType}
+					class:is-invalid={$validationErrors['type']}
+					id="task_type"
+				>
+					<option value="non_parallel">Non parallel</option>
+					<option value="parallel">Parallel</option>
+					<option value="compound">Compound</option>
+					<option value="converter_non_parallel">Converter Non Parallel</option>
+					<option value="converter_compound">Converter Compound</option>
+				</select>
+				<span class="invalid-feedback">{$validationErrors['type']}</span>
 			</div>
 		</div>
 	</div>
@@ -404,7 +394,7 @@
 			</div>
 		</div>
 	</div>
-	{#if taskType === 'non_parallel' || taskType === 'compound'}
+	{#if isNonParallelType(taskType) || isCompoundType(taskType)}
 		<div class="row">
 			<div class="col-12 mb-2">
 				<div class="input-group has-validation">
@@ -423,7 +413,7 @@
 			</div>
 		</div>
 	{/if}
-	{#if taskType === 'parallel' || taskType === 'compound'}
+	{#if isParallelType(taskType) || isCompoundType(taskType)}
 		<div class="row">
 			<div class="col-12 mb-2">
 				<div class="input-group has-validation">
@@ -468,7 +458,7 @@
 			</div>
 		</div>
 	</div>
-	{#if taskType === 'non_parallel' || taskType === 'compound'}
+	{#if isNonParallelType(taskType) || isCompoundType(taskType)}
 		<div class="row">
 			<div class="col-lg-6 mb-2">
 				<div class="input-group has-validation">
@@ -526,7 +516,7 @@
 			</div>
 		</div>
 	{/if}
-	{#if taskType === 'parallel' || taskType === 'compound'}
+	{#if isParallelType(taskType) || isCompoundType(taskType)}
 		<div class="row">
 			<div class="col-lg-6 mb-2">
 				<div class="input-group has-validation">

tests/v2/add_single_task.spec.js

@@ -58,7 +58,7 @@ test('Add single tasks [v2]', async ({ page }) => {
 	const randomTaskName2 = Math.random().toString(36).substring(7);
 
 	await test.step('Create parallel task', async () => {
-		await page.getByText('Parallel', { exact: true }).click();
+		await page.getByRole('combobox', { name: 'Task type' }).selectOption('Parallel');
 
 		await page.getByRole('textbox', { name: 'Task name' }).fill(randomTaskName2);
 		await page.getByRole('textbox', { name: 'Command parallel' }).fill('/tmp/test');
@@ -89,7 +89,7 @@ test('Add single tasks [v2]', async ({ page }) => {
 	const randomTaskName3 = Math.random().toString(36).substring(7);
 
 	await test.step('Create compound task', async () => {
-		await page.getByText('Compound', { exact: true }).click();
+		await page.getByRole('combobox', { name: 'Task type' }).selectOption('Compound');
 
 		await page.getByRole('textbox', { name: 'Task name' }).fill(randomTaskName3);
 		await page.getByRole('textbox', { name: 'Command non parallel' }).fill('/tmp/test-np');
@@ -208,7 +208,7 @@ test('Add single tasks [v2]', async ({ page }) => {
 	});
 
 	await test.step('Create different version of parallel task', async () => {
-		await page.getByText('Parallel', { exact: true }).click();
+		await page.getByRole('combobox', { name: 'Task type' }).selectOption('Parallel');
 		await page.getByRole('textbox', { name: 'Task name' }).fill(randomTaskName2);
 		await page.getByRole('textbox', { name: 'Command parallel' }).fill('/tmp/test2');
 		await page.getByRole('textbox', { name: 'Version' }).fill('0.0.2');

tests/v2/task_utils.js

@@ -23,9 +23,9 @@ export async function createFakeTask(page, task) {
 		await page.getByText('Single task').click();
 
 		if (task.type === 'parallel') {
-			await page.getByText('Parallel', { exact: true }).click();
+			await page.getByRole('combobox', { name: 'Task type' }).selectOption('Parallel');
 		} else if (task.type === 'compound') {
-			await page.getByText('Compound', { exact: true }).click();
+			await page.getByRole('combobox', { name: 'Task type' }).selectOption('Compound');
 		}
 
 		await page.getByRole('textbox', { name: 'Task name' }).fill(taskName);