tweak: enhance delete confirm dialog

tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.html

@@ -0,0 +1,14 @@
+<mat-form-field class="form-field--full-width">
+  <label for="">
+    {{message}}
+  </label>
+  <input type="text" matInput [formControl]="control">
+  <mat-hint *ngIf="control.touched && control.dirty && noMatch$ | async">
+    Name doesn't match
+  </mat-hint>
+</mat-form-field>
+<mat-dialog-actions class="actions">
+  <button data-cy="dialog-btn-cancel" class="btn btn-secondary btn-sm" matDialogClose>Cancel</button>
+  <button data-cy="dialog-btn-delete" class="btn btn-danger btn-sm" [disabled]="noMatch$ | async" (click)="confirmDelete()">Delete</button>
+</mat-dialog-actions>
+

tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.scss

@@ -0,0 +1,9 @@
+.actions{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.form-field--full-width{
+  width: 100%;
+}

tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.ts

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { Component, Inject, NgModule } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef, MatFormFieldModule, MatInputModule } from '@angular/material';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+@Component({
+  selector: 'wt-confirm-delete-dialog',
+  templateUrl: './confirm-delete-dialog.component.html',
+  styleUrls: ['./confirm-delete-dialog.component.scss']
+})
+export class ConfirmDeleteDialogComponent {
+
+  public control: FormControl = new FormControl();
+  public message!: string;
+  public noMatch$: Observable<boolean> = this.control.valueChanges.pipe(startWith([undefined]), map(value => value !== this.data.runName));
+
+  constructor(@Inject(MAT_DIALOG_DATA) private data: {runName: string}, private dialogRef: MatDialogRef<ConfirmDeleteDialogComponent>) {
+    this.message = `Please confirm the deletion of the workflow '${data.runName}' typing its name below (operation is not recoverable):`
+  }
+
+  public confirmDelete(): void {
+    this.dialogRef.close(true);
+  }
+}
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    NoopAnimationsModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatFormFieldModule
+  ],
+  declarations: [ConfirmDeleteDialogComponent],
+  exports: [ConfirmDeleteDialogComponent, MatDialogModule]
+})
+export class ConfirmDeleteDialogModule{
+
+}

tower-web/src/app/modules/main/component/sidebar/sidebar.component.ts

@@ -15,10 +15,12 @@ import {WorkflowService} from "src/app/modules/main/service/workflow.service";
 import {AuthService} from "src/app/modules/main/service/auth.service";
 import {NotificationService} from "src/app/modules/main/service/notification.service";
 import { ActivatedRoute, Router, NavigationEnd, Params } from '@angular/router';
-import {debounceTime, distinctUntilChanged, filter} from 'rxjs/operators';
+import {debounceTime, distinctUntilChanged, filter, takeUntil} from 'rxjs/operators';
 import {FormControl} from "@angular/forms";
 import {FilteringParams} from "../../util/filtering-params";
-
+import { Subject } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmDeleteDialogComponent} from '../confirm-delete-dialog/confirm-delete-dialog.component';
 declare let $: any;
 
 @Component({
@@ -28,6 +30,8 @@ declare let $: any;
 })
 export class SidebarComponent implements OnInit, OnDestroy, OnChanges {
 
+  private destroy$ = new Subject<void>();
+
   @Input()
   workflows: Workflow[];
 
@@ -55,7 +59,8 @@ export class SidebarComponent implements OnInit, OnDestroy, OnChanges {
               private authService: AuthService,
               private workflowService: WorkflowService,
               private router: Router,
-              private route: ActivatedRoute) {}
+              private route: ActivatedRoute,
+              private dialog: MatDialog) {}
 
 
   ngOnInit() {
@@ -94,6 +99,7 @@ export class SidebarComponent implements OnInit, OnDestroy, OnChanges {
   ngOnDestroy(): void {
     // TODO: Decide if this line required or not. It breaks routing.
     // this.router.navigate(['/']);
+    this.destroy$.next();
   }
 
   collapseSidebar(): void {
@@ -144,13 +150,24 @@ export class SidebarComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   deleteWorkflow(workflow: Workflow): void {
-    const confirm = prompt(`Please confirm the deletion of the workflow '${workflow.data.runName}' typing its name below (operation is not recoverable):`);
-    if (confirm != workflow.data.runName) {
-      return;
-    }
 
-    this.workflowToDelete = workflow;
-    this.onDeleteWorkflow.next(workflow);
+    this.dialog.open(ConfirmDeleteDialogComponent, {
+      data: {
+        runName: workflow.data.runName
+      },
+      maxWidth: '90%',
+      width: '300px',
+      hasBackdrop: true,
+      disableClose: true
+    }).afterClosed()
+      .pipe(takeUntil(this.destroy$)).subscribe(
+        confirmDelete => {
+          if(confirmDelete){
+            this.workflowToDelete = workflow;
+            this.onDeleteWorkflow.next(workflow);
+          }
+        }
+      );
   }
 
 }

tower-web/src/app/modules/main/main.module.ts

@@ -49,6 +49,7 @@ import { TreeListComponent } from "./component/tree-list/TreeListComponent";
 import { WorkflowStatusIconComponent } from "../../workflow-status-icon/workflow-status-icon.component";
 import { TaskDetailsComponent } from "./component/task-details/task-details.component";
 import {AppConfigService} from './service/app-config.service';
+import { ConfirmDeleteDialogModule } from './component/confirm-delete-dialog/confirm-delete-dialog.component';
 
 /*
  * Main application routing strategy
@@ -118,6 +119,7 @@ const appInitializerFn = (appConfig: AppConfigService) => {
     FormsModule,
     ChartistModule,
     ReactiveFormsModule,
+    ConfirmDeleteDialogModule
   ],
   providers: [
     AppConfigService,