Use confirm button for workflow list delete

src-ui/src/app/components/manage/workflows/workflows.component.html

@@ -33,16 +33,21 @@
           <div class="btn-group">
             <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editWorkflow(workflow)">
               <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
-              </button>
-              <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-                </button>
-              </div>
-            </div>
+            </button>
+            <pngx-confirm-button
+              label="Delete"
+              i18n-label
+              (confirm)="deleteWorkflow(workflow)"
+              *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Workflow }"
+              buttonClasses=" btn-sm btn-sm btn-outline-danger"
+              iconName="trash">
+            </pngx-confirm-button>
           </div>
-        </li>
-      }
-      @if (workflows.length === 0) {
-        <li class="list-group-item" i18n>No workflows defined.</li>
-      }
-    </ul>
+        </div>
+      </div>
+    </li>
+  }
+  @if (workflows.length === 0) {
+    <li class="list-group-item" i18n>No workflows defined.</li>
+  }
+</ul>

src-ui/src/app/components/manage/workflows/workflows.component.spec.ts

@@ -25,6 +25,7 @@ import {
 } from 'src/app/data/workflow-trigger'
 import { WorkflowActionType } from 'src/app/data/workflow-action'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 
 const workflows: Workflow[] = [
   {
@@ -84,6 +85,7 @@ describe('WorkflowsComponent', () => {
         IfPermissionsDirective,
         PageHeaderComponent,
         ConfirmDialogComponent,
+        ConfirmButtonComponent,
       ],
       providers: [
         {
@@ -172,27 +174,23 @@ describe('WorkflowsComponent', () => {
   })
 
   it('should support delete, show notification on error / success', () => {
-    let modal: NgbModalRef
-    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const deleteSpy = jest.spyOn(workflowService, 'delete')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[4]
-    deleteButton.triggerEventHandler('click')
-
-    expect(modal).not.toBeUndefined()
-    const editDialog = modal.componentInstance as ConfirmDialogComponent
+    const deleteButton = fixture.debugElement.query(
+      By.directive(ConfirmButtonComponent)
+    )
 
     // fail first
     deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting')))
-    editDialog.confirmClicked.emit()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(reloadSpy).not.toHaveBeenCalled()
 
     // succeed
     deleteSpy.mockReturnValueOnce(of(true))
-    editDialog.confirmClicked.emit()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(reloadSpy).toHaveBeenCalled()
   })
 })

src-ui/src/app/components/manage/workflows/workflows.component.ts

@@ -89,27 +89,15 @@ export class WorkflowsComponent
   }
 
   deleteWorkflow(workflow: Workflow) {
-    const modal = this.modalService.open(ConfirmDialogComponent, {
-      backdrop: 'static',
-    })
-    modal.componentInstance.title = $localize`Confirm delete workflow`
-    modal.componentInstance.messageBold = $localize`This operation will permanently delete this workflow.`
-    modal.componentInstance.message = $localize`This operation cannot be undone.`
-    modal.componentInstance.btnClass = 'btn-danger'
-    modal.componentInstance.btnCaption = $localize`Proceed`
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
-      this.workflowService.delete(workflow).subscribe({
-        next: () => {
-          modal.close()
-          this.toastService.showInfo($localize`Deleted workflow`)
-          this.workflowService.clearCache()
-          this.reload()
-        },
-        error: (e) => {
-          this.toastService.showError($localize`Error deleting workflow.`, e)
-        },
-      })
+    this.workflowService.delete(workflow).subscribe({
+      next: () => {
+        this.toastService.showInfo($localize`Deleted workflow`)
+        this.workflowService.clearCache()
+        this.reload()
+      },
+      error: (e) => {
+        this.toastService.showError($localize`Error deleting workflow.`, e)
+      },
     })
   }
 }