From 5f9f1574947a357516be6445b5e5b5d7d8c9f227 Mon Sep 17 00:00:00 2001
From: Pavlo Tkach <3469726+ptkach@users.noreply.github.com>
Date: Fri, 12 Jul 2024 14:57:26 -0400
Subject: [PATCH] Move console global loader, fix table scroll bars (#2494)

---
 console-webapp/src/app/app.component.html     |   9 +-
 console-webapp/src/app/app.component.scss     |   3 +-
 .../src/app/domains/domainList.component.html | 161 ++++++++++--------
 .../src/app/domains/domainList.component.scss |   6 -
 .../src/app/header/header.component.scss      |   9 +-
 .../app/navigation/navigation.component.scss  |   4 +-
 .../registrarSelector.component.html          |   2 +-
 .../registrar/registrarsTable.component.html  |  77 +++++----
 .../registrar/registrarsTable.component.scss  |   5 -
 console-webapp/src/styles.scss                |   7 +
 console-webapp/src/theme.scss                 |  13 +-
 11 files changed, 154 insertions(+), 142 deletions(-)

diff --git a/console-webapp/src/app/app.component.html b/console-webapp/src/app/app.component.html
index 5334de308..900fbdb7b 100644
--- a/console-webapp/src/app/app.component.html
+++ b/console-webapp/src/app/app.component.html
@@ -1,5 +1,11 @@
 <div class="console-app mat-typography">
   <app-header (toggleNavOpen)="toggleSidenav()"></app-header>
+  <div class="console-app__global-spinner">
+    <mat-progress-bar
+      mode="indeterminate"
+      *ngIf="globalLoader.isLoading"
+    ></mat-progress-bar>
+  </div>
   <mat-sidenav-container class="console-app__container">
     <mat-sidenav
       [mode]="breakpointObserver.isMobileView() ? 'over' : 'side'"
@@ -10,9 +16,6 @@
       <app-navigation />
     </mat-sidenav>
     <mat-sidenav-content class="console-app__content-wrapper">
-      <div *ngIf="globalLoader.isLoading" class="console-app__global-spinner">
-        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-      </div>
       <div class="console-app__content">
         <router-outlet></router-outlet>
       </div>
diff --git a/console-webapp/src/app/app.component.scss b/console-webapp/src/app/app.component.scss
index 642dfc5f8..9ce706be5 100644
--- a/console-webapp/src/app/app.component.scss
+++ b/console-webapp/src/app/app.component.scss
@@ -40,6 +40,7 @@
     padding: 0 16px;
   }
   &__global-spinner {
-    margin-bottom: 2rem;
+    position: absolute;
+    width: 100%;
   }
 }
diff --git a/console-webapp/src/app/domains/domainList.component.html b/console-webapp/src/app/domains/domainList.component.html
index 032dbc04e..92183dd55 100644
--- a/console-webapp/src/app/domains/domainList.component.html
+++ b/console-webapp/src/app/domains/domainList.component.html
@@ -13,82 +13,93 @@
     </div>
     } @else {
     <div class="console-app__domains-table-parent">
-      @if (isLoading) {
-      <div class="console-app__domains-spinner">
-        <mat-spinner />
+      <div class="console-app__scrollable-wrapper">
+        <div class="console-app__scrollable">
+          @if (isLoading) {
+          <div class="console-app__domains-spinner">
+            <mat-spinner />
+          </div>
+          } @else {
+          <a
+            mat-stroked-button
+            color="primary"
+            href="/console-api/dum-download?registrarId={{
+              registrarService.registrarId()
+            }}"
+            class="console-app-domains__download"
+          >
+            <mat-icon>download</mat-icon>
+            Download domains (.csv)
+          </a>
+
+          <mat-form-field class="console-app__domains-filter">
+            <mat-label>Filter</mat-label>
+            <input
+              type="search"
+              matInput
+              [(ngModel)]="searchTerm"
+              (ngModelChange)="sendInput()"
+              [disabled]="isLoading"
+              #input
+            />
+          </mat-form-field>
+          }
+          <mat-table
+            [dataSource]="dataSource"
+            class="mat-elevation-z0"
+            class="console-app__domains-table"
+          >
+            <ng-container matColumnDef="domainName">
+              <mat-header-cell *matHeaderCellDef>Domain Name</mat-header-cell>
+              <mat-cell *matCellDef="let element">{{
+                element.domainName
+              }}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="creationTime">
+              <mat-header-cell *matHeaderCellDef>Creation Time</mat-header-cell>
+              <mat-cell *matCellDef="let element">
+                {{ element.creationTime.creationTime }}
+              </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="registrationExpirationTime">
+              <mat-header-cell *matHeaderCellDef
+                >Expiration Time</mat-header-cell
+              >
+              <mat-cell *matCellDef="let element">
+                {{ element.registrationExpirationTime }}
+              </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="statuses">
+              <mat-header-cell *matHeaderCellDef>Statuses</mat-header-cell>
+              <mat-cell *matCellDef="let element">{{
+                element.statuses
+              }}</mat-cell>
+            </ng-container>
+
+            <mat-header-row
+              *matHeaderRowDef="displayedColumns"
+            ></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+
+            <!-- Row shown when there is no matching data. -->
+            <mat-row *matNoDataRow>
+              <mat-cell colspan="4">No domains found</mat-cell>
+            </mat-row>
+          </mat-table>
+          <mat-paginator
+            [length]="totalResults"
+            [pageIndex]="pageNumber"
+            [pageSize]="resultsPerPage"
+            [pageSizeOptions]="[10, 25, 50, 100, 500]"
+            (page)="onPageChange($event)"
+            aria-label="Select page of domain results"
+            showFirstLastButtons
+          ></mat-paginator>
+        </div>
       </div>
