From 829abfa412b36974b30d79beae1fe396bcddca30 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Tue, 18 Feb 2025 10:31:52 +0000
Subject: [PATCH] Adds new design for test run page for statuses before "In
 progress"

---
 .../components/spinner/spinner.component.scss |  34 ++---
 .../testrun-status-card.component.html        |  63 ++++++---
 .../testrun-status-card.component.scss        | 123 ++++++++++++------
 .../testrun-status-card.component.spec.ts     |  12 +-
 .../testrun-status-card.component.ts          |   2 +-
 .../app/pages/testrun/testrun.component.html  |  38 +++---
 .../app/pages/testrun/testrun.component.scss  |  41 +++---
 .../pages/testrun/testrun.component.spec.ts   |  20 +--
 modules/ui/src/theming/colors.scss            |   1 +
 modules/ui/src/theming/variables.scss         |   1 +
 10 files changed, 200 insertions(+), 135 deletions(-)

diff --git a/modules/ui/src/app/components/spinner/spinner.component.scss b/modules/ui/src/app/components/spinner/spinner.component.scss
index 6ec8eeebe..8d582b0dd 100644
--- a/modules/ui/src/app/components/spinner/spinner.component.scss
+++ b/modules/ui/src/app/components/spinner/spinner.component.scss
@@ -16,22 +16,24 @@
   justify-content: center;
 }
 
