From 34033029ba06ed70d87a5d8f7943364397dd91a2 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 17 Feb 2026 09:45:59 -0800
Subject: [PATCH] Actually use a modal

---
 .../document-detail.component.html            | 16 -----
 .../document-detail.component.spec.ts         | 14 ++--
 .../document-detail.component.ts              | 72 +++++++++++++------
 3 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index c2d9f0501..8604d65f5 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -112,22 +112,6 @@
   <div class="col-md-6 col-xl-5 mb-4">
 
     <form [formGroup]='documentForm' (ngSubmit)="save()">
-      @if (remoteUpdateDetected) {
-        <div class="alert alert-warning d-flex flex-column flex-md-row align-items-md-center gap-2" role="alert">
-          <div class="flex-fill">
-            <div class="fw-semibold" i18n>Document was updated.</div>
-            @if (remoteUpdateModified) {
-              <div class="small" i18n>Remote update detected at {{ remoteUpdateModified | date:'medium' }}.</div>
-            }
-            <div class="small" i18n>Saving your local edits now may overwrite remote changes.</div>
-          </div>
-          <div class="btn-group btn-group-sm">
-            <button type="button" class="btn btn-warning" (click)="reloadRemoteVersion()" i18n>Reload</button>
-            <button type="button" class="btn btn-outline-secondary" (click)="dismissRemoteUpdateWarning()" i18n>Dismiss</button>
-          </div>
-        </div>
-      }
-
       <div class="btn-toolbar mb-1 border-bottom">
         <div class="btn-group pb-3">
           <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Close" (click)="close()">
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
index 5090dbb35..5e56da43d 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -1386,7 +1386,9 @@ describe('DocumentDetailComponent', () => {
     expect(errorSpy).toHaveBeenCalled()
   })
 