-      } @else {
-      <a
-        mat-stroked-button
-        color="primary"
-        href="/console-api/dum-download?registrarId={{
-          registrarService.registrarId()
-        }}"
-        class="console-app-domains__download"
-      >
-        <mat-icon>download</mat-icon>
-        Download domains (.csv)
-      </a>
-      <mat-form-field class="console-app__domains-filter">
-        <mat-label>Filter</mat-label>
-        <input
-          type="search"
-          matInput
-          [(ngModel)]="searchTerm"
-          (ngModelChange)="sendInput()"
-          [disabled]="isLoading"
-          #input
-        />
-      </mat-form-field>
-      }
-      <mat-table
-        [dataSource]="dataSource"
-        class="mat-elevation-z0"
-        class="console-app__domains-table"
-      >
-        <ng-container matColumnDef="domainName">
-          <mat-header-cell *matHeaderCellDef>Domain Name</mat-header-cell>
-          <mat-cell *matCellDef="let element">{{
-            element.domainName
-          }}</mat-cell>
-        </ng-container>
-
-        <ng-container matColumnDef="creationTime">
-          <mat-header-cell *matHeaderCellDef>Creation Time</mat-header-cell>
-          <mat-cell *matCellDef="let element">
-            {{ element.creationTime.creationTime }}
-          </mat-cell>
-        </ng-container>
-
-        <ng-container matColumnDef="registrationExpirationTime">
-          <mat-header-cell *matHeaderCellDef>Expiration Time</mat-header-cell>
-          <mat-cell *matCellDef="let element">
-            {{ element.registrationExpirationTime }}
-          </mat-cell>
-        </ng-container>
-
-        <ng-container matColumnDef="statuses">
-          <mat-header-cell *matHeaderCellDef>Statuses</mat-header-cell>
-          <mat-cell *matCellDef="let element">{{ element.statuses }}</mat-cell>
-        </ng-container>
-
-        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-
-        <!-- Row shown when there is no matching data. -->
-        <mat-row *matNoDataRow>
-          <mat-cell colspan="4">No domains found</mat-cell>
-        </mat-row>
-      </mat-table>
-      <mat-paginator
-        [length]="totalResults"
-        [pageIndex]="pageNumber"
-        [pageSize]="resultsPerPage"
-        [pageSizeOptions]="[10, 25, 50, 100, 500]"
-        (page)="onPageChange($event)"
-        aria-label="Select page of domain results"
-        showFirstLastButtons
-      ></mat-paginator>
     </div>
     }
   </div>
diff --git a/console-webapp/src/app/domains/domainList.component.scss b/console-webapp/src/app/domains/domainList.component.scss
index 66c8b3eb4..2ec66a1f6 100644
--- a/console-webapp/src/app/domains/domainList.component.scss
+++ b/console-webapp/src/app/domains/domainList.component.scss
@@ -18,11 +18,6 @@
     right: 0;
   }
 
-  &__domains {
-    width: 100%;
-    overflow: auto;
-  }
-
   &__domains-filter {
     min-width: $min-width !important;
     width: 100%;
@@ -30,7 +25,6 @@
 
   &__domains-table-parent {
     position: relative;
-    width: fit-content;
     min-width: 100%;
   }
 
diff --git a/console-webapp/src/app/header/header.component.scss b/console-webapp/src/app/header/header.component.scss
index a0e52456e..63fe447e1 100644
--- a/console-webapp/src/app/header/header.component.scss
+++ b/console-webapp/src/app/header/header.component.scss
@@ -16,11 +16,11 @@
   &__logo {
     color: inherit;
     text-decoration: none;
-    margin-left: -10px;
+    margin-left: -15px;
   }
   &__menu-btn {
-    width: 25px;
-    height: 25px;
+    width: 30px;
+    height: 30px;
     padding: 0;
   }
   &__header {
@@ -32,9 +32,6 @@
       margin-bottom: 10px;
     }
 
-    @media (max-width: 480px) {
-    }
-
     &-user-icon {
       margin-left: 20px;
     }
diff --git a/console-webapp/src/app/navigation/navigation.component.scss b/console-webapp/src/app/navigation/navigation.component.scss
index aa73db9b2..89baf72a3 100644
--- a/console-webapp/src/app/navigation/navigation.component.scss
+++ b/console-webapp/src/app/navigation/navigation.component.scss
@@ -44,10 +44,10 @@ $expand-icon-size: 26px;
 
       &:hover {
         background-color: var(--light-highlight);
-        border-radius: 0 25px 25px 0;
+        border-radius: 0 15px 15px 0;
       }
       &.active {
-        border-radius: 0 25px 25px 0;
+        border-radius: 0 15px 15px 0;
         background-color: var(--lightest);
       }
     }