-.loader {
-  width: 36px;
-  height: 36px;
-  border: 4px solid mat.get-theme-color($light-theme, primary, 40);
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
+::ng-deep {
+  .loader {
+    width: 36px;
+    height: 36px;
+    border: 4px solid mat.get-theme-color($light-theme, primary, 40);
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
   }
-  100% {
-    transform: rotate(360deg);
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 }
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
index ca8009264..49f6755b1 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
+++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
@@ -16,18 +16,28 @@
 <ng-container *ngIf="systemStatus as data">
   <div
     class="progress-card"
-    [class.progress-card-pilot]="data.device.test_pack === TestingType.Pilot"
     [ngClass]="getClass(data.status, data.result)"
+    [class.progress-card-pilot]="data.device.test_pack === TestingType.Pilot"
     aria-live="assertive"
     role="alert">
-    <div>
-      <p class="progress-card-status-title">Test status</p>
-      <p class="progress-card-status-text">
-        <span>{{ getTestStatus(data) }}</span>
+    <div class="progress-card-info progress-card-info-tests">
+      <p class="progress-card-info-title">Tests executed</p>
+      <p class="progress-card-info-text">
         <span>{{ getTestsResult(data) }}</span>
       </p>
     </div>
-    <div *ngIf="!data.finished" [ngSwitch]="data.status">
+
+    <div class="progress-card-info progress-card-info-status">
+      <p class="progress-card-info-title">Status</p>
+      <p class="progress-card-info-text">
+        <span>{{ getTestStatus(data) }}</span>
+      </p>
+    </div>
+
+    <div
+      *ngIf="!data.finished"
+      class="progress-card-status"
+      [ngSwitch]="data.status">
       <ng-container
         *ngSwitchCase="StatusOfTestrun.Validating"
         [ngTemplateOutlet]="Validating">
@@ -63,6 +73,7 @@
           "></ng-container
       ></ng-container>
     </div>
+
     <ng-container *ngIf="data.finished">
       <ng-container *ngIf="data.status !== StatusOfTestrun.InProgress">
         <ng-container
@@ -85,6 +96,7 @@
     </ng-container>
   </div>
 </ng-container>
+
 <ng-template #InProgress let-data="data">
   <mat-progress-bar
     class="progress-bar"
@@ -103,23 +115,42 @@
 </ng-template>
 
 <ng-template #WaitingForDevice>
-  <div>
-    <p class="progress-card-result-title">
-      Please connect and power on your device
-    </p>
-  </div>
+  <ng-container
+    *ngTemplateOutlet="
+      Spinner;
+      context: {
+        text: 'Please connect and power on your device',
+      }
+    "></ng-container>
 </ng-template>
 
 <ng-template #Validating>
-  <div>
-    <p class="progress-card-result-title">Validating virtual network</p>
-  </div>
+  <ng-container
+    *ngTemplateOutlet="
+      Spinner;
+      context: {
+        text: 'Validating virtual network',
+      }
+    "></ng-container>
 </ng-template>
 
 <ng-template #Monitoring>
-  <div>
+  <ng-container
+    *ngTemplateOutlet="
+      Spinner;
+      context: {
+        text: 'Please wait, this could take a few minutes',
+      }
+    "></ng-container>
+</ng-template>
+
+<ng-template #Spinner let-text="text">
+  <div class="progress-card-result-loading">
+    <div class="spinner-container">
+      <span class="loader"></span>
+    </div>
     <p class="progress-card-result-title">
-      Please wait, this could take a few minutes
+      {{ text }}
     </p>
   </div>
 </ng-template>
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss
index b56657caf..f54554db8 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss
+++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss
@@ -16,74 +16,119 @@
 @use 'node_modules/@angular/material/index' as mat;
 @use 'm3-theme' as *;
 @use 'colors';
+@use 'variables';
 
 :host {
   height: auto;
   min-height: 152px;
 }
 
-.progress-card {
+@mixin progress-card-info($background-color, $title-color, $text-color) {
+  border-radius: variables.$corner-extra-large;
+  padding: 32px 56px 32px 56px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  min-width: 295px;
+  align-items: start;
+  background-color: $background-color;
+  box-sizing: border-box;
+
+  .progress-card-info-title {
+    font-family: variables.$font-text;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+    color: $title-color;
+  }
+
+  .progress-card-info-text {
+    font-family: variables.$font-primary;
+    font-size: 28px;
+    line-height: 36px;
+    font-weight: 400;
+    color: $text-color;
+  }
+}
+
+.progress-card {
+  display: grid;
+  grid-template-areas:
+    'tests status'
+    '. .';
   width: fit-content;
-  height: 100%;
-  min-height: 152px;
   box-sizing: border-box;
-  padding: 16px 32px;
+  gap: 16px;
+  padding: 16px 0;
 
-  &-pilot {
-    gap: 6px;
+  p {
+    margin: 0;
+  }
+
+  .progress-bar {
+    padding-bottom: 28px;
   }
 
-  &.progress {
-    background-color: mat.get-theme-color($light-theme, primary, 30);
+  &.progress .progress-card-info-status {
+    background-color: colors.$primary;
   }
 
-  &.completed-success {
+  &.completed-success .progress-card-info-status {
     background-color: #188038; /* TODO update with variable*/
   }
 
-  &.completed-failed {
+  &.completed-failed .progress-card-info-status {
     background-color: colors.$red-800;
   }
 
-  &.canceled {
+  &.canceled .progress-card-info-status {
     background-color: colors.$secondary;
   }
+}
 
-  p {
-    margin: 0;
-  }
+.progress-card-info-tests {
+  grid-area: tests;
+  @include progress-card-info(
+    colors.$surface-variant,
+    colors.$on-surface-variant,
+    colors.$on-surface
+  );
+  justify-self: end;
+  width: 213px;
+}
 
-  .progress-card-status-title,
-  .progress-card-result-title {
-    color: colors.$white;
-    font-size: 14px;
-    line-height: 20px;
-    white-space: normal;
-  }
+.progress-card-info-status {
+  grid-area: status;
+  @include progress-card-info(
+    colors.$primary,
+    colors.$primary-container,
+    colors.$on-primary
+  );
+  justify-self: start;
+  width: 343px;
 
-  .progress-card-result-title {
-    width: 295px;
+  &-pilot {
+    gap: 6px;
   }
+}
 
-  .progress-card-status-text,
-  .progress-card-result-text {
-    display: flex;
-    justify-content: space-between;
-    color: colors.$white;
-    font-size: 24px;
-    font-weight: 400;
-    line-height: 32px;
-  }
+.progress-card-status {
+  overflow: hidden;
+  grid-area: 2/1/2/3;
+  max-width: max-content;
+  white-space: normal;
+}
 
-  .progress-card-status-text {
-    gap: 12px;
+.progress-card-result-loading {
+  border-radius: variables.$corner-extra-extra-large;
+  padding: 32px 48px 32px 48px;
+  background-color: colors.$secondary-container;
+  color: colors.$on-secondary-container;
+  display: flex;
+  align-items: center;
+  .loader {
+    width: 40px;
+    height: 40px;
   }
-
-  .progress-bar {
-    padding-bottom: 28px;
+  .progress-card-result-title {
+    margin-left: 32px;
   }
 }
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts
index 8566e486a..81467b207 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts
@@ -162,7 +162,7 @@ describe('ProgressStatusCardComponent', () => {
       });
 
       it('should return empty string if no data', () => {
-        const expectedResult = '';
+        const expectedResult = '-/-';
 
         const result = component.getTestsResult({} as TestrunStatus);
 
@@ -289,7 +289,7 @@ describe('ProgressStatusCardComponent', () => {
 
       it('should have progress card status text as "Incomplete"', () => {
         const progressCardStatusText = compiled.querySelector(
-          '.progress-card-status-text > span'
+          '.progress-card-info-status .progress-card-info-text > span'
         );
 
         expect(progressCardStatusText).not.toBeNull();
@@ -325,7 +325,7 @@ describe('ProgressStatusCardComponent', () => {
 
       it('should have progress card status text as "In Progress"', () => {
         const progressCardStatusText = compiled.querySelector(
-          '.progress-card-status-text > span'
+          '.progress-card-info-status .progress-card-info-text > span'
         );
 
         expect(progressCardStatusText).not.toBeNull();
@@ -382,7 +382,7 @@ describe('ProgressStatusCardComponent', () => {
 
       it('should have progress card status text as "Waiting for Device"', () => {
         const progressCardStatusText = compiled.querySelector(
-          '.progress-card-status-text > span'
+          '.progress-card-info-status .progress-card-info-text > span'
         );
 
         expect(progressCardStatusText).not.toBeNull();
@@ -421,9 +421,9 @@ describe('ProgressStatusCardComponent', () => {
         );
       });
 
-      it('should have progress card status text as "Waiting for Device"', () => {
+      it('should have progress card status text as "Monitoring"', () => {
         const progressCardStatusText = compiled.querySelector(
-          '.progress-card-status-text > span'
+          '.progress-card-info-status .progress-card-info-text > span'
         );
 
         expect(progressCardStatusText).not.toBeNull();
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts
index beb6dfab9..cafeb6e16 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts
+++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts
@@ -107,7 +107,7 @@ export class TestrunStatusCardComponent {
         }`;
       }
     }
-    return '';
+    return '-/-';
   }
 
   public getTestStatus(data: TestrunStatus): string {
diff --git a/modules/ui/src/app/pages/testrun/testrun.component.html b/modules/ui/src/app/pages/testrun/testrun.component.html
index ef9229a85..9a8ec38bd 100644
--- a/modules/ui/src/app/pages/testrun/testrun.component.html
+++ b/modules/ui/src/app/pages/testrun/testrun.component.html
@@ -25,17 +25,6 @@
       <mat-toolbar class="progress-toolbar">
         <div class="toolbar-col-left">
           <div class="toolbar-row top">
-            <ng-container
-              *ngTemplateOutlet="
-                startNewTestrunButton;
-                context: {
-                  hasDevices: vm.hasDevices,
-                  systemStatus: vm.systemStatus,
-                  isAllDevicesOutdated: vm.isAllDevicesOutdated,
-                }
-              "></ng-container>
-          </div>
-          <div class="toolbar-row bottom">
             <h2
               class="title progress-title"
               tabindex="-1"
@@ -56,34 +45,37 @@
                 >{{ tag }}</span
               >
             </span>
-            <button
-              *ngIf="isTestrunInProgress(data.status)"
-              (click)="openStopTestrunDialog(vm.systemStatus)"
-              class="stop-button"
-              aria-label="Stop testrun"
-              color="warn"
-              mat-flat-button>
-              Stop
-            </button>
+          </div>
+          <div class="toolbar-row bottom">
             <app-download-options
               *ngIf="data.report"
               [data]="data"
               [profiles]="vm.profiles"></app-download-options>
+            <app-testrun-status-card [systemStatus]="vm.systemStatus">
+            </app-testrun-status-card>
           </div>
         </div>
-        <app-testrun-status-card [systemStatus]="vm.systemStatus">
-        </app-testrun-status-card>
       </mat-toolbar>
       <section
+        *ngIf="!resultIsEmpty(data.tests)"
         class="progress-table"
         [class.progress-table-progress-empty]="
-          isTestrunInProgress(data.status) && resultIsEmpty(data.tests)
+          isTestrunInProgress(data.status)
         ">
         <app-testrun-table
           [dataSource]="vm.dataSource"
           [stepsToResolveCount]="vm.stepsToResolveCount"></app-testrun-table>
         <app-spinner></app-spinner>
       </section>
+      <button
+        *ngIf="isTestrunInProgress(data.status)"
+        (click)="openStopTestrunDialog(vm.systemStatus)"
+        class="stop-button"
+        aria-label="Stop testrun"
+        color="warn"
+        mat-flat-button>
+        Stop
+      </button>
     </ng-container>
     <ng-container *ngIf="!data.started">
       <ng-container *ngTemplateOutlet="empty"></ng-container>
diff --git a/modules/ui/src/app/pages/testrun/testrun.component.scss b/modules/ui/src/app/pages/testrun/testrun.component.scss
index 3e5d0a5a5..fcc61c103 100644
--- a/modules/ui/src/app/pages/testrun/testrun.component.scss
+++ b/modules/ui/src/app/pages/testrun/testrun.component.scss
@@ -75,9 +75,11 @@
   .toolbar-col-left {
     display: flex;
     flex-direction: column;
+    align-items: center;
     flex: 1;
     min-width: 0;
-    padding: 0 32px 0 0;
+    padding: 48px 20px 32px 20px;
+    gap: 12px;
   }
 
   .toolbar-row {
@@ -86,32 +88,23 @@
 
     &.top {
       gap: 15px;
-      padding: 10px 0;
-
+      position: relative;
       button {
         flex-shrink: 0;
       }
     }
 
     &.bottom {
-      gap: 16px;
-      padding: 24px 0 8px;
-
       p {
         margin: 0;
       }
     }
   }
-
-  .vertical-divider {
-    width: 1px;
-    height: 35px;
-    background-color: colors.$lighter-grey;
-    flex-shrink: 0;
-  }
 }
 
 .progress-title {
+  font-size: 45px !important;
+  line-height: 52px !important;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -123,11 +116,13 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-left: -10px;
+  margin-left: 10px;
+  position: absolute;
+  left: 100%;
 }
 
 .toolbar-tag {
-  background-color: mat.get-theme-color($light-theme, primary, 25);
+  background-color: colors.$primary;
   color: colors.$white;
   font-family: variables.$font-primary;
   font-size: 8px;
@@ -143,18 +138,16 @@
   }
 }
 
-.report-button,
 .stop-button {
-  letter-spacing: 0.25px;
-  padding: 0 24px;
+  // styles to be updated
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
 }
 
-.report-button {
-  background-color: mat.get-theme-color($light-theme, primary, 95);
-  color: mat.get-theme-color($light-theme, primary, 30);
-  & ::ng-deep .mat-mdc-button-touch-target {
-    height: auto;
-  }
+.stop-button {
+  letter-spacing: 0.25px;
+  padding: 0 24px;
 }
 
 .progress-table {
diff --git a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
index eb4f84d16..a7242e4fb 100644
--- a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
@@ -450,12 +450,12 @@ describe('TestrunComponent', () => {
         expect(openDialogSpy).toHaveBeenCalled();
       });
 
-      it('should have disabled "Start" button', () => {
+      it('should not have "Start" button', () => {
         const startBtn = compiled.querySelector(
           '.start-button'
         ) as HTMLButtonElement;
 
-        expect(startBtn.disabled).toBeTrue();
+        expect(startBtn).toBeNull();
       });
 
       it('should not have "Download" options', () => {
@@ -490,12 +490,12 @@ describe('TestrunComponent', () => {
         expect(stopBtn).toBeNull();
       });
 
-      it('should have enabled "Start" button', () => {
+      it('should not have "Start" button', () => {
         const startBtn = compiled.querySelector(
           '.start-button'
         ) as HTMLButtonElement;
 
-        expect(startBtn.disabled).toBeFalse();
+        expect(startBtn).toBeNull();
       });
 
       it('should have "Download" options', () => {
@@ -515,12 +515,12 @@ describe('TestrunComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should have enabled "Start" button', () => {
+      it('should not have "Start" button', () => {
         const startBtn = compiled.querySelector(
           '.start-button'
         ) as HTMLButtonElement;
 
-        expect(startBtn.disabled).toBeFalse();
+        expect(startBtn).toBeNull();
       });
 
       it('should not have "Download" options', () => {
@@ -566,12 +566,12 @@ describe('TestrunComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should have disabled "Start" button', () => {
+      it('should not have "Start" button', () => {
         const startBtn = compiled.querySelector(
           '.start-button'
         ) as HTMLButtonElement;
 
-        expect(startBtn.disabled).toBeTrue();
+        expect(startBtn).toBeNull();
       });
     });
 
@@ -586,12 +586,12 @@ describe('TestrunComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should have disabled "Start" button', () => {
+      it('should not have "Start" button', () => {
         const startBtn = compiled.querySelector(
           '.start-button'
         ) as HTMLButtonElement;
 
-        expect(startBtn.disabled).toBeTrue();
+        expect(startBtn).toBeNull();
       });
 
       it('should have "Stop" button', () => {
diff --git a/modules/ui/src/theming/colors.scss b/modules/ui/src/theming/colors.scss
index a7dfac9ba..a56bc19fa 100644
--- a/modules/ui/src/theming/colors.scss
+++ b/modules/ui/src/theming/colors.scss
@@ -84,6 +84,7 @@ $on-tertiary-fixed-variant: mat.get-theme-color($light-theme, tertiary, 30);
 
 $surface-dim: #d3dbe5;
 $surface: mat.get-theme-color($light-theme, neutral, 100);
+$surface-variant: mat.get-theme-color($light-theme, neutral-variant, 90);
 $surface-bright: mat.get-theme-color($light-theme, neutral, 100);
 $surface-container-lowest: mat.get-theme-color($light-theme, neutral, 100);
 $surface-container-low: #f8fafd;
diff --git a/modules/ui/src/theming/variables.scss b/modules/ui/src/theming/variables.scss
index a9415a167..f772b27cf 100644
--- a/modules/ui/src/theming/variables.scss
+++ b/modules/ui/src/theming/variables.scss
@@ -19,6 +19,7 @@ $form-max-width: 732px;
 $icon-size: 24px;
 $corner-large: 16px;
 $corner-extra-large: 28px;
+$corner-extra-extra-large: 48px;
 $corner-medium: 12px;
 $reports-table-header-size: 32px;