Fix: use proper signal for modal buttonsEnabled (#13672)

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html

@@ -12,10 +12,10 @@
   }
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+  <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">
         <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
       </button>
-  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled()">
     <span>
       {{btnCaption}}
       <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
@@ -25,7 +25,7 @@
     }
   </button>
   @if (alternativeBtnCaption) {
-    <button type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled">
+    <button type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled()">
       {{alternativeBtnCaption}}
     </button>
   }

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

@@ -64,6 +64,22 @@ describe('ConfirmDialogComponent', () => {
     expect(confirmSubjectResult).toBeTruthy()
   })
 
+  it('should re-render the buttons when they are toggled from outside', async () => {
+    const confirmButton: HTMLButtonElement =
+      fixture.nativeElement.querySelectorAll('.modal-footer button')[1]
+    expect(confirmButton.disabled).toBeFalsy()
+
+    // Deliberately no detectChanges: a request callback toggling this is all
+    // that happens, and nothing else schedules a render for the modal
+    component.buttonsEnabled.set(false)
+    await fixture.whenStable()
+    expect(confirmButton.disabled).toBeTruthy()
+
+    component.buttonsEnabled.set(true)
+    await fixture.whenStable()
+    expect(confirmButton.disabled).toBeFalsy()
+  })
+
   it('should support cancel & close modal', () => {
     let confirmSubjectResult
     const closeModalSpy = jest.spyOn(modal, 'close')

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,12 @@
 import { DecimalPipe } from '@angular/common'
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
@@ -46,8 +53,7 @@ export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
   @Input()
   cancelBtnCaption = $localize`Cancel`
 
-  @Input()
-  buttonsEnabled = true
+  readonly buttonsEnabled = signal(true)
 
   confirmButtonEnabled = true
   alternativeButtonEnabled = true

src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.html

@@ -56,10 +56,10 @@
     }
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">
         <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
     </button>
-    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled()">
         {{btnCaption}}
     </button>
 </div>

src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.html

@@ -57,7 +57,7 @@
     class="btn"
     [class]="cancelBtnClass"
     (click)="cancel()"
-    [disabled]="!buttonsEnabled"
+    [disabled]="!buttonsEnabled()"
   >
     <span class="d-inline-block" style="padding-bottom: 1px;">
       {{cancelBtnCaption}}
@@ -68,7 +68,7 @@
     class="btn"
     [class]="btnClass"
     (click)="confirm()"
-    [disabled]="!confirmButtonEnabled || !buttonsEnabled"
+    [disabled]="!confirmButtonEnabled || !buttonsEnabled()"
   >
     {{btnCaption}}
   </button>

src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.html

@@ -34,10 +34,10 @@
           <p class="mb-0 small"><b>{{messageBold}}</b></p>
         }
     </div>
-    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">
         <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
     </button>
-    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled || degrees === 0">
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled() || degrees === 0">
       {{btnCaption}}
       @if (!confirmButtonEnabled) {
           <ngb-progressbar style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html

@@ -100,7 +100,7 @@
       </div>
     }
     <div class="form-group ms-md-auto">
-      <button type="button" class="btn me-2" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">{{ cancelBtnCaption }}</button>
+      <button type="button" class="btn me-2" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">{{ cancelBtnCaption }}</button>
       <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="pages.length === 0">{{ btnCaption }}</button>
     </div>
   </div>

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

@@ -119,7 +119,7 @@
         type="button"
         class="btn btn-primary btn-sm d-inline-flex align-items-center gap-2 text-nowrap"
         (click)="submit()"
-        [disabled]="loading() || !buttonsEnabled">
+        [disabled]="loading() || !buttonsEnabled()">
         @if (loading()) {
           <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
         }

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

@@ -69,7 +69,7 @@ describe('ShareLinkBundleDialogComponent', () => {
       file_version: FileVersion.Original,
       expiration_days: 3,
     })
-    expect(component.buttonsEnabled).toBe(false)
+    expect(component.buttonsEnabled()).toBe(false)
     expect(confirmSpy).toHaveBeenCalled()
 
     component.form.setValue({

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

@@ -78,7 +78,7 @@ export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
         : FileVersion.Original,
       expiration_days: this.form.value.expirationDays,
     }
-    this.buttonsEnabled = false
+    this.buttonsEnabled.set(false)
     super.confirm()
   }