diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.html b/modules/ui/src/app/pages/general-settings/general-settings.component.html index e1825acc4..54ba54970 100644 --- a/modules/ui/src/app/pages/general-settings/general-settings.component.html +++ b/modules/ui/src/app/pages/general-settings/general-settings.component.html @@ -14,7 +14,13 @@ limitations under the License. -->
-
+ + To change settings, you need to stop testing. +
- + + + - + + + @@ -179,15 +189,14 @@ -

+

If a port is missing from this list, you can Refresh diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.scss b/modules/ui/src/app/pages/general-settings/general-settings.component.scss index 7d9cb7c50..4fc8a7308 100644 --- a/modules/ui/src/app/pages/general-settings/general-settings.component.scss +++ b/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; diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.spec.ts b/modules/ui/src/app/pages/general-settings/general-settings.component.spec.ts index 7e2fdcbe0..ac71f0903 100644 --- a/modules/ui/src/app/pages/general-settings/general-settings.component.spec.ts +++ b/modules/ui/src/app/pages/general-settings/general-settings.component.spec.ts @@ -37,18 +37,24 @@ 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; let compiled: HTMLElement; let mockLoaderService: SpyObj; + let mockTestRunService: SpyObj; let mockSettingsStore: SpyObj; beforeEach(async () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any (window).gtag = jasmine.createSpy('gtag'); mockLoaderService = jasmine.createSpyObj('LoaderService', ['setLoading']); + mockTestRunService = jasmine.createSpyObj('TesRunService', [ + 'testrunInProgress', + ]); mockSettingsStore = jasmine.createSpyObj('SettingsStore', [ 'getInterfaces', 'updateSystemConfig', @@ -56,11 +62,14 @@ describe('GeneralSettingsComponent', () => { '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', () => { diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.ts b/modules/ui/src/app/pages/general-settings/general-settings.component.ts index 7f0b99f25..639fc9cbd 100644 --- a/modules/ui/src/app/pages/general-settings/general-settings.component.ts +++ b/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('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 = new Subject(); + 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() { diff --git a/modules/ui/src/app/pages/general-settings/general-settings.store.ts b/modules/ui/src/app/pages/general-settings/general-settings.store.ts index 56e458187..2256eee1f 100644 --- a/modules/ui/src/app/pages/general-settings/general-settings.store.ts +++ b/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 ); 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