Chore: some frontend sonar fixes

src-ui/src/app/components/admin/logs/logs.component.html

@@ -5,8 +5,9 @@
   i18n-info>
   <div class="input-group input-group-sm align-items-center">
     <div class="input-group input-group-sm me-3">
-      <span class="input-group-text text-muted" i18n>Show</span>
+      <label class="input-group-text text-muted" for="logLineLimit" i18n>Show</label>
       <input
+        id="logLineLimit"
         class="form-control"
         type="number"
         min="100"
@@ -17,7 +18,7 @@
       <span class="input-group-text text-muted" i18n>lines</span>
     </div>
     <div class="form-check form-switch mt-1">
-      <input class="form-check-input" type="checkbox" role="switch" [ngModel]="autoRefreshEnabled()" (ngModelChange)="autoRefreshEnabled.set($event)">
+      <input id="autoRefreshSwitch" class="form-check-input" type="checkbox" role="switch" [ngModel]="autoRefreshEnabled()" (ngModelChange)="autoRefreshEnabled.set($event)">
       <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
     </div>
   </div>

src-ui/src/app/components/admin/logs/logs.component.ts

@@ -100,9 +100,7 @@ export class LogsComponent
             parsed.some((log, idx) => {
               const current = this.logs()[idx]
               return (
-                !current ||
-                current.message !== log.message ||
-                current.level !== log.level
+                current?.message !== log.message || current?.level !== log.level
               )
             })
           if (hasChanges) {

src-ui/src/app/components/admin/settings/settings.component.html

@@ -150,10 +150,10 @@
 
             <div class="row mb-3">
               <div class="col-md-3 col-form-label pt-0">
-                <span i18n>Full search links to</span>
+                <label for="searchLink" i18n>Full search links to</label>
               </div>
               <div class="col mb-3">
-                <select class="form-select" formControlName="searchLink">
+                <select id="searchLink" class="form-select" formControlName="searchLink">
                   <option [ngValue]="GlobalSearchType.TITLE_CONTENT" i18n>Title and content search</option>
                   <option [ngValue]="GlobalSearchType.ADVANCED" i18n>Advanced search</option>
                 </select>
@@ -199,10 +199,10 @@
             <h5 i18n>Documents</h5>
             <div class="row mb-3">
               <div class="col-md-3 col-form-label pt-0">
-                <span i18n>Items per page</span>
+                <label for="documentListItemPerPage" i18n>Items per page</label>
               </div>
               <div class="col">
-                <select class="form-select" formControlName="documentListItemPerPage">
+                <select id="documentListItemPerPage" class="form-select" formControlName="documentListItemPerPage">
                   <option [ngValue]="10">10</option>
                   <option [ngValue]="25">25</option>
                   <option [ngValue]="50">50</option>
@@ -274,10 +274,10 @@
             <h5 class="mt-3" i18n>PDF Editor</h5>
             <div class="row">
               <div class="col-md-3 col-form-label pt-0">
-                <span i18n>Default editing mode</span>
+                <label for="pdfEditorDefaultEditMode" i18n>Default editing mode</label>
               </div>
               <div class="col">
-                <select class="form-select" formControlName="pdfEditorDefaultEditMode">
+                <select id="pdfEditorDefaultEditMode" class="form-select" formControlName="pdfEditorDefaultEditMode">
                   <option [ngValue]="PdfEditorEditMode.Create" i18n>Create new document(s)</option>
                   <option [ngValue]="PdfEditorEditMode.Update" i18n>Add document version</option>
                 </select>

src-ui/src/app/components/admin/settings/settings.component.spec.ts

@@ -399,17 +399,17 @@ describe('SettingsComponent', () => {
     completeSetup()
     const field = 'storage_path'
     expect(
-      component.settingsForm.get('documentDetailsHiddenFields').value.length
-    ).toEqual(0)
+      component.settingsForm.get('documentDetailsHiddenFields').value
+    ).toHaveLength(0)
     component.toggleDocumentDetailField(field, false)
     expect(
-      component.settingsForm.get('documentDetailsHiddenFields').value.length
-    ).toEqual(1)
+      component.settingsForm.get('documentDetailsHiddenFields').value
+    ).toHaveLength(1)
     expect(component.isDocumentDetailFieldShown(field)).toBeFalsy()
     component.toggleDocumentDetailField(field, true)
     expect(
-      component.settingsForm.get('documentDetailsHiddenFields').value.length
-    ).toEqual(0)
+      component.settingsForm.get('documentDetailsHiddenFields').value
+    ).toHaveLength(0)
     expect(component.isDocumentDetailFieldShown(field)).toBeTruthy()
   })
 })

