385323565: (feat) disable general settings when testing in progress

modules/ui/src/app/pages/general-settings/general-settings.component.html

@@ -14,7 +14,13 @@
 limitations under the License.
 -->
 <div class="setting-drawer-content" *ngIf="viewModel$ | async as vm">
-  <div *ngIf="settingsDisable" class="settings-disabled-overlay"></div>
+  <app-callout
+    [type]="CalloutType.ErrorOutline"
+    *ngIf="settingsDisable"
+    action="Go to Testing tab"
+    (onAction)="navigateToRuntime()">
+    To change settings, you need to stop testing.
+  </app-callout>
   <form
     [formGroup]="settingForm"
     [class.setting-drawer-content-form-empty]="
@@ -40,7 +46,9 @@
           label="Device connection port"
           key="device"
           [options]="vm.deviceOptions">
-          <ng-container *ngTemplateOutlet="message"></ng-container>
+          <ng-container *ngIf="!settingsDisable">
+            <ng-container *ngTemplateOutlet="message"></ng-container>
+          </ng-container>
         </app-settings-dropdown>
         <app-settings-dropdown
           [controlName]="FormKey.INTERNET"
@@ -49,10 +57,12 @@
           label="Internet connection port"
           key="internet"
           [options]="vm.internetOptions">
-          <ng-container
-            *ngTemplateOutlet="
-              isInternetControlDisabled ? messageDisabled : message
-            "></ng-container>
+          <ng-container *ngIf="!settingsDisable">
+            <ng-container
+              *ngTemplateOutlet="
+                isInternetControlDisabled ? messageDisabled : message
+              "></ng-container>
+          </ng-container>
         </app-settings-dropdown>
       </ng-container>
       <mat-divider></mat-divider>
@@ -179,15 +189,14 @@
     </ng-container>
   </ng-template>
   <ng-template #messageReload>
-    <p class="message" [ngClass]="{ disabled: settingsDisable }">
+    <p class="message">
       If a port is missing from this list, you can
       <a
-        #reloadSettingLink
         (click)="reloadSetting()"
         (keydown.enter)="reloadSetting()"
         (keydown.space)="reloadSetting()"
         role="button"
-        [tabindex]="settingsDisable ? -1 : 0"
+        [tabindex]="1"
         class="message-link">
         Refresh
       </a>

modules/ui/src/app/pages/general-settings/general-settings.component.scss

@@ -34,6 +34,9 @@
   .setting-drawer-content-form-empty {
     grid-template-rows: repeat(2, auto) 1fr;
   }
+  ::ng-deep .callout-container {
+    margin: 10px 0;
+  }
 }
 
 .error-message-container {
@@ -71,28 +74,6 @@
   }
 }
 
