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/search-user-autocomplete/search-user-autocomplete.component.html

@@ -3,26 +3,36 @@
   <div class="found-user-row" *ngFor="let user of users; index as i">
     <div class="circle">
       <cnsl-avatar
-        *ngIf="user.human && user.human.profile && user.human.profile.displayName && user.human.profile.firstName && user.human.profile.lastName; else cog"
-        class="avatar" [name]="user.human.profile.displayName" [avatarUrl]="user.human.profile?.avatarUrl || ''"
-        [forColor]="user.preferredLoginName" [size]="32">
+        *ngIf="
+          user.human &&
+            user.human.profile &&
+            user.human.profile.displayName &&
+            user.human.profile.firstName &&
+            user.human.profile.lastName;
+          else cog
+        "
+        class="avatar"
+        [name]="user.human.profile.displayName"
+        [avatarUrl]="user.human.profile?.avatarUrl || ''"
+        [forColor]="user.preferredLoginName"
+        [size]="32"
+      >
       </cnsl-avatar>
       <ng-template #cog>
-        <cnsl-avatar class="avatar" [forColor]="user.preferredLoginName" [isMachine]="true" [size]="32">
-        </cnsl-avatar>
+        <cnsl-avatar class="avatar" [forColor]="user.preferredLoginName" [isMachine]="true" [size]="32"> </cnsl-avatar>
       </ng-template>
     </div>
 
     <div class="user-name-column" *ngIf="user.human">
-      <span>{{user.human?.profile?.displayName}}</span>
-      <span class="smaller cnsl-secondary-text">{{user.preferredLoginName}}</span>
+      <span>{{ user.human?.profile?.displayName }}</span>
+      <span class="smaller cnsl-secondary-text">{{ user.preferredLoginName }}</span>
     </div>
     <div class="user-name-column" *ngIf="user.machine">
-      <span>{{user.machine.name}}</span>
-      <span class="smaller cnsl-secondary-text">{{user.preferredLoginName}}</span>
+      <span>{{ user.machine.name }}</span>
+      <span class="smaller cnsl-secondary-text">{{ user.preferredLoginName }}</span>
     </div>
     <span class="fill-space"></span>
-    <button class="search-user-dl-btn" matTooltip="{{'ACTIONS.REMOVE' | translate}}" mat-icon-button color="warn">
+    <button class="search-user-dl-btn" matTooltip="{{ 'ACTIONS.REMOVE' | translate }}" mat-icon-button color="warn">
       <i class="las la-minus-circle" (click)="users.splice(i, 1)"></i>
     </button>
   </div>
@@ -37,13 +47,26 @@
   <ng-container *ngIf="target && target === UserTarget.SELF">
     <div class="line">
       <cnsl-form-field class="user-create-form-field more-space">
-        <cnsl-label>{{'USER.SEARCH.ADDITIONAL' | translate}}</cnsl-label>
+        <cnsl-label>{{ 'USER.SEARCH.ADDITIONAL' | translate }}</cnsl-label>
 
-        <input cnslInput *ngIf="singleOutput" type="text" placeholder="Search for the user loginname" #usernameInput
-          [formControl]="myControl" [matAutocomplete]="auto" />
+        <input
+          cnslInput
+          *ngIf="singleOutput"
+          type="text"
+          placeholder="Search for the user loginname"
+          #usernameInput
+          [formControl]="myControl"
+          [matAutocomplete]="auto"
+        />
 
-        <input *ngIf="!singleOutput" cnslInput #usernameInput [formControl]="myControl" placeholder="John Doe"
-          [matAutocomplete]="auto" />
+        <input
+          *ngIf="!singleOutput"
+          cnslInput
+          #usernameInput
+          [formControl]="myControl"
+          placeholder="[email protected]"
+          [matAutocomplete]="auto"
+        />
 
         <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
           <mat-option *ngIf="isLoading" class="is-loading">
@@ -53,9 +76,20 @@
             <div class="user-option">
               <div class="circle">
                 <cnsl-avatar