src-ui/src/app/components/admin/tasks/tasks.component.html

@@ -15,7 +15,7 @@
       <i-bs name="check2-all" class="me-1"></i-bs><ng-container i18n>Dismiss all</ng-container>
     </button>
     <div class="form-check form-switch mb-0 ms-2">
-      <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
+      <input id="autoRefreshSwitch" class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
       <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
     </div>
   </div>
@@ -93,7 +93,8 @@
           <i-bs width="1em" height="1em" name="x"></i-bs>
         </button>
       }
-      <input #filterInput class="form-control form-control-sm" type="text"
+      <label class="visually-hidden" for="taskSearch" i18n>Search tasks</label>
+      <input #filterInput id="taskSearch" class="form-control form-control-sm" type="text"
         (keyup)="filterInputKeyup($event)"
         [(ngModel)]="filterText">
     </div>
@@ -211,7 +212,7 @@
                 <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
               </button>
             </td>
-            <td scope="row" class="actions-col">
+            <td class="actions-col">
               <div class="btn-group" role="group">
                 <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
                   <i-bs name="check" class="me-1"></i-bs><ng-container i18n>Dismiss</ng-container>

src-ui/src/app/components/chat/chat/chat.component.html

@@ -29,9 +29,11 @@
       </div>
 
       <form class="chat-input">
+        <label class="visually-hidden" for="chatInput" i18n>Message</label>
         <div class="input-group">
           <input
             #chatInput
+            id="chatInput"
             class="form-control form-control-sm" name="chatInput" type="text"
             [placeholder]="placeholder"
             [disabled]="loading"

src-ui/src/app/components/chat/chat/chat.component.spec.ts

