From 7f5459f050b687fb0758e79e508352d5b70f24ec Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Mon, 19 Feb 2024 23:39:49 -0500
Subject: [PATCH] fix(web): download from shared album link (#7227)

* fix(web): download in album shared link

* chore: e2e test
---
 e2e/src/utils.ts                              |  4 +-
 e2e/src/web/specs/auth.e2e-spec.ts            |  4 +-
 e2e/src/web/specs/shared-link.e2e-spec.ts     | 58 +++++++++++++++++++
 .../components/album-page/album-viewer.svelte |  8 +--
 4 files changed, 66 insertions(+), 8 deletions(-)
 create mode 100644 e2e/src/web/specs/shared-link.e2e-spec.ts

diff --git a/e2e/src/utils.ts b/e2e/src/utils.ts
index ece0c46134..6c6d3b725d 100644
--- a/e2e/src/utils.ts
+++ b/e2e/src/utils.ts
@@ -177,11 +177,11 @@ export const cliUtils = {
 };
 
 export const webUtils = {
-  setAuthCookies: async (context: BrowserContext, response: LoginResponseDto) =>
+  setAuthCookies: async (context: BrowserContext, accessToken: string) =>
     await context.addCookies([
       {
         name: 'immich_access_token',
-        value: response.accessToken,
+        value: accessToken,
         domain: '127.0.0.1',
         path: '/',
         expires: 1742402728,
diff --git a/e2e/src/web/specs/auth.e2e-spec.ts b/e2e/src/web/specs/auth.e2e-spec.ts
index 63935d5b42..ac95a76dab 100644
--- a/e2e/src/web/specs/auth.e2e-spec.ts
+++ b/e2e/src/web/specs/auth.e2e-spec.ts
@@ -45,8 +45,8 @@ test.describe('Registration', () => {
   });
 
   test('user registration', async ({ context, page }) => {
-    const loginResponse = await apiUtils.adminSetup();
-    await webUtils.setAuthCookies(context, loginResponse);
+    const admin = await apiUtils.adminSetup();
+    await webUtils.setAuthCookies(context, admin.accessToken);
 
     // create user
     await page.goto('/admin/user-management');
diff --git a/e2e/src/web/specs/shared-link.e2e-spec.ts b/e2e/src/web/specs/shared-link.e2e-spec.ts
new file mode 100644
index 0000000000..faa7b34255
--- /dev/null
+++ b/e2e/src/web/specs/shared-link.e2e-spec.ts
@@ -0,0 +1,58 @@
+import {
+  AlbumResponseDto,
+  AssetResponseDto,
+  LoginResponseDto,
+  SharedLinkResponseDto,
+  SharedLinkType,
+  createAlbum,
+  createSharedLink,
+} from '@immich/sdk';
+import { test } from '@playwright/test';
+import { apiUtils, asBearerAuth, dbUtils } from 'src/utils';
+
+test.describe('Shared Links', () => {
+  let admin: LoginResponseDto;
+  let asset: AssetResponseDto;
+  let album: AlbumResponseDto;
+  let sharedLink: SharedLinkResponseDto;
+
+  test.beforeAll(async () => {
+    apiUtils.setup();
+    await dbUtils.reset();
+    admin = await apiUtils.adminSetup();
+    asset = await apiUtils.createAsset(admin.accessToken);
+    album = await createAlbum(
+      {
+        createAlbumDto: {
+          albumName: 'Test Album',
+          assetIds: [asset.id],
+        },
+      },
+      { headers: asBearerAuth(admin.accessToken) }
+      // { headers: asBearerAuth(admin.accessToken)},
+    );
+    sharedLink = await createSharedLink(
+      {
+        sharedLinkCreateDto: {
+          type: SharedLinkType.Album,
+          albumId: album.id,
+        },
+      },
+      { headers: asBearerAuth(admin.accessToken) }
+    );
+  });
+
+  test.afterAll(async () => {
+    await dbUtils.teardown();
+  });
+
+  test('download from a shared link', async ({ page }) => {
+    await page.goto(`/share/${sharedLink.key}`);
+    await page.getByRole('heading', { name: 'Test Album' }).waitFor();
+    await page.locator('.group > div').first().hover();
+    await page.waitForSelector('#asset-group-by-date svg');
+    await page.getByRole('checkbox').click();
+    await page.getByRole('button', { name: 'Download' }).click();
+    await page.getByText('DOWNLOADING').waitFor();
+  });
+});
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index e7bb18272f..e9983cc7ec 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -99,9 +99,9 @@
 </script>
 
 <header>
-  {#if $isMultiSelectState && user}
+  {#if $isMultiSelectState}
     <AssetSelectControlBar
-      ownerId={user.id}
+      ownerId={user?.id}
       assets={$selectedAssets}
       clearSelect={() => assetInteractionStore.clearMultiselect()}
     >
@@ -142,11 +142,11 @@
   <AssetGrid {album} {assetStore} {assetInteractionStore}>
     <section class="pt-24">
       <!-- ALBUM TITLE -->
-      <p
+      <h1
         class="bg-immich-bg text-6xl text-immich-primary outline-none transition-all dark:bg-immich-dark-bg dark:text-immich-dark-primary"
       >
         {album.albumName}
-      </p>
+      </h1>
 
       <!-- ALBUM SUMMARY -->
       {#if album.assetCount > 0}