mgr/dashboard: Confirmation modal doesn't close

Fixes: https://tracker.ceph.com/issues/24729
Signed-off-by: Volker Theile <vtheile@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html
index c710cbf6b8cdc666b5cdec29aa6c7b25e397b9cf..e3457f96cfe5fab4d97bf2e0ab2dda7e036e3954 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html
@@ -1,4 +1,4 @@
-<cd-modal>
+<cd-modal (hide)="cancel()">
   <ng-container class="modal-title">{{ titleText }}</ng-container>
   <ng-container class="modal-content">
     <form name="confirmationForm"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html
index e1f69f64ddf7370bec37bc189edb4a7543d21a2f..9f56f9efb993c9bd397111b9354162bf319e792e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html
@@ -5,7 +5,7 @@
   <button type="button"
           class="close pull-right"
           aria-label="Close"
-          (click)="modalRef.hide()">
+          (click)="close()">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.spec.ts
index 56f4a146ebdb102cdccd4801a7469af494ce5fb3..2df82edb223734a924b155c07bfac5de222d01ca 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ModalModule } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { ModalComponent } from './modal.component';
@@ -23,4 +24,20 @@ describe('ModalComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call the hide callback function', () => {
+    spyOn(component.hide, 'emit');
+    const nativeElement = fixture.nativeElement;
+    const button = nativeElement.querySelector('button');
+    button.dispatchEvent(new Event('click'));
+    fixture.detectChanges();
+    expect(component.hide.emit).toHaveBeenCalled();
+  });
+
+  it('should hide the modal', () => {
+    component.modalRef = new BsModalRef();
+    spyOn(component.modalRef, 'hide');
+    component.close();
+    expect(component.modalRef.hide).toHaveBeenCalled();
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.ts
index 38f3b27c9024c54e65ad83e2cb17549c91f565c6..4ed3e532bb04aca7357f9c39775108ed16f918bb 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 
@@ -11,5 +11,18 @@ export class ModalComponent {
   @Input()
   modalRef: BsModalRef;
 
+  /**
+   * Should be a function that is triggered when the modal is hidden.
+   */
+  @Output()
+  hide = new EventEmitter();
+
   constructor() {}
+
+  close() {
+    if (this.modalRef) {
+      this.modalRef.hide();
+    }
+    this.hide.emit();
+  }
 }