Add console registrars paging, fix empty registrars mobile (#2162)

console-webapp/src/app/header/header.component.html

@@ -1,24 +1,30 @@
-<p>
+<p class="console-app__header">
   <mat-toolbar color="primary">
     <button mat-icon-button aria-label="Open menu" (click)="toggleNavPane()">
       <mat-icon>menu</mat-icon>
     </button>
-    <span>
-      <a
-        [routerLink]="'/home'"
-        routerLinkActive="active"
-        class="console-app__logo"
-      >
-        Google Registry
-      </a>
-    </span>
+    <a
+      [routerLink]="'/home'"
+      routerLinkActive="active"
+      class="console-app__logo"
+    >
+      Google Registry
+    </a>
     <span class="spacer"></span>
     <app-registrar-selector />
     <button mat-icon-button aria-label="Open FAQ">
       <mat-icon>question_mark</mat-icon>
     </button>
-    <button mat-icon-button aria-label="Open user info">
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      #menuTrigger
+      aria-label="Open user info"
+    >
       <mat-icon>person</mat-icon>
     </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="logOut()">Log out</button>
+    </mat-menu>
   </mat-toolbar>
 </p>

console-webapp/src/app/header/header.component.scss

@@ -17,6 +17,21 @@
     color: inherit;
     text-decoration: none;
   }
+  &__header {
+    @media (max-width: 599px) {
+      .mat-toolbar {
+        padding: 0;
+      }
+      .console-app__logo {
+        font-size: 16px;
+      }
+      button {
+        padding-left: 0;
+        padding-right: 0;
+        width: 30px;
+      }
+    }
+  }
 }
 .spacer {
   flex: 1;

console-webapp/src/app/header/header.component.ts

@@ -28,4 +28,8 @@ export class HeaderComponent {
     this.isNavOpen = !this.isNavOpen;
     this.toggleNavOpen.emit(this.isNavOpen);
   }
+
+  logOut() {
+    window.open('/console?gcp-iap-mode=CLEAR_LOGIN_COOKIE', '_self');
+  }
 }

console-webapp/src/app/home/home.component.scss

@@ -29,4 +29,9 @@
       }
     }
   }
+  @media (max-width: 510px) {
+    .console-app__widget-wrapper__wide {
+      grid-column: initial;
+    }
+  }
 }

console-webapp/src/app/registrar/emptyRegistrar.component.scss

@@ -8,6 +8,7 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    white-space: nowrap;
 
     &-icon {
       transform: scale(3);

console-webapp/src/app/registrar/registrar-selector.component.html

@@ -1,5 +1,14 @@
 <div class="console-app__registrar">
-  <div>
+  <button
+    mat-button
+    [routerLink]="'/settings/registrars'"
+    routerLinkActive="active"
+    *ngIf="isMobile; else desktop"
+  >
+    {{ registrarService.activeRegistrarId || "Select registrar" }}
+    <mat-icon>open_in_new</mat-icon>
+  </button>
+  <ng-template #desktop>
     <mat-form-field class="mat-form-field-density-5" appearance="fill">
       <mat-label>Registrar</mat-label>
       <mat-select
@@ -14,5 +23,5 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-  </div>
+  </ng-template>
 </div>

console-webapp/src/app/registrar/registrar-selector.component.ts

@@ -12,14 +12,35 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RegistrarService } from './registrar.service';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { distinctUntilChanged } from 'rxjs';
+
+const MOBILE_LAYOUT_BREAKPOINT = '(max-width: 599px)';
 
 @Component({
   selector: 'app-registrar-selector',
   templateUrl: './registrar-selector.component.html',
   styleUrls: ['./registrar-selector.component.scss'],
 })
