diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index 9ea5c9e3f..969824523 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -179,6 +179,7 @@

Testrun

class="settings-drawer"> diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts index 6b5477a48..e108a96f9 100644 --- a/modules/ui/src/app/app.component.spec.ts +++ b/modules/ui/src/app/app.component.spec.ts @@ -93,6 +93,7 @@ describe('AppComponent', () => { 'setIsOpenStartTestrun', 'fetchDevices', 'getTestModules', + 'testrunInProgress', ]); mockFocusManagerService = jasmine.createSpyObj('mockFocusManagerService', [ @@ -654,10 +655,8 @@ describe('AppComponent', () => { template: '
', }) class FakeGeneralSettingsComponent { - @Input() interfaces = []; - @Input() hasConnectionSettings = false; + @Input() settingsDisable = false; @Output() closeSettingEvent = new EventEmitter(); - @Output() reloadInterfacesEvent = new EventEmitter(); getSystemInterfaces = () => {}; } diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts index 6b0fe8f79..8b1e87cd0 100644 --- a/modules/ui/src/app/app.component.ts +++ b/modules/ui/src/app/app.component.ts @@ -32,6 +32,7 @@ import { import { appFeatureKey } from './store/reducers'; import { GeneralSettingsComponent } from './pages/settings/general-settings.component'; import { AppStore } from './app.store'; +import { TestRunService } from './services/test-run.service'; const DEVICES_LOGO_URL = '/assets/icons/devices.svg'; const DEVICES_RUN_URL = '/assets/icons/device_run.svg'; @@ -65,6 +66,7 @@ export class AppComponent { private store: Store, private state: State, private readonly focusManagerService: FocusManagerService, + private testRunService: TestRunService, public appStore: AppStore ) { this.appStore.getDevices(); @@ -147,4 +149,8 @@ export class AppComponent { consentShown() { this.appStore.setContent(); } + + isTestrunInProgress(status?: string) { + return this.testRunService.testrunInProgress(status); + } } diff --git a/modules/ui/src/app/pages/settings/general-settings.component.html b/modules/ui/src/app/pages/settings/general-settings.component.html index 2e77950a6..36849b42e 100644 --- a/modules/ui/src/app/pages/settings/general-settings.component.html +++ b/modules/ui/src/app/pages/settings/general-settings.component.html @@ -25,6 +25,7 @@

System settings

+
System settings [options]="vm.internetOptions"> -

+

If a port is missing from this list, you can Refresh @@ -105,7 +107,9 @@

System settings

class="save-button" color="primary" (click)="saveSetting()" - [disabled]="!isFormValues || vm.isLessThanOneInterface"> + [disabled]=" + !isFormValues || vm.isLessThanOneInterface || settingsDisable + "> Save
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.scss b/modules/ui/src/app/pages/settings/general-settings.component.scss index c1f2e259c..6bec40683 100644 --- a/modules/ui/src/app/pages/settings/general-settings.component.scss +++ b/modules/ui/src/app/pages/settings/general-settings.component.scss @@ -119,3 +119,25 @@ } } } + +.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; + } + } +} diff --git a/modules/ui/src/app/pages/settings/general-settings.component.spec.ts b/modules/ui/src/app/pages/settings/general-settings.component.spec.ts index 097cc2f0e..8095468fd 100644 --- a/modules/ui/src/app/pages/settings/general-settings.component.spec.ts +++ b/modules/ui/src/app/pages/settings/general-settings.component.spec.ts @@ -116,6 +116,47 @@ describe('GeneralSettingsComponent', () => { expect(mockLoaderService.setLoading).toHaveBeenCalledWith(true); }); + describe('#settingsDisable', () => { + it('should disable setting form when get settingDisable as true ', () => { + spyOn(component.settingForm, 'disable'); + + component.settingsDisable = true; + + expect(component.settingForm.disable).toHaveBeenCalled(); + }); + + it('should enable setting form when get settingDisable as false ', () => { + spyOn(component.settingForm, 'enable'); + + component.settingsDisable = false; + + expect(component.settingForm.enable).toHaveBeenCalled(); + }); + + it('should disable "Save" button when get settingDisable as true', () => { + component.settingsDisable = true; + + const saveBtn = compiled.querySelector( + '.save-button' + ) as HTMLButtonElement; + + 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('#closeSetting', () => { beforeEach(() => { component.ngOnInit(); diff --git a/modules/ui/src/app/pages/settings/general-settings.component.ts b/modules/ui/src/app/pages/settings/general-settings.component.ts index f9fe7eeeb..c0e957ded 100644 --- a/modules/ui/src/app/pages/settings/general-settings.component.ts +++ b/modules/ui/src/app/pages/settings/general-settings.component.ts @@ -15,10 +15,13 @@ */ import { Component, + ElementRef, EventEmitter, + Input, OnDestroy, OnInit, Output, + ViewChild, } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { Subject, takeUntil, tap } from 'rxjs'; @@ -38,7 +41,17 @@ import { LoaderService } from '../../services/loader.service'; providers: [SettingsStore], }) export class GeneralSettingsComponent implements OnInit, OnDestroy { + @ViewChild('reloadSettingLink') public reloadSettingLink!: ElementRef; @Output() closeSettingEvent = new EventEmitter(); + + private isSettingsDisable = false; + get settingsDisable(): boolean { + return this.isSettingsDisable; + } + @Input() set settingsDisable(value: boolean) { + this.isSettingsDisable = value; + value ? this.disableSettings() : this.enableSettings(); + } public readonly CalloutType = CalloutType; public readonly EventType = EventType; public readonly FormKey = FormKey; @@ -88,6 +101,9 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy { } reloadSetting(): void { + if (this.settingsDisable) { + return; + } this.showLoading(); this.getSystemInterfaces(); this.settingsStore.getSystemConfig(); @@ -111,6 +127,16 @@ 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() { this.settingForm = this.fb.group( { diff --git a/modules/ui/src/app/pages/testrun/progress.component.html b/modules/ui/src/app/pages/testrun/progress.component.html index a2e17567c..26143cb58 100644 --- a/modules/ui/src/app/pages/testrun/progress.component.html +++ b/modules/ui/src/app/pages/testrun/progress.component.html @@ -17,7 +17,7 @@ }}