@@ -76,7 +76,7 @@ describe('ChatComponent', () => {
     component.input = 'Hello'
     component.sendMessage()
 
-    expect(component.messages.length).toBe(2)
+    expect(component.messages).toHaveLength(2)
     expect(component.messages[0].content).toBe('Hello')
     expect(component.loading).toBe(true)
 
@@ -158,7 +158,7 @@ describe('ChatComponent', () => {
     const message = { content: '', role: 'assistant', isStreaming: true }
     component.enqueueTypewriter(null, message as any) // coverage for null
     component.enqueueTypewriter('Hello', message as any)
-    expect(component['typewriterBuffer'].length).toBe(4)
+    expect(component['typewriterBuffer']).toHaveLength(4)
   })
 
   it('should scroll to bottom after sending a message', () => {

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html

@@ -180,7 +180,7 @@
         <div class="col">
           <div class="trigger-filters mb-3">
             <div class="d-flex align-items-center">
-              <label class="form-label mb-0" i18n>Advanced Filters</label>
+              <span class="form-label mb-0" i18n>Advanced Filters</span>
               <button
                 type="button"
                 class="btn btn-sm btn-outline-primary ms-auto"

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts

@@ -401,7 +401,7 @@ describe('WorkflowEditDialogComponent', () => {
     component.addFilter(triggerGroup as FormGroup)
 
     const filters = component.getFiltersFormArray(triggerGroup as FormGroup)
-    expect(filters.length).toBe(3)
+    expect(filters).toHaveLength(3)
 
     filters.at(0).get('values').setValue([1])
     filters.at(1).get('values').setValue([2, 3])
@@ -672,7 +672,7 @@ describe('WorkflowEditDialogComponent', () => {
     } as any
 
     const filters = component['buildFiltersFormArray'](trigger)
-    expect(filters.length).toBe(0)
+    expect(filters).toHaveLength(0)
 
     component.filterDefinitions = originalDefinitions
   })
@@ -739,7 +739,7 @@ describe('WorkflowEditDialogComponent', () => {
     component.ngOnInit()
     const triggerGroup = component.triggerFields.at(0) as FormGroup
     const filters = component.getFiltersFormArray(triggerGroup)
-    expect(filters.length).toBe(13)
+    expect(filters).toHaveLength(13)
     const customFieldFilter = filters.at(12) as FormGroup
     expect(customFieldFilter.get('type').value).toBe(
       TriggerFilterType.CustomFieldQuery
@@ -969,12 +969,12 @@ describe('WorkflowEditDialogComponent', () => {
     component.addFilter(triggerGroup)
 
     component.removeFilter(triggerGroup, 0)
-    expect(component.getFiltersFormArray(triggerGroup).length).toBe(0)
+    expect(component.getFiltersFormArray(triggerGroup)).toHaveLength(0)
 
     component.addFilter(triggerGroup)
     const filterArrayAfterAdd = component.getFiltersFormArray(triggerGroup)
     filterArrayAfterAdd.at(0).get('type').setValue(TriggerFilterType.TagsAll)
-    expect(component.getFiltersFormArray(triggerGroup).length).toBe(1)
+    expect(component.getFiltersFormArray(triggerGroup)).toHaveLength(1)
   })
 
   it('should remove selected custom field from the form group', () => {

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts

@@ -933,7 +933,7 @@ export class WorkflowEditDialogComponent
 
   getFilterSelectItems(type: TriggerFilterType) {
     const definition = this.getFilterDefinition(type)
-    if (!definition || definition.inputType !== 'select') {
+    if (definition?.inputType !== 'select') {
       return []
     }
 

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -157,8 +157,8 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
   private removeChildren(tagIDs: number[], tag: Tag) {
     if (tag.children?.length) {
-      const childIDs = tag.children.map((child) => child.id)
-      tagIDs = tagIDs.filter((id) => !childIDs.includes(id))
+      const childIDs = new Set(tag.children.map((child) => child.id))
+      tagIDs = tagIDs.filter((id) => !childIDs.has(id))
       for (const child of tag.children) {
         tagIDs = this.removeChildren(tagIDs, child)
       }

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -14,7 +14,7 @@ import { environment } from 'src/environments/environment'
 })
 export class PageHeaderComponent {
   private titleService = inject(Title)
-  private clipboard = inject(Clipboard)
+  private readonly clipboard = inject(Clipboard)
 
   readonly id = input<number>(undefined)
   readonly subTitle = input('')

src-ui/src/app/components/common/share-link-bundle-dialog/share-link-bundle-dialog.component.html

@@ -65,8 +65,9 @@
         <dd class="col-sm-8"><code>{{ createdBundle.slug }}</code></dd>
         <dt class="col-sm-4" i18n>Link</dt>
         <dd class="col-sm-8">
+          <label class="visually-hidden" for="shareBundleLink" i18n>Share link</label>
           <div class="input-group input-group-sm">
-            <input class="form-control" type="text" [value]="getShareUrl(createdBundle)" readonly>
+            <input id="shareBundleLink" class="form-control" type="text" [value]="getShareUrl(createdBundle)" readonly>
             <button
               class="btn btn-outline-primary"
               type="button"

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -510,7 +510,7 @@ describe('DocumentDetailComponent', () => {
     const deleteButtons = fixture.debugElement.queryAll(
       By.css('pngx-confirm-button')
     )
-    expect(deleteButtons.length).toEqual(1)
+    expect(deleteButtons).toHaveLength(1)
   })
 
   it('should fall back to details tab when duplicates tab is active but no duplicates', () => {

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

@@ -1,6 +1,6 @@
 @if (loading()) {
     <div class="d-flex">
-        <output class="spinner-border spinner-border-sm fw-normal" role="status"></output>
+        <output class="spinner-border spinner-border-sm fw-normal"></output>
     </div>
 } @else {
     <ul class="list-group">

src-ui/src/app/components/document-detail/document-history/document-history.component.ts

@@ -26,11 +26,11 @@ import { UserService } from 'src/app/services/rest/user.service'
   ],
 })
 export class DocumentHistoryComponent implements OnInit {
-  private documentService = inject(DocumentService)
-  private correspondentService = inject(CorrespondentService)
-  private storagePathService = inject(StoragePathService)
-  private documentTypeService = inject(DocumentTypeService)
-  private userService = inject(UserService)
+  private readonly documentService = inject(DocumentService)
+  private readonly correspondentService = inject(CorrespondentService)
+  private readonly storagePathService = inject(StoragePathService)
+  private readonly documentTypeService = inject(DocumentTypeService)
+  private readonly userService = inject(UserService)
 
   public AuditLogAction = AuditLogAction
 
@@ -70,7 +70,7 @@ export class DocumentHistoryComponent implements OnInit {
       return cached
     }
 
-    const idInt = parseInt(id, 10)
+    const idInt = Number.parseInt(id, 10)
     const fallback$ = of(id)
 
     let result$: Observable<string>

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

@@ -7,8 +7,9 @@
     <div class="px-3 py-2 mb-2">
       @if (versionUploadState === UploadState.Idle) {
         <div class="input-group input-group-sm mb-2">
-          <span class="input-group-text" i18n>Label</span>
+          <label class="input-group-text" for="newVersionLabel" i18n>Label</label>
           <input
+            id="newVersionLabel"
             class="form-control"
             type="text"
             [(ngModel)]="newVersionLabel"
@@ -70,9 +71,13 @@
               }
             </div>
             <div class="d-flex flex-column">
+              @if (isEditingVersion(version.id)) {
+                <label class="visually-hidden" for="versionLabel{{ version.id }}" i18n>Version label</label>
+              }
               <div class="input-group input-group-sm mb-1">
                 @if (isEditingVersion(version.id)) {
                   <input
+                    id="versionLabel{{ version.id }}"
                     class="form-control"
                     type="text"
                     [(ngModel)]="versionLabelDraft"

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts

@@ -328,7 +328,7 @@ describe('FilterEditorComponent', () => {
   })
 
   it('should ingest legacy text filter rules for doc title + content', () => {
-    expect(component.textFilter).toEqual(null)
+    expect(component.textFilter).toBeNull()
     component.filterRules = [
       {
         rule_type: FILTER_TITLE_CONTENT,

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.html

@@ -1,18 +1,18 @@
 <div class="row mb-3">
   <div class="col mb-2 mb-xl-0">
     <div class="form-inline d-flex align-items-center">
-      <label class="text-muted me-2 mb-0" i18n>Filter by:</label>
-      <input class="form-control form-control-sm flex-fill w-auto" type="text" autofocus [(ngModel)]="nameFilter" (keyup)="onNameFilterKeyUp($event)" placeholder="Name" i18n-placeholder>
+      <label class="text-muted me-2 mb-0" for="managementNameFilter" i18n>Filter by:</label>
+      <input id="managementNameFilter" class="form-control form-control-sm flex-fill w-auto" type="text" autofocus [(ngModel)]="nameFilter" (keyup)="onNameFilterKeyUp($event)" placeholder="Name" i18n-placeholder>
     </div>
   </div>
 
   <div class="col-auto mb-2 mb-xl-0">
     <div class="form-inline d-flex align-items-center">
       <div class="input-group input-group-sm w-auto d-none d-md-flex">
-        <span class="input-group-text border-0" i18n>Show:</span>
+        <label class="input-group-text border-0" for="managementPageSize" i18n>Show:</label>
       </div>
       <div class="input-group input-group-sm w-auto me-3">
-        <select class="form-select form-select-sm small" [(ngModel)]="pageSize">
+        <select id="managementPageSize" class="form-select form-select-sm small" [(ngModel)]="pageSize">
           <option [ngValue]="25">25</option>
           <option [ngValue]="50">50</option>
           <option [ngValue]="100">100</option>

src-ui/src/app/components/manage/document-attributes/management-list/tag-list/tag-list.component.spec.ts

@@ -83,12 +83,12 @@ describe('TagListComponent', () => {
     ]
     component['_nameFilter'] = null // Simulate empty name filter
     const filtered = component.filterData(tags as any)
-    expect(filtered.length).toBe(2)
+    expect(filtered).toHaveLength(2)
     expect(filtered.find((t) => t.id === 2)).toBeUndefined()
 
     component['_nameFilter'] = 'Tag2' // Simulate non-empty name filter
     const filteredWithName = component.filterData(tags as any)
-    expect(filteredWithName.length).toBe(2)
+    expect(filteredWithName).toHaveLength(2)
     expect(filteredWithName.find((t) => t.id === 2)).toBeUndefined()
     expect(
       filteredWithName

src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.html

@@ -26,7 +26,7 @@
             <th scope="col" style="width: 40px;">
               <div class="form-check m-0 ms-2 me-n2">
                 <input type="checkbox" class="form-check-input" id="all-objects" [ngModel]="toggleAllEnabled()" (ngModelChange)="toggleAllEnabled.set($event)" [disabled]="processedMails().length === 0" (click)="toggleAll($event); $event.stopPropagation();">
-                <label class="form-check-label" for="all-objects"></label>
+                <label class="form-check-label" for="all-objects"><span class="visually-hidden" i18n>Select all processed email messages</span></label>
               </div>
             </th>
             <th scope="col" i18n>Subject</th>

src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.scss

@@ -5,6 +5,6 @@
 
     pre {
         white-space: pre-wrap;
-        word-break: break-word;
+        overflow-wrap: break-word;
     }
 }