fix(console): remove navigation flakiness (#8439)

# Which Problems Are Solved

The navigation in the console default settings is flaky. Sometimes it
arbitrarily jumps to the organizations page.

# How the Problems Are Solved

The lifecycle hooks were extended to react differently to changes that
come from 'outside' and from the component itself.

# Additional Changes

The e2e tests are supposed to run against Firefox and Chrome. However
they are run twice against Electon. Fixing this revealed the console
navigation flakiness that was less visible on Electron.

The following issues are also fixed with this PR to reduce flakiness in
e2e tests.

- The custom command in the pipeline is removed from the e2e action
step, so the browser argument is respected.
- The npm packages of the e2e tests are updated to their latest version.
- Notification tests run against a clean state now so they don't depend
on each other anymore. This resolved some flakiness and improved
debuggability of the tests.
- E2E page load timeout is increased, reducing flakiness.
- E2E tests wait on some elements to be enabled before they interact
with them, reducing flakiness.

# Additional Context

- Closes #8404 
- Follow-up: https://github.com/zitadel/zitadel/issues/8471

The e2e tests ran three times in a row successfully in the pipeline
against both browsers.

---------

Co-authored-by: Max Peintner <max@caos.ch>
Co-authored-by: Livio Spring <livio.a@gmail.com>
Co-authored-by: Tim Möhlmann <tim+github@zitadel.com>

console/src/app/modules/policies/notification-sms-provider/notification-sms-provider.component.html

@@ -5,7 +5,7 @@
   <mat-spinner diameter="30" *ngIf="smsProvidersLoading" color="primary"></mat-spinner>
 </div>
 
-<div class="sms-providers">
+<div class="sms-providers" *ngIf="!smsProvidersLoading">
   <cnsl-card class="sms-card" [nomargin]="true">
     <div class="sms-provider">
       <h4 class="title">Twilio</h4>

console/src/app/modules/settings-list/settings-list.component.html

@@ -1,4 +1,5 @@
 <cnsl-sidenav
+  *ngIf="currentSetting"
   [title]="title"
   [description]="description"
   [indented]="true"

console/src/app/modules/settings-list/settings-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 
 import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
 import { SidenavSetting } from '../sidenav/sidenav.component';
@@ -8,23 +8,27 @@ import { SidenavSetting } from '../sidenav/sidenav.component';
   templateUrl: './settings-list.component.html',
   styleUrls: ['./settings-list.component.scss'],
 })
-export class SettingsListComponent implements OnChanges {
+export class SettingsListComponent implements OnChanges, OnInit {
   @Input() public title: string = '';
   @Input() public description: string = '';
   @Input() public serviceType!: PolicyComponentServiceType;
-  @Input() public selectedId: string = '';
+  @Input() public selectedId: string | undefined = undefined;
   @Input() public settingsList: SidenavSetting[] = [];
   public currentSetting: string | undefined = '';
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
   constructor() {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['selectedId']?.currentValue) {
+    if (this.settingsList && this.settingsList.length && changes['selectedId']?.currentValue) {
       this.currentSetting =
         this.settingsList && this.settingsList.find((l) => l.id === changes['selectedId'].currentValue)
           ? changes['selectedId'].currentValue
           : '';
-    } else {
+    }
+  }
+
+  ngOnInit(): void {
+    if (!this.currentSetting) {
       this.currentSetting = this.settingsList ? this.settingsList[0].id : '';
     }
   }

console/src/app/modules/sidenav/sidenav.component.html

@@ -5,8 +5,8 @@
       <p *ngIf="description" class="cnsl-secondary-text">{{ description }}</p>
 
       <button
-        *ngIf="currentSetting !== undefined"
-        (click)="value = undefined"
+        *ngIf="currentSetting"
+        (click)="value = ''"
         class="sidenav-setting-list-element mob-only"
         [ngClass]="{ active: true }"
       >
@@ -18,7 +18,7 @@
         <ng-container>
           <span
             class="sidenav-setting-group hide-on-mobile"
-            [ngClass]="{ show: currentSetting === undefined }"
+            [ngClass]="{ show: !currentSetting }"
             *ngIf="
               (setting.groupI18nKey && i > 0 && setting.groupI18nKey !== settingsList[i - 1].groupI18nKey) ||
               (i === 0 && setting.groupI18nKey)
@@ -29,7 +29,7 @@
           <button
             (click)="value = setting.id"
             class="sidenav-setting-list-element hide-on-mobile"
-            [ngClass]="{ active: currentSetting === setting.id, show: currentSetting === undefined }"
+            [ngClass]="{ active: currentSetting === setting.id, show: !currentSetting }"
             [attr.data-e2e]="'sidenav-element-' + setting.id"
           >
             <span>{{ setting.i18nKey | translate }}</span>
@@ -40,7 +40,7 @@
           <button
             (click)="value = setting.id"
             class="sidenav-setting-list-element hide-on-mobile"
-            [ngClass]="{ active: currentSetting === setting.id, show: currentSetting === undefined }"
+            [ngClass]="{ active: currentSetting === setting.id, show: !currentSetting }"
           >
             <span>{{ setting.i18nKey | translate }}</span>
           </button>

console/src/app/modules/sidenav/sidenav.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -19,9 +19,9 @@ export interface SidenavSetting {
   selector: 'cnsl-sidenav',
   templateUrl: './sidenav.component.html',
   styleUrls: ['./sidenav.component.scss'],
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SidenavComponent, multi: true }],
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SidenavComponent), multi: true }],
 })
-export class SidenavComponent implements ControlValueAccessor, OnInit {
+export class SidenavComponent implements ControlValueAccessor {
   @Input() public title: string = '';
   @Input() public description: string = '';
   @Input() public indented: boolean = false;
@@ -35,12 +35,6 @@ export class SidenavComponent implements ControlValueAccessor, OnInit {
     private route: ActivatedRoute,
   ) {}
 
-  ngOnInit(): void {
-    if (!this.value) {
-      this.value = this.settingsList[0].id;
-    }
-  }
-
   private onChange = (current: string | undefined) => {};
   private onTouch = (current: string | undefined) => {};
 
@@ -51,7 +45,7 @@ export class SidenavComponent implements ControlValueAccessor, OnInit {
   set value(setting: string | undefined) {
     this.currentSetting = setting;
 
-    if (setting || setting === undefined) {
+    if (setting || setting === undefined || setting === '') {
       this.onChange(setting);
       this.onTouch(setting);
     }

console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.ts

@@ -61,7 +61,7 @@ export class OwnedProjectDetailComponent implements OnInit {
   public refreshChanges$: EventEmitter<void> = new EventEmitter();
 
   public settingsList: SidenavSetting[] = [GENERAL, ROLES, PROJECTGRANTS, GRANTS];
-  public currentSetting: string | undefined = '';
+  public currentSetting: string = '';
   constructor(
     public translate: TranslateService,
     private route: ActivatedRoute,
@@ -72,12 +72,11 @@ export class OwnedProjectDetailComponent implements OnInit {
     private router: Router,
     private breadcrumbService: BreadcrumbService,
   ) {
+    this.currentSetting = 'general';
     route.queryParams.pipe(take(1)).subscribe((params: Params) => {
       const { id } = params;
       if (id) {
         this.currentSetting = id;
-      } else {
-        this.currentSetting = 'general';
       }
     });
   }