S3 File Browser v2

.prettierignore

@@ -13,6 +13,8 @@ build/
 .output/
 e2e/test-results/
 e2e/.auth/
+.playwright/
+reports/
 src/lib/paraglide/
 project.inlang/
 

docker/Dockerfile

@@ -41,7 +41,7 @@ RUN NODEJS_VERSION=$(cat /tmp/.node-version) && \
         *) echo "Unsupported architecture: ${TARGETARCH}" >&2; exit 1 ;; \
     esac && \
     microdnf update -y && \
-    microdnf install -y curl tar gzip && \
+    microdnf install -y curl tar gzip zip && \
     microdnf clean all && \
     curl -fsSL "https://nodejs.org/dist/v${NODEJS_VERSION}/node-v${NODEJS_VERSION}-linux-${NODEJS_ARCH}.tar.gz" \
         | tar -xzf - --strip-components=1 -C /usr/local

e2e/storage/connections-management.spec.ts

@@ -99,6 +99,42 @@ test.describe('Storage — Connections management', () => {
     await expect(page.getByRole('heading', { name: 'Manage connections' })).toBeVisible();
   });
 
+  test('edit page keeps the current name when the name field is cleared', async ({ page }) => {
+    const credentials = requireGarageCredentials();
+    await connectToStorage(page, credentials);
+    await page.goto('/settings/connections');
+    await waitForHydration(page);
+
+    await openFirstConnectionEditPage(page);
+    const nameInput = page.getByLabel('Connection name');
+    const originalName = await nameInput.inputValue();
+    expect(originalName).not.toBe('');
+
+    await nameInput.fill('   ');
+    await page.getByRole('button', { name: 'Save changes' }).click();
+    await waitForHydration(page);
+    await expect(page).toHaveURL('/settings/connections');
+
+    await openFirstConnectionEditPage(page);
+    await expect(page.getByLabel('Connection name')).toHaveValue(originalName);
+  });
+
+  test('edit page requires the secret key when the access key changes', async ({ page }) => {
+    const credentials = requireGarageCredentials();
+    await connectToStorage(page, credentials);
+    await page.goto('/settings/connections');
+    await waitForHydration(page);
+
+    await openFirstConnectionEditPage(page);
+    await page.getByLabel('Access key').fill('GKnewaccesskey');
+    await page.getByRole('button', { name: 'Save changes' }).click();
+
+    await expect(
+      page.getByText('Enter the secret key that belongs to the new access key.')
+    ).toBeVisible();
+    await expect(page).toHaveURL(/\/edit$/);
+  });
+
   test('edit page shows error for invalid credentials', async ({ page }) => {
     const credentials = requireGarageCredentials();
     await connectToStorage(page, credentials);

e2e/storage/download.spec.ts

@@ -1,4 +1,6 @@
 import { test, expect } from '@playwright/test';
+import { readFile } from 'node:fs/promises';
+import AdmZip from 'adm-zip';
 import {
   createS3Client,
   hasGarageCredentials,
@@ -47,6 +49,8 @@ test.describe('Storage S3 — Download', () => {
       ]);
 
       expect(download.suggestedFilename()).toBe('download-me.txt');
+      expect(await download.failure()).toBeNull();
+      expect(await readFile((await download.path())!, 'utf8')).toBe('download content');
     } finally {
       await deleteKnownKeys(client, credentials.bucket, cleanupKeys);
     }
@@ -80,4 +84,121 @@ test.describe('Storage S3 — Download', () => {
       await deleteKnownKeys(client, credentials.bucket, cleanupKeys);
     }
   });
+
+  test('downloads up to three selected files individually', async ({ page }, testInfo) => {
+    const credentials = requireGarageCredentials();
+    const client = createS3Client(credentials);
+    const prefix = uniquePrefix(testInfo, 'dl-multiple');
+    const cleanupKeys = ['one.txt', 'two.txt', 'three.txt'].map((name) => `${prefix}${name}`);
+
+    try {
+      await Promise.all(
+        cleanupKeys.map((key) => putTextObject(client, credentials.bucket, key, key))
+      );
+      await connectAndOpenPrefix(page, credentials, prefix);
+      await page.getByRole('button', { name: 'Toggle selection mode' }).click();
+      for (const name of ['one.txt', 'two.txt', 'three.txt']) {
+        await page.getByLabel(`Select ${name}`).check();
+      }
+
+      const downloads: string[] = [];
+      page.on('download', (download) => downloads.push(download.suggestedFilename()));
+      await page.getByRole('button', { name: 'Download', exact: true }).click();
+      await expect.poll(() => downloads.sort()).toEqual(['one.txt', 'three.txt', 'two.txt']);
+      expect(downloads.sort()).toEqual(['one.txt', 'three.txt', 'two.txt']);
+    } finally {
+      await deleteKnownKeys(client, credentials.bucket, cleanupKeys);
+    }
+  });
+
+  test('archives a selection larger than three files', async ({ page }, testInfo) => {
+    const credentials = requireGarageCredentials();
+    const client = createS3Client(credentials);
+    const prefix = uniquePrefix(testInfo, 'dl-archive');
+    const cleanupKeys = ['one.txt', 'two.txt', 'three.txt', 'four.txt'].map(
+      (name) => `${prefix}${name}`
+    );
+
+    try {
+      await Promise.all(
+        cleanupKeys.map((key) => putTextObject(client, credentials.bucket, key, key))
+      );
+      await connectAndOpenPrefix(page, credentials, prefix);
+      await page.getByRole('button', { name: 'Toggle selection mode' }).click();
+      for (const name of ['one.txt', 'two.txt', 'three.txt', 'four.txt']) {
+        await page.getByLabel(`Select ${name}`).check();
+      }
+
+      const [download] = await Promise.all([
+        page.waitForEvent('download'),
+        page.getByRole('button', { name: 'Download', exact: true }).click()
+      ]);
+      expect(download.suggestedFilename()).toMatch(/\.zip$/);
+      expect(await download.failure()).toBeNull();
+      const zip = new AdmZip(await readFile((await download.path())!));
+      expect(
+        zip
+          .getEntries()
+          .map((entry) => entry.entryName)
+          .sort()
+      ).toEqual([...cleanupKeys].sort());
+      for (const key of cleanupKeys) expect(zip.readAsText(key)).toBe(key);
+      await expect
+        .poll(() =>
+          page.evaluate(() => {
+            const operations = JSON.parse(
+              localStorage.getItem('storage_operations_history') ?? '[]'
+            ) as Array<{ type: string; status: string; sourceNames: string[] }>;
+            return operations
+              .filter(
+                (operation) =>
+                  operation.type === 'download' && operation.sourceNames.includes('four.txt')
+              )
+              .at(-1)?.status;
+          })
+        )
+        .toBe('done');
+      await page.getByRole('button', { name: 'Operations', exact: true }).click();
+      const history = page.getByRole('region', { name: 'Download history' });
+      await history.getByRole('button').filter({ hasText: credentials.bucket }).first().click();
+      const [redownload] = await Promise.all([
+        page.waitForEvent('download'),
+        history.getByRole('button', { name: 'Download all', exact: true }).first().click()
+      ]);
+      expect(await redownload.failure()).toBeNull();
+      const recreatedZip = new AdmZip(await readFile((await redownload.path())!));
+      for (const key of cleanupKeys) expect(recreatedZip.readAsText(key)).toBe(key);
+    } finally {
+      await deleteKnownKeys(client, credentials.bucket, cleanupKeys);
+    }
+  });
+
+  test('downloads a folder via its context menu when not in selection mode', async ({
+    page
+  }, testInfo) => {
+    const credentials = requireGarageCredentials();
+    const client = createS3Client(credentials);
+    const prefix = uniquePrefix(testInfo, 'dl-folder');
+    const cleanupKeys = [`${prefix}folder1/one.txt`, `${prefix}folder1/two.txt`];
+
+    try {
+      await Promise.all(
+        cleanupKeys.map((key) => putTextObject(client, credentials.bucket, key, key))
+      );
+      await connectAndOpenPrefix(page, credentials, prefix);
+
+      await rowByName(page, 'folder1').click({ button: 'right' });
+
+      const downloadBtn = page.getByRole('menuitem', { name: 'Download' });
+      await expect(downloadBtn).not.toHaveAttribute('disabled');
+
+      const [download] = await Promise.all([page.waitForEvent('download'), downloadBtn.click()]);
+      expect(download.suggestedFilename()).toMatch(/\.zip$/);
+      expect(await download.failure()).toBeNull();
+      const zip = new AdmZip(await readFile((await download.path())!));
+      for (const key of cleanupKeys) expect(zip.readAsText(key)).toBe(key);
+    } finally {
+      await deleteKnownKeys(client, credentials.bucket, cleanupKeys);
+    }
+  });
 });

