Fix: more signal-backed conversions

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

@@ -5,7 +5,7 @@
   </button>
   <div class="dropdown-menu shadow" ngbDropdownMenu>
     <div class="px-3 py-2 mb-2">
-      @if (versionUploadState === UploadState.Idle) {
+      @if (versionUploadState() === UploadState.Idle) {
         <div class="input-group input-group-sm mb-2">
           <label class="input-group-text" for="newVersionLabel" i18n>Label</label>
           <input
@@ -32,7 +32,7 @@
           <i-bs name="file-earmark-plus"></i-bs><span class="ps-1" i18n>Add new version</span>
         </button>
       } @else {
-        @switch (versionUploadState) {
+        @switch (versionUploadState()) {
           @case (UploadState.Uploading) {
             <div class="small text-muted mt-1 d-flex align-items-center">
               <output class="spinner-border spinner-border-sm me-2" aria-hidden="true"></output>
@@ -50,8 +50,8 @@
               <span i18n>Version upload failed.</span>
               <button type="button" class="btn btn-link btn-sm p-0 ms-2" (click)="clearVersionUploadStatus()" i18n>Dismiss</button>
             </div>
-            @if (versionUploadError) {
-              <div class="small text-muted mt-1">{{ versionUploadError }}</div>
+            @if (versionUploadError()) {
+              <div class="small text-muted mt-1">{{ versionUploadError() }}</div>
             }
           }
         }
@@ -83,7 +83,7 @@
                     [(ngModel)]="versionLabelDraft"
                     i18n-placeholder
                     placeholder="Version label"
-                    [disabled]="savingVersionLabelId !== null"
+                    [disabled]="savingVersionLabelId() !== null"
                     (keydown.enter)="submitEditedVersionLabel(version, $event)"
                     (keydown.escape)="cancelEditingVersion($event)"
                     (click)="$event.stopPropagation()"
@@ -101,7 +101,7 @@
                   <button
                     type="button"
                     class="btn btn-outline-secondary"
-                    [disabled]="savingVersionLabelId !== null"
+                    [disabled]="savingVersionLabelId() !== null"
                     (click)="isEditingVersion(version.id) ? submitEditedVersionLabel(version, $event) : beginEditingVersion(version, $event)"
                   >
                     @if (isEditingVersion(version.id)) {

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

@@ -205,7 +205,7 @@ describe('DocumentVersionDropdownComponent', () => {
       { id: 3, is_root: true, checksum: 'aaaa' },
       { id: 10, is_root: false, checksum: 'bbbb', version_label: 'Updated' },
     ])
-    expect(component.savingVersionLabelId).toBeNull()
+    expect(component.savingVersionLabelId()).toBeNull()
   })
 
   it('saveVersionLabel should show error toast on failure', () => {
@@ -218,7 +218,7 @@ describe('DocumentVersionDropdownComponent', () => {
       'Error updating version label',
       error
     )
-    expect(component.savingVersionLabelId).toBeNull()
+    expect(component.savingVersionLabelId()).toBeNull()
   })
 
   it('onVersionFileSelected should upload and update versions after websocket success', () => {
@@ -252,11 +252,11 @@ describe('DocumentVersionDropdownComponent', () => {
     expect(versionsEmitSpy).toHaveBeenCalledWith(versions)
     expect(selectedEmitSpy).toHaveBeenCalledWith(20)
     expect(component.newVersionLabel).toEqual('')
-    expect(component.versionUploadState).toEqual(UploadState.Idle)
-    expect(component.versionUploadError).toBeNull()
+    expect(component.versionUploadState()).toEqual(UploadState.Idle)
+    expect(component.versionUploadError()).toBeNull()
   })
 
-  it('onVersionFileSelected should set failed state after websocket failure', () => {
+  it('onVersionFileSelected should render failed state after websocket failure', async () => {
     const file = new File(['test'], 'new-version.pdf', {
       type: 'application/pdf',
     })
@@ -266,9 +266,11 @@ describe('DocumentVersionDropdownComponent', () => {
 
     component.onVersionFileSelected({ target: input } as Event)
     failed$.next({ taskId: 'task-1', message: 'processing failed' })
+    await fixture.whenStable()
 
-    expect(component.versionUploadState).toEqual(UploadState.Failed)
-    expect(component.versionUploadError).toEqual('processing failed')
+    expect(component.versionUploadState()).toEqual(UploadState.Failed)
+    expect(component.versionUploadError()).toEqual('processing failed')
+    expect(fixture.nativeElement.textContent).toContain('processing failed')
     expect(documentService.getVersions).not.toHaveBeenCalled()
   })
 
@@ -282,8 +284,8 @@ describe('DocumentVersionDropdownComponent', () => {
 
     component.onVersionFileSelected({ target: input } as Event)
 
-    expect(component.versionUploadState).toEqual(UploadState.Failed)
-    expect(component.versionUploadError).toEqual('Missing task ID.')
+    expect(component.versionUploadState()).toEqual(UploadState.Failed)
+    expect(component.versionUploadError()).toEqual('Missing task ID.')
     expect(documentService.getVersions).not.toHaveBeenCalled()
   })
 
@@ -298,8 +300,8 @@ describe('DocumentVersionDropdownComponent', () => {
 
     component.onVersionFileSelected({ target: input } as Event)
 
-    expect(component.versionUploadState).toEqual(UploadState.Failed)
-    expect(component.versionUploadError).toEqual('upload failed')
+    expect(component.versionUploadState()).toEqual(UploadState.Failed)
+    expect(component.versionUploadError()).toEqual('upload failed')
     expect(toastService.showError).toHaveBeenCalledWith(
       'Error uploading new version',
       error
@@ -307,8 +309,8 @@ describe('DocumentVersionDropdownComponent', () => {
   })
 
   it('ngOnChanges should clear upload status on document switch', () => {
-    component.versionUploadState = UploadState.Failed
-    component.versionUploadError = 'something failed'
+    component.versionUploadState.set(UploadState.Failed)
+    component.versionUploadError.set('something failed')
     component.editingVersionId = 10
     component.versionLabelDraft = 'draft'
 
@@ -316,8 +318,8 @@ describe('DocumentVersionDropdownComponent', () => {
       documentId: new SimpleChange(3, 4, false),
     })
 
-    expect(component.versionUploadState).toEqual(UploadState.Idle)
-    expect(component.versionUploadError).toBeNull()
+    expect(component.versionUploadState()).toEqual(UploadState.Idle)
+    expect(component.versionUploadError()).toBeNull()
     expect(component.editingVersionId).toBeNull()
     expect(component.versionLabelDraft).toEqual('')
   })

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

@@ -7,6 +7,7 @@ import {
   OnChanges,
   OnDestroy,
   Output,
+  signal,
   SimpleChanges,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
@@ -59,9 +60,9 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
   @Output() versionsUpdated = new EventEmitter<DocumentVersionInfo[]>()
 
   newVersionLabel: string = ''
-  versionUploadState: UploadState = UploadState.Idle
-  versionUploadError: string | null = null
-  savingVersionLabelId: number | null = null
+  readonly versionUploadState = signal(UploadState.Idle)
+  readonly versionUploadError = signal<string | null>(null)
+  readonly savingVersionLabelId = signal<number | null>(null)
   editingVersionId: number | null = null
   versionLabelDraft: string = ''
 
@@ -101,7 +102,7 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
   beginEditingVersion(version: DocumentVersionInfo, event?: Event): void {
     event?.preventDefault()
     event?.stopPropagation()
-    if (!this.canEditLabels || this.savingVersionLabelId !== null) return
+    if (!this.canEditLabels || this.savingVersionLabelId() !== null) return
     this.editingVersionId = version.id
     this.versionLabelDraft = version.version_label ?? ''
   }
@@ -116,7 +117,7 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
   submitEditedVersionLabel(version: DocumentVersionInfo, event?: Event): void {
     event?.preventDefault()
     event?.stopPropagation()
-    if (this.savingVersionLabelId !== null) return
+    if (this.savingVersionLabelId() !== null) return
     const nextLabel = this.versionLabelDraft?.trim() || null
     const currentLabel = version.version_label?.trim() || null
     if (nextLabel === currentLabel) {
@@ -158,15 +159,15 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
   }
 
   saveVersionLabel(versionId: number, versionLabel: string | null): void {
-    if (this.savingVersionLabelId !== null) return
-    this.savingVersionLabelId = versionId
+    if (this.savingVersionLabelId() !== null) return
+    this.savingVersionLabelId.set(versionId)
     this.documentsService
       .updateVersionLabel(this.documentId, versionId, versionLabel)
       .pipe(
         first(),
         finalize(() => {
-          if (this.savingVersionLabelId === versionId) {
-            this.savingVersionLabelId = null
+          if (this.savingVersionLabelId() === versionId) {
+            this.savingVersionLabelId.set(null)
           }
         }),
         takeUntil(this.destroy$)
@@ -199,8 +200,8 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
     const file = input.files[0]
     input.value = ''
     const label = this.newVersionLabel?.trim()
-    this.versionUploadState = UploadState.Uploading
-    this.versionUploadError = null
+    this.versionUploadState.set(UploadState.Uploading)
+    this.versionUploadError.set(null)
     this.documentsService
       .uploadVersion(uploadDocumentId, file, label)
       .pipe(
@@ -210,7 +211,7 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
             $localize`Uploading new version. Processing will happen in the background.`
           )
           this.newVersionLabel = ''
-          this.versionUploadState = UploadState.Processing
+          this.versionUploadState.set(UploadState.Processing)
         }),
         map((taskId) =>
           typeof taskId === 'string'
@@ -219,8 +220,8 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
         ),
         switchMap((taskId) => {
           if (!taskId) {
-            this.versionUploadState = UploadState.Failed
-            this.versionUploadError = $localize`Missing task ID.`
+            this.versionUploadState.set(UploadState.Failed)
+            this.versionUploadError.set($localize`Missing task ID.`)
             return of(null)
           }
           return merge(
@@ -240,9 +241,10 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
         switchMap((result) => {
           if (result?.state !== 'success') {
             if (result?.state === 'failed') {
-              this.versionUploadState = UploadState.Failed
-              this.versionUploadError =
+              this.versionUploadState.set(UploadState.Failed)
+              this.versionUploadError.set(
                 result.message || $localize`Upload failed.`
+              )
             }
             return of(null)
           }
@@ -264,8 +266,10 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
         },
         error: (error) => {
           if (uploadDocumentId !== this.documentId) return
-          this.versionUploadState = UploadState.Failed
-          this.versionUploadError = error?.message || $localize`Upload failed.`
+          this.versionUploadState.set(UploadState.Failed)
+          this.versionUploadError.set(
+            error?.message || $localize`Upload failed.`
+          )
           this.toastService.showError(
             $localize`Error uploading new version`,
             error
@@ -275,7 +279,7 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
   }
 
   clearVersionUploadStatus(): void {
-    this.versionUploadState = UploadState.Idle
-    this.versionUploadError = null
+    this.versionUploadState.set(UploadState.Idle)
+    this.versionUploadError.set(null)
   }
 }