Merge pull request #658 from fractal-analytics-platform/tasks-filter

Added task filters, split tasks page in "tasks" and "tasks management"

Author: zonia3000

CHANGELOG.md

@@ -1,5 +1,12 @@
 *Note: Numbers like (\#123) point to closed Pull Requests on the fractal-web repository.*
 
+# Unreleased
+
+* Added tasks search filters (\#658);
+* Split standard-user tasks page into "tasks page" vs "tasks management page" (\#658);
+* Added alive endpoint (\#658);
+* Added user column and sorted users by email in `/v2/admin/task-groups/activities` (\#658);
+
 # 1.11.0
 
 * Alignment with fractal-server 2.9.0 (\#640, \#643, \#652, \#655):

__tests__/v2/AddWorkflowTaskModal.test.js

@@ -47,7 +47,9 @@ describe('AddWorkflowTaskModal', () => {
 							category: null,
 							modality: null,
 							authors: null,
-							tags: []
+							tags: [],
+							input_types: {},
+							docs_info: ''
 						}
 					],
 					user_id: 1,
@@ -66,7 +68,9 @@ describe('AddWorkflowTaskModal', () => {
 							category: null,
 							modality: null,
 							authors: null,
-							tags: []
+							tags: [],
+							input_types: {},
+							docs_info: ''
 						}
 					],
 					user_id: 1,
@@ -117,7 +121,9 @@ describe('AddWorkflowTaskModal', () => {
 							category: null,
 							modality: null,
 							authors: null,
-							tags: []
+							tags: [],
+							input_types: {},
+							docs_info: ''
 						}
 					],
 					user_id: 1,
@@ -136,7 +142,9 @@ describe('AddWorkflowTaskModal', () => {
 							category: null,
 							modality: null,
 							authors: null,
-							tags: []
+							tags: [],
+							input_types: {},
+							docs_info: ''
 						}
 					],
 					user_id: 1,
@@ -165,7 +173,7 @@ describe('AddWorkflowTaskModal', () => {
 		);
 		await waitFor(() => screen.getAllByText(/test_task/));
 
-		const dropdown = screen.getByRole('combobox');
+		const dropdown = await screen.findByRole('combobox');
 		expect(dropdown.options.length).eq(2);
 		expect(dropdown.options[0].text).eq('0.0.1');
 		expect(dropdown.options[1].text).eq('INVALID');

package-lock.json

@@ -24,6 +24,7 @@
 		"@testing-library/jest-dom": "^6.6.2",
 		"@testing-library/svelte": "^4.0.4",
 		"@testing-library/user-event": "^14.5.2",
+		"@types/color-hash": "^2.0.0",
 		"@types/dompurify": "^3.0.2",
 		"@types/node": "^22.7.4",
 		"dotenv": "^16.3.1",
@@ -46,6 +47,7 @@
 		"@vincjo/datatables": "^1.14.10",
 		"ajv": "^8.12.0",
 		"ajv-formats": "^3.0.1",
+		"color-hash": "^2.0.2",
 		"dompurify": "^3.0.5",
 		"jose": "^4.14.4",
 		"log4js": "^6.9.1",

package.json

@@ -1,4 +1,5 @@
 import { env } from '$env/dynamic/private';
+import { getServerInfo } from '$lib/server/api/alive';
 import { getCurrentUser } from '$lib/server/api/auth_api';
 import { getLogger } from '$lib/server/logger.js';
 import { error, redirect } from '@sveltejs/kit';
@@ -64,7 +65,8 @@ export async function handle({ event, resolve }) {
 
 	const isPublicPage =
 		event.url.pathname == '/' ||
-		event.url.pathname.startsWith('/auth');
+		event.url.pathname.startsWith('/auth') ||
+		event.url.pathname.startsWith('/alive');
 
 	if (isPublicPage) {
 		logger.debug('Public page - No auth required');
@@ -109,31 +111,6 @@ export async function handleFetch({ event, request, fetch }) {
 	return fetch(request);
 }
 
-/**
- * @param {typeof fetch} fetch
- * @returns {Promise<{ alive: boolean, version: string | null }>}
- */
-async function getServerInfo(fetch) {
-	let serverInfo = { alive: false, version: null };
-
-	try {
-		const serverInfoResponse = await fetch(env.FRACTAL_SERVER_HOST + '/api/alive/');
-		if (serverInfoResponse.ok) {
-			serverInfo = await serverInfoResponse.json();
-			logger.debug('Server info loaded: Alive %s - %s', serverInfo.alive, serverInfo.version);
-		} else {
-			logger.error(
-				'Alive endpoint replied with unsuccessful status code %d',
-				serverInfoResponse.status
-			);
-		}
-	} catch (error) {
-		logger.fatal('Error loading server info', error);
-	}
-
-	return serverInfo;
-}
-
 /**
  * @param {typeof fetch} fetch
  * @returns {Promise<import('$lib/types').User|null>}

src/hooks.server.js

@@ -0,0 +1,8 @@
+/**
+ * Sort task-group activities by timestamp_started.
+ * @param {import('$lib/types-v2').TaskGroupActivityV2} a1
+ * @param {import('$lib/types-v2').TaskGroupActivityV2} a2
+ */
+export const sortActivitiesByTimestampStarted = function (a1, a2) {
+	return a1.timestamp_started < a2.timestamp_started ? 1 : -1;
+};

src/lib/common/task_utilities.js

@@ -0,0 +1,34 @@
+<script>
+	import { onMount } from 'svelte';
+
+	/** @type {string | null} */
+	export let value;
+
+	let ColorHash;
+
+	/**
+	 * @param {string} stringInput
+	 */
+	function getBackgroundColor(stringInput) {
+		const colorHash = new ColorHash({ lightness: 0.8, saturation: 0.95 });
+		return colorHash.hex(stringInput);
+	}
+
+	let mounted = false;
+
+	onMount(async () => {
+		// Force rendering of coloured badge after SSR, to avoid issue with
+		// color-hash dependency, that is available only client side.
+		ColorHash = (await import('color-hash')).default;
+		mounted = true;
+	});
+</script>
+
+{#if value && mounted}
+	<span
+		style="background-color: {getBackgroundColor(value)}"
+		class="badge rounded-pill coloured-badge text-dark"
+	>
+		{value}
+	</span>
+{/if}

src/lib/components/common/ColouredBadge.svelte

@@ -73,7 +73,7 @@
 			},
 			events: {
 				afterChange: (selection) => {
-					if (selection[0].value === 'Select...') {
+					if (selection.length === 0 || selection[0].value === 'Select...') {
 						selectedUserId = null;
 					} else {
 						selectedUserId = Number(selection[0].value);