Feature/317232143

modules/ui/src/app/app.component.html

@@ -86,6 +86,20 @@ <h1 class="main-heading">Testrun</h1>
       </button>
     </mat-toolbar>
     <div class="app-content-main" role="main" id="main">
+      <app-callout [type]="CalloutType.Error" *ngIf="(error$ | async) === true">
+        Selected port is missing! Please define a valid one using
+        <a
+          (click)="openSetting()"
+          (keydown.enter)="openSetting()"
+          (keydown.space)="openSetting()"
+          aria-label="The Connection settings link opens the panel. No redirect to other pages."
+          tabindex="0"
+          role="link"
+          class="message-link"
+          >Settings</a
+        >
+        panel.
+      </app-callout>
       <app-callout
         [type]="CalloutType.Info"
         *ngIf="(hasConnectionSetting$ | async) === false">
@@ -153,6 +167,7 @@ <h1 class="main-heading">Testrun</h1>
     class="settings-drawer">
     <app-general-settings
       [interfaces]="(interfaces | async) ?? {}"
+      [hasConnectionSettings]="(hasConnectionSetting$ | async) ?? false"
       (closeSettingEvent)="closeSetting()"
       (reloadInterfacesEvent)="reloadInterfaces()">
     </app-general-settings>

modules/ui/src/app/app.component.spec.ts

@@ -86,7 +86,6 @@ describe('AppComponent', () => {
       'setIsOpenAddDevice',
       'systemStatus$',
       'isTestrunStarted$',
-      'hasConnectionSetting$',
       'setIsOpenStartTestrun',
     ]);
 
