Added "Export to file" buttons on resources table

Author: zonia3000

src/routes/v2/admin/resources/+page.svelte

@@ -1,21 +1,22 @@
 <script>
+	import { downloadBlob } from '$lib/common/component_utilities';
 	import { displayStandardErrorAlert, getAlertErrorFromResponse } from '$lib/common/errors';
 	import ConfirmActionButton from '$lib/components/common/ConfirmActionButton.svelte';
 	import { onMount } from 'svelte';
 
 	/** @type {Array<import('fractal-components/types/api').Resource>} */
 	let resources = $state([]);
 	/** @type {import('$lib/components/common/StandardErrorAlert.svelte').default|undefined} */
-	let searchErrorAlert;
+	let resourcesErrorAlert;
 
 	async function loadResources() {
-		searchErrorAlert?.hide();
+		resourcesErrorAlert?.hide();
 		const url = new URL('/api/admin/v2/resource', window.location.origin);
 		const response = await fetch(url);
 		if (!response.ok) {
-			searchErrorAlert = displayStandardErrorAlert(
+			resourcesErrorAlert = displayStandardErrorAlert(
 				await getAlertErrorFromResponse(response),
-				'searchError'
+				'resourcesError'
 			);
 			return;
 		}
@@ -37,6 +38,23 @@
 		}
 	}
 
+	/**
+	 * @param {number} resourceId
+	 */
+	async function exportToFile(resourceId) {
+		const response = await fetch(`/api/admin/v2/resource/${resourceId}`);
+		if (response.ok) {
+			/** @type {import('fractal-components/types/api').Resource} */
+			const resource = await response.json();
+			downloadBlob(JSON.stringify(resource, null, 2), `${resource.name}.json`, 'application/json');
+		} else {
+			resourcesErrorAlert = displayStandardErrorAlert(
+				await getAlertErrorFromResponse(response),
+				'resourcesError'
+			);
+		}
+	}
+
 	onMount(async () => {
 		await loadResources();
 	});
@@ -78,6 +96,13 @@
 							<a href="/v2/admin/resources/{resource.id}/edit" class="btn btn-primary">
 								<i class="bi bi-pencil"></i> Edit
 							</a>
+							<button
+								type="button"
+								class="btn btn-outline-primary"
+								onclick={() => exportToFile(resource.id)}
+							>
+								<i class="bi bi-download"></i> Export to file
+							</button>
 							<ConfirmActionButton
 								modalId={'confirmDeleteResource' + resource.id}
 								style="danger"
@@ -93,6 +118,6 @@
 			</tbody>
 		</table>
 
-		<div id="searchError" class="mt-3"></div>
+		<div id="resourcesError" class="mt-3"></div>
 	</div>
 </div>

tests/v2/resource_crud.spec.js

@@ -2,6 +2,8 @@ import { expect, test } from '@playwright/test';
 import { setUploadFile, waitModal, waitModalClosed, waitPageLoading } from '../utils.js';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import fs from 'fs';
+import os from 'os';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -58,9 +60,23 @@ test('Create, update and delete a resource', async ({ page }) => {
 		await expect(page.getByText('Resource updated')).toBeVisible();
 	});
 
-	await test.step('Delete the resource', async () => {
+	await test.step('Export the resource to file', async () => {
 		await page.getByRole('link', { name: 'Resources' }).click();
 		await waitPageLoading(page);
+		const downloadPromise = page.waitForEvent('download');
+		await page
+			.getByRole('row', { name: `${randomResourceName}-renamed` })
+			.getByRole('button', { name: 'Export to file' })
+			.click();
+		const download = await downloadPromise;
+		const file = path.join(os.tmpdir(), download.suggestedFilename());
+		await download.saveAs(file);
+		const data = JSON.parse(fs.readFileSync(file).toString());
+		expect(data.name).toEqual(`${randomResourceName}-renamed`);
+		expect(data.type).toEqual('local');
+	});
+
+	await test.step('Delete the resource', async () => {
 		await page
 			.getByRole('row', { name: `${randomResourceName}-renamed` })
 			.getByRole('button', { name: 'Delete' })