diff --git a/console-webapp/src/app/registrar/registrarSelector.component.html b/console-webapp/src/app/registrar/registrarSelector.component.html
index 6a4e3f531..9dca6be2f 100644
--- a/console-webapp/src/app/registrar/registrarSelector.component.html
+++ b/console-webapp/src/app/registrar/registrarSelector.component.html
@@ -1,5 +1,5 @@
 <div class="console-app__registrar">
-  <mat-form-field class="example-full-width" appearance="outline">
+  <mat-form-field class="field-small" appearance="outline">
     <mat-label>Registrar</mat-label>
     <input
       type="text"
diff --git a/console-webapp/src/app/registrar/registrarsTable.component.html b/console-webapp/src/app/registrar/registrarsTable.component.html
index 5484322f7..4ac991c82 100644
--- a/console-webapp/src/app/registrar/registrarsTable.component.html
+++ b/console-webapp/src/app/registrar/registrarsTable.component.html
@@ -14,41 +14,50 @@
       Add new registrar
     </button>
   </div>
-  <mat-form-field class="console-app__registrars-filter">
-    <mat-label>Search</mat-label>
-    <input
-      matInput
-      (keyup)="applyFilter($event)"
-      placeholder="..."
-      type="search"
-    />
-    <mat-icon matPrefix>search</mat-icon>
-  </mat-form-field>
-  <mat-table
-    [dataSource]="dataSource"
-    class="mat-elevation-z0"
-    class="console-app__registrars-table"
-    matSort
-  >
-    <ng-container
-      *ngFor="let column of columns"
-      [matColumnDef]="column.columnDef"
-    >
-      <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"
-      (click)="openDetails(row.registrarId)"
-    ></mat-row>
-  </mat-table>
+  <div class="console-app__scrollable-wrapper">
+    <div class="console-app__scrollable">
+      <mat-form-field class="console-app__registrars-filter">
+        <mat-label>Search</mat-label>
+        <input
+          matInput
+          (keyup)="applyFilter($event)"
+          placeholder="..."
+          type="search"
+        />
+        <mat-icon matPrefix>search</mat-icon>
+      </mat-form-field>
+      <mat-table
+        [dataSource]="dataSource"
+        class="mat-elevation-z0"
+        class="console-app__registrars-table"
+        matSort
+      >
+        <ng-container
+          *ngFor="let column of columns"
+          [matColumnDef]="column.columnDef"
+        >
+          <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"
+          (click)="openDetails(row.registrarId)"
+        ></mat-row>
+      </mat-table>
 
-  <mat-paginator
-    class="mat-elevation-z0"
-    [pageSizeOptions]="[5, 10, 20]"
-    showFirstLastButtons
-  ></mat-paginator>
+      <mat-paginator
+        class="mat-elevation-z0"
+        [pageSizeOptions]="[5, 10, 20]"
+        showFirstLastButtons
+      ></mat-paginator>
+    </div>
+  </div>
 </div>
 
 }
diff --git a/console-webapp/src/app/registrar/registrarsTable.component.scss b/console-webapp/src/app/registrar/registrarsTable.component.scss
index 896b4c34e..ab50d9586 100644
--- a/console-webapp/src/app/registrar/registrarsTable.component.scss
+++ b/console-webapp/src/app/registrar/registrarsTable.component.scss
@@ -1,11 +1,6 @@
 .console-app {
   $min-width: 756px;
 
-  &__registrars {
-    width: 100%;
-    overflow: auto;
-  }
-
   &__registrars-filter {
     min-width: $min-width !important;
     width: 100%;
diff --git a/console-webapp/src/styles.scss b/console-webapp/src/styles.scss
index 96ec70f24..89ceaac57 100644
--- a/console-webapp/src/styles.scss
+++ b/console-webapp/src/styles.scss
@@ -70,4 +70,11 @@ body {
   .mat-mdc-list-item-unscoped-content {
     display: flex;
   }
+
+  &__scrollable {
+    overflow-x: auto;
+    &-wrapper {
+      overflow-x: hidden;
+    }
+  }
 }
diff --git a/console-webapp/src/theme.scss b/console-webapp/src/theme.scss
index 25ac2b987..5fd081a01 100644
--- a/console-webapp/src/theme.scss
+++ b/console-webapp/src/theme.scss
@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "@angular/material" as mat;
+@use "@material/textfield";
 
 $secondary-color: #80868b;
 $border-color: #dadce0;
@@ -131,13 +132,7 @@ $theme: mat.define-theme(
 html {
   @include mat.all-component-themes($theme);
   @include mat.typography-hierarchy($typographyConfig);
-  @include mat.form-field-theme(
-    mat.define-theme(
-      (
-        density: (
-          scale: -3,
-        ),
-      )
-    )
-  );
+  .field-small {
+    @include mat.form-field-density(-3);
+  }
 }