@@ -98,10 +97,8 @@ describe('AppComponent', () => {
     mockService.getDevices.and.returnValue(
       new BehaviorSubject<Device[] | null>([device])
     );
-    mockService.getSystemInterfaces.and.returnValue(of({}));
     (mockService.systemStatus$ as unknown) = of({});
     mockService.isTestrunStarted$ = of(true);
-    mockService.hasConnectionSetting$ = of(true);
 
     TestBed.configureTestingModule({
       imports: [
@@ -146,6 +143,7 @@ describe('AppComponent', () => {
     fixture = TestBed.createComponent(AppComponent);
     component = fixture.componentInstance;
     router = TestBed.get(Router);
+    component.hasConnectionSetting$ = of(true);
     fixture.detectChanges();
     compiled = fixture.nativeElement as HTMLElement;
     spyOn(store, 'dispatch').and.callFake(() => {});
@@ -359,7 +357,7 @@ describe('AppComponent', () => {
   describe('Callout component visibility', () => {
     describe('with no connection settings', () => {
       beforeEach(() => {
-        mockService.hasConnectionSetting$ = of(false);
+        component.hasConnectionSetting$ = of(false);
         component.ngOnInit();
         fixture.detectChanges();
       });
@@ -399,7 +397,7 @@ describe('AppComponent', () => {
 
     describe('with system status as "Idle"', () => {
       beforeEach(() => {
-        mockService.hasConnectionSetting$ = of(true);
+        component.hasConnectionSetting$ = of(true);
         mockService.getDevices.and.returnValue(
           new BehaviorSubject<Device[] | null>([device])
         );
@@ -553,6 +551,36 @@ describe('AppComponent', () => {
         expect(callout).toBeNull();
       });
     });
+
+    describe('error', () => {
+      describe('with error', () => {
+        beforeEach(() => {
+          component.error$ = of(true);
+          component.ngOnInit();
+          fixture.detectChanges();
+        });
+        it('should have callout component', () => {
+          const callout = compiled.querySelector('app-callout');
+          const calloutContent = callout?.innerHTML.trim();
+
+          expect(callout).toBeTruthy();
+          expect(calloutContent).toContain('Selected port is missing!');
+        });
+      });
+
+      describe('with no error', () => {
+        beforeEach(() => {
+          component.error$ = of(false);
+          component.ngOnInit();
+          fixture.detectChanges();
+        });
+        it('should not have callout component', () => {
+          const callout = compiled.querySelector('app-callout');
+
+          expect(callout).toBeNull();
+        });
+      });
+    });
   });
 
   it('should not call toggleSettingsBtn focus on closeSetting when device length is 0', async () => {
@@ -579,6 +607,7 @@ describe('AppComponent', () => {
 })
 class FakeGeneralSettingsComponent {
   @Input() interfaces = [];
+  @Input() hasConnectionSettings = false;
   @Output() closeSettingEvent = new EventEmitter<void>();
   @Output() reloadInterfacesEvent = new EventEmitter<void>();
 }

modules/ui/src/app/app.component.ts

@@ -18,21 +18,26 @@ import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MatDrawer } from '@angular/material/sidenav';
 import { SystemInterfaces, TestRunService } from './services/test-run.service';
-import { Observable } from 'rxjs/internal/Observable';
+import { Observable } from 'rxjs';
 import { Device } from './model/device';
 import { TestrunStatus, StatusOfTestrun } from './model/testrun-status';
 import { Router } from '@angular/router';
 import { LoaderService } from './services/loader.service';
 import { CalloutType } from './model/callout-type';
-import { tap } from 'rxjs/internal/operators/tap';
-import { shareReplay } from 'rxjs/internal/operators/shareReplay';
+import { tap, shareReplay } from 'rxjs/operators';
 import { Routes } from './model/routes';
 import { FocusManagerService } from './services/focus-manager.service';
 import { State, Store } from '@ngrx/store';
 import { AppState } from './store/state';
-import { selectInterfaces, selectMenuOpened } from './store/selectors';
+import {
+  selectError,
+  selectHasConnectionSettings,
+  selectInterfaces,
+  selectMenuOpened,
+} from './store/selectors';
 import {
   fetchInterfaces,
+  fetchSystemConfig,
   toggleMenu,
   updateFocusNavigation,
 } from './store/actions';
@@ -57,14 +62,17 @@ export class AppComponent implements OnInit {
   devices$!: Observable<Device[] | null>;
   systemStatus$!: Observable<TestrunStatus>;
   isTestrunStarted$!: Observable<boolean>;
-  hasConnectionSetting$!: Observable<boolean | null>;
+  hasConnectionSetting$: Observable<boolean | null> = this.store.select(
+    selectHasConnectionSettings
+  );
   isStatusLoaded = false;
   isConnectionSettingsLoaded = false;
   private devicesLength = 0;
   private openedSettingFromToggleBtn = true;
   isMenuOpen: Observable<boolean> = this.store.select(selectMenuOpened);
   interfaces: Observable<SystemInterfaces> =
     this.store.select(selectInterfaces);
+  error$: Observable<boolean> = this.store.select(selectError);
 
   @ViewChild('settingsDrawer') public settingsDrawer!: MatDrawer;
   @ViewChild('toggleSettingsBtn') public toggleSettingsBtn!: HTMLButtonElement;
@@ -122,14 +130,19 @@ export class AppComponent implements OnInit {
 
     this.isTestrunStarted$ = this.testRunService.isTestrunStarted$;
 
-    this.hasConnectionSetting$ = this.testRunService.hasConnectionSetting$.pipe(
+    this.hasConnectionSetting$.pipe(
       tap(result => {
         if (result !== null) {
           this.isConnectionSettingsLoaded = true;
         }
       }),
       shareReplay({ refCount: true, bufferSize: 1 })
     );
+
+    this.getSystemInterfaces();
+
+    this.store.dispatch(fetchSystemConfig());
+    //this.store.dispatch(fetchSystemConfigAndInterfaces());
   }
 
   navigateToDeviceRepository(): void {
@@ -182,7 +195,6 @@ export class AppComponent implements OnInit {
 
   async openGeneralSettings(openSettingFromToggleBtn: boolean) {
     this.openedSettingFromToggleBtn = openSettingFromToggleBtn;
-    this.getSystemInterfaces();
     await this.settingsDrawer.open();
   }
 

modules/ui/src/app/components/callout/callout.component.scss

@@ -21,10 +21,15 @@
   width: 100%;
 }
 
-:host:has(.callout-container.info) {
+:host:has(.callout-container.info),
+:host:has(.callout-container.error) {
   position: absolute;
 }
 
+:host + ::ng-deep app-callout {
+  top: 60px;
+}
+
 .callout-container {
   display: flex;
   box-sizing: border-box;
@@ -58,6 +63,15 @@
   }
 }
 
+.callout-container.error {
+  margin: 24px 32px;
+  background-color: $red-50;
+
+  .callout-icon {
+    color: $red-700;
+  }
+}
+
 .callout-context {
   margin: 0;
   padding: 6px 0;

modules/ui/src/app/model/callout-type.ts

@@ -16,4 +16,5 @@
 export enum CalloutType {
   Info = 'info',
   Warning = 'warning_amber',
+  Error = 'error',
 }

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

@@ -140,7 +140,7 @@ <h2 class="settings-drawer-header-title">Connection settings</h2>
       <button
         mat-flat-button
         (click)="closeSetting(EventType.Close)"
-        [disabled]="!isFormValues || (hasConnectionSetting$ | async) !== true"
+        [disabled]="!isFormValues || hasConnectionSettings !== true"
         class="close-button">
         Cancel
       </button>