fix(web): shared link isOwner check (#9729)

* fix(web): shared link isOwner check

* add e2e tests + update playwright

* fix formatting

e2e/package-lock.json

@@ -11,7 +11,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",
@@ -88,7 +88,7 @@
         "@oazapfts/runtime": "^1.0.2"
       },
       "devDependencies": {
-        "@types/node": "^20.12.12",
+        "@types/node": "^20.11.0",
         "typescript": "^5.3.3"
       }
     },
@@ -971,12 +971,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.44.0",
+      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
-      "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==",
+      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.44.0"
+        "playwright": "1.44.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4252,12 +4252,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.44.0",
+      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
-      "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==",
+      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.44.0"
+        "playwright-core": "1.44.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4270,9 +4270,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.44.0",
+      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
-      "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==",
+      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"

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"