Fix: fix edit dialog error change detection (#13483)

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

@@ -32,6 +32,8 @@ import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
   template: `
     <div>
       <h4 class="modal-title" id="modal-basic-title">{{ getTitle() }}</h4>
+      <span class="error">{{ error?.name }}</span>
+      <button [disabled]="networkActive" (click)="save()">Save</button>
     </div>
   `,
   imports: [FormsModule, ReactiveFormsModule],
@@ -276,4 +278,22 @@ describe('EditDialogComponent', () => {
     expect(failedSpy).toHaveBeenCalled()
     expect(component.error).toEqual('error')
   })
+
+  it('should update the view after a failed save', async () => {
+    const button: HTMLButtonElement =
+      fixture.nativeElement.querySelector('button')
+    button.click()
+    await fixture.whenStable()
+    expect(button.disabled).toBe(true)
+
+    httpTestingController
+      .expectOne(`${environment.apiBaseUrl}tags/`)
+      .flush({ name: ['Name is required.'] }, { status: 400, statusText: '' })
+    await fixture.whenStable()
+
+    expect(button.disabled).toBe(false)
+    expect(fixture.nativeElement.querySelector('.error').textContent).toContain(
+      'Name is required.'
+    )
+  })
 })

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

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectorRef,
   Directive,
   EventEmitter,
   Input,
@@ -45,6 +46,7 @@ export abstract class EditDialogComponent<
   protected userService = inject(UserService)
   protected settingsService = inject(SettingsService)
   protected permissionsService = inject(PermissionsService)
+  protected changeDetector = inject(ChangeDetectorRef)
 
   dialogMode = model(EditDialogMode.CREATE)
 
@@ -108,10 +110,12 @@ export abstract class EditDialogComponent<
     // wait to enable close button so it doesn't steal focus from input since its the first clickable element in the DOM
     setTimeout(() => {
       this.closeEnabled = true
+      this.changeDetector.markForCheck()
     })
 
     this.userService.listAll().subscribe((r) => {
       this.users = r.results
+      this.changeDetector.markForCheck()
     })
   }
 
@@ -191,6 +195,7 @@ export abstract class EditDialogComponent<
         this.error = error.error
         this.networkActive = false
         this.failed.next(error)
+        this.changeDetector.markForCheck()
       },
     })
   }