feat: console flat navigation, settings (#3581)

* instance routing

* instance naming

* org list

* rm isonsystem

* breadcrumb  type

* routing

* instance members

* fragment refresh org

* settings pages

* settings list, sidenav grouping, i18n

* org-settings, policy changes

* lint

* grid

* rename grid

* fallback to general

* cleanup

* general settings, remove cards

* sidenav for settings, label policy

* i18n

* header, nav backbuild

* general, project nav rehaul

* login text background adapt

* org nav anim

* org, instance settings, fix policy layout, roles

* i18n, active route for project

* lint

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

@@ -1,30 +1,63 @@
-import { Component, forwardRef, Input } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
 
 export interface SidenavSetting {
   id: string;
   i18nKey: string;
+  groupI18nKey?: string;
+  requiredRoles?: { [serviceType in PolicyComponentServiceType]: string[] };
 }
 
 @Component({
   selector: 'cnsl-sidenav',
   templateUrl: './sidenav.component.html',
   styleUrls: ['./sidenav.component.scss'],
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SidenavComponent), multi: true }],
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SidenavComponent, multi: true }],
 })
-export class SidenavComponent {
-  @Input() public currentSetting: string | undefined = 'general';
+export class SidenavComponent implements ControlValueAccessor, OnInit {
+  @Input() public title: string = '';
+  @Input() public description: string = '';
+  @Input() public indented: boolean = false;
+  @Input() public currentSetting?: string | undefined = undefined;
   @Input() public settingsList: SidenavSetting[] = [];
+  @Input() public queryParam: string = '';
 
-  constructor() {}
+  constructor(private router: Router, private route: ActivatedRoute) {}
 
-  private onChange: any = () => {};
-  private onTouch: any = () => {};
+  ngOnInit(): void {
+    if (!this.value) {
+      this.value = this.settingsList[0].id;
+    }
+  }
+
+  private onChange = (current: string | undefined) => {};
+  private onTouch = (current: string | undefined) => {};
+
+  @Input() get value(): string | undefined {
+    return this.currentSetting;
+  }
 
   set value(setting: string | undefined) {
     this.currentSetting = setting;
-    this.onChange(setting);
-    this.onTouch(setting);
+
+    if (setting || setting === undefined) {
+      this.onChange(setting);
+      this.onTouch(setting);
+    }
+
+    if (this.queryParam && setting) {
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: {
+          [this.queryParam]: setting,
+        },
+        queryParamsHandling: 'merge',
+        skipLocationChange: false,
+      });
+    }
   }
 
   public writeValue(value: any) {