[28476] Acknowledge deletion of children

https://community.openproject.com/wp/28476

config/locales/js-en.yml

@@ -697,6 +697,7 @@ en:
         title: "Confirm deletion of %{label}"
         text: "Are you sure you want to delete the following %{label} ?"
         has_children: "The work package has %{childUnits}:"
+        confirm_deletion_children: "I acknowledge that ALL descendants of the listet work packages will be recursively removed."
         deletes_children: "All child work packages and their descendants will also be recursively deleted."
 
     notice_successful_create: "Successful creation."

frontend/src/app/components/modals/wp-destroy-modal/wp-destroy.modal.html

@@ -17,8 +17,8 @@
       <section class="form--section -inner-scrolling">
         <h3 class="form--section-title" [textContent]="text.title"></h3>
 
-        <div *ngIf="singleWorkPackage"
-             class="modal-inner-scrolling-container">
+      <div class="modal-inner-scrolling-container">
+        <ng-container *ngIf="singleWorkPackage">
           <p>
             <span [textContent]="text.text"></span>
             <br/>
@@ -44,9 +44,8 @@
               <span [textContent]="text.deletesChildren"></span>
             </p>
           </div>
-        </div>
-
-        <div class="modal-inner-scrolling-container" *ngIf="workPackages.length > 1">
+        </ng-container>
+        <ng-container *ngIf="workPackages.length > 1">
           <p class="danger-zone--warning">
             <span class="icon icon-error"></span>
             <strong [textContent]="text.text"></strong>
@@ -54,19 +53,33 @@
           <ul>
             <li *ngFor="let wp of workPackages">
               #<span [textContent]="wp.id"></span>
+              &ngsp;
               <span [textContent]="wp.subject"></span>
               <strong *ngIf="children(wp).length > 0">
                 (+ {{ text.childCount(wp) }})
               </strong>
             </li>
           </ul>
+        </ng-container>
+        <div *ngIf="mustConfirmChildren">
+            <label class="form--label-with-check-box">
+                <div class="form--check-box-container">
+                  <input type="checkbox"
+                          name="confirm-children-deletion"
+                          id="confirm-children-deletion"
+                          [(ngModel)]="childrenDeletionConfirmed"
+                          class="form--check-box" />
+                </div>
+                {{ text.label_confirm_children_deletion }}
+              </label>
+          </div>
         </div>
       </section>
 
       <div class="form--space -left-spacing">
         <button class="button -danger"
                 [textContent]="text.confirm"
-                [attr.disabled]="busy || undefined"
+                [attr.disabled]="busy || blockedDueToUnconfirmedChildren || undefined"
                 (click)="confirmDeletion($event)">
         </button>
         <button class="button"

frontend/src/app/components/modals/wp-destroy-modal/wp-destroy.modal.ts

@@ -53,6 +53,9 @@ export class WpDestroyModal extends OpModalComponent implements OnInit {
   public singleWorkPackageChildren:WorkPackageResource[];
   public busy = false;
 
+  // Need to confirm deletion when children are involved
+  public childrenDeletionConfirmed = false;
+
   public text:any = {
     label_visibility_settings: this.I18n.t('js.label_visibility_settings'),
     button_save: this.I18n.t('js.modals.button_save'),
@@ -60,6 +63,7 @@ export class WpDestroyModal extends OpModalComponent implements OnInit {
     warning: this.I18n.t('js.label_warning'),
     cancel: this.I18n.t('js.button_cancel'),
     close: this.I18n.t('js.close_popup_title'),
+    label_confirm_children_deletion: this.I18n.t('js.modals.destroy_work_package.confirm_deletion_children'),
   };
 
   constructor(readonly elementRef:ElementRef,
@@ -105,9 +109,23 @@ export class WpDestroyModal extends OpModalComponent implements OnInit {
       this.text.deletesChildren = this.I18n.t('js.modals.destroy_work_package.deletes_children');
   }
 
+  public get blockedDueToUnconfirmedChildren() {
+    return this.mustConfirmChildren && !this.childrenDeletionConfirmed;
+  }
+
+  public get mustConfirmChildren() {
+    let result = false;
+
+    if (this.singleWorkPackage && this.singleWorkPackageChildren) {
+      let result = this.singleWorkPackageChildren.length > 0;
+    }
+
+    return result || !!_.find(this.workPackages, wp =>
+      wp.children && wp.children.length > 0);
+  }
 
   public confirmDeletion($event:JQueryEventObject) {
-    if (this.busy) {
+    if (this.busy || this.blockedDueToUnconfirmedChildren) {
       return false;
     }
 

spec/features/work_packages/table/delete_work_packages_spec.rb

@@ -72,7 +72,7 @@ describe 'Delete work package', js: true do
       wp_table.visit!
 
       wp_table.expect_work_package_listed wp1, wp2, wp_child
-      page.find('.work-package-table').send_keys [:control, 'a']
+      find('body').send_keys [:control, 'a']
 
       context_menu.open_for(wp1)
       context_menu.choose('Bulk delete')
@@ -83,6 +83,7 @@ describe 'Delete work package', js: true do
 
       context_menu.open_for(wp1)
       context_menu.choose('Bulk delete')
+      destroy_modal.confirm_children_deletion
       destroy_modal.confirm_deletion
 
       loading_indicator_saveguard

spec/support/components/work_packages/destroy_modal.rb

@@ -50,6 +50,12 @@ module Components
         end
       end
 
+      def confirm_children_deletion
+        page.within(container) do
+          check 'confirm-children-deletion'
+        end
+      end
+
       def confirm_deletion
         page.within(container) do
           click_button 'Confirm'

spec/support/pages/split_work_package.rb

@@ -48,7 +48,7 @@ module Pages
     end
 
     def closed?
-      expect(page).not_to have_selector(@selector)
+      expect(page).to have_no_selector(@selector)
     end
 
     def container