Supported editing of cache_dir from user profile page

Author: zonia3000

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 # Unreleased
 
+* Supported editing of cache_dir from user profile page (\#365).
 * Added experimental workflow page with job monitoring (\#363).
 
 # 0.7.0

src/routes/profile/+page.svelte

@@ -1,50 +1,140 @@
 <script>
 	import { page } from '$app/stores';
+	import { displayStandardErrorAlert, getValidationMessagesMap } from '$lib/common/errors';
 	import BooleanIcon from '$lib/components/common/BooleanIcon.svelte';
 
 	/** @type {import('$lib/types').User} */
 	$: user = $page.data.userInfo;
+
+	/** @type {import('$lib/components/common/StandardErrorAlert.svelte').default|undefined} */
+	let errorAlert = undefined;
+
+	let editCacheDir = false;
+	let cacheDir = '';
+	let cacheDirError = '';
+
+	function toggleEditCacheDir() {
+		if (editCacheDir) {
+			editCacheDir = false;
+			cacheDirError = '';
+		} else {
+			editCacheDir = true;
+			cacheDir = user.cache_dir || '';
+		}
+	}
+
+	async function saveCacheDir() {
+		if (errorAlert) {
+			errorAlert.hide();
+		}
+		const headers = new Headers();
+		headers.set('Content-Type', 'application/json');
+		const response = await fetch(`/api/auth/current-user`, {
+			method: 'PATCH',
+			credentials: 'include',
+			headers,
+			body: JSON.stringify({ cache_dir: cacheDir })
+		});
+		if (response.ok) {
+			user.cache_dir = cacheDir;
+			editCacheDir = false;
+		} else {
+			const result = await response.json();
+			const errorMap = getValidationMessagesMap(result, response.status);
+			if (errorMap && Object.keys(errorMap).length === 1 && 'cache_dir' in errorMap) {
+				cacheDirError = errorMap['cache_dir'];
+			} else {
+				errorAlert = displayStandardErrorAlert(result, 'profileUpdate-error');
+			}
+		}
+	}
 </script>
 
 <h3>My profile</h3>
 
 <div class="row mt-4">
-	<div class="col-md-8 col-lg-6">
+	<div class="col-lg-10 col-xl-8">
 		<table class="table">
+			<colgroup>
+				<col width="170" />
+				<col width="auto" />
+				<col width="auto" />
+			</colgroup>
 			<tbody>
 				<tr>
 					<th>User ID</th>
 					<td>{user.id}</td>
+					<td />
 				</tr>
 				<tr>
 					<th>E-mail</th>
 					<td>{user.email}</td>
+					<td />
 				</tr>
 				<tr>
 					<th>Username</th>
 					<td>{user.username || '-'}</td>
+					<td />
 				</tr>
 				<tr>
 					<th>Active</th>
 					<td><BooleanIcon value={user.is_active} /></td>
+					<td />
 				</tr>
 				<tr>
 					<th>Superuser</th>
 					<td><BooleanIcon value={user.is_superuser} /></td>
+					<td />
 				</tr>
 				<tr>
 					<th>Verified</th>
 					<td><BooleanIcon value={user.is_verified} /></td>
+					<td />
 				</tr>
 				<tr>
 					<th>Slurm user</th>
 					<td>{user.slurm_user || '-'}</td>
+					<td />
 				</tr>
 				<tr>
 					<th>Cache dir</th>
-					<td>{user.cache_dir || '-'}</td>
+					<td>
+						{#if editCacheDir}
+							<div class="input-group" class:has-validation={cacheDirError}>
+								<input
+									type="text"
+									class="form-control"
+									id="cache-dir"
+									bind:value={cacheDir}
+									class:is-invalid={cacheDirError}
+									on:keydown={(e) => {
+										if (e.key === 'Enter') {
+											saveCacheDir();
+										}
+									}}
+								/>
+								<button class="btn btn-outline-secondary" on:click={toggleEditCacheDir}>
+									<i class="bi bi-arrow-counterclockwise" /> Undo
+								</button>
+								<button class="btn btn-primary" on:click={saveCacheDir}> Save </button>
+								{#if cacheDirError}
+									<div class="invalid-feedback">{cacheDirError}</div>
+								{/if}
+							</div>
+						{:else}
+							{user.cache_dir || '-'}
+						{/if}
+					</td>
+					<td>
+						{#if !editCacheDir}
+							<button class="btn btn-primary pt-0 pb-0 float-end" on:click={toggleEditCacheDir}>
+								<i class="bi bi-pencil" /> Edit
+							</button>
+						{/if}
+					</td>
 				</tr>
 			</tbody>
 		</table>
+		<div id="profileUpdate-error" />
 	</div>
 </div>

tests/profile.spec.js

@@ -1,19 +1,45 @@
 import { expect, test } from './base_test.js';
 
 test('User profile', async ({ page }) => {
-	await page.goto('/');
-	await page.getByRole('button', { name: '[email protected]' }).click();
-	await page.getByRole('link', { name: 'My profile' }).click();
-	await page.waitForURL('/profile');
+	await test.step('Open user profile page', async () => {
+		await page.goto('/');
+		await page.getByRole('button', { name: '[email protected]' }).click();
+		await page.getByRole('link', { name: 'My profile' }).click();
+		await page.waitForURL('/profile');
 
-	const cells = await page.locator('table td').all();
-	expect(await cells[0].innerText()).toEqual('1');
-	expect(await cells[1].innerText()).toEqual('[email protected]');
-	expect(await cells[2].innerText()).toEqual('admin');
-	verifyChecked(cells, 3, true);
-	verifyChecked(cells, 4, true);
-	expect(await cells[6].innerText()).toEqual('-');
-	expect(await cells[7].innerText()).toEqual('-');
+		const cells = await page.locator('table td').all();
+		expect(await cells[0].innerText()).toEqual('1');
+		expect(await cells[2].innerText()).toEqual('[email protected]');
+		expect(await cells[4].innerText()).toEqual('admin');
+		verifyChecked(cells, 6, true);
+		verifyChecked(cells, 8, true);
+		expect(await cells[12].innerText()).toEqual('-');
+	});
+
+	await test.step('Save cache dir using button', async () => {
+		await page.getByRole('button', { name: 'Edit' }).click();
+		await page.getByRole('textbox').waitFor();
+		await page.getByRole('textbox').fill('');
+		await page.getByRole('button', { name: 'Save' }).click();
+		await page.getByText("String attribute 'cache_dir' cannot be empty").waitFor();
+		await page.getByRole('textbox').fill('/tmp/foo1');
+		await page.getByRole('button', { name: 'Save' }).click();
+		await page.getByRole('button', { name: 'Edit' }).waitFor();
+	});
+
+	await test.step('Save cache dir using enter', async () => {
+		await page.getByRole('button', { name: 'Edit' }).click();
+		await page.getByRole('textbox').waitFor();
+		await page.getByRole('textbox').fill('/tmp/foo2\n');
+		await page.getByRole('button', { name: 'Save' }).click();
+		await page.getByRole('button', { name: 'Edit' }).waitFor();
+	});
+
+	await test.step('Verify cache dir updated', async () => {
+		await page.reload();
+		const cells = await page.locator('table td').all();
+		expect(await cells[14].innerText()).toEqual('/tmp/foo2');
+	});
 });
 
 /**