From f5e181883321524bb25d1500f2c6a650b9388d53 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Wed, 9 Apr 2025 12:10:15 +0000
Subject: [PATCH 1/2] Fix style for status card, change style for Cancelling
 status

---
 .../testrun-status-card.component.html        | 63 ++++++++++---------
 .../testrun-status-card.component.scss        | 22 +++----
 2 files changed, 45 insertions(+), 40 deletions(-)

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 feea24147..b4cce1cf9 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
@@ -20,35 +20,38 @@
     [class.progress-card-pilot]="data.device.test_pack === TestingType.Pilot"
     aria-live="assertive"
     role="alert">
-    <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 class="progress-card-info progress-card-info-status">
-      <div>
-        <p class="progress-card-info-title">{{ getTestStatusText(data) }}</p>
+    <div class="progress-card-header">
+      <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>{{ getTestStatus(data) }}</span>
+          <span>{{ getTestsResult(data) }}</span>
         </p>
       </div>
-      <div
-        *ngIf="
-          data.finished &&
-          (data.status === StatusOfTestrun.Proceed ||
-            data.status === StatusOfTestrun.DoNotProceed)
-        ">
-        <p class="progress-card-info-title">Preliminary Pilot Recommendation</p>
-        <p class="progress-card-info-text">
-          <span>{{ data.status }}</span>
-        </p>
+
+      <div class="progress-card-info progress-card-info-status">
+        <div>
+          <p class="progress-card-info-title">{{ getTestStatusText(data) }}</p>
+          <p class="progress-card-info-text">
+            <span>{{ getTestStatus(data) }}</span>
+          </p>
+        </div>
+        <div
+          *ngIf="
+            data.finished &&
+            (data.status === StatusOfTestrun.Proceed ||
+              data.status === StatusOfTestrun.DoNotProceed)
+          ">
+          <p class="progress-card-info-title">
+            Preliminary Pilot Recommendation
+          </p>
+          <p class="progress-card-info-text">
+            <span>{{ data.status }}</span>
+          </p>
+        </div>
       </div>
     </div>
-
     <div
-      *ngIf="!data.finished"
+      *ngIf="!data.finished && data.status !== StatusOfTestrun.InProgress"
       class="progress-card-status"
       [ngSwitch]="data.status">
       <ng-container
@@ -87,11 +90,13 @@
 </ng-container>
 
 <ng-template #Cancelling>
-  <div>
-    <p class="progress-card-result-title">
-      Please wait, this operation could take up to a minute
-    </p>
-  </div>
+  <ng-container
+    *ngTemplateOutlet="
+      Spinner;
+      context: {
+        text: 'Please wait, this operation could take up to a minute',
+      }
+    "></ng-container>
 </ng-template>
 
 <ng-template #WaitingForDevice>
@@ -136,7 +141,7 @@
 </ng-template>
 
 <ng-template #WithProgressBar let-data="data">
-  <div class="progress-card-status">
+  <div class="progress-card-status progress-card-status-bar">
     <mat-progress-bar
       class="progress-bar"
       mode="determinate"
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 85ac68951..c8ce53859 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
@@ -51,19 +51,23 @@
 
 .progress-card {
   display: grid;
-  grid-template-areas:
-    'tests status'
-    '. .';
   width: fit-content;
   box-sizing: border-box;
   gap: 16px;
   padding: 16px 0;
-  grid-template-columns: min-content 1fr;
+  justify-items: center;
 
   p {
     margin: 0;
   }
 
+  .progress-card-header {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    column-gap: 16px;
+  }
+
   .progress-bar {
     padding-bottom: 28px;
     width: 100%;
@@ -120,17 +124,14 @@
 }
 
 .progress-card-info-tests {
-  grid-area: tests;
   @include progress-card-info(
     colors.$surface-variant,
     colors.$on-surface-variant,
     colors.$on-surface
   );
-  justify-self: end;
 }
 
 .progress-card-info-status {
-  grid-area: status;
   @include progress-card-info(
     colors.$primary,
     colors.$primary-container,
@@ -138,7 +139,6 @@
   );
   flex-direction: row;
   gap: 32px;
-  justify-self: start;
 
   &-pilot {
     gap: 6px;
@@ -154,10 +154,10 @@
 
 .progress-card-status {
   overflow: hidden;
-  grid-area: 2/1/2/3;
   white-space: normal;
-  justify-self: center;
-  width: 100%;
+  &-bar {
+    width: 100%;
+  }
 }
 
 .progress-card-result-loading {

From 9f9f2e3498e64e518a50814d5aaffcb0063335e5 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Wed, 9 Apr 2025 12:27:29 +0000
Subject: [PATCH 2/2] Fix tests

---
 .../testrun-status-card.component.spec.ts                   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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 78247952b..afa023933 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
@@ -478,8 +478,10 @@ describe('ProgressStatusCardComponent', () => {
           '.progress-card-info-status .progress-card-info-text'
         )[1];
 
-        expect(titleEl.textContent).toEqual('Preliminary Pilot Recommendation');
-        expect(textEl.textContent).toEqual('Proceed');
+        expect(titleEl.textContent?.trim()).toEqual(
+          'Preliminary Pilot Recommendation'
+        );
+        expect(textEl.textContent?.trim()).toEqual('Proceed');
       });
     });
   });