Add confirming popup for jobs #764

src/frontend/app/ui/settings/workflow/button/job-button.settings.component.html

@@ -4,7 +4,7 @@
         i18n-title
         *ngIf="!Running"
         [disabled]="disabled || jobsService.jobStartingStopping[jobName]"
-        (click)="start();">
+        (click)="openModal(jobRunModal);">
   <span class="me-2" *ngIf="!shortName"><ng-container
     i18n>Run now</ng-container>: {{ backendTextService.getJobName(jobName) }}</span>
   <ng-icon name="ionPlayOutline"></ng-icon>
@@ -17,3 +17,34 @@
   <span class="ms-2" *ngIf="!shortName"><ng-container
     i18n>Cancel</ng-container>: {{ backendTextService.getJobName(jobName) }}</span>
 </button>
+
+
+<ng-template #jobRunModal>
+  <!-- job running Modal-->
+  <div class="modal-header">
+    <h5 class="modal-title" i18n>Do you want to run {{ backendTextService.getJobName(jobName) }}?</h5>
+    <button type="button" class="btn-close" (click)="hideModal()" data-dismiss="modal" aria-label="Close">
+    </button>
+  </div>
+  <div class="modal-body">
+    <span i18n>Are you sue you want to run this job? This will have the following effect:</span>
+    <div class="alert alert-secondary" role="alert">
+      {{ backendTextService.getJobDescription(jobName) }}
+    </div>
+  </div>
+  <div class="modal-footer">
+    <div class="btn-group float-end row" style="display: block">
+      <div class="pe-0">
+        <button class="btn btn-secondary me-2" type="button"
+                (click)="hideModal()">
+          <ng-container i18n>Cancel</ng-container>
+        </button>
+        <button class="btn {{danger ? 'btn-danger': 'btn-success'}}" type="button"
+                (click)="start(); hideModal();">
+          <ng-container i18n>Run now</ng-container>
+          <ng-icon name="ionPlayOutline" class="ms-1"></ng-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+</ng-template>

src/frontend/app/ui/settings/workflow/button/job-button.settings.component.ts

@@ -1,10 +1,13 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, TemplateRef} from '@angular/core';
 import {JobProgressStates, OnTimerJobProgressDTO,} from '../../../../../../common/entities/job/JobProgressDTO';
 import {ErrorDTO} from '../../../../../../common/entities/Error';
 import {ScheduledJobsService} from '../../scheduled-jobs.service';
 import {NotificationService} from '../../../../model/notification.service';
 import {JobDTOUtils} from '../../../../../../common/entities/job/JobDTO';
 import {BackendtextService} from '../../../../model/backendtext.service';
+import {BsModalRef} from 'ngx-bootstrap/modal';
+import {BsModalService} from '../../../../../../../node_modules/ngx-bootstrap/modal';
+import {ConfigStyle} from '../../settings.service';
 
 @Component({
   selector: 'app-settings-job-button',
@@ -21,10 +24,12 @@ export class JobButtonComponent {
   @Input() danger = false;
   JobProgressStates = JobProgressStates;
   @Output() jobError = new EventEmitter<string>();
+  private modalRef: BsModalRef;
 
   constructor(
     private notification: NotificationService,
     public jobsService: ScheduledJobsService,
+    private modalService: BsModalService,
     public backendTextService: BackendtextService
   ) {
   }
@@ -54,6 +59,28 @@ export class JobButtonComponent {
       ];
   }
 
+
+  public hideModal(): void {
+    this.modalRef.hide();
+    this.modalRef = null;
+  }
+
+  public async openModal(template: TemplateRef<unknown>): Promise<void> {
+    // if we show the button in short form (at the jobs settings),
+    // we assume users know what they are doing,
+    // so we do not show a confirm window.
+    if(this.shortName){
+      await this.start();
+      return;
+    }
+    this.modalRef = this.modalService.show(template, {
+      class: 'modal-lg',
+    });
+    document.body.style.paddingRight = '0px';
+  }
+
+
+
   public async start(): Promise<boolean> {
     this.jobError.emit('');
     this.populateConfig();
@@ -98,6 +125,8 @@ export class JobButtonComponent {
     }
     return false;
   }
+
+  protected readonly ConfigStyle = ConfigStyle;
 }