-export class RegistrarSelectorComponent {
-  constructor(protected registrarService: RegistrarService) {}
+export class RegistrarSelectorComponent implements OnInit {
+  protected isMobile: boolean = false;
+
+  readonly breakpoint$ = this.breakpointObserver
+    .observe([MOBILE_LAYOUT_BREAKPOINT])
+    .pipe(distinctUntilChanged());
+
+  constructor(
+    protected registrarService: RegistrarService,
+    protected breakpointObserver: BreakpointObserver
+  ) {}
+
+  ngOnInit(): void {
+    this.breakpoint$.subscribe(() => this.breakpointChanged());
+  }
+
+  private breakpointChanged() {
+    this.isMobile = this.breakpointObserver.isMatched(MOBILE_LAYOUT_BREAKPOINT);
+  }
 }

console-webapp/src/app/registrar/registrarsTable.component.html

@@ -1,22 +1,21 @@
 <div class="console-app__registrars">
-  <table
-    mat-table
-    [dataSource]="registrarService.registrars"
+  <mat-table
+    [dataSource]="dataSource"
     class="mat-elevation-z8"
+    class="console-app__registrars-table"
+    matSort
   >
     <ng-container
       *ngFor="let column of columns"
       [matColumnDef]="column.columnDef"
     >
-      <th mat-header-cell *matHeaderCellDef>
-        {{ column.header }}
-      </th>
-      <td mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></td>
+      <mat-header-cell *matHeaderCellDef> {{ column.header }} </mat-header-cell>
+      <mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
     </ng-container>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-  </table>
   <mat-paginator
     class="mat-elevation-z8"
     [pageSizeOptions]="[5, 10, 20]"

console-webapp/src/app/registrar/registrarsTable.component.scss

@@ -1,5 +1,27 @@
 .console-app {
+  $min-width: 756px;
+
   &__registrars {
     margin-top: 1.5rem;
+    width: 100%;
+    overflow: auto;
+  }
+
+  &__registrars-table {
+    min-width: $min-width !important;
+  }
+
+  .mat-mdc-paginator {
+    min-width: $min-width !important;
+  }
+
+  .mat-column {
+    &-driveId {
+      min-width: 200px;
+      word-break: break-all;
+    }
+    &-registryLockAllowed {
+      max-width: 80px;
+    }
   }
 }

console-webapp/src/app/registrar/registrarsTable.component.ts

@@ -12,16 +12,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Registrar, RegistrarService } from './registrar.service';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
   selector: 'app-registrar',
   templateUrl: './registrarsTable.component.html',
   styleUrls: ['./registrarsTable.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class RegistrarComponent {
   public static PATH = 'registrars';
+  dataSource: MatTableDataSource<Registrar>;
   columns = [
     {
       columnDef: 'registrarId',
@@ -72,5 +77,18 @@ export class RegistrarComponent {
     },
   ];
   displayedColumns = this.columns.map((c) => c.columnDef);
-  constructor(protected registrarService: RegistrarService) {}
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+
+  constructor(protected registrarService: RegistrarService) {
+    this.dataSource = new MatTableDataSource<Registrar>(
+      registrarService.registrars
+    );
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
 }

console-webapp/src/app/settings/contact/contact-details.component.html

@@ -1,7 +1,7 @@
 <h3 mat-dialog-title>Contact details</h3>
 <div mat-dialog-content>
   <form (ngSubmit)="saveAndClose($event)">
-    <div>
+    <p>
       <mat-form-field class="contact-details__input">
         <mat-label>Name: </mat-label>
         <input
@@ -11,9 +11,9 @@
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-    </div>
+    </p>
 
-    <div>
+    <p>
       <mat-form-field class="contact-details__input">
         <mat-label>Primary account email: </mat-label>
         <input
@@ -25,9 +25,9 @@
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-    </div>
+    </p>
 
-    <div>
+    <p>
       <mat-form-field class="contact-details__input">
         <mat-label>Phone: </mat-label>
         <input
@@ -36,9 +36,9 @@
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-    </div>
+    </p>
 
-    <div>
+    <p>
       <mat-form-field class="contact-details__input">
         <mat-label>Fax: </mat-label>
         <input
@@ -47,7 +47,7 @@
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-    </div>
+    </p>
 
     <div class="contact-details__group">
       <label>Contact type:</label>

console-webapp/src/app/shared/services/backend.service.ts

@@ -95,7 +95,7 @@ export class BackendService {
 
   getUserData(): Observable<UserData> {
     return this.http
-      .get<UserData>(`/console-api/userdata`)
+      .get<UserData>('/console-api/userdata')
       .pipe(catchError((err) => this.errorCatcher<UserData>(err)));
   }
 

console-webapp/src/styles.scss

@@ -44,11 +44,12 @@ body {
     &-link {
       padding: 0 !important;
       text-align: left;
-      height: 20px !important;
       min-width: auto !important;
+      height: min-content !important;
     }
     &-title {
       color: var(--primary) !important;
+      text-align: center;
     }
     &-icon {
       font-size: 5rem;