e2e/storage/file-operations.spec.ts

@@ -362,7 +362,8 @@ test.describe('Storage S3 — File Operations', () => {
     const prefix = uniquePrefix(testInfo, 'kb-cut-paste');
     const srcKey = `${prefix}cutsrc/`;
     const srcFile = `${srcKey}cut-kb.txt`;
-    const cleanupKeys = [srcFile];
+    const destFile = `${prefix}cut-kb.txt`;
+    const cleanupKeys = [srcFile, destFile];
 
     try {
       await putDirectoryMarker(client, credentials.bucket, srcKey);
@@ -388,7 +389,7 @@ test.describe('Storage S3 — File Operations', () => {
       await page.waitForTimeout(1000);
 
       // File should exist at destination
-      expect(await objectExists(client, credentials.bucket, `${prefix}cut-kb.txt`)).toBe(true);
+      expect(await objectExists(client, credentials.bucket, destFile)).toBe(true);
     } finally {
       await deleteKnownKeys(client, credentials.bucket, cleanupKeys);
     }
@@ -491,4 +492,44 @@ test.describe('Storage S3 — File Operations', () => {
       await deleteKnownKeys(client, credentials.bucket, cleanupKeys);
     }
   });
+
+  test('renames a folder subtree and removes its source marker', async ({ page }, testInfo) => {
+    const credentials = requireGarageCredentials();
+    const client = createS3Client(credentials);
+    const prefix = uniquePrefix(testInfo, 'folder-rename');
+    const oldRoot = `${prefix}docs/`;
+    const newRoot = `${prefix}renamed/`;
+    const cleanupKeys = [
+      oldRoot,
+      `${oldRoot}one.txt`,
+      `${oldRoot}nested/two.txt`,
+      newRoot,
+      `${newRoot}one.txt`,
+      `${newRoot}nested/two.txt`
+    ];
+    try {
+      await putDirectoryMarker(client, credentials.bucket, oldRoot);
+      await putTextObject(client, credentials.bucket, `${oldRoot}one.txt`, 'first');
+      await putTextObject(client, credentials.bucket, `${oldRoot}nested/two.txt`, 'second');
+      await connectAndOpenPrefix(page, credentials, prefix);
+      await rowByName(page, 'docs').click({ button: 'right' });
+      await page.getByRole('menuitem', { name: 'Rename' }).click();
+      await page.locator('.modal-box input').fill('renamed');
+      await page.getByRole('button', { name: 'Rename', exact: true }).click();
+      await expect
+        .poll(() => objectExists(client, credentials.bucket, `${newRoot}nested/two.txt`))
+        .toBe(true);
+      expect(await getObjectText(client, credentials.bucket, `${newRoot}one.txt`)).toBe('first');
+      expect(await getObjectText(client, credentials.bucket, `${newRoot}nested/two.txt`)).toBe(
+        'second'
+      );
+      expect(await objectExists(client, credentials.bucket, oldRoot)).toBe(false);
+      expect(await objectExists(client, credentials.bucket, `${oldRoot}one.txt`)).toBe(false);
+      expect(await objectExists(client, credentials.bucket, `${oldRoot}nested/two.txt`)).toBe(
+        false
+      );
+    } finally {
+      await deleteKnownKeys(client, credentials.bucket, cleanupKeys);
+    }
+  });
 });

e2e/storage/preview.spec.ts

@@ -507,6 +507,9 @@ test.describe('Storage S3 — Preview', () => {
 
       await rowByName(page, 'escape.txt').dblclick();
       await expect(page.getByRole('heading', { name: 'escape.txt' })).toBeVisible();
+      const editor = page.getByRole('application', { name: 'Text editor' });
+      await expect(editor).toHaveAttribute('data-ready', 'true');
+      await expect(editor.locator(':focus')).toHaveCount(1);
 
       await page.keyboard.press('Escape');