feat(console): user grant filtering, org domain verification improvements, fix membership detail link (#916)

* user grant filter

* add filter input

* org domain spinner and reload

* user grant filter templates

* single selection filter for grants, same dl btn

* filter margin

* lint style, remove duplicate code

* project count as observable

* deferred reload on delete

* fix user grant formfield

* lint styles

* fix event propagation on pin, change selection

* propagate counter change

* admin warn, localstorage, i18n, sidenav impv

* overlays

* adapt toolbar elevationn, card

* color vars, i18n, admin section

* fix lint

* selection clear on filter

* ts lint

* Update console/src/assets/i18n/de.json

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

* Update console/src/assets/i18n/de.json

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

* Update console/src/assets/i18n/en.json

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

console/src/app/pages/users/user-create/user-create.component.ts

@@ -68,7 +68,7 @@ export class UserCreateComponent implements OnDestroy {
     }
 
     private async loadOrg(): Promise<void> {
-        const domains = (await this.mgmtService.SearchMyOrgDomains(0, 100).then(doms => doms.toObject()));
+        const domains = (await this.mgmtService.SearchMyOrgDomains().then(doms => doms.toObject()));
         const found = domains.resultList.find(domain => domain.primary);
         if (found) {
             this.primaryDomain = found;

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss

@@ -19,7 +19,7 @@
 
   i {
     margin-left: 1rem;
-    color: #5282c1;
+    color: var(--color-main);
   }
 }
 

console/src/app/pages/users/user-detail/memberships/memberships.component.html

@@ -23,7 +23,7 @@
                 </ng-container>
             </ng-container>
             <ng-template #compact>
-                <div class="avatar-circle" matTooltip="Click to show detail">
+                <div class="avatar-circle" matTooltip="Click to show detail" (click)="navigateToObject()" role="button">
                     <div class="membership-avatar">
                         <span style="font-size: 16px;">{{memberships.totalResult}}</span>
                     </div>

console/src/app/pages/users/user-detail/user-detail/user-detail.component.html

@@ -6,13 +6,13 @@
             </a>
             <h1>{{user.human ? user.human?.displayName : user.machine?.name}}</h1>
 
-            <span class="fill-space"></span>
-
             <ng-template appHasRole [appHasRole]="['user.delete$', 'user.delete:'+user?.id]">
-                <button mat-raised-button color="warn" (click)="deleteUser()"><i
-                        class="las la-trash"></i>{{'USER.PAGES.DELETE' | translate}}</button>
+                <button mat-icon-button color="warn" matTooltip="{{'USER.PAGES.DELETE' | translate}}"
+                    (click)="deleteUser()"><i class="las la-trash"></i></button>
             </ng-template>
 
+            <span class="fill-space"></span>
+
             <ng-template appHasRole [appHasRole]="['user.write$', 'user.write:'+user?.id]">
                 <button class="state-button" mat-stroked-button color="warn"
                     *ngIf="user?.state === UserState.USERSTATE_ACTIVE"

console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss

@@ -12,6 +12,7 @@
 
   h1 {
     margin: 0;
+    margin-right: 1rem;
   }
 
   .fill-space {

console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.scss

@@ -23,7 +23,7 @@
 
   i {
     margin-left: 1rem;
-    color: #5282c1;
+    color: var(--color-main);
   }
 }
 

console/src/app/pages/users/user-list/user-table/user-table.component.html

@@ -125,9 +125,9 @@
             <ng-container matColumnDef="actions" stickyEnd>
                 <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let user">
-                    <button [disabled]="(['user.delete$', 'user.delete:'+user.id] | hasRole | async) == false"
-                        color="warn" mat-icon-button matTooltip="{{'USER.PAGES.DELETE' | translate}}"
-                        (click)="deleteUser(user)">
+                    <button class="dlt-button"
+                        [disabled]="(['user.delete$', 'user.delete:'+user.id] | hasRole | async) == false" color="warn"
+                        mat-icon-button matTooltip="{{'USER.PAGES.DELETE' | translate}}" (click)="deleteUser(user)">
                         <i class="las la-trash"></i>
                     </button>
                 </td>

console/src/app/pages/users/user-list/user-table/user-table.component.scss

@@ -18,6 +18,26 @@
       &:last-child {
         padding-right: 0;
       }
+
+      .search-button,
+      .dlt-button {
+        visibility: hidden;
+      }
+
+      &:hover,
+      &.search-active {
+        .search-button {
+          visibility: visible;
+        }
+      }
+    }
+
+    tr {
+      &:hover {
+        .dlt-button {
+          visibility: visible;
+        }
+      }
     }
 
     .selection {
@@ -27,31 +47,6 @@
   }
 }
 
-tr {
-  button {
-    visibility: hidden;
-  }
-
-  &:hover {
-    button {
-      visibility: visible;
-    }
-  }
-}
-
-th {
-  .search-button {
-    visibility: hidden;
-  }
-
-  &:hover,
-  &.search-active {
-    .search-button {
-      visibility: visible;
-    }
-  }
-}
-
 .filtername {
   margin: 0 1rem;
 }

console/src/app/pages/users/user-list/user-table/user-table.component.ts

@@ -121,6 +121,7 @@ export class UserTableComponent implements OnInit {
     }
 
     public applyFilter(event: Event): void {
+        this.selection.clear();
         const filterValue = (event.target as HTMLInputElement).value;
 
         this.getData(