TEIIDTOOLS-433 Resolve issue with confirmation dialogs

ngapp/src/app/activities/activities.component.html

@@ -102,6 +102,3 @@ <h1  class="card-pf-title">
   </div>
 
 </div>
-<app-confirm-delete #confirmDeleteDialog (deleteSelected)="onDeleteActivity()">
-  <p i18n="@@activities.doYouReallyWantToDelete" >Do you really want to delete the selected Activity?</p>
-</app-confirm-delete>

ngapp/src/app/activities/activities.component.ts

@@ -20,16 +20,16 @@ import { Activity } from "@activities/shared/activity.model";
 import { ActivityService } from "@activities/shared/activity.service";
 import { NewActivity } from "@activities/shared/new-activity.model";
 import { Component } from "@angular/core";
-import { ViewChild } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { Router } from "@angular/router";
 import { LoggerService } from "@core/logger.service";
 import { ArrayUtils } from "@core/utils/array-utils";
 import { AbstractPageComponent } from "@shared/abstract-page.component";
-import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
+import { ConfirmDialogComponent } from "@shared/confirm-dialog/confirm-dialog.component";
 import { IdFilter } from "@shared/id-filter";
 import { LayoutType } from "@shared/layout-type.enum";
 import { SortDirection } from "@shared/sort-direction.enum";
