Disable editing fields and the custom actions button while the button is submitted

frontend/src/app/features/work-packages/components/wp-custom-actions/wp-custom-actions/wp-custom-action.component.html

@@ -1,6 +1,8 @@
 <button
     (click)="update()"
     class="custom-action--button button -narrow hide-when-print"
-    title="{{action.description ? action.description : action.name}}" >
+    title="{{action.description ? action.description : action.name}}"
+    [disabled]="change.inFlight"
+    >
   {{action.name}}
 </button>

frontend/src/app/features/work-packages/components/wp-custom-actions/wp-custom-actions/wp-custom-action.component.ts

@@ -26,20 +26,24 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, HostListener, Input } from '@angular/core';
-import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
-import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service';
-import { WorkPackagesActivityService } from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/wp-activity.service';
+import {
+  ChangeDetectionStrategy, Component, HostListener, Input,
+} from '@angular/core';
+import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
+import { CustomActionResource } from 'core-app/features/hal/resources/custom-action-resource';
+import { HalEventsService } from 'core-app/features/hal/services/hal-events.service';
 import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
+import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service';
+import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';
 import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
-import { HalEventsService } from 'core-app/features/hal/services/hal-events.service';
 import { WorkPackageNotificationService } from 'core-app/features/work-packages/services/notifications/work-package-notification.service';
-import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
-import { CustomActionResource } from 'core-app/features/hal/resources/custom-action-resource';
+import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
+import { WorkPackagesActivityService } from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/wp-activity.service';
 
 @Component({
   selector: 'wp-custom-action',
   templateUrl: './wp-custom-action.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WpCustomActionComponent {
   @Input() workPackage:WorkPackageResource;
@@ -56,14 +60,22 @@ export class WpCustomActionComponent {
   }
 
   private fetchAction() {
-    this.halResourceService.get<CustomActionResource>(this.action.href!)
+    if (this.action.href === null) return;
+
+    void this.halResourceService.get<CustomActionResource>(this.action.href)
       .toPromise()
       .then((action) => {
         this.action = action;
       });
   }
 
-  public update() {
+  public get change():ResourceChangeset<WorkPackageResource> {
+    return this.halEditing.changeFor(this.workPackage);
+  }
+
+  public update():void {
+    if (this.action.href === null) return;
+
     const payload = {
       lockVersion: this.workPackage.lockVersion,
       _links: {
@@ -73,6 +85,9 @@ export class WpCustomActionComponent {
       },
     };
 
+    // Mark changeset as in flight
+    this.change.inFlight = true;
+
     this.halResourceService
       .post<WorkPackageResource>(`${this.action.href}/execute`, payload)
       .subscribe(
@@ -82,16 +97,20 @@ export class WpCustomActionComponent {
           this.wpActivity.clear(this.workPackage.id);
           // Loading the schema might be necessary in cases where the button switches
           // project or type.
-          this.apiV3Service.work_packages.cache.updateWorkPackage(savedWp).then(() => {
+          void this.apiV3Service.work_packages.cache.updateWorkPackage(savedWp).then(() => {
             this.halEditing.stopEditing(savedWp);
             this.halEvents.push(savedWp, { eventType: 'updated' });
+            this.change.inFlight = false;
           });
         },
-        (errorResource:any) => this.notificationService.handleRawError(errorResource, this.workPackage),
+        (errorResource) => {
+          this.notificationService.handleRawError(errorResource, this.workPackage);
+          this.change.inFlight = false;
+        },
       );
   }
 
-  @HostListener('mouseenter') onMouseEnter() {
+  @HostListener('mouseenter') onMouseEnter():void {
     this.fetchAction();
   }
 }

spec/features/work_packages/custom_actions/custom_actions_spec.rb

@@ -477,4 +477,40 @@ describe 'Custom actions', type: :feature, js: true do
     edit_page = index_ca_page.edit('Current date')
     expect(page).to have_select('custom_action_actions_date', selected: 'Current date')
   end
+
+  it 'disables the custom action button and editing other fields when submiting the custom action' do
+    # create custom action 'Unassign'
+    index_ca_page.visit!
+
+    new_ca_page = index_ca_page.new
+    retry_block do
+      new_ca_page.visit!
+      new_ca_page.set_name('Unassign')
+      new_ca_page.set_description('Removes the assignee')
+      new_ca_page.add_action('Assignee', '-')
+      new_ca_page.expect_action('assigned_to', nil)
+    end
+
+    new_ca_page.create
+
+    index_ca_page.expect_current_path
+    index_ca_page.expect_listed('Unassign')
+
+    unassign = CustomAction.last
+    expect(unassign.actions.length).to eq(1)
+    expect(unassign.conditions.length).to eq(0)
+
+    login_as(user)
+
+    wp_page.visit!
+
+    wp_page.ensure_page_loaded
+    # Stop sending ajax requests in order to test disabled fields upon submit
+    wp_page.disable_ajax_requests
+
+    wp_page.click_custom_action('Unassign', expect_success: false)
+    wp_page.expect_custom_action_disabled('Unassign')
+    find('[data-field-name="estimatedTime"]').click
+    expect(page).to have_selector("#wp-#{work_package.id}-inline-edit--field-estimatedTime[disabled]")
+  end
 end

spec/support/pages/work_packages/abstract_work_package.rb

@@ -99,6 +99,12 @@ module Pages
                                     wait: 10)
     end
 
+    def disable_ajax_requests
+      page.execute_script(
+        "var p=window.XMLHttpRequest.prototype; p.open=p.send=p.setRequestHeader=function(){};"
+      )
+    end
+
     def expect_group(name, &)
       expect(page).to have_selector('.attributes-group--header-text', text: name.upcase)
       if block_given?
@@ -161,6 +167,11 @@ module Pages
         .to have_selector('.custom-action', text: name)
     end
 
+    def expect_custom_action_disabled(name)
+      expect(page)
+        .to have_selector('.custom-action [disabled]', text: name)
+    end
+
     def expect_no_custom_action(name)
       expect(page)
         .to have_no_selector('.custom-action', text: name)