google · OlgaMardvilko · Dec 17, 2024 · Dec 16, 2024
diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html
@@ -91,9 +91,6 @@ <h1 class="main-heading">Testrun</h1>
             routerLink="{{ Routes.Settings }}"
             routerLinkActive="app-sidebar-button-active"
             (keydown.enter)="onNavigationClick()">
-            <!--            (click)="-->
-            <!--              openGeneralSettings(true, isTestrunInProgress(vm.systemStatus))-->
-            <!--            ">-->
             <mat-icon>tune</mat-icon>
           </button>
 
@@ -125,13 +122,9 @@ <h1 class="main-heading">Testrun</h1>
                 Selected port is missing! Please define a valid one using
               </ng-template>
               <a
-                (click)="openSetting(isTestrunInProgress(vm.systemStatus))"
-                (keydown.enter)="
-                  openSetting(isTestrunInProgress(vm.systemStatus))
-                "
-                (keydown.space)="
-                  openSetting(isTestrunInProgress(vm.systemStatus))
-                "
+                (click)="navigateToSettings()"
+                (keydown.enter)="navigateToSettings()"
+                (keydown.space)="navigateToSettings()"
                 aria-label="The System settings link opens the panel. No redirect to other pages."
                 tabindex="0"
                 role="link"
@@ -173,13 +166,9 @@ <h1 class="main-heading">Testrun</h1>
             *ngIf="vm.hasConnectionSettings === false">
             Step 1: To perform a device test, please, select ports in
             <a
-              (click)="openSetting(isTestrunInProgress(vm.systemStatus))"
-              (keydown.enter)="
-                openSetting(isTestrunInProgress(vm.systemStatus))
-              "
-              (keydown.space)="
-                openSetting(isTestrunInProgress(vm.systemStatus))
-              "
+              (click)="navigateToSettings()"
+              (keydown.enter)="navigateToSettings()"
+              (keydown.space)="navigateToSettings()"
               aria-label="The System settings link opens the panel. No redirect to other pages."
               tabindex="0"
               role="link"
@@ -262,19 +251,6 @@ <h1 class="main-heading">Testrun</h1>
     </mat-drawer-content>
   </mat-drawer-container>
 
-  <mat-drawer
-    #settingsDrawer
-    mode="over"
-    position="end"
-    autoFocus="#setting-panel-close-button"
-    class="settings-drawer">
-    <app-general-settings
-      #settings
-      [settingsDisable]="isTestrunInProgress(vm.systemStatus)"
-      (closeSettingEvent)="closeSetting(vm.hasDevices)">
-    </app-general-settings>
-  </mat-drawer>
-
   <app-testing-complete
     *ngIf="vm.isTestingComplete"
     [data]="vm.testrunStatus"

diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts
@@ -72,7 +72,6 @@ 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 { 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';
@@ -129,7 +128,6 @@ describe('AppComponent', () => {
 
     TestBed.configureTestingModule({
       imports: [
-        FakeGeneralSettingsComponent,
         AppComponent,
         RouterTestingModule,
         HttpClientTestingModule,
@@ -187,7 +185,6 @@ describe('AppComponent', () => {
     }).overrideComponent(AppComponent, {
       remove: {
         imports: [
-          GeneralSettingsComponent,
           SpinnerComponent,
           ShutdownAppComponent,
           TestingCompleteComponent,
@@ -196,7 +193,6 @@ describe('AppComponent', () => {
       },
       add: {
         imports: [
-          FakeGeneralSettingsComponent,
           FakeSpinnerComponent,
           FakeShutdownAppComponent,
           FakeVersionComponent,
@@ -311,60 +307,6 @@ describe('AppComponent', () => {
     expect(router.url).toBe(Routes.Reports);
   }));
 
-  it('should call toggleSettingsBtn focus when settingsDrawer close on closeSetting', fakeAsync(() => {
-    fixture.detectChanges();
-
-    spyOn(component.settingsDrawer(), 'close').and.returnValue(
-      Promise.resolve('close')
-    );
-    spyOn(component.toggleSettingsBtn(), 'focus');
-
-    component.closeSetting(true);
-    tick();
-
-    component
-      .settingsDrawer()
-      .close()
-      .then(() => {
-        expect(component.toggleSettingsBtn().focus).toHaveBeenCalled();
-      });
-  }));
-
-  it('should call focusFirstElementInContainer if settingsDrawer opened not from toggleBtn', fakeAsync(() => {
-    fixture.detectChanges();
-
-    spyOn(component.settingsDrawer(), 'close').and.returnValue(
-      Promise.resolve('close')
-    );
-
-    component.openGeneralSettings(false, false);
-    tick();
-    component.closeSetting(false);
-    flush();
-
-    component
-      .settingsDrawer()
-      .close()
-      .then(() => {
-        expect(
-          mockFocusManagerService.focusFirstElementInContainer
-        ).toHaveBeenCalled();
-      });
-  }));
-
-  it('should update interfaces and config', () => {
-    fixture.detectChanges();
-
-    const settings = component.settings();
-    spyOn(settings, 'getSystemInterfaces');
-    spyOn(settings, 'getSystemConfig');
-
-    component.openGeneralSettings(false, false);
-
-    expect(settings.getSystemInterfaces).toHaveBeenCalled();
-    expect(settings.getSystemConfig).toHaveBeenCalled();
-  });
-
   it('should navigate to the settings when "settings" button is clicked', fakeAsync(() => {
     fixture.detectChanges();
 
@@ -377,21 +319,6 @@ describe('AppComponent', () => {
     expect(router.url).toBe(Routes.Settings);
   }));
 
-  it('should announce settingsDrawer disabled on openSetting and settings are disabled', fakeAsync(() => {
-    fixture.detectChanges();
-
-    spyOn(component.settingsDrawer(), 'open').and.returnValue(
-      Promise.resolve('open')
-    );
-
-    component.openSetting(true);
-    tick();
-
-    expect(mockLiveAnnouncer.announce).toHaveBeenCalledWith(
-      'The settings panel is disabled'
-    );
-  }));
-
   it('should have spinner', () => {
     const spinner = compiled.querySelector('app-spinner');
 
@@ -457,20 +384,6 @@ describe('AppComponent', () => {
         expect(calloutLinkEl).toBeTruthy();
         expect(calloutLinkContent).toContain('System settings');
       });
-
-      keyboardCases.forEach(testCase => {
-        it(`should call openSetting on keydown ${testCase.name} "Connection settings" link`, fakeAsync(() => {
-          const spyOpenSetting = spyOn(component, 'openSetting');
-          const calloutLinkEl = compiled.querySelector(
-            '.message-link'
-          ) as HTMLAnchorElement;
-
-          calloutLinkEl.dispatchEvent(testCase.event);
-          flush();
-
-          expect(spyOpenSetting).toHaveBeenCalled();
-        }));
-      });
     });
 
     describe('with system status as "Idle"', () => {
@@ -776,19 +689,6 @@ describe('AppComponent', () => {
     });
   });
 
-  it('should not call toggleSettingsBtn focus on closeSetting when device length is 0', async () => {
-    fixture.detectChanges();
-
-    spyOn(component.settingsDrawer(), 'close').and.returnValue(
-      Promise.resolve('close')
-    );
-    const spyToggle = spyOn(component.toggleSettingsBtn(), 'focus');
-
-    await component.closeSetting(false);
-
-    expect(spyToggle).toHaveBeenCalledTimes(0);
-  });
-
   it('should set focus to first focusable elem when close callout', fakeAsync(() => {
     component.calloutClosed('mockId');
     tick(100);
@@ -799,17 +699,6 @@ describe('AppComponent', () => {
   }));
 });
 
-@Component({
-  selector: 'app-general-settings',
-  template: '<div></div>',
-})
-class FakeGeneralSettingsComponent {
-  @Input() settingsDisable = false;
-  @Output() closeSettingEvent = new EventEmitter<void>();
-  getSystemInterfaces = () => {};
-  getSystemConfig = () => {};
-}
-
 @Component({
   selector: 'app-spinner',
   template: '<div></div>',

diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts
@@ -23,7 +23,7 @@ import {
 } from '@angular/core';
 import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
 import { StatusOfTestrun } from './model/testrun-status';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { CalloutType } from './model/callout-type';
@@ -32,10 +32,8 @@ import { FocusManagerService } from './services/focus-manager.service';
 import { State, Store } from '@ngrx/store';
 import { AppState } from './store/state';
 import { setIsOpenAddDevice } from './store/actions';
-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';
 import { filter, take } from 'rxjs/operators';
 import { timer } from 'rxjs';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -86,11 +84,9 @@ const QUALIFICATION_URL = '/assets/icons/qualification.svg';
     BypassComponent,
     VersionComponent,
     CalloutComponent,
-    CdkTrapFocus,
     ShutdownAppComponent,
     WifiComponent,
     TestingCompleteComponent,
-    GeneralSettingsComponent,
     RouterModule,
     CommonModule,
   ],
@@ -105,17 +101,12 @@ export class AppComponent implements AfterViewInit {
   private readonly focusManagerService = inject(FocusManagerService);
   private testRunService = inject(TestRunService);
   appStore = inject(AppStore);
-  private liveAnnouncer = inject(LiveAnnouncer);
 
   public readonly CalloutType = CalloutType;
   public readonly StatusOfTestrun = StatusOfTestrun;
   public readonly Routes = Routes;
-  private openedSettingFromToggleBtn = true;
-
-  readonly settingsDrawer = viewChild.required<MatDrawer>('settingsDrawer');
   readonly toggleSettingsBtn =
     viewChild.required<HTMLButtonElement>('toggleSettingsBtn');
-  readonly settings = viewChild.required<GeneralSettingsComponent>('settings');
   viewModel$ = this.appStore.viewModel$;
 
   readonly riskAssessmentLink = viewChild<ElementRef>('riskAssessmentLink');
@@ -206,34 +197,10 @@ export class AppComponent implements AfterViewInit {
     });
   }
 
-  async closeSetting(hasDevices: boolean): Promise<void> {
-    return await this.settingsDrawer()
-      .close()
-      .then(() => {
-        if (hasDevices) {
-          this.toggleSettingsBtn().focus();
-        } // else device create window will be opened
-        if (!this.openedSettingFromToggleBtn) {
-          this.focusManagerService.focusFirstElementInContainer();
-        }
-      });
-  }
-
-  async openSetting(isSettingsDisabled: boolean): Promise<void> {
-    return await this.openGeneralSettings(false, isSettingsDisabled);
-  }
-
-  async openGeneralSettings(
-    openSettingFromToggleBtn: boolean,
-    isSettingsDisabled: boolean
-  ) {
-    this.openedSettingFromToggleBtn = openSettingFromToggleBtn;
-    this.settings().getSystemInterfaces();
-    this.settings().getSystemConfig();
-    await this.settingsDrawer().open();
-    if (isSettingsDisabled) {
-      await this.liveAnnouncer.announce('The settings panel is disabled');
-    }
+  navigateToSettings(): void {
+    this.route.navigate([Routes.Settings]).then(() => {
+      this.appStore.setFocusOnPage();
+    });
   }
   consentShown() {
     this.appStore.setContent();

diff --git a/.../app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html b/.../app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html
@@ -1,12 +1,15 @@
-<label
-  class="setting-form-label {{ key }}-label"
-  id="{{ key }}-label"
-  for="{{ key }}-group">
-  {{ groupLabel }}
-</label>
-<p class="setting-label-description">
-  {{ description }}
-</p>
+<div class="label-column">
+  <label
+    class="setting-form-label {{ key }}-label"
+    id="{{ key }}-label"
+    for="{{ key }}-group">
+    {{ groupLabel }}
+  </label>
+  <p class="setting-label-description">
+    {{ description }}
+  </p>
+</div>
+
 <mat-form-field appearance="outline" class="setting-field">
   <mat-label>{{ label }}</mat-label>
   <mat-select
@@ -35,3 +38,6 @@
     </mat-option>
   </mat-select>
 </mat-form-field>
+<div class="info-column">
+  <ng-content></ng-content>
+</div>