From: Volker Theile <vtheile@suse.com>
Date: Thu, 11 Oct 2018 13:02:39 +0000 (+0200)
Subject: mgr/dashboard: Confirmation modal doesn't close
X-Git-Tag: v14.1.0~1123^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=7a44726645d49f3af90d7277dcd52fb69582c696;p=ceph.git

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 c710cbf6b8c..e3457f96cfe 100644
--- 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 e1f69f64ddf..9f56f9efb99 100644
--- 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 56f4a146ebd..2df82edb223 100644
--- 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 38f3b27c902..4ed3e532bb0 100644
--- 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();
+  }
 }