Added better looking dialog box

src/app/_dialogs/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,12 @@
+<mat-card fxLayoutGap>
+
+    <p mat-dialog-title>{{data.title}}</p>
+
+    <p display-2>{{data.message}}</p>
+
+
+    <div mat-dialog-actions>
+        <button mat-button (click)="onDismiss()">No</button>
+        <button mat-raised-button color="primary" (click)="onConfirm()">Yes</button>
+    </div>
+</mat-card>

src/app/_dialogs/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,3 @@
+mat-dialog-container {
+  padding: 0px !important
+}

src/app/_dialogs/confirm-dialog/confirm-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfirmDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_dialogs/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {ConfirmDialogData} from '../../_interfaces/dialog-data';
+
+@Component({
+  selector: 'app-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss']
+})
+export class ConfirmDialogComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData
+  ) {
+  }
+
+  onConfirm(): void {
+    // Close the dialog, return true
+    this.dialogRef.close(true);
+  }
+
+  onDismiss(): void {
+    // Close the dialog, return false
+    this.dialogRef.close(false);
+  }
+}

src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.ts

@@ -27,4 +27,5 @@ export class DeleteFileDialogComponent {
     this.dialogRef.close(data);
   }
 
+
 }

src/app/_interfaces/dialog-data.ts

@@ -39,6 +39,13 @@ export interface DeleteFileDialogData {
   fileMeta: FileMeta;
 }
 
+export interface ConfirmDialogData {
+    title: string;
+    message: string;
+}
+
+
+
 export interface DeleteWorkflowSpecDialogData {
   confirm: boolean;
   workflowSpec: WorkflowSpec;

src/app/app.module.ts

@@ -51,6 +51,7 @@ import {ReferenceFilesComponent} from './reference-files/reference-files.compone
 import {WorkflowSpecCardComponent} from './workflow-spec-card/workflow-spec-card.component';
 import {WorkflowSpecListComponent} from './workflow-spec-list/workflow-spec-list.component';
 import {MatSidenavModule} from '@angular/material/sidenav';
+import { ConfirmDialogComponent } from './_dialogs/confirm-dialog/confirm-dialog.component';
 
 @Injectable()
 export class ThisEnvironment implements AppEnvironment {
@@ -100,6 +101,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     WorkflowSpecCardComponent,
     ProtocolBuilderComponent,
     ReferenceFilesComponent,
+    ConfirmDialogComponent,
   ],
   imports: [
     BrowserAnimationsModule,

src/app/modeler/modeler.component.ts

@@ -4,6 +4,7 @@ import {MatBottomSheet} from '@angular/material/bottom-sheet';
 import {MatDialog} from '@angular/material/dialog';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {ActivatedRoute, Params, Router} from '@angular/router';
+
 import {
   ApiErrorsComponent,
   ApiService,
@@ -17,8 +18,9 @@ import {
 import {FileMetaDialogComponent} from '../_dialogs/file-meta-dialog/file-meta-dialog.component';
 import {NewFileDialogComponent} from '../_dialogs/new-file-dialog/new-file-dialog.component';
 import {OpenFileDialogComponent} from '../_dialogs/open-file-dialog/open-file-dialog.component';
+import {ConfirmDialogComponent} from '../_dialogs/confirm-dialog/confirm-dialog.component';
 import {BpmnWarning} from '../_interfaces/bpmn-warning';
-import {FileMetaDialogData, NewFileDialogData, OpenFileDialogData} from '../_interfaces/dialog-data';
+import {FileMetaDialogData, NewFileDialogData, OpenFileDialogData, ConfirmDialogData} from '../_interfaces/dialog-data';
 import {ImportEvent} from '../_interfaces/import-event';
 import {DiagramComponent} from '../diagram/diagram.component';
 
@@ -125,16 +127,25 @@ export class ModelerComponent implements AfterViewInit {
   getFileName() {
     return this.diagramFile ? this.diagramFile.name : this.fileName || 'No file selected';
   }
-  checkSaved(){
+
+  checkSaved() {
     if (this.hasChanged()) {
-      const approve = window.confirm('Unsaved Changes - Are you sure?');
-      if (approve) {
-        this.router.navigate(['/home', this.workflowSpec.name]);
-      }
+      const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+        maxWidth: '300px',
+        data: {
+          title: 'Unsaved Changes!',
+          message : 'Are you sure you want to abandon changes?',
+        }
+      });
+      dialogRef.afterClosed().subscribe(dialogResult => {
+        if (dialogResult) {
+          this.router.navigate(['/home', this.workflowSpec.name]);
+        }});
     } else {
       this.router.navigate(['/home', this.workflowSpec.name]);
     }
   }
+
   onFileSelected($event: Event) {
     this.diagramFile = ($event.target as HTMLFormElement).files[0];
     this.onSubmitFileToOpen();