Made group selection required when creating shared tasks

Author: zonia3000

__tests__/v2/TaskGroupSelector.test.js

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+
+import TaskGroupSelector from '../../src/lib/components/v2/tasks/TaskGroupSelector.svelte';
+
+describe('TaskGroupSelector', () => {
+	it('Default group is selected', async () => {
+		render(TaskGroupSelector, {
+			props: {
+				id: 'test',
+				groupIdsNames: [
+					[2, 'group2'],
+					[1, 'All']
+				],
+				defaultGroupName: 'All'
+			}
+		});
+		expect(screen.getByRole('combobox')).toHaveValue('1');
+	});
+
+	it('Validate required group', async () => {
+		const { component } = render(TaskGroupSelector, {
+			props: {
+				id: 'test',
+				groupIdsNames: [],
+				defaultGroupName: null
+			}
+		});
+
+		component.validate();
+
+		expect(await screen.findByText('Shared tasks must be associated with a group')).toBeVisible();
+	});
+
+	it('The only present group is selected', async () => {
+		render(TaskGroupSelector, {
+			props: {
+				id: 'test',
+				groupIdsNames: [[1, 'group1']],
+				defaultGroupName: null
+			}
+		});
+		expect(screen.getByRole('combobox')).toHaveValue('1');
+	});
+});

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

@@ -38,6 +38,8 @@
 	let taskType = $state('non_parallel');
 	let privateTask = $state(false);
 	let selectedGroup = $state(null);
+	/** @type {TaskGroupSelector|undefined} */
+	let taskGroupSelector = $state();
 
 	/** @type {TypesEditor|undefined} */
 	let typesEditor = $state();
@@ -94,7 +96,7 @@
 
 		const typesValid = typesEditor?.validate();
 