-  it('should show remote update warning when open local draft is older than backend on init', () => {
+  it('should show incoming update modal when open local draft is older than backend on init', () => {
+    let openModal: NgbModalRef
+    modalService.activeInstances.subscribe((modals) => (openModal = modals[0]))
     const modalSpy = jest.spyOn(modalService, 'open')
     const openDoc = Object.assign({}, doc, {
       __changedFields: ['title'],
@@ -1408,11 +1410,11 @@ describe('DocumentDetailComponent', () => {
       })
     )
     fixture.detectChanges() // calls ngOnInit
-    expect(component.remoteUpdateDetected).toBeTruthy()
-    expect(component.remoteUpdateModified).toEqual(
-      remoteDoc.modified.toISOString()
-    )
-    expect(modalSpy).not.toHaveBeenCalledWith(ConfirmDialogComponent)
+    expect(modalSpy).toHaveBeenCalledWith(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    const confirmDialog = openModal.componentInstance as ConfirmDialogComponent
+    expect(confirmDialog.messageBold).toContain('Remote update detected at')
   })
 
   it('should change preview element by render type', () => {
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index d00b0823b..446c5859c 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe, DatePipe, NgTemplateOutlet } from '@angular/common'
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
 import { HttpClient, HttpResponse } from '@angular/common/http'
 import { Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import {
@@ -13,6 +13,7 @@ import {
   NgbDateStruct,
   NgbDropdownModule,
   NgbModal,
+  NgbModalRef,
   NgbNav,
   NgbNavChangeEvent,
   NgbNavModule,
@@ -165,7 +166,6 @@ enum ContentRenderType {
     MonetaryComponent,
     UrlComponent,
     SuggestionsDropdownComponent,
-    DatePipe,
     CustomDatePipe,
     FileSizePipe,
     IfPermissionsDirective,
@@ -270,6 +270,7 @@ export class DocumentDetailComponent
   isDirty$: Observable<boolean>
   unsubscribeNotifier: Subject<any> = new Subject()
   docChangeNotifier: Subject<any> = new Subject()
+  private incomingUpdateModal: NgbModalRef
 
   requiresPassword: boolean = false
   password: string
@@ -280,8 +281,6 @@ export class DocumentDetailComponent
 
   public downloading: boolean = false
   public useFormattedFilename: boolean = false
-  remoteUpdateDetected: boolean = false
-  remoteUpdateModified: string | null = null
 
   public readonly CustomFieldDataType = CustomFieldDataType
 
@@ -486,9 +485,50 @@ export class DocumentDetailComponent
     )
   }
 
+  private showIncomingUpdateModal(modified?: string | Date): void {
+    if (this.incomingUpdateModal) return
+
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    this.incomingUpdateModal = modal
+
+    let formattedModified = null
+    if (modified) {
+      const parsed = new Date(modified)
+      if (!isNaN(parsed.getTime())) {
+        formattedModified = parsed.toLocaleString()
+      }
+    }
+
+    modal.componentInstance.title = $localize`Document was updated.`
+    modal.componentInstance.messageBold = formattedModified
+      ? $localize`Document was updated at ${formattedModified}.`
+      : $localize`This document was updated elsewhere.`
+    modal.componentInstance.message = $localize`Reload to discard your local unsaved edits and load the latest remote version.`
+    modal.componentInstance.btnClass = 'btn-warning'
+    modal.componentInstance.btnCaption = $localize`Reload`
+    modal.componentInstance.cancelBtnCaption = $localize`Dismiss`
+
+    modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
+      modal.componentInstance.buttonsEnabled = false
+      modal.close()
+      this.reloadRemoteVersion()
+    })
+    modal.result.finally(() => {
+      this.incomingUpdateModal = null
+    })
+  }
+
+  private closeIncomingUpdateModal() {
+    if (!this.incomingUpdateModal) return
+    this.incomingUpdateModal.close()
+    this.incomingUpdateModal = null
+  }
+
   private loadDocument(documentId: number, forceRemote: boolean = false): void {
     let redirectedToRoot = false
-    this.dismissRemoteUpdateWarning()
+    this.closeIncomingUpdateModal()
     this.selectedVersionId = documentId
     this.previewUrl = this.documentsService.getPreviewUrl(
       this.selectedVersionId
@@ -567,10 +607,7 @@ export class DocumentDetailComponent
           } else if (openDocument) {
             if (new Date(doc.modified) > new Date(openDocument.modified)) {
               if (this.hasLocalEdits(openDocument)) {
-                this.remoteUpdateDetected = true
-                this.remoteUpdateModified = doc.modified
-                  ? new Date(doc.modified).toISOString()
-                  : null
+                this.showIncomingUpdateModal(doc.modified)
               } else {
                 // No local edits to preserve, so keep the tab in sync automatically.
                 Object.assign(openDocument, doc)
@@ -617,8 +654,7 @@ export class DocumentDetailComponent
     if (!this.document || this.networkActive) return
 
     if (this.openDocumentService.isDirty(this.document)) {
-      this.remoteUpdateDetected = true
-      this.remoteUpdateModified = data.modified ?? null
+      this.showIncomingUpdateModal(data.modified)
     } else {
       this.docChangeNotifier.next(this.documentId)
       this.loadDocument(this.documentId, true)
@@ -628,14 +664,10 @@ export class DocumentDetailComponent
     }
   }
 
-  dismissRemoteUpdateWarning() {
-    this.remoteUpdateDetected = false
-    this.remoteUpdateModified = null
-  }
-
-  reloadRemoteVersion() {
+  private reloadRemoteVersion() {
     if (!this.documentId) return
 
+    this.closeIncomingUpdateModal()
     this.docChangeNotifier.next(this.documentId)
     this.loadDocument(this.documentId, true)
     this.toastService.showInfo($localize`Document reloaded.`)
@@ -1089,7 +1121,7 @@ export class DocumentDetailComponent
       )
       .subscribe({
         next: (doc) => {
-          this.dismissRemoteUpdateWarning()
+          this.closeIncomingUpdateModal()
           Object.assign(this.document, doc)
           doc['permissions_form'] = {
             owner: doc.owner,
@@ -1136,7 +1168,7 @@ export class DocumentDetailComponent
       .pipe(first())
       .subscribe({
         next: (docValues) => {
-          this.dismissRemoteUpdateWarning()
+          this.closeIncomingUpdateModal()
           // in case data changed while saving eg removing inbox_tags
           this.documentForm.patchValue(docValues)
           const newValues = Object.assign({}, this.documentForm.value)
@@ -1216,7 +1248,7 @@ export class DocumentDetailComponent
       .pipe(first())
       .subscribe({
         next: ({ updateResult, nextDocId, closeResult }) => {
-          this.dismissRemoteUpdateWarning()
+          this.closeIncomingUpdateModal()
           this.error = null
           this.networkActive = false
           if (closeResult && updateResult && nextDocId) {