-.settings-disabled-overlay {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  right: 0;
-  top: 75px;
-  bottom: 45px;
-  background-color: rgba(255, 255, 255, 0.7);
-  z-index: 2;
-}
-
-.disabled {
-  .message-link {
-    cursor: default;
-    pointer-events: none;
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-}
-
 .settings-drawer-header-button:not(.mat-mdc-button-disabled),
 .close-button:not(.mat-mdc-button-disabled),
 .save-button:not(.mat-mdc-button-disabled) {
@@ -126,6 +107,10 @@
     padding: 0 12px;
   }
 
+  .data-column {
+    display: flex;
+  }
+
   .setting-form-label,
   .setting-data {
     font-size: 16px;

modules/ui/src/app/pages/general-settings/general-settings.component.spec.ts

@@ -37,30 +37,39 @@ import {
 import { SettingsDropdownComponent } from './components/settings-dropdown/settings-dropdown.component';
 import { CalloutComponent } from '../../components/callout/callout.component';
 import { SpinnerComponent } from '../../components/spinner/spinner.component';
+import { TestRunService } from '../../services/test-run.service';
+import { MOCK_PROGRESS_DATA_COMPLIANT } from '../../mocks/testrun.mock';
 
 describe('GeneralSettingsComponent', () => {
   let component: GeneralSettingsComponent;
   let fixture: ComponentFixture<GeneralSettingsComponent>;
   let compiled: HTMLElement;
   let mockLoaderService: SpyObj<LoaderService>;
+  let mockTestRunService: SpyObj<TestRunService>;
   let mockSettingsStore: SpyObj<GeneralSettingsStore>;
 
   beforeEach(async () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (<any>window).gtag = jasmine.createSpy('gtag');
     mockLoaderService = jasmine.createSpyObj('LoaderService', ['setLoading']);
+    mockTestRunService = jasmine.createSpyObj('TesRunService', [
+      'testrunInProgress',
+    ]);
     mockSettingsStore = jasmine.createSpyObj('SettingsStore', [
       'getInterfaces',
       'updateSystemConfig',
       'setIsSubmitting',
       'setDefaultFormValues',
       'getSystemConfig',
       'viewModel$',
+      'systemStatus$',
     ]);
+    mockSettingsStore.systemStatus$ = of(MOCK_PROGRESS_DATA_COMPLIANT);
 
     await TestBed.configureTestingModule({
       providers: [
         { provide: LoaderService, useValue: mockLoaderService },
+        { provide: TestRunService, useValue: mockTestRunService },
         { provide: GeneralSettingsStore, useValue: mockSettingsStore },
         provideMockStore(),
       ],
@@ -155,19 +164,6 @@ describe('GeneralSettingsComponent', () => {
 
       expect(saveBtn.disabled).toBeTrue();
     });
-
-    it('should disable "Refresh" link when settingDisable', () => {
-      component.settingsDisable = true;
-
-      const refreshLink = compiled.querySelector(
-        '.message-link'
-      ) as HTMLAnchorElement;
-
-      refreshLink.click();
-
-      expect(refreshLink.hasAttribute('aria-disabled')).toBeTrue();
-      expect(mockLoaderService.setLoading).not.toHaveBeenCalled();
-    });
   });
 
   describe('#saveSetting', () => {

modules/ui/src/app/pages/general-settings/general-settings.component.ts

@@ -16,11 +16,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
-  Input,
   OnDestroy,
   OnInit,
-  viewChild,
   inject,
 } from '@angular/core';
 import {
@@ -54,6 +51,9 @@ import { MatDividerModule } from '@angular/material/divider';
 import { CalloutComponent } from '../../components/callout/callout.component';
 import { CommonModule } from '@angular/common';
 import { MatCheckbox } from '@angular/material/checkbox';
+import { TestRunService } from '../../services/test-run.service';
+import { Router } from '@angular/router';
+import { Routes } from '../../model/routes';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 declare const gtag: Function;
@@ -95,13 +95,11 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
   private settingsStore = inject(GeneralSettingsStore);
   private readonly loaderService = inject(LoaderService);
 
-  readonly reloadSettingLink = viewChild<ElementRef>('reloadSettingLink');
-
   private isSettingsDisable = false;
   get settingsDisable(): boolean {
     return this.isSettingsDisable;
   }
-  @Input() set settingsDisable(value: boolean) {
+  set settingsDisable(value: boolean) {
     this.isSettingsDisable = value;
     if (value) {
       this.disableSettings();
@@ -113,9 +111,12 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
   public readonly EventType = EventType;
   public readonly FormKey = FormKey;
   public settingForm!: FormGroup;
+  public readonly Routes = Routes;
   viewModel$ = this.settingsStore.viewModel$;
 
   private destroy$: Subject<boolean> = new Subject<boolean>();
+  private testRunService = inject(TestRunService);
+  private route = inject(Router);
 
   get deviceControl(): FormControl {
     return this.settingForm.get(FormKey.DEVICE) as FormControl;
@@ -154,12 +155,22 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     this.settingsStore.getInterfaces();
     this.getSystemConfig();
     this.setDefaultFormValues();
+    this.settingsStore.systemStatus$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(systemStatus => {
+        if (systemStatus?.status) {
+          this.settingsDisable = this.testRunService.testrunInProgress(
+            systemStatus.status
+          );
+        }
+      });
+  }
+
+  navigateToRuntime(): void {
+    this.route.navigate([Routes.Testing]);
   }
 
   reloadSetting(): void {
-    if (this.settingsDisable) {
-      return;
-    }
     this.showLoading();
     this.getSystemInterfaces();
     this.getSystemConfig();
@@ -177,15 +188,10 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
 
   private disableSettings(): void {
     this.settingForm?.disable();
-    this.reloadSettingLink()?.nativeElement.setAttribute(
-      'aria-disabled',
-      'true'
-    );
   }
 
   private enableSettings(): void {
     this.settingForm?.enable();
-    this.reloadSettingLink()?.nativeElement.removeAttribute('aria-disabled');
   }
 
   private createSettingForm() {

modules/ui/src/app/pages/general-settings/general-settings.store.ts

@@ -31,6 +31,7 @@ import { AppState } from '../../store/state';
 import {
   selectAdapters,
   selectHasConnectionSettings,
+  selectSystemStatus,
 } from '../../store/selectors';
 import { FormControl, FormGroup } from '@angular/forms';
 
@@ -79,6 +80,7 @@ export class GeneralSettingsStore extends ComponentStore<SettingsComponentState>
   );
 
   private adapters$ = this.store.select(selectAdapters);
+  systemStatus$ = this.store.select(selectSystemStatus);
   private isSubmitting$ = this.select(state => state.isSubmitting);
   private isLessThanOneInterfaces$ = this.select(
     state => state.isLessThanOneInterface