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/org-context/org-context.component.html

@@ -1,49 +1,75 @@
 <div class="org-context-card" cdkTrapFocus>
   <div class="spinner-w">
-    <mat-spinner diameter="20" *ngIf="orgLoading$ | async" color="accent">
-    </mat-spinner>
+    <mat-spinner diameter="20" *ngIf="orgLoading$ | async" color="accent"> </mat-spinner>
   </div>
 
   <div class="filter-wrapper">
-    <input cnslInput class="filter-input" [formControl]="filterControl" autocomplete="off"
-      (click)="$event.stopPropagation()" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}" #input>
+    <input
+      cnslInput
+      class="filter-input"
+      [formControl]="filterControl"
+      autocomplete="off"
+      (click)="$event.stopPropagation()"
+      placeholder="{{ 'ORG.PAGES.FILTERPLACEHOLDER' | translate }}"
+      #input
+    />
   </div>
 
   <div class="org-wrapper">
-    <button class="org-button-with-pin" mat-button
-      [ngClass]="{'active': pinnedorg.id === org?.id, 'border-bottom':pinned.selected.length && i === pinned.selected.length -1}"
-      [disabled]="!pinnedorg.id" *ngFor="let pinnedorg of pinned.selected; index as i"
-      (click)="setActiveOrg(pinnedorg)">
+    <button
+      class="org-button-with-pin"
+      mat-button
+      [ngClass]="{
+        active: pinnedorg.id === org?.id,
+        'border-bottom': pinned.selected.length && i === pinned.selected.length - 1
+      }"
+      [disabled]="!pinnedorg.id"
+      *ngFor="let pinnedorg of pinned.selected; index as i"
+      (click)="setActiveOrg(pinnedorg)"
+    >
       <div class="org-flex-row">
-        <span class="org-span">{{pinnedorg?.name ? pinnedorg.name : 'NO NAME'}}</span>
-        <template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{key: pinnedorg}"></template>
+        <span class="org-span">{{ pinnedorg?.name ? pinnedorg.name : 'NO NAME' }}</span>
+        <template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{ key: pinnedorg }"></template>
       </div>
     </button>
     <ng-container *ngFor="let temporg of orgs$ | async">
-      <button *ngIf="!pinned.isSelected(temporg)" class="org-button-with-pin" mat-button
-        [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id" (click)="setActiveOrg(temporg)">
-        <div class="org-flex-row"><span class="org-span">{{temporg?.name ? temporg.name : 'NO NAME'}}</span>
-          <template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{key: temporg}"></template>
+      <button
+        *ngIf="!pinned.isSelected(temporg)"
+        class="org-button-with-pin"
+        mat-button
+        [ngClass]="{ active: temporg.id === org?.id }"
+        [disabled]="!temporg.id"
+        (click)="setActiveOrg(temporg)"
+      >
+        <div class="org-flex-row">
+          <span class="org-span">{{ temporg?.name ? temporg.name : 'NO NAME' }}</span>
+          <template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{ key: temporg }"></template>
         </div>
       </button>
     </ng-container>
   </div>
 
-  <button mat-button class="show-all" [routerLink]="[ '/org/overview' ]" (click)="closedCard.emit()">{{'MENU.SHOWORGS' |
-    translate}}</button>
+  <button mat-button class="show-all" [routerLink]="['/orgs']" (click)="closedCard.emit()">
+    {{ 'MENU.SHOWORGS' | translate }}
+  </button>
 
-  <ng-template cnslHasRole [hasRole]="['org.create','iam.write']">
-    <button mat-button [routerLink]="[ '/org/create' ]" (click)="closedCard.emit()">
+  <ng-template cnslHasRole [hasRole]="['org.create', 'iam.write']">
+    <button mat-button [routerLink]="['/org/create']" (click)="closedCard.emit()">
       <mat-icon class="avatar">add</mat-icon>
-      {{'MENU.NEWORG' | translate}}
+      {{ 'MENU.NEWORG' | translate }}
     </button>
   </ng-template>
 </div>
 
 <ng-template #toggleButton let-key="key">
-  <button matTooltip="{{'ACTIONS.PIN' | translate}}" [ngClass]="{ selected: pinned.isSelected(key)}"
-    (click)="toggle(key,$event)" class="edit-button" mat-icon-button>
+  <button
+    matTooltip="{{ 'ACTIONS.PIN' | translate }}"
+    [ngClass]="{ selected: pinned.isSelected(key) }"
+    (click)="toggle(key, $event)"
+    class="edit-button"
+    mat-icon-button
+  >
     <mat-icon *ngIf="pinned.isSelected(key)" svgIcon="mdi_pin"></mat-icon>
     <mat-icon svgIcon="mdi_pin_outline" *ngIf="!pinned.isSelected(key)"></mat-icon>
   </button>
-</ng-template>
+</ng-template>