-		if (Object.keys($validationErrors).length > 0 || !typesValid) {
+		if (Object.keys($validationErrors).length > 0 || !typesValid || !taskGroupSelector?.validate()) {
 			return;
 		}
 
@@ -652,6 +654,7 @@
 		{defaultGroupName}
 		bind:privateTask
 		bind:selectedGroup
+		bind:this={taskGroupSelector}
 	/>
 
 	<div class="row">

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

@@ -24,6 +24,8 @@
 	let manifestData = null;
 	let privateTask = $state(false);
 	let selectedGroup = $state(null);
+	/** @type {TaskGroupSelector|undefined} */
+	let taskGroupSelector = $state();
 	let successMessage = $state('');
 
 	const formErrorHandler = new FormErrorHandler('errorAlert-customEnvTask', [
@@ -103,7 +105,7 @@
 			headers.append('Content-Type', 'application/json');
 
 			let url = `/api/v2/task/collect/custom?private=${privateTask}`;
-			if (!privateTask) {
+			if (!privateTask && selectedGroup) {
 				url += `&user_group_id=${selectedGroup}`;
 			}
 
@@ -146,9 +148,11 @@
 <StandardDismissableAlert message={successMessage} />
 
 <form
-	onsubmit={(e) => {
+	onsubmit={async (e) => {
 		e.preventDefault();
-		handleCollect();
+		if (taskGroupSelector?.validate()) {
+			await handleCollect();
+		}
 	}}
 	class="mb-5"
 >
@@ -284,6 +288,7 @@
 		{defaultGroupName}
 		bind:privateTask
 		bind:selectedGroup
+		bind:this={taskGroupSelector}
 	/>
 
 	<button type="submit" class="btn btn-primary" disabled={collecting}>

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

@@ -20,6 +20,8 @@
 	let version = $state('');
 	let privateTask = $state(false);
 	let selectedGroup = $state(null);
+	/** @type {TaskGroupSelector|undefined} */
+	let taskGroupSelector = $state();
 
 	let taskCollectionInProgress = $state(false);
 
@@ -52,7 +54,7 @@
 		}
 
 		let url = `/api/v2/task/collect/pixi?private=${privateTask}`;
-		if (!privateTask) {
+		if (!privateTask && selectedGroup) {
 			url += `&user_group_id=${selectedGroup}`;
 		}
 
@@ -81,7 +83,9 @@
 <form
 	onsubmit={(e) => {
 		e.preventDefault();
-		handlePixiCollection();
+		if (taskGroupSelector?.validate()) {
+			handlePixiCollection();
+		}
 	}}
 >
 	<div class="row">
@@ -134,6 +138,7 @@
 				{defaultGroupName}
 				bind:privateTask
 				bind:selectedGroup
+				bind:this={taskGroupSelector}
 			/>
 		</div>
 	</div>

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

@@ -22,6 +22,8 @@
 	let pinnedPackageVersions = $state([]);
 	let privateTask = $state(false);
 	let selectedGroup = $state(null);
+	/** @type {TaskGroupSelector|undefined} */
+	let taskGroupSelector = $state();
 
 	/** @type {FileList|null} */
 	let wheelFiles = $state(null);
@@ -44,6 +46,7 @@
 		python_version = '';
 		package_extras = '';
 		pinnedPackageVersions = [];
+		taskGroupSelector?.clear();
 	}
 
 	let taskCollectionInProgress = $state(false);
@@ -162,7 +165,9 @@
 	<form
 		onsubmit={(e) => {
 			e.preventDefault();
-			handleTaskCollection();
+			if (taskGroupSelector?.validate()) {
+				handleTaskCollection();
+			}
 		}}
 	>
 		<div class="row">
@@ -364,6 +369,7 @@
 			{defaultGroupName}
 			bind:privateTask
 			bind:selectedGroup
+			bind:this={taskGroupSelector}
 		/>
 
 		<div id="taskCollectionError" class="mt-3"></div>

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

@@ -23,6 +23,8 @@
 	let privateTask = $state(false);
 	/** @type {number|undefined} */
 	let selectedGroup = $state();
+	/** @type {TaskGroupSelector|undefined} */
+	let taskGroupSelector = $state();
 
 	let saving = $state(false);
 
@@ -42,6 +44,9 @@
 	}
 
 	async function handleUpdate() {
+		if (!taskGroupSelector?.validate()) {
+			return;
+		}
 		modal?.confirmAndHide(
 			async () => {
 				saving = true;
@@ -94,6 +99,7 @@
 							{defaultGroupName}
 							bind:privateTask
 							bind:selectedGroup
+							bind:this={taskGroupSelector}
 							wrapperClass="mb-1"
 						/>
 					{/key}

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

@@ -21,18 +21,35 @@
 		wrapperClass = 'mt-3 mb-3'
 	} = $props();
 
+	let validationError = $state('');
+
 	onMount(() => {
-		selectAllGroup();
+		selectDefaultGroup();
 	});
 
-	function selectAllGroup() {
+	function selectDefaultGroup() {
 		if (selectedGroup === null) {
 			const groupAll = groupIdsNames.find((i) => i[1] === defaultGroupName);
 			if (groupAll) {
 				selectedGroup = groupAll[0];
+			} else if (groupIdsNames.length === 1) {
+				selectedGroup = groupIdsNames[0][0];
 			}
 		}
 	}
+
+	export function validate() {
+		validationError = '';
+		if (!privateTask && selectedGroup === null) {
+			validationError = 'Shared tasks must be associated with a group';
+			return false;
+		}
+		return true;
+	}
+
+	export function clear() {
+		validationError = '';
+	}
 </script>
 
 <div class={wrapperClass}>
@@ -46,7 +63,10 @@
 					id="taskSelectorShared-{id}"
 					value={false}
 					bind:group={privateTask}
-					onchange={selectAllGroup}
+					onchange={() => {
+						validationError = '';
+						selectDefaultGroup();
+					}}
 				/>
 				<label class="form-check-label" for="taskSelectorShared-{id}">Shared task</label>
 			</div>
@@ -57,16 +77,22 @@
 					name="privateTaskSelector-{id}"
 					id="taskSelectorPrivate-{id}"
 					value={true}
+					onchange={() => (validationError = '')}
 					bind:group={privateTask}
 				/>
 				<label class="form-check-label" for="taskSelectorPrivate-{id}">Private task</label>
 			</div>
 		</div>
-		{#if !privateTask && groupIdsNames.length > 0}
+		{#if !privateTask}
 			<div class="col-12">
 				<div class="input-group">
 					<label class="input-group-text" for="task-group-selector">Group</label>
-					<select class="form-select" id="task-group-selector" bind:value={selectedGroup}>
+					<select
+						class="form-select"
+						id="task-group-selector"
+						bind:value={selectedGroup}
+						class:is-invalid={validationError}
+					>
 						<option value={null}>Select...</option>
 						{#if groupIdsNames}
 							{#each groupIdsNames as [groupId, groupName] (groupId)}
@@ -78,4 +104,9 @@
 			</div>
 		{/if}
 	</div>
+	{#if validationError}
+		<div class="row text-danger mt-2">
+			<div class="col">{validationError}</div>
+		</div>
+	{/if}
 </div>