feat: avoid reloading AMT Summary when updating AMT Features

Author: nmgaston

src/app/devices/general/general.component.html

@@ -63,6 +63,9 @@
       <mat-card-title>{{ 'general.amtEnabledFeatures.value' | translate }}</mat-card-title>
       <mat-card-subtitle>{{ 'general.amtEnabledFeaturesDescription.value' | translate }}</mat-card-subtitle>
     </mat-card-header>
+    @if (isUpdatingFeatures()) {
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    }
     <mat-card-content class="amt-features" [formGroup]="amtEnabledFeatures">
       <div class="flex-row flex-wrap">
         @if (isRedirectionRequired && !amtEnabledFeatures.get('redirection')?.value) {

src/app/devices/general/general.component.spec.ts

@@ -7,7 +7,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { GeneralComponent } from './general.component'
 import { ActivatedRoute } from '@angular/router'
-import { of } from 'rxjs'
+import { of, Subject } from 'rxjs'
 import { DevicesService } from '../devices.service'
 import { provideTranslateService } from '@ngx-translate/core'
 import { By } from '@angular/platform-browser'
@@ -32,7 +32,8 @@ describe('GeneralComponent', () => {
       'bulkPowerAction',
       'sendDeactivate',
       'sendBulkDeactivate',
-      'getWsmanOperations'
+      'getWsmanOperations',
+      'setAmtFeatures'
     ])
     const amtFeaturesResponse = {
       userConsent: 'ALL',
@@ -143,4 +144,72 @@ describe('GeneralComponent', () => {
       jasmine.objectContaining({ remoteErase: true })
     )
   })
+
+  it('should update only feature loading state while setAmtFeatures is in flight', () => {
+    const response$ = new Subject<any>()
+    devicesServiceSpy.setAmtFeatures.and.returnValue(response$)
+    const loadingBefore = component.isLoading()
+
+    component.setAmtFeatures()
+
+    expect(component.isUpdatingFeatures()).toBeTrue()
+    expect(component.isLoading()).toBe(loadingBefore)
+
+    response$.next({ redirection: true, status: 'ok' })
+    response$.complete()
+
+    expect(component.isUpdatingFeatures()).toBeFalse()
+    expect(component.isLoading()).toBe(loadingBefore)
+  })
+
+  it('keeps summary loading state independent from feature update state', () => {
+    const response$ = new Subject<any>()
+    devicesServiceSpy.setAmtFeatures.and.returnValue(response$)
+
+    component.isLoading.set(false)
+    component.setAmtFeatures()
+
+    expect(component.isLoading()).toBeFalse()
+    expect(component.isUpdatingFeatures()).toBeTrue()
+
+    response$.next({ redirection: true, status: 'ok' })
+    response$.complete()
+
+    expect(component.isLoading()).toBeFalse()
+    expect(component.isUpdatingFeatures()).toBeFalse()
+  })
+
+  it('keeps feature loading state true until the last overlapping update completes', () => {
+    const firstResponse$ = new Subject<any>()
+    const secondResponse$ = new Subject<any>()
+    devicesServiceSpy.setAmtFeatures.and.returnValues(firstResponse$, secondResponse$)
+
+    component.setAmtFeatures()
+    component.setAmtFeatures()
+
+    expect(component.isUpdatingFeatures()).toBeTrue()
+
+    firstResponse$.next({ redirection: true, status: 'ok' })
+    firstResponse$.complete()
+
+    expect(component.isUpdatingFeatures()).toBeTrue()
+
+    secondResponse$.next({ redirection: true, status: 'ok' })
+    secondResponse$.complete()
+
+    expect(component.isUpdatingFeatures()).toBeFalse()
+  })
+
+  it('stops tracking an in-flight feature update when the component is destroyed', () => {
+    const response$ = new Subject<any>()
+    devicesServiceSpy.setAmtFeatures.and.returnValue(response$)
+
+    component.setAmtFeatures()
+
+    expect(component.isUpdatingFeatures()).toBeTrue()
+
+    component.ngOnDestroy()
+
+    expect(component.isUpdatingFeatures()).toBeFalse()
+  })
 })

src/app/devices/general/general.component.ts

@@ -78,6 +78,7 @@ export class GeneralComponent implements OnInit, OnDestroy {
   })
 
   public isLoading = signal(true)
+  public isUpdatingFeatures = signal(false)
   public amtDHCPDNSSuffix: string | null = null
   public amtTrustedDNSSuffix: string | null = null
   public amtVersion: string | null = null
@@ -95,6 +96,7 @@ export class GeneralComponent implements OnInit, OnDestroy {
   public isCloudMode: boolean = environment.cloud
 
   private readonly destroy$ = new Subject<void>()
+  private pendingFeatureUpdates = 0
 
   ngOnInit(): void {
     forkJoin({
@@ -180,15 +182,18 @@ export class GeneralComponent implements OnInit, OnDestroy {
   }
 
   setAmtFeatures(): void {
-    this.isLoading.set(true)
+    this.pendingFeatureUpdates += 1
+    this.isUpdatingFeatures.set(true)
     this.devicesService
       .setAmtFeatures(this.deviceId(), {
         ...this.amtEnabledFeatures.getRawValue(),
         remoteErase: this.amtFeatures.remoteErase
       } as AMTFeaturesRequest)
       .pipe(
+        takeUntil(this.destroy$),
         finalize(() => {
-          this.isLoading.set(false)
+          this.pendingFeatureUpdates = Math.max(0, this.pendingFeatureUpdates - 1)
+          this.isUpdatingFeatures.set(this.pendingFeatureUpdates > 0)
         })
       )
       .subscribe({