Merge pull request #551 from fractal-analytics-platform/groups

Supported user groups

Author: zonia3000

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 # Unreleased
 
+* Implemented functionality for creating and displaying user groups (\#551);
 * Displayed an error when job submission failed before starting execution of tasks (\#548);
 
 # 1.4.3

__tests__/errors.test.js

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { getFieldValidationError } from '../src/lib/common/errors';
+
+describe('Error utility functions', () => {
+	it('get field validation error without specifying loc', () => {
+		const error = getFieldValidationError(
+			{
+				detail: [
+					{
+						loc: ['body', 'new_group_ids'],
+						msg: 'value is not a valid list',
+						type: 'type_error.list'
+					}
+				]
+			},
+			422
+		);
+		expect(error).eq('value is not a valid list');
+	});
+});

__tests__/v2/admin_group_edit_page.test.js

@@ -0,0 +1,64 @@
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+import { fireEvent, render } from '@testing-library/svelte';
+import { readable } from 'svelte/store';
+
+// Mocking fetch
+global.fetch = vi.fn();
+
+// Mocking the page store
+vi.mock('$app/stores', () => {
+	return {
+		page: readable({
+			data: {
+				users: [
+					{ id: 1, email: '[email protected]' },
+					{ id: 2, email: '[email protected]' }
+				],
+				group: {
+					name: 'test',
+					user_ids: [1]
+				}
+			}
+		})
+	};
+});
+
+// The component to be tested must be imported after the mock setup
+import page from '../../src/routes/v2/admin/groups/[groupId]/edit/+page.svelte';
+
+describe('Admin group edit page', () => {
+	beforeEach(() => {
+		fetch.mockClear();
+	});
+
+	it('User is added successfully', async () => {
+		const result = render(page);
+
+		fetch.mockResolvedValue({
+			ok: true,
+			status: 200,
+			json: async () => ({ name: 'test', user_ids: [1, 2] })
+		});
+		fireEvent.dragStart(result.getByRole('button', { name: '[email protected]' }));
+		fireEvent.drop(result.getByText(/drag the users here/i));
+
+		await result.findByText(/No more users available/);
+		expect(result.queryByRole('button', { name: '[email protected]' })).null;
+	});
+
+	it('Error happens when user is dragged and dropped', async () => {
+		const result = render(page);
+
+		fetch.mockResolvedValue({
+			ok: false,
+			status: 422,
+			json: async () => ({ detail: 'An error happened' })
+		});
+
+		fireEvent.dragStart(result.getByRole('button', { name: '[email protected]' }));
+		fireEvent.drop(result.getByText(/drag the users here/i));
+
+		await result.findByText(/An error happened/);
+		expect(result.queryByRole('button', { name: '[email protected]' })).not.null;
+	});
+});

docs/development/structure.md

@@ -97,7 +97,7 @@ Other than the AJAX calls, there are also some calls to fractal-server API done
 
 The login is still using the Svelte action approach, in which we have to extract the data from a formData object and then use it to build a JSON payload to be forwarded to fractal-server.
 
-Consider the code at `src/lib/server/api/v1/auth_api.js:5`:
+Consider the code at `src/lib/server/api/auth_api.js:5`:
 
 ```javascript
 /**

playwright.config.js

@@ -107,7 +107,7 @@ export default defineConfig({
 
 	webServer: [
 		{
-			command: './tests/start-test-server.sh 2.3.7',
+			command: './tests/start-test-server.sh 2.4.0',
 			port: 8000,
 			waitForPort: true,
 			stdout: 'pipe',

src/hooks.server.js

@@ -1,5 +1,5 @@
 import { env } from '$env/dynamic/private';
-import { getCurrentUser } from '$lib/server/api/v1/auth_api';
+import { getCurrentUser } from '$lib/server/api/auth_api';
 import { getLogger } from '$lib/server/logger.js';
 import { error, redirect } from '@sveltejs/kit';
 

src/lib/common/errors.js

@@ -35,21 +35,7 @@ export class AlertError extends Error {
 	 * @returns {string | null} the validation message, if found
 	 */
 	getSimpleValidationMessage(...loc) {
-		if (!this.simpleValidationMessage) {
-			return null;
-		}
-		if (typeof this.simpleValidationMessage === 'string') {
-			return this.simpleValidationMessage;
-		}
-		if (this.simpleValidationMessage.loc.length !== loc.length) {
-			return null;
-		}
-		for (let i = 0; i < loc.length; i++) {
-			if (this.simpleValidationMessage.loc[i] !== loc[i]) {
-				return null;
-			}
-		}
-		return this.simpleValidationMessage.msg;
+		return extractFieldValidationError(this.simpleValidationMessage, loc);
 	}
 }
 
@@ -74,7 +60,7 @@ function getSimpleValidationMessage(reason, statusCode) {
 	if (typeof err === 'string') {
 		return err;
 	}
-	if (!isValueError(err)) {
+	if (!hasValidationErrorPayload(err)) {
 		return null;
 	}
 	const loc = err.loc.length > 1 && err.loc[0] === 'body' ? err.loc.slice(1) : err.loc;
@@ -84,6 +70,47 @@ function getSimpleValidationMessage(reason, statusCode) {
 	};
 }
 
+/**
+ * Extract the validation error, assuming that the call can fail only for on one
+ * field. Returns null if there is no error or if there are multiple errors.
+ * @param {any} reason
+ * @param {number | null} statusCode
+ * @param {string[] | undefined} loc expected location of the validation message,
+ * undefined if any location is considered valid
+ * @returns {string | null}
+ */
+export function getFieldValidationError(reason, statusCode, loc = undefined) {
+	const simpleValidationMessage = getSimpleValidationMessage(reason, statusCode);
+	return extractFieldValidationError(simpleValidationMessage, loc);
+}
+
+/**
+ * @param {{ loc: string[], msg: string } | string|null} simpleValidationMessage
+ * @param {string[] | undefined} loc expected location of the validation message,
+ * undefined if any location is considered valid
+ * @returns {string | null} the validation message, if found
+ */
+function extractFieldValidationError(simpleValidationMessage, loc) {
+	if (!simpleValidationMessage) {
+		return null;
+	}
+	if (typeof simpleValidationMessage === 'string') {
+		return simpleValidationMessage;
+	}
+	if (loc === undefined) {
+		return simpleValidationMessage.msg;
+	}
+	if (simpleValidationMessage.loc.length !== loc.length) {
+		return null;
+	}
+	for (let i = 0; i < loc.length; i++) {
+		if (simpleValidationMessage.loc[i] !== loc[i]) {
+			return null;
+		}
+	}
+	return simpleValidationMessage.msg;
+}
+
 /**
  * @param {any} reason
  * @param {number | null} statusCode
@@ -99,7 +126,7 @@ export function getValidationMessagesMap(reason, statusCode) {
 	/** @type {{[key: string]: string}} */
 	const map = {};
 	for (const error of reason.detail) {
-		if (!isValueError(error)) {
+		if (!hasValidationErrorPayload(error)) {
 			return null;
 		}
 		if (error.loc.length !== 2 || error.loc[0] !== 'body') {
@@ -127,8 +154,8 @@ function isValidationError(reason, statusCode) {
  * @param {any} err
  * @returns {boolean}
  */
-function isValueError(err) {
-	return Array.isArray(err.loc) && !!err.msg && err.type.startsWith('value_error');
+function hasValidationErrorPayload(err) {
+	return Array.isArray(err.loc) && typeof err.msg === 'string' && typeof err.type === 'string';
 }
 
 /**

src/lib/common/user_utilities.js

@@ -0,0 +1,17 @@
+/**
+ * Sort users by email.
+ * @param {import('$lib/types').User} u1
+ * @param {import('$lib/types').User} u2
+ */
+export const sortUserByEmailComparator = function (u1, u2) {
+	return u1.email.localeCompare(u2.email, undefined, { sensitivity: 'base' });
+};
+
+/**
+ * Sort groups by name.
+ * @param {import('$lib/types').Group} g1
+ * @param {import('$lib/types').Group} g2
+ */
+export const sortGroupByNameComparator = function (g1, g2) {
+	return g1.name.localeCompare(g2.name, undefined, { sensitivity: 'base' });
+};

src/lib/components/common/DragAndDropUploader.svelte

@@ -90,11 +90,11 @@
 </script>
 
 <div
-	class="dropZone bg-light"
+	class="droparea bg-light"
 	on:drop={handleDrop}
 	on:dragover={handleDragOver}
 	on:dragleave={handleDragLeave}
-	class:dragOver
+	class:active={dragOver}
 >
 	<div class="m-1">
 		<div class="input-group has-validation">
@@ -123,16 +123,3 @@
 		<i class="bi bi-file-earmark-arrow-up" /> or drag file here
 	</p>
 </div>
-
-<style>
-	.dropZone {
-		outline: 2px dashed #00b3bb;
-		outline-offset: -8px;
-		padding: 10px;
-		border-radius: 3px;
-	}
-
-	.dragOver {
-		background-color: #c8e5ff !important;
-	}
-</style>