-                  *ngIf="user.human && user.human.profile && user.human.profile.displayName && user.human.profile.firstName && user.human.profile.lastName; else cog"
-                  class="avatar" [name]="user.human.profile.displayName"
-                  [avatarUrl]="user.human.profile?.avatarUrl || ''" [forColor]="user.preferredLoginName" [size]="32">
+                  *ngIf="
+                    user.human &&
+                      user.human.profile &&
+                      user.human.profile.displayName &&
+                      user.human.profile.firstName &&
+                      user.human.profile.lastName;
+                    else cog
+                  "
+                  class="avatar"
+                  [name]="user.human.profile.displayName"
+                  [avatarUrl]="user.human.profile?.avatarUrl || ''"
+                  [forColor]="user.preferredLoginName"
+                  [size]="32"
+                >
                 </cnsl-avatar>
                 <ng-template #cog>
                   <cnsl-avatar class="avatar" [forColor]="user.preferredLoginName" [isMachine]="true" [size]="32">
@@ -63,19 +97,21 @@
                 </ng-template>
               </div>
               <div class="user-option-column">
-                <span>{{(user.human && user.human.profile && user.human.profile.displayName) ?
-                  user.human.profile.displayName :
-                  user.machine?.name}}</span>
+                <span>{{
+                  user.human && user.human.profile && user.human.profile.displayName
+                    ? user.human.profile.displayName
+                    : user.machine?.name
+                }}</span>
                 <span class="fill-space"></span>
-                <span class="smaller cnsl-secondary-text">{{user.preferredLoginName}}</span>
+                <span class="smaller cnsl-secondary-text">{{ user.preferredLoginName }}</span>
               </div>
             </div>
           </mat-option>
         </mat-autocomplete>
 
         <span class="target-desc">
-          {{'USER.TARGET.SELF'| translate}}
-          <a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
+          {{ 'USER.TARGET.SELF' | translate }}
+          <a (click)="changeTarget()">{{ 'USER.TARGET.CLICKHERE' | translate }}</a>
         </span>
       </cnsl-form-field>
     </div>
@@ -84,11 +120,11 @@
   <ng-container *ngIf="target && target === UserTarget.EXTERNAL">
     <div class="line">
       <cnsl-form-field class="user-create-form-field more-space">
-        <cnsl-label>{{'USER.SEARCH.ADDITIONAL-EXTERNAL' | translate}}</cnsl-label>
+        <cnsl-label>{{ 'USER.SEARCH.ADDITIONAL-EXTERNAL' | translate }}</cnsl-label>
         <input cnslInput type="text" [formControl]="globalLoginNameControl" placeholder="[email protected]" />
         <span class="target-desc">
-          {{(target === UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate}}
-          <a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
+          {{ (target === UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate }}
+          <a (click)="changeTarget()">{{ 'USER.TARGET.CLICKHERE' | translate }}</a>
         </span>
       </cnsl-form-field>
 
@@ -97,4 +133,4 @@
       </button>
     </div>
   </ng-container>
-</form>
+</form>

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts

@@ -1,14 +1,14 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import {
-  AfterContentChecked,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
+    AfterContentChecked,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewChild,
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
@@ -17,7 +17,7 @@ import { from, of, Subject } from 'rxjs';
 import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
 import { ListUsersResponse } from 'src/app/proto/generated/zitadel/management_pb';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
-import { DisplayNameQuery, SearchQuery, User } from 'src/app/proto/generated/zitadel/user_pb';
+import { SearchQuery, User, UserNameQuery } from 'src/app/proto/generated/zitadel/user_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -78,11 +78,11 @@ export class SearchUserAutocompleteComponent implements OnInit, AfterContentChec
         switchMap((value) => {
           const query = new SearchQuery();
 
-          const dnQuery = new DisplayNameQuery();
-          dnQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
-          dnQuery.setDisplayName(value);
+          const unQuery = new UserNameQuery();
+          unQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
+          unQuery.setUserName(value);
 
-          query.setDisplayNameQuery(dnQuery);
+          query.setUserNameQuery(unQuery);
 
           if (this.target === UserTarget.SELF) {
             return from(this.userService.listUsers(10, 0, [query]));