Chore: fix a couple e2e warnings / flakiness

src-ui/e2e/backend.py

@@ -43,6 +43,7 @@ def configure_environment(instance_root: Path) -> None:
 
 
 def seed_database() -> None:
+    from django.contrib.auth.models import Permission
     from django.contrib.auth.models import User
     from django.core.management import call_command
     from django.utils import timezone
@@ -63,11 +64,18 @@ def seed_database() -> None:
         username="playwright",
         password="playwright",  # NOSONAR
     )
-    User.objects.create_user(
+    viewer = User.objects.create_user(
         username="viewer",
         password="viewer",  # NOSONAR
     )
 
+    viewer.user_permissions.add(
+        Permission.objects.get(
+            content_type__app_label="documents",
+            codename="view_uisettings",
+        ),
+    )
+
     inbox = Tag.objects.create(name="Inbox", is_inbox_tag=True, owner=admin)
     quick_filter = Tag.objects.create(name="Another Sample Tag", owner=admin)
     Tag.objects.create(name="TagWithPartial", owner=admin)

src-ui/e2e/document-detail/document-detail.spec.ts

@@ -80,12 +80,21 @@ test('should show a list of notes', async ({ page }) => {
 
 test('should support quick filters', async ({ page }) => {
   await page.goto('/documents/1/details')
+  // filter button is available before tags have loaded
+  const selectedTags = page.locator('pngx-input-tags .ng-value pngx-tag')
+  await expect(selectedTags).toHaveCount(2)
+  await expect(
+    selectedTags.getByText('Another Sample Tag', { exact: true })
+  ).toBeVisible()
+  await expect(selectedTags.getByText('Inbox', { exact: true })).toBeVisible()
   await page
     .getByRole('button', { name: 'Filter documents with these Tags' })
     .click()
-  await expect(page).toHaveURL(
-    /tags__id__all=2,1&sort=created&reverse=1&page=1/
-  )
+  await expect(page).toHaveURL((url) => {
+    const tags = url.searchParams.get('tags__id__all')?.split(',').sort()
+    return url.pathname === '/documents' && tags?.join(',') === '1,2'
+  })
+  await expect(page.locator('pngx-document-list')).toHaveText(/one document/i)
 })
 
 test('should finish reloading the preview after a remote document update', async ({

src-ui/e2e/permissions/global-permissions.spec.ts

@@ -6,8 +6,15 @@ test.use({
   },
 })
 
-test('should not allow user to edit settings', async ({ page }) => {
+test.beforeEach(async ({ page }) => {
+  const settingsLoaded = page.waitForResponse((response) =>
+    response.url().endsWith('/api/ui_settings/')
+  )
   await page.goto('/dashboard')
+  expect((await settingsLoaded).status()).toBe(200)
+})
+
+test('should not allow user to edit settings', async ({ page }) => {
   await expect(page.getByRole('link', { name: 'Settings' })).not.toBeAttached()
   await page.goto('/settings')
   await expect(page.locator('body')).toHaveText(
@@ -16,7 +23,6 @@ test('should not allow user to edit settings', async ({ page }) => {
 })
 
 test('should not allow user to view documents', async ({ page }) => {
-  await page.goto('/dashboard')
   await expect(
     page.locator('nav').getByRole('link', { name: 'Documents' })
   ).not.toBeAttached()
@@ -31,7 +37,6 @@ test('should not allow user to view documents', async ({ page }) => {
 })
 
 test('should not allow user to view correspondents', async ({ page }) => {
-  await page.goto('/dashboard')
   await expect(
     page.getByRole('link', { name: 'Attributes' })
   ).not.toBeAttached()
@@ -42,7 +47,6 @@ test('should not allow user to view correspondents', async ({ page }) => {
 })
 
 test('should not allow user to view tags', async ({ page }) => {
-  await page.goto('/dashboard')
   await expect(
     page.getByRole('link', { name: 'Attributes' })
   ).not.toBeAttached()
@@ -53,7 +57,6 @@ test('should not allow user to view tags', async ({ page }) => {
 })
 
 test('should not allow user to view document types', async ({ page }) => {
-  await page.goto('/dashboard')
   await expect(
     page.getByRole('link', { name: 'Attributes' })
   ).not.toBeAttached()
@@ -64,7 +67,6 @@ test('should not allow user to view document types', async ({ page }) => {
 })
 
 test('should not allow user to view storage paths', async ({ page }) => {
-  await page.goto('/dashboard')
   await expect(
     page.getByRole('link', { name: 'Attributes' })
   ).not.toBeAttached()
@@ -75,7 +77,6 @@ test('should not allow user to view storage paths', async ({ page }) => {
 })
 
 test('should not allow user to view logs', async ({ page }) => {
-  await page.goto('/dashboard')
   await expect(page.getByRole('link', { name: 'Logs' })).not.toBeAttached()
   await page.goto('/logs')
   await expect(page.locator('body')).toHaveText(
@@ -84,7 +85,6 @@ test('should not allow user to view logs', async ({ page }) => {
 })
 
 test('should not allow user to view tasks', async ({ page }) => {
-  await page.goto('/dashboard')
   await expect(page.getByRole('link', { name: 'Tasks' })).not.toBeAttached()
   await page.goto('/tasks')
   await expect(page.locator('body')).toHaveText(

src-ui/messages.xlf

@@ -10334,18 +10334,18 @@
           <context context-type="linenumber">294,295</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="2179847500064178686" datatype="html">
-        <source>Edit document</source>
+      <trans-unit id="3420321797707163677" datatype="html">
+        <source>Preview document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
           <context context-type="linenumber">328</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="3420321797707163677" datatype="html">
-        <source>Preview document</source>
+      <trans-unit id="2179847500064178686" datatype="html">
+        <source>Edit document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">329</context>
+          <context context-type="linenumber">331</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4512084577073831437" datatype="html">

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.scss

@@ -1,10 +1,3 @@
 .custom-fields-dropdown {
     min-width: 300px;
-
-    // correct position on mobile
-    @media (max-width: 575.98px) {
-        &.show {
-            margin-left: -245px !important;
-        }
-    }
 }

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -308,7 +308,7 @@
                   </tr>
                   <tr class="align-middle">
                     <td i18n>Original SHA256 checksum</td>
-                    <td><span class="badge bg-light font-monospace text-wrap text-break text-start">{{metadata()?.original_checksum}}</span></td>
+                    <td><span class="badge bg-light text-dark font-monospace text-wrap text-break text-start">{{metadata()?.original_checksum}}</span></td>
                   </tr>
                   <tr>
                     <td i18n>Original file size</td>

src-ui/src/app/components/document-list/document-list.component.html

@@ -208,7 +208,7 @@
                   i18n>Correspondent</th>
               }
               @if (activeDisplayFields.includes(DisplayField.TITLE)) {
-                <th class="cursor-pointer"
+                <th class="cursor-pointer ps-5"
                   pngxSortable="title"
                   title="Sort by title" i18n-title
                   [currentSortField]="list.sortField"
@@ -322,13 +322,13 @@
                   </td>
                 }
                 @if (activeDisplayFields.includes(DisplayField.TITLE) || activeDisplayFields.includes(DisplayField.TAGS)) {
-                  <td width="30%">
+                  <td width="30%" class="position-relative" [class.ps-5]="activeDisplayFields.includes(DisplayField.TITLE)">
                     @if (activeDisplayFields.includes(DisplayField.TITLE)) {
                       <div class="d-inline-block" (mouseleave)="popupPreview.close()">
-                        <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
-                        <pngx-preview-popup [document]="d" linkClasses="btn btn-sm btn-link text-secondary" linkTitle="Preview document" (click)="$event.stopPropagation()" i18n-linkTitle #popupPreview>
+                        <pngx-preview-popup class="position-absolute start-0" [document]="d" linkClasses="btn btn-sm btn-link text-secondary" linkTitle="Preview document" (click)="$event.stopPropagation()" i18n-linkTitle #popupPreview>
                           <i-bs name="eye"></i-bs>
                         </pngx-preview-popup>
+                        <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
                       </div>
                     }
                     @if (activeDisplayFields.includes(DisplayField.TAGS)) {

src-ui/src/app/components/document-list/document-list.component.scss

@@ -87,6 +87,10 @@ $paperless-card-breakpoints: (
   }
 }
 
+.table .ps-5 {
+  padding-left: 2.2rem !important;
+}
+
 a {
   cursor: pointer;
 }