382095919: (feat) add settings basic page

modules/ui/src/app/app-routing.module.ts

@@ -19,8 +19,14 @@ import { DevicesComponent } from './pages/devices/devices.component';
 import { CanDeactivateGuard } from './guards/can-deactivate.guard';
 import { TestrunComponent } from './pages/testrun/testrun.component';
 import { RiskAssessmentComponent } from './pages/risk-assessment/risk-assessment.component';
+import { SettingsComponent } from './pages/settings/settings.component';
 
 export const routes: Routes = [
+  {
+    path: 'settings',
+    component: SettingsComponent,
+    title: 'Testrun - Settings',
+  },
   {
     path: 'testing',
     component: TestrunComponent,

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

@@ -98,9 +98,12 @@ <h1 class="main-heading">Testrun</h1>
             mat-icon-button
             aria-label="System settings"
             matTooltip="Settings"
-            (click)="
-              openGeneralSettings(true, isTestrunInProgress(vm.systemStatus))
-            ">
+            routerLink="{{ Routes.Settings }}"
+            routerLinkActive="app-sidebar-button-active"
+            (keydown.enter)="onNavigationClick()">
+            <!--            (click)="-->
+            <!--              openGeneralSettings(true, isTestrunInProgress(vm.systemStatus))-->
+            <!--            ">-->
             <mat-icon>tune</mat-icon>
           </button>
 
@@ -275,11 +278,11 @@ <h1 class="main-heading">Testrun</h1>
     position="end"
     autoFocus="#setting-panel-close-button"
     class="settings-drawer">
-    <app-settings
+    <app-general-settings
       #settings
       [settingsDisable]="isTestrunInProgress(vm.systemStatus)"
       (closeSettingEvent)="closeSetting(vm.hasDevices)">
-    </app-settings>
+    </app-general-settings>
   </mat-drawer>
 
   <mat-drawer

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

@@ -73,7 +73,7 @@ import { WifiComponent } from './components/wifi/wifi.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Profile } from './model/profile';
 import { TestrunStatus } from './model/testrun-status';
-import { SettingsComponent } from './pages/settings/settings.component';
+import { GeneralSettingsComponent } from './pages/general-settings/general-settings.component';
 import { SpinnerComponent } from './components/spinner/spinner.component';
 import { ShutdownAppComponent } from './components/shutdown-app/shutdown-app.component';
 import { TestingCompleteComponent } from './components/testing-complete/testing-complete.component';
@@ -153,6 +153,7 @@ describe('AppComponent', () => {
         FakeTestingCompleteComponent,
         RouterTestingModule.withRoutes([
           { path: 'devices', children: [] },
+          { path: 'settings', children: [] },
           { path: 'testing', children: [] },
           { path: 'reports', children: [] },
         ]),
@@ -190,7 +191,7 @@ describe('AppComponent', () => {
     }).overrideComponent(AppComponent, {
       remove: {
         imports: [
-          SettingsComponent,
+          GeneralSettingsComponent,
           SpinnerComponent,
           ShutdownAppComponent,
           TestingCompleteComponent,
@@ -368,15 +369,16 @@ describe('AppComponent', () => {
     expect(settings.getSystemConfig).toHaveBeenCalled();
   });
 
-  it('should call settingsDrawer open on openSetting', fakeAsync(() => {
+  it('should navigate to the settings when "settings" button is clicked', fakeAsync(() => {
     fixture.detectChanges();
-    const settingsDrawer = component.settingsDrawer();
-    spyOn(settingsDrawer, 'open');
 
-    component.openSetting(false);
+    const settingsButton = compiled.querySelector(
+      '.app-toolbar-button-general-settings'
+    ) as HTMLButtonElement;
+    settingsButton?.click();
     tick();
 
-    expect(settingsDrawer.open).toHaveBeenCalledTimes(1);
+    expect(router.url).toBe(Routes.Settings);
   }));
 
   it('should announce settingsDrawer disabled on openSetting and settings are disabled', fakeAsync(() => {
@@ -394,20 +396,6 @@ describe('AppComponent', () => {
     );
   }));
 
-  it('should call settingsDrawer open on click settings button', () => {
-    fixture.detectChanges();
-
-    const settingsBtn = compiled.querySelector(
-      '.app-toolbar-button-general-settings'
-    ) as HTMLButtonElement;
-    const settingsDrawer = component.settingsDrawer();
-    spyOn(settingsDrawer, 'open');
-
-    settingsBtn.click();
-
-    expect(settingsDrawer.open).toHaveBeenCalledTimes(1);
-  });
-
   it('should have spinner', () => {
     const spinner = compiled.querySelector('app-spinner');
 
@@ -838,7 +826,7 @@ describe('AppComponent', () => {
 });
 
 @Component({
-  selector: 'app-settings',
+  selector: 'app-general-settings',
   template: '<div></div>',
 })
 class FakeGeneralSettingsComponent {

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

@@ -32,7 +32,7 @@ import { FocusManagerService } from './services/focus-manager.service';
 import { State, Store } from '@ngrx/store';
 import { AppState } from './store/state';
 import { setIsOpenAddDevice } from './store/actions';
-import { SettingsComponent } from './pages/settings/settings.component';
+import { GeneralSettingsComponent } from './pages/general-settings/general-settings.component';
 import { AppStore } from './app.store';
 import { TestRunService } from './services/test-run.service';
 import { CdkTrapFocus, LiveAnnouncer } from '@angular/cdk/a11y';
@@ -92,7 +92,7 @@ const QUALIFICATION_URL = '/assets/icons/qualification.svg';
     CertificatesComponent,
     WifiComponent,
     TestingCompleteComponent,
-    SettingsComponent,
+    GeneralSettingsComponent,
     RouterModule,
     CommonModule,
   ],
@@ -118,7 +118,7 @@ export class AppComponent implements AfterViewInit {
   readonly certDrawer = viewChild.required<MatDrawer>('certDrawer');
   readonly toggleSettingsBtn =
     viewChild.required<HTMLButtonElement>('toggleSettingsBtn');
-  readonly settings = viewChild.required<SettingsComponent>('settings');
+  readonly settings = viewChild.required<GeneralSettingsComponent>('settings');
   viewModel$ = this.appStore.viewModel$;
 
   readonly riskAssessmentLink = viewChild<ElementRef>('riskAssessmentLink');

modules/ui/src/app/model/routes.ts

@@ -16,6 +16,7 @@
 
 export enum Routes {
   Devices = '/devices',
+  Settings = '/settings',
   Testing = '/testing',
   Reports = '/reports',
   RiskAssessment = '/risk-assessment',

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

@@ -0,0 +1,116 @@
+<!--
+Copyright 2023 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="settings-drawer-header">
+  <h2 class="settings-drawer-header-title">System settings</h2>
+  <button
+    (click)="closeSetting(EventType.Close)"
+    aria-label="close"
+    id="setting-panel-close-button"
+    class="settings-drawer-header-button"
+    mat-button>
+    <mat-icon class="close-button-icon" svgIcon="close"></mat-icon>
+  </button>
+</div>
+<div class="setting-drawer-content" *ngIf="viewModel$ | async as vm">
+  <div *ngIf="settingsDisable" class="settings-disabled-overlay"></div>
+  <form
+    [formGroup]="settingForm"
+    [class.setting-drawer-content-form-empty]="
+      (vm.interfaces | keyvalue).length === 0
+    ">
+    <section class="setting-drawer-content-inputs">
+      <ng-container
+        *ngIf="(vm.interfaces | keyvalue).length > 0; else warning_message">
+        <app-settings-dropdown
+          [controlName]="FormKey.DEVICE"
+          groupLabel="Device port"
+          description="Port where IoT device is connected for testing"
+          label="Device connection port"
+          key="device"
+          [options]="vm.deviceOptions">
+        </app-settings-dropdown>
+        <app-settings-dropdown
+          [controlName]="FormKey.INTERNET"
+          groupLabel="Internet port"
+          description="Port used for internet connection"
+          label="Internet connection port"
+          key="internet"
+          [options]="vm.internetOptions">
+        </app-settings-dropdown>
+      </ng-container>
+      <p class="message" [ngClass]="{ disabled: settingsDisable }">
+        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"
+          class="message-link">
+          Refresh
+        </a>
+        the System settings
+      </p>
+      <app-settings-dropdown
+        [controlName]="FormKey.LOG_LEVEL"
+        groupLabel="Log level"
+        description="Logging level of details"
+        label="Log level"
+        key="log-level"
+        [options]="vm.logLevelOptions">
+      </app-settings-dropdown>
+      <app-settings-dropdown
+        [controlName]="FormKey.MONITOR_PERIOD"
+        groupLabel="Monitoring Time"
+        description="Time period for Testrun to observe the device before starting tests"
+        label="Monitoring period"
+        key="monitoring-period"
+        [options]="vm.monitoringPeriodOptions">
+      </app-settings-dropdown>
+    </section>
+    <mat-error
+      *ngIf="vm.isSubmitting && isFormError"
+      class="error-message-container">
+      <span>Both interfaces must have different values</span>
+    </mat-error>
+    <div class="setting-drawer-footer">
+      <button
+        mat-raised-button
+        (click)="closeSetting(EventType.Close)"
+        [disabled]="!isFormValues || vm.hasConnectionSettings !== true"
+        class="close-button">
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        class="save-button"
+        color="primary"
+        (click)="saveSetting()"
+        [disabled]="
+          !isFormValues || vm.isLessThanOneInterface || settingsDisable
+        ">
+        Save
+      </button>
+    </div>
+  </form>
+  <ng-template #warning_message>
+    <app-callout [type]="CalloutType.Warning">
+      Warning! No ports detected.
+    </app-callout>
+  </ng-template>
+</div>
+<app-spinner class="connection-settings-spinner"></app-spinner>