fix(web): shared link isOwner check (immich-app#9729)

* fix(web): shared link isOwner check

* add e2e tests + update playwright

* fix formatting

e2e/package.json

@@ -21,7 +21,7 @@
   "devDependencies": {
     "@immich/cli": "file:../cli",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@playwright/test": "^1.41.2",
+    "@playwright/test": "^1.44.1",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.11.17",
     "@types/pg": "^8.11.0",

e2e/src/web/specs/asset-viewer/navbar.e2e-spec.ts

@@ -0,0 +1,52 @@
+import { AssetFileUploadResponseDto, LoginResponseDto, SharedLinkType } from '@immich/sdk';
+import { expect, test } from '@playwright/test';
+import { utils } from 'src/utils';
+
+test.describe('Asset Viewer Navbar', () => {
+  let admin: LoginResponseDto;
+  let asset: AssetFileUploadResponseDto;
+
+  test.beforeAll(async () => {
+    utils.initSdk();
+    await utils.resetDatabase();
+    admin = await utils.adminSetup();
+    asset = await utils.createAsset(admin.accessToken);
+  });
+
+  test.describe('shared link without metadata', () => {
+    test('visible guest actions', async ({ page }) => {
+      const sharedLink = await utils.createSharedLink(admin.accessToken, {
+        type: SharedLinkType.Individual,
+        assetIds: [asset.id],
+        showMetadata: false,
+      });
+      await page.goto(`/share/${sharedLink.key}/photos/${asset.id}`);
+      await page.waitForSelector('#immich-asset-viewer');
+
+      const expected = ['Zoom Image', 'Copy Image', 'Download'];
+      const buttons = await page.getByTestId('asset-viewer-navbar-actions').getByRole('button').all();
+
+      for (const [i, button] of buttons.entries()) {
+        await expect(button).toHaveAccessibleName(expected[i]);
+      }
+    });
+
+    test('visible owner actions', async ({ context, page }) => {
+      const sharedLink = await utils.createSharedLink(admin.accessToken, {
+        type: SharedLinkType.Individual,
+        assetIds: [asset.id],
+        showMetadata: false,
+      });
+      await utils.setAuthCookies(context, admin.accessToken);
+      await page.goto(`/share/${sharedLink.key}/photos/${asset.id}`);
+      await page.waitForSelector('#immich-asset-viewer');
+
+      const expected = ['Share', 'Zoom Image', 'Copy Image', 'Download'];
+      const buttons = await page.getByTestId('asset-viewer-navbar-actions').getByRole('button').all();
+
+      for (const [i, button] of buttons.entries()) {
+        await expect(button).toHaveAccessibleName(expected[i]);
+      }
+    });
+  });
+});

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -51,7 +51,7 @@
   export let showSlideshow = false;
   export let hasStackChildren = false;
 
-  $: isOwner = asset.ownerId === $user?.id;
+  $: isOwner = $user && asset.ownerId === $user?.id;
 
   type MenuItemEvent =
     | 'addToAlbum'
@@ -109,7 +109,10 @@
   <div class="text-white">
     <CircleIconButton color="opaque" icon={mdiArrowLeft} title="Go back" on:click={() => dispatch('back')} />
   </div>
-  <div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
+  <div
+    class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white"
+    data-testid="asset-viewer-navbar-actions"
+  >
     {#if showShareButton}
       <CircleIconButton
         color="opaque"