+import { BsModalService } from "ngx-bootstrap";
 
 @Component({
   moduleId: module.id,
@@ -50,14 +50,15 @@ export class ActivitiesComponent extends AbstractPageComponent {
   private filter: IdFilter = new IdFilter();
   private layout: LayoutType = LayoutType.CARD;
   private sortDirection: SortDirection = SortDirection.ASC;
+  private modalService: BsModalService;
 
-  @ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent;
-
-  constructor(router: Router, route: ActivatedRoute, activityService: ActivityService, logger: LoggerService ) {
+  constructor(router: Router, route: ActivatedRoute, activityService: ActivityService,
+              logger: LoggerService, modalService: BsModalService ) {
     super(route, logger);
     this.router = router;
     this.activityService = activityService;
     this.logger = logger;
+    this.modalService = modalService;
   }
 
   public loadAsyncPageData(): void {
@@ -98,7 +99,21 @@ export class ActivitiesComponent extends AbstractPageComponent {
 
   public onDelete(activityName: string): void {
     this.activityNameForDelete = activityName;
-    this.confirmDeleteDialog.open();
+
+    // Dialog Content
+    const message = "Do you really want to delete Activity '" + activityName + "'?";
+    const initialState = {
+      title: "Confirm Delete",
+      bodyContent: message,
+      cancelButtonText: "Cancel",
+      confirmButtonText: "Delete"
+    };
+
+    // Show Dialog, act upon confirmation click
+    const modalRef = this.modalService.show(ConfirmDialogComponent, {initialState});
+    modalRef.content.confirmAction.take(1).subscribe((value) => {
+      this.onDeleteActivity();
+    });
   }
 
   // noinspection JSMethodCanBeStatic

ngapp/src/app/activities/activities.module.ts

@@ -31,6 +31,7 @@ import { RouterModule } from "@angular/router";
 import { ConnectionsModule } from "@connections/connections.module";
 import { CoreModule } from "@core/core.module";
 import { LoggerService } from "@core/logger.service";
+import { ConfirmDialogComponent } from "@shared/confirm-dialog/confirm-dialog.component";
 import { SharedModule } from "@shared/shared.module";
 import { PatternFlyNgModule } from "patternfly-ng";
 
@@ -58,6 +59,7 @@ import { PatternFlyNgModule } from "patternfly-ng";
   providers: [
     ActivityService,
     LoggerService
-  ]
+  ],
+  entryComponents: [ConfirmDialogComponent]
 })
 export class ActivitiesModule {}

ngapp/src/app/connections/connections.component.html

@@ -86,8 +86,3 @@ <h1 class="card-pf-title">
   </div>
 
 </div>
-<app-confirm-delete (deleteSelected)="onDeleteConnection()">
-  <p i18n="@@connections.doYouReallyWantToDeleteSelectedConnection" >
-    Do you really want to delete the '{{ connectionNameForDelete }}' Connection?
-  </p>
-</app-confirm-delete>

ngapp/src/app/connections/connections.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { ConnectionStatus } from "@connections/shared/connection-status";
 import { Connection } from "@connections/shared/connection.model";
@@ -26,16 +26,17 @@ import { LoggerService } from "@core/logger.service";
 import { NotifierService } from "@dataservices/shared/notifier.service";
 import { WizardService } from "@dataservices/shared/wizard.service";
 import { AbstractPageComponent } from "@shared/abstract-page.component";
-import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
+import { ConfirmDialogComponent } from "@shared/confirm-dialog/confirm-dialog.component";
 import { LayoutType } from "@shared/layout-type.enum";
-import { FilterConfig } from "patternfly-ng";
-import { FilterField } from "patternfly-ng";
-import { FilterEvent } from "patternfly-ng";
+import { BsModalService } from "ngx-bootstrap";
 import { SortField } from "patternfly-ng";
 import { SortEvent } from "patternfly-ng";
 import { FilterType } from "patternfly-ng";
-import { ActionConfig, EmptyStateConfig, Filter } from "patternfly-ng";
+import { FilterEvent } from "patternfly-ng";
 import { SortConfig } from "patternfly-ng";
+import { FilterField } from "patternfly-ng";
+import { FilterConfig } from "patternfly-ng";
+import { ActionConfig, EmptyStateConfig, Filter } from "patternfly-ng";
 import { Subscription } from "rxjs/Subscription";
 
 @Component({
@@ -65,18 +66,18 @@ export class ConnectionsComponent extends AbstractPageComponent implements OnIni
   private wizardService: WizardService;
   private notifierService: NotifierService;
   private connectionStatusSubscription: Subscription;
-
-  @ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent;
+  private modalService: BsModalService;
 
   constructor(router: Router, route: ActivatedRoute, appSettingsService: AppSettingsService,
               wizardService: WizardService, connectionService: ConnectionService, logger: LoggerService,
-              notifierService: NotifierService, ) {
+              notifierService: NotifierService, modalService: BsModalService ) {
     super(route, logger);
     this.router = router;
     this.appSettingsService = appSettingsService;
     this.connectionService = connectionService;
     this.wizardService = wizardService;
     this.notifierService = notifierService;
+    this.modalService = modalService;
     // Register for connection status changes
     this.connectionStatusSubscription = this.notifierService.getConnectionStatusMap().subscribe((connectionStatusMap) => {
       this.onConnectionStatusChanged(connectionStatusMap);
@@ -227,7 +228,21 @@ export class ConnectionsComponent extends AbstractPageComponent implements OnIni
 
   public onDelete(connName: string): void {
     this.connectionNameForDelete = connName;
-    this.confirmDeleteDialog.open();
+
+    // Dialog Content
+    const message = "Do you really want to delete Connection '" + connName + "'?";
+    const initialState = {
+      title: "Confirm Delete",
+      bodyContent: message,
+      cancelButtonText: "Cancel",
+      confirmButtonText: "Delete"
+    };
+
+    // Show Dialog, act upon confirmation click
+    const modalRef = this.modalService.show(ConfirmDialogComponent, {initialState});
+    modalRef.content.confirmAction.take(1).subscribe((value) => {
+      this.onDeleteConnection();
+    });
   }
 
   public setListLayout(): void {

ngapp/src/app/connections/connections.module.ts

@@ -36,6 +36,7 @@ import { LoggerService } from "@core/logger.service";
 import { NotifierService } from "@dataservices/shared/notifier.service";
 import { VdbService } from "@dataservices/shared/vdb.service";
 import { environment } from "@environments/environment";
+import { ConfirmDialogComponent } from "@shared/confirm-dialog/confirm-dialog.component";
 import { SharedModule } from "@shared/shared.module";
 import { PatternFlyNgModule } from "patternfly-ng";
 import { ConnectionTypeCardComponent } from "./connection-type-cards/connection-type-card/connection-type-card.component";
@@ -74,7 +75,8 @@ import { ConnectionTypeCardsComponent } from "./connection-type-cards/connection
     LoggerService
   ],
   exports: [
-  ]
+  ],
+  entryComponents: [ConfirmDialogComponent]
 })
 export class ConnectionsModule { }
 

ngapp/src/app/dataservices/dataservices.component.html

@@ -113,6 +113,3 @@ <h1 class="card-pf-title">
   </div>
 
 </div>
-<app-confirm-delete (deleteSelected)="onDeleteDataservice()">
-  <p i18n="@@dataservices.doYouReallyWantToDeleteSelectedDataservice" >Do you really want to delete the selected Virtualization?</p>
-</app-confirm-delete>

ngapp/src/app/dataservices/dataservices.component.ts

@@ -33,9 +33,10 @@ import { Virtualization } from "@dataservices/shared/virtualization.model";
 import { WizardService } from "@dataservices/shared/wizard.service";
 import { SqlControlComponent } from "@dataservices/sql-control/sql-control.component";
 import { AbstractPageComponent } from "@shared/abstract-page.component";
-import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
+import { ConfirmDialogComponent } from "@shared/confirm-dialog/confirm-dialog.component";
 import { LayoutType } from "@shared/layout-type.enum";
 import { SortDirection } from "@shared/sort-direction.enum";
+import { BsModalService } from "ngx-bootstrap";
 import {
   ActionConfig,
   EmptyStateConfig,
@@ -104,20 +105,22 @@ export class DataservicesComponent extends AbstractPageComponent implements OnIn
   private wizardService: WizardService;
   private selectedSvcViews: View[] = [];
   private allSvcViews: View[] = [];
+  private modalService: BsModalService;
 
-  @ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent;
   @ViewChild(SqlControlComponent) private sqlControlComponent: SqlControlComponent;
 
   constructor(router: Router, route: ActivatedRoute, dataserviceService: DataserviceService,
               logger: LoggerService, appSettingsService: AppSettingsService, wizardService: WizardService,
-              notifierService: NotifierService, vdbService: VdbService, connectionService: ConnectionService ) {
+              notifierService: NotifierService, vdbService: VdbService, connectionService: ConnectionService,
+              modalService: BsModalService) {
     super(route, logger);
     this.router = router;
     this.appSettingsService = appSettingsService;
     this.dataserviceService = dataserviceService;
     this.vdbService = vdbService;
     this.notifierService = notifierService;
     this.wizardService = wizardService;
+    this.modalService = modalService;
     // Register for dataservice deployment state changes
     this.dataserviceDeployStateSubscription = this.notifierService.getDataserviceDeployStateMap().subscribe((serviceStateMap) => {
       this.onDataserviceDeploymentStateChanged(serviceStateMap);
@@ -492,7 +495,21 @@ export class DataservicesComponent extends AbstractPageComponent implements OnIn
     this.setQuickLookPanelOpenState(false);
 
     this.dataserviceNameForDelete = svcName;
-    this.confirmDeleteDialog.open();
+
+    // Dialog Content
+    const message = "Do you really want to delete Virtualization '" + svcName + "'?";
+    const initialState = {
+      title: "Confirm Delete",
+      bodyContent: message,
+      cancelButtonText: "Cancel",
+      confirmButtonText: "Delete"
+    };
+
+    // Show Dialog, act upon confirmation click
+    const modalRef = this.modalService.show(ConfirmDialogComponent, {initialState});
+    modalRef.content.confirmAction.take(1).subscribe((value) => {
+      this.onDeleteDataservice();
+    });
   }
 
   /**

ngapp/src/app/dataservices/dataservices.module.ts

@@ -36,6 +36,7 @@ import { NotifierService } from "@dataservices/shared/notifier.service";
 import { VdbService } from "@dataservices/shared/vdb.service";
 import { WizardService } from "@dataservices/shared/wizard.service";
 import { environment } from "@environments/environment";
+import { ConfirmDialogComponent } from "@shared/confirm-dialog/confirm-dialog.component";
 import { SharedModule } from "@shared/shared.module";
 import { TreeModule } from "angular-tree-component";
 import { CodemirrorModule } from "ng2-codemirror";
@@ -97,7 +98,8 @@ import { TestDataserviceComponent } from "./test-dataservice/test-dataservice.co
     WizardService
   ],
   exports: [
-  ]
+  ],
+  entryComponents: [ConfirmDialogComponent]
 })
 export class